Added receive

burnt-labs · Mar 20, 2024 · 397c752 · 397c752
1 parent d6673bf
commit 397c752
Show file tree

Hide file tree

Showing 5 changed files with 274 additions and 39 deletions.
diff --git a/apps/abstraxion-dashboard/app/page.tsx b/apps/abstraxion-dashboard/app/page.tsx
@@ -37,7 +37,7 @@ export default function Home() {
                   <h3 className="ui-font-akkuratLL ui-mb-4 ui-text-2xl ui-text-white ui-font-bold">
                     Overview
                   </h3>
-                  <Overview />
+                  <Overview account={account as AbstraxionAccount} />
                   <h3 className="ui-font-akkuratLL ui-mb-4 ui-mt-8 ui-text-2xl ui-font-bold ui-text-white">
                     Account Info
                   </h3>

diff --git a/apps/abstraxion-dashboard/components/Overview.tsx b/apps/abstraxion-dashboard/components/Overview.tsx
@@ -1,11 +1,13 @@
 import { formatBalance, getCommaSeperatedNumber } from "@/utils";
 import { useAccountBalance } from "@/hooks/useAccountBalance";
-import { RightArrowIcon } from "./Icons";
+import { RightArrowIcon, ScanIcon } from "./Icons";
 import { WalletSend } from "./WalletSend/WalletSend";
+import { WalletReceive } from "./WalletReceive";
+import { AbstraxionAccount } from "@/hooks";
 
 export const XION_TO_USDC_CONVERSION = 50;
 
-export const Overview = () => {
+export const Overview = ({ account }: { account?: AbstraxionAccount }) => {
   const { balanceInfo: accountBalance, sendTokens } = useAccountBalance();
 
   const xionBalance = accountBalance?.balances.find(
@@ -42,6 +44,16 @@ export const Overview = () => {
           {/* <div className="w-12 h-12 bg-black rounded-full flex justify-center items-center mr-6">
             <ScanIcon color="white" />
           </div> */}
+          {account?.id && (
+            <WalletReceive
+              xionAddress={account.id}
+              trigger={
+                <div className="ui-mr-4 ui-flex ui-h-12 ui-w-12 ui-items-center ui-justify-center ui-rounded-full ui-bg-black hover:ui-cursor-pointer">
+                  <ScanIcon color="white" />
+                </div>
+              }
+            />
+          )}
           <WalletSend
             balanceInfo={accountBalance}
             sendTokens={sendTokens}

diff --git a/apps/abstraxion-dashboard/components/WalletReceive/index.tsx b/apps/abstraxion-dashboard/components/WalletReceive/index.tsx
@@ -0,0 +1,60 @@
+import { ReactElement, useState } from "react";
+import { Button, Dialog, DialogContent, DialogTrigger } from "@burnt-labs/ui";
+import { DialogClose } from "@burnt-labs/ui";
+import { CloseIcon } from "@burnt-labs/ui";
+import { truncateAddress } from "@/utils";
+import { CopyIcon } from "../Icons";
+import { QRCodeSVG } from "qrcode.react";
+
+export function WalletReceive({
+  trigger,
+  xionAddress,
+}: {
+  trigger: ReactElement;
+  xionAddress: string;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const copyXionAddress = () => {
+    if (xionAddress) {
+      navigator.clipboard.writeText(xionAddress);
+    }
+  };
+
+  return (
+    <Dialog onOpenChange={setIsOpen} open={isOpen}>
+      <DialogTrigger>{trigger}</DialogTrigger>
+      <DialogContent
+        className="ui-text-white"
+        onPointerDownOutside={(e: any) => e.preventDefault()}
+      >
+        <DialogClose className="ui-absolute ui-top-5 ui-right-10">
+          <CloseIcon className="ui-stroke-white/50" />
+        </DialogClose>
+        <div className="ui-flex ui-flex-col ui-pt-8">
+          <h1 className="ui-w-full ui-text-center ui-text-3xl ui-font-akkuratLL ui-font-thin">
+            RECEIVE
+          </h1>
+          <h3 className="ui-text-white ui-text-sm ui-font-bold ui-font-akkuratLL ui-leading-none ui-my-6">
+            XION Address
+          </h3>
+          <div
+            onClick={copyXionAddress}
+            className="ui-flex ui-cursor-pointer ui-items-center ui-justify-between ui-px-4 ui-w-full ui-h-16 ui-bg-black ui-rounded-lg"
+          >
+            <p className="ui-text-white ui-text-base ui-font-normal ui-font-akkuratLL ui-leading-normal">
+              {truncateAddress(xionAddress)}
+            </p>
+            <CopyIcon color="white" />
+          </div>
+          <div className="ui-flex ui-items-center ui-justify-center ui-my-6 ui-p-6 ui-w-full ui-bg-black ui-rounded-lg">
+            <QRCodeSVG value={"uxion:" + xionAddress} />
+          </div>
+          <Button onClick={() => setIsOpen(false)} fullWidth>
+            Close
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/abstraxion-dashboard/package.json b/apps/abstraxion-dashboard/package.json
@@ -27,6 +27,7 @@
     "graz": "^0.0.51",
     "jose": "^5.1.3",
     "next": "^14.0.3",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },