From 0f64b9e778e3cb65f20d3243817574eac15828df Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:57:56 +0200
Subject: [PATCH 1/8] Add Keplr types to window

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 types/window.d.ts | 6 ++++++
 3 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 types/window.d.ts

diff --git a/package-lock.json b/package-lock.json
index 48aa83e..701c087 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@cosmjs/tendermint-rpc": "^0.32.2",
         "@cosmjs/utils": "^0.32.2",
         "@hookform/resolvers": "^3.3.1",
-        "@keplr-wallet/types": "^0.12.23",
+        "@keplr-wallet/types": "^0.12.76",
         "@ledgerhq/hw-transport-webusb": "^6.27.19",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -1705,9 +1705,9 @@
       }
     },
     "node_modules/@keplr-wallet/types": {
-      "version": "0.12.23",
-      "resolved": "https://registry.npmjs.org/@keplr-wallet/types/-/types-0.12.23.tgz",
-      "integrity": "sha512-PRnsoGswlWV5bwyqGw1o5dKCEY33s8Mgxd7HeqTX9L+Pj6TAapnBlyCxhXBp74W0QySIMe8it37VjhJqa9QWxA==",
+      "version": "0.12.76",
+      "resolved": "https://registry.npmjs.org/@keplr-wallet/types/-/types-0.12.76.tgz",
+      "integrity": "sha512-N2KRh1xCJ3gqZUWEi803RwpeCVrFCxFTZyUgFgIUt/fg0qPyd/F6okjcpvu6dj9BNDppuJntqYUpOUdWA7mY9Q==",
       "dependencies": {
         "long": "^4.0.0"
       }
diff --git a/package.json b/package.json
index 0c05f1b..486c3e6 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.2",
     "@cosmjs/utils": "^0.32.2",
     "@hookform/resolvers": "^3.3.1",
-    "@keplr-wallet/types": "^0.12.23",
+    "@keplr-wallet/types": "^0.12.76",
     "@ledgerhq/hw-transport-webusb": "^6.27.19",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
diff --git a/types/window.d.ts b/types/window.d.ts
new file mode 100644
index 0000000..f875c10
--- /dev/null
+++ b/types/window.d.ts
@@ -0,0 +1,6 @@
+import { Window as KeplrWindow } from "@keplr-wallet/types";
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface Window extends KeplrWindow {}
+}

From ed083acf2d68f95798c0844b3f4c521ad62b84b7 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:58:06 +0200
Subject: [PATCH 2/8] Add .vscode to .gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 8f322f0..9c289b9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,7 @@
 
 # misc
 .DS_Store
+.vscode
 *.pem
 
 # debug

From 0a134c43a568593a21f18d9b3506a3dff08f5710 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:58:40 +0200
Subject: [PATCH 3/8] Change chainname place in case too long

---
 components/forms/FindMultisigForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/forms/FindMultisigForm.tsx b/components/forms/FindMultisigForm.tsx
index c5f4d22..dc544d5 100644
--- a/components/forms/FindMultisigForm.tsx
+++ b/components/forms/FindMultisigForm.tsx
@@ -59,7 +59,7 @@ const FindMultisigForm = ({ router }: FindMultisigFormProps) => {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Already have a {chain.chainDisplayName || "Cosmos Hub"} multisig?</CardTitle>
+        <CardTitle>Already have a multisig on {chain.chainDisplayName || "Cosmos Hub"}?</CardTitle>
         <CardDescription>
           Enter its address below to view its transactions and create new ones.
         </CardDescription>

From aac165bfe458c4089f8e71ed84ea59d867db135c Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:58:49 +0200
Subject: [PATCH 4/8] Add Breadcrumb component

---
 components/ui/breadcrumb.tsx | 115 +++++++++++++++++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 components/ui/breadcrumb.tsx

diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..71a5c32
--- /dev/null
+++ b/components/ui/breadcrumb.tsx
@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

From 8260b9b08b8c78b9e0db5b0d828cb806ba206a74 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:58:59 +0200
Subject: [PATCH 5/8] Add new AccountView

---
 .../dataViews/AccountView/BalancePill.tsx     |  29 -----
 .../dataViews/AccountView/BalancesList.tsx    |  49 -------
 .../dataViews/AccountView/BalancesTable.tsx   |  66 ++++++++++
 .../AccountView/ButtonConnectWallet.tsx       |  24 +++-
 components/dataViews/AccountView/index.tsx    | 123 +++++++++++-------
 5 files changed, 157 insertions(+), 134 deletions(-)
 delete mode 100644 components/dataViews/AccountView/BalancePill.tsx
 delete mode 100644 components/dataViews/AccountView/BalancesList.tsx
 create mode 100644 components/dataViews/AccountView/BalancesTable.tsx

diff --git a/components/dataViews/AccountView/BalancePill.tsx b/components/dataViews/AccountView/BalancePill.tsx
deleted file mode 100644
index c0df9a7..0000000
--- a/components/dataViews/AccountView/BalancePill.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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 (
-    <Badge key={coin.denom} className="px-1">
-      <Avatar className="mr-2">
-        <AvatarImage src={logo} alt={`${coin.denom} logo`} className="h-auto" />
-        <AvatarFallback className="text-white">
-          {coin.denom.slice(1, 2).toUpperCase()}
-        </AvatarFallback>
-      </Avatar>
-      {macroCoin}
-    </Badge>
-  );
-}
diff --git a/components/dataViews/AccountView/BalancesList.tsx b/components/dataViews/AccountView/BalancesList.tsx
deleted file mode 100644
index 7c1a023..0000000
--- a/components/dataViews/AccountView/BalancesList.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { toastError } from "@/lib/utils";
-import { Coin } from "@cosmjs/amino";
-import { StargateClient } from "@cosmjs/stargate";
-import { useEffect, useState } from "react";
-import { useChains } from "../../../context/ChainsContext";
-import BalancePill from "./BalancePill";
-
-interface BalancesListProps {
-  readonly walletAddress: string;
-}
-
-export default function BalancesList({ walletAddress }: BalancesListProps) {
-  const { chain } = useChains();
-  const [balances, setBalances] = useState<readonly Coin[]>([]);
-
-  useEffect(() => {
-    (async function () {
-      if (!walletAddress) {
-        return;
-      }
-
-      try {
-        const client = await StargateClient.connect(chain.nodeAddress);
-        const newBalances = await client.getAllBalances(walletAddress);
-        setBalances(newBalances);
-      } catch (e) {
-        console.error("Failed to get balances:", e);
-        toastError({
-          description: "Failed to get balances",
-          fullError: e instanceof Error ? e : undefined,
-        });
-      }
-    })();
-  }, [chain.nodeAddress, walletAddress]);
-
-  return balances.length ? (
-    <Card className="bg-fuchsia-850 w-full max-w-md border-transparent">
-      <CardHeader className="p-0">
-        <CardTitle>Balances</CardTitle>
-      </CardHeader>
-      <CardContent className="mt-4 flex flex-wrap gap-2 p-0">
-        {balances.map((coin) => (
-          <BalancePill key={coin.denom} coin={coin} />
-        ))}
-      </CardContent>
-    </Card>
-  ) : null;
-}
diff --git a/components/dataViews/AccountView/BalancesTable.tsx b/components/dataViews/AccountView/BalancesTable.tsx
new file mode 100644
index 0000000..b52c1c3
--- /dev/null
+++ b/components/dataViews/AccountView/BalancesTable.tsx
@@ -0,0 +1,66 @@
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+import { printableCoin, thinSpace } from "@/lib/displayHelpers";
+import { toastError } from "@/lib/utils";
+import { Coin } from "@cosmjs/amino";
+import { StargateClient } from "@cosmjs/stargate";
+import { useEffect, useState } from "react";
+import { useChains } from "../../../context/ChainsContext";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar";
+
+interface BalancesTableProps {
+  readonly walletAddress: string;
+}
+
+export default function BalancesTable({ walletAddress }: BalancesTableProps) {
+  const { chain } = useChains();
+  const [balances, setBalances] = useState<readonly Coin[]>([]);
+
+  useEffect(() => {
+    (async function () {
+      if (!walletAddress) {
+        return;
+      }
+
+      try {
+        const client = await StargateClient.connect(chain.nodeAddress);
+        const newBalances = await client.getAllBalances(walletAddress);
+        setBalances(newBalances);
+      } catch (e) {
+        console.error("Failed to get balances:", e);
+        toastError({
+          description: "Failed to get balances",
+          fullError: e instanceof Error ? e : undefined,
+        });
+      }
+    })();
+  }, [chain.nodeAddress, walletAddress]);
+
+  return balances.length ? (
+    <Table>
+      <TableBody>
+        {balances.map((coin) => {
+          const foundAsset = chain.assets.find((asset) => asset.base === coin.denom);
+          const logo = foundAsset?.logo_URIs?.svg || foundAsset?.logo_URIs?.png || "";
+          const [macroAmount, macroDenom] = printableCoin(coin, chain).split(thinSpace);
+
+          return (
+            <TableRow key={coin.denom}>
+              <TableCell className="w-0 pr-0">
+                <Avatar>
+                  <AvatarImage src={logo} alt={`${coin.denom} logo`} className="h-auto" />
+                  <AvatarFallback className="text-white">
+                    {coin.denom.slice(1, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+              </TableCell>
+              <TableCell>{macroDenom}</TableCell>
+              <TableCell className="text-right">{macroAmount}</TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  ) : (
+    "No tokens found"
+  );
+}
diff --git a/components/dataViews/AccountView/ButtonConnectWallet.tsx b/components/dataViews/AccountView/ButtonConnectWallet.tsx
index 54bb960..9aad8f8 100644
--- a/components/dataViews/AccountView/ButtonConnectWallet.tsx
+++ b/components/dataViews/AccountView/ButtonConnectWallet.tsx
@@ -1,10 +1,10 @@
-import { toastError } from "@/lib/utils";
+import { cn, toastError } from "@/lib/utils";
 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 { Loader2, Unplug } from "lucide-react";
 import Image from "next/image";
 import { Dispatch, SetStateAction, useCallback, useLayoutEffect, useState } from "react";
 import { useChains } from "../../../context/ChainsContext";
@@ -108,17 +108,27 @@ export default function ButtonConnectWallet({
   const isLoading =
     (walletType === "Keplr" && loading.keplr) || (walletType === "Ledger" && loading.ledger);
 
-  return (
-    <Button onClick={onClick} disabled={loading.keplr || loading.ledger}>
+  return walletInfo?.type === walletType ? (
+    <Button
+      variant="outline"
+      onClick={() => {
+        setWalletInfo(null);
+      }}
+    >
+      <Unplug className="mr-2 h-auto w-5 text-destructive" />
+      Disconnect {walletInfo.type}
+    </Button>
+  ) : (
+    <Button onClick={onClick} disabled={loading.keplr || loading.ledger} variant="outline">
       {isLoading ? (
         <Loader2 className="mr-2 h-5 w-5 animate-spin" />
       ) : (
         <Image
           alt=""
           src={`/assets/icons/${walletType.toLowerCase()}.svg`}
-          width={20}
-          height={20}
-          className="mr-2"
+          width={walletType === "Ledger" ? 23 : 20}
+          height={walletType === "Ledger" ? 23 : 20}
+          className={cn("mr-2", walletType === "Ledger" && "bg-white p-0.5")}
         />
       )}
       Connect {walletType}
diff --git a/components/dataViews/AccountView/index.tsx b/components/dataViews/AccountView/index.tsx
index 3217ac0..f5e3500 100644
--- a/components/dataViews/AccountView/index.tsx
+++ b/components/dataViews/AccountView/index.tsx
@@ -1,80 +1,105 @@
-import BadgeWithCopy from "@/components/BadgeWithCopy";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { explorerLinkAccount } from "@/lib/displayHelpers";
+import { cn } from "@/lib/utils";
 import { WalletInfo } from "@/types/signing";
-import { Unplug } from "lucide-react";
+import copy from "copy-to-clipboard";
+import { ArrowUpRightSquare, Copy } from "lucide-react";
 import Image from "next/image";
 import { useState } from "react";
+import { toast } from "sonner";
 import { useChains } from "../../../context/ChainsContext";
 import { Button } from "../../ui/button";
-import BalancesList from "./BalancesList";
+import BalancesTable from "./BalancesTable";
 import ButtonConnectWallet from "./ButtonConnectWallet";
 
 export default function AccountView() {
   const { chain } = useChains();
 
   const walletInfoState = useState<WalletInfo | null>();
-  const [walletInfo, setWalletInfo] = walletInfoState;
+  const [walletInfo] = walletInfoState;
 
   const explorerLink =
     explorerLinkAccount(chain.explorerLinks.account, walletInfo?.address || "") || "";
 
   return (
     <div className="mt-6 flex flex-col gap-4">
-      <Card className="bg-fuchsia-850 min-w-[400px] border-transparent">
-        <CardHeader className="p-0">
-          <CardTitle className="flex items-baseline gap-2">
+      <Card>
+        <CardHeader className="space-y-1">
+          <CardTitle className="flex items-center text-2xl">
             {walletInfo?.type ? (
               <Image
                 alt=""
                 src={`/assets/icons/${walletInfo.type.toLowerCase()}.svg`}
-                width={20}
-                height={20}
+                width={walletInfo.type === "Ledger" ? 30 : 27}
+                height={walletInfo.type === "Ledger" ? 30 : 27}
+                className={cn("mr-2", walletInfo.type === "Ledger" && "bg-white p-0.5")}
               />
             ) : null}
-            {walletInfo?.type ? `${walletInfo.type} wallet connected` : "Connect wallet"}
+            {walletInfo?.type ? `Connected to ${walletInfo.type}` : "Connect to a wallet"}
           </CardTitle>
+          <CardDescription>Choose between Keplr or Ledger to show its account info</CardDescription>
         </CardHeader>
-        {walletInfo ? (
-          <CardContent className="mt-4 max-w-md p-0">
-            <h2>Address</h2>
-            <div className="flex flex-col gap-4">
-              <BadgeWithCopy name="address" toCopy={walletInfo.address} />
-              {explorerLink ? (
-                <Button asChild variant="secondary" className="self-center">
-                  <a href={explorerLink} target="_blank">
-                    View in explorer
-                  </a>
-                </Button>
-              ) : null}
-            </div>
-            <div className="mt-4">
-              <h2>Public key</h2>
-              <BadgeWithCopy name="pubKey" toCopy={walletInfo.pubKey} />
-            </div>
-          </CardContent>
-        ) : null}
-        <CardFooter className="my-8 flex w-full flex-col gap-4 p-0">
-          {walletInfo?.type ? (
-            <Button
-              variant="secondary"
-              onClick={() => {
-                setWalletInfo(null);
-              }}
-            >
-              <Unplug className="mr-2 h-auto w-5 text-red-500" />
-              Disconnect {walletInfo.type}
-            </Button>
-          ) : (
-            <div className="flex w-full flex-col gap-4">
-              <ButtonConnectWallet walletType="Keplr" walletInfoState={walletInfoState} />
-              <ButtonConnectWallet walletType="Ledger" walletInfoState={walletInfoState} />
-            </div>
-          )}
-        </CardFooter>
+        <CardContent className="grid gap-4">
+          <div className="grid grid-cols-2 gap-6">
+            <ButtonConnectWallet walletType="Keplr" walletInfoState={walletInfoState} />
+            <ButtonConnectWallet walletType="Ledger" walletInfoState={walletInfoState} />
+          </div>
+        </CardContent>
       </Card>
       {walletInfo?.address ? (
-        <BalancesList key={walletInfo.address} walletAddress={walletInfo.address} />
+        <Card>
+          <CardHeader>
+            <CardTitle>Account info</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-5">
+            <div
+              onClick={async () => {
+                copy(walletInfo.address);
+                toast(`Copied address to clipboard`, { description: walletInfo.address });
+              }}
+              className=" flex items-center space-x-4 rounded-md border p-4 transition-colors hover:cursor-pointer hover:bg-muted/50"
+            >
+              <Copy className="w-5" />
+              <div className="flex-1 space-y-1">
+                <p className="text-sm font-medium leading-none">Address</p>
+                <p className="text-sm text-muted-foreground">{walletInfo.address}</p>
+              </div>
+            </div>
+            <div
+              onClick={async () => {
+                copy(walletInfo.pubKey);
+                toast(`Copied public key to clipboard`, { description: walletInfo.pubKey });
+              }}
+              className=" flex items-center space-x-4 rounded-md border p-4 transition-colors hover:cursor-pointer hover:bg-muted/50"
+            >
+              <Copy className="w-5" />
+              <div className="flex-1 space-y-1">
+                <p className="text-sm font-medium leading-none">Public key</p>
+                <p className="text-sm text-muted-foreground">{walletInfo.pubKey}</p>
+              </div>
+            </div>
+            {explorerLink ? (
+              <Button asChild variant="secondary">
+                <a href={explorerLink} target="_blank">
+                  View in explorer <ArrowUpRightSquare className="ml-1" />
+                </a>
+              </Button>
+            ) : null}
+          </CardContent>
+        </Card>
+      ) : null}
+      {walletInfo?.address ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>Balances</CardTitle>
+            <CardDescription>
+              Your list of tokens on {chain.chainDisplayName || "Cosmos Hub"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BalancesTable key={walletInfo.address} walletAddress={walletInfo.address} />
+          </CardContent>
+        </Card>
       ) : null}
     </div>
   );

From aa2b62180b086ef15035012796484109041ab624 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:59:11 +0200
Subject: [PATCH 6/8] Use new AccountView with Breadrumb

---
 pages/[chainName]/account.tsx | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/pages/[chainName]/account.tsx b/pages/[chainName]/account.tsx
index 38f07c6..4485535 100644
--- a/pages/[chainName]/account.tsx
+++ b/pages/[chainName]/account.tsx
@@ -1,17 +1,36 @@
 import AccountView from "@/components/dataViews/AccountView";
-import Page from "@/components/layout/Page";
+import Head from "@/components/head";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
 import { useChains } from "@/context/ChainsContext";
+import Link from "next/link";
 
 export default function AccountPage() {
   const { chain } = useChains();
 
   return (
-    <Page
-      goBack={
-        chain.registryName ? { pathname: `/${chain.registryName}`, title: "home" } : undefined
-      }
-    >
+    <div className="m-4 mt-8 flex max-w-xl flex-1 flex-col justify-center gap-4">
+      <Head title={`${chain.chainDisplayName || "Cosmos Hub"} Multisig Manager`} />
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink>
+              <Link href={`/${chain.registryName}`}>Home</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Account</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
       <AccountView />
-    </Page>
+    </div>
   );
 }

From fb504d18c59d8a712e816ba2562b34e5ceacc3c8 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Thu, 4 Apr 2024 11:29:06 +0200
Subject: [PATCH 7/8] Remove unneeded key

---
 components/dataViews/AccountView/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dataViews/AccountView/index.tsx b/components/dataViews/AccountView/index.tsx
index f5e3500..735df54 100644
--- a/components/dataViews/AccountView/index.tsx
+++ b/components/dataViews/AccountView/index.tsx
@@ -97,7 +97,7 @@ export default function AccountView() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <BalancesTable key={walletInfo.address} walletAddress={walletInfo.address} />
+            <BalancesTable walletAddress={walletInfo.address} />
           </CardContent>
         </Card>
       ) : null}

From 22bee5c56bdc4d7cd2a168d505103c90820cc4dd Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Fri, 5 Apr 2024 20:12:57 +0200
Subject: [PATCH 8/8] Fix hydration

---
 pages/[chainName]/account.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/[chainName]/account.tsx b/pages/[chainName]/account.tsx
index 4485535..bb2bdbc 100644
--- a/pages/[chainName]/account.tsx
+++ b/pages/[chainName]/account.tsx
@@ -21,7 +21,7 @@ export default function AccountPage() {
         <BreadcrumbList>
           <BreadcrumbItem>
             <BreadcrumbLink>
-              <Link href={`/${chain.registryName}`}>Home</Link>
+              {chain.registryName ? <Link href={`/${chain.registryName}`}>Home</Link> : null}
             </BreadcrumbLink>
           </BreadcrumbItem>
           <BreadcrumbSeparator />