[core-v2.2.11-alpha.2 , react-v2.1.8-alpha.2]: enhancement - update connected wallets balance (#1038)

* async

* updatedBalances

* update_balance

* update balances

* merge develop

* cleanup

* cleanup

* cleanup

* Readme update

* Readme update

* cleanup

* package bump

* package bump and merge develop

* package bump

* core version bump

Author: mahmud-bn

packages/core/README.md

@@ -416,6 +416,18 @@ const onboard = Onboard({
 onboard.state.actions.setWalletModules([ledger, trezor])
 ```
 
+**updatedBalances**
+You may decide to get updated balances for connected wallets after a user action by calling the `updatedBalances` function, which expects a conditional array of addresses.
+
+```
+onboard.state.actions.updateBalances() // update all balances for all connected addresses
+onboard.state.actions.updateBalances(['0xfdadfadsadsadsadasdsa']) // update balance for one address
+onboard.state.actions.updateBalances([
+  '0xfdadfadsadsadsadasdsa',
+  '0xfdsafdsfdsfdsfds'
+]) // update balance for two addresses
+```
+
 ## Setting the User's Chain/Network
 
 When initializing Onboard you define a list of chains/networks that your app supports. If you would like to prompt the user to switch to one of those chains, you can use the `setChain` method on an initialized instance of Onboard:

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.2.11-alpha.1",
+  "version": "2.2.11-alpha.2",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/src/index.ts

@@ -17,6 +17,7 @@ import App from './views/Index.svelte'
 import type { InitOptions, OnboardAPI } from './types'
 import { APP_INITIAL_STATE } from './constants'
 import { internalState } from './internals'
+import updateBalances from './updateBalances'
 
 const API = {
   connectWallet,
@@ -27,7 +28,8 @@ const API = {
     select: state.select,
     actions: {
       setWalletModules,
-      setLocale
+      setLocale,
+      updateBalances
     }
   }
 }
@@ -224,4 +226,4 @@ function mountApp() {
   return app
 }
 
-export default init
+export default init

packages/core/src/store/actions.ts

@@ -13,15 +13,17 @@ import type {
   UpdateAccountAction,
   UpdateAccountCenterAction,
   UpdateWalletAction,
-  WalletState
+  WalletState,
+  UpdateAllWalletsAction
 } from '../types'
 
 import {
   validateAccountCenterUpdate,
   validateLocale,
   validateString,
   validateWallet,
-  validateWalletInit
+  validateWalletInit,
+  validateUpdateBalances
 } from '../validation'
 
 import {
@@ -33,7 +35,8 @@ import {
   UPDATE_ACCOUNT,
   UPDATE_ACCOUNT_CENTER,
   SET_WALLET_MODULES,
-  SET_LOCALE
+  SET_LOCALE,
+  UPDATE_ALL_WALLETS
 } from './constants'
 import { internalState } from '../internals'
 
@@ -177,6 +180,21 @@ export function setLocale(locale: string): void {
   dispatch(action as SetLocaleAction)
 }
 
+export function updateAllWallets(wallets: WalletState[]): void {
+  const error = validateUpdateBalances(wallets)
+  
+  if (error) {
+    throw error
+  }
+  
+  const action = {
+    type: UPDATE_ALL_WALLETS,
+    payload: wallets
+  }
+
+  dispatch(action as UpdateAllWalletsAction)
+}
+
 // ==== HELPERS ==== //
 export function initializeWalletModules(modules: WalletInit[]): WalletModule[] {
   const { device } = internalState

packages/core/src/store/constants.ts

@@ -7,3 +7,4 @@ export const UPDATE_ACCOUNT = 'update_account'
 export const UPDATE_ACCOUNT_CENTER = 'update_account_center'
 export const SET_WALLET_MODULES = 'set_wallet_modules'
 export const SET_LOCALE= 'set_locale'
+export const UPDATE_ALL_WALLETS = 'update_balance'

packages/core/src/store/index.ts

@@ -14,7 +14,8 @@ import type {
   AddWalletAction,
   UpdateAccountAction,
   UpdateAccountCenterAction,
-  Locale
+  Locale,
+  UpdateAllWalletsAction
 } from '../types'
 
 import {
@@ -26,7 +27,8 @@ import {
   UPDATE_ACCOUNT,
   UPDATE_ACCOUNT_CENTER,
   SET_WALLET_MODULES,
-  SET_LOCALE
+  SET_LOCALE,
+  UPDATE_ALL_WALLETS
 } from './constants'
 
 function reducer(state: AppState, action: Action): AppState {
@@ -102,6 +104,14 @@ function reducer(state: AppState, action: Action): AppState {
       }
     }
 
+    case UPDATE_ALL_WALLETS : {
+      const updatedWallets = payload as UpdateAllWalletsAction['payload']
+      return {
+        ...state,
+        wallets: updatedWallets
+      }
+    }
+
     case UPDATE_ACCOUNT_CENTER: {
       const update = payload as UpdateAccountCenterAction['payload']
       return {
@@ -112,6 +122,7 @@ function reducer(state: AppState, action: Action): AppState {
         }
       }
     }
+
     case SET_WALLET_MODULES: {
       return {
         ...state,
@@ -175,4 +186,4 @@ function get(): AppState {
 export const state = {
   select,
   get
-}
+}

packages/core/src/types.ts

@@ -136,6 +136,7 @@ export type Action =
   | UpdateAccountCenterAction
   | SetWalletModulesAction
   | SetLocaleAction
+  | UpdateAllWalletsAction
 
 export type AddChainsAction = { type: 'add_chains'; payload: Chain[] }
 export type AddWalletAction = { type: 'add_wallet'; payload: WalletState }
@@ -175,6 +176,11 @@ export type SetLocaleAction = {
   payload: string
 }
 
+export type UpdateAllWalletsAction = {
+  type: 'update_balance'
+  payload: WalletState[]
+}
+
 // ==== MISC ==== //
 export type ChainStyle = {
   icon: string

packages/core/src/updateBalances.ts

@@ -0,0 +1,33 @@
+import { state } from './store'
+import { getBalance } from './provider'
+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)
+
+          const updatedAccounts = await Promise.all(
+            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)) {
+
+                const updatedBalance = await getBalance(account.address, chain)
+
+                return { ...account, balance: updatedBalance }
+              }
+
+              return account
+            })
+          )
+          return { ...wallet, accounts: updatedAccounts }
+        })
+      )
+        
+    updateAllWallets(updatedWallets)
+}
+
+export default updateBalances

packages/core/src/validation.ts

@@ -13,7 +13,6 @@ import type {
 const chainId = Joi.string().pattern(/^0x[0-9a-fA-F]+$/)
 const chainNamespace = Joi.string().valid('evm')
 const unknownObject = Joi.object().unknown()
-// const address = Joi.string().regex(/^0x[a-fA-F0-9]{40}$/)
 
 const chain = Joi.object({
   namespace: chainNamespace,
@@ -65,6 +64,8 @@ const wallet = Joi.object({
   chains: Joi.array().items(connectedChain)
 })
 
+const wallets = Joi.array().items(wallet)
+
 const recommendedWallet = Joi.object({
   name: Joi.string().required(),
   url: Joi.string().uri().required()
@@ -209,3 +210,8 @@ export function validateWalletInit(data: WalletInit[]): ValidateReturn {
 export function validateLocale(data: string): ValidateReturn {
   return validate(locale, data)
 }
+
+export function validateUpdateBalances(data: 
+WalletState[]): ValidateReturn {
+  return validate(wallets, data)
+}

packages/demo/src/App.svelte

@@ -276,6 +276,9 @@
     <button on:click={() => onboard.setChain({ chainId: '0x89' })}
       >Set Chain to Matic</button
     >
+    <button on:click={() => onboard.state.actions.updateBalances()}
+      >Update Wallet Balance</button
+    >
   {/if}
 
   {#if $wallets$}