Use MetaMask SDK with React UI

Import MetaMask SDK into your React dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile. The @metamask/sdk-react-ui package not only exports hooks from @metamask/sdk-react, but also provides wrappers around wagmi hooks and a basic UI button component for connecting to MetaMask.

By combining the functions of @metamask/sdk-react and @metamask/sdk-react-ui, you can use both the core functionality and the pre-styled UI components to streamline the integration of MetaMask into your React dapp.

The SDK for React has the same prerequisites as for standard JavaScript.

Steps

1. Install the SDK

In your project directory, install the SDK using Yarn or npm:

yarn add @metamask/sdk-react-ui

or

npm i @metamask/sdk-react-ui

2. Import the SDK

In your project script, add the following to import the SDK:

index.js

import { MetaMaskUIProvider } from "@metamask/sdk-react-ui";

3. Wrap your project with MetaMaskUIProvider

Wrap your root component in a MetaMaskUIProvider. For example:

index.js

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: "Example React UI Dapp",
          url: window.location.href,
        },
        infuraAPIKey: process.env.INFURA_API_KEY,
        // Other options.
      }}
    >
      <App />
    </MetaMaskUIProvider>
  </React.StrictMode>
);

For the full list of options you can set for sdkOptions, see the JavaScript SDK options reference. Important options include:

• dappMetadata - Use this to display information about your dapp in the MetaMask connection modal.
• infuraAPIKey - Use this to make read-only RPC requests from your dapp.
• modals - Use this to customize the logic and UI of the displayed modals.

4. Use the SDK

Use the SDK by using the useSDK hook in your React components. See the instructions for @metamask/sdk-react.

5. Use the MetaMaskButton component

The @metamask/sdk-react-ui package provides a pre-styled button, MetaMaskButton, to initiate a connection to MetaMask. You can use it as follows:

App.js

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>
  );
};

MetaMaskButton properties

• theme: Set to light or dark to adapt to your dapp's theme.
• color: The color of the button. Accepts any valid CSS color string.

Example

You can copy the full React UI example to get started:

Root component

index.js

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: "Example React UI Dapp",
          url: window.location.href,
        },
        infuraAPIKey: process.env.INFURA_API_KEY,
        // Other options
      }}
    >
      <App />
    </MetaMaskUIProvider>
  </React.StrictMode>
);

React component

App.js

import {
  MetaMaskButton,
  useAccount,
  useSDK,
  useSignMessage,
} from "@metamask/sdk-react-ui";
import "./App.css";

function AppReady() {
  const {
    data: signData,
    isError: isSignError,
    isLoading: isSignLoading,
    isSuccess: isSignSuccess,
    signMessage,
  } = useSignMessage({
    message: "gm wagmi frens",
  });

  const { isConnected } = useAccount();

  return (
    <div className="App">
      <header className="App-header">
        <MetaMaskButton theme={"light"} color="white"></MetaMaskButton>
        {isConnected && (
          <>
            <div style={{ marginTop: 20 }}>
              <button
                disabled={isSignLoading}
                onClick={() => signMessage()}
              >
                Sign message
              </button>
              {isSignSuccess && <div>Signature: {signData}</div>}
              {isSignError && <div>Error signing message</div>}
            </div>
          </>
        )}
      </header>
    </div>
  );
}

function App() {
  const { ready } = useSDK();

  if (!ready) {
    return <div>Loading...</div>;
  }

  return <AppReady />;
}

export default App;

See the example React UI dapp in the JavaScript SDK GitHub repository for more information.