The MetaMask SDK React UI allows developer an easier integration to the MetaMask SDK on React-based apps.
On top of exporting the hooks from @metamask/sdk-react, it also provides wrapper around wagmi hooks and a basic UI button component to connect to MetaMask.
Install the ui sdk package:
yarn add @metamask/sdk-react-ui
Wrap your application in the provider
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { MetaMaskUIProvider } from '@metamask/sdk-react-ui';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<MetaMaskUIProvider sdkOptions={{
dappMetadata: {
name: "Demo UI React App",
}
}}>
<App />
</MetaMaskUIProvider>
</React.StrictMode>
);Use the SDK in your components:
import { MetaMaskButton } from '@metamask/sdk-react-ui';
import React, { useState } from 'react';
export const App = () => {
return (
<div className="App">
<MetaMaskButton theme={'light'} color="white"></MetaMaskButton>
</div>
);
};Look for more examples at https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples
Contact the MetaMask SDK team for a complimentary design optimization workshop here