feat: updated gasOracle library

components/DepositModalBox.vue

@@ -28,7 +28,6 @@
     <div v-show="isEnabledSaveFile" class="note">
       {{ $t('saveAsFile') }} <span class="has-text-primary">{{ filename }}</span>
     </div>
-    <gas-price-slider v-if="!eipSupported" v-model="gasPrice" @validate="onGasPriceValidate" />
     <template v-if="!isSetupAccount">
       <i18n tag="div" path="yourDontHaveAccount" class="notice">
         <template v-slot:account>
@@ -57,7 +56,7 @@
     <b-button
       v-else
       type="is-primary is-fullwidth"
-      :disabled="disableButton || (!isValidGasPrice && !eipSupported)"
+      :disabled="disableButton"
       data-test="send_deposit_button"
       @click="_sendDeposit"
     >
@@ -70,27 +69,22 @@
 import { mapActions, mapState, mapGetters } from 'vuex'
 
 import { sliceAddress } from '@/utils'
-import GasPriceSlider from '@/components/GasPriceSlider'
 import { ConnectButton } from '@/components/web3Connect'
 
 export default {
   components: {
-    ConnectButton,
+    ConnectButton
-    GasPriceSlider
   },
   data() {
     return {
       isBackuped: false,
       tooltipCopy: this.$t('clickToCopy'),
-      gasPrice: undefined,
-      isValidGasPrice: false,
       isEncrypted: false,
       copyTimer: null
     }
   },
   computed: {
     ...mapGetters('metamask', ['isLoggedIn']),
-    ...mapGetters('gasPrices', ['eipSupported']),
     ...mapGetters('txHashKeeper', ['addressExplorerUrl']),
     ...mapGetters('encryptedNote', ['isSetupAccount', 'accounts', 'isEnabledSaveFile']),
     ...mapState('application', ['note', 'prefix']),
@@ -135,13 +129,10 @@ export default {
     },
     async _sendDeposit() {
       this.$store.dispatch('loading/enable', { message: this.$t('preparingTransactionData') })
-      await this.sendDeposit({ gasPrice: this.gasPrice, isEncrypted: this.isEncrypted })
+      await this.sendDeposit({ isEncrypted: this.isEncrypted })
       this.$store.dispatch('loading/disable')
       this.$parent.close()
     },
-    onGasPriceValidate(value) {
-      this.isValidGasPrice = value
-    },
     async copyNoteAccount() {
       await this.$copyText(this.accounts.encrypt)
       this.onCopy()

components/GasPriceSlider.vue

@@ -1,132 +0,0 @@
-<template>
-  <div class="field field-slider">
-    <div class="label">
-      Gas Price
-      <b-field :class="hasError ? 'is-warning' : ''">
-        <b-input
-          ref="gasPriceInput"
-          v-model.number="input"
-          type="number"
-          :min="0"
-          custom-class="hide-spinner"
-          :use-html5-validation="false"
-          expanded
-          :style="{ width: reactiveWidth }"
-        ></b-input>
-        <div class="control has-text" @click="$refs.gasPriceInput.focus()">
-          <span>Gwei</span>
-        </div>
-      </b-field>
-    </div>
-    <b-slider
-      v-model="slider"
-      :min="0"
-      :max="2"
-      :custom-formatter="tooltipFormat"
-      bigger-slider-focus
-      lazy
-      rounded
-      @change="onChange"
-    >
-      <template v-for="(val, index) of Object.keys(gasPrices).filter((k) => k !== 'instant')">
-        <b-slider-tick :key="val" :value="index">{{ $t(`gasPriceSlider.${val}`) }}</b-slider-tick>
-      </template>
-    </b-slider>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { debounce } from '@/utils'
-const { toWei, toHex } = require('web3-utils')
-
-export default {
-  inheritAttrs: false,
-  data() {
-    return {
-      input: null,
-      slider: 2,
-      hasError: false,
-      reactiveWidth: ''
-    }
-  },
-  computed: {
-    ...mapGetters('gasPrices', ['gasPrices'])
-  },
-  watch: {
-    input: {
-      handler(gasPrice) {
-        this.setWidth(gasPrice)
-        debounce(this.validateGasPrice, gasPrice)
-      }
-    }
-  },
-  mounted() {
-    this.input = this.gasPrices.fast
-    this.setWidth(this.input)
-  },
-  methods: {
-    onChange(index) {
-      this.input = this.getValueFromIndex(index)
-    },
-    tooltipFormat(index) {
-      return this.getValueFromIndex(index)
-    },
-    getValueFromIndex(index) {
-      switch (Number(index)) {
-        case 2:
-          return this.gasPrices.fast
-        case 1:
-          return this.gasPrices.standard
-        case 0:
-          return this.gasPrices.low
-      }
-    },
-    validateGasPrice(gasPrice) {
-      try {
-        let speed = ''
-        this.hasError = false
-
-        if (gasPrice === '') {
-          throw new Error('must not be an empty')
-        }
-        if (gasPrice <= 0) {
-          throw new Error('must be greater than zero')
-        }
-
-        if (gasPrice < this.gasPrices.standard) {
-          speed = 'low'
-          this.slider = 0
-        } else if (gasPrice === this.gasPrices.standard) {
-          this.slider = 1
-          speed = 'standard'
-        } else {
-          this.slider = 2
-          speed = 'fast'
-        }
-
-        if (gasPrice) {
-          gasPrice = {
-            speed,
-            value: toHex(toWei(gasPrice.toString(), 'gwei'))
-          }
-        }
-        this.$emit('input', gasPrice)
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error('Invalid gas price:', e.message)
-        this.hasError = true
-      } finally {
-        this.$emit('validate', !this.hasError)
-      }
-    },
-    setWidth(value) {
-      if (!value) {
-        value = 0
-      }
-
-      this.reactiveWidth = `${Math.min(75, Math.max(35, 19 + value && value.toString().length * 12))}px`
-    }
-  }
-}
-</script>

components/withdraw/WithdrawTotal.vue

@@ -13,7 +13,8 @@
       </div>
       <div v-if="withdrawType === 'relayer'" class="withdraw-data-item">
         {{ $t('gasPrice') }}
-        <span>{{ gasPrices.fast }} Gwei</span>
+
+        <span>{{ gasPriceInGwei }} Gwei</span>
       </div>
       <div v-if="withdrawType === 'relayer'" class="withdraw-data-item">
         {{ $t('networkFee') }}
@@ -72,7 +73,7 @@ export default {
     ...mapGetters('metamask', {
       networkCurrency: 'currency'
     }),
-    ...mapGetters('gasPrices', ['gasPrices']),
+    ...mapGetters('gasPrices', ['gasPriceInGwei']),
     ...mapGetters('token', ['toDecimals', 'fromDecimals']),
     ...mapGetters('application', ['networkFee']),
     ...mapGetters('price', ['tokenRate']),

layouts/default.vue

@@ -80,7 +80,7 @@ export default {
             await this.selectRpc({ netId: 1, action: this.preselectRpc })
           }
 
-          this.$store.dispatch('gasPrices/fetchGasPrice', {})
+          this.$store.dispatch('gasPrices/fetchGasPrice')
           this.$store.dispatch('price/fetchTokenPrice', {}, { root: true })
           try {
             this.$store.dispatch('application/loadAllNotesData')

networkConfig.js

@@ -114,7 +114,7 @@ export default {
       }
     },
     ensSubdomainKey: 'mainnet-tornado',
-    pollInterval: 30,
+    pollInterval: 15,
     constants: {
       NOTE_ACCOUNT_BLOCK: 11842486,
       ENCRYPTED_NOTES_BLOCK: 14248730,
@@ -276,7 +276,7 @@ export default {
       }
     },
     ensSubdomainKey: 'optimism-tornado',
-    pollInterval: 20,
+    pollInterval: 15,
     constants: {
       NOTE_ACCOUNT_BLOCK: 2243694,
       ENCRYPTED_NOTES_BLOCK: 2243694
@@ -331,7 +331,7 @@ export default {
       }
     },
     ensSubdomainKey: 'arbitrum-tornado',
-    pollInterval: 20,
+    pollInterval: 15,
     constants: {
       NOTE_ACCOUNT_BLOCK: 3430605,
       ENCRYPTED_NOTES_BLOCK: 3430605
@@ -378,7 +378,7 @@ export default {
       }
     },
     ensSubdomainKey: 'gnosis-tornado',
-    pollInterval: 20,
+    pollInterval: 15,
     constants: {
       NOTE_ACCOUNT_BLOCK: 17754564,
       ENCRYPTED_NOTES_BLOCK: 17754564
@@ -532,7 +532,7 @@ export default {
       }
     },
     ensSubdomainKey: 'goerli-tornado',
-    pollInterval: 30,
+    pollInterval: 15,
     constants: {
       NOTE_ACCOUNT_BLOCK: 4131375,
       ENCRYPTED_NOTES_BLOCK: 4131375,

package.json

@@ -38,7 +38,7 @@
     "file-saver": "^2.0.5",
     "fixed-merkle-tree": "^0.7.3",
     "form-data": "^3.0.0",
-    "gas-price-oracle": "^0.4.6",
+    "gas-price-oracle": "^0.5.0",
     "graphql": "^15.5.1",
     "idb": "^6.0.0",
     "jspdf": "^1.5.3",

store/application.js

@@ -166,7 +166,7 @@ const getters = {
     return ACTION_GAS[action]
   },
   networkFee: (state, getters, rootState, rootGetters) => {
-    const gasPrice = rootGetters['gasPrices/fastGasPrice']
+    const gasPrice = rootGetters['gasPrices/gasPrice']
 
     const networkFee = toBN(gasPrice).mul(toBN(getters.withdrawGas))
 
@@ -554,7 +554,7 @@ const actions = {
       storeName: `encrypted_events`
     })
   },
-  async sendDeposit({ state, rootState, getters, rootGetters, dispatch, commit }, { isEncrypted, gasPrice }) {
+  async sendDeposit({ state, rootState, getters, rootGetters, dispatch, commit }, { isEncrypted }) {
     try {
       const { commitment, note, prefix } = state
       // eslint-disable-next-line prefer-const
@@ -593,7 +593,6 @@ const actions = {
       const callParams = {
         method: 'eth_sendTransaction',
         params: {
-          gasPrice,
           to: contractInstance._address,
           gas: numberToHex(gas + 50000),
           value: numberToHex(value),
@@ -961,7 +960,7 @@ const actions = {
   },
   calculateEthToReceive({ commit, state, rootGetters }, { currency }) {
     const gasLimit = rootGetters['metamask/networkConfig'].tokens[currency].gasLimit
-    const gasPrice = toBN(rootGetters['gasPrices/fastGasPrice'])
+    const gasPrice = toBN(rootGetters['gasPrices/gasPrice'])
 
     const ethToReceive = gasPrice
       .mul(toBN(gasLimit))

store/gasPrices.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import Web3 from 'web3'
+import { toHex, fromWei } from 'web3-utils'
 import { GasPriceOracle } from 'gas-price-oracle'
 import { serialize } from '@ethersproject/transactions'
-import { toHex, toWei, toBN, fromWei } from 'web3-utils'
 
 import networkConfig from '@/networkConfig'
 import OvmGasPriceOracleABI from '@/abis/OvmGasPriceOracle.abi.json'
@@ -10,39 +10,22 @@ import { DUMMY_NONCE, DUMMY_WITHDRAW_DATA } from '@/constants/variables'
 
 export const state = () => {
   return {
-    oracle: {
+    gasParams: { gasPrice: 50 },
-      instant: 80,
-      fast: 50,
-      standard: 25,
-      low: 8
-    },
-    eip: {
-      instant: {
-        baseFee: 80,
-        maxFeePerGas: 80,
-        maxPriorityFeePerGas: 3
-      },
-      fast: {
-        baseFee: 50,
-        maxFeePerGas: 50,
-        maxPriorityFeePerGas: 3
-      },
-      standard: {
-        baseFee: 25,
-        maxFeePerGas: 27,
-        maxPriorityFeePerGas: 2
-      },
-      low: {
-        baseFee: 8,
-        maxFeePerGas: 9,
-        maxPriorityFeePerGas: 1
-      }
-    },
     l1Fee: '0'
   }
 }
 
 export const getters = {
+  oracle: (state, getters, rootState, rootGetters) => {
+    const netId = Number(rootGetters['metamask/netId'])
+    const { gasPrices } = rootGetters['metamask/networkConfig']
+
+    return new GasPriceOracle({
+      chainId: netId,
+      defaultRpc: rootGetters['settings/currentRpc'].url,
+      defaultFallbackGasPrices: gasPrices
+    })
+  },
   ovmGasPriceOracleContract: (state, getters, rootState) => ({ netId }) => {
     const config = networkConfig[`netId${netId}`]
     const { url } = rootState.settings[`netId${netId}`].rpc
@@ -57,78 +40,21 @@ export const getters = {
   l1Fee: (state) => {
     return state.l1Fee
   },
-  oracle: (state, getters, rootState, rootGetters) => {
+  getGasParams: (state) => {
-    const netId = Number(rootGetters['metamask/netId'])
+    return state.gasParams
-    const { gasPrices } = rootGetters['metamask/networkConfig']
-
-    return new GasPriceOracle({
-      chainId: netId,
-      defaultRpc: rootGetters['settings/currentRpc'].url,
-      defaultFallbackGasPrices: gasPrices
-    })
   },
-  eipSupported: (state, getters, rootState, rootGetters) => {
+  gasPrice: (state, getters) => {
-    const netId = rootGetters['metamask/netId']
+    const { gasPrice, maxFeePerGas } = getters.getGasParams
-    const networksWithEIP1559 = [1, 5]
+    return toHex(maxFeePerGas || gasPrice)
-
-    return networksWithEIP1559.includes(netId)
   },
-  getGasParams: (state, getters) => (speed = 'fast', isDisable = false) => {
+  gasPriceInGwei: (state, getters) => {
-    const { maxFeePerGas, maxPriorityFeePerGas } = state.eip[speed]
+    return fromWei(getters.gasPrice, 'gwei')
-
-    if (!isDisable && getters.eipSupported) {
-      return {
-        maxFeePerGas: toHex(maxFeePerGas),
-        maxPriorityFeePerGas: toHex(maxPriorityFeePerGas)
-      }
-    }
-
-    return {
-      gasPrice: getters.getGasPrice(speed)
-    }
-  },
-  getGasPrice: (state, getters) => (speed = 'fast') => {
-    const gasPrices = getters.gasPrices
-    return toHex(toWei(gasPrices[speed].toString(), 'gwei'))
-  },
-  fastGasPrice: (state, getters) => {
-    return getters.getGasPrice('fast')
-  },
-  gasPrices: (state, getters) => {
-    const parseGwei = (value) => String(Math.floor(Number(fromWei(String(value), 'gwei')) * 100) / 100)
-
-    const { eip, oracle } = state
-
-    if (getters.eipSupported) {
-      return {
-        instant: parseGwei(eip.instant.maxFeePerGas),
-        low: parseGwei(eip.low.maxFeePerGas),
-        standard: parseGwei(eip.standard.maxFeePerGas),
-        fast: parseGwei(eip.fast.maxFeePerGas)
-      }
-    }
-
-    return {
-      instant: String(oracle.instant),
-      low: String(oracle.low),
-      standard: String(oracle.standard),
-      fast: String(oracle.fast)
-    }
   }
 }
 
 export const mutations = {
-  SAVE_ORACLE_GAS_PRICES(state, { instant, fast, standard, low }) {
+  SAVE_GAS_PARAMS(state, payload) {
-    this._vm.$set(state.oracle, 'instant', instant)
+    state.gasParams = payload
-    this._vm.$set(state.oracle, 'fast', fast)
-    this._vm.$set(state.oracle, 'standard', standard)
-    this._vm.$set(state.oracle, 'low', low)
-  },
-  SAVE_EIP_GAS_PRICES(state, { instant, fast, standard, low }) {
-    this._vm.$set(state.eip, 'instant', instant)
-    this._vm.$set(state.eip, 'fast', fast)
-    this._vm.$set(state.eip, 'standard', standard)
-    this._vm.$set(state.eip, 'low', low)
   },
   SAVE_L1_FEE(state, l1Fee) {
     state.l1Fee = l1Fee
@@ -136,85 +62,27 @@ export const mutations = {
 }
 
 export const actions = {
-  async fetchGasPrice({ getters, commit, dispatch, rootGetters, state }) {
+  async fetchGasPrice({ getters, dispatch, commit, rootGetters }) {
+    const netId = rootGetters['metamask/netId']
     const { pollInterval } = rootGetters['metamask/networkConfig']
 
+    const isLegacy = netId === 137
+
     try {
-      if (getters.eipSupported) {
+      const txGasParams = await getters.oracle.getTxGasParams({ isLegacy })
-        const result = await dispatch('estimateFees')
+      commit('SAVE_GAS_PARAMS', txGasParams)
-        commit('SAVE_EIP_GAS_PRICES', result)
-      } else {
-        const gas = await dispatch('getGasPrice')
-        commit('SAVE_ORACLE_GAS_PRICES', gas)
-      }
-
       await dispatch('fetchL1Fee')
-
-      setTimeout(() => dispatch('fetchGasPrice'), 1000 * pollInterval)
     } catch (e) {
       console.error('fetchGasPrice', e)
+    } finally {
       setTimeout(() => dispatch('fetchGasPrice'), 1000 * pollInterval)
     }
   },
-  async estimateFees({ rootGetters }) {
-    try {
-      const { url } = rootGetters['settings/currentRpc']
-      const web3 = this.$provider.getWeb3(url)
-      const latestBlock = await web3.eth.getBlock('latest')
-
-      if (!latestBlock.baseFeePerGas) {
-        throw new Error('An error occurred while fetching current base fee, falling back')
-      }
-
-      const baseFee = toBN(latestBlock.baseFeePerGas)
-
-      const potentialMaxFee = baseFee.mul(toBN(1125)).div(toBN(1000))
-
-      const GWEI = (amount) => toBN(toWei(amount, 'gwei'))
-
-      const fastPriorityFee = GWEI('4')
-      const standardPriorityFee = GWEI('2.5')
-      const lowPriorityFee = GWEI('1')
-
-      return {
-        instant: {
-          baseFee,
-          maxFeePerGas: potentialMaxFee.add(fastPriorityFee),
-          maxPriorityFeePerGas: fastPriorityFee
-        },
-        fast: {
-          baseFee,
-          maxFeePerGas: potentialMaxFee.add(fastPriorityFee),
-          maxPriorityFeePerGas: fastPriorityFee
-        },
-        standard: {
-          baseFee,
-          maxFeePerGas: potentialMaxFee.add(standardPriorityFee),
-          maxPriorityFeePerGas: standardPriorityFee
-        },
-        low: {
-          baseFee,
-          maxFeePerGas: potentialMaxFee.add(lowPriorityFee),
-          maxPriorityFeePerGas: lowPriorityFee
-        }
-      }
-    } catch (err) {
-      throw new Error(err.message)
-    }
-  },
-  async getGasPrice({ state, getters }) {
-    try {
-      const gas = await getters.oracle.gasPrices(state.oracle)
-      return gas
-    } catch (err) {
-      throw new Error(err.message)
-    }
-  },
   setDefault({ commit, rootGetters }) {
     const { gasPrices } = rootGetters['metamask/networkConfig']
-    commit('SAVE_ORACLE_GAS_PRICES', gasPrices)
+    commit('SAVE_GAS_PARAMS', { gasPrice: gasPrices?.fast })
   },
-  async fetchL1Fee({ commit, getters, dispatch, rootGetters }) {
+  async fetchL1Fee({ commit, getters, rootGetters }) {
     const netId = rootGetters['metamask/netId']
     const isOptimismConnected = rootGetters['application/isOptimismConnected']
 
@@ -225,15 +93,13 @@ export const actions = {
         const gasLimit = rootGetters['application/withdrawGas']
         const tornadoProxyInstance = rootGetters['application/tornadoProxyContract']({ netId })
 
-        const gasPrice = getters.fastGasPrice
-
         const tx = serialize({
           type: 0,
           gasLimit,
-          gasPrice,
           chainId: netId,
           nonce: DUMMY_NONCE,
           data: DUMMY_WITHDRAW_DATA,
+          gasPrice: getters.gasPrice,
           to: tornadoProxyInstance._address
         })
 

store/metamask.js

@@ -155,11 +155,7 @@ const actions = {
   ) {
     try {
       const { ethAccount, netId } = state
-      const gasParams = rootGetters['gasPrices/getGasParams']('fast', eipDisable)
+      const gasParams = rootGetters['gasPrices/getGasParams']
-
-      if (params.gasPrice && 'gasPrice' in gasParams) {
-        gasParams.gasPrice = params.gasPrice.value
-      }
 
       const callParams = {
         method,

yarn.lock

@@ -7893,10 +7893,10 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-gas-price-oracle@^0.4.6:
+gas-price-oracle@^0.5.0:
-  version "0.4.6"
+  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/gas-price-oracle/-/gas-price-oracle-0.4.6.tgz#3e496092122896f1c80ea7eeeecea979d106b3aa"
+  resolved "https://registry.yarnpkg.com/gas-price-oracle/-/gas-price-oracle-0.5.0.tgz#b29f83c97bb4b091a08da7c10e2d1e5888bbade4"
-  integrity sha512-/z0wtzKa6FDTWmgikPnELWN8KiPHhCy3Z+waeKVMgvs5FBxibgwOUL1VlMsC4mVkXBoDadnBtFNOpUMgbt5pvg==
+  integrity sha512-um0cmd9qxGkDHirV1HcrjQ4vedVxK7u+uMeJIjo2yUMYe6T46ihbMnRncF5tfP9deU5hPHJ8FvVRZY1Y/CKkLQ==
   dependencies:
     axios "^0.21.2"
     bignumber.js "^9.0.0"