# Connect button

Now that we have our `WalletProvider`, let's use it to integrate the wallet connection button. 

The button will display "Connect wallet" when no wallet is connected, and the wallet address when a wallet is connected. Clicking on it will disconnect it. Just a simple UI trick.

Import the wallet context in `./components/NavBar.tsx`

```tsx
import { useWalletContext } from "./providers/WalletProvider"
```

Load connect, disconnect and account from the context: 

```tsx
const Menu = () => {
  const { connect, disconnect, account } = useWalletContext()
```

Replace the connect button logic with a conditional display: 

```tsx
{account ? (
  <Button
    sx={{ my: 2, color: "white" }}
    onClick={disconnect}
    startIcon={<CloseRounded />}
  >
    {account.address.substring(0, 5)}...
    {account.address.substring(account.address.length - 5)}
  </Button>
) : (
  <Button sx={{ my: 2, color: "white" }} onClick={connect}>
    Connect wallet
  </Button>
)}
```

You should now be able to connect and disconnect wallet using Beacon widget.

![](https://70811418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOcNwOC0ryCUDy3lUeuUL%2Fuploads%2FjmfoAjhWMEYYAgQmpNaS%2Fimage.png?alt=media\&token=3798a094-f543-4f25-ab88-a127d11ca7ad)

{% hint style="info" %}
With Next.js development mode and hot-reload, the beacon wallet may not recover properly and fire errors. If this happens. Disconnect the wallet, reload the page and connect again.&#x20;

This does not seem to happen with a production build.
{% endhint %}