fix: Repair send transaction fields and add call and decoder

biome.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "suspicious": {
+        "noExplicitAny": "off"
+      },
+      "performance": {
+        "noDelete": "off"
+      },
+      "style": {
+        "useImportType": "off"
+      }
+    }
+  }
+}

jest.config.cjs

@@ -12,7 +12,7 @@ module.exports = {
   moduleNameMapper: {
     '@/(.*)$': '<rootDir>/src/$1',
   },
-  modulePaths: ['<rootDir>'],
+  // modulePaths: ['<rootDir>'],
   verbose: true,
   testEnvironmentOptions: {
     customExportConditions: ['node', 'node-addons'],

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite --mode development",
     "build": "vue-tsc --noEmit && vite build",
-    "build:cloudflare": "yarn lint:js && yarn lint:css && yarn lint:format && yarn lint:types && yarn test:unit && yarn build",
+    "build:cloudflare": "yarn lint:js && yarn lint:css && yarn lint:format && yarn lint:types && yarn test && yarn build",
     "preview": "vite preview",
     "test": "jest",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:*!(fix)'",
@@ -23,14 +23,14 @@
     "@lukso/lsp-smart-contracts": "0.14.0",
     "@lukso/web3-onboard-config": "1.1.2",
     "@pinata/sdk": "^2.1.0",
-    "@tsndr/cloudflare-worker-jwt": "^2.3.2",
+    "@tsndr/cloudflare-worker-jwt": "^2.5.3",
     "@types/isomorphic-fetch": "^0.0.39",
     "@walletconnect/ethereum-provider": "2.10.1",
     "@walletconnect/sign-client": "2.10.1",
     "@walletconnect/types": "2.10.1",
     "@walletconnect/utils": "2.10.1",
-    "@web3-onboard/core": "^2.21.0",
-    "@web3-onboard/injected-wallets": "^2.10.5",
+    "@web3-onboard/core": "^2.21.3",
+    "@web3-onboard/injected-wallets": "^2.10.13",
     "@web3modal/ethereum": "2.7.1",
     "@web3modal/standalone": "2.4.3",
     "bulma": "0.9.4",
@@ -40,11 +40,12 @@
     "https-browserify": "1.0.0",
     "isomorphic-fetch": "^3.0.0",
     "siwe": "1.1.6",
-    "vue": "^3.3.4",
+    "tslib": "^2.6.2",
+    "vue": "^3.4.21",
     "vue-router": "4.2.4",
     "wagmi": "^1.3.9",
-    "web3": "1.10.2",
-    "web3-eth-contract": "1.10.2"
+    "web3": "1.10.4",
+    "web3-eth-contract": "1.10.4"
   },
   "devDependencies": {
     "@depay/web3-mock": "^14.17.0",
@@ -54,8 +55,8 @@
     "@types/jest": "28.1.8",
     "@typescript-eslint/eslint-plugin": "6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vue/compiler-sfc": "3.3.4",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "3.4.21",
     "@vue/vue3-jest": "28.1.0",
     "eslint": "8.49.0",
     "eslint-config-prettier": "9.0.0",
@@ -76,11 +77,11 @@
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard-scss": "10.0.0",
     "ts-jest": "28.0.8",
-    "typescript": "^5.2.2",
+    "typescript": "^5.4.3",
     "util": "0.12.5",
     "vite": "^4.4.9",
     "vue-loader": "17.2.2",
-    "vue-tsc": "^1.8.10"
+    "vue-tsc": "^2.0.7"
   },
   "lint-staged": {
     "*.{ts,js,vue}": [

src/components/endpoints/SendTransaction.vue

@@ -26,11 +26,16 @@ const {
   getBalance,
   estimateGas,
   defaultMaxPriorityFeePerGas,
+  executeCall,
 } = useWeb3Connection()
 
 const data = ref<string>('')
 const hasData = ref(false)
 const isPending = ref(false)
+const callResults = ref<string | null>(null)
+const resultFormat = reactive<{ item: MethodSelect }>({
+  item: { label: 'results' },
+})
 
 const methods: MethodSelect[] = [
   {
@@ -319,20 +324,22 @@ const estimate = async () => {
     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
-  }
+  isPending.value = true
+  Promise.all([estimateGas(transaction), getBalance(from)])
+    .then(([gas, balance]) => {
+      setNotification(`Estimated gas ${gas}`)
+      params.items[5].value = gas
+      setState('balance', balance)
+    })
+    .catch(error => {
+      setNotification((error as unknown as Error).message, 'danger')
+    })
+    .finally(() => {
+      isPending.value = false
+    })
 }
 
-const send = async () => {
+const send = () => {
   clearNotification()
 
   const from = makeValue(params.items[0])
@@ -348,19 +355,52 @@ const send = async () => {
   if (hasData.value) {
     transaction = { ...transaction, data: data.value }
   }
+  isPending.value = true
+  callResults.value = null
+  Promise.all([sendTransaction(transaction), getBalance(from)])
+    .then(([, balance]) => {
+      setNotification('The transaction was successful')
+      setState('balance', balance)
+    })
+    .catch(error => {
+      setNotification((error as unknown as Error).message, 'danger')
+    })
+    .finally(() => {
+      isPending.value = false
+    })
+}
 
-  try {
-    isPending.value = true
-    await sendTransaction(transaction)
-    setNotification('The transaction was successful')
-    setState('balance', await getBalance(from))
-  } catch (error) {
-    setNotification((error as unknown as Error).message, 'danger')
-  } finally {
-    isPending.value = false
+const rawCall = () => {
+  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]),
+  } as TransactionConfig
+  if (hasData.value) {
+    transaction = { ...transaction, data: data.value }
   }
-}
 
+  console.log(transaction)
+
+  isPending.value = true
+  callResults.value = null
+  Promise.all([executeCall(transaction), getBalance(from)])
+    .then(([result, balance]) => {
+      callResults.value = result
+      setNotification('Call executed successfully.')
+      setState('balance', balance)
+    })
+    .catch(error => {
+      setNotification((error as unknown as Error).message, 'danger')
+    })
+    .finally(() => {
+      isPending.value = false
+    })
+}
 const method = reactive<{ item: MethodSelect }>({ item: methods[0] })
 const params = reactive<{ items: MethodType[] }>({
   items: [
@@ -390,14 +430,14 @@ const params = reactive<{ items: MethodType[] }>({
 })
 
 const selectMethod = (e: Event) => {
-  const value = parseInt((e.target as HTMLInputElement).value, 10)
+  const value = Number.parseInt((e.target as HTMLInputElement).value, 10)
   const { to, amount, ...item } =
     value >= methods.length
       ? items.items[value - methods.length]
       : methods[value]
-  Object.entries(item).forEach(([key, val]) => {
+  for (const [key, val] of Object.entries(item)) {
     ;(method.item as any)[key] = val
-  })
+  }
   params.items = params.items.map((param, index) => {
     if (index === 1) {
       if (
@@ -412,10 +452,10 @@ const selectMethod = (e: Event) => {
   })
   method.item.call = item.call
   hasData.value = item.call != null
-  if (to != undefined) {
+  if (to != null) {
     params.items[1].value = to
   }
-  if (amount != undefined) {
+  if (amount != null) {
     params.items[2].value = amount
   }
   defaultMaxPriorityFeePerGas().then(value => {
@@ -424,6 +464,7 @@ const selectMethod = (e: Event) => {
 }
 
 const handleData = (e?: string) => {
+  console.log(e)
   if (data.value !== e || '') {
     data.value = e || ''
   }
@@ -477,7 +518,7 @@ const hasRemove = computed<boolean>(() => {
 
 <template>
   <div class="tile is-4 is-parent">
-    <div class="tile is-child box">
+    <div class="tile is-child box" style="width: 100%">
       <p class="is-size-5 has-text-weight-bold mb-4">Transaction</p>
       <div class="field">
         <div class="select is-fullwidth mb-2">
@@ -529,16 +570,6 @@ 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
@@ -586,6 +617,15 @@ const hasRemove = computed<boolean>(() => {
         >
           Send Transaction
         </button>
+        <button
+          :class="`button is-primary is-rounded mt-4 ${
+            isPending ? 'is-loading' : ''
+          }`"
+          data-testid="rawCall"
+          @click="rawCall"
+        >
+          Call
+        </button>
       </div>
 
       <div class="field">
@@ -595,6 +635,18 @@ const hasRemove = computed<boolean>(() => {
         >.
       </div>
 
+      <div v-if="callResults">
+        <label class="label">Call result</label>
+        <ContractFunction
+          v-model="resultFormat.item.inputs"
+          custom
+          :data="callResults"
+          :data-decoder="true"
+          :hide-data="true"
+        />
+        <div class="box" style="overflow-wrap: anywhere">{{ callResults }}</div>
+      </div>
+
       <div class="field">
         <Notifications
           v-if="hasNotification"

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

@@ -28,7 +28,7 @@ jest.mock('@/compositions/useWeb3Connection', () => ({
   }),
 }))
 
-jest.mock('src/helpers/env', () => ({
+jest.mock('@/helpers/env', () => ({
   PUBLIC_API_SHARED_SECRET: '123',
 }))
 

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

@@ -12,11 +12,23 @@ const mockGetBalance = jest.fn()
 const mockSendTransaction = jest.fn()
 const mockEncodeFunctionSignature = jest.fn()
 const mockEncodeParameters = jest.fn()
+const mockDecodeParameters = jest.fn()
 
 jest.mock('@/compositions/useWeb3Onboard', () => ({
   __esModule: true,
   default: () => ({}),
 }))
+jest.mock('@/helpers/functionUtils', () => {
+  return {
+    __esModule: true,
+    decodeData: () => {
+      return {
+        call: 'minter',
+        inputs: [],
+      }
+    },
+  }
+})
 jest.mock('@/compositions/useWeb3Connection', () => {
   const output = {
     __esModule: true,
@@ -27,12 +39,7 @@ jest.mock('@/compositions/useWeb3Connection', () => {
             abi: {
               encodeFunctionSignature: () => mockEncodeFunctionSignature(),
               encodeParameters: () => mockEncodeParameters(),
-              decodeData: () => {
-                return {
-                  call: 'minter',
-                  inputs: [],
-                }
-              },
+              decodeParameters: () => mockDecodeParameters(),
             },
           },
         }),
@@ -60,9 +67,11 @@ test('can send lyx transaction', async () => {
   )
   await fireEvent.click(screen.getByTestId('send'))
 
-  expect(screen.getByTestId('notification')).toHaveTextContent(
-    'The transaction was successful'
-  )
+  await waitFor(() => {
+    expect(screen.getByTestId('notification')).toHaveTextContent(
+      'The transaction was successful'
+    )
+  })
   expect(mockSendTransaction).toBeCalledWith({
     from: '0x517216362D594516c6f96Ee34b2c502d65B847E4',
     to: '0x7367C96553Ed4C44E6962A38d8a0b5f4BE9F6298',
@@ -95,9 +104,11 @@ test('can send lyx transaction with data', async () => {
   )
   await fireEvent.click(screen.getByTestId('send'))
 
-  expect(screen.getByTestId('notification')).toHaveTextContent(
-    'The transaction was successful'
-  )
+  await waitFor(() => {
+    expect(screen.getByTestId('notification')).toHaveTextContent(
+      'The transaction was successful'
+    )
+  })
   expect(mockSendTransaction).toBeCalledWith({
     data: '0x8fe36f1b00000000000000000000000000000000000000000000000000000000000000c040b8bec57d7b5ff0dbd9e9acd0a47dfeb0101e1a203766f5ccab00445fbf39e900000000000000000000000000000000000000000000000000000000000001200000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000018000000000000000000000000000000000000000000000000000000000000001c0000000000000000000000000000000000000000000000000000000000000000200000000000000000000000069909c12c875271adc49155cc8d01dbf67fe82f1000000000000000000000000b27f5845e6ce846c02209bd2497780099611b9a00000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000008bd02b7b000000000000000000000000000000000000000000000000000000000001e19c000000000000000000000000000000000000000000000000000000000000000648656c6c6f210000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000014e4c6f72656d20697073756d20646f6c6f722073697420616d65742c20636f6e73656374657475722061646970697363696e6720656c69742c2073656420646f20656975736d6f642074656d706f7220696e6369646964756e74207574206c61626f726520657420646f6c6f7265206d61676e6120616c697175612e20557420656e696d206164206d696e696d2076656e69616d2c2071756973206e6f737472756420657865726369746174696f6e20756c6c616d636f206c61626f726973206e69736920757420616c697175697020657820656120636f6d6d6f646f20636f6e7365717561742e2044756973206175746520697275726520646f6c6f7220696e20726570726568656e646572697420696e20766f6c7570746174652076656c697420657373652063696c6c756d20646f6c6f726520657520667567696174206e756c6c612070617269617475722e000000000000000000000000000000000000',
     from: '0x517216362D594516c6f96Ee34b2c502d65B847E4',