Connect and disconnect

import { useConnectWallet, useConnectedWallets, useDiscoveredWallets } from "@usebutr/react";

const connect = useConnectWallet();
const discovered = useDiscoveredWallets();
const connected = useConnectedWallets();

const available = discovered.filter((d) => !connected.some((c) => c.connector.id === d.id));

{
  available.map((wallet) => (
    <button key={wallet.id} type="button" onClick={() => connect(wallet.id)}>
      Connect {wallet.name} ({wallet.chainPlatform})
    </button>
  ));
}

import { useConnectionStatus, useConnectionError } from "@usebutr/react";

const status = useConnectionStatus(); // "idle" | "connecting" | "success" | "error"
const error = useConnectionError(); // ConnectionError | null

{
  error ? (
    <p>
      {error.kind} — {error.message}
    </p>
  ) : null;
}

import { useDisconnectWallet } from "@usebutr/react";

const disconnect = useDisconnectWallet();
<button onClick={() => disconnect(wallet.connector.id)}>Disconnect</button>;