Skip to content

Commit

Permalink
usdc iteration for sending tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@BurntVal
BurntVal committed May 28, 2024
1 parent 1f89da9 commit c7eb374
Show file tree
Hide file tree
Showing 9 changed files with 227 additions and 55 deletions.
2 changes: 1 addition & 1 deletion apps/abstraxion-dashboard/components/Icons/Xion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const XionIcon = () => (
height="39"
rx="19.5"
stroke="white"
stroke-opacity="0.2"
strokeOpacity="0.2"
/>
<path
d="M18.4173 20.7147C17.1692 19.2613 16.6361 17.9667 16.6361 16.6853C16.6361 15.928 16.7162 15.4533 16.8218 15.016C16.2111 16.3093 16 17.2773 16 18.1893C16 23.02 20.439 23.6427 20.439 27.0613C20.439 27.8867 20.0007 29.008 18.5188 31.1093C22.9832 25.164 24.119 23.0253 24.119 21.5413C24.119 17.3893 19.6974 16.692 19.6974 12.0227C19.6974 10.9573 20.308 9.67467 21.4505 8C21.4505 8 20.3642 9.524 19.7776 10.3387C17.689 13.24 16.8806 17.0067 18.4146 20.7173L18.4173 20.7147Z"
Expand Down
24 changes: 20 additions & 4 deletions apps/abstraxion-dashboard/components/Overview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { formatBalance, getCommaSeperatedNumber } from "@/utils";
import { useAccountBalance } from "@/hooks/useAccountBalance";
import { usdcSearchDenom, useAccountBalance } from "@/hooks/useAccountBalance";
import { RightArrowIcon, ScanIcon } from "./Icons";
import { WalletSend } from "./WalletSend/WalletSend";
import { WalletReceive } from "./WalletReceive";
Expand All @@ -13,6 +13,9 @@ export const Overview = ({ account }: { account?: AbstraxionAccount }) => {
const xionBalance = accountBalance?.balances.find(
(balance) => balance.denom === "uxion",
);
const usdcBalance = accountBalance.balances.find(
(coin) => coin.denom === usdcSearchDenom,
);

return (
<div
Expand All @@ -34,9 +37,7 @@ export const Overview = ({ account }: { account?: AbstraxionAccount }) => {
{accountBalance && (
<h1 className="ui-font-akkuratLL ui-leading-wide ui-text-4xl ui-font-bold ui-text-white">
${/* TODO: Change once we support multiple currencies */}
{formatBalance(
Number(xionBalance?.amount) * XION_TO_USDC_CONVERSION,
)}
{formatBalance(accountBalance.total)}
</h1>
)}
{/* Hidden until functionality is in place. */}
Expand Down Expand Up @@ -86,6 +87,21 @@ export const Overview = ({ account }: { account?: AbstraxionAccount }) => {
</div>
</div>
)}
{usdcBalance && (
<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">
USDC
</p>
<div className="ui-flex">
<p className="ui-font-akkuratLL ui-text-base ui-font-normal ui-leading-normal ui-text-white">
{getCommaSeperatedNumber(Number(usdcBalance.amount))} USDC
</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">
${formatBalance(Number(usdcBalance.amount))} USD
</p>
</div>
</div>
)}
</div>
);
};
1 change: 1 addition & 0 deletions apps/abstraxion-dashboard/components/WalletSend/WalletSend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export function WalletSend({
sendTokens: (
senderAddress: string,
sendAmount: number,
denom: string,
memo: string,
) => Promise<DeliverTxResponse>;
balanceInfo: BalanceInfo;
Expand Down
213 changes: 179 additions & 34 deletions apps/abstraxion-dashboard/components/WalletSend/WalletSendForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
import { ChangeEvent, useState } from "react";
import { DeliverTxResponse } from "@cosmjs/stargate";
import { Button, Input } from "@burnt-labs/ui";
import { Button, Input, ChevronDown } from "@burnt-labs/ui";
import { XION_TO_USDC_CONVERSION } from "@/components/Overview";
import { ErrorDisplay } from "@/components/ErrorDisplay";
import { useAbstraxionAccount } from "@/hooks";
import { formatBalance, isValidWalletAddress } from "@/utils";
import { USDCIcon } from "../Icons/USDC";
import { XionIcon } from "../Icons";
import { XionIcon } from "../Icons/Xion";
import { usdcSearchDenom } from "@/hooks/useAccountBalance";

interface SelectedCurrency {
type: "usdc" | "xion";
balance?: Coin;
denom: typeof usdcSearchDenom | "uxion";
}

export function WalletSendForm({
sendTokens,
Expand All @@ -16,13 +23,27 @@ export function WalletSendForm({
sendTokens: (
senderAddress: string,
sendAmount: number,
denom: string,
memo: string,
) => Promise<DeliverTxResponse>;
balanceInfo: BalanceInfo;
setIsOpen: any;
}) {
const { data: account } = useAbstraxionAccount();

const xionBalance = balanceInfo.balances.find(
(coin) => coin.denom === "uxion",
);
const usdcBalance = balanceInfo.balances.find(
(coin) => coin.denom === usdcSearchDenom,
);

const [selectedCurrency, setSelectedCurrency] = useState<SelectedCurrency>({
type: "usdc",
balance: usdcBalance,
denom: usdcSearchDenom,
});

const [sendAmount, setSendAmount] = useState("0");
const [amountError, setAmountError] = useState("");
const [recipientAddress, setRecipientAddress] = useState("");
Expand All @@ -34,6 +55,8 @@ export function WalletSendForm({
const [isSuccess, setIsSuccess] = useState(false);
const [sendTokensError, setSendTokensError] = useState(false);

const [showDropdown, setShowDropdown] = useState(false);

function handleAmountChange(event: ChangeEvent<HTMLInputElement>) {
setAmountError("");
if (sendAmount === "0" && event.target.value === "00") return;
Expand All @@ -50,9 +73,18 @@ export function WalletSendForm({
return;
}

if (balanceInfo.total < Number(sendAmount) * 1000000) {
setAmountError("Input is greater than your current balance");
return;
if (selectedCurrency.type === "xion") {
if (Number(xionBalance?.amount) < Number(sendAmount) * 1000000) {
setAmountError("Input is greater than your current balance");
return;
}
}

if (selectedCurrency.type === "usdc") {
if (Number(usdcBalance?.amount) < Number(sendAmount) * 1000000) {
setAmountError("Input is greater than your current balance");
return;
}
}

if (!isValidWalletAddress(recipientAddress)) {
Expand All @@ -67,12 +99,12 @@ export function WalletSendForm({
try {
setIsLoading(true);

const res = await sendTokens(
await sendTokens(
recipientAddress,
Number(sendAmount),
selectedCurrency.denom,
userMemo,
);
console.log(res);
setIsSuccess(true);
} catch (error) {
console.log(error);
Expand All @@ -81,6 +113,121 @@ export function WalletSendForm({
setIsLoading(false);
}
}

function switchSelectedCurrency(type: typeof selectedCurrency.type) {
switch (type) {
case "xion":
setSelectedCurrency({
type: "xion",
balance: xionBalance,
denom: "uxion",
});
break;
case "usdc":
setSelectedCurrency({
type: "usdc",
balance: usdcBalance,
denom: usdcSearchDenom,
});
break;
}
setShowDropdown(false);
return;
}

const currencyDropdown = () => {
return (
<div className="ui-relative">
<div
className={`ui-flex ui-items-center ui-justify-between ui-p-4 ui-bg-black ${
showDropdown ? "ui-rounded-tr-lg ui-rounded-tl-lg" : "ui-rounded-lg"
}`}
onClick={() => setShowDropdown(!showDropdown)}
>
<div className="ui-flex ui-items-center">
<div className="ui-mr-2">
{selectedCurrency.type === "usdc" ? (
<USDCIcon color="white" />
) : (
<XionIcon />
)}
</div>

<div className="ui-flex ui-flex-col ui-items-start">
<p className="ui-text-md ui-font-bold ui-text-white">
{selectedCurrency.type.toUpperCase()}
</p>
<p className="ui-text-md ui-text-white">
Balance:{" "}
{formatBalance(Number(selectedCurrency.balance?.amount))}{" "}
{selectedCurrency.type.toUpperCase()}{" "}
<span className="ui-text-white/50 ui-pl-2">
$
{formatBalance(
Number(selectedCurrency.balance?.amount) *
(selectedCurrency.type === "xion"
? XION_TO_USDC_CONVERSION
: 1),
)}{" "}
USD
</span>
</p>
</div>
</div>
<ChevronDown isUp={showDropdown} />
</div>

<div
className={`${
showDropdown ? "ui-absolute ui-top-20 ui-left-0" : "ui-hidden"
} ui-w-full ui-rounded-bl-lg ui-rounded-br-lg ui-bg-black ui-border-t ui-border-white/20`}
>
<div
className="ui-flex ui-items-center ui-p-4 ui-bg-black ui-rounded-lg"
onClick={() => switchSelectedCurrency("xion")}
>
<div className="ui-mr-2">
<XionIcon />
</div>

<div className="ui-flex ui-flex-col ui-items-start">
<p className="ui-text-md ui-font-bold ui-text-white">XION</p>
<p className="ui-text-md ui-text-white">
Balance: {formatBalance(Number(xionBalance?.amount))} XION{" "}
<span className="ui-text-white/50 ui-pl-2">
$
{formatBalance(
Number(xionBalance?.amount) * XION_TO_USDC_CONVERSION,
)}{" "}
USD
</span>
</p>
</div>
</div>

<div
className="ui-flex ui-items-center ui-p-4 ui-bg-black ui-rounded-lg ui-mt-1"
onClick={() => switchSelectedCurrency("usdc")}
>
<div className="ui-mr-2">
<USDCIcon color="white" />
</div>

<div className="ui-flex ui-flex-col ui-items-start">
<p className="ui-text-md ui-font-bold ui-text-white">USDC</p>
<p className="ui-text-md ui-text-white">
Balance: {formatBalance(Number(usdcBalance?.amount))} USDC{" "}
<span className="ui-text-white/50 ui-pl-2">
${formatBalance(Number(usdcBalance?.amount))} USD
</span>
</p>
</div>
</div>
</div>
</div>
);
};

return (
<>
{sendTokensError ? (
Expand All @@ -103,12 +250,19 @@ export function WalletSendForm({
Transfer Amount
</p>
<p className="ui-w-full ui-text-center ui-text-4xl ui-font-akkuratLL ui-text-white ui-font-semibold">
{sendAmount} <span className="ui-text-white/40">XION</span>
{sendAmount}{" "}
<span className="ui-text-white/40">
{selectedCurrency.type.toUpperCase()}
</span>
</p>
<p className="ui-w-full ui-text-center ui-text-md ui-font-akkuratLL ui-text-white/40">
$
{formatBalance(
Number(sendAmount) * 1000000 * XION_TO_USDC_CONVERSION,
Number(sendAmount) *
1000000 *
(selectedCurrency.type === "xion"
? XION_TO_USDC_CONVERSION
: 1),
)}{" "}
USD
</p>
Expand Down Expand Up @@ -149,12 +303,19 @@ export function WalletSendForm({
Transfer Amount
</p>
<p className="ui-w-full ui-text-center ui-text-4xl ui-font-akkuratLL ui-text-white ui-font-semibold">
{sendAmount} <span className="ui-text-white/40">XION</span>
{sendAmount}{" "}
<span className="ui-text-white/40">
{selectedCurrency.type.toUpperCase()}
</span>
</p>
<p className="ui-w-full ui-text-center ui-text-md ui-font-akkuratLL ui-text-white/40">
$
{formatBalance(
Number(sendAmount) * 1000000 * XION_TO_USDC_CONVERSION,
Number(sendAmount) *
1000000 *
(selectedCurrency.type === "xion"
? XION_TO_USDC_CONVERSION
: 1),
)}{" "}
USD
</p>
Expand Down Expand Up @@ -197,33 +358,17 @@ export function WalletSendForm({
SEND
</h1>
<div className="ui-flex ui-flex-col">
<div className="ui-flex ui-items-center ui-p-4 ui-bg-black ui-rounded-lg">
<div className="ui-mr-2">
<XionIcon />
</div>

<div className="ui-flex ui-flex-col ui-items-start">
<p className="ui-text-md ui-font-bold ui-text-white">XION</p>
<p className="ui-text-md ui-text-white">
{/* TODO: Make configurable once we support multiple currencies */}
Balance: {formatBalance(Number(balanceInfo.total))} XION{" "}
<span className="ui-text-white/50 ui-pl-2">
$
{formatBalance(
Number(balanceInfo.total) * XION_TO_USDC_CONVERSION,
)}{" "}
USD
</span>
</p>
</div>
</div>

{currencyDropdown()}
<div className="ui-font-akkuratLL ui-flex ui-justify-between ui-mb-4 ui-mt-8">
<p className="ui-text-white ui-font-semibold">Amount</p>
<p className="ui-text-white/50 ui-font-semibold">
=$
{formatBalance(
Number(sendAmount) * 1000000 * XION_TO_USDC_CONVERSION,
Number(sendAmount) *
1000000 *
(selectedCurrency.type === "xion"
? XION_TO_USDC_CONVERSION
: 1),
)}{" "}
USD
</p>
Expand All @@ -243,7 +388,7 @@ export function WalletSendForm({
value={sendAmount}
/>
<p className="ui-text-5xl ui-font-bold ui-text-white/50">
XION
{selectedCurrency.type.toUpperCase()}
</p>
</div>
{amountError ? (
Expand Down
Loading

0 comments on commit c7eb374

Please sign in to comment.