Skip to content

Commit 45db23f

Browse files
TarnadasTarnadas
committed
asset balance & deposit fixes
1 parent 2472b47 commit 45db23f

File tree

5 files changed

+54
-45
lines changed

5 files changed

+54
-45
lines changed

‎app/components/Assets.tsx

+20-17
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,45 @@
11
import {
2-
useAccountInstance,
2+
useAccount,
33
useChains,
44
useCollateral,
55
useDeposit,
66
useWithdraw
77
} from '@orderly.network/hooks';
8-
import { API } from '@orderly.network/types';
8+
import { AccountStatusEnum } from '@orderly.network/types';
99
import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
1010
import { Table, Tooltip } from '@radix-ui/themes';
11-
import { useNotifications, useSetChain } from '@web3-onboard/react';
11+
import { useNotifications } from '@web3-onboard/react';
1212
import { FixedNumber } from 'ethers';
1313
import { FC, useMemo } from 'react';
1414

1515
import { OrderlyDeposit, PendingButton } from '~/components';
1616
import { useIsTestnet } from '~/hooks';
17-
import { supportedEvmChainIds, supportedSolanaChainIds, usdFormatter } from '~/utils';
17+
import { usdFormatter } from '~/utils';
1818

1919
export const Assets: FC = () => {
2020
const [isTestnet] = useIsTestnet();
2121
const collateral = useCollateral();
22-
const [chains] = useChains(isTestnet ? 'testnet' : 'mainnet', {
23-
filter: (item: API.Chain) =>
24-
supportedEvmChainIds.includes(item.network_infos?.chain_id) ||
25-
supportedSolanaChainIds.includes(item.network_infos?.chain_id)
26-
});
27-
const account = useAccountInstance();
22+
const {
23+
account,
24+
state: { status }
25+
} = useAccount();
26+
const [chains] = useChains(isTestnet ? 'testnet' : 'mainnet');
2827
const [_, customNotification] = useNotifications();
2928

30-
const token = useMemo(() => {
31-
return Array.isArray(chains) ? chains[0]?.token_infos[0] : undefined;
32-
}, [chains]);
33-
const [{ connectedChain }] = useSetChain();
29+
const token = useMemo(
30+
() => chains.find((item) => item.network_infos.chain_id === account.chainId)?.token_infos[0],
31+
[chains, account.chainId]
32+
);
3433
const deposit = useDeposit({
3534
address: token?.address,
3635
decimals: token?.decimals,
3736
srcToken: token?.symbol,
38-
srcChainId: Number(connectedChain?.id)
37+
srcChainId: Number(account.chainId)
3938
});
39+
const balance = useMemo(
40+
() => (status >= AccountStatusEnum.Connected ? deposit.balance : undefined),
41+
[status, deposit]
42+
);
4043
const { withdraw, unsettledPnL, availableWithdraw } = useWithdraw();
4144

4245
return (
@@ -46,7 +49,7 @@ export const Assets: FC = () => {
4649
<Table.Row>
4750
<Table.RowHeaderCell>Wallet Balance:</Table.RowHeaderCell>
4851
<Table.Cell className="text-right">
49-
{usdFormatter.format(Number(deposit.balance))} $
52+
{usdFormatter.format(Number(balance ?? '0'))} $
5053
</Table.Cell>
5154
</Table.Row>
5255
<Table.Row>
@@ -73,7 +76,7 @@ export const Assets: FC = () => {
7376
</Table.Row>
7477
</Table.Root>
7578
<OrderlyDeposit
76-
walletBalance={FixedNumber.fromString(deposit.balance, { decimals: 6 })}
79+
walletBalance={FixedNumber.fromString(balance ?? '0', { decimals: 6 })}
7780
orderlyBalance={FixedNumber.fromString(availableWithdraw.toPrecision(6), {
7881
decimals: 6
7982
})}

‎app/components/NavBar.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,6 @@ export const NavBar: FC = () => {
4343
Account
4444
</Link>
4545
</DropdownMenu.Item>
46-
<DropdownMenu.Separator />
47-
<DropdownMenu.Item>TODO</DropdownMenu.Item>
4846
</DropdownMenu.Content>
4947
</DropdownMenu.Root>
5048
<OrderlyConnect />

‎app/components/OrderlyDeposit.tsx

+16-25
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { useAccount, useChains, useDeposit, useWithdraw } from '@orderly.network/hooks';
2-
import { API, ChainNamespace } from '@orderly.network/types';
2+
import { ChainNamespace } from '@orderly.network/types';
33
import { Cross1Icon } from '@radix-ui/react-icons';
44
import { Button, Dialog, Tabs } from '@radix-ui/themes';
5-
import { useNotifications, useSetChain } from '@web3-onboard/react';
5+
import { useNotifications } from '@web3-onboard/react';
66
import { FixedNumber } from 'ethers';
77
import { FC, useEffect, useMemo, useState } from 'react';
88
import { match } from 'ts-pattern';
99

1010
import { PendingButton, TokenInput } from '~/components';
1111
import { useIsTestnet } from '~/hooks';
12-
import { supportedEvmChainIds, supportedSolanaChainIds } from '~/utils';
1312

1413
export const OrderlyDeposit: FC<{
1514
walletBalance: FixedNumber;
@@ -27,30 +26,22 @@ export const OrderlyDeposit: FC<{
2726

2827
const [isTestnet] = useIsTestnet();
2928
const { account, state } = useAccount();
30-
const [chains] = useChains(isTestnet ? 'testnet' : 'mainnet', {
31-
filter: (item: API.Chain) =>
32-
supportedEvmChainIds.includes(item.network_infos?.chain_id) ||
33-
supportedSolanaChainIds.includes(item.network_infos?.chain_id)
34-
});
35-
const [{ connectedChain: connectedEvmChain }] = useSetChain();
36-
const token = useMemo(() => {
37-
return Array.isArray(chains)
38-
? chains
39-
.find((chain) => chain.network_infos.chain_id === Number(connectedEvmChain?.id))
40-
?.token_infos.find((t) => t.symbol === 'USDC')
41-
: undefined;
42-
}, [chains, connectedEvmChain]);
43-
const deposit = useDeposit({
29+
const [chains] = useChains(isTestnet ? 'testnet' : 'mainnet');
30+
const token = useMemo(
31+
() => chains.find((item) => item.network_infos.chain_id === account.chainId)?.token_infos[0],
32+
[chains, account.chainId]
33+
);
34+
const { deposit, approve, allowance, setQuantity } = useDeposit({
4435
address: token?.address,
4536
decimals: token?.decimals,
4637
srcToken: token?.symbol,
47-
srcChainId: Number(connectedEvmChain?.id)
38+
srcChainId: Number(account.chainId)
4839
});
4940

5041
useEffect(() => {
5142
if (amount == null) return;
52-
deposit.setQuantity(amount.toString());
53-
}, [amount, deposit]);
43+
setQuantity(amount.toString());
44+
}, [amount, setQuantity]);
5445
useEffect(() => {
5546
if (!newOrderlyBalance || !newWalletBalance) {
5647
setDisabled(true);
@@ -130,14 +121,14 @@ export const OrderlyDeposit: FC<{
130121
if (amount == null) return;
131122

132123
if (isDeposit) {
133-
if (Number(deposit.allowance) < amount.toUnsafeFloat()) {
124+
if (Number(allowance) < amount.toUnsafeFloat()) {
134125
const { update } = customNotification({
135126
eventCode: 'approval',
136127
type: 'pending',
137128
message: 'Approving USDC for deposit...'
138129
});
139130
try {
140-
await deposit.approve(amount.toString());
131+
await approve(amount.toString());
141132
update({
142133
eventCode: 'approvalSuccess',
143134
type: 'success',
@@ -161,7 +152,7 @@ export const OrderlyDeposit: FC<{
161152
message: 'Depositing USDC into your Orderly Account...'
162153
});
163154
try {
164-
await deposit.deposit();
155+
await deposit();
165156
update({
166157
eventCode: 'depositSuccess',
167158
type: 'success',
@@ -218,7 +209,7 @@ export const OrderlyDeposit: FC<{
218209
}}
219210
>
220211
{isDeposit
221-
? amount != null && Number(deposit.allowance) < amount.toUnsafeFloat()
212+
? amount != null && Number(allowance) < amount.toUnsafeFloat()
222213
? 'Approve'
223214
: 'Deposit'
224215
: 'Withdraw'}
@@ -305,7 +296,7 @@ export const OrderlyDeposit: FC<{
305296
}
306297
}}
307298
>
308-
Mint 1k USDC via faucet
299+
Request USDC via faucet
309300
</PendingButton>
310301
)}
311302
</div>

‎app/root.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export const links: LinksFunction = () => [
1717
href: radixTheme
1818
},
1919
{ rel: 'stylesheet', href: uno },
20-
{ rel: 'stylesheet', href: solana }
20+
{ rel: 'stylesheet', href: solana },
21+
{ rel: 'icon', href: './assets/orderly.svg' }
2122
];
2223

2324
export function Layout({ children }: { children: React.ReactNode }) {

‎public/assets/orderly.svg

+16
Loading

0 commit comments

Comments
 (0)