Link/Unlink a Wallet

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.

Link a Wallet

Using Our UI

You can allow the user to link a new wallet by using the useDynamicModals hook and the setShowLinkNewWalletModal method.

You will need to also use the DynamicMultiWalletPromptsWidget component

Linking will fail if user is not fully logged in i.e. if they are missing info. See Check for Missing User Info for more information.

React

import {
  useDynamicModals,
  DynamicMultiWalletPromptsWidget,
} from '@dynamic-labs/sdk-react-core'

const LinkWallet = ({ text }: { text: string }) => {
  const { setShowLinkNewWalletModal } = useDynamicModals()

  return (
    <>
      <div className="link-wallet-container">
        <Button
          className="profile-button"
          onClick={() => setShowLinkNewWalletModal(true)}
        >
          {text}
        </Button>
      </div>
      <DynamicMultiWalletPromptsWidget />
    </>
  )
}

Using Your UI

If the user is not already logged in, it will trigger login with that wallet rather than linking. The difference between login and linking is that login will create a new user if one doesn’t exist, whereas linking will add the wallet to the existing user.

useWalletOptions provides a method called selectWalletOption that allows you to prompt the user to link using a specific wallet (by passing in the key).

This method takes a wallet key (the key field on a wallet option/provider). See Fetch & Display Wallets to Connect for where to get those keys.

React

import { useWalletOptions, useIsLoggedIn } from "@dynamic-labs/sdk-react-core";

const isLoggedIn = useIsLoggedIn();
const { selectWalletOption } = useWalletOptions();

const connectWithWallet = async (walletKey: string) => {
  return await selectWalletOption(walletKey)
}

return (
  <>
    {isLoggedIn ? (
      <button onClick={() => connectWithWallet('wallet-key')}>Link Wallet</button>
    ) : (
      <button onClick={() => connectWithWallet('wallet-key')}>Login</button>
    )}
  </>
)

Unlink a Wallet

Using Your UI

You can unlink a wallet by using the useDynamicContext hook, specifically the removeWallet method.

React

import { useDynamicContext, useUserWallets } from '@dynamic-labs/sdk-react-core'

const { removeWallet } = useDynamicContext();
const userWallets = useUserWallets();

return (
  <div>
    {userWallets.map(wallet => (
      <button
        key={wallet.id}
        onClick={() => removeWallet(wallet.id)}
      >
        Unlink {wallet.address}
      </button>
    ))}
  </div>
);