feat: select gas speed during dapp initiated transaction

bloomwalletio · May 14, 2024 · eba7da4 · eba7da4
1 parent 694b00f
commit eba7da4
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 60 deletions.
diff --git a/packages/desktop/components/popup/popups/EvmTransactionFromDappPopup.svelte b/packages/desktop/components/popup/popups/EvmTransactionFromDappPopup.svelte
@@ -1,38 +1,34 @@
 <script lang="ts">
-    import { localize } from '@core/i18n'
-    import { handleError } from '@core/error/handlers'
+    import { DappVerification, RpcMethod } from '@auxiliary/wallet-connect/enums'
     import { IConnectedDapp } from '@auxiliary/wallet-connect/interface'
     import { CallbackParameters } from '@auxiliary/wallet-connect/types'
-    import { sendAndPersistTransactionFromEvm, signEvmTransaction } from '@core/wallet/actions'
+    import { Alert, Link, Table, Text } from '@bloomwalletio/ui'
+    import { IAccountState } from '@core/account'
     import { getSelectedAccount, selectedAccount } from '@core/account/stores'
-    import { ExplorerEndpoint, IEvmNetwork, getExplorerUrl } from '@core/network'
-    import { DappInfo, TransactionAssetSection } from '@ui'
-    import PopupTemplate from '../PopupTemplate.svelte'
+    import { StardustActivityType } from '@core/activity'
+    import { openUrlInBrowser } from '@core/app'
+    import { handleError } from '@core/error/handlers'
+    import { localize } from '@core/i18n'
+    import { GasSpeed, IGasPricesBySpeed, getHexEncodedTransaction, getMethodForEvmTransaction } from '@core/layer-2'
     import { EvmTransactionData } from '@core/layer-2/types'
-    import { EvmTransactionDetails } from '@views/dashboard/send-flow/views/components'
-    import {
-        calculateEstimatedGasFeeFromTransactionData,
-        calculateMaxGasFeeFromTransactionData,
-        getHexEncodedTransaction,
-        getMethodForEvmTransaction,
-    } from '@core/layer-2'
-    import { getTokenFromSelectedAccountTokens } from '@core/token/stores'
     import { getTransferInfoFromTransactionData } from '@core/layer-2/utils/getTransferInfoFromTransactionData'
-    import { TokenTransferData } from '@core/wallet'
+    import { LedgerAppName } from '@core/ledger'
+    import { ExplorerEndpoint, IEvmNetwork, getExplorerUrl } from '@core/network'
     import { Nft } from '@core/nfts'
-    import { Alert, Link, Table, Text } from '@bloomwalletio/ui'
-    import { PopupId, closePopup, modifyPopupState, openPopup } from '@desktop/auxiliary/popup'
-    import { truncateString } from '@core/utils'
-    import { openUrlInBrowser } from '@core/app'
-    import { StardustActivityType } from '@core/activity'
-    import { BASE_TOKEN_ID } from '@core/token/constants'
+    import { getNftByIdForAccount } from '@core/nfts/stores'
     import { checkActiveProfileAuth } from '@core/profile/actions'
-    import { LedgerAppName } from '@core/ledger'
-    import { DappVerification, RpcMethod } from '@auxiliary/wallet-connect/enums'
-    import { LegacyTransaction } from '@ethereumjs/tx'
     import { getActiveProfileId } from '@core/profile/stores'
-    import { IAccountState } from '@core/account'
-    import { getNftByIdForAccount } from '@core/nfts/stores'
+    import { BASE_TOKEN_ID } from '@core/token/constants'
+    import { getTokenFromSelectedAccountTokens } from '@core/token/stores'
+    import { Converter, MILLISECONDS_PER_SECOND, truncateString } from '@core/utils'
+    import { TokenTransferData } from '@core/wallet'
+    import { sendAndPersistTransactionFromEvm, signEvmTransaction } from '@core/wallet/actions'
+    import { PopupId, closePopup, modifyPopupState, openPopup } from '@desktop/auxiliary/popup'
+    import { LegacyTransaction } from '@ethereumjs/tx'
+    import { DappInfo, TransactionAssetSection } from '@ui'
+    import { EvmTransactionDetails } from '@views/dashboard/send-flow/views/components'
+    import { onDestroy, onMount } from 'svelte'
+    import PopupTemplate from '../PopupTemplate.svelte'
 
     export let preparedTransaction: EvmTransactionData
     export let evmNetwork: IEvmNetwork
@@ -56,6 +52,18 @@
     let parameters: Record<string, string> | undefined = undefined
     let busy = false
 
+    let selectedGasSpeed: GasSpeed = GasSpeed.Required
+    let gasPrices: IGasPricesBySpeed = {
+        [GasSpeed.Required]: Converter.bigIntLikeToBigInt(preparedTransaction?.gasPrice as number),
+    }
+    async function setGasPrices(): Promise<void> {
+        const _gasPrices = await evmNetwork?.getGasPrices()
+        if (_gasPrices) {
+            gasPrices = { ...gasPrices, ..._gasPrices }
+        }
+    }
+    $: preparedTransaction.gasPrice = gasPrices[selectedGasSpeed]
+
     setTokenTransfer()
     function setTokenTransfer(): void {
         const transferInfo = getTransferInfoFromTransactionData(preparedTransaction, evmNetwork)
@@ -169,6 +177,16 @@
         const url = getExplorerUrl(evmNetwork.id, ExplorerEndpoint.Address, contractAddress)
         openUrlInBrowser(url)
     }
+
+    let intervalId: NodeJS.Timeout
+    onMount(async () => {
+        await setGasPrices()
+        intervalId = setInterval(() => void setGasPrices, MILLISECONDS_PER_SECOND * 10)
+    })
+
+    onDestroy(() => {
+        clearInterval(intervalId)
+    })
 </script>
 
 <PopupTemplate
@@ -226,10 +244,11 @@
             <TransactionAssetSection {baseCoinTransfer} {tokenTransfer} {nft} />
         {/if}
         <EvmTransactionDetails
+            bind:selectedGasSpeed
             sourceNetwork={evmNetwork}
             destinationNetworkId={evmNetwork.id}
-            estimatedGasFee={calculateEstimatedGasFeeFromTransactionData(preparedTransaction)}
-            maxGasFee={calculateMaxGasFeeFromTransactionData(preparedTransaction)}
+            transaction={preparedTransaction}
+            {gasPrices}
         />
     </div>
 </PopupTemplate>
diff --git a/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte b/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte
@@ -1,21 +1,19 @@
 <script lang="ts">
-    import SetTransactionFeeMenu from './SetTransactionFeeMenu.svelte'
     import { Table, TableRow } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
-    import { IEvmNetwork, NetworkId, calculateGasFee } from '@core/network'
-    import { formatTokenAmount } from '@core/token'
-    import { NetworkLabel } from '@ui'
     import { EvmTransactionData, GasSpeed, IGasPricesBySpeed } from '@core/layer-2'
+    import { IEvmNetwork, NetworkId } from '@core/network'
+    import { NetworkLabel } from '@ui'
+    import SetTransactionFeeMenu from './SetTransactionFeeMenu.svelte'
 
     export let selectedGasSpeed: GasSpeed = GasSpeed.Required
     export let sourceNetwork: IEvmNetwork
     export let destinationNetworkId: NetworkId | undefined = undefined
     export let transaction: EvmTransactionData
     export let gasPrices: IGasPricesBySpeed
-    export let storageDeposit: bigint
+    export let storageDeposit: bigint = BigInt(0)
 
     const { gasLimit, estimatedGas } = transaction
-    $: maxGasFee = calculateGasFee(gasLimit, gasPrices[selectedGasSpeed]) + storageDeposit
 </script>
 
 <Table
@@ -31,19 +29,39 @@
         },
     ]}
 >
-    <TableRow
-        item={{
-            key: localize('general.estimatedFee'),
-        }}
-    >
-        <div slot="boundValue">
-            <SetTransactionFeeMenu bind:selectedGasSpeed {sourceNetwork} {gasPrices} {estimatedGas} {storageDeposit} />
-        </div>
-    </TableRow>
-    <TableRow
-        item={{
-            key: localize('general.maxFees'),
-            value: maxGasFee ? formatTokenAmount(maxGasFee, sourceNetwork.baseToken) : undefined,
-        }}
-    />
+    {#if estimatedGas}
+        <TableRow
+            item={{
+                key: localize('general.estimatedFee'),
+            }}
+        >
+            <div slot="boundValue">
+                <SetTransactionFeeMenu
+                    bind:selectedGasSpeed
+                    {sourceNetwork}
+                    {gasPrices}
+                    gasUnit={estimatedGas}
+                    {storageDeposit}
+                />
+            </div>
+        </TableRow>
+    {/if}
+    {#if gasLimit}
+        <TableRow
+            item={{
+                key: localize('general.maxFees'),
+            }}
+        >
+            <div slot="boundValue">
+                <SetTransactionFeeMenu
+                    bind:selectedGasSpeed
+                    {sourceNetwork}
+                    {gasPrices}
+                    gasUnit={gasLimit}
+                    {storageDeposit}
+                    disabled={!!estimatedGas}
+                />
+            </div>
+        </TableRow>
+    {/if}
 </Table>
diff --git a/packages/desktop/views/dashboard/send-flow/views/components/SetTransactionFeeMenu.svelte b/packages/desktop/views/dashboard/send-flow/views/components/SetTransactionFeeMenu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { BigIntLike } from '@ethereumjs/util'
     import { IEvmNetwork, calculateGasFee } from '@core/network'
     import { IconName, Menu, Text, type IMenuItem } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
@@ -9,8 +10,9 @@
     export let selectedGasSpeed: GasSpeed = GasSpeed.Required
     export let sourceNetwork: IEvmNetwork
     export let gasPrices: IGasPricesBySpeed
-    export let estimatedGas: number | undefined
+    export let gasUnit: BigIntLike | undefined
     export let storageDeposit: bigint
+    export let disabled: boolean = false
 
     let menu: Menu | undefined
     let anchor: HTMLElement | undefined = undefined
@@ -26,7 +28,7 @@
                 icon: IconName.ClockPlus,
                 title: localize('general.required'),
                 subtitle: formatTokenAmount(
-                    calculateGasFee(estimatedGas, gasPrices.average) + storageDeposit,
+                    calculateGasFee(gasUnit, gasPrices.average) + storageDeposit,
                     sourceNetwork.baseToken
                 ),
                 selected: selectedGasSpeed === GasSpeed.Required,
@@ -39,7 +41,7 @@
                 icon: IconName.ClockPlus,
                 title: localize('general.slow'),
                 subtitle: formatTokenAmount(
-                    calculateGasFee(estimatedGas, gasPrices.slow) + storageDeposit,
+                    calculateGasFee(gasUnit, gasPrices.slow) + storageDeposit,
                     sourceNetwork.baseToken
                 ),
                 selected: selectedGasSpeed === GasSpeed.Slow,
@@ -52,7 +54,7 @@
                 icon: IconName.CalendarDate,
                 title: localize('general.average'),
                 subtitle: formatTokenAmount(
-                    calculateGasFee(estimatedGas, gasPrices.average) + storageDeposit,
+                    calculateGasFee(gasUnit, gasPrices.average) + storageDeposit,
                     sourceNetwork.baseToken
                 ),
                 selected: selectedGasSpeed === GasSpeed.Average,
@@ -65,7 +67,7 @@
                 icon: IconName.CalendarPlus,
                 title: localize('general.fast'),
                 subtitle: formatTokenAmount(
-                    calculateGasFee(estimatedGas, gasPrices.fast) + storageDeposit,
+                    calculateGasFee(gasUnit, gasPrices.fast) + storageDeposit,
                     sourceNetwork.baseToken
                 ),
                 selected: selectedGasSpeed === GasSpeed.Fast,
@@ -75,20 +77,20 @@
         return _items
     }
 
-    $: disabled = items.length < 2
+    $: _disabled = disabled || items.length < 2
 
-    $: estimatedGasFee = calculateGasFee(estimatedGas, gasPrices[selectedGasSpeed])
+    $: estimatedGasFee = calculateGasFee(gasUnit, gasPrices[selectedGasSpeed])
 </script>
 
-<Menu bind:this={menu} {disabled} compact={false} placement="top-end" {items}>
+<Menu bind:this={menu} disabled={_disabled} compact={false} placement="top-end" {items}>
     <button
         bind:this={anchor}
         slot="anchor"
-        class="flex items-center justify-center {disabled ? 'cursor-default' : 'cursor-pointer'}"
-        {disabled}
+        class="flex items-center justify-center {_disabled ? 'cursor-default' : 'cursor-pointer'}"
+        disabled={_disabled}
     >
         <div class="flex flex-row items-center">
-            <Text textColor={disabled ? 'secondary' : 'brand'} fontWeight="medium">
+            <Text textColor={_disabled ? 'secondary' : 'brand'} fontWeight="medium">
                 {formatTokenAmount(estimatedGasFee, sourceNetwork.baseToken)}
             </Text>
         </div>