DynamicWidget

​

Summary

Once a user connects their wallet, you may want to display a navigation component to show the current wallet and connected network. Additionally, if you collected information during onboarding, you may want to display the user’s profile so they can edit their information, add additional wallets (if you enabled multiwallet), and more.

The DynamicWidget is the parent component that has all these features available in it. If you want to explore sub-components for more granular control, then see DynamicConnectButton DynamicUserProfile and the DynamicNav components.

If you need to embed the modal directly into your site without the need for button first, then we recommend exploring the EmbeddedWidget instead.

​

Settings

There are two settings available when you initialize the DynamicWidget in your App.

​

Examples

​

variant = modal

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

const App = () => (
  <DynamicContextProvider
     settings={{
       environmentId: 'Enter your Environment ID here'
    }}>
    <DynamicWidget variant='modal' />
  </DynamicContextProvider>
);

export default App;

​

variant = dropdown

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

const App = () => (
  <DynamicContextProvider
     settings={{
       environmentId: 'Enter your Environment ID here'
    }}>
    <DynamicWidget variant='dropdown' />
  </DynamicContextProvider>
);

export default App;