View your Wallet Inventory

 1  import { useOpenWalletModal } from "@0xsequence/wallet-widget";
 2  import { useOpenConnectModal } from "@0xsequence/connect";
 3  import { useAccount } from "wagmi";
 4  import { WalletConnectionDetail } from "~/components/wallet-connection-detail/WalletConnectionDetail";
 5  export const WalletInventoryWidget = () => {
 6    const { address } = useAccount();
 7    const { setOpenConnectModal } = useOpenConnectModal();
 8    const { setOpenWalletModal } = useOpenWalletModal();
 9    return (
10      <>
11        {address ? (
12          <div className="flex flex-col space-y-4">
13            <WalletConnectionDetail address={address} />
14            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
15              <button
16                onClick={() =>
17                  setOpenWalletModal(true, {
18                    defaultNavigation: { location: "search-tokens" },
19                  })
20                }
21                className="flex h-10 items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
22                aria-label="Open wallet tokens"
23              >
24                Open Wallet Tokens
25              </button>
26              <button
27                onClick={() =>
28                  setOpenWalletModal(true, {
29                    defaultNavigation: { location: "search-collectibles" },
30                  })
31                }
32                className="flex h-10 items-center justify-center rounded-md bg-purple-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
33                aria-label="Open wallet collectibles"
34              >
35                Open Wallet Collectibles
36              </button>
37            </div>
38          </div>
39        ) : (
40          <div className="flex flex-col items-center justify-center space-y-3 py-4">
41            <p>Not connected</p>
42            <button onClick={() => setOpenConnectModal(true)}>Connect</button>
43          </div>
44        )}
45      </>
46    );
47  };