Link/Unlink a Wallet

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.

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

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

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

Unlink a Wallet

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

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

import { Tooltip } from 'react-tooltip'

const LinkedWallets = () => {
  const { handleUnlinkWallet } = useDynamicContext()

  const userWallets = useUserWallets()

  return (
    <>
      {userWallets.length > 0 && (
        <div className="profile-wallets-container">
          <h2>Connected Wallets</h2>
          {userWallets.length < 2 && <Tooltip id="unlink-tooltip" />}
          <div className="profile-wallets-inner-container">
            {userWallets.map((wallet) => (
              <Flex key={wallet.address}>
                <p>{wallet.address}</p>
                <Spacer />
                <a
                  data-tooltip-id="unlink-tooltip"
                  data-tooltip-content="Can't unlink your only wallet!"
                >
                  <Button
                    size="xs"
                    onClick={() => handleUnlinkWallet(wallet.id)}
                    disabled={userWallets.length < 2}
                  >
                    Unlink
                  </Button>
                </a>
              </Flex>
            ))}
          </div>
        </div>
      )}
    </>
  )
}