Logged-in Widget

The SDK offers a widget component to facilitate users connecting and disconnecting their active wallet. When the widget is used with an EVM wallet and your environment has multiple EVM networks configured, the widget will also offer network switching capabilities.

Setting up the component

Similar to DynamicAuthFlow you need to wrap it in a <DynamicContextProvider> . The widget has the following props:

Prop

Description

onAuthSuccess:
(params:
{ authToken: string; user: UserProfile; }
) => void

callback function called when the user successfully authenticates in the application

toolkitEnabled?: boolean

Show the demo toolkit to edit the theme of the modal. This should normally be false or undefined, unless you are testing the styling

import { DynamicContextProvider, DynamicWidget } from "@dynamic-labs/sdk-react";

const App = () => (
  <DynamicContextProvider
    settings={{
      appLogoUrl:
        'https://upload.wikimedia.org/wikipedia/commons/3/34/Examplelogo.svg',
      appName: 'Example App',
      environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
    }}
  >
    <DynamicWidget onAuthSuccess={() => console.log("connected!")} />
  </DynamicContextProvider>
);

export default App;

Demo

Connect your wallet to see the widget in action


Did this page help you?