Skip to content

Commit 3696463

Browse files
mois-ilyamois-ilya
committed
refactor: update Balance type to use bigint for amounts and enhance BalanceBlock and RefillModal for improved display and handling of balances
1 parent 70ea2a6 commit 3696463

File tree

4 files changed

+124
-63
lines changed

4 files changed

+124
-63
lines changed

‎src/entities/balance/model/balance.store.ts‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,15 @@ const USDT_DECIMALS = 6;
1616
const TON_DECIMALS = 9;
1717

1818
export type Balance = {
19-
total: string;
20-
usdt: DTOBalance;
21-
ton?: DTOBalance;
19+
total: number;
20+
usdt: {
21+
amount: bigint;
22+
promo_amount: bigint;
23+
};
24+
ton?: {
25+
amount: bigint;
26+
promo_amount: bigint;
27+
};
2228
};
2329

2430
export type RefillAddresses = {
@@ -64,9 +70,8 @@ export class BalanceStore {
6470
}
6571

6672
private convertBalanceToDecimal(balance: DTOBalance, decimals: number): number {
67-
const amount = Number(toDecimals(balance.amount, decimals));
68-
const promoAmount = Number(toDecimals(balance.promo_amount, decimals));
69-
return amount + promoAmount;
73+
const total = BigInt(balance.amount) + BigInt(balance.promo_amount);
74+
return Number(toDecimals(total, decimals));
7075
}
7176

7277
private async ensureTonRateLoaded(): Promise<number> {
@@ -92,8 +97,8 @@ export class BalanceStore {
9297

9398
const tonRate = await this.ensureTonRateLoaded();
9499
const totalTon = this.convertBalanceToDecimal(tonBalance, TON_DECIMALS);
95-
96-
return totalUsdt + totalTon * tonRate;
100+
const total = totalUsdt + totalTon * tonRate;
101+
return total;
97102
}
98103

99104
fetchBalance = this.currentBalance$.createAsyncAction(async (): Promise<Balance> => {
@@ -106,9 +111,15 @@ export class BalanceStore {
106111
const total = await this.calculateTotal(usdt_balance, ton_balance);
107112

108113
return {
109-
total: total.toString(),
110-
usdt: usdt_balance,
111-
...(ton_balance && { ton: ton_balance })
114+
total: total,
115+
usdt: {
116+
amount: BigInt(usdt_balance.amount),
117+
promo_amount: BigInt(usdt_balance.promo_amount)
118+
},
119+
...(ton_balance && { ton: {
120+
amount: BigInt(ton_balance.amount),
121+
promo_amount: BigInt(ton_balance.promo_amount)
122+
} })
112123
};
113124
});
114125

‎src/entities/balance/ui/RefillModalContent.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,11 @@ const RefillModalContent: FC<{
169169
</Stack>
170170
)}
171171

172+
{currency === 'TON' && (
173+
<Text textStyle="body2" color="accent.orange" mb="1" textAlign="center">
174+
TON Balance is deprecated, please use USDT instead
175+
</Text>
176+
)}
172177
<InputGroup mb="4">
173178
<Input
174179
ref={inputRef}

‎src/pages/balance/BalanceBlock.tsx‎

Lines changed: 87 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,22 @@ const BalanceBlock: FC = () => {
1515

1616
const usdtAmount = balance ? Number(toDecimals(balance.usdt.amount, 6)) : 0;
1717
const usdtPromoAmount = balance ? Number(toDecimals(balance.usdt.promo_amount, 6)) : 0;
18+
1819
const tonAmount = balance ? Number(toDecimals(balance.ton?.amount || 0, 9)) : 0;
1920
const tonAmountUsd = tonAmount && tonRate ? tonAmount * tonRate : 0;
20-
const totalAmount = balance ? Number(balance.total) : 0;
21+
const tonPromoAmount = balance ? Number(toDecimals(balance.ton?.promo_amount || 0, 9)) : 0;
22+
const tonPromoAmountUsd = tonPromoAmount && tonRate ? tonPromoAmount * tonRate : 0;
23+
24+
const totalTonAmount = tonAmount + tonPromoAmount;
25+
26+
const formattedTotalAmount = balance?.total !== undefined
27+
? new Intl.NumberFormat('en-US', {
28+
style: 'currency',
29+
currency: 'USD',
30+
minimumFractionDigits: 0,
31+
maximumFractionDigits: 2,
32+
}).format(balance?.total)
33+
: null;
2134

2235
return (
2336
<>
@@ -28,71 +41,94 @@ const BalanceBlock: FC = () => {
2841
</Text>
2942
<Flex align="center" justify="space-between" mb="5">
3043
<H2 display="flex" alignItems="center" gap="2">
31-
{isLoading ? (
44+
{isLoading || balance?.total === undefined ? (
3245
<Skeleton w="200px" h="10" />
3346
) : (
34-
<Span title={totalAmount.toString()}>
35-
{balance?.ton?.amount && '≈ '}${totalAmount.toFixed(2)}
47+
<Span title={balance?.total.toString()}>
48+
{formattedTotalAmount}
3649
</Span>
3750
)}
3851
</H2>
39-
<Button onClick={onRefillOpen} variant="secondary">
40-
Refill
41-
</Button>
52+
<Flex gap="2">
53+
<Button onClick={onRefillOpen} variant="secondary">
54+
Refill
55+
</Button>
56+
<Button onClick={onPromoOpen} variant="secondary">
57+
Use Promo Code
58+
</Button>
59+
</Flex>
4260
</Flex>
4361

44-
<Flex columnGap="8" flexWrap="wrap">
45-
<Flex align="center" columnGap="2">
46-
<Text textStyle="body2" color="text.secondary">
47-
Balance:
48-
</Text>
49-
{isLoading ? (
50-
<Skeleton w="100px" h="5" />
51-
) : (
52-
<Text textStyle="body2">{usdtAmount.toFixed(2)} USDT</Text>
53-
)}
54-
</Flex>
55-
{tonAmount > 0 && (
56-
<Flex align="center" columnGap="2">
62+
<Flex columnGap="8" rowGap="4" flexWrap="wrap">
63+
{/* Left Column - USDT Balance and Promo */}
64+
<Box minW="200px">
65+
<Flex align="center" columnGap="2" mb="2">
5766
<Text textStyle="body2" color="text.secondary">
58-
TON Balance:
67+
Balance:
5968
</Text>
6069
{isLoading ? (
61-
<Skeleton w="150px" h="5" />
70+
<Skeleton w="100px" h="5" />
6271
) : (
63-
<Text textStyle="body2">
64-
{tonAmount.toFixed(2)} TON{' '}
65-
{tonAmountUsd > 0 && (
66-
<Span color="text.secondary">
67-
≈ ${tonAmountUsd.toFixed(2)}
68-
</Span>
69-
)}
72+
<Text textStyle="body2" title={usdtAmount.toString()}>{usdtAmount.toFixed(2)} USDT</Text>
73+
)}
74+
</Flex>
75+
<Flex align="center" columnGap="2">
76+
<Flex align="center" gap="1">
77+
<Text textStyle="body2" color="text.secondary">
78+
Promo Balance:
7079
</Text>
80+
<InfoTooltip>
81+
Apply promo codes to get bonus balance
82+
</InfoTooltip>
83+
</Flex>
84+
{isLoading ? (
85+
<Skeleton w="80px" h="5" />
86+
) : (
87+
<Text textStyle="body2" title={usdtPromoAmount.toString()}>{usdtPromoAmount.toFixed(2)} USDT</Text>
7188
)}
7289
</Flex>
90+
</Box>
91+
92+
{/* Right Column - TON Balance and TON Promo (if exists) */}
93+
{totalTonAmount > 0 && (
94+
<Box flex="1" minW="200px">
95+
<Flex align="center" columnGap="2" mb="2">
96+
<Text textStyle="body2" color="text.secondary">
97+
TON Balance:
98+
</Text>
99+
{isLoading ? (
100+
<Skeleton w="150px" h="5" />
101+
) : (
102+
<Text textStyle="body2" title={tonAmount.toString()}>
103+
{tonAmount.toFixed(2)} TON{' '}
104+
<Span color="text.secondary">
105+
≈ ${tonAmountUsd.toFixed(2)}
106+
</Span>
107+
</Text>
108+
)}
109+
</Flex>
110+
<Flex align="center" columnGap="2">
111+
<Flex align="center" gap="1">
112+
<Text textStyle="body2" color="text.secondary">
113+
TON Promo Balance:
114+
</Text>
115+
<InfoTooltip>
116+
Apply promo codes to get bonus balance
117+
</InfoTooltip>
118+
</Flex>
119+
{isLoading ? (
120+
<Skeleton w="150px" h="5" />
121+
) : (
122+
<Text textStyle="body2" title={tonPromoAmount.toString()}>
123+
{tonPromoAmount.toFixed(2)} TON{' '}
124+
<Span color="text.secondary">
125+
≈ ${tonPromoAmountUsd.toFixed(2)}
126+
</Span>
127+
</Text>
128+
)}
129+
</Flex>
130+
</Box>
73131
)}
74-
<Flex align="center" gap="2">
75-
<Flex align="center" gap="1">
76-
<Text textStyle="body2" color="text.secondary">
77-
Promo Balance:
78-
</Text>
79-
<InfoTooltip>Apply promo codes to get bonus balance</InfoTooltip>
80-
</Flex>
81-
{isLoading ? (
82-
<Skeleton w="80px" h="5" />
83-
) : (
84-
<Text textStyle="body2">{usdtPromoAmount.toFixed(2)} USDT</Text>
85-
)}
86-
<Link
87-
color="accent.blue"
88-
textStyle="body2"
89-
onClick={onPromoOpen}
90-
cursor="pointer"
91-
_hover={{ textDecoration: 'underline' }}
92-
>
93-
Use Promo Code
94-
</Link>
95-
</Flex>
96132
</Flex>
97133
</Box>
98134
</Overlay>

‎src/widgets/aside/index.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ import { JettonIcon24 } from 'src/shared/ui/icons/JettonIcon24';
2121
import { balanceStore } from 'src/shared/stores';
2222

2323
const Aside: FC = () => {
24+
const totalAmount = balanceStore.balance?.total;
25+
const formattedTotalAmount = totalAmount !== undefined
26+
? new Intl.NumberFormat('en-US', {
27+
style: 'currency',
28+
currency: 'USD',
29+
minimumFractionDigits: 0,
30+
maximumFractionDigits: 2,
31+
}).format(totalAmount)
32+
: null;
2433
return (
2534
<DropDownMenu>
2635
<DropDownMenuItem linkTo="dashboard" leftIcon={<DashboardIcon />}>
@@ -86,7 +95,7 @@ const Aside: FC = () => {
8695
color="text.secondary"
8796
skeletonWidth="45px"
8897
>
89-
{balanceStore.balance?.total}
98+
{formattedTotalAmount}
9099
</TextWithSkeleton>
91100
</Flex>
92101
</DropDownMenuItem>

0 commit comments

Comments
 (0)