feat: allow copying address (#38)

Co-authored-by: bigq <[email protected]>
passkeys-4337 · Nov 15, 2023 · dda6846 · dda6846
1 parent 010d4e3
commit dda6846
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 17 deletions.
diff --git a/front/src/components/Address/index.tsx b/front/src/components/Address/index.tsx
@@ -0,0 +1,34 @@
+import { useMe } from "@/providers/MeProvider";
+import { CopyIcon } from "@radix-ui/react-icons";
+import { Button, Tooltip } from "@radix-ui/themes";
+import { CSSProperties, useState } from "react";
+
+type Props = {
+  style?: CSSProperties;
+};
+
+export default function Address(props: Props) {
+  const [isCopied, setIsCopied] = useState(false);
+  const { me } = useMe();
+
+  if (!me) {
+    return null;
+  }
+
+  return (
+    <Tooltip content="Copied!" open={isCopied}>
+      <Button
+        variant="soft"
+        onClick={() => {
+          navigator.clipboard.writeText(me?.account || "");
+          setIsCopied(true);
+          setTimeout(() => setIsCopied(false), 1000);
+        }}
+        style={{ ...props.style, display: "flex", alignItems: "center", gap: "6px" }}
+      >
+        <CopyIcon />
+        {me?.account.slice(0, 6)}...{me?.account.slice(-4)}
+      </Button>
+    </Tooltip>
+  );
+}
diff --git a/front/src/components/Balance/index.tsx b/front/src/components/Balance/index.tsx
@@ -5,7 +5,7 @@ import { Flex, Text } from "@radix-ui/themes";
 import { CSSProperties, useEffect } from "react";
 
 const css: CSSProperties = {
-  margin: "1rem",
+  padding: "2.5rem 0",
 };
 
 export default function Balance() {
@@ -14,10 +14,10 @@ export default function Balance() {
 
   return (
     <Flex style={css} direction="row" justify="center">
-      <Text highContrast={true} weight="bold" size="8">
+      <Text highContrast={true} weight="bold" size="9">
         ${intBalance}
       </Text>
-      <Text highContrast={true} color="sky" weight="bold" size="6">
+      <Text highContrast={true} weight="bold" size="6" style={{ color: "var(--accent-12)" }}>
         .{decimals}
       </Text>
     </Flex>

diff --git a/front/src/components/HomePage/index.tsx b/front/src/components/HomePage/index.tsx
@@ -2,28 +2,25 @@
 
 import OnBoarding from "@/components/OnBoarding";
 import { useMe } from "@/providers/MeProvider";
-import { Button } from "@radix-ui/themes";
+import { Button, Flex } from "@radix-ui/themes";
 import Balance from "../Balance";
 import NavBar from "../NavBar";
 import History from "../History";
 import { Text } from "@radix-ui/themes";
+import Address from "@/components/Address";
 
 export default function Home() {
   const { me, disconnect } = useMe();
 
   if (me) {
     return (
-      <div style={{ width: "100%" }}>
-        {me?.account && (
-          <Text>
-            {me.account.slice(0, 6)}...{me.account.slice(-4)}
-          </Text>
-        )}
+      <Flex direction="column" width="100%" style={{ padding: "1rem 0" }}>
+        <Address style={{ alignSelf: "center" }} />
         <Balance />
         <NavBar />
         <History />
         <Button onClick={disconnect}>Logout</Button>
-      </div>
+      </Flex>
     );
   } else {
     return <OnBoarding />;

diff --git a/front/src/components/NavBar/index.tsx b/front/src/components/NavBar/index.tsx
@@ -12,14 +12,14 @@ export default function NavBar() {
   return (
     <Flex justify="center" direction="row" gap="5" style={{ marginInline: "2 rem" }}>
       <Button
-        size="3"
+        size="4"
         variant="outline"
         style={{ flexGrow: 1 }}
         onClick={() => open(<SendTransaction />)}
       >
         <PaperPlaneIcon />
       </Button>
-      <Button size="3" variant="outline" style={{ flexGrow: 1 }}>
+      <Button size="4" variant="outline" style={{ flexGrow: 1 }}>
         <CornersIcon style={{ width: 20, height: 20 }} />
       </Button>
     </Flex>

diff --git a/front/src/components/SendTransaction.tsx b/front/src/components/SendTransaction.tsx
@@ -120,16 +120,16 @@ export function SendTransaction() {
       {txReceipt && !isLoading && (
         <>
           <Flex direction="column" justify="center" align="center" grow="1" gap="5">
-            <CheckCircledIcon height="50" width="100%" />
+            <CheckCircledIcon height="50" width="100%" color="var(--teal-11)" />
             <Link
               // href={`https://goerli.basescan.org/tx/${txReceipt.receipt.transactionHash}`}
               href={`https://goerli.basescan.org/tx/${"0xfc67bb936e6637388ec01e3f2889615b21ed6cf67a58a82265255435546d4d36"}`}
               target="_blank"
-              style={{ color: "black" }}
+              style={{ textDecoration: "none" }}
             >
-              <Flex direction="row" gap="2">
+              <Flex direction="row" gap="2" style={{ color: "var(--teal-11)" }}>
                 See transaction
-                <ExternalLinkIcon style={{ alignSelf: "center" }} />
+                <ExternalLinkIcon style={{ alignSelf: "center", color: "var(--teal-11)" }} />
               </Flex>
             </Link>
           </Flex>