Feature/goerli network

apps/web/src/components/ConnectWalletsFlow.vue

@@ -3,11 +3,13 @@ import { onMounted, ref, watch, onUnmounted } from 'vue'
 import { CryptoAddress, Currency, LoginCredentials, ProviderString } from '@casimir/types'
 import VueFeather from 'vue-feather'
 import useAuth from '@/composables/auth'
+import useEnvironment from '@/composables/environment'
 import useEthers from '@/composables/ethers'
 import useFormat from '@/composables/format'
 import useLedger from '@/composables/ledger'
 import useTrezor from '@/composables/trezor'
 import useUser from '@/composables/user'
+import useWallets from '@/composables/wallets'
 import useWalletConnect from '@/composables/walletConnectV2'
 // import useWallets from '@/composables/wallets'
 
@@ -24,11 +26,13 @@ const supportedWalletProviders = [
 ] as ProviderString[]
 
 const { login, loginWithSecondaryAddress } = useAuth()
-const { ethersProviderList, getEthersAddressesWithBalances } = useEthers()
+const { requiredNetwork } = useEnvironment()
+const { browserProvidersList, getEthersAddressesWithBalances } = useEthers()
 const { convertString, trimAndLowercaseAddress } = useFormat()
 const { getLedgerAddress } = useLedger()
 const { getTrezorAddress } = useTrezor()
 const { user } = useUser()
+const { detectActiveNetwork, switchEthersNetwork } = useWallets()
 const { connectWalletConnectV2 } = useWalletConnect()
 // const { installedWallets, detectInstalledWalletProviders } = useWallets()
 
@@ -133,10 +137,19 @@ async function selectProvider(provider: ProviderString, currency: Currency = 'ET
   try {
     selectedProvider.value = provider
     selectProviderLoading.value = true
+
+    // Hard Goerli Check
+    // TODO: Make this dynamic
+    const activeNetwork = await detectActiveNetwork(selectedProvider.value as ProviderString)
+    if (activeNetwork !== 5) {
+      await switchEthersNetwork(selectedProvider.value, '0x5')
+      return window.location.reload()
+    }
+
     if (provider === 'WalletConnect') {
-      // TODO: Clarify this.
-      walletProviderAddresses.value = await connectWalletConnectV2('5') as CryptoAddress[]
-    } else if (ethersProviderList.includes(provider)) {
+      // TODO: @@cali1 - pass in the network id dynamically
+      walletProviderAddresses.value = await connectWalletConnectV2(requiredNetwork) as CryptoAddress[]
+    } else if (browserProvidersList.includes(provider)) {
       walletProviderAddresses.value = await getEthersAddressesWithBalances(provider) as CryptoAddress[]
     } else if (provider === 'Ledger') {
       walletProviderAddresses.value = await getLedgerAddress[currency]() as CryptoAddress[]

apps/web/src/composables/auth.ts

@@ -15,7 +15,7 @@ import {
 } from '@casimir/types'
 
 const { usersUrl } = useEnvironment()
-const { ethersProviderList, detectActiveEthersWalletAddress, loginWithEthers } =
+const { browserProvidersList, detectActiveEthersWalletAddress, loginWithEthers } =
   useEthers()
 const { loginWithLedger } = useLedger()
 const { loginWithTrezor } = useTrezor()
@@ -81,7 +81,7 @@ export default function useAuth() {
   }
 
   async function detectActiveWalletAddress(providerString: ProviderString) {
-    if (ethersProviderList.includes(providerString)) {
+    if (browserProvidersList.includes(providerString)) {
       return await detectActiveEthersWalletAddress(providerString)
     } else {
       alert(
@@ -185,7 +185,7 @@ export default function useAuth() {
         // If no, cancel/do nothing
 
         const hardwareWallet = provider === 'Ledger' || provider === 'Trezor'
-        const browserWallet = ethersProviderList.includes(
+        const browserWallet = browserProvidersList.includes(
           provider as ProviderString
         )
         if (hardwareWallet) {
@@ -219,7 +219,7 @@ export default function useAuth() {
     const { address, provider } = loginCredentials
     try {
       const hardwareWallet = provider === 'Ledger' || provider === 'Trezor'
-      const browserWallet = ethersProviderList.includes(provider as ProviderString)
+      const browserWallet = browserProvidersList.includes(provider as ProviderString)
       if (hardwareWallet) {
         await loginWithProvider(loginCredentials as LoginCredentials)
         await getUser()
@@ -270,7 +270,7 @@ export default function useAuth() {
   async function loginWithProvider(loginCredentials: LoginCredentials) {
     const { provider } = loginCredentials
     try {
-      if (ethersProviderList.includes(provider)) {
+      if (browserProvidersList.includes(provider)) {
         await loginWithEthers(loginCredentials)
       } else if (provider === 'Ledger') {
         await loginWithLedger(loginCredentials)
@@ -333,7 +333,7 @@ export default function useAuth() {
   //     }
   //     if (selectedAddress.value === primaryAddress.value) {
   //       return alert('Cannot remove primary account')
-  //     } else if (ethersProviderList.includes(selectedProvider.value)) {
+  //     } else if (browserProvidersList.includes(selectedProvider.value)) {
   //       const opts = {
   //         address: selectedAddress.value,
   //         currency: selectedCurrency.value,

apps/web/src/composables/breakdownMetrics.ts

@@ -251,13 +251,12 @@ export default function useBreakdownMetrics() {
 
     async function blockListener(blockNumber: number) {
         if (!user.value) return
-        console.log('blockNumber :>> ', blockNumber)
+        if (import.meta.env.MODE === 'development') console.log('blockNumber :>> ', blockNumber)
         const addresses = (user.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
         const block = await provider.getBlockWithTransactions(blockNumber)
 
         const txs = block.transactions.map(async (tx: any) => {
             if (addresses.includes(tx.from.toLowerCase())) {
-                console.log('tx :>> ', tx)
                 try {
                     // const response = (manager as CasimirManager).interface.parseTransaction({ data: tx.data })
                     // console.log('response :>> ', response)

apps/web/src/composables/environment.ts

@@ -14,6 +14,9 @@ const provider = new ethers.providers.JsonRpcProvider(ethereumUrl)
 const usersUrl = import.meta.env.PUBLIC_USERS_URL || 'http://localhost:4000'
 const walletConnectProjectId = import.meta.env.PUBLIC_WALLET_CONNECT_PROJECT_ID
 
+/** Network */
+const requiredNetwork: '1' | '5' = origin.includes('localhost') ? '5' : origin.includes('app.dev') ? '5' : '1'
+
 /* Addresses */
 const factoryAddress = import.meta.env.PUBLIC_FACTORY_ADDRESS
 const factory = new ethers.Contract(factoryAddress, ICasimirFactoryAbi, provider) as CasimirFactory
@@ -37,6 +40,7 @@ export default function useEnvironment() {
         provider,
         origin,
         ledgerType,
+        requiredNetwork,
         speculosUrl,
         ssvNetworkAddress,
         ssvViewsAddress,

apps/web/src/composables/ethers.ts

@@ -4,6 +4,7 @@ import { TransactionRequest } from '@casimir/types'
 import { GasEstimate, LoginCredentials, MessageRequest, ProviderString } from '@casimir/types'
 import useEnvironment from '@/composables/environment'
 import useSiwe from '@/composables/siwe'
+import useWallets from '@/composables/wallets'
 
 interface ethereumWindow extends Window {
   ethereum: any;
@@ -12,21 +13,18 @@ declare const window: ethereumWindow
 
 const { ethereumUrl, provider } = useEnvironment()
 const { createSiweMessage, signInWithEthereum } = useSiwe()
+const { installedWallets } = useWallets()
 
-export default function useEthers() {
-  const ethersProviderList = ['BraveWallet', 'CoinbaseWallet', 'MetaMask', 'OkxWallet', 'TrustWallet']
 
-  async function addEthersNetwork (providerString: ProviderString, network: any) {
-    const provider = getBrowserProvider(providerString)
-    try {
-      await provider.request({
-        method: 'wallet_addEthereumChain',
-        params: [network]
-      })
-    } catch(error: any) {
-      console.log(`Error occurred while adding network ${network.chainName}, Message: ${error.message} Code: ${error.code}`)
-    }
-  }
+export default function useEthers() {
+
+  const browserProvidersList = [
+    'BraveWallet',
+    'CoinbaseWallet',
+    'MetaMask',
+    'OkxWallet',
+    'TrustWallet'
+  ]
 
   async function detectActiveEthersWalletAddress(providerString: ProviderString): Promise<string> {
     const provider = getBrowserProvider(providerString)
@@ -46,6 +44,34 @@ export default function useEthers() {
     }
   }
 
+  function getBrowserProvider(providerString: ProviderString) {
+    try {
+      const { ethereum } = window
+      const isInstalled = installedWallets.value.includes(providerString)
+      if (providerString === 'CoinbaseWallet') {
+        if (!ethereum.providerMap && isInstalled) return alert('TrustWallet or another wallet may be interfering with CoinbaseWallet. Please disable other wallets and try again.')
+        if (ethereum?.providerMap) return ethereum.providerMap.get(providerString)
+          else window.open('https://www.coinbase.com/wallet/downloads', '_blank')
+      } else if (providerString === 'MetaMask') {
+        if (ethereum.providerMap && ethereum.providerMap.get('MetaMask')) {
+          return ethereum?.providerMap?.get(providerString) || undefined
+        } else if (ethereum.isMetaMask) {
+          return ethereum
+        } else {
+          window.open('https://metamask.io/download.html', '_blank')
+        }
+      } else if (providerString === 'BraveWallet') {
+        return getBraveWallet()
+      } else if (providerString === 'TrustWallet') {
+        return getTrustWallet()
+      } else if (providerString === 'OkxWallet') {
+        return getOkxWallet()
+      }
+    } catch(err) {
+      console.error('There was an error in getBrowserProvider :>> ', err)
+    }
+  }
+
   /**
    * Estimate gas fee using EIP 1559 methodology
    * @returns string in ETH
@@ -220,36 +246,10 @@ export default function useEthers() {
     return signature
   }
 
-  async function switchEthersNetwork (providerString: ProviderString, chainId: string) {
-    const provider = getBrowserProvider(providerString)
-    const currentChainId = await provider.networkVersion
-    if (chainId === '5') {
-      chainId = '0x5'
-    } else if (chainId === '4690') {
-      chainId = ethers.utils.hexlify(4690)
-    }
-    if (currentChainId.toString() != chainId){
-        try {
-          await provider.request({
-            method:'wallet_switchEthereumChain',
-            params: [{chainId: chainId}]
-          })
-        } catch (err: any) {
-            console.log(`Error occurred while switching chain to chainId ${chainId}, err: ${err.message} code: ${err.code}`)
-            if (err.code === 4902){
-              if (chainId === '5') {
-                addEthersNetwork(providerString, goerliNetwork)
-              } else if (chainId === '0x1252') {
-                addEthersNetwork(providerString, iotexNetwork)
-            }
-          }
-        }
-    }
-  }
-
   return { 
-    ethersProviderList,
+    browserProvidersList,
     detectActiveEthersWalletAddress,
+    getBrowserProvider,
     getEthersAddressesWithBalances,
     getEthersBalance,
     getEthersBrowserSigner,
@@ -258,33 +258,6 @@ export default function useEthers() {
   }
 }
 
-function getBrowserProvider(providerString: ProviderString) {
-  try {
-    const { ethereum } = window
-    if (providerString === 'CoinbaseWallet') {
-      if (!ethereum.providerMap) return alert('TrustWallet or another wallet may be interfering with CoinbaseWallet. Please disable other wallets and try again.')
-      if (ethereum?.providerMap.get(providerString)) return ethereum.providerMap.get(providerString)
-        else window.open('https://www.coinbase.com/wallet/downloads', '_blank')
-    } else if (providerString === 'MetaMask') {
-      if (ethereum.providerMap && ethereum.providerMap.get('MetaMask')) {
-        return ethereum?.providerMap?.get(providerString) || undefined
-      } else if (ethereum.isMetaMask) {
-        return ethereum
-      } else {
-        window.open('https://metamask.io/download.html', '_blank')
-      }
-    } else if (providerString === 'BraveWallet') {
-      return getBraveWallet()
-    } else if (providerString === 'TrustWallet') {
-      return getTrustWallet()
-    } else if (providerString === 'OkxWallet') {
-      return getOkxWallet()
-    }
-  } catch(err) {
-    console.error('There was an error in getBrowserProvider :>> ', err)
-  }
-}
-
 function getBraveWallet() {
   const { ethereum } = window as any
   if (ethereum?.isBraveWallet) {
@@ -308,6 +281,8 @@ function getTrustWallet() {
     for (const provider of providers) {
       if (provider.isTrustWallet) return provider
     }
+  } else {
+    window.open('https://trustwallet.com/download', '_blank')
   }
 }
 

apps/web/src/composables/operators.ts

@@ -8,6 +8,7 @@ import useEthers from '@/composables/ethers'
 import useLedger from '@/composables/ledger'
 import useTrezor from '@/composables/trezor'
 import useUser from '@/composables/user'
+import useWallets from '@/composables/wallets'
 import useWalletConnectV2 from '@/composables/walletConnectV2'
 import { CasimirManager, CasimirRegistry, CasimirViews } from '@casimir/ethereum/build/@types'
 
@@ -21,10 +22,11 @@ let eigenViews: CasimirViews
 
 const { getContracts } = useContracts()
 const { ethereumUrl, ssvNetworkAddress, ssvViewsAddress, usersUrl } = useEnvironment()
-const { ethersProviderList, getEthersBrowserSigner } = useEthers()
+const { browserProvidersList, getEthersBrowserSigner } = useEthers()
 const { getEthersLedgerSigner } = useLedger()
 const { getEthersTrezorSigner } = useTrezor()
 const { user } = useUser()
+const { detectActiveNetwork, switchEthersNetwork } = useWallets()
 const { getWalletConnectSignerV2 } = useWalletConnectV2()
 const loadingInitializeOperators = ref(false)
 const loadingInitializeOperatorsError = ref(false)
@@ -193,10 +195,15 @@ export default function useOperators() {
 
     // TODO: Move this to operators.ts to combine with AddOperator method
     async function registerOperatorWithCasimir({ walletProvider, address, operatorId, collateral, nodeUrl }: RegisterOperatorWithCasimirParams) {
+        const activeNetwork = await detectActiveNetwork(walletProvider)
+        if (activeNetwork !== 5) {
+            await switchEthersNetwork(walletProvider, '0x5')
+            return window.location.reload()
+        }
         loadingRegisteredOperators.value = true
         try {
             let signer
-            if (ethersProviderList.includes(walletProvider)) {
+            if (browserProvidersList.includes(walletProvider)) {
                 signer = getEthersBrowserSigner(walletProvider)
             } else if (walletProvider === 'WalletConnect') {
                 await getWalletConnectSignerV2()

apps/web/src/composables/staking.ts

@@ -6,14 +6,16 @@ import useEnvironment from '@/composables/environment'
 import useEthers from '@/composables/ethers'
 import useLedger from '@/composables/ledger'
 import useTrezor from '@/composables/trezor'
+import useWallets from '@/composables/wallets'
 import useWalletConnectV2 from './walletConnectV2'
 import { CasimirManager } from '@casimir/ethereum/build/@types'
 
 const { getContracts } = useContracts()
 const { provider } = useEnvironment()
-const { ethersProviderList, getEthersBrowserSigner } = useEthers()
+const { browserProvidersList, getEthersBrowserSigner } = useEthers()
 const { getEthersLedgerSigner } = useLedger()
 const { getEthersTrezorSigner } = useTrezor()
+const { detectActiveNetwork, switchEthersNetwork } = useWallets()
 const { getWalletConnectSignerV2 } = useWalletConnectV2()
 
 const stakingComposableInitialized = ref(false)
@@ -38,8 +40,14 @@ export default function useStaking() {
 
     async function deposit({ amount, walletProvider, type }: { amount: string, walletProvider: ProviderString, type: 'default' | 'eigen' }) {
         try {
+            const activeNetwork = await detectActiveNetwork(walletProvider)
+            if (activeNetwork !== 5) {
+                await switchEthersNetwork(walletProvider, '0x5')
+                return window.location.reload()
+            }
+
             let signer
-            if (ethersProviderList.includes(walletProvider)) {
+            if (browserProvidersList.includes(walletProvider)) {
                 signer = getEthersBrowserSigner(walletProvider)
             } else if (walletProvider === 'WalletConnect') {
                 await getWalletConnectSignerV2()
@@ -92,7 +100,7 @@ export default function useStaking() {
 
     async function getWithdrawableBalance({walletProvider, type}: {walletProvider: ProviderString, type: 'default' | 'eigen'}) {
         let signer
-        if (ethersProviderList.includes(walletProvider)) {
+        if (browserProvidersList.includes(walletProvider)) {
             signer = getEthersBrowserSigner(walletProvider)
         } else if (walletProvider === 'WalletConnect') {
             await getWalletConnectSignerV2()
@@ -111,8 +119,14 @@ export default function useStaking() {
     }
 
     async function withdraw({ amount, walletProvider, type }: { amount: string, walletProvider: ProviderString, type: 'default' | 'eigen' }) {
+        const activeNetwork = await detectActiveNetwork(walletProvider)
+        if (activeNetwork !== 5) {
+            await switchEthersNetwork(walletProvider, '0x5')
+            return window.location.reload()
+        }
+
         let signer
-        if (ethersProviderList.includes(walletProvider)) {
+        if (browserProvidersList.includes(walletProvider)) {
             signer = getEthersBrowserSigner(walletProvider)
         } else if (walletProvider === 'WalletConnect') {
             await getWalletConnectSignerV2()