From 9032ad15c4adb4f101000d27c360405bc3cbd543 Mon Sep 17 00:00:00 2001
From: samepant <sampanter@gmail.com>
Date: Fri, 19 Jan 2024 15:44:27 -0500
Subject: [PATCH] add view account button for viewing connected

---
 .../ConnectButton/ConnectButton.module.css    |  5 ++++
 .../src/components/ConnectButton/index.tsx    |  1 +
 .../src/components/Layout/Layout.module.css   | 30 +++++++++++++++++++
 frontend/src/components/Layout/index.tsx      | 24 ++++++++++++---
 .../src/components/NFTGrid/NFTGrid.module.css |  3 --
 frontend/src/components/NFTGrid/index.tsx     |  1 -
 .../src/components/NFTItem/NFTItem.module.css |  4 ---
 frontend/src/components/NFTItem/index.tsx     |  2 +-
 frontend/src/routes/Mech/index.tsx            |  2 +-
 9 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/ConnectButton/ConnectButton.module.css b/frontend/src/components/ConnectButton/ConnectButton.module.css
index 3efe045..f6ff10c 100644
--- a/frontend/src/components/ConnectButton/ConnectButton.module.css
+++ b/frontend/src/components/ConnectButton/ConnectButton.module.css
@@ -1,3 +1,8 @@
+.container {
+  position: relative;
+  z-index: 100;
+}
+
 .blockie {
   height: 1.5em;
 }
diff --git a/frontend/src/components/ConnectButton/index.tsx b/frontend/src/components/ConnectButton/index.tsx
index e6a73bc..df4f224 100644
--- a/frontend/src/components/ConnectButton/index.tsx
+++ b/frontend/src/components/ConnectButton/index.tsx
@@ -22,6 +22,7 @@ export const ConnectButton = () => {
                 userSelect: "none",
               },
             })}
+            className={classes.container}
           >
             {(() => {
               if (!connected) {
diff --git a/frontend/src/components/Layout/Layout.module.css b/frontend/src/components/Layout/Layout.module.css
index b5dbb3f..ab5be5b 100644
--- a/frontend/src/components/Layout/Layout.module.css
+++ b/frontend/src/components/Layout/Layout.module.css
@@ -76,3 +76,33 @@
 .nav a:hover {
   filter: brightness(1.2);
 }
+
+.accountButtons {
+  position: relative;
+}
+
+.accountButtons:hover .viewAccountContainer {
+  display: block;
+}
+
+.viewAccountContainer {
+  display: none;
+  position: absolute;
+  bottom: -120%;
+  right: 0;
+  z-index: 90;
+  padding-top: 30%;
+}
+
+button.viewAccount {
+  background: rgb(248 212 226);
+  border-radius: 10px;
+  padding: 6px 12px;
+  border: 2px solid var(--button-bg);
+  box-shadow: 2px 2px 10px 0px rgba(150, 203, 0, 0.44);
+}
+
+button.viewAccount:hover {
+  background-color: var(--button-bg);
+  filter: brightness(1);
+}
diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
index 1b672f2..8ae8d42 100644
--- a/frontend/src/components/Layout/index.tsx
+++ b/frontend/src/components/Layout/index.tsx
@@ -1,18 +1,19 @@
 import { ReactNode } from "react"
 
 import classes from "./Layout.module.css"
-import { shortenAddress } from "../../utils/shortenAddress"
 import { Link } from "react-router-dom"
 import ChainSelect from "../ChainSelect"
 import ConnectButton from "../ConnectButton"
 import Search from "../Search"
+import { useAccount } from "wagmi"
+import Button from "../Button"
 
 interface Props {
-  mechAddress?: string
   children: ReactNode
 }
 
-const Layout: React.FC<Props> = ({ children, mechAddress }) => {
+const Layout: React.FC<Props> = ({ children }) => {
+  const { address } = useAccount()
   return (
     <div className={classes.layout}>
       <img src="/cockpit.png" alt="cockpit" className={classes.cockpit} />
@@ -26,7 +27,22 @@ const Layout: React.FC<Props> = ({ children, mechAddress }) => {
           </div>
           <div className={classes.buttonGroup}>
             <ChainSelect />
-            <ConnectButton />
+            <div className={classes.accountButtons}>
+              <ConnectButton />
+              {address && (
+                <div className={classes.viewAccountContainer}>
+                  <Link to={`/account/${address}`}>
+                    <Button
+                      secondary
+                      onClick={() => {}}
+                      className={classes.viewAccount}
+                    >
+                      View account
+                    </Button>
+                  </Link>
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </header>
diff --git a/frontend/src/components/NFTGrid/NFTGrid.module.css b/frontend/src/components/NFTGrid/NFTGrid.module.css
index f12c8a4..ac292fe 100644
--- a/frontend/src/components/NFTGrid/NFTGrid.module.css
+++ b/frontend/src/components/NFTGrid/NFTGrid.module.css
@@ -7,9 +7,6 @@
   width: 100%;
 }
 
-.grid li {
-}
-
 .container {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/components/NFTGrid/index.tsx b/frontend/src/components/NFTGrid/index.tsx
index 08c3868..626b9c6 100644
--- a/frontend/src/components/NFTGrid/index.tsx
+++ b/frontend/src/components/NFTGrid/index.tsx
@@ -2,7 +2,6 @@ import NFTGridItem from "../NFTGridItem"
 import Spinner from "../Spinner"
 
 import classes from "./NFTGrid.module.css"
-import clsx from "clsx"
 import { useChainId } from "wagmi"
 import { useDeployedMechs } from "../../hooks/useDeployMech"
 import { calculateMechAddress } from "../../utils/calculateMechAddress"
diff --git a/frontend/src/components/NFTItem/NFTItem.module.css b/frontend/src/components/NFTItem/NFTItem.module.css
index 7287245..2ceef78 100644
--- a/frontend/src/components/NFTItem/NFTItem.module.css
+++ b/frontend/src/components/NFTItem/NFTItem.module.css
@@ -72,10 +72,6 @@
   justify-content: center;
   align-items: center;
 }
-
-.name {
-}
-
 .info {
   width: 45%;
   display: flex;
diff --git a/frontend/src/components/NFTItem/index.tsx b/frontend/src/components/NFTItem/index.tsx
index 45b8c41..28aa0d0 100644
--- a/frontend/src/components/NFTItem/index.tsx
+++ b/frontend/src/components/NFTItem/index.tsx
@@ -119,7 +119,7 @@ const NFTItem: React.FC<Props> = ({ nft, chainId }) => {
         <ul className={classes.assetList}>
           {mechBalances.map((balance, index) => (
             <li key={index} className={classes.asset}>
-              <div className={classes.name}>{balance.name}</div>
+              <div>{balance.name}</div>
               <div className={classes.value}>
                 <p>
                   {formatUnits(BigInt(balance.balance), balance.decimals || 0)}
diff --git a/frontend/src/routes/Mech/index.tsx b/frontend/src/routes/Mech/index.tsx
index 390d344..ca40b3a 100644
--- a/frontend/src/routes/Mech/index.tsx
+++ b/frontend/src/routes/Mech/index.tsx
@@ -58,7 +58,7 @@ const Mech: React.FC = () => {
   const handleRequest = useHandleRequest(mechAddress)
 
   return (
-    <Layout mechAddress={mechAddress || undefined}>
+    <Layout>
       <div className={classes.container}>
         {isLoading && <Spinner />}
         {!error && !isLoading && nft && mechAddress && (