yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { KeyIcon } from "@heroicons/react/24/outline";
2import type { FC } from "react";
3import { Link } from "react-router";
4import type { Connector } from "wagmi";
5import { useAccount, useConnect, useDisconnect } from "wagmi";
6import cn from "@/helpers/cn";
7import getWalletDetails from "@/helpers/getWalletDetails";
8
9const WalletSelector: FC = () => {
10 const { connectAsync, connectors, isPending } = useConnect();
11 const { disconnect } = useDisconnect();
12 const { connector: activeConnector } = useAccount();
13
14 const allowedConnectors = [
15 "familyAccountsProvider",
16 "injected",
17 "walletConnect"
18 ];
19
20 const filteredConnectors = connectors
21 .filter((connector: any) => allowedConnectors.includes(connector.id))
22 .sort(
23 (a: Connector, b: Connector) =>
24 allowedConnectors.indexOf(a.id) - allowedConnectors.indexOf(b.id)
25 );
26
27 const handleConnect = async (connector: Connector) => {
28 try {
29 await connectAsync({ connector });
30 } catch {}
31 };
32
33 return activeConnector?.id ? (
34 <div className="space-y-2.5">
35 <button
36 className="flex items-center space-x-1 text-sm underline"
37 onClick={() => disconnect?.()}
38 type="reset"
39 >
40 <KeyIcon className="size-4" />
41 <div>Change wallet</div>
42 </button>
43 </div>
44 ) : (
45 <div className="inline-block w-full space-y-3 overflow-hidden text-left align-middle">
46 {filteredConnectors.map((connector: any) => {
47 return (
48 <button
49 className={cn(
50 {
51 "hover:bg-gray-100 dark:hover:bg-gray-700":
52 connector.id !== activeConnector?.id
53 },
54 "flex w-full items-center justify-between space-x-2.5 overflow-hidden rounded-xl border border-gray-200 px-4 py-3 outline-hidden dark:border-gray-700"
55 )}
56 disabled={connector.id === activeConnector?.id || isPending}
57 key={connector.id}
58 onClick={() => handleConnect(connector)}
59 type="button"
60 >
61 <span>{getWalletDetails(connector.id).name}</span>
62 <img
63 alt={connector.id}
64 className="size-6"
65 draggable={false}
66 height={24}
67 src={getWalletDetails(connector.id).logo}
68 width={24}
69 />
70 </button>
71 );
72 })}
73 <div className="linkify text-gray-500 text-sm">
74 By connecting wallet, you agree to our{" "}
75 <Link target="_blank" to="/terms">
76 Terms
77 </Link>{" "}
78 and{" "}
79 <Link target="_blank" to="/privacy">
80 Policy
81 </Link>
82 .
83 </div>
84 </div>
85 );
86};
87
88export default WalletSelector;