eth rpc custom configuration
This commit is contained in:
gozzy
parent
064c481c02
commit
11c87ff319
@ -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.checkingRpc = true
|
||||
}
|
||||
this._checkRpc({ name, url })
|
||||
},
|
||||
checkEthRpc({ name, url = '' }) {
|
||||
this.checkingRpc = true
|
||||
|
||||
if (name === 'custom') {
|
||||
this.customEthRpcUrl = ''
|
||||
this.hasErrorEthRpc = { type: '', msg: '' }
|
||||
return
|
||||
}
|
||||
|
||||
this._checkRpc({ name, url })
|
||||
this._checkEthRpc({ 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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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') }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user