Tong/355 wallet connect component (#473)

* feat: connect button refinement --------- Co-authored-by: jeremy-babylonchain <[email protected]>
babylonlabs-io · Dec 23, 2024 · 3299275 · 3299275
1 parent d764a48
commit 3299275
Show file tree

Hide file tree

Showing 11 changed files with 513 additions and 901 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/lock.svg b/public/lock.svg
diff --git a/src/app/assets/bitcoin.png b/src/app/assets/bitcoin.png
diff --git a/src/app/assets/cancel-circle.svg b/src/app/assets/cancel-circle.svg
diff --git a/src/app/components/Connect/ConnectSmall.tsx b/src/app/components/Connect/ConnectSmall.tsx
diff --git a/src/app/components/Connect/ConnectedSmall.tsx b/src/app/components/Connect/ConnectedSmall.tsx
diff --git a/src/app/components/Hash/Hash.tsx b/src/app/components/Hash/Hash.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@babylonlabs-io/bbn-core-ui";
 import { useEffect, useState } from "react";
 import { FiCopy } from "react-icons/fi";
 import { IoIosCheckmarkCircle } from "react-icons/io";
@@ -11,6 +12,7 @@ interface HashProps {
   address?: boolean;
   small?: boolean;
   fullWidth?: boolean;
+  symbols?: number;
 }
 
 export const Hash: React.FC<HashProps> = ({
@@ -19,6 +21,7 @@ export const Hash: React.FC<HashProps> = ({
   address,
   small,
   fullWidth,
+  symbols = 8,
 }) => {
   const [_value, copy] = useCopyToClipboard();
   const [copiedText, setCopiedText] = useState("");
@@ -42,11 +45,12 @@ export const Hash: React.FC<HashProps> = ({
       } hover:opacity-100 pointer-events-auto`}
       onClick={handleCopy}
     >
-      <p
+      <Text
+        variant="body2"
         style={{
           minWidth: small ? "3.5rem" : "5.5rem",
         }}
-        className={`${fullWidth ? "w-full" : ""}`}
+        className={`${fullWidth ? "w-full" : ""} text-primary-main`}
       >
         {copiedText || (
           <>
@@ -56,10 +60,10 @@ export const Hash: React.FC<HashProps> = ({
                 <span className="font-mono">x</span>
               </>
             )}
-            <span>{trim(value)}</span>
+            <span>{trim(value, symbols)}</span>
           </>
         )}
-      </p>
+      </Text>
       {copiedText ? (
         <IoIosCheckmarkCircle className="ml-1" />
       ) : (

diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
@@ -1,19 +1,15 @@
 import { useWalletConnect } from "@babylonlabs-io/bbn-wallet-connect";
-import { twJoin } from "tailwind-merge";
 
-import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
 import { useAppState } from "@/app/state";
 import { shouldDisplayTestingMsg } from "@/config";
 
-import { ConnectedSmall } from "../Connect/ConnectedSmall";
-import { ConnectSmall } from "../Connect/ConnectSmall";
 import { Logo } from "../Logo/Logo";
 import { TestingInfo } from "../TestingInfo/TestingInfo";
+import { Connect } from "../Wallet/Connect";
 
 export const Header = () => {
-  const { connected, disconnect, open } = useWalletConnect();
-  const { address } = useBTCWallet();
-  const { totalBalance, isLoading: loading } = useAppState();
+  const { open } = useWalletConnect();
+  const { isLoading: loading } = useAppState();
 
   return (
     <nav>
@@ -28,29 +24,7 @@ export const Header = () => {
             )}
           </div>
           <div className="flex items-center gap-4">
-            <ConnectSmall
-              connected={connected}
-              loading={loading}
-              onConnect={open}
-              address={address}
-              btcWalletBalanceSat={totalBalance}
-              onDisconnect={disconnect}
-            />
-            {/* <ThemeToggle /> */}
-          </div>
-          <div
-            className={twJoin(
-              address && "justify-end p-6 pt-0",
-              "container mx-auto flex w-full items-center gap-4 md:hidden md:p-0",
-            )}
-          >
-            <ConnectedSmall
-              connected={connected}
-              loading={loading}
-              address={address}
-              btcWalletBalanceSat={totalBalance}
-              onDisconnect={disconnect}
-            />
+            <Connect loading={loading} onConnect={open} />
           </div>
         </div>
       </section>