fix: Add estimateGas test (#135)

Co-authored-by: Jenea Vranceanu <[email protected]>

src/components/endpoints/Assets.vue

@@ -112,7 +112,6 @@ const create = async () => {
           deployedAsset.LSP8IdentifiableDigitalAsset
         )
         tokenAddress.value = deployedAsset.LSP8IdentifiableDigitalAsset.address
-
         addTokenToLocalStore(
           (tokenAddress.value =
             deployedAsset.LSP8IdentifiableDigitalAsset.address)

src/components/endpoints/SendTransaction.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
-import { toWei, numberToHex } from 'web3-utils'
+import { toWei, toNumber } from 'web3-utils'
 import { ref, watch, reactive, computed } from 'vue'
 import { TransactionConfig } from 'web3-core'
 
 import { getState, setState } from '@/stores'
 import Notifications from '@/components/Notification.vue'
 import useNotifications from '@/compositions/useNotifications'
-import { getSelectedNetworkConfig } from '@/helpers/config'
+import {
+  DEFAULT_GAS,
+  DEFAULT_GAS_PRICE,
+  DEFAULT_MAX_FEE_PER_GAS,
+  DEFAULT_MAX_PRIORITY_FEE_PER_GAS,
+  getSelectedNetworkConfig,
+} from '@/helpers/config'
 import ContractFunction from '@/components/shared/ContractFunction.vue'
 import { MethodSelect, MethodType } from '@/helpers/functionUtils'
 import { LSPType } from '@/helpers/tokenUtils'
@@ -15,7 +21,12 @@ import useWeb3Connection from '@/compositions/useWeb3Connection'
 const { sampleUP, errorContract } = getSelectedNetworkConfig()
 const { notification, clearNotification, hasNotification, setNotification } =
   useNotifications()
-const { sendTransaction, getBalance } = useWeb3Connection()
+const {
+  sendTransaction,
+  getBalance,
+  estimateGas,
+  defaultMaxPriorityFeePerGas,
+} = useWeb3Connection()
 
 const data = ref<string>('')
 const hasData = ref(false)
@@ -198,7 +209,7 @@ const methods: MethodSelect[] = [
     call: 'setData',
     hasSpecs: [
       LSPType.UP,
-      LSPType.LSP3UniversalProfileMetadata,
+      LSPType.LSP3ProfileMetadata,
       LSPType.LSP7DigitalAsset,
       LSPType.LSP8IdentifiableDigitalAsset,
       LSPType.LSP9Vault,
@@ -286,28 +297,58 @@ watch(
 function makeValue(param: MethodType) {
   const { value: _value, isWei } = param
   if (isWei) {
-    const value = typeof _value !== 'string' ? numberToHex(_value) : _value
+    const value =
+      typeof _value !== 'string' ? toNumber(_value).toString() : _value
     return toWei(value, isWei)
   }
   return _value
 }
 
+const estimate = async () => {
+  const from = makeValue(params.items[0])
+  let transaction = {
+    from,
+    to: makeValue(params.items[1]),
+    value: makeValue(params.items[2]),
+    maxPriorityFeePerGas: makeValue(params.items[3]),
+    maxFeePerGas: makeValue(params.items[4]),
+    gas: makeValue(params.items[5]),
+    gasPrice: makeValue(params.items[6]),
+  } as TransactionConfig
+  if (hasData.value) {
+    transaction = { ...transaction, data: data.value }
+  }
+
+  try {
+    isPending.value = true
+    const gas = await estimateGas(transaction)
+    setNotification(`Estimated gas ${gas}`)
+    params.items[5].value = gas
+    setState('balance', await getBalance(from))
+  } catch (error) {
+    setNotification((error as unknown as Error).message, 'danger')
+  } finally {
+    isPending.value = false
+  }
+}
+
 const send = async () => {
   clearNotification()
 
   const from = makeValue(params.items[0])
-  console.log('from', from, params.items)
   let transaction = {
     from,
     to: makeValue(params.items[1]),
     value: makeValue(params.items[2]),
+    maxPriorityFeePerGas: makeValue(params.items[3]),
+    maxFeePerGas: makeValue(params.items[4]),
+    gas: makeValue(params.items[5]),
+    gasPrice: makeValue(params.items[6]),
   } as TransactionConfig
   if (hasData.value) {
     transaction = { ...transaction, data: data.value }
   }
 
-  console.log(transaction)
-
   try {
     isPending.value = true
     await sendTransaction(transaction)
@@ -326,6 +367,25 @@ const params = reactive<{ items: MethodType[] }>({
     { type: 'address', name: 'from', value: getState('address') },
     { type: 'address', name: 'to' },
     { type: 'uint256', isWei: 'ether', name: 'amount', value: '0' },
+    {
+      type: 'uint256',
+      isWei: 'wei',
+      name: 'maxPriorityFeePerGas',
+      value: DEFAULT_MAX_PRIORITY_FEE_PER_GAS,
+    }, // 3
+    {
+      type: 'uint256',
+      isWei: 'wei',
+      name: 'maxFeePerGas',
+      value: DEFAULT_MAX_FEE_PER_GAS,
+    }, // 4
+    { type: 'uint256', isWei: 'wei', name: 'gas', value: DEFAULT_GAS }, // 5
+    {
+      type: 'uint256',
+      isWei: 'wei',
+      name: 'gasPrice',
+      value: DEFAULT_GAS_PRICE,
+    }, // 6
   ],
 })
 
@@ -358,6 +418,9 @@ const selectMethod = (e: Event) => {
   if (amount != undefined) {
     params.items[2].value = amount
   }
+  defaultMaxPriorityFeePerGas().then(value => {
+    params.items[3].value = value
+  })
 }
 
 const handleData = (e?: string) => {
@@ -447,6 +510,7 @@ const hasRemove = computed<boolean>(() => {
         testid-prefix="transaction-"
         :custom="true"
       />
+
       <div class="field">
         <label class="checkbox">
           <input v-model="hasData" data-testid="hasData" type="checkbox" />
@@ -465,6 +529,16 @@ const hasRemove = computed<boolean>(() => {
         @update:data="handleData"
       />
 
+      <div>
+        <label class="label">maxPriorityFeePerGas</label>
+        <input
+          v-model="params.items[3].value"
+          class="input"
+          type="number"
+          placeholder="0"
+          data-testid="maxPriorityFeePerGas"
+        />
+      </div>
       <div v-if="hasData" class="field">
         <label class="label">Data (optional)</label>
         <textarea
@@ -494,6 +568,15 @@ const hasRemove = computed<boolean>(() => {
         </button>
       </div>
       <div class="field">
+        <button
+          :class="`button is-primary is-rounded mt-4 ${
+            isPending ? 'is-loading' : ''
+          }`"
+          data-testid="estimate"
+          @click="estimate"
+        >
+          Estimate Gas
+        </button>
         <button
           :class="`button is-primary is-rounded mt-4 ${
             isPending ? 'is-loading' : ''

src/components/endpoints/__tests__/SendTransaction.spec.ts

@@ -1,6 +1,12 @@
 import SendTransaction from '../SendTransaction.vue'
 import { render, fireEvent, screen, waitFor } from '@testing-library/vue'
 import { setState } from '@/stores'
+import {
+  DEFAULT_GAS,
+  DEFAULT_GAS_PRICE,
+  DEFAULT_MAX_FEE_PER_GAS,
+  DEFAULT_MAX_PRIORITY_FEE_PER_GAS,
+} from '@/helpers/config'
 
 const mockGetBalance = jest.fn()
 const mockSendTransaction = jest.fn()
@@ -61,6 +67,10 @@ test('can send lyx transaction', async () => {
     from: '0x517216362D594516c6f96Ee34b2c502d65B847E4',
     to: '0x7367C96553Ed4C44E6962A38d8a0b5f4BE9F6298',
     value: '2000000000000000000',
+    gas: DEFAULT_GAS,
+    gasPrice: DEFAULT_GAS_PRICE,
+    maxFeePerGas: DEFAULT_MAX_FEE_PER_GAS,
+    maxPriorityFeePerGas: DEFAULT_MAX_PRIORITY_FEE_PER_GAS,
   })
 })
 
@@ -93,5 +103,9 @@ test('can send lyx transaction with data', async () => {
     from: '0x517216362D594516c6f96Ee34b2c502d65B847E4',
     to: '0x7367C96553Ed4C44E6962A38d8a0b5f4BE9F6298',
     value: '2000000000000000000',
+    gas: DEFAULT_GAS,
+    gasPrice: DEFAULT_GAS_PRICE,
+    maxFeePerGas: DEFAULT_MAX_FEE_PER_GAS,
+    maxPriorityFeePerGas: DEFAULT_MAX_PRIORITY_FEE_PER_GAS,
   })
 })

src/compositions/useWeb3Connection.ts

@@ -7,7 +7,7 @@ import {
 import useWalletConnectV2 from './useWalletConnectV2'
 import useWeb3Onboard from './useWeb3Onboard'
 import { ref } from 'vue'
-import { TransactionConfig } from 'web3-core'
+import { TransactionConfig, TransactionReceipt } from 'web3-core'
 import { resetNetworkConfig, setNetworkConfig } from '@/helpers/config'
 import { getState, useState } from '@/stores'
 import EthereumProvider from '@walletconnect/ethereum-provider/dist/types/EthereumProvider'
@@ -119,7 +119,13 @@ const getBalance = async (address: string) => {
   return web3.utils.fromWei(wei)
 }
 
-const sendTransaction = async (transaction: TransactionConfig) => {
+const estimateGas = async (transaction: TransactionConfig) => {
+  return Number(await web3.eth.estimateGas(transaction))
+}
+
+const sendTransaction = async (
+  transaction: TransactionConfig
+): Promise<TransactionReceipt> => {
   return await web3.eth
     .sendTransaction(transaction)
     .on('receipt', function (receipt: any) {
@@ -143,6 +149,16 @@ const accounts = async () => {
   return account
 }
 
+const getBaseFee = async (): Promise<number> => {
+  return await web3.eth
+    .getBlock('pending')
+    .then(block => Number(block.baseFeePerGas))
+}
+
+const defaultMaxPriorityFeePerGas = async (): Promise<number> => {
+  return 2_500_000_000
+}
+
 const requestAccounts = async (): Promise<string[]> => {
   const accountsRequest: string[] = await web3.eth.requestAccounts()
   return accountsRequest
@@ -170,8 +186,11 @@ export default function useWeb3Connection() {
     contract,
     getBalance,
     sendTransaction,
+    defaultMaxPriorityFeePerGas,
     accounts,
     requestAccounts,
+    estimateGas,
+    getBaseFee,
     sign,
     recover,
     isAddress,

src/helpers/config.ts

@@ -15,6 +15,11 @@ export const WALLET_CONNECT = 'wallet-connect-v2'
 export const WINDOW_LUKSO = 'window-lukso'
 export const WEB3_ONBOARD = 'web3Onboard'
 
+export const DEFAULT_GAS = '50000000000000000'
+export const DEFAULT_GAS_PRICE = '10000000000'
+export const DEFAULT_MAX_PRIORITY_FEE_PER_GAS = '1'
+export const DEFAULT_MAX_FEE_PER_GAS = '1'
+
 export const MAGICVALUE = '0x1626ba7e'
 
 const DEFAULT_NETWORK: NetworkType = 'testnet'

src/helpers/tokenUtils.ts

@@ -33,7 +33,7 @@ const getSupportedStandardObject = (schemas: ERC725JSONSchema[]) => {
 }
 
 export enum LSPType {
-  LSP3UniversalProfileMetadata = 'LSP3UniversalProfileMetadata',
+  LSP3ProfileMetadata = 'LSP3ProfileMetadata',
   LSP7DigitalAsset = 'LSP7DigitalAsset',
   LSP8IdentifiableDigitalAsset = 'LSP8IdentifiableDigitalAsset',
   LSP9Vault = 'LSP9Vault',
@@ -57,7 +57,7 @@ export const lspTypeOptions: Record<
   Exclude<LSPType, LSPType.Unknown>,
   LspTypeOption
 > = {
-  [LSPType.LSP3UniversalProfileMetadata]: {
+  [LSPType.LSP3ProfileMetadata]: {
     interfaceId: INTERFACE_IDS.LSP0ERC725Account,
     lsp2Schema: getSupportedStandardObject(
       LSP3ProfileMetadata as ERC725JSONSchema[]
@@ -203,7 +203,7 @@ export const detectLSP = async (
       case LSPType.LSP8IdentifiableDigitalAsset:
         shortType = 'LSP8'
         break
-      case LSPType.LSP3UniversalProfileMetadata:
+      case LSPType.LSP3ProfileMetadata:
         shortType = 'LSP3'
         break
       case LSPType.LSP9Vault: