From 223353ecbde21060253c38740032b055f3d0c916 Mon Sep 17 00:00:00 2001 From: paur94 Date: Wed, 29 May 2024 19:48:36 +0400 Subject: [PATCH 1/2] changed getBalance method when max button clicked --- components/Input/dynamic/MinMax.tsx | 4 ++-- hooks/useBalance.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/Input/dynamic/MinMax.tsx b/components/Input/dynamic/MinMax.tsx index 4e275c77e..69f0334fa 100644 --- a/components/Input/dynamic/MinMax.tsx +++ b/components/Input/dynamic/MinMax.tsx @@ -21,7 +21,7 @@ const MinMax = ({ onAddressGet }: { onAddressGet: (address: string) => void }) = return from && getProvider(from) }, [from, getProvider]) - const { fetchNetworkBalances, fetchGas } = useBalance() + const { fetchBalance, fetchGas } = useBalance() const wallet = provider?.getConnectedWallet() @@ -56,8 +56,8 @@ const MinMax = ({ onAddressGet }: { onAddressGet: (address: string) => void }) = } const handleSetMaxAmount = useCallback(async () => { + from && native_currency && fetchBalance(from, native_currency); setFieldValue('amount', maxAllowedAmount); - from && fetchNetworkBalances(from); from && fromCurrency && diff --git a/hooks/useBalance.ts b/hooks/useBalance.ts index 2376bd7cb..3b6a495ad 100644 --- a/hooks/useBalance.ts +++ b/hooks/useBalance.ts @@ -87,6 +87,7 @@ export default function useBalanceProvider() { setAllBalances((data) => ({ ...data, [address]: filteredBalances?.concat(balance) })) setIsBalanceLoading(false) + return balance } } From 3064ea4923f3793968f2adb25243e540ce3fee7d Mon Sep 17 00:00:00 2001 From: Aren Date: Wed, 29 May 2024 20:07:50 +0400 Subject: [PATCH 2/2] Refactor getBalance method for max button functionality --- Models/Balance.ts | 6 +-- components/Input/dynamic/MinMax.tsx | 60 +++++++++++++++++------------ hooks/useBalance.ts | 5 ++- 3 files changed, 42 insertions(+), 29 deletions(-) diff --git a/Models/Balance.ts b/Models/Balance.ts index 82e73a305..4fc30c8bf 100644 --- a/Models/Balance.ts +++ b/Models/Balance.ts @@ -42,8 +42,8 @@ export type Gas = { } export type BalanceProvider = { - getBalance: ({ network, token, address }: BalanceProps) => Promise | Balance | undefined | void, - getNetworkBalances: (props: NetworkBalancesProps) => Promise | Balance[] | undefined | void, - getGas?: (props: GasProps) => Promise | undefined | void, + getBalance: ({ network, token, address }: BalanceProps) => Promise | Balance | undefined, + getNetworkBalances: (props: NetworkBalancesProps) => Promise | Balance[] | undefined, + getGas?: (props: GasProps) => Promise | undefined, supportedNetworks: string[], } \ No newline at end of file diff --git a/components/Input/dynamic/MinMax.tsx b/components/Input/dynamic/MinMax.tsx index 69f0334fa..33b14a09f 100644 --- a/components/Input/dynamic/MinMax.tsx +++ b/components/Input/dynamic/MinMax.tsx @@ -7,6 +7,9 @@ import useBalance from "../../../hooks/useBalance"; import { useFee } from "../../../context/feeContext"; import { useBalancesState } from "../../../context/balances"; import { useQueryState } from "../../../context/query"; +import { Token } from "../../../Models/Network"; +import { QueryParams } from "../../../Models/QueryParams"; +import { Balance } from "../../../Models/Balance"; const MinMax = ({ onAddressGet }: { onAddressGet: (address: string) => void }) => { @@ -33,37 +36,18 @@ const MinMax = ({ onAddressGet }: { onAddressGet: (address: string) => void }) = const walletBalance = wallet && balances[wallet.address]?.find(b => b?.network === from?.name && b?.token === fromCurrency?.symbol) const native_currency = from?.token - let maxAllowedAmount: number | null = maxAmountFromApi || 0 - if (query.balances && fromCurrency) { - try { - const balancesFromQueries = new URL(window.location.href.replaceAll('"', '"')).searchParams.get('balances'); - const parsedBalances = balancesFromQueries && JSON.parse(balancesFromQueries) - let balancesTyped = parsedBalances - if (balancesTyped && balancesTyped[fromCurrency.symbol] && balancesTyped[fromCurrency.symbol] > Number(minAllowedAmount)) { - maxAllowedAmount = Math.min(maxAllowedAmount, balancesTyped[fromCurrency.symbol]); - } - } - // in case the query parameter had bad formatting just ignoe - catch { } - } else if (walletBalance && (walletBalance.amount >= Number(minAllowedAmount) && walletBalance.amount <= Number(maxAmountFromApi))) { - if (((native_currency?.symbol === fromCurrency?.symbol) || !native_currency) && ((walletBalance.amount - gasAmount) >= Number(minAllowedAmount) && (walletBalance.amount - gasAmount) <= Number(maxAmountFromApi))) { - maxAllowedAmount = walletBalance.amount - gasAmount - } - else maxAllowedAmount = walletBalance.amount - } - else { - maxAllowedAmount = Number(maxAmountFromApi) || 0 - } + const maxAllowedAmount = calculateMaxAmount(maxAmountFromApi, query, fromCurrency, minAllowedAmount, walletBalance, gasAmount, native_currency) const handleSetMaxAmount = useCallback(async () => { - from && native_currency && fetchBalance(from, native_currency); - setFieldValue('amount', maxAllowedAmount); + const balance = from && native_currency && await fetchBalance(from, native_currency); + const maxAmount = calculateMaxAmount(maxAmountFromApi, query, fromCurrency, minAllowedAmount, balance, gasAmount, native_currency) + setFieldValue('amount', maxAmount); from && fromCurrency && amount && fetchGas(from, fromCurrency, destination_address || ""); - }, [from, fromCurrency, destination_address, maxAllowedAmount]) + }, [from, fromCurrency, destination_address, minAllowedAmount, fetchBalance, fetchGas, setFieldValue, amount, query, gasAmount, native_currency]) useEffect(() => { wallet?.address && onAddressGet(wallet.address) @@ -85,4 +69,32 @@ const MinMax = ({ onAddressGet }: { onAddressGet: (address: string) => void }) = ) } + +const calculateMaxAmount = (maxAmountFromApi: number | undefined, query: QueryParams, fromCurrency: Token | undefined, minAllowedAmount: number | undefined, walletBalance: Balance | undefined | null, gasAmount: number, native_currency: Token | undefined) => { + let maxAllowedAmount: number | null = maxAmountFromApi || 0 + + if (query.balances && fromCurrency) { + try { + const balancesFromQueries = new URL(window.location.href.replaceAll('"', '"')).searchParams.get('balances'); + const parsedBalances = balancesFromQueries && JSON.parse(balancesFromQueries) + let balancesTyped = parsedBalances + if (balancesTyped && balancesTyped[fromCurrency.symbol] && balancesTyped[fromCurrency.symbol] > Number(minAllowedAmount)) { + maxAllowedAmount = Math.min(maxAllowedAmount, balancesTyped[fromCurrency.symbol]); + } + } + // in case the query parameter had bad formatting just ignoe + catch { } + } else if (walletBalance && (walletBalance.amount >= Number(minAllowedAmount) && walletBalance.amount <= Number(maxAmountFromApi))) { + if (((native_currency?.symbol === fromCurrency?.symbol) || !native_currency) && ((walletBalance.amount - gasAmount) >= Number(minAllowedAmount) && (walletBalance.amount - gasAmount) <= Number(maxAmountFromApi))) { + maxAllowedAmount = walletBalance.amount - gasAmount + } + else maxAllowedAmount = walletBalance.amount + } + else { + maxAllowedAmount = Number(maxAmountFromApi) || 0 + } + + return maxAllowedAmount +} + export default MinMax \ No newline at end of file diff --git a/hooks/useBalance.ts b/hooks/useBalance.ts index 3b6a495ad..c72d74ba8 100644 --- a/hooks/useBalance.ts +++ b/hooks/useBalance.ts @@ -83,10 +83,11 @@ export default function useBalanceProvider() { network: network, address: address, token - }) || [] + }) - setAllBalances((data) => ({ ...data, [address]: filteredBalances?.concat(balance) })) + setAllBalances((data) => ({ ...data, [address]: filteredBalances?.concat(balance || []) })) setIsBalanceLoading(false) + return balance } }