> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Link/Unlink a Wallet

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

## Link a Wallet

### Using Our UI

You can allow the user to link a new wallet by using the [useDynamicModals](/react/reference/hooks/usedynamicmodals) hook and the `setShowLinkNewWalletModal` method.

<Note>You will need to also use the [DynamicMultiWalletPromptsWidget](/react/reference/components/dynamicmultiwalletpromptswidget) component</Note>

<Warning>
  Linking will fail if user is not fully logged in i.e. if they are missing info. See [Check for Missing User Info](/react/users/check-for-missing-info) for more information.
</Warning>

```tsx React theme={"system"}
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

<Note>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.</Note>

[useWalletOptions](/react/reference/hooks/wallets/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](/react/wallets/using-wallets/general/fetch-display-wallets#wallet-keys-when-you-need-them) for where to get those keys.

```tsx React theme={"system"}
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](/react/reference/hooks/usedynamiccontext) hook, specifically the `removeWallet` method.

```tsx React theme={"system"}
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>
);
```