Summary

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

Note: it should be placed as high as possible in the component tree to guarantee that the component is always rendered.

Settings

PropDescription
variant?: ‘modal’ | ‘dropdown’;Specifies whether to show DynamicUserProfile as a centered modal or a dropdown. The component in the dropdown type renders relative to the parent. Defaults to modal.

Usage

Control opening and closing

You can simply call setShowDynamicUserProfile(boolean) to show or close the DynamicUserProfile.

import React from "react";
import {
  DynamicUserProfile,
  useDynamicContext
} from "@dynamic-labs/sdk-react-core";

export const Example = () => {
  const { setShowDynamicUserProfile } = useDynamicContext();
  return (
    <>
      <button onClick={() => setShowDynamicUserProfile(true)}>
        Click to open DynamicUserProfile!
      </button>
      <DynamicUserProfile />
    </>
  );
};

Callback at closing or opening

You can use the showDynamicUserProfile property to trigger the logic after opening/closing the widget.

import React from "react";
import {
  DynamicWidgetUserProfile,
  useDynamicContext
} from "@dynamic-labs/sdk-react-core";

export const Example = () => {
    const { showDynamicUserProfile } = useDynamicContext();
  React.useEffect(() => {
        if (showDynamicUserProfile) {
        /* On widget opens */
    }   else {
      /* On widget closes */
    }
  },
  [showDynamicUserProfile])
  return null;
}

Looking for Multi Wallet prompts?

Should your application require the presentation of multi-wallet prompts without incorporating the UserProfile, the DynamicMultiWalletPromptsWidget provides a straightforward alternative. This component enables the automatic display of wallet prompts independently of the UserProfile.