/ packages / frontend / src / components / common / ConnectWalletButton.tsx
ConnectWalletButton.tsx
 1  import { useConnectModal } from "@rainbow-me/rainbowkit";
 2  
 3  export default function ConnectWalletButton(
 4    { onClick, disabled }: { onClick?: () => void; disabled?: boolean },
 5  ) {
 6    const { openConnectModal } = useConnectModal();
 7    return (
 8      <button
 9        data-testid="rainbowkit-connect-wallet"
10        className={`rounded-lg flex flex-col items-center gap-2 ${
11          disabled ? "opacity-50" : ""
12        }`}
13        style={{ backgroundColor: "transparent", padding: 0 }}
14        onClick={onClick ?? openConnectModal}
15        type="button"
16        disabled={disabled}
17      >
18        <img
19          src="/icons/wallet-icon.svg"
20          width={40}
21          height={40}
22          alt="wallet-icon"
23          className="w-10 h-10"
24        />
25        <div className="flex gap-2 items-center">
26          <p>Connect wallet</p>
27          <img
28            src="/icons/chevron-right.svg"
29            width={12}
30            height={12}
31            alt="chevron"
32            className="w-3 h-3"
33          />
34        </div>
35      </button>
36    );
37  }