From 3a9f219999467b55d66e51c19981e8023de18d2a Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Mon, 11 Mar 2024 11:57:04 +0100
Subject: [PATCH] fix: native token typing

---
 .../Automation/AutomationProvider.tsx         | 17 ++++++++++++----
 src/@hooks/useBalance.tsx                     |  9 ++++++---
 src/@types/TokenBalance.d.ts                  |  5 ++++-
 .../UserPreferences/Automation/Balance.tsx    | 10 +++++-----
 .../UserPreferences/Automation/Details.tsx    |  8 ++++----
 .../UserPreferences/Automation/index.tsx      | 20 ++++++++-----------
 6 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/@context/Automation/AutomationProvider.tsx b/src/@context/Automation/AutomationProvider.tsx
index 7807b74a..db4fb3c3 100644
--- a/src/@context/Automation/AutomationProvider.tsx
+++ b/src/@context/Automation/AutomationProvider.tsx
@@ -61,7 +61,10 @@ function AutomationProvider({ children }) {
   })
 
   const [balance, setBalance] = useState<UserBalance>({
-    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 248db7ee..9462ae76 100644
--- a/src/@hooks/useBalance.tsx
+++ b/src/@hooks/useBalance.tsx
@@ -23,7 +23,8 @@ function useBalance(): BalanceProviderValue {
 
   const [balance, setBalance] = useState<UserBalance>({
     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 b5a89d3b..bd117f8c 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 bbc58a88..9df1fe1b 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 {
       <div className={styles.wrapper}>
         <div className={styles.balance}>
           <ul>
-            {Object.keys(balance.native).map((symbol) => (
-              <li key={`automation-balance-${symbol}`}>
-                <span>{symbol}</span>:{' '}
-                {Number(balance.native[symbol]).toFixed(4)}
+            {balance.native && (
+              <li key={`automation-balance-${balance.native.symbol}`}>
+                <span>{balance.native.symbol}</span>:{' '}
+                {Number(balance.native.balance).toFixed(4)}
               </li>
-            ))}
+            )}
           </ul>
         </div>
         <div className={styles.balance}>
diff --git a/src/components/Header/UserPreferences/Automation/Details.tsx b/src/components/Header/UserPreferences/Automation/Details.tsx
index 86146bd2..52e0b419 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 (
     <div className={styles.details}>
diff --git a/src/components/Header/UserPreferences/Automation/index.tsx b/src/components/Header/UserPreferences/Automation/index.tsx
index f5f2b94e..44ca5c52 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<boolean>(false)
@@ -26,13 +21,14 @@ export default function Automation(): ReactElement {
     useState<boolean>(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,