Merge branch 'feat/D1-1024/contract-interactions-view' into staging

rsksmart · Jun 14, 2024 · 5ecc05f · 5ecc05f
2 parents b5d8b11 + 036a6a4
commit 5ecc05f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/src/components/ContractInteraction.vue b/src/components/ContractInteraction.vue
@@ -2,8 +2,13 @@
   <!-- Contract Interaction -->
   <div v-if="verification" class="contract-interaction section">
     <div class="flex-container">
+      <div v-if="this.showMetamaskNotInstalledMsg">
+        <p class="metamask-connection-message">{{ installMetamaskMsg }}</p>
+        <a class="metamask-link" :href="metamaskExtensionUrl" target="_blank">{{ metamaskExtensionUrl }}</a>
+        <p></p>
+      </div>
       <div v-if="this.metamaskConnected && this.networkChanged">
-        <p class="network-changed-message">Warning: Network change detected. It's strongly recommended to reload the page to prevent loss of funds or unexpected behaviors.</p>
+        <p class="metamask-connection-message">Warning: Network change detected. It's strongly recommended to reload the page to prevent loss of funds or unexpected behaviors.</p>
         <button class="btn btn-reload" @click="reloadPage">Reload page</button>
       </div>
       <div>
@@ -92,9 +97,11 @@ export default {
         readOnly: null,
         write: null
       },
-      jsonRpcProvider,
+      jsonRpcProvider: jsonRpcProvider(),
       metamaskConnected: false,
-      installMetamaskMsg: 'MetaMask extension is not installed. Please install it first: https://metamask.io/download/',
+      showMetamaskNotInstalledMsg: false,
+      installMetamaskMsg: 'MetaMask extension is not installed. Please install it first:',
+      metamaskExtensionUrl: 'https://metamask.io/download/',
       browserProvider: null,
       signer: null,
       signerAddress: null,
@@ -219,7 +226,7 @@ export default {
     },
     async connectToRskNetwork () {
       await window.ethereum.request({ method: 'eth_requestAccounts' })
-      this.$set(this, 'browserProvider', browserProvider)
+      this.$set(this, 'browserProvider', browserProvider())
 
       const currentNetwork = await this.browserProvider.getNetwork()
       const currentChainId = `0x${currentNetwork.chainId.toString(16)}`
@@ -255,6 +262,7 @@ export default {
           console.error('Error when connecting to metamask', error)
         }
       } else {
+        this.$set(this, 'showMetamaskNotInstalledMsg', true)
         console.error(this.installMetamaskMsg)
       }
     },
@@ -412,12 +420,16 @@ export default {
     flex-direction: column;
     gap: 10px;
   }
-  .network-changed-message {
+  .metamask-connection-message {
     color: $orange_900;
     text-decoration: underline;
     text-underline-offset: 2px;
     margin-bottom: 10px;
   }
+
+  .metamask-link {
+    color: #fff;
+  }
   .btn-reload {
     border: 1px solid transparent;
     padding: 10px;

diff --git a/src/jsonRpcProvider.js b/src/jsonRpcProvider.js
@@ -39,15 +39,31 @@ export const rskNetworks = {
   }
 }
 
-export const jsonRpcProvider = new ethers.providers.JsonRpcProvider(
-  rskNetworks[envNetwork].rpcUrls[0],
-  {
-    name: rskNetworks[envNetwork].chainName,
-    chainId: parseInt(rskNetworks[envNetwork].chainId)
+export const jsonRpcProvider = () => {
+  try {
+    const provider = new ethers.providers.JsonRpcProvider(
+      rskNetworks[envNetwork].rpcUrls[0],
+      {
+        name: rskNetworks[envNetwork].chainName,
+        chainId: parseInt(rskNetworks[envNetwork].chainId)
+      }
+    )
+
+    return provider
+  } catch (error) {
+    console.error('Error creating jsonRpcProvider instance:', error)
   }
-)
+}
+
+export const browserProvider = () => {
+  try {
+    const browserProvider = new ethers.providers.Web3Provider(window.ethereum)
 
-export const browserProvider = new ethers.providers.Web3Provider(window.ethereum)
+    return browserProvider
+  } catch (error) {
+    console.error('Error creating web3 browser provider instance:', error)
+  }
+}
 
 // const getBlockNumber = async () => {
 //   const blockNumber = await jsonRpcProvider.getBlockNumber()