diff --git a/src/@context/Automation/AutomationProvider.tsx b/src/@context/Automation/AutomationProvider.tsx index 7807b74a8..db4fb3c3b 100644 --- a/src/@context/Automation/AutomationProvider.tsx +++ b/src/@context/Automation/AutomationProvider.tsx @@ -61,7 +61,10 @@ function AutomationProvider({ children }) { }) const [balance, setBalance] = useState({ - native: {} + native: { + symbol: 'eth', + balance: '0' + } }) const [hasDeleteRequest, setHasDeleteRequest] = useState(false) @@ -94,10 +97,16 @@ function AutomationProvider({ children }) { if (!autoWallet) return try { - const newBalance: UserBalance = { native: {} } + const newBalance: UserBalance = { + native: { + symbol: 'eth', + balance: '0' + } + } if (balanceNativeToken) - newBalance.native[balanceNativeToken?.symbol.toLowerCase() || 'ETH'] = - balanceNativeToken?.formatted + newBalance.native.symbol = + balanceNativeToken?.symbol.toLowerCase() || 'eth' + newBalance.native.balance = balanceNativeToken?.formatted if (approvedBaseTokens?.length > 0) { const approved = await getApprovedTokenBalances(autoWallet?.address) diff --git a/src/@hooks/useBalance.tsx b/src/@hooks/useBalance.tsx index 248db7ee0..9462ae76b 100644 --- a/src/@hooks/useBalance.tsx +++ b/src/@hooks/useBalance.tsx @@ -23,7 +23,8 @@ function useBalance(): BalanceProviderValue { const [balance, setBalance] = useState({ native: { - eth: '0' + symbol: 'eth', + balance: '0' } }) @@ -66,10 +67,12 @@ function useBalance(): BalanceProviderValue { try { const userBalance = balanceNativeToken?.formatted const key = balanceNativeToken?.symbol.toLowerCase() - const newNativeBalance: TokenBalances = { [key]: userBalance } const newBalance: UserBalance = { - native: newNativeBalance, + native: { + symbol: key, + balance: userBalance + }, approved: await getApprovedTokenBalances(address) } diff --git a/src/@types/TokenBalance.d.ts b/src/@types/TokenBalance.d.ts index b5a89d3ba..bd117f8c5 100644 --- a/src/@types/TokenBalance.d.ts +++ b/src/@types/TokenBalance.d.ts @@ -1,5 +1,8 @@ interface UserBalance { - native: TokenBalances + native: { + symbol: string + balance: string + } approved?: TokenBalances } diff --git a/src/components/Header/UserPreferences/Automation/Balance.tsx b/src/components/Header/UserPreferences/Automation/Balance.tsx index bbc58a88c..9df1fe1bf 100644 --- a/src/components/Header/UserPreferences/Automation/Balance.tsx +++ b/src/components/Header/UserPreferences/Automation/Balance.tsx @@ -10,12 +10,12 @@ export default function Balance(): ReactElement {
    - {Object.keys(balance.native).map((symbol) => ( -
  • - {symbol}:{' '} - {Number(balance.native[symbol]).toFixed(4)} + {balance.native && ( +
  • + {balance.native.symbol}:{' '} + {Number(balance.native.balance).toFixed(4)}
  • - ))} + )}
diff --git a/src/components/Header/UserPreferences/Automation/Details.tsx b/src/components/Header/UserPreferences/Automation/Details.tsx index 86146bd25..52e0b4190 100644 --- a/src/components/Header/UserPreferences/Automation/Details.tsx +++ b/src/components/Header/UserPreferences/Automation/Details.tsx @@ -64,8 +64,8 @@ export default function Details({ const { autoWallet, autoWalletAddress, + balance, isAutomationEnabled, - nativeBalance, isLoading, hasValidEncryptedWallet, setIsAutomationEnabled @@ -84,11 +84,11 @@ export default function Details({ }, [hasValidEncryptedWallet]) useEffect(() => { - if (!automationConfig.roughTxGasEstimate || !nativeBalance?.balance) return + if (!automationConfig.roughTxGasEstimate) return setRoughTxCountEstimate( - Number(nativeBalance.balance) / automationConfig.roughTxGasEstimate + Number(balance.native.balance) / automationConfig.roughTxGasEstimate ) - }, [nativeBalance?.balance, automationConfig?.roughTxGasEstimate]) + }, [balance.native, automationConfig?.roughTxGasEstimate]) return (
diff --git a/src/components/Header/UserPreferences/Automation/index.tsx b/src/components/Header/UserPreferences/Automation/index.tsx index f5f2b94e4..44ca5c520 100644 --- a/src/components/Header/UserPreferences/Automation/index.tsx +++ b/src/components/Header/UserPreferences/Automation/index.tsx @@ -12,13 +12,8 @@ import styles from './index.module.css' const cx = classNames.bind(styles) export default function Automation(): ReactElement { - const { - autoWallet, - isAutomationEnabled, - hasValidEncryptedWallet, - balance, - nativeBalance - } = useAutomation() + const { autoWallet, isAutomationEnabled, hasValidEncryptedWallet, balance } = + useAutomation() const [hasZeroNetworkTokenBalance, setHasZeroNetworkTokenBalance] = useState(false) @@ -26,13 +21,14 @@ export default function Automation(): ReactElement { useState(false) useEffect(() => { - balance && + balance.approved && setHasZeroERC20TokenBalances( - Object.keys(balance)?.filter((token) => Number(balance[token]) <= 0) - .length > 0 + Object.keys(balance.approved)?.filter( + (token) => Number(balance.approved[token]) <= 0 + ).length > 0 ) - setHasZeroNetworkTokenBalance(Number(nativeBalance?.balance) <= 0) - }, [balance, nativeBalance]) + setHasZeroNetworkTokenBalance(Number(balance.native.balance) <= 0) + }, [balance]) const wrapperClasses = cx({ automation: true,