Link/Unlink a Wallet

Link a Wallet

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.

Wallet linking is currently only supported in React.

React

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, you can see how to find the available wallet keys in Find a Wallet Key.

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>
    )}
  </>
)

Using Dynamic Modals

React

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 />
    </>
  )
}

Unlink a Wallet

React

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>
);