From f9b4316c0ff8a6edb570d1ae4059fedfa376870e Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Wed, 27 Mar 2024 19:05:02 +0800
Subject: [PATCH] feat: add account dropdown

---
 src/features/core/components/base-wrapper.tsx | 14 +++++-
 src/features/core/components/base.tsx         |  5 ++-
 src/features/core/components/nav-account.tsx  | 44 ++++++++++---------
 .../staking/components/address-short.tsx      |  8 +++-
 4 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/src/features/core/components/base-wrapper.tsx b/src/features/core/components/base-wrapper.tsx
index 05b2b50..85aee11 100644
--- a/src/features/core/components/base-wrapper.tsx
+++ b/src/features/core/components/base-wrapper.tsx
@@ -3,7 +3,7 @@
 import { Abstraxion, useModal } from "@burnt-labs/abstraxion";
 import Link from "next/link";
 
-import { basePath } from "@/constants";
+import { basePath, isTestnet } from "@/constants";
 
 import NavAccount from "./nav-account";
 
@@ -21,10 +21,20 @@ export default function RootLayout({
         style={{ borderBottom: "1px solid #333" }}
       >
         <div className="page-container m-auto flex h-[80px] flex-row items-center justify-between px-[16px]">
-          <div>
+          <div className="flex flex-row items-center">
             <Link className="cursor-pointer" href="/">
               <img alt="Xion Logo" src={`${basePath}/xion-logo.svg`} />
             </Link>
+            <span
+              className={[
+                "ml-[8px] translate-y-[4px] rounded-[4px] p-[4px] text-[12px] uppercase",
+                isTestnet
+                  ? "bg-chain-testnetBg text-chain-testnetFg"
+                  : "bg-chain-mainnetBg text-chain-mainnetFg",
+              ].join(" ")}
+            >
+              {isTestnet ? "Testnet" : "Mainnet"}
+            </span>
           </div>
           <NavAccount />
         </div>
diff --git a/src/features/core/components/base.tsx b/src/features/core/components/base.tsx
index 455974a..8e2ad13 100644
--- a/src/features/core/components/base.tsx
+++ b/src/features/core/components/base.tsx
@@ -199,7 +199,7 @@ type ButtonProps = React.DetailedHTMLProps<
   HTMLButtonElement
 > & {
   isLoading?: boolean;
-  variant?: "danger" | "default" | "success";
+  variant?: "danger-naked" | "danger" | "default" | "success";
 };
 
 export const Button = ({
@@ -212,6 +212,9 @@ export const Button = ({
     if (variant === "danger")
       return "text-danger disabled:text-typo-150 bg-[#D745061A]";
 
+    if (variant === "danger-naked")
+      return "text-danger disabled:text-typo-150 bg-transparent border-[1px] border-danger disabled:border-typo-150";
+
     if (variant === "success")
       return "bg-success text-black disabled:bg-green-400";
 
diff --git a/src/features/core/components/nav-account.tsx b/src/features/core/components/nav-account.tsx
index 4cc0645..33678e5 100644
--- a/src/features/core/components/nav-account.tsx
+++ b/src/features/core/components/nav-account.tsx
@@ -5,49 +5,51 @@ import {
   useAbstraxionSigningClient,
   useModal,
 } from "@burnt-labs/abstraxion";
-import { Button } from "@burnt-labs/ui";
 
-import { isTestnet } from "@/constants";
+import AddressShort from "@/features/staking/components/address-short";
 
 import { wallet } from "../lib/icons";
-import { ButtonPill, FloatingDropdown } from "./base";
+import { Button, ClipboardCopy, FloatingDropdown } from "./base";
 
 const Account = () => (
   <span className="flex flex-row items-center gap-[8px] rounded-[8px] bg-bg-600 px-[16px] py-[18px]">
     <span dangerouslySetInnerHTML={{ __html: wallet }} />
-    <span className="font-bold">Account</span>{" "}
-    <span
-      className={[
-        "rounded-[4px] p-[4px] text-[12px] uppercase",
-        isTestnet
-          ? "bg-chain-testnetBg text-chain-testnetFg"
-          : "bg-chain-mainnetBg text-chain-mainnetFg",
-      ].join(" ")}
-    >
-      {isTestnet ? "Testnet" : "Mainnet"}
-    </span>
   </span>
 );
 
 const NavAccount = () => {
   const [, setShowAbstraxion] = useModal();
-  const { isConnected } = useAbstraxionAccount();
+  const { data, isConnected } = useAbstraxionAccount();
   const { logout } = useAbstraxionSigningClient();
 
   return (
     <div className="cursor-pointer">
       {isConnected ? (
-        <FloatingDropdown Trigger={Account} id="nav-account">
-          <div className="flex items-center justify-center rounded-[16px] bg-bg-600 px-[24px] py-[12px]">
-            <ButtonPill
-              className="bg-transparent"
+        <FloatingDropdown
+          Trigger={Account}
+          id="nav-account"
+          placement="bottom-end"
+        >
+          <div className="flex flex-col gap-[32px] rounded-[16px] bg-bg-600 p-[24px]">
+            <div className="flex flex-col gap-[12px]">
+              <div className="text-[14px]">XION Address</div>
+              <div className="flex min-w-[250px] flex-row justify-between rounded-[8px] bg-[#000] px-[16px] py-[20px] text-[#fff]">
+                <AddressShort
+                  address={data.bech32Address}
+                  className="text-[16px] text-[#fff]"
+                />
+                <ClipboardCopy textToCopy={data.bech32Address} />
+              </div>
+            </div>
+            <Button
+              className="w-full flex-1 py-[8px] uppercase"
               onClick={() => {
                 logout?.();
               }}
-              variant="danger"
+              variant="danger-naked"
             >
               Log out
-            </ButtonPill>
+            </Button>
           </div>
         </FloatingDropdown>
       ) : (
diff --git a/src/features/staking/components/address-short.tsx b/src/features/staking/components/address-short.tsx
index 3ea414f..774a8a1 100644
--- a/src/features/staking/components/address-short.tsx
+++ b/src/features/staking/components/address-short.tsx
@@ -2,9 +2,10 @@ import { toast } from "react-toastify";
 
 type Props = {
   address: string;
+  className?: string;
 };
 
-const AddressShort = ({ address }: Props) => {
+const AddressShort = ({ address, className }: Props) => {
   if (!address) return null;
 
   const charsDisplayed = 7;
@@ -19,7 +20,10 @@ const AddressShort = ({ address }: Props) => {
 
   return (
     <button
-      className="cursor-pointer text-left text-[12px] font-normal leading-[20px] text-typo-200"
+      className={[
+        "cursor-pointer text-left text-[12px] font-normal leading-[20px] text-typo-200",
+        className,
+      ].join(" ")}
       onClick={() => {
         navigator.clipboard.writeText(address);