eth rpc custom configuration

components/Settings.vue

@@ -47,6 +47,51 @@
         {{ hasErrorRpc.msg }}
       </p>
     </div>
+    <template v-if="!isEthereumNetwork">
+      <div class="field">
+        <b-field label="Ethereum RPC provider" class="has-custom-field" data-test="rpc_endpoint_eth_dropdown">
+          <b-dropdown v-model="selectedEthRpc" expanded aria-role="list">
+            <div slot="trigger" class="control" :class="{ 'is-loading': checkingRpc && !isCustomEthRpc }">
+              <div class="input">
+                <span>{{ isCustomEthRpc ? $t('customRpc') : selectedEthRpc }}</span>
+              </div>
+            </div>
+            <b-dropdown-item
+              v-for="{ name, url } in Object.values(ethNetworkConfig.rpcUrls)"
+              :key="name"
+              :value="name"
+              aria-role="listitem"
+              :data-test="`rpc_endpoint_eth_${name}`"
+              @click="checkEthRpc({ name, url })"
+            >
+              {{ name }}
+            </b-dropdown-item>
+            <b-dropdown-item
+              value="custom"
+              aria-role="listitem"
+              data-test="rpc_endpoint_eth_custom"
+              @click="checkEthRpc({ name: 'custom' })"
+            >
+              {{ $t('customRpc') }}
+            </b-dropdown-item>
+          </b-dropdown>
+        </b-field>
+        <div v-if="isCustomEthRpc" class="field has-custom-field">
+          <b-input
+            ref="customInputTwo"
+            v-model="customEthRpcUrl"
+            type="url"
+            :placeholder="$t('customRpcPlaceholder')"
+            :custom-class="hasErrorEthRpc.type"
+            :use-html5-validation="false"
+            @input="checkCustomEthRpc"
+          ></b-input>
+        </div>
+        <p v-if="hasErrorEthRpc.msg" class="help" :class="hasErrorEthRpc.type">
+          {{ hasErrorEthRpc.msg }}
+        </p>
+      </div>
+    </template>
     <div class="buttons buttons__halfwidth">
       <b-button type="is-primary" outlined data-test="button_reset_rpc" @mousedown.prevent @click="onReset">
         {{ $t('reset') }}
@@ -75,9 +120,13 @@ export default {
     return {
       checkingRpc: false,
       hasErrorRpc: { type: '', msg: '' },
+      hasErrorEthRpc: { type: '', msg: '' },
       customRpcUrl: '',
+      customEthUrl: '',
       selectedRpc: 'custom',
-      rpc: { name: 'custom', url: '' }
+      selectedEthRpc: 'custom',
+      rpc: { name: 'custom', url: '' },
+      ethRpc: { name: 'custom', url: '' }
     }
   },
   computed: {
@@ -85,9 +134,18 @@ export default {
     networkConfig() {
       return networkConfig[`netId${this.netId}`]
     },
+    ethNetworkConfig() {
+      return networkConfig.netId1
+    },
+    isEthereumNetwork() {
+      return this.netId === 1
+    },
     isCustomRpc() {
       return this.selectedRpc === 'custom'
     },
+    isCustomEthRpc() {
+      return this.selectedEthRpc === 'custom'
+    },
     isDisabledSave() {
       return (
         this.hasErrorRpc.type === 'is-warning' || this.checkingRpc || (this.isCustomRpc && !this.customRpcUrl)
@@ -95,16 +153,24 @@ export default {
     }
   },
   created() {
+    this.ethRpc = this.getRpc(1)
     this.rpc = this.getRpc(this.netId)
     this.selectedRpc = this.rpc.name
+    this.selectedEthRpc = this.ethRpc.name
 
     if (this.selectedRpc === 'custom') {
       this.$nextTick(() => {
         this.customRpcUrl = this.rpc.url
       })
     }
+    if (this.selectedEthRpc === 'custom') {
+      this.$nextTick(() => {
+        this.customEthRpcUrl = this.ethRpc.url
+      })
+    }
 
     this.checkRpc(this.rpc)
+    this.checkEthRpc(this.ethRpc)
   },
   methods: {
     ...mapMutations('settings', ['SAVE_RPC']),
@@ -113,25 +179,38 @@ export default {
       this.hasErrorRpc = { type: '', msg: '' }
 
       this.rpc = Object.entries(this.networkConfig.rpcUrls)[0][1]
+      this.ethRpc = Object.entries(this.ethNetworkConfig.rpcUrls)[0][1]
       this.selectedRpc = this.rpc.name
+      this.selectedEthRpc = this.ethRpc.name
+      this.checkEthRpc(this.ethRpc)
       this.checkRpc(this.rpc)
     },
     onSave() {
       this.SAVE_RPC({ ...this.rpc, netId: this.netId })
+      this.SAVE_RPC({ ...this.ethRpc, netId: 1 })
       this.$emit('close')
     },
     onCancel() {
       this.$emit('cancel')
     },
     checkRpc({ name, url = '' }) {
+      this.checkingRpc = true
+
       if (name === 'custom') {
         this.customRpcUrl = ''
         this.hasErrorRpc = { type: '', msg: '' }
+      }
+      this._checkRpc({ name, url })
+    },
+    checkEthRpc({ name, url = '' }) {
       this.checkingRpc = true
+
+      if (name === 'custom') {
+        this.customEthRpcUrl = ''
+        this.hasErrorEthRpc = { type: '', msg: '' }
         return
       }
-
+      this._checkEthRpc({ name, url })
-      this._checkRpc({ name, url })
     },
     checkCustomRpc(url) {
       const trimmedUrl = url.trim()
@@ -141,6 +220,14 @@ export default {
       }
       debounce(this._checkRpc, { name: 'custom', url: trimmedUrl })
     },
+    checkCustomEthRpc(url) {
+      const trimmedUrl = url.trim()
+      if (!trimmedUrl) {
+        this.hasErrorEthRpc = { type: '', msg: '' }
+        return
+      }
+      debounce(this._checkEthRpc, { name: 'custom', url: trimmedUrl })
+    },
     async _checkRpc({ name, url }) {
       this.checkingRpc = true
       this.hasErrorRpc = { type: '', msg: '' }
@@ -159,6 +246,27 @@ export default {
         this.hasErrorRpc.msg = error
       }
 
+      this.checkingRpc = false
+    },
+    async _checkEthRpc({ name, url }) {
+      this.checkingRpc = true
+      this.hasErrorEthRpc = { type: '', msg: '' }
+
+      const { isValid, error } = await this.$store.dispatch('settings/checkRpc', {
+        url,
+        netId: 1,
+        isEthRpc: true
+      })
+
+      if (isValid) {
+        this.hasErrorEthRpc.type = 'is-primary'
+        this.hasErrorEthRpc.msg = this.$t('rpcStatusOk')
+        this.ethRpc = { name, url }
+      } else {
+        this.hasErrorEthRpc.type = 'is-warning'
+        this.hasErrorEthRpc.msg = error
+      }
+
       this.checkingRpc = false
     }
   }

store/settings.js

@@ -51,11 +51,14 @@ export const actions = {
   },
   async checkCurrentRpc({ dispatch, getters, rootGetters }) {
     const netId = rootGetters['metamask/netId']
+    if (netId !== 1) {
+      await dispatch('preselectRpc', { netId: 1, isEthRpc: true })
+    }
     await dispatch('preselectRpc', { netId })
   },
-  async preselectRpc({ getters, commit, dispatch }, { netId }) {
+  async preselectRpc({ getters, commit, dispatch }, { netId, isEthRpc = false }) {
     const savedRpc = getters.getRpc(netId)
-    const { isValid } = await dispatch('checkRpc', { ...savedRpc, netId })
+    const { isValid } = await dispatch('checkRpc', { ...savedRpc, netId, isEthRpc })
 
     if (isValid) {
       return
@@ -64,7 +67,7 @@ export const actions = {
     const { rpcUrls } = networkConfig[`netId${netId}`]
 
     for (const [, { name, url }] of Object.entries(rpcUrls)) {
-      const { isValid, error } = await dispatch('checkRpc', { url, netId })
+      const { isValid, error } = await dispatch('checkRpc', { url, netId, isEthRpc })
       if (isValid) {
         commit('SAVE_RPC', { netId, name, url })
         return
@@ -74,14 +77,13 @@ export const actions = {
     }
     throw new Error(this.app.i18n.t('rpcSelectError'))
   },
-  async checkRpc(_, { url, netId }) {
+  async checkRpc(_, { url, netId, isEthRpc = false }) {
     try {
       const web3 = new Web3(url)
-
       const chainId = await web3.eth.getChainId()
-
       const isCurrent = Number(chainId) === Number(netId)
-      if (isCurrent) {
+
+      if (isEthRpc || isCurrent) {
         return { isValid: true }
       } else {
         return { isValid: false, error: this.app.i18n.t('thisRpcIsForDifferentNetwork') }