add view account button for viewing connected

gnosisguild · Jan 19, 2024 · 9032ad1 · 9032ad1
1 parent 1010530
commit 9032ad1
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 && (