fix: mint amount calculation

src/components/endpoints/Mint.vue

@@ -6,7 +6,7 @@ import useNotifications from '@/compositions/useNotifications'
 import LSP7Mintable from '@lukso/lsp7-contracts/artifacts/LSP7Mintable.json'
 import LSP8Mintable from '@lukso/lsp8-contracts/artifacts/LSP8Mintable.json'
 import Notifications from '@/components/Notification.vue'
-import { toWei } from 'web3-utils'
+import { BN } from 'bn.js'
 import { ERC725, ERC725JSONSchema } from '@erc725/erc725.js'
 import { Lsp4Metadata } from '@/types'
 import Lsp4MetadataForm from '@/components/shared/Lsp4MetadataForm.vue'
@@ -36,7 +36,7 @@ const { contract } = useWeb3Connection()
 
 const tokenType = ref<ContractStandard>(ContractStandard.LSP7)
 const myToken = ref<Contract>()
-const mintToken = ref<string>()
+const mintTokenAddress = ref<string>()
 const tokenId = ref<string>()
 const mintReceiver = ref<string>()
 const mintAmount = ref(100)
@@ -55,14 +55,14 @@ const tokenIdTypeError = ref<string>()
 
 onMounted(() => {
   mintReceiver.value = getState('address')
-  mintToken.value = getState('tokenAddress')
+  mintTokenAddress.value = getState('tokenAddress')
 })
 
 watchEffect(async () => {
-  if (mintToken.value && tokenType.value === ContractStandard.LSP8) {
+  if (mintTokenAddress.value && tokenType.value === ContractStandard.LSP8) {
     const { getInstance } = useErc725()
     const erc725 = getInstance(
-      mintToken.value,
+      mintTokenAddress.value,
       LSP8IdentifiableDigitalAsset as ERC725JSONSchema[]
     )
     const lsp8DigitalAsset = await erc725.fetchData('LSP8TokenIdType')
@@ -84,7 +84,7 @@ const handleTokenSelected = (info: TokenInfo) => {
       ? ContractStandard.LSP7
       : ContractStandard.LSP8
   if (info.address) {
-    mintToken.value = info.address
+    mintTokenAddress.value = info.address
   }
 }
 
@@ -139,18 +139,19 @@ const mint = async () => {
   try {
     switch (tokenType.value) {
       case ContractStandard.LSP7:
-        myToken.value = contract(LSP7Mintable.abi as any, mintToken.value)
-
-        const isNonDivisible =
-          (await myToken.value.methods.decimals().call()) === '0'
+        myToken.value = contract(
+          LSP7Mintable.abi as any,
+          mintTokenAddress.value
+        )
 
-        // if token is divisible (decimals = 18) we need to convert to wei
-        const amount = isNonDivisible
-          ? mintAmount.value.toString()
-          : toWei(mintAmount.value.toString())
+        const decimals = await myToken.value.methods.decimals().call()
+        const amount =
+          decimals === 0
+            ? mintAmount.value.toString()
+            : new BN(mintAmount.value).mul(new BN(10).pow(new BN(decimals)))
 
         await myToken.value.methods
-          .mint(mintReceiver.value, amount, false, '0x')
+          .mint(mintReceiver.value, amount.toString(), false, '0x')
           .send({ from: erc725AccountAddress })
           .on('receipt', function (receipt: any) {
             console.log(receipt)
@@ -169,7 +170,10 @@ const mint = async () => {
         const metadataJsonUrl = encodeAssetMetadata(assetMetadata)
 
         // mint asset
-        myToken.value = contract(LSP8Mintable.abi as any, mintToken.value)
+        myToken.value = contract(
+          LSP8Mintable.abi as any,
+          mintTokenAddress.value
+        )
         const tokenIdPadded = padTokenId(tokenIdType.value, tokenId.value)
         await myToken.value.methods
           .mint(mintReceiver.value, tokenIdPadded, false, '0x')
@@ -215,7 +219,7 @@ const mint = async () => {
       <div class="field">
         <label class="label">Token address</label>
         <LSPSelect
-          :address="mintToken"
+          :address="mintTokenAddress"
           :show-types="[
             LSPType.LSP7DigitalAsset,
             LSPType.LSP8IdentifiableDigitalAsset,
@@ -224,7 +228,7 @@ const mint = async () => {
         />
         <div class="control">
           <input
-            v-model="mintToken"
+            v-model="mintTokenAddress"
             class="input is-family-code"
             type="text"
             data-testid="transfer-address"

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

@@ -21,7 +21,7 @@ jest.mock('@/compositions/useWeb3Connection', () => ({
           }),
         }),
         decimals: () => ({
-          call: () => jest.fn(),
+          call: () => 42,
         }),
       },
     }),

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

@@ -10,6 +10,7 @@ import {
 
 const mockGetBalance = jest.fn()
 const mockSendTransaction = jest.fn()
+const mockEstimateTransaction = jest.fn()
 const mockEncodeFunctionSignature = jest.fn()
 const mockEncodeParameters = jest.fn()
 const mockDecodeParameters = jest.fn()
@@ -45,6 +46,7 @@ jest.mock('@/compositions/useWeb3Connection', () => {
         }),
         getBalance: () => mockGetBalance(),
         sendTransaction: (params: any) => mockSendTransaction(params),
+        estimateGas: (params: any) => mockEstimateTransaction(params),
       }
     },
   }
@@ -109,6 +111,7 @@ test('can send lyx transaction with data', async () => {
       'The transaction was successful'
     )
   })
+
   expect(mockSendTransaction).toBeCalledWith({
     data: '0x8fe36f1b00000000000000000000000000000000000000000000000000000000000000c040b8bec57d7b5ff0dbd9e9acd0a47dfeb0101e1a203766f5ccab00445fbf39e900000000000000000000000000000000000000000000000000000000000001200000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000018000000000000000000000000000000000000000000000000000000000000001c0000000000000000000000000000000000000000000000000000000000000000200000000000000000000000069909c12c875271adc49155cc8d01dbf67fe82f1000000000000000000000000b27f5845e6ce846c02209bd2497780099611b9a00000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000008bd02b7b000000000000000000000000000000000000000000000000000000000001e19c000000000000000000000000000000000000000000000000000000000000000648656c6c6f210000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000014e4c6f72656d20697073756d20646f6c6f722073697420616d65742c20636f6e73656374657475722061646970697363696e6720656c69742c2073656420646f20656975736d6f642074656d706f7220696e6369646964756e74207574206c61626f726520657420646f6c6f7265206d61676e6120616c697175612e20557420656e696d206164206d696e696d2076656e69616d2c2071756973206e6f737472756420657865726369746174696f6e20756c6c616d636f206c61626f726973206e69736920757420616c697175697020657820656120636f6d6d6f646f20636f6e7365717561742e2044756973206175746520697275726520646f6c6f7220696e20726570726568656e646572697420696e20766f6c7570746174652076656c697420657373652063696c6c756d20646f6c6f726520657520667567696174206e756c6c612070617269617475722e000000000000000000000000000000000000',
     from: '0x517216362D594516c6f96Ee34b2c502d65B847E4',
@@ -120,3 +123,35 @@ test('can send lyx transaction with data', async () => {
     maxPriorityFeePerGas: DEFAULT_MAX_PRIORITY_FEE_PER_GAS,
   })
 })
+
+test('can estimate send lyx transaction', async () => {
+  const estimateMockValue = 500_143
+  mockEstimateTransaction.mockReturnValue(estimateMockValue)
+
+  setState('address', '0x517216362D594516c6f96Ee34b2c502d65B847E4')
+
+  render(SendTransaction)
+
+  await fireEvent.update(screen.getByTestId('transaction-amount'), '2')
+  await fireEvent.update(
+    screen.getByTestId('transaction-to'),
+    '0x7367C96553Ed4C44E6962A38d8a0b5f4BE9F6298'
+  )
+  await fireEvent.click(screen.getByTestId('estimate'))
+
+  await waitFor(() => {
+    expect(screen.getByTestId('notification')).toHaveTextContent(
+      `Estimated gas ${estimateMockValue}`
+    )
+  })
+
+  expect(mockEstimateTransaction).toBeCalledWith({
+    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,
+  })
+})