Display account address in Header

kadena-community · May 21, 2024 · dc1407b · dc1407b
1 parent 8145434
commit dc1407b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 181 deletions.
diff --git a/packages/apps/marmalade-marketplace/package.json b/packages/apps/marmalade-marketplace/package.json
@@ -16,6 +16,7 @@
     "@kadena/client-utils": "workspace:*",
     "@kadena/pactjs": "workspace:^",
     "@kadena/react-ui": "workspace:^",
+    "@kadena/react-icons": "workspace:^",
     "firebase": "^10.8.0",
     "next": "latest",
     "react": "18.2.0",

diff --git a/packages/apps/marmalade-marketplace/src/components/MarketplaceHeader/index.tsx b/packages/apps/marmalade-marketplace/src/components/MarketplaceHeader/index.tsx
@@ -1,4 +1,6 @@
-import { NavHeader, KadenaLogo, NavHeaderLinkList, NavHeaderLink, Button } from '@kadena/react-ui';
+import { env } from '@/utils/env';
+import { NavHeader, KadenaLogo, NavHeaderLinkList, NavHeaderLink, Button, NavHeaderButton, Tooltip } from '@kadena/react-ui';
+import { MonoAccountCircle } from '@kadena/react-icons';
 import { useAccount } from '@/hooks/account';
 
 export const MarketplaceHeader= () => {
@@ -27,7 +29,15 @@ export const MarketplaceHeader= () => {
         </NavHeaderLink>
       </NavHeaderLinkList>
       {account
-        ? <Button onClick={logout} variant="primary" isCompact={false}>{account.alias}</Button>
+        ? (
+            <>
+              <Tooltip delay={0} content={account.accountName} position="left">
+                <a href={env.WALLET_URL} target="_blank"><NavHeaderButton endVisual={<MonoAccountCircle />}/></a>
+              </Tooltip>
+              <p>{account.alias}</p>
+              <Button onClick={logout} variant="primary" isCompact={false}>Disconnect</Button>
+            </>
+          )
         : <Button onClick={login} variant="primary" isCompact={false}>Connect Wallet</Button>
       }
     </NavHeader>