277 lines
8.2 KiB
Vue
277 lines
8.2 KiB
Vue
<template>
|
|
<div class="modal-card box box-modal">
|
|
<header class="box-modal-header">
|
|
<div class="box-modal-title">{{ $t('settings') }}</div>
|
|
<button type="button" class="delete" @click="$parent.cancel('escape')" />
|
|
</header>
|
|
<div class="field">
|
|
<b-field :label="$t('rpc')" class="has-custom-field" data-test="rpc_endpoint_dropdown">
|
|
<b-dropdown v-model="selectedRpc" expanded aria-role="list">
|
|
<div slot="trigger" class="control" :class="{ 'is-loading': checkingRpc && !isCustomRpc }">
|
|
<div class="input">
|
|
<span>{{ isCustomRpc ? $t('customRpc') : selectedRpc }}</span>
|
|
</div>
|
|
</div>
|
|
<b-dropdown-item
|
|
v-for="{ name, url } in Object.values(networkConfig.rpcUrls)"
|
|
:key="name"
|
|
:value="name"
|
|
aria-role="listitem"
|
|
:data-test="`rpc_endpoint_${name}`"
|
|
@click="checkRpc({ name, url })"
|
|
>
|
|
{{ name }}
|
|
</b-dropdown-item>
|
|
<b-dropdown-item
|
|
value="custom"
|
|
aria-role="listitem"
|
|
data-test="rpc_endpoint_custom"
|
|
@click="checkRpc({ name: 'custom' })"
|
|
>
|
|
{{ $t('customRpc') }}
|
|
</b-dropdown-item>
|
|
</b-dropdown>
|
|
</b-field>
|
|
<div v-if="isCustomRpc" class="field has-custom-field">
|
|
<b-input
|
|
ref="customInput"
|
|
v-model="customRpcUrl"
|
|
type="url"
|
|
:placeholder="$t('customRpcPlaceholder')"
|
|
:custom-class="hasErrorRpc.type"
|
|
:use-html5-validation="false"
|
|
@input="checkCustomRpc"
|
|
></b-input>
|
|
</div>
|
|
<p v-if="hasErrorRpc.msg" class="help" :class="hasErrorRpc.type">
|
|
{{ 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') }}
|
|
</b-button>
|
|
<b-button type="is-primary" :disabled="isDisabledSave" data-test="save_rpc_button" @click="onSave">
|
|
{{ $t('save') }}
|
|
</b-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/* eslint-disable no-console */
|
|
import { mapGetters, mapMutations } from 'vuex'
|
|
|
|
import { debounce } from '@/utils'
|
|
import networkConfig from '@/networkConfig'
|
|
|
|
export default {
|
|
props: {
|
|
netId: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
checkingRpc: false,
|
|
hasErrorRpc: { type: '', msg: '' },
|
|
hasErrorEthRpc: { type: '', msg: '' },
|
|
customRpcUrl: '',
|
|
customEthUrl: '',
|
|
selectedRpc: 'custom',
|
|
selectedEthRpc: 'custom',
|
|
rpc: { name: 'custom', url: '' },
|
|
ethRpc: { name: 'custom', url: '' }
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('settings', ['getRpc']),
|
|
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)
|
|
)
|
|
}
|
|
},
|
|
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']),
|
|
onReset() {
|
|
this.checkingRpc = false
|
|
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 })
|
|
if (this.netId !== 1) {
|
|
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 })
|
|
},
|
|
checkCustomRpc(url) {
|
|
const trimmedUrl = url.trim()
|
|
if (!trimmedUrl) {
|
|
this.hasErrorRpc = { type: '', msg: '' }
|
|
return
|
|
}
|
|
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: '' }
|
|
|
|
const { isValid, error } = await this.$store.dispatch('settings/checkRpc', {
|
|
url,
|
|
netId: this.netId
|
|
})
|
|
|
|
if (isValid) {
|
|
this.hasErrorRpc.type = 'is-primary'
|
|
this.hasErrorRpc.msg = this.$t('rpcStatusOk')
|
|
this.rpc = { name, url }
|
|
} else {
|
|
this.hasErrorRpc.type = 'is-warning'
|
|
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
|
|
}
|
|
}
|
|
}
|
|
</script>
|