Merge branch 'main' into chore/optimize-user-flow

Signed-off-by: Burnt Val <[email protected]>
burnt-labs · Mar 25, 2024 · 3b0a40c · 3b0a40c
2 parents 3e824f3 + 8de24aa
commit 3b0a40c
Show file tree

Hide file tree

Showing 12 changed files with 296 additions and 51 deletions.
diff --git a/.changeset/sixty-dragons-reflect.md b/.changeset/sixty-dragons-reflect.md
@@ -0,0 +1,5 @@
+---
+"abstraxion-dashboard": minor
+---
+
+Added receive functionality to dashboard
diff --git a/.changeset/stale-apes-talk.md b/.changeset/stale-apes-talk.md
@@ -0,0 +1,6 @@
+---
+"abstraxion-dashboard": patch
+"@burnt-labs/constants": patch
+---
+
+Update casing of "XION" from across multiple components
diff --git a/apps/abstraxion-dashboard/app/layout.tsx b/apps/abstraxion-dashboard/app/layout.tsx
@@ -32,8 +32,8 @@ const akkuratLL = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Xion Account Dashboard",
-  description: "A dashboard for managing Xion accounts.",
+  title: "XION Account Dashboard",
+  description: "A dashboard for managing XION accounts.",
 };
 
 export default function RootLayout({

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/Abstraxion/index.tsx b/apps/abstraxion-dashboard/components/Abstraxion/index.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect } from "react";
 import { GrazProvider } from "graz";
 import { StytchProvider } from "@stytch/nextjs";
 import { ApolloProvider } from "@apollo/client";
@@ -16,7 +16,6 @@ import { ErrorDisplay } from "@/components/ErrorDisplay";
 import { useSearchParams } from "next/navigation";
 import { AbstraxionGrant } from "../AbstraxionGrant";
 import Image from "next/image";
-import { testnetChainInfo } from "@burnt-labs/constants";
 
 export interface ModalProps {
   onClose: VoidFunction;
@@ -116,7 +115,7 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
               <a href="https://xion.burnt.com/">
                 <Image
                   src="/logo.png"
-                  alt="Xion Logo"
+                  alt="XION Logo"
                   width="108"
                   height="48"
                 />

diff --git a/apps/abstraxion-dashboard/components/AccountInfo.tsx b/apps/abstraxion-dashboard/components/AccountInfo.tsx
@@ -24,7 +24,7 @@ const AddAuthenticatorsModal = dynamic<{
 export const AccountInfo = ({ account }: { account?: AbstraxionAccount }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const copyXionAddress = () => {
+  const copyXIONAddress = () => {
     if (account?.id) {
       navigator.clipboard.writeText(account?.id);
     }
@@ -55,7 +55,7 @@ export const AccountInfo = ({ account }: { account?: AbstraxionAccount }) => {
         XION Address
       </h3>
       <div
-        onClick={copyXionAddress}
+        onClick={copyXIONAddress}
         className="ui-flex ui-cursor-pointer ui-items-center ui-justify-between ui-mb-10 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">

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/Sidebar.tsx b/apps/abstraxion-dashboard/components/Sidebar.tsx
@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation";
 import Image from "next/image";
 import { useContext } from "react";
 import { AbstraxionContext, AbstraxionContextProps } from "./AbstraxionContext";
-import { ChevronDownIcon, WalletIcon } from "./Icons";
+import { WalletIcon } from "./Icons";
 
 const NAV_OPTIONS = [{ text: "home", path: "/" }];
 
@@ -56,7 +56,7 @@ export function Sidebar() {
   return (
     <div className="ui-h-screen ui-bg-primary ui-border-[#6C6A6A] ui-border-r-[1px] ui-text-white ui-flex ui-flex-col ui-w-64">
       <div className="ui-flex ui-items-center ui-justify-between ui-px-8 ui-pt-8">
-        <Image src="/logo.png" alt="Xion Logo" width="90" height="32" />
+        <Image src="/logo.png" alt="XION Logo" width="90" height="32" />
         <div
           className={`ui-flex ${
             isMainnet ? "ui-bg-mainnet-bg" : "ui-bg-testnet-bg"

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"
   },

diff --git a/packages/constants/src/index.ts b/packages/constants/src/index.ts
@@ -55,7 +55,7 @@ const commonInfo: ChainInfo = {
   rpc: "undefined",
   rest: "undefined",
   chainId: "base",
-  chainName: "Xion Testnet",
+  chainName: "XION Testnet",
   bip44: {
     coinType: 118,
   },
@@ -78,13 +78,13 @@ export const testnetChainInfo: ChainInfo = {
   rpc: "https://testnet-rpc.xion-api.com:443",
   rest: "https://testnet-api.xion-api.com:443",
   chainId: "xion-testnet-1",
-  chainName: "Xion Testnet",
+  chainName: "XION Testnet",
 };
 
 export const testChainInfo: ChainInfo = {
   ...commonInfo,
   rpc: "http://localhost:26657",
   rest: "http://localhost:26656",
   chainId: "xion-local-testnet-1",
-  chainName: "Xion Testnet Local",
+  chainName: "XION Testnet Local",
 };