Components Introduction

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

You can see the full UI implemented at any time in our demo environment: https://demo.dynamic.xyz

UI Components

You have the choice of using the all-in-one UI component (Dynamic Widget), or individual components. Note that the widget does not render the bridge widget, this must always be added separately.

You should never use the DynamicWidget and the standalone components together, except for the Bridge Widget.

Dynamic Widget

The DynamicWidget combines all three parts of the UI into one out of the box widget.

The three parts of the UI which are bundled into the Widget are listed below along with their standalone components if you wish to use them separately:

The Connect button

DynamicConnectButton is a standalone button to handle connecting wallets. It shows up by default with the text “Connect Wallet”.

The User Profile

DynamicUserProfile is responsible for displaying the dialog or dropdown of the user’s profile information, connected wallets, and more.

The Navigation

DynamicWidgetNav is responsible for rendering the network picker and the connected account field.

Dynamic Embedded Widget

DynamicEmbeddedWidget is a standalone component that renders the signup/login flow along with the user profile directly.

Bridge Widget

The DynamicBridgeWidget is a standalone component that renders a bridge UI so that users can bridge accross different chains.

The Multi Wallet Prompts Widget

The DynamicMultiWalletPromptsWidget displays the multi wallet prompts in a modal, useful when UserProfile is not available