[core-v2.4.0-alpha.5, react-v2.2.3-alpha.3, vue v2.1.3-alpha.3] : Feature - Update balances on success notification (#1128)

* Add function to updateBalance based on success message for the addresses affected, coerce case in updateBalance function
* Bump version

Author: Adamj1232

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.4.0-alpha.4",
+  "version": "2.4.0-alpha.5",
   "repository": "blocknative/web3-onboard",
   "scripts": {
     "build": "rollup -c",

packages/core/src/notify.ts

@@ -13,6 +13,7 @@ import type {
 import { validateTransactionHandlerReturn } from './validation'
 import { state } from './store'
 import { addNotification } from './store/actions'
+import updateBalances from './updateBalances'
 
 export function handleTransactionUpdates(
   transaction: EthereumTransactionData
@@ -47,6 +48,10 @@ export function transactionEventToNotification(
 
   const type: NotificationType = eventToType(eventCode)
 
+  if (type === 'success') {
+    updateWalletBalance(transaction)
+  }
+
   const key = `${id || hash}-${
     (typeof customization === 'object' && customization.eventCode) || eventCode
   }`
@@ -161,3 +166,30 @@ export function typeToDismissTimeout(type: string): number {
       return 0
   }
 }
+
+const updateWalletBalance = (
+  transaction: Pick<EthereumTransactionData, 'to' | 'from'>
+) => {
+  let walletsToUpdate: string[] = []
+  state.get().wallets.forEach(wallet => {
+    if (
+      wallet.accounts.some(
+        e => e.address.toLowerCase() === transaction.to.toLowerCase()
+      )
+    ) {
+      walletsToUpdate = [...walletsToUpdate, transaction.to]
+    }
+    if (
+      wallet.accounts.some(
+        e => e.address.toLowerCase() === transaction.from.toLowerCase()
+      )
+    ) {
+      walletsToUpdate = [...walletsToUpdate, transaction.from]
+    }
+  })
+
+  // Pause to allow provider endpoint time to update
+  setTimeout(() => {
+    updateBalances(walletsToUpdate)
+  }, 500)
+}

packages/core/src/updateBalances.ts

@@ -4,7 +4,6 @@ import { updateAllWallets } from './store/actions'
 
 async function updateBalances(addresses?: string[]): Promise<void> {
   const { wallets, chains } = state.get()
-
   const updatedWallets = await Promise.all(
     wallets.map(async wallet => {
       const chain = chains.find(({ id }) => id === wallet.chains[0].id)
@@ -13,12 +12,16 @@ async function updateBalances(addresses?: string[]): Promise<void> {
         wallet.accounts.map(async account => {
           // if no provided addresses, we want to update all balances
           // otherwise check if address is in addresses array
-          if (!addresses || addresses.includes(account.address)) {
+          if (
+            !addresses ||
+            addresses.some(
+              address => address.toLowerCase() === account.address.toLowerCase()
+            )
+          ) {
             const updatedBalance = await getBalance(account.address, chain)
 
             return { ...account, balance: updatedBalance }
           }
-
           return account
         })
       )

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.3-alpha.2",
+  "version": "2.2.3-alpha.3",
   "description": "Collection of React Hooks for web3-onboard",
   "repository": "blocknative/web3-onboard",
   "module": "dist/index.js",
@@ -24,7 +24,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.4.0-alpha.4",
+    "@web3-onboard/core": "^2.4.0-alpha.5",
     "@web3-onboard/common": "^2.1.4",
     "use-sync-external-store": "1.0.0"
   },

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.1.3-alpha.2",
+  "version": "2.1.3-alpha.3",
   "description": "Vue Composable for web3-onboard",
   "repository": "blocknative/web3-onboard",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.1.4",
-    "@web3-onboard/core": "^2.4.0-alpha.4",
+    "@web3-onboard/core": "^2.4.0-alpha.5",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {