Test viem in staging env (#321)

* Testing viem branches * Error handling for ethers lib * Remove log * More error handling * Update all packages to available viem * Add the rest of stable wallets
blocknative · May 14, 2024 · 91b93fc · 91b93fc
1 parent ef0038a
commit 91b93fc
Show file tree

Hide file tree

Showing 5 changed files with 440 additions and 484 deletions.
diff --git a/package.json b/package.json
@@ -1,45 +1,45 @@
 {
   "name": "onboard-notify-react",
-  "version": "0.40.1",
+  "version": "0.40.1-0.1.0",
   "dependencies": {
     "@safe-global/safe-apps-provider": "^0.18.0",
     "@safe-global/safe-apps-sdk": "^8.1.0",
-    "@web3-onboard/arcana-auth": "^2.0.0",
-    "@web3-onboard/bitget": "^2.0.1",
-    "@web3-onboard/blocto": "^2.0.1",
-    "@web3-onboard/capsule": "^2.0.2",
-    "@web3-onboard/cede-store": "^2.2.0",
-    "@web3-onboard/coinbase": "^2.2.7",
-    "@web3-onboard/dcent": "^2.2.8",
-    "@web3-onboard/enkrypt": "^2.0.4",
-    "@web3-onboard/fortmatic": "^2.0.19",
-    "@web3-onboard/frame": "^2.0.2",
-    "@web3-onboard/frontier": "^2.0.4",
-    "@web3-onboard/gas": "^2.1.8",
-    "@web3-onboard/gnosis": "^2.2.1",
-    "@web3-onboard/infinity-wallet": "^2.0.4",
-    "@web3-onboard/injected-wallets": "^2.10.14",
-    "@web3-onboard/keepkey": "^2.3.8",
-    "@web3-onboard/keystone": "^2.3.8",
-    "@web3-onboard/ledger": "^2.6.0",
-    "@web3-onboard/magic": "^2.1.7",
-    "@web3-onboard/metamask": "^2.0.6",
-    "@web3-onboard/mew-wallet": "^2.0.4",
-    "@web3-onboard/phantom": "^2.0.3",
-    "@web3-onboard/portis": "^2.1.7",
-    "@web3-onboard/react": "^2.8.15",
-    "@web3-onboard/sequence": "^2.0.8",
-    "@web3-onboard/taho": "^2.0.5",
-    "@web3-onboard/torus": "^2.2.6",
-    "@web3-onboard/transaction-preview": "^2.0.8",
-    "@web3-onboard/trezor": "^2.4.4",
-    "@web3-onboard/trust": "^2.0.4",
-    "@web3-onboard/uauth": "^2.1.2",
-    "@web3-onboard/venly": "^2.0.0",
-    "@web3-onboard/walletconnect": "^2.5.5",
-    "@web3-onboard/web3auth": "^2.2.3",
-    "@web3-onboard/xdefi": "^2.0.5",
-    "@web3-onboard/zeal": "^2.0.4",
+    "@web3-onboard/arcana-auth": "^2.1.0-viem.1",
+    "@web3-onboard/bitget": "^2.1.0-viem.1",
+    "@web3-onboard/blocto": "^2.1.0-viem.1",
+    "@web3-onboard/capsule": "^2.0.3-viem.1",
+    "@web3-onboard/cede-store": "^2.3.0-viem.1",
+    "@web3-onboard/coinbase": "^2.3.0-viem.1",
+    "@web3-onboard/dcent": "^2.2.8-alpha.1",
+    "@web3-onboard/enkrypt": "^2.1.0-viem.1",
+    "@web3-onboard/fortmatic": "^2.1.0-viem.1",
+    "@web3-onboard/frame": "^2.1.0-viem.1",
+    "@web3-onboard/frontier": "^2.1.0-viem.1",
+    "@web3-onboard/gas": "^2.2.0-viem.1",
+    "@web3-onboard/gnosis": "^2.3.0-viem.1",
+    "@web3-onboard/infinity-wallet": "^2.1.0-viem.1",
+    "@web3-onboard/injected-wallets": "^2.11.0-viem.4",
+    "@web3-onboard/keepkey": "^2.3.8-alpha.1",
+    "@web3-onboard/keystone": "^2.3.8-alpha.1",
+    "@web3-onboard/ledger": "^2.7.0-viem.1",
+    "@web3-onboard/magic": "^2.2.0-viem.1",
+    "@web3-onboard/metamask": "^2.1.0-viem.1",
+    "@web3-onboard/mew-wallet": "^2.1.0-viem.1",
+    "@web3-onboard/phantom": "^2.1.0-viem.1",
+    "@web3-onboard/portis": "^2.2.0-viem.1",
+    "@web3-onboard/react": "^2.9.0-viem.2",
+    "@web3-onboard/sequence": "^2.1.0-viem.1",
+    "@web3-onboard/taho": "^2.1.0-viem.1",
+    "@web3-onboard/torus": "^2.3.0-viem.1",
+    "@web3-onboard/transaction-preview": "^2.1.0-viem.1",
+    "@web3-onboard/trezor": "^2.4.4-alpha.1",
+    "@web3-onboard/trust": "^2.1.0-viem.1",
+    "@web3-onboard/uauth": "^2.2.0-viem.1",
+    "@web3-onboard/venly": "^2.1.0-viem.1",
+    "@web3-onboard/walletconnect": "^2.6.0-viem.1",
+    "@web3-onboard/web3auth": "^2.3.0-viem.1",
+    "@web3-onboard/xdefi": "^2.1.0-viem.1",
+    "@web3-onboard/zeal": "^2.1.0-viem.1",
     "ethers": "^5.5.2",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
@@ -48,7 +48,7 @@
   },
   "scripts": {
     "w3o-latest-prod": "yarn add '@web3-onboard/react' '@web3-onboard/coinbase' '@web3-onboard/transaction-preview' '@web3-onboard/dcent' '@web3-onboard/frontier' '@web3-onboard/fortmatic' '@web3-onboard/frame' '@web3-onboard/gas' '@web3-onboard/gnosis' '@web3-onboard/keepkey' '@web3-onboard/keystone' '@web3-onboard/ledger' '@web3-onboard/infinity-wallet' '@web3-onboard/injected-wallets' '@web3-onboard/magic' '@web3-onboard/phantom' '@web3-onboard/portis' '@web3-onboard/sequence' '@web3-onboard/trezor' '@web3-onboard/trust' '@web3-onboard/torus' '@web3-onboard/taho' '@web3-onboard/web3auth' '@web3-onboard/walletconnect' '@web3-onboard/enkrypt' '@web3-onboard/mew-wallet' '@web3-onboard/xdefi' '@web3-onboard/uauth' '@web3-onboard/zeal' '@web3-onboard/cede-store' '@web3-onboard/venly' '@web3-onboard/blocto' '@web3-onboard/arcana-auth' '@web3-onboard/bitget' '@web3-onboard/metamask' '@web3-onboard/capsule'",
-    "w3o-latest-alpha": "yarn add '@web3-onboard/react@next' '@web3-onboard/coinbase@next' '@web3-onboard/transaction-preview@next' '@web3-onboard/dcent@next' '@web3-onboard/frontier@next' '@web3-onboard/fortmatic@next' '@web3-onboard/frame@next' '@web3-onboard/gas@next' '@web3-onboard/gnosis@next' '@web3-onboard/keepkey@next' '@web3-onboard/keystone@next' '@web3-onboard/ledger@next' '@web3-onboard/infinity-wallet@next' '@web3-onboard/injected-wallets@next' '@web3-onboard/magic@next' '@web3-onboard/phantom@next' '@web3-onboard/portis@next' '@web3-onboard/sequence@next' '@web3-onboard/trezor@next' '@web3-onboard/trust@next' '@web3-onboard/torus@next' '@web3-onboard/taho@next' '@web3-onboard/web3auth@next' '@web3-onboard/walletconnect@next' '@web3-onboard/enkrypt@next' '@web3-onboard/mew-wallet@next' '@web3-onboard/xdefi@next' '@web3-onboard/uauth@next' '@web3-onboard/zeal@next' '@web3-onboard/cede-store@next' '@web3-onboard/venly@next' '@web3-onboard/blocto@next' '@web3-onboard/arcana-auth@next' '@web3-onboard/bitget@next' '@web3-onboard/metamask@next' '@web3-onboard/capsule@next'",
+    "w3o-latest-release": "yarn add '@web3-onboard/react@next' '@web3-onboard/coinbase@next' '@web3-onboard/transaction-preview@next' '@web3-onboard/dcent@next' '@web3-onboard/frontier@next' '@web3-onboard/fortmatic@next' '@web3-onboard/frame@next' '@web3-onboard/gas@next' '@web3-onboard/gnosis@next' '@web3-onboard/keepkey@next' '@web3-onboard/keystone@next' '@web3-onboard/ledger@next' '@web3-onboard/infinity-wallet@next' '@web3-onboard/injected-wallets@next' '@web3-onboard/magic@next' '@web3-onboard/phantom@next' '@web3-onboard/portis@next' '@web3-onboard/sequence@next' '@web3-onboard/trezor@next' '@web3-onboard/trust@next' '@web3-onboard/torus@next' '@web3-onboard/taho@next' '@web3-onboard/web3auth@next' '@web3-onboard/walletconnect@next' '@web3-onboard/enkrypt@next' '@web3-onboard/mew-wallet@next' '@web3-onboard/xdefi@next' '@web3-onboard/uauth@next' '@web3-onboard/zeal@next' '@web3-onboard/cede-store@next' '@web3-onboard/venly@next' '@web3-onboard/blocto@next' '@web3-onboard/arcana-auth@next' '@web3-onboard/bitget@next' '@web3-onboard/metamask@next' '@web3-onboard/capsule@next'",
     "start": "HTTPS=true react-app-rewired start",
     "start-staging": "REACT_APP_API_URL=wss://staging.api.blocknative.com/v0 REACT_APP_STAGING=true HTTPS=true HTTPS=true react-scripts start",
     "start-local": "REACT_APP_API_URL=ws://localhost:54100/v0 REACT_APP_STAGING=true HTTPS=true react-scripts start",

diff --git a/src/App.js b/src/App.js
@@ -95,17 +95,37 @@ const App = () => {
 
   useEffect(() => {
     async function getEtherGasFromRPC() {
-      const customHttpProvider = new ethers.providers.JsonRpcProvider(infuraRPC)
-      const fee = await customHttpProvider.getFeeData()
-      const cleanFees = {
-        price: ethers.utils.formatUnits(fee.gasPrice, 'gwei'),
-        maxPriorityFeePerGas: ethers.utils.formatUnits(
-          fee.maxPriorityFeePerGas,
-          'gwei'
-        ),
-        maxFeePerGas: ethers.utils.formatUnits(fee.maxFeePerGas, 'gwei')
+      try {
+        const customHttpProvider = new ethers.providers.JsonRpcProvider(
+          infuraRPC
+        )
+        if (!customHttpProvider) return console.warn('No provider found')
+        const fee = await customHttpProvider.getFeeData()
+
+        // Occasionally gas values are returned undefined
+        if (
+          !fee ||
+          !fee.gasPrice ||
+          !fee.maxPriorityFeePerGas ||
+          !fee.maxFeePerGas
+        )
+          return console.warn(
+            `Missing necessary gas properties in fee response - fee: ${JSON.stringify(
+              fee
+            )}`
+          )
+        const cleanFees = {
+          price: ethers.utils.formatUnits(fee.gasPrice, 'gwei'),
+          maxPriorityFeePerGas: ethers.utils.formatUnits(
+            fee.maxPriorityFeePerGas,
+            'gwei'
+          ),
+          maxFeePerGas: ethers.utils.formatUnits(fee.maxFeePerGas, 'gwei')
+        }
+        setRPCInfuraGasPrices(cleanFees)
+      } catch (err) {
+        console.error(err)
       }
-      setRPCInfuraGasPrices(cleanFees)
     }
     getEtherGasFromRPC()
   }, [bnGasPrices])

diff --git a/src/services.js b/src/services.js
@@ -35,7 +35,6 @@ import bloctoModule from '@web3-onboard/blocto'
 import bitgetModule from '@web3-onboard/bitget'
 import metamaskModule from '@web3-onboard/metamask'
 import arcanaAuthModule from '@web3-onboard/arcana-auth'
-import metamaskSDK from '@web3-onboard/metamask'
 import capsuleModule, {
   Environment,
   OAuthMethod,
@@ -172,18 +171,6 @@ const arcanaAuth = arcanaAuthModule({
   clientID: 'xar_test_c9c3bc702eb13255c58dab0e74cfa859711c13cb'
 })
 
-const metamaskSDKWallet = metamaskSDK({
-  options: {
-    extensionOnly: false,
-    i18nOptions: {
-      enabled: true
-    },
-    dappMetadata: {
-      name: 'Demo Web3Onboard'
-    }
-  }
-})
-
 const capsule = capsuleModule({
   environment: Environment.DEVELOPMENT,
   apiKey: '992bbd9146d5de8ad0419f141d9a7ca7',
@@ -205,9 +192,9 @@ export const initWeb3Onboard = init({
   wallets: [
     metamask,
     injected,
+    walletConnect,
     ledger,
     trezor,
-    walletConnect,
     coinbase,
     phantom,
     gnosis,
@@ -235,8 +222,7 @@ export const initWeb3Onboard = init({
     venly,
     blocto,
     arcanaAuth,
-    metamaskSDKWallet,
-    capsule
+    // capsule
   ],
   chains: [
     {

diff --git a/src/views/Header/Header.js b/src/views/Header/Header.js
@@ -21,16 +21,22 @@ const Header = props => {
       <div className="user-info">
         {ens?.name ? (
           <span>
-            <img
-              className="user-avatar"
-              // This will change when we switch to Viem
-              src={
-                ens.avatar && ens.avatar.url
-                  ? ens.avatar.url
-                  : avatarPlaceholder
-              }
-              alt="avatar"
-            ></img>
+            {ens && ens.avatar && (
+              <img
+                className="user-avatar"
+                // This will change when we switch to Viem
+                src={ens.avatar}
+                alt="avatar"
+              />
+            )}
+            {!ens && !ens?.avatar && (
+              <img
+                className="user-avatar"
+                // This will change when we switch to Viem
+                src={avatarPlaceholder}
+                alt="avatar"
+              />
+            )}
             <div
               style={{
                 marginLeft: '10px'