From 814bdcedab2d26797a129e2a5927797a3de9f833 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Fri, 1 Dec 2023 16:06:42 +0100 Subject: [PATCH] Add AccountView component and Page --- .../dataViews/AccountView/BalancePill.tsx | 29 +++++ .../dataViews/AccountView/BalancesList.tsx | 46 +++++++ .../AccountView/ButtonConnectWallet.tsx | 122 ++++++++++++++++++ components/dataViews/AccountView/index.tsx | 101 +++++++++++++++ pages/[chainName]/account.tsx | 13 ++ 5 files changed, 311 insertions(+) create mode 100644 components/dataViews/AccountView/BalancePill.tsx create mode 100644 components/dataViews/AccountView/BalancesList.tsx create mode 100644 components/dataViews/AccountView/ButtonConnectWallet.tsx create mode 100644 components/dataViews/AccountView/index.tsx create mode 100644 pages/[chainName]/account.tsx diff --git a/components/dataViews/AccountView/BalancePill.tsx b/components/dataViews/AccountView/BalancePill.tsx new file mode 100644 index 0000000..c0df9a7 --- /dev/null +++ b/components/dataViews/AccountView/BalancePill.tsx @@ -0,0 +1,29 @@ +import { printableCoin } from "@/lib/displayHelpers"; +import { Coin } from "@cosmjs/amino"; +import { useChains } from "../../../context/ChainsContext"; +import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar"; +import { Badge } from "../../ui/badge"; + +interface BalancePillProps { + readonly coin: Coin; +} + +export default function BalancePill({ coin }: BalancePillProps) { + const { chain } = useChains(); + + const foundAsset = chain.assets.find((asset) => asset.base === coin.denom); + const logo = foundAsset?.logo_URIs?.svg || foundAsset?.logo_URIs?.png || ""; + const macroCoin = printableCoin(coin, chain); + + return ( + + + + + {coin.denom.slice(1, 2).toUpperCase()} + + + {macroCoin} + + ); +} diff --git a/components/dataViews/AccountView/BalancesList.tsx b/components/dataViews/AccountView/BalancesList.tsx new file mode 100644 index 0000000..5f8ab73 --- /dev/null +++ b/components/dataViews/AccountView/BalancesList.tsx @@ -0,0 +1,46 @@ +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Coin } from "@cosmjs/amino"; +import { StargateClient } from "@cosmjs/stargate"; +import { Dispatch, SetStateAction, useEffect, useState } from "react"; +import { useChains } from "../../../context/ChainsContext"; +import BalancePill from "./BalancePill"; + +interface BalancesListProps { + readonly walletAddress: string; + readonly setError: Dispatch>; +} + +export default function BalancesList({ walletAddress, setError }: BalancesListProps) { + const { chain } = useChains(); + const [balances, setBalances] = useState([]); + + useEffect(() => { + (async function () { + if (!walletAddress) { + return; + } + + try { + const client = await StargateClient.connect(chain.nodeAddress); + const newBalances = await client.getAllBalances(walletAddress); + setBalances(newBalances); + } catch (e: unknown) { + setError(e instanceof Error ? e.message : "Failed to get balances"); + console.error("Get balances error:", e); + } + })(); + }, [chain.nodeAddress, setError, walletAddress]); + + return balances.length ? ( + + + Balances + + + {balances.map((coin) => ( + + ))} + + + ) : null; +} diff --git a/components/dataViews/AccountView/ButtonConnectWallet.tsx b/components/dataViews/AccountView/ButtonConnectWallet.tsx new file mode 100644 index 0000000..02e23fa --- /dev/null +++ b/components/dataViews/AccountView/ButtonConnectWallet.tsx @@ -0,0 +1,122 @@ +import { LoadingStates, WalletInfo, WalletType } from "@/types/signing"; +import { makeCosmoshubPath } from "@cosmjs/amino"; +import { toBase64 } from "@cosmjs/encoding"; +import { LedgerSigner } from "@cosmjs/ledger-amino"; +import TransportWebUSB from "@ledgerhq/hw-transport-webusb"; +import { Loader2 } from "lucide-react"; +import Image from "next/image"; +import { Dispatch, SetStateAction, useCallback, useLayoutEffect, useState } from "react"; +import { useChains } from "../../../context/ChainsContext"; +import { getConnectError } from "../../../lib/errorHelpers"; +import { Button } from "../../ui/button"; + +interface ButtonConnectWalletProps { + readonly walletType: WalletType; + readonly walletInfoState: [ + WalletInfo | null | undefined, + Dispatch>, + ]; + readonly setError: Dispatch>; +} + +export default function ButtonConnectWallet({ + walletType, + walletInfoState: [walletInfo, setWalletInfo], + setError, +}: ButtonConnectWalletProps) { + const { chain } = useChains(); + const [loading, setLoading] = useState({}); + + const connectKeplr = useCallback(async () => { + try { + setError(""); + setLoading((oldLoading) => ({ ...oldLoading, keplr: true })); + + await window.keplr.enable(chain.chainId); + window.keplr.defaultOptions = { + sign: { preferNoSetFee: true, preferNoSetMemo: true, disableBalanceCheck: true }, + }; + + const { bech32Address: address, pubKey: pubKeyArray } = await window.keplr.getKey( + chain.chainId, + ); + const pubKey = toBase64(pubKeyArray); + + setWalletInfo({ type: "Keplr", address, pubKey }); + } catch (e) { + console.error(e); + setError(getConnectError(e)); + } finally { + setLoading((newLoading) => ({ ...newLoading, keplr: false })); + } + }, [chain.chainId, setError, setWalletInfo]); + + useLayoutEffect(() => { + if (!walletInfo?.address) { + return; + } + + const accountChangeKey = "keplr_keystorechange"; + + if (walletInfo.type === "Keplr") { + window.addEventListener(accountChangeKey, connectKeplr); + } else { + window.removeEventListener(accountChangeKey, connectKeplr); + } + }, [connectKeplr, walletInfo]); + + const connectLedger = async () => { + try { + setError(""); + setLoading((newLoading) => ({ ...newLoading, ledger: true })); + + const ledgerTransport = await TransportWebUSB.create(120000, 120000); + const offlineSigner = new LedgerSigner(ledgerTransport, { + hdPaths: [makeCosmoshubPath(0)], + prefix: chain.addressPrefix, + }); + + const [{ address, pubkey: pubKeyArray }] = await offlineSigner.getAccounts(); + const pubKey = toBase64(pubKeyArray); + + setWalletInfo({ type: "Ledger", address, pubKey }); + } catch (e) { + console.error(e); + setError(getConnectError(e)); + } finally { + setLoading((newLoading) => ({ ...newLoading, ledger: false })); + } + }; + + const onClick = (() => { + if (walletType === "Keplr") { + return connectKeplr; + } + + if (walletType === "Ledger") { + return connectLedger; + } + + return () => {}; + })(); + + const isLoading = + (walletType === "Keplr" && loading.keplr) || (walletType === "Ledger" && loading.ledger); + + return ( + + ); +} diff --git a/components/dataViews/AccountView/index.tsx b/components/dataViews/AccountView/index.tsx new file mode 100644 index 0000000..1d908b2 --- /dev/null +++ b/components/dataViews/AccountView/index.tsx @@ -0,0 +1,101 @@ +import BadgeWithCopy from "@/components/BadgeWithCopy"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; +import { explorerLinkAccount } from "@/lib/displayHelpers"; +import { WalletInfo } from "@/types/signing"; +import { AlertCircle, Unplug } from "lucide-react"; +import Image from "next/image"; +import { useState } from "react"; +import { useChains } from "../../../context/ChainsContext"; +import { Button } from "../../ui/button"; +import BalancesList from "./BalancesList"; +import ButtonConnectWallet from "./ButtonConnectWallet"; + +export default function AccountView() { + const { chain } = useChains(); + + const walletInfoState = useState(); + const [walletInfo, setWalletInfo] = walletInfoState; + const [error, setError] = useState(""); + + const explorerLink = + explorerLinkAccount(chain.explorerLink.account, walletInfo?.address || "") || ""; + + return ( +
+ + + + {walletInfo?.type ? ( + + ) : null} + {walletInfo?.type ? `${walletInfo.type} wallet connected` : "Connect wallet"} + + + {walletInfo ? ( + +

Address

+
+ + {explorerLink ? ( + + ) : null} +
+
+

PubKey

+ +
+ + ) : null} + + {error ? ( + + + Error + {error} + + ) : null} + {walletInfo?.type ? ( + + ) : ( +
+ + +
+ )} + + + {walletInfo?.address ? ( + + ) : null} +
+ ); +} diff --git a/pages/[chainName]/account.tsx b/pages/[chainName]/account.tsx new file mode 100644 index 0000000..b75ed65 --- /dev/null +++ b/pages/[chainName]/account.tsx @@ -0,0 +1,13 @@ +import AccountView from "@/components/dataViews/AccountView"; +import Page from "@/components/layout/Page"; +import { useChains } from "@/context/ChainsContext"; + +export default function AccountPage() { + const { chain } = useChains(); + + return ( + + + + ); +}