refactor: cleanup evm transaction popup

packages/desktop/components/evm-transactions/EvmDappRequestHeader.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { WCRequestInfo } from '@auxiliary/wallet-connect/types'
+    import { DappInfo } from '@ui'
+    import { RequestExpirationAlert } from '@views/dashboard/drawers/dapp-config/components'
+
+    export let requestInfo: WCRequestInfo
+</script>
+
+{#if requestInfo.dapp}
+    <DappInfo
+        metadata={requestInfo.dapp.metadata}
+        verifiedState={requestInfo.verifiedState}
+        showLink={false}
+        classes="bg-surface-1 dark:bg-surface-1-dark pb-4"
+    />
+    <RequestExpirationAlert expiryTimestamp={requestInfo.expiryTimestamp} />
+{/if}

packages/desktop/components/evm-transactions/index.ts

@@ -1,3 +1,6 @@
+export { default as EvmDappRequestHeader } from './EvmDappRequestHeader.svelte'
 export { default as EvmSmartContractAlert } from './EvmSmartContractAlert.svelte'
 export { default as EvmTokenApprovalAlert } from './EvmTokenApprovalAlert.svelte'
 export { default as EvmTransactionAlert } from './EvmTransactionAlert.svelte'
+
+export * from './transaction-views'

packages/desktop/components/evm-transactions/transaction-views/EvmBaseCoinTransferView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { RpcMethod } from '@auxiliary/wallet-connect/enums'
+    import { localize } from '@core/i18n'
+    import { TransactionAssetSection } from '@ui'
+    import PopupTemplate, { ButtonProps } from '@components/popup/PopupTemplate.svelte'
+    import { Subject, TokenTransferData } from '@core/wallet'
+    import { getNameFromSubject } from '@core/activity/utils'
+
+    export let baseCoinTransfer: TokenTransferData
+    export let method: RpcMethod.EthSendTransaction | RpcMethod.EthSignTransaction | RpcMethod.EthSendRawTransaction
+    export let recipient: Subject
+    export let continueButton: ButtonProps
+    export let backButton: ButtonProps
+    export let busy = false
+
+    $: localeKey = method === RpcMethod.EthSignTransaction ? 'signTransaction' : 'sendTransaction'
+</script>
+
+<PopupTemplate
+    title={localize(`popups.${localeKey}.title`, {
+        asset: baseCoinTransfer.token?.metadata?.name,
+        recipient: getNameFromSubject(recipient),
+    })}
+    {backButton}
+    continueButton={{
+        ...continueButton,
+        text: localize(`popups.${localeKey}.action`),
+    }}
+    {busy}
+>
+    <svelte:fragment slot="banner">
+        {#if $$slots.dappHeader}
+            <slot name="dappHeader" />
+        {/if}
+    </svelte:fragment>
+    <div class="flex flex-col space-y-5">
+        <TransactionAssetSection {baseCoinTransfer} />
+        <slot name="transactionDetails" />
+    </div>
+</PopupTemplate>

packages/desktop/components/evm-transactions/transaction-views/EvmNftTransferView.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { RpcMethod } from '@auxiliary/wallet-connect/enums'
+    import PopupTemplate, { ButtonProps } from '@components/popup/PopupTemplate.svelte'
+    import { selectedAccount } from '@core/account/stores'
+    import { getNameFromSubject } from '@core/activity'
+    import { localize } from '@core/i18n'
+    import { getNftByIdForAccount } from '@core/nfts/stores'
+    import { Subject, TokenTransferData } from '@core/wallet/types'
+    import { TransactionAssetSection } from '@ui'
+
+    export let baseCoinTransfer: TokenTransferData
+    export let nftId: string
+    export let recipient: Subject
+    export let method: RpcMethod.EthSendTransaction | RpcMethod.EthSignTransaction | RpcMethod.EthSendRawTransaction
+    export let continueButton: ButtonProps
+    export let backButton: ButtonProps
+    export let busy = false
+
+    $: nft = getNftByIdForAccount($selectedAccount?.index, nftId)
+
+    $: localeKey = method === RpcMethod.EthSignTransaction ? 'signTransaction' : 'sendTransaction'
+</script>
+
+<PopupTemplate
+    title={localize(`popups.${localeKey}.title`, {
+        asset: nft?.metadata?.name,
+        recipient: getNameFromSubject(recipient),
+    })}
+    {backButton}
+    continueButton={{
+        ...continueButton,
+        text: localize(`popups.${localeKey}.action`),
+    }}
+    {busy}
+>
+    <svelte:fragment slot="banner">
+        {#if $$slots.dappHeader}
+            <slot name="dappHeader" />
+        {/if}
+    </svelte:fragment>
+    <div class="flex flex-col space-y-5">
+        <TransactionAssetSection {baseCoinTransfer} {nft} />
+        <slot name="transactionDetails" />
+    </div>
+</PopupTemplate>

packages/desktop/components/evm-transactions/transaction-views/EvmSmartContractView.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { localize } from '@core/i18n'
+    import { TransactionAssetSection } from '@ui'
+    import { EvmNetworkId } from '@core/network'
+    import PopupTemplate, { ButtonProps } from '@components/popup/PopupTemplate.svelte'
+    import { TokenTransferData } from '@core/wallet/types'
+    import EvmSmartContractAlert from '../EvmSmartContractAlert.svelte'
+    import { IParsedSmartContractData } from '@core/layer-2/interfaces'
+    import { truncateString } from '@core/utils/string'
+
+    export let baseCoinTransfer: TokenTransferData
+
+    export let parsedData: IParsedSmartContractData
+    export let contractAddress: string
+    export let networkId: EvmNetworkId
+    export let continueButton: ButtonProps
+    export let backButton: ButtonProps
+    export let busy = false
+
+    const localeKey = 'popups.smartContractCall'
+</script>
+
+<PopupTemplate
+    title={localize(`${localeKey}.title`, { contractAddress: truncateString(contractAddress, 6, 6) })}
+    {backButton}
+    continueButton={{
+        ...continueButton,
+        text: localize(`${localeKey}.action`),
+    }}
+    {busy}
+>
+    <svelte:fragment slot="banner">
+        {#if $$slots.dappHeader}
+            <slot name="dappHeader" />
+        {/if}
+    </svelte:fragment>
+    <div class="flex flex-col space-y-5">
+        <TransactionAssetSection {baseCoinTransfer} />
+        <EvmSmartContractAlert parsedSmartContract={parsedData} {networkId} />
+        <slot name="transactionDetails" />
+    </div>
+</PopupTemplate>

packages/desktop/components/evm-transactions/transaction-views/EvmTokenApprovalView.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { localize } from '@core/i18n'
+    import PopupTemplate, { ButtonProps } from '@components/popup/PopupTemplate.svelte'
+    import EvmTokenApprovalAlert from '../EvmTokenApprovalAlert.svelte'
+    import { EvmNetworkId } from '@core/network/types'
+    import { IParsedTokenApproval } from '@core/layer-2'
+    import { TokenTransferData } from '@core/wallet'
+    import { TransactionAssetSection } from '@ui'
+    import { Alert, Checkbox } from '@bloomwalletio/ui'
+    import { truncateString } from '@core/utils'
+    import { getTokenFromSelectedAccountTokens, selectedAccountTokens } from '@core/token/stores'
+    import { ITokenWithBalance } from '@core/token'
+
+    export let parsedTokenApproval: IParsedTokenApproval
+    export let baseCoinTransfer: TokenTransferData
+    export let dappName: string | undefined
+    export let continueButton: ButtonProps
+    export let backButton: ButtonProps
+    export let networkId: EvmNetworkId
+    export let busy = false
+
+    let bypassSecurityWarning = false
+
+    $: tokens = [
+        $selectedAccountTokens?.[networkId]?.baseCoin,
+        ...($selectedAccountTokens?.[networkId]?.nativeTokens ?? []),
+    ].filter(Boolean) as ITokenWithBalance[]
+    $: tokenBalance = tokens.find((token) => token.id === parsedTokenApproval.tokenId)?.balance.available ?? BigInt(0)
+    $: hasSecurityWarning = baseCoinTransfer.rawAmount > BigInt(0) || parsedTokenApproval.rawAmount > tokenBalance
+
+    const token = getTokenFromSelectedAccountTokens(parsedTokenApproval.tokenId, networkId)
+    const localeKey = 'popups.tokenApproval'
+</script>
+
+<PopupTemplate
+    title={localize(`${localeKey}.title`, {
+        dappName: dappName ?? parsedTokenApproval.spender,
+        assetName: token?.metadata?.name ?? truncateString(parsedTokenApproval.tokenId, 6, 6),
+    })}
+    {backButton}
+    continueButton={{
+        ...continueButton,
+        text: localize(`${localeKey}.action`),
+        disabled: continueButton.disabled || (hasSecurityWarning && !bypassSecurityWarning),
+    }}
+    {busy}
+>
+    <svelte:fragment slot="banner">
+        {#if $$slots.dappHeader}
+            <slot name="dappHeader" />
+        {/if}
+    </svelte:fragment>
+    <div class="flex flex-col space-y-5">
+        <TransactionAssetSection {baseCoinTransfer} />
+        <EvmTokenApprovalAlert {parsedTokenApproval} {networkId} />
+        <slot name="transactionDetails" />
+        {#if baseCoinTransfer.rawAmount > BigInt(0)}
+            <!-- Display alert if token approval is also trying to consume value -->
+            <Alert variant="danger" text="Beware this approval transaction is also trying to consume base tokens!" />
+        {:else if parsedTokenApproval.rawAmount > tokenBalance}
+            <Alert variant="warning" text={localize(`${localeKey}.approveMoreThanBalanceWarning`)}>
+                <checkbox-container slot="body">
+                    <Checkbox label={localize(`${localeKey}.accept`)} bind:checked={bypassSecurityWarning} />
+                </checkbox-container>
+            </Alert>
+        {/if}
+    </div>
+</PopupTemplate>

packages/desktop/components/evm-transactions/transaction-views/EvmTokenTransferView.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { RpcMethod } from '@auxiliary/wallet-connect/enums'
+    import PopupTemplate, { ButtonProps } from '@components/popup/PopupTemplate.svelte'
+    import { getNameFromSubject } from '@core/activity/utils'
+    import { localize } from '@core/i18n'
+    import { IEvmNetwork } from '@core/network'
+    import { getTokenFromSelectedAccountTokens } from '@core/token/stores'
+    import { Subject, TokenTransferData } from '@core/wallet/types'
+    import { TransactionAssetSection } from '@ui'
+
+    export let baseCoinTransfer: TokenTransferData
+    export let tokenId: string
+    export let rawAmount: bigint
+    export let recipient: Subject
+    export let method: RpcMethod.EthSendTransaction | RpcMethod.EthSignTransaction | RpcMethod.EthSendRawTransaction
+    export let evmNetwork: IEvmNetwork
+    export let continueButton: ButtonProps
+    export let backButton: ButtonProps
+    export let busy = false
+
+    $: token = getTokenFromSelectedAccountTokens(tokenId, evmNetwork.id)
+
+    $: localeKey = method === RpcMethod.EthSignTransaction ? 'signTransaction' : 'sendTransaction'
+</script>
+
+<PopupTemplate
+    title={localize(`popups.${localeKey}.title`, {
+        asset: token?.metadata?.name,
+        recipient: getNameFromSubject(recipient),
+    })}
+    {backButton}
+    continueButton={{
+        ...continueButton,
+        text: localize(`popups.${localeKey}.action`),
+    }}
+    {busy}
+>
+    <svelte:fragment slot="banner">
+        {#if $$slots.dappHeader}
+            <slot name="dappHeader" />
+        {/if}
+    </svelte:fragment>
+    <div class="flex flex-col space-y-5">
+        <TransactionAssetSection {baseCoinTransfer} tokenTransfer={{ token, rawAmount }} />
+        <slot name="transactionDetails" />
+    </div>
+</PopupTemplate>

packages/desktop/components/evm-transactions/transaction-views/index.ts

@@ -0,0 +1,5 @@
+export { default as EvmBaseCoinTransferView } from './EvmBaseCoinTransferView.svelte'
+export { default as EvmNftTransferView } from './EvmNftTransferView.svelte'
+export { default as EvmSmartContractView } from './EvmSmartContractView.svelte'
+export { default as EvmTokenApprovalView } from './EvmTokenApprovalView.svelte'
+export { default as EvmTokenTransferView } from './EvmTokenTransferView.svelte'