asset balance & deposit fixes

OrderlyNetwork · Oct 25, 2024 · 45db23f · 45db23f
1 parent 2472b47
commit 45db23f
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 45 deletions.
diff --git a/app/components/Assets.tsx b/app/components/Assets.tsx
@@ -1,42 +1,45 @@
 import {
-  useAccountInstance,
+  useAccount,
   useChains,
   useCollateral,
   useDeposit,
   useWithdraw
 } from '@orderly.network/hooks';
-import { API } from '@orderly.network/types';
+import { AccountStatusEnum } from '@orderly.network/types';
 import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
 import { Table, Tooltip } from '@radix-ui/themes';
-import { useNotifications, useSetChain } from '@web3-onboard/react';
+import { useNotifications } from '@web3-onboard/react';
 import { FixedNumber } from 'ethers';
 import { FC, useMemo } from 'react';
 
 import { OrderlyDeposit, PendingButton } from '~/components';
 import { useIsTestnet } from '~/hooks';
-import { supportedEvmChainIds, supportedSolanaChainIds, usdFormatter } from '~/utils';
+import { usdFormatter } from '~/utils';
 
 export const Assets: FC = () => {
   const [isTestnet] = useIsTestnet();
   const collateral = useCollateral();
-  const [chains] = useChains(isTestnet ? 'testnet' : 'mainnet', {
-    filter: (item: API.Chain) =>
-      supportedEvmChainIds.includes(item.network_infos?.chain_id) ||
-      supportedSolanaChainIds.includes(item.network_infos?.chain_id)
-  });
-  const account = useAccountInstance();
+  const {
+    account,
+    state: { status }
+  } = useAccount();
+  const [chains] = useChains(isTestnet ? 'testnet' : 'mainnet');
   const [_, customNotification] = useNotifications();
 
-  const token = useMemo(() => {
-    return Array.isArray(chains) ? chains[0]?.token_infos[0] : undefined;
-  }, [chains]);
-  const [{ connectedChain }] = useSetChain();
+  const token = useMemo(
+    () => chains.find((item) => item.network_infos.chain_id === account.chainId)?.token_infos[0],
+    [chains, account.chainId]
+  );
   const deposit = useDeposit({
     address: token?.address,
     decimals: token?.decimals,
     srcToken: token?.symbol,
-    srcChainId: Number(connectedChain?.id)
+    srcChainId: Number(account.chainId)
   });
+  const balance = useMemo(
+    () => (status >= AccountStatusEnum.Connected ? deposit.balance : undefined),
+    [status, deposit]
+  );
   const { withdraw, unsettledPnL, availableWithdraw } = useWithdraw();
 
   return (
@@ -46,7 +49,7 @@ export const Assets: FC = () => {
           <Table.Row>
             <Table.RowHeaderCell>Wallet Balance:</Table.RowHeaderCell>
             <Table.Cell className="text-right">
-              {usdFormatter.format(Number(deposit.balance))} $
+              {usdFormatter.format(Number(balance ?? '0'))} $
             </Table.Cell>
           </Table.Row>
           <Table.Row>
@@ -73,7 +76,7 @@ export const Assets: FC = () => {
         </Table.Row>
       </Table.Root>
       <OrderlyDeposit
-        walletBalance={FixedNumber.fromString(deposit.balance, { decimals: 6 })}
+        walletBalance={FixedNumber.fromString(balance ?? '0', { decimals: 6 })}
         orderlyBalance={FixedNumber.fromString(availableWithdraw.toPrecision(6), {
           decimals: 6
         })}

diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx
@@ -43,8 +43,6 @@ export const NavBar: FC = () => {
               Account
             </Link>
           </DropdownMenu.Item>
-          <DropdownMenu.Separator />
-          <DropdownMenu.Item>TODO</DropdownMenu.Item>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
       <OrderlyConnect />

diff --git a/app/components/OrderlyDeposit.tsx b/app/components/OrderlyDeposit.tsx
@@ -1,15 +1,14 @@
 import { useAccount, useChains, useDeposit, useWithdraw } from '@orderly.network/hooks';
-import { API, ChainNamespace } from '@orderly.network/types';
+import { ChainNamespace } from '@orderly.network/types';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { Button, Dialog, Tabs } from '@radix-ui/themes';
-import { useNotifications, useSetChain } from '@web3-onboard/react';
+import { useNotifications } from '@web3-onboard/react';
 import { FixedNumber } from 'ethers';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { match } from 'ts-pattern';
 
 import { PendingButton, TokenInput } from '~/components';
 import { useIsTestnet } from '~/hooks';
-import { supportedEvmChainIds, supportedSolanaChainIds } from '~/utils';
 
 export const OrderlyDeposit: FC<{
   walletBalance: FixedNumber;
@@ -27,30 +26,22 @@ export const OrderlyDeposit: FC<{
 
   const [isTestnet] = useIsTestnet();
   const { account, state } = useAccount();
-  const [chains] = useChains(isTestnet ? 'testnet' : 'mainnet', {
-    filter: (item: API.Chain) =>
-      supportedEvmChainIds.includes(item.network_infos?.chain_id) ||
-      supportedSolanaChainIds.includes(item.network_infos?.chain_id)
-  });
-  const [{ connectedChain: connectedEvmChain }] = useSetChain();
-  const token = useMemo(() => {
-    return Array.isArray(chains)
-      ? chains
-          .find((chain) => chain.network_infos.chain_id === Number(connectedEvmChain?.id))
-          ?.token_infos.find((t) => t.symbol === 'USDC')
-      : undefined;
-  }, [chains, connectedEvmChain]);
-  const deposit = useDeposit({
+  const [chains] = useChains(isTestnet ? 'testnet' : 'mainnet');
+  const token = useMemo(
+    () => chains.find((item) => item.network_infos.chain_id === account.chainId)?.token_infos[0],
+    [chains, account.chainId]
+  );
+  const { deposit, approve, allowance, setQuantity } = useDeposit({
     address: token?.address,
     decimals: token?.decimals,
     srcToken: token?.symbol,
-    srcChainId: Number(connectedEvmChain?.id)
+    srcChainId: Number(account.chainId)
   });
 
   useEffect(() => {
     if (amount == null) return;
-    deposit.setQuantity(amount.toString());
-  }, [amount, deposit]);
+    setQuantity(amount.toString());
+  }, [amount, setQuantity]);
   useEffect(() => {
     if (!newOrderlyBalance || !newWalletBalance) {
       setDisabled(true);
@@ -130,14 +121,14 @@ export const OrderlyDeposit: FC<{
             if (amount == null) return;
 
             if (isDeposit) {
-              if (Number(deposit.allowance) < amount.toUnsafeFloat()) {
+              if (Number(allowance) < amount.toUnsafeFloat()) {
                 const { update } = customNotification({
                   eventCode: 'approval',
                   type: 'pending',
                   message: 'Approving USDC for deposit...'
                 });
                 try {
-                  await deposit.approve(amount.toString());
+                  await approve(amount.toString());
                   update({
                     eventCode: 'approvalSuccess',
                     type: 'success',
@@ -161,7 +152,7 @@ export const OrderlyDeposit: FC<{
                   message: 'Depositing USDC into your Orderly Account...'
                 });
                 try {
-                  await deposit.deposit();
+                  await deposit();
                   update({
                     eventCode: 'depositSuccess',
                     type: 'success',
@@ -218,7 +209,7 @@ export const OrderlyDeposit: FC<{
           }}
         >
           {isDeposit
-            ? amount != null && Number(deposit.allowance) < amount.toUnsafeFloat()
+            ? amount != null && Number(allowance) < amount.toUnsafeFloat()
               ? 'Approve'
               : 'Deposit'
             : 'Withdraw'}
@@ -305,7 +296,7 @@ export const OrderlyDeposit: FC<{
               }
             }}
           >
-            Mint 1k USDC via faucet
+            Request USDC via faucet
           </PendingButton>
         )}
       </div>

diff --git a/app/root.tsx b/app/root.tsx
@@ -17,7 +17,8 @@ export const links: LinksFunction = () => [
     href: radixTheme
   },
   { rel: 'stylesheet', href: uno },
-  { rel: 'stylesheet', href: solana }
+  { rel: 'stylesheet', href: solana },
+  { rel: 'icon', href: './assets/orderly.svg' }
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {

diff --git a/public/assets/orderly.svg b/public/assets/orderly.svg