Impl Send Tokens Functionality to Dashboard

.changeset/curly-deers-beg.md

@@ -0,0 +1,6 @@
+---
+"abstraxion-dashboard": minor
+"@burnt-labs/ui": minor
+---
+
+Implement wallet send functionality

apps/abstraxion-dashboard/app/page.tsx

@@ -5,20 +5,12 @@ import { AccountInfo } from "@/components/AccountInfo";
 import { AbstraxionContext } from "@/components/AbstraxionContext";
 import { Overview } from "@/components/Overview";
 import { Sidebar } from "@/components/Sidebar";
-import { useAccountBalance } from "@/hooks/useAccountBalance";
 import { Abstraxion } from "@/components/Abstraxion";
-import {
-  AbstraxionAccount,
-  useAbstraxionAccount,
-  useAbstraxionSigningClient,
-} from "../hooks";
-
+import { AbstraxionAccount, useAbstraxionAccount } from "../hooks";
 
 export default function Home() {
   const searchParams = useSearchParams();
   const { data: account } = useAbstraxionAccount();
-  const { client } = useAbstraxionSigningClient();
-  const accountBalance = useAccountBalance(account, client);
 
   const contracts = searchParams.get("contracts");
   const stake = Boolean(searchParams.get("stake"));
@@ -45,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 balanceInfo={accountBalance} />
+                  <Overview />
                   <h3 className="ui-font-akkuratLL ui-mb-4 ui-mt-8 ui-text-2xl ui-font-bold ui-text-white">
                     Account Info
                   </h3>

apps/abstraxion-dashboard/components/ErrorDisplay/index.tsx

@@ -6,9 +6,11 @@ import {
 import { Button } from "@burnt-labs/ui";
 
 export const ErrorDisplay = ({
-  message,
+  title = "OOPS! Something went wrong...",
+  message = "Please try again later.",
   onClose,
 }: {
+  title?: string;
   message?: string;
   onClose: VoidFunction;
 }) => {
@@ -17,25 +19,21 @@ export const ErrorDisplay = ({
   ) as AbstraxionContextProps;
 
   return (
-    <div className="ui-flex ui-h-full ui-w-full ui-flex-col ui-items-start ui-justify-center ui-gap-4 ui-p-8">
-      <h1 className="ui-text-3xl ui-font-bold ui-uppercase ui-tracking-tighter ui-text-white">
-        Uh oh.
+    <div className="ui-flex ui-h-full ui-w-full ui-flex-col ui-items-center ui-justify-center ui-gap-4 ui-p-8 ui-font-akkuratLL">
+      <h1 className="ui-text-3xl ui-font-thin ui-uppercase ui-tracking-tighter ui-text-white">
+        {title}
       </h1>
-      <h2 className="ui-tracking-tight ui-text-white">Something went wrong.</h2>
-      {message && (
-        <p className="ui-tracking-tight ui-text-zinc-400 dark:ui-text-zinc-700">
-          {message}
-        </p>
-      )}
+      <p className="ui-tracking-tight ui-text-zinc-400 dark:ui-text-zinc-700">
+        {message}
+      </p>
       <Button
-        structure="outlined"
         fullWidth={true}
         onClick={() => {
           onClose();
           setAbstraxionError("");
         }}
       >
-        Dismiss
+        Close
       </Button>
     </div>
   );

apps/abstraxion-dashboard/components/Overview.tsx

@@ -1,12 +1,15 @@
-interface OverviewProps {
-  balanceInfo: BalanceInfo | null;
-}
+import { formatBalance, getCommaSeperatedNumber } from "@/utils";
+import { useAccountBalance } from "@/hooks/useAccountBalance";
+import { RightArrowIcon } from "./Icons";
+import { WalletSend } from "./WalletSend/WalletSend";
 
-const XION_TO_USDC_CONVERSION = 50;
+export const XION_TO_USDC_CONVERSION = 50;
 
-export const Overview = ({ balanceInfo }: OverviewProps) => {
-  const xionBalance = balanceInfo?.balances.find(
-    (balance) => balance.denom === "xion"
+export const Overview = () => {
+  const { balanceInfo: accountBalance, sendTokens } = useAccountBalance();
+
+  const xionBalance = accountBalance?.balances.find(
+    (balance) => balance.denom === "uxion",
   );
 
   return (
@@ -26,48 +29,47 @@ export const Overview = ({ balanceInfo }: OverviewProps) => {
         Current Balance
       </h3>
       <div className="ui-flex ui-items-center ui-justify-between">
-        {balanceInfo && (
+        {accountBalance && (
           <h1 className="ui-font-akkuratLL ui-leading-wide ui-text-4xl ui-font-bold ui-text-white">
-            ${balanceInfo?.total}
+            ${/* TODO: Change once we support multiple currencies */}
+            {formatBalance(
+              Number(xionBalance?.amount) * XION_TO_USDC_CONVERSION,
+            )}
           </h1>
         )}
         {/* Hidden until functionality is in place. */}
-        {/* <div className="flex">
-          <div className="w-12 h-12 bg-black rounded-full flex justify-center items-center mr-6">
+        <div className="ui-flex">
+          {/* <div className="w-12 h-12 bg-black rounded-full flex justify-center items-center mr-6">
             <ScanIcon color="white" />
-          </div>
-          <div className="w-12 h-12 bg-black rounded-full flex justify-center items-center">
-            <RightArrowIcon color="white" />
-          </div>
-        </div> */}
+          </div> */}
+          <WalletSend
+            balanceInfo={accountBalance}
+            sendTokens={sendTokens}
+            trigger={
+              <div className="ui-flex ui-h-12 ui-w-12 ui-items-center ui-justify-center ui-rounded-full ui-bg-black hover:ui-cursor-pointer">
+                <RightArrowIcon color="white" />
+              </div>
+            }
+          />
+        </div>
       </div>
       {/* Divider */}
-      <div className="ui-my-6 ui-h-[1px] ui-w-full ui-bg-white/20"></div>
-      {/* Wait for USDC */}
-      {/* <div className="flex justify-between items-center mb-3">
-        <p className="text-white text-base font-normal font-akkuratLL leading-normal">
-          USDC
-        </p>
-        <div className="flex">
-          <p className="text-white text-base font-normal font-akkuratLL leading-normal">
-            190 USDC
-          </p>
-          <p className="ml-6 text-right text-white text-opacity-70 text-base font-normal font-akkuratLL leading-normal">
-            $190 USDC
-          </p>
-        </div>
-      </div> */}
+      <div className="ui-my-6 ui-h-[1px] ui-w-full ui-bg-white/20" />
       {xionBalance && (
         <div className="ui-flex ui-items-center ui-justify-between">
           <p className="ui-font-akkuratLL ui-text-base ui-font-normal ui-leading-normal ui-text-white">
             XION
           </p>
           <div className="ui-flex">
             <p className="ui-font-akkuratLL ui-text-base ui-font-normal ui-leading-normal ui-text-white">
-              {xionBalance.amount} XION
+              {getCommaSeperatedNumber(Number(xionBalance.amount))} XION
             </p>
             <p className="ui-font-akkuratLL ui-ml-6 ui-text-right ui-text-base ui-font-normal ui-leading-normal ui-text-white/70">
-              ${Number(xionBalance.amount) * XION_TO_USDC_CONVERSION} USDC
+              $
+              {formatBalance(
+                Number(xionBalance.amount) * XION_TO_USDC_CONVERSION,
+              )}{" "}
+              USD
             </p>
           </div>
         </div>

apps/abstraxion-dashboard/components/WalletSend/WalletSend.tsx

@@ -0,0 +1,41 @@
+import { ReactElement, useState } from "react";
+import { Dialog, DialogContent, DialogTrigger } from "@burnt-labs/ui";
+import { DeliverTxResponse } from "@cosmjs/stargate";
+import { DialogClose } from "@burnt-labs/ui";
+import { CloseIcon } from "@burnt-labs/ui";
+import { WalletSendForm } from "./WalletSendForm";
+
+export function WalletSend({
+  trigger,
+  sendTokens,
+  balanceInfo,
+}: {
+  trigger: ReactElement;
+  sendTokens: (
+    senderAddress: string,
+    sendAmount: number,
+    memo: string,
+  ) => Promise<DeliverTxResponse>;
+  balanceInfo: BalanceInfo;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  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>
+        <WalletSendForm
+          balanceInfo={balanceInfo}
+          sendTokens={sendTokens}
+          setIsOpen={setIsOpen}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}