Migrate to web3 4.x

frontend/package.json

@@ -30,7 +30,7 @@
     "twin.macro": "^2.4.2",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1",
-    "web3": "^1.3.5"
+    "web3": "^4.1.1"
   },
   "engines": {
     "node": "16.x"

frontend/src/constants.tsx

@@ -116,7 +116,7 @@ export enum Align {
 export const TENDERLY_PROJECT_ID = '1SVyxsO1IHL8NHPgMyQmuF'
 
 export const DEFAULT_RPC_ENDPOINT = `https://mainnet.base.gateway.tenderly.co/${TENDERLY_PROJECT_ID}`
-// const DEFAULT_RPC_ENDPOINT = `https://mainnet.base.org/`
+// export const DEFAULT_RPC_ENDPOINT = `https://mainnet.base.org/`
 
 // Enable withdrawing whole unlocked balance of staking tokens when unstaking
 export const WITHDRAW_UNLOCKED_STAKING_TOKENS_WHEN_UNSTAKING = false

frontend/src/context/GeyserContext.tsx

@@ -1,6 +1,6 @@
 import { useLazyQuery } from '@apollo/client'
 import { createContext, useContext, useEffect, useState } from 'react'
-import { toChecksumAddress } from 'web3-utils'
+import { utils } from 'web3'
 import { TransactionResponse } from '@ethersproject/providers'
 import { BigNumber, Wallet } from 'ethers'
 import { Geyser, TokenInfo, GeyserConfig, Vault, GeyserInfo, GeyserAction } from 'types'
@@ -129,9 +129,9 @@ export const GeyserContextProvider: React.FC = ({ children }) => {
   }
 
   const selectGeyser = async (geyser: Geyser) => {
-    const geyserAddress = toChecksumAddress(geyser.id)
+    const geyserAddress = utils.toChecksumAddress(geyser.id)
     const geyserConfigs = getGeysersConfigList(networkId)
-    const geyserConfig = geyserConfigs.find((config) => toChecksumAddress(config.address) === geyserAddress)
+    const geyserConfig = geyserConfigs.find((config) => utils.toChecksumAddress(config.address) === geyserAddress)
     if (!geyserConfig) {
       throw new Error(`Geyser config not found for geyser at ${geyserAddress}`)
     }
@@ -158,7 +158,7 @@ export const GeyserContextProvider: React.FC = ({ children }) => {
     })
   }
   const selectGeyserById = async (id: string) => {
-    const geyser = geysers.find((g) => toChecksumAddress(g.id) === toChecksumAddress(id))
+    const geyser = geysers.find((g) => utils.toChecksumAddress(g.id) === utils.toChecksumAddress(id))
     if (geyser) await selectGeyser(geyser)
   }
   const selectGeyserByName = async (name: string) => {
@@ -168,7 +168,7 @@ export const GeyserContextProvider: React.FC = ({ children }) => {
   }
   const getGeyserName = (id: string) => {
     const geyserConfigs = getGeysersConfigList(networkId)
-    const geyser = geyserConfigs.find((g) => toChecksumAddress(g.address) === toChecksumAddress(id))
+    const geyser = geyserConfigs.find((g) => utils.toChecksumAddress(g.address) === utils.toChecksumAddress(id))
     return geyser?.name || ''
   }
 
@@ -193,20 +193,20 @@ export const GeyserContextProvider: React.FC = ({ children }) => {
           // staking and reward tokens might have custom logic for name / symbol
           const geyserAddressToConfig = new Map(
             geyserConfigs.map(({ address, stakingToken, rewardToken }) => [
-              toChecksumAddress(address),
+              utils.toChecksumAddress(address),
               { stakingToken, rewardToken },
             ]),
           )
 
           const geyserTokens = currentGeysers.map(({ id, stakingToken, rewardToken }) => ({
-            ...geyserAddressToConfig.get(toChecksumAddress(id))!,
+            ...geyserAddressToConfig.get(utils.toChecksumAddress(id))!,
             stakingTokenAddress: stakingToken,
             rewardTokenAddress: rewardToken,
           }))
 
           const geyserTokensSet = new Set(
             currentGeysers.flatMap(({ stakingToken, rewardToken }) =>
-              [stakingToken, rewardToken].map(toChecksumAddress),
+              [stakingToken, rewardToken].map(utils.toChecksumAddress),
             ),
           )
           const rewardTokens = await Promise.all(
@@ -236,7 +236,7 @@ export const GeyserContextProvider: React.FC = ({ children }) => {
           const additionalTokensInfos = (
             await Promise.allSettled(
               additionalTokens
-                .filter(({ enabled, address }) => enabled && !geyserTokensSet.has(toChecksumAddress(address)))
+                .filter(({ enabled, address }) => enabled && !geyserTokensSet.has(utils.toChecksumAddress(address)))
                 .map(({ address }) => getTokenInfo(address, signerOrProvider)),
             )
           )

frontend/src/context/StatsContext.tsx

@@ -1,7 +1,7 @@
 import { BigNumberish } from 'ethers'
 import { formatUnits } from 'ethers/lib/utils'
 import React, { createContext, useContext, useEffect, useState } from 'react'
-import { toChecksumAddress } from 'web3-utils'
+import { utils } from 'web3'
 import { getCurrentStakeReward } from 'sdk/stats'
 import { GeyserStats, UserStats, VaultStats } from 'types'
 import {
@@ -58,8 +58,8 @@ export const StatsContextProvider: React.FC = ({ children }) => {
     const { geyser: selectedGeyser, rewardTokenInfo } = selectedGeyserInfo
     const { decimals } = rewardTokenInfo
     if (selectedGeyser && selectedVault && signer && decimals) {
-      const vaultAddress = toChecksumAddress(selectedVault.id)
-      const geyserAddress = toChecksumAddress(selectedGeyser.id)
+      const vaultAddress = utils.toChecksumAddress(selectedVault.id)
+      const geyserAddress = utils.toChecksumAddress(selectedGeyser.id)
       const computedRewards = await getCurrentStakeReward(vaultAddress, geyserAddress, unstakeAmount, signer)
       return parseFloat(formatUnits(computedRewards, decimals))
     }

frontend/src/sdk/actions.ts

@@ -5,8 +5,6 @@ import { ERC20_ABI } from './abis'
 import { getBalanceLocked, getRewardsClaimedFromUnstake } from './stats'
 import { ERC20Balance } from './tokens'
 import { isPermitable, loadNetworkConfig, signPermission, signPermitEIP2612 } from './utils'
-import { toChecksumAddress } from 'web3-utils'
-
 // End to end user flow
 // 1) Create vault: `create()`
 // 2) Depost staking tokens to vault: `deposit()`

frontend/src/utils/formatDisplayAddress.ts

@@ -1,4 +1,4 @@
-import { toChecksumAddress } from 'web3-utils'
+import { utils } from 'web3'
 
 const formatAddr = (addr: string) => `${addr.slice(0, 6)}...${addr.slice(addr.length - 4)}`
-export const displayAddr = (addr: string) => formatAddr(toChecksumAddress(addr))
+export const displayAddr = (addr: string) => formatAddr(utils.toChecksumAddress(addr))

frontend/src/utils/stakingToken.ts

@@ -1,6 +1,6 @@
 import { BigNumber, Contract } from 'ethers'
 import { formatUnits } from 'ethers/lib/utils'
-import { toChecksumAddress } from 'web3-utils'
+import { utils } from 'web3'
 import { StakingToken } from '../constants'
 import { SignerOrProvider, StakingTokenInfo } from '../types'
 import { WRAPPED_ERC20_ABI } from './abis/WrappedERC20'
@@ -38,7 +38,7 @@ export const getStakingTokenInfo = async (
 const getMockLPToken = async (tokenAddress: string): Promise<StakingTokenInfo> => {
   const price = ((await getCurrentPrice('AMPL')) + (await getCurrentPrice('BAL'))) / 2
   return {
-    address: toChecksumAddress(tokenAddress),
+    address: utils.toChecksumAddress(tokenAddress),
     name: `MOCK-AMPL-BAL Liquidity Token`,
     symbol: `MOCK-AMPL-BAL`,
     decimals: 18,
@@ -55,7 +55,7 @@ const getAaveV2 = async (
   wrapperTokenAddress: string,
   signerOrProvider: SignerOrProvider,
 ): Promise<StakingTokenInfo> => {
-  const wrapperAddress = toChecksumAddress(wrapperTokenAddress)
+  const wrapperAddress = utils.toChecksumAddress(wrapperTokenAddress)
   const wrapperContract = new Contract(wrapperAddress, WRAPPED_ERC20_ABI, signerOrProvider)
 
   // aAMPL
@@ -110,7 +110,7 @@ const getAaveV2 = async (
 }
 
 const getBasicToken = async (tokenAddress: string, signerOrProvider: SignerOrProvider): Promise<StakingTokenInfo> => {
-  const address = toChecksumAddress(tokenAddress)
+  const address = utils.toChecksumAddress(tokenAddress)
   const tokenInfo = await getTokenInfo(address, signerOrProvider)
   const price = await getCurrentPrice(tokenInfo.symbol)
   return {

frontend/src/utils/stats.ts

@@ -1,5 +1,5 @@
 import { BigNumber, BigNumberish } from 'ethers'
-import { toChecksumAddress } from 'web3-utils'
+import { utils } from 'web3'
 import { formatUnits } from 'ethers/lib/utils'
 import {
   getGeyserVaultData,
@@ -107,7 +107,7 @@ export const getGeyserStats = async (
             })
           : [],
     }),
-    `${toChecksumAddress(geyser.id)}|stats`,
+    `${utils.toChecksumAddress(geyser.id)}|stats`,
     GEYSER_STATS_CACHE_TIME_MS,
   )
 
@@ -129,7 +129,7 @@ const getLockStakeUnits = (lock: Lock, timestamp: number) => {
  * Returns the amount of reward token that will be unlocked between now and `end`
  */
 const getPoolDrip = async (geyser: Geyser, end: number, signerOrProvider: SignerOrProvider) => {
-  const geyserAddress = toChecksumAddress(geyser.id)
+  const geyserAddress = utils.toChecksumAddress(geyser.id)
   return (await getFutureUnlockedRewards(geyserAddress, end, signerOrProvider)).sub(
     await getCurrentUnlockedRewards(geyserAddress, signerOrProvider),
   )
@@ -284,7 +284,7 @@ const getPoolAPY = async (
 
       return outflowWithBonus === 0 ? 0 : calculateAPY(inflow, outflowWithBonus, periods)
     },
-    `${toChecksumAddress(geyser.id)}|poolAPY`,
+    `${utils.toChecksumAddress(geyser.id)}|poolAPY`,
     GEYSER_STATS_CACHE_TIME_MS,
   )
 
@@ -305,8 +305,8 @@ const getCurrentMultiplier = async (
   signerOrProvider: SignerOrProvider,
 ): Promise<Array<number>> => {
   const { scalingFloor, scalingCeiling, scalingTime } = geyser
-  const geyserAddress = toChecksumAddress(geyser.id)
-  const vaultAddress = toChecksumAddress(vault.id)
+  const geyserAddress = utils.toChecksumAddress(geyser.id)
+  const vaultAddress = utils.toChecksumAddress(vault.id)
 
   const now = nowInSeconds()
   const minMultiplier = 1
@@ -343,8 +343,8 @@ export const getUserStats = async (
       apy: await getPoolAPY(geyser, stakingTokenInfo, rewardTokenInfo, bonusTokensInfo, signerOrProvider),
     }
   }
-  const vaultAddress = toChecksumAddress(vault.id)
-  const geyserAddress = toChecksumAddress(geyser.id)
+  const vaultAddress = utils.toChecksumAddress(vault.id)
+  const geyserAddress = utils.toChecksumAddress(geyser.id)
   const { decimals: rewardTokenDecimals } = rewardTokenInfo
   const { amount } = lock
   const currentRewards = await getCurrentVaultReward(vaultAddress, geyserAddress, signerOrProvider)
@@ -371,7 +371,7 @@ const getVaultTokenBalance = async (
   vaultAddress: string,
   signerOrProvider: SignerOrProvider,
 ): Promise<VaultTokenBalance> => {
-  const tokenAddress = toChecksumAddress(tokenInfo.address)
+  const tokenAddress = utils.toChecksumAddress(tokenInfo.address)
   const parsedBalance = await ERC20Balance(tokenAddress, vaultAddress, signerOrProvider)
   const lockedBalance = await getBalanceLocked(vaultAddress, tokenAddress, signerOrProvider)
   const parsedUnlockedBalance = parsedBalance.sub(lockedBalance)
@@ -398,16 +398,16 @@ export const getVaultStats = async (
   signerOrProvider: SignerOrProvider,
 ): Promise<VaultStats> => {
   if (!vault) return defaultVaultStats()
-  const vaultAddress = toChecksumAddress(vault.id)
+  const vaultAddress = utils.toChecksumAddress(vault.id)
 
-  const addressSet = new Set<string>([stakingTokenInfo.address, rewardTokenInfo.address].map(toChecksumAddress))
+  const addressSet = new Set<string>([stakingTokenInfo.address, rewardTokenInfo.address].map(utils.toChecksumAddress))
   const stakingTokenBalanceInfo = await getVaultTokenBalance(stakingTokenInfo, vaultAddress, signerOrProvider)
   const rewardTokenBalanceInfo = await getVaultTokenBalance(rewardTokenInfo, vaultAddress, signerOrProvider)
 
   const additionalTokenBalances: VaultTokenBalance[] = (
     await Promise.allSettled(
       allTokensInfos
-        .map((tokenInfo) => ({ ...tokenInfo, address: toChecksumAddress(tokenInfo.address) }))
+        .map((tokenInfo) => ({ ...tokenInfo, address: utils.toChecksumAddress(tokenInfo.address) }))
         .filter(({ address }) => {
           const isDuplicate = addressSet.has(address)
           if (!isDuplicate) addressSet.add(address)

frontend/src/utils/token.ts

@@ -1,4 +1,4 @@
-import { toChecksumAddress } from 'web3-utils'
+import { utils } from 'web3'
 import { ERC20Decimals, ERC20Name, ERC20Symbol } from '../sdk'
 import { SignerOrProvider, TokenInfo } from '../types'
 import * as ls from './cache'
@@ -9,7 +9,7 @@ export const getTokenInfo = async (
   signerOrProvider: SignerOrProvider,
   ttl: number = CONST_CACHE_TIME_MS,
 ): Promise<TokenInfo> => {
-  const address = toChecksumAddress(tokenAddress)
+  const address = utils.toChecksumAddress(tokenAddress)
   return ls.computeAndCache<TokenInfo>(
     async () => {
       const value: TokenInfo = {