eth rpc custom configuration

This commit is contained in:
gozzy 2022-12-03 16:02:03 +00:00
parent 064c481c02
commit 11c87ff319
2 changed files with 121 additions and 11 deletions

@ -47,6 +47,51 @@
{{ hasErrorRpc.msg }} {{ hasErrorRpc.msg }}
</p> </p>
</div> </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"> <div class="buttons buttons__halfwidth">
<b-button type="is-primary" outlined data-test="button_reset_rpc" @mousedown.prevent @click="onReset"> <b-button type="is-primary" outlined data-test="button_reset_rpc" @mousedown.prevent @click="onReset">
{{ $t('reset') }} {{ $t('reset') }}
@ -75,9 +120,13 @@ export default {
return { return {
checkingRpc: false, checkingRpc: false,
hasErrorRpc: { type: '', msg: '' }, hasErrorRpc: { type: '', msg: '' },
hasErrorEthRpc: { type: '', msg: '' },
customRpcUrl: '', customRpcUrl: '',
customEthUrl: '',
selectedRpc: 'custom', selectedRpc: 'custom',
rpc: { name: 'custom', url: '' } selectedEthRpc: 'custom',
rpc: { name: 'custom', url: '' },
ethRpc: { name: 'custom', url: '' }
} }
}, },
computed: { computed: {
@ -85,9 +134,18 @@ export default {
networkConfig() { networkConfig() {
return networkConfig[`netId${this.netId}`] return networkConfig[`netId${this.netId}`]
}, },
ethNetworkConfig() {
return networkConfig.netId1
},
isEthereumNetwork() {
return this.netId === 1
},
isCustomRpc() { isCustomRpc() {
return this.selectedRpc === 'custom' return this.selectedRpc === 'custom'
}, },
isCustomEthRpc() {
return this.selectedEthRpc === 'custom'
},
isDisabledSave() { isDisabledSave() {
return ( return (
this.hasErrorRpc.type === 'is-warning' || this.checkingRpc || (this.isCustomRpc && !this.customRpcUrl) this.hasErrorRpc.type === 'is-warning' || this.checkingRpc || (this.isCustomRpc && !this.customRpcUrl)
@ -95,16 +153,24 @@ export default {
} }
}, },
created() { created() {
this.ethRpc = this.getRpc(1)
this.rpc = this.getRpc(this.netId) this.rpc = this.getRpc(this.netId)
this.selectedRpc = this.rpc.name this.selectedRpc = this.rpc.name
this.selectedEthRpc = this.ethRpc.name
if (this.selectedRpc === 'custom') { if (this.selectedRpc === 'custom') {
this.$nextTick(() => { this.$nextTick(() => {
this.customRpcUrl = this.rpc.url this.customRpcUrl = this.rpc.url
}) })
} }
if (this.selectedEthRpc === 'custom') {
this.$nextTick(() => {
this.customEthRpcUrl = this.ethRpc.url
})
}
this.checkRpc(this.rpc) this.checkRpc(this.rpc)
this.checkEthRpc(this.ethRpc)
}, },
methods: { methods: {
...mapMutations('settings', ['SAVE_RPC']), ...mapMutations('settings', ['SAVE_RPC']),
@ -113,25 +179,38 @@ export default {
this.hasErrorRpc = { type: '', msg: '' } this.hasErrorRpc = { type: '', msg: '' }
this.rpc = Object.entries(this.networkConfig.rpcUrls)[0][1] this.rpc = Object.entries(this.networkConfig.rpcUrls)[0][1]
this.ethRpc = Object.entries(this.ethNetworkConfig.rpcUrls)[0][1]
this.selectedRpc = this.rpc.name this.selectedRpc = this.rpc.name
this.selectedEthRpc = this.ethRpc.name
this.checkEthRpc(this.ethRpc)
this.checkRpc(this.rpc) this.checkRpc(this.rpc)
}, },
onSave() { onSave() {
this.SAVE_RPC({ ...this.rpc, netId: this.netId }) this.SAVE_RPC({ ...this.rpc, netId: this.netId })
this.SAVE_RPC({ ...this.ethRpc, netId: 1 })
this.$emit('close') this.$emit('close')
}, },
onCancel() { onCancel() {
this.$emit('cancel') this.$emit('cancel')
}, },
checkRpc({ name, url = '' }) { checkRpc({ name, url = '' }) {
this.checkingRpc = true
if (name === 'custom') { if (name === 'custom') {
this.customRpcUrl = '' this.customRpcUrl = ''
this.hasErrorRpc = { type: '', msg: '' } this.hasErrorRpc = { type: '', msg: '' }
}
this._checkRpc({ name, url })
},
checkEthRpc({ name, url = '' }) {
this.checkingRpc = true this.checkingRpc = true
if (name === 'custom') {
this.customEthRpcUrl = ''
this.hasErrorEthRpc = { type: '', msg: '' }
return return
} }
this._checkEthRpc({ name, url })
this._checkRpc({ name, url })
}, },
checkCustomRpc(url) { checkCustomRpc(url) {
const trimmedUrl = url.trim() const trimmedUrl = url.trim()
@ -141,6 +220,14 @@ export default {
} }
debounce(this._checkRpc, { name: 'custom', url: trimmedUrl }) 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 }) { async _checkRpc({ name, url }) {
this.checkingRpc = true this.checkingRpc = true
this.hasErrorRpc = { type: '', msg: '' } this.hasErrorRpc = { type: '', msg: '' }
@ -159,6 +246,27 @@ export default {
this.hasErrorRpc.msg = error 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 this.checkingRpc = false
} }
} }

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