From 8935601c7c4dfac4d76cdac412d39c5c74180ba7 Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Tue, 5 Sep 2023 09:29:12 +0100
Subject: [PATCH 1/2] 547 refactor IToken and ITokenWithBalance (#548)

* create base token constant

* replace getCoinType with BASE_TOKEN_ID

* refactor: to use ITokenWithBalance

* TokenWithBalance into token information popup

* feat: token with balance on slider

* fix: use of token with balance

* fix type checks

* fix

* move actions to correct folder

* remove utils folder

---------

Co-authored-by: Mark Nardi <nardimark7@gmail.com>
---
 .../modals/AccountSwitcherModal.svelte        |  6 +-
 .../BurnNativeTokensConfirmationPopup.svelte  |  4 +-
 .../popups/BurnNativeTokensPopup.svelte       |  8 +-
 .../popups/TokenInformationPopup.svelte       | 16 ++--
 .../views/InputTokenAmountView.svelte         | 28 ++++--
 .../send-flow/views/SelectTokenView.svelte    | 15 +--
 .../atoms/BalanceSummarySection.svelte        |  4 +-
 .../components/inputs/TokenAmountInput.svelte |  7 +-
 .../inputs/TokenAmountWithSliderInput.svelte  | 25 ++---
 .../components/inputs/TokenDropdown.svelte    | 96 -------------------
 .../shared/src/components/inputs/index.js     |  1 -
 .../labels/TogglableTokenBalanceLabel.svelte  |  6 +-
 .../src/components/labels/TokenLabel.svelte   | 23 +++++
 .../shared/src/components/labels/index.js     |  1 +
 .../modals/TokenActionsMenuModal.svelte       | 14 +--
 .../src/components/molecules/TokenList.svelte | 18 ++--
 .../molecules/TransactionAssetSection.svelte  | 16 +++-
 .../menu-items/AccountSwitcherMenuItem.svelte |  8 +-
 .../src/components/tiles/ActivityTile.svelte  |  4 +-
 .../components/tiles/TokenAmountTile.svelte   |  7 +-
 .../tiles/TokenAvailableBalanceTile.svelte    |  4 +-
 .../account/stores/selected-account.store.ts  |  2 +-
 .../getMarketAmountFromTokenValue.ts          |  4 +-
 .../getMarketPriceForToken.ts                 |  4 +-
 .../src/lib/core/market/actions/index.ts      |  2 +
 packages/shared/src/lib/core/market/index.ts  |  1 -
 .../shared/src/lib/core/market/utils/index.ts |  2 -
 .../getAccountTokensForSelectedAccount.ts     | 10 +-
 .../lib/core/token/actions/getTokenBalance.ts |  8 ++
 .../src/lib/core/token/actions/index.ts       |  1 +
 .../interfaces/account-tokens.interface.ts    |  6 +-
 .../core/token/interfaces/token.interface.ts  |  4 -
 .../stores/selected-account-tokens.store.ts   | 11 ++-
 .../src/lib/core/token/utils/sortTokens.ts    | 16 ++--
 .../core/token/utils/validateTokenAmount.ts   |  4 +-
 35 files changed, 170 insertions(+), 216 deletions(-)
 delete mode 100644 packages/shared/src/components/inputs/TokenDropdown.svelte
 create mode 100644 packages/shared/src/components/labels/TokenLabel.svelte
 rename packages/shared/src/lib/core/market/{utils => actions}/getMarketAmountFromTokenValue.ts (81%)
 rename packages/shared/src/lib/core/market/{utils => actions}/getMarketPriceForToken.ts (59%)
 delete mode 100644 packages/shared/src/lib/core/market/utils/index.ts
 create mode 100644 packages/shared/src/lib/core/token/actions/getTokenBalance.ts

diff --git a/packages/desktop/components/modals/AccountSwitcherModal.svelte b/packages/desktop/components/modals/AccountSwitcherModal.svelte
index 74c31ed63a..2e4f94be74 100644
--- a/packages/desktop/components/modals/AccountSwitcherModal.svelte
+++ b/packages/desktop/components/modals/AccountSwitcherModal.svelte
@@ -3,7 +3,7 @@
     import { sumBalanceForAccounts } from '@core/account'
     import { selectedAccount } from '@core/account/stores'
     import { formatCurrency, localize } from '@core/i18n'
-    import { getMarketAmountFromTokenValue } from '@core/market/utils'
+    import { getMarketAmountFromTokenValue } from '@core/market/actions'
     import { getBaseToken } from '@core/profile/actions'
     import { activeProfile, visibleActiveAccounts } from '@core/profile/stores'
     import { formatTokenAmountBestMatch } from '@core/token'
@@ -15,7 +15,7 @@
     export let modal: Modal = undefined
 
     $: totalBalance = sumBalanceForAccounts($visibleActiveAccounts)
-    $: ({ baseCoin } = $selectedAccountTokens[$activeProfile?.network.id])
+    $: baseCoin = $selectedAccountTokens[$activeProfile?.network.id]?.baseCoin
 
     async function scrollToSelectedAccount(): Promise<void> {
         await tick()
@@ -55,7 +55,7 @@
                 {formatTokenAmountBestMatch(totalBalance, getBaseToken())}
             </Text>
             <Text fontSize="12" fontWeight={FontWeight.semibold} lineHeight="20" color="blue-500">
-                {formatCurrency(getMarketAmountFromTokenValue(totalBalance, baseCoin))}
+                {baseCoin ? formatCurrency(getMarketAmountFromTokenValue(totalBalance, baseCoin)) : undefined}
             </Text>
         </div>
     </button>
diff --git a/packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte b/packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte
index 4e702f4ffb..d4cbc90956 100644
--- a/packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte
+++ b/packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte
@@ -4,13 +4,13 @@
     import { handleError } from '@core/error/handlers'
     import { localize } from '@core/i18n'
     import { checkActiveProfileAuth } from '@core/profile/actions'
-    import { IToken, formatTokenAmountBestMatch } from '@core/token'
+    import { ITokenWithBalance, formatTokenAmountBestMatch } from '@core/token'
     import { burnToken } from '@core/wallet'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
     import { Button, ButtonVariant, FontWeight, Text, TextHint, TextType } from '@ui'
     import { onMount } from 'svelte'
 
-    export let token: IToken
+    export let token: ITokenWithBalance
     export let rawAmount: string
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
 
diff --git a/packages/desktop/components/popups/BurnNativeTokensPopup.svelte b/packages/desktop/components/popups/BurnNativeTokensPopup.svelte
index 6dcec73118..2744bf5c05 100644
--- a/packages/desktop/components/popups/BurnNativeTokensPopup.svelte
+++ b/packages/desktop/components/popups/BurnNativeTokensPopup.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { Button, Text, TextHint, FontWeight, TextType, TokenAmountWithSliderInput } from '@ui'
     import { localize } from '@core/i18n'
-    import { closePopup, openPopup, PopupId } from '@desktop/auxiliary/popup'
-    import { IToken } from '@core/token'
+    import { ITokenWithBalance } from '@core/token'
+    import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
+    import { Button, FontWeight, Text, TextHint, TextType, TokenAmountWithSliderInput } from '@ui'
 
-    export let token: IToken
+    export let token: ITokenWithBalance
     export let rawAmount: string = '0'
 
     let tokenAmountInput: TokenAmountWithSliderInput
diff --git a/packages/desktop/components/popups/TokenInformationPopup.svelte b/packages/desktop/components/popups/TokenInformationPopup.svelte
index 6ff017bdba..e8cf32b1b9 100644
--- a/packages/desktop/components/popups/TokenInformationPopup.svelte
+++ b/packages/desktop/components/popups/TokenInformationPopup.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-    import { localize } from '@core/i18n'
-    import { setSendFlowParameters, SendFlowType } from '@core/wallet'
-    import { TokenStandard, IToken, NotVerifiedStatus, VerifiedStatus, BASE_TOKEN_ID } from '@core/token'
-    import { openPopup, PopupId, updatePopupProps } from '@desktop/auxiliary/popup'
-    import { Button, FontWeight, Text, TextHint, TokenActionsButton, TextType, TokenAmountTile, TooltipIcon } from '@ui'
     import { Table } from '@bloomwalletio/ui'
-    import { SendFlowRoute, SendFlowRouter, sendFlowRouter } from '@views/dashboard/send-flow'
-    import { Icon as IconEnum } from '@lib/auxiliary/icon'
+    import { localize } from '@core/i18n'
+    import { BASE_TOKEN_ID, ITokenWithBalance, NotVerifiedStatus, TokenStandard, VerifiedStatus } from '@core/token'
     import { unverifyToken, verifyToken } from '@core/token/stores'
+    import { SendFlowType, setSendFlowParameters } from '@core/wallet'
+    import { PopupId, openPopup, updatePopupProps } from '@desktop/auxiliary/popup'
+    import { Icon as IconEnum } from '@lib/auxiliary/icon'
+    import { Button, FontWeight, Text, TextHint, TextType, TokenActionsButton, TokenAmountTile, TooltipIcon } from '@ui'
+    import { SendFlowRoute, SendFlowRouter, sendFlowRouter } from '@views/dashboard/send-flow'
 
-    export let token: IToken | undefined
+    export let token: ITokenWithBalance | undefined
     export let activityId: string = undefined
 
     function onSkipClick(): void {
diff --git a/packages/desktop/views/dashboard/send-flow/views/InputTokenAmountView.svelte b/packages/desktop/views/dashboard/send-flow/views/InputTokenAmountView.svelte
index 402a6f1e25..48f553601d 100644
--- a/packages/desktop/views/dashboard/send-flow/views/InputTokenAmountView.svelte
+++ b/packages/desktop/views/dashboard/send-flow/views/InputTokenAmountView.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
     import { localize } from '@core/i18n'
-    import { IToken, formatTokenAmountDefault, getUnitFromTokenMetadata } from '@core/token'
+    import { ITokenWithBalance, formatTokenAmountDefault, getUnitFromTokenMetadata } from '@core/token'
+    import { getTokenBalance } from '@core/token/actions'
+    import { getTokenFromSelectedAccountTokens } from '@core/token/stores'
     import { SendFlowType, sendFlowParameters, updateSendFlowParameters } from '@core/wallet'
     import { TokenAmountInput, TokenAvailableBalanceTile } from '@ui'
     import { sendFlowRouter } from '../send-flow.router'
     import SendFlowTemplate from './SendFlowTemplate.svelte'
 
     let tokenAmountInput: TokenAmountInput
-    let token: IToken
+    let token: ITokenWithBalance
     let rawAmount: string
     let amount: string
     let unit: string
@@ -17,18 +19,21 @@
         $sendFlowParameters.type === SendFlowType.BaseCoinTransfer ||
         $sendFlowParameters.type === SendFlowType.TokenTransfer
     ) {
-        token = $sendFlowParameters[tokenKey].token
+        token = getTokenFromSelectedAccountTokens(
+            $sendFlowParameters[tokenKey].token?.id,
+            $sendFlowParameters[tokenKey].token?.networkId
+        )
         rawAmount = $sendFlowParameters[tokenKey].rawAmount
         unit = $sendFlowParameters[tokenKey].unit || getUnitFromTokenMetadata(token?.metadata)
     }
 
-    $: availableBalance = token?.balance?.available
+    $: tokenBalance = getTokenBalance(token?.id, token?.networkId)
 
     function setToMax(): void {
         if (token?.metadata?.decimals) {
-            amount = formatTokenAmountDefault(availableBalance, token?.metadata, unit, false)
+            amount = formatTokenAmountDefault(tokenBalance?.available, token?.metadata, unit, false)
         } else {
-            amount = availableBalance.toString() ?? '0'
+            amount = tokenBalance?.available?.toString() ?? '0'
         }
     }
 
@@ -39,7 +44,7 @@
             updateSendFlowParameters({
                 type: $sendFlowParameters.type,
                 [tokenKey]: {
-                    token,
+                    token: $sendFlowParameters[tokenKey].token,
                     rawAmount,
                     unit,
                 },
@@ -54,7 +59,7 @@
         updateSendFlowParameters({
             type: $sendFlowParameters.type,
             [tokenKey]: {
-                token,
+                token: $sendFlowParameters[tokenKey].token,
                 rawAmount: undefined,
                 unit,
             },
@@ -76,7 +81,10 @@
         bind:rawAmount
         bind:inputtedAmount={amount}
         {unit}
-        {availableBalance}
+        availableBalance={tokenBalance?.available}
+    />
+    <TokenAvailableBalanceTile
+        token={getTokenFromSelectedAccountTokens(token.id, token.networkId)}
+        onMaxClick={setToMax}
     />
-    <TokenAvailableBalanceTile {token} onMaxClick={setToMax} />
 </SendFlowTemplate>
diff --git a/packages/desktop/views/dashboard/send-flow/views/SelectTokenView.svelte b/packages/desktop/views/dashboard/send-flow/views/SelectTokenView.svelte
index 86cb63b507..5321bcbdfc 100644
--- a/packages/desktop/views/dashboard/send-flow/views/SelectTokenView.svelte
+++ b/packages/desktop/views/dashboard/send-flow/views/SelectTokenView.svelte
@@ -7,8 +7,8 @@
     import { canAccountMakeEvmTransaction } from '@core/layer-2/actions'
     import { marketCoinPrices } from '@core/market/stores'
     import { getNetwork } from '@core/network'
-    import { AccountTokens, BASE_TOKEN_ID, IToken, TokenStandard } from '@core/token'
-    import { getAccountTokensForSelectedAccount } from '@core/token/actions'
+    import { AccountTokens, BASE_TOKEN_ID, IToken, ITokenWithBalance, TokenStandard } from '@core/token'
+    import { getAccountTokensForSelectedAccount, getTokenBalance } from '@core/token/actions'
     import { selectedAccountTokens } from '@core/token/stores'
     import { SendFlowType, sendFlowParameters, setSendFlowParameters } from '@core/wallet'
     import { closePopup } from '@desktop/auxiliary/popup'
@@ -27,10 +27,11 @@
     let accountTokens: AccountTokens
     $: accountTokens = getAccountTokensForSelectedAccount($marketCoinPrices)
     $: accountTokens, searchValue, setFilteredTokenList()
+    $: tokenBalance = getTokenBalance(selectedToken.id, selectedToken.networkId)
     let hasTokenError: boolean = false
 
-    let tokenList: IToken[]
-    function getTokenList(): IToken[] {
+    let tokenList: ITokenWithBalance[]
+    function getTokenList(): ITokenWithBalance[] {
         const list = []
         for (const tokensPerNetwork of Object.values(accountTokens)) {
             if (tokensPerNetwork?.baseCoin) {
@@ -50,7 +51,7 @@
         }
     }
 
-    function isVisibleToken(token: IToken): boolean {
+    function isVisibleToken(token: ITokenWithBalance): boolean {
         const _searchValue = searchValue.toLowerCase()
         const name = token?.metadata?.name
         const ticker =
@@ -62,7 +63,7 @@
         )
     }
 
-    async function onTokenClick(token: IToken): Promise<void> {
+    async function onTokenClick(token: ITokenWithBalance): Promise<void> {
         try {
             selectedToken = token
             hasTokenError =
@@ -129,8 +130,8 @@
             {#each tokenList as token}
                 <TokenAmountTile
                     {token}
+                    amount={tokenBalance?.available}
                     hasError={token === selectedToken && hasTokenError}
-                    amount={token.balance.available}
                     onClick={() => onTokenClick(token)}
                     selected={selectedToken?.id === token.id && selectedToken?.networkId === token?.networkId}
                 />
diff --git a/packages/shared/src/components/atoms/BalanceSummarySection.svelte b/packages/shared/src/components/atoms/BalanceSummarySection.svelte
index f8aed8668c..754e48f414 100644
--- a/packages/shared/src/components/atoms/BalanceSummarySection.svelte
+++ b/packages/shared/src/components/atoms/BalanceSummarySection.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Icon as IconEnum } from '@auxiliary/icon'
     import { formatCurrency, localize } from '@core/i18n'
-    import { getMarketAmountFromTokenValue } from '@core/market/utils'
+    import { getMarketAmountFromTokenValue } from '@core/market/actions'
     import { activeProfile } from '@core/profile/stores'
     import { formatTokenAmountBestMatch } from '@core/token'
     import { selectedAccountTokens } from '@core/token/stores'
@@ -16,7 +16,7 @@
     let expanded = false
 
     $: hasChildren = !!Object.keys(subBreakdown ?? {}).length
-    $: ({ baseCoin } = $selectedAccountTokens?.[$activeProfile?.network?.id] ?? {})
+    $: baseCoin = $selectedAccountTokens?.[$activeProfile?.network?.id]?.baseCoin
 
     function getAmount(amount: number): string {
         return baseCoin?.metadata ? formatTokenAmountBestMatch(amount, baseCoin.metadata) : ''
diff --git a/packages/shared/src/components/inputs/TokenAmountInput.svelte b/packages/shared/src/components/inputs/TokenAmountInput.svelte
index 5446bd03b3..5b454aaca1 100644
--- a/packages/shared/src/components/inputs/TokenAmountInput.svelte
+++ b/packages/shared/src/components/inputs/TokenAmountInput.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { formatCurrency, getDecimalSeparator } from '@core/i18n'
-    import { getMarketAmountFromTokenValue } from '@core/market/utils'
+    import { getMarketAmountFromTokenValue } from '@core/market/actions'
     import { activeProfile } from '@core/profile/stores'
     import {
-        IToken,
+        ITokenWithBalance,
         convertToRawAmount,
         formatTokenAmountDefault,
         getMaxDecimalsFromTokenMetadata,
@@ -12,7 +12,8 @@
     import { visibleSelectedAccountTokens } from '@core/token/stores'
     import { AmountInput, FontWeight, InputContainer, Text } from '@ui'
 
-    export let token: IToken | undefined = $visibleSelectedAccountTokens?.[$activeProfile?.network?.id]?.baseCoin
+    export let token: ITokenWithBalance | undefined =
+        $visibleSelectedAccountTokens?.[$activeProfile?.network?.id]?.baseCoin
     export let rawAmount: string | undefined = undefined
     export let unit: string | undefined = undefined
     export let availableBalance: number
diff --git a/packages/shared/src/components/inputs/TokenAmountWithSliderInput.svelte b/packages/shared/src/components/inputs/TokenAmountWithSliderInput.svelte
index 9df686724a..50162e85b0 100644
--- a/packages/shared/src/components/inputs/TokenAmountWithSliderInput.svelte
+++ b/packages/shared/src/components/inputs/TokenAmountWithSliderInput.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { localize, parseCurrency } from '@core/i18n'
-    import { activeProfile } from '@core/profile'
+    import { activeProfile } from '@core/profile/stores'
     import {
-        IToken,
+        ITokenWithBalance,
         TokenStandard,
         convertToRawAmount,
         formatTokenAmountDefault,
@@ -10,20 +10,21 @@
     } from '@core/token'
     import { visibleSelectedAccountTokens } from '@core/token/stores'
     import { getMaxDecimalsFromTokenMetadata } from '@core/token/utils'
-    import { AmountInput, InputContainer, SliderInput, Text, TokenDropdown } from '@ui'
+    import { AmountInput, InputContainer, SliderInput, Text, TokenLabel, UnitInput } from '@ui'
     import Big from 'big.js'
-    import UnitInput from './UnitInput.svelte'
 
-    export let inputElement: HTMLInputElement = undefined
+    export let inputElement: HTMLInputElement | undefined = undefined
     export let disabled = false
     export let isFocused = false
     export let votingPower: number = 0
-    export let token: IToken | undefined = $visibleSelectedAccountTokens?.[$activeProfile?.network?.id]?.baseCoin
-    export let rawAmount: string = undefined
-    export let unit: string = undefined
-    export let amount: string = rawAmount
-        ? formatTokenAmountDefault(Number(rawAmount), token?.metadata, unit, false)
-        : undefined
+    export let token: ITokenWithBalance | undefined =
+        $visibleSelectedAccountTokens?.[$activeProfile?.network?.id]?.baseCoin
+    export let rawAmount: string | undefined = undefined
+    export let unit: string | undefined = undefined
+    export let amount: string | undefined =
+        rawAmount && token?.metadata
+            ? formatTokenAmountDefault(Number(rawAmount), token?.metadata, unit, false)
+            : undefined
 
     let amountInputElement: HTMLInputElement
     let error: string
@@ -68,7 +69,7 @@
 
 <InputContainer bind:this={inputElement} bind:inputElement={amountInputElement} col {isFocused} {error}>
     <div class="flex flex-row w-full items-center space-x-0.5 relative">
-        <TokenDropdown bind:token readonly={true} />
+        <TokenLabel bind:token />
         <AmountInput
             bind:inputElement={amountInputElement}
             bind:amount
diff --git a/packages/shared/src/components/inputs/TokenDropdown.svelte b/packages/shared/src/components/inputs/TokenDropdown.svelte
deleted file mode 100644
index 01cdb7ce0d..0000000000
--- a/packages/shared/src/components/inputs/TokenDropdown.svelte
+++ /dev/null
@@ -1,96 +0,0 @@
-<script lang="ts">
-    import { IToken } from '@core/token'
-    import { visibleSelectedAccountTokens } from '@core/token/stores'
-    import { TokenAmountTile, Icon, Text, TokenAvatar, FontWeight } from '@ui'
-    import { clickOutside } from '@core/utils'
-    import { activeProfile } from '@core/profile/stores'
-
-    export let token = $visibleSelectedAccountTokens?.[$activeProfile?.network?.id]?.baseCoin
-    export let readonly: boolean = false
-
-    let isDropdownOpen = false
-    let tokenList: IToken[] = []
-
-    $: isReadonly = readonly || $visibleSelectedAccountTokens?.[$activeProfile?.network?.id]?.nativeTokens.length === 0
-    $: $visibleSelectedAccountTokens, (tokenList = getTokenList())
-
-    function getTokenList(): IToken[] {
-        const list = []
-        for (const tokensPerNetwork of Object.values($visibleSelectedAccountTokens)) {
-            if (tokensPerNetwork?.baseCoin) {
-                list.push(tokensPerNetwork.baseCoin)
-            }
-            list.push(...(tokensPerNetwork?.nativeTokens ?? []))
-        }
-        return list
-    }
-
-    function onDropdownClick(): void {
-        if (!isReadonly) {
-            isDropdownOpen = !isDropdownOpen
-        }
-    }
-
-    function onTokenClick(_asset: IToken): void {
-        token = _asset
-        isDropdownOpen = false
-    }
-
-    function onOutsideClick(): void {
-        isDropdownOpen = false
-    }
-</script>
-
-{#if token}
-    <div class="flex flex-col" use:clickOutside on:clickOutside={onOutsideClick}>
-        <button
-            type="button"
-            class="flex flex-row items-center p-2 space-x-2 text-left bg-gray-100 dark:bg-gray-700 rounded-md cursor-default"
-            class:cursor-pointer={!isReadonly}
-            on:click={onDropdownClick}
-        >
-            <TokenAvatar size="xs" {token} />
-            <div class="w-full relative" style="max-width: 75px;">
-                <Text
-                    color="gray-600"
-                    darkColor="white"
-                    fontWeight={FontWeight.semibold}
-                    fontSize="15"
-                    classes="overflow-hidden whitespace-nowrap text-ellipsis"
-                >
-                    {token.metadata?.name ?? token.id}
-                </Text>
-            </div>
-            {#if !isReadonly}
-                <div class="transform rotate-0">
-                    <Icon height="18" width="18" icon="chevron-down" classes="text-gray-600 dark:text-gray-500" />
-                </div>
-            {/if}
-        </button>
-        {#if isDropdownOpen && !isReadonly}
-            <div
-                class="dropdown bg-white dark:bg-gray-800 absolute flex flex-col top-12 -left-5 -right-5 border border-solid border-blue-500 rounded-xl z-10 p-4 max-h-96"
-            >
-                <ul class="overflow-y-auto h-full -mr-2 pr-2">
-                    {#each tokenList as token}
-                        <li>
-                            <TokenAmountTile
-                                onClick={() => onTokenClick(token)}
-                                {token}
-                                amount={token.balance.total}
-                                classes="bg-white hover:bg-gray-50 dark:bg-transparent"
-                            />
-                        </li>
-                    {/each}
-                </ul>
-            </div>
-        {/if}
-    </div>
-{/if}
-
-<style lang="scss">
-    /* odd margin needed to match the size of the upper parent box */
-    .dropdown {
-        margin: 0 3px;
-    }
-</style>
diff --git a/packages/shared/src/components/inputs/index.js b/packages/shared/src/components/inputs/index.js
index 9441626a93..241aa93bd9 100644
--- a/packages/shared/src/components/inputs/index.js
+++ b/packages/shared/src/components/inputs/index.js
@@ -26,5 +26,4 @@ export { default as TogglableButton } from './TogglableButton.svelte'
 export { default as Toggle } from './Toggle.svelte'
 export { default as TokenAmountInput } from './TokenAmountInput.svelte'
 export { default as TokenAmountWithSliderInput } from './TokenAmountWithSliderInput.svelte'
-export { default as TokenDropdown } from './TokenDropdown.svelte'
 export { default as UnitInput } from './UnitInput.svelte'
diff --git a/packages/shared/src/components/labels/TogglableTokenBalanceLabel.svelte b/packages/shared/src/components/labels/TogglableTokenBalanceLabel.svelte
index 2449f76435..21a20b30a6 100644
--- a/packages/shared/src/components/labels/TogglableTokenBalanceLabel.svelte
+++ b/packages/shared/src/components/labels/TogglableTokenBalanceLabel.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { formatCurrency, localize } from '@core/i18n'
-    import { getMarketAmountFromTokenValue } from '@core/market/utils'
-    import { IToken, formatTokenAmountBestMatch } from '@core/token'
+    import { getMarketAmountFromTokenValue } from '@core/market/actions'
+    import { ITokenWithBalance, formatTokenAmountBestMatch } from '@core/token'
     import { FontWeight, Text, TextType } from '@ui'
 
-    export let token: IToken
+    export let token: ITokenWithBalance
 
     $: availableMarketValue = getMarketAmountFromTokenValue(token?.balance?.available, token)
     $: totalMarketValue = getMarketAmountFromTokenValue(token?.balance?.total, token)
diff --git a/packages/shared/src/components/labels/TokenLabel.svelte b/packages/shared/src/components/labels/TokenLabel.svelte
new file mode 100644
index 0000000000..be24c2e71c
--- /dev/null
+++ b/packages/shared/src/components/labels/TokenLabel.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { IToken } from '@core/token'
+    import { FontWeight, Text, TokenIcon } from '@ui'
+
+    export let token: IToken
+</script>
+
+{#if token}
+    <div class="flex flex-row items-center p-2 space-x-2 text-left bg-gray-100 dark:bg-gray-700 rounded-md">
+        <TokenIcon small persistedToken={token} networkId={token.networkId} />
+        <div class="w-full relative" style="max-width: 75px;">
+            <Text
+                color="gray-600"
+                darkColor="white"
+                fontWeight={FontWeight.semibold}
+                fontSize="15"
+                classes="overflow-hidden whitespace-nowrap text-ellipsis"
+            >
+                {token.metadata?.name ?? token.id}
+            </Text>
+        </div>
+    </div>
+{/if}
diff --git a/packages/shared/src/components/labels/index.js b/packages/shared/src/components/labels/index.js
index 0ddee3b7b0..0302cf589a 100644
--- a/packages/shared/src/components/labels/index.js
+++ b/packages/shared/src/components/labels/index.js
@@ -1,3 +1,4 @@
 export { default as AccountLabel } from './AccountLabel'
 export { default as ColorLabel } from './ColorLabel'
 export { default as TogglableTokenBalanceLabel } from './TogglableTokenBalanceLabel'
+export { default as TokenLabel } from './TokenLabel'
diff --git a/packages/shared/src/components/modals/TokenActionsMenuModal.svelte b/packages/shared/src/components/modals/TokenActionsMenuModal.svelte
index 22812b9fef..1302ae2069 100644
--- a/packages/shared/src/components/modals/TokenActionsMenuModal.svelte
+++ b/packages/shared/src/components/modals/TokenActionsMenuModal.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
+    import { hideActivitiesForHiddenTokens } from '@core/activity/actions'
     import { localize } from '@core/i18n'
-    import { Icon } from '@lib/auxiliary/icon'
-    import { closePopup, openPopup, PopupId, updatePopupProps } from '../../../../desktop/lib/auxiliary/popup'
-    import { MenuItem, Modal } from '@ui'
-    import features from '@features/features'
     import { activeProfile } from '@core/profile/stores'
-    import { IToken, NotVerifiedStatus, VerifiedStatus } from '@core/token'
+    import { ITokenWithBalance, NotVerifiedStatus, VerifiedStatus } from '@core/token'
     import { removeTrackedTokenFromActiveProfile } from '@core/token/actions'
     import { hideToken, unhideToken, unverifyToken, verifyToken } from '@core/token/stores'
-    import { hideActivitiesForHiddenTokens } from '@core/activity/actions'
+    import features from '@features/features'
+    import { Icon } from '@lib/auxiliary/icon'
+    import { MenuItem, Modal } from '@ui'
+    import { closePopup, openPopup, PopupId, updatePopupProps } from '../../../../desktop/lib/auxiliary/popup'
 
     export let modal: Modal | undefined = undefined
-    export let token: IToken
+    export let token: ITokenWithBalance
 
     $: isTrackedToken = $activeProfile?.trackedTokens?.[token.networkId]?.includes(token.id)
 
diff --git a/packages/shared/src/components/molecules/TokenList.svelte b/packages/shared/src/components/molecules/TokenList.svelte
index b08af1b71b..9bcd05dc16 100644
--- a/packages/shared/src/components/molecules/TokenList.svelte
+++ b/packages/shared/src/components/molecules/TokenList.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-    import VirtualList from '@sveltejs/svelte-virtual-list'
-    import { Text, TextType, TokenAmountTile } from '@ui'
-    import { TokenListMenuButton, Filter } from '../../../../desktop/components'
     import { localize } from '@core/i18n'
-    import { AccountTokens, IToken } from '@core/token'
-    import { tokenFilter } from '@core/token/stores'
+    import { AccountTokens, ITokenWithBalance } from '@core/token'
     import { isVisibleToken } from '@core/token/actions/isVisibleToken'
+    import { tokenFilter } from '@core/token/stores'
+    import VirtualList from '@sveltejs/svelte-virtual-list'
+    import { Text, TextType, TokenAmountTile } from '@ui'
+    import { Filter, TokenListMenuButton } from '../../../../desktop/components'
     import { PopupId, openPopup } from '../../../../desktop/lib/auxiliary/popup'
 
     export let accountTokens: AccountTokens
 
-    let filteredTokenList: IToken[]
+    let filteredTokenList: ITokenWithBalance[]
     $: $tokenFilter, accountTokens, (filteredTokenList = getFilteredTokenList()), scrollToTop()
 
     let isEmptyBecauseOfFilter: boolean = false
     $: accountTokens, (isEmptyBecauseOfFilter = getTokenList().length > 0 && filteredTokenList.length === 0)
 
-    function getFilteredTokenList(): IToken[] {
+    function getFilteredTokenList(): ITokenWithBalance[] {
         const list = getTokenList()
         return list.filter((_nativeToken) => isVisibleToken(_nativeToken))
     }
 
-    function getTokenList(): IToken[] {
+    function getTokenList(): ITokenWithBalance[] {
         const list = []
         for (const networkTokens of Object.values(accountTokens)) {
             if (networkTokens?.baseCoin) {
@@ -39,7 +39,7 @@
         }
     }
 
-    function onTokenAmountTileClick(token: IToken): void {
+    function onTokenAmountTileClick(token: ITokenWithBalance): void {
         openPopup({
             id: PopupId.TokenInformation,
             overflow: true,
diff --git a/packages/shared/src/components/molecules/TransactionAssetSection.svelte b/packages/shared/src/components/molecules/TransactionAssetSection.svelte
index b95af3dbab..abe2845fbd 100644
--- a/packages/shared/src/components/molecules/TransactionAssetSection.svelte
+++ b/packages/shared/src/components/molecules/TransactionAssetSection.svelte
@@ -2,6 +2,7 @@
     import { TokenTransferData } from '@core/wallet'
     import { NftTile, TokenAmountTile, AliasTile } from '@ui'
     import { INft } from '@core/nfts'
+    import { getTokenFromSelectedAccountTokens } from '@core/token/stores'
 
     export let baseCoinTransfer: TokenTransferData | undefined = undefined
     export let tokenTransfer: TokenTransferData | undefined = undefined
@@ -10,20 +11,27 @@
     export let onNftClick: (() => void) | undefined = undefined
 
     $: hasBaseCoinAmount = Number(baseCoinTransfer?.rawAmount) > 0
+
+    $: tokenWithBalance = tokenTransfer?.token
+        ? getTokenFromSelectedAccountTokens(tokenTransfer.token.id, tokenTransfer.token.networkId)
+        : undefined
+    $: baseTokenWithBalance = baseCoinTransfer?.token
+        ? getTokenFromSelectedAccountTokens(baseCoinTransfer.token.id, baseCoinTransfer.token.networkId)
+        : undefined
 </script>
 
 {#if baseCoinTransfer || tokenTransfer || nft || aliasId}
     <asset-section class="w-full flex flex-row gap-2 justify-between overflow-hidden">
-        {#if tokenTransfer?.token}
-            <TokenAmountTile token={tokenTransfer.token} amount={Number(tokenTransfer.rawAmount)} classes="flex-grow" />
+        {#if tokenTransfer?.token && tokenWithBalance}
+            <TokenAmountTile token={tokenWithBalance} amount={Number(tokenTransfer.rawAmount)} classes="flex-grow" />
         {:else if nft}
             <NftTile {nft} fullWidth={!hasBaseCoinAmount} onClick={onNftClick} classes="flex-grow" />
         {:else if aliasId}
             <AliasTile {aliasId} fullWidth={!hasBaseCoinAmount} classes="flex-grow" />
         {/if}
-        {#if baseCoinTransfer?.token && Number(baseCoinTransfer?.rawAmount) > 0}
+        {#if baseCoinTransfer?.token && baseTokenWithBalance && Number(baseCoinTransfer?.rawAmount) > 0}
             <TokenAmountTile
-                token={baseCoinTransfer.token}
+                token={baseTokenWithBalance}
                 amount={Number(baseCoinTransfer.rawAmount)}
                 hideTokenInfo={!!tokenTransfer || !!nft}
             />
diff --git a/packages/shared/src/components/molecules/menu-items/AccountSwitcherMenuItem.svelte b/packages/shared/src/components/molecules/menu-items/AccountSwitcherMenuItem.svelte
index f308964c14..fb731fe5d9 100644
--- a/packages/shared/src/components/molecules/menu-items/AccountSwitcherMenuItem.svelte
+++ b/packages/shared/src/components/molecules/menu-items/AccountSwitcherMenuItem.svelte
@@ -3,7 +3,7 @@
     import { setSelectedAccount } from '@core/account/actions'
     import { selectedAccount } from '@core/account/stores'
     import { formatCurrency } from '@core/i18n'
-    import { getMarketAmountFromTokenValue } from '@core/market/utils'
+    import { getMarketAmountFromTokenValue } from '@core/market/actions'
     import { getBaseToken } from '@core/profile/actions'
     import { activeProfile } from '@core/profile/stores'
     import { formatTokenAmountBestMatch } from '@core/token'
@@ -14,7 +14,7 @@
     export let onClick: () => unknown
     export let id: string = ''
 
-    $: ({ baseCoin } = $selectedAccountTokens[$activeProfile?.network?.id])
+    $: baseCoin = $selectedAccountTokens[$activeProfile?.network?.id]?.baseCoin
 
     function onAccountClick(accountIndex: number): void {
         setSelectedAccount(accountIndex)
@@ -46,7 +46,9 @@
             color="blue-500"
             classes="{account.index === $selectedAccount?.index ? '' : 'opacity-50'} text-right"
         >
-            {formatCurrency(getMarketAmountFromTokenValue(Number(account.balances.baseCoin.total), baseCoin))}
+            {baseCoin
+                ? formatCurrency(getMarketAmountFromTokenValue(Number(account.balances.baseCoin.total), baseCoin))
+                : ''}
         </Text>
     </div>
 </button>
diff --git a/packages/shared/src/components/tiles/ActivityTile.svelte b/packages/shared/src/components/tiles/ActivityTile.svelte
index f3697e48a0..3ad968bc57 100644
--- a/packages/shared/src/components/tiles/ActivityTile.svelte
+++ b/packages/shared/src/components/tiles/ActivityTile.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Activity, ActivityAsyncStatus, ActivityType, InclusionState } from '@core/activity'
     import { time } from '@core/app/stores'
-    import { IPersistedToken, IToken, NotVerifiedStatus } from '@core/token'
+    import { IPersistedToken, ITokenWithBalance, NotVerifiedStatus } from '@core/token'
     import { getPersistedToken, selectedAccountTokens } from '@core/token/stores'
     import {
         AliasActivityTileContent,
@@ -29,7 +29,7 @@
 
     function onTransactionClick(): void {
         if (persistedToken?.verification?.status === NotVerifiedStatus.New) {
-            const token: IToken = {
+            const token: ITokenWithBalance = {
                 ...persistedToken,
                 networkId: activity.sourceNetworkId,
                 balance: {
diff --git a/packages/shared/src/components/tiles/TokenAmountTile.svelte b/packages/shared/src/components/tiles/TokenAmountTile.svelte
index 89d87512e0..ca22414a5f 100644
--- a/packages/shared/src/components/tiles/TokenAmountTile.svelte
+++ b/packages/shared/src/components/tiles/TokenAmountTile.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
     import { formatCurrency } from '@core/i18n/utils'
-    import { getMarketPriceForToken } from '@core/market/utils'
-    import { getMarketAmountFromTokenValue } from '@core/market/utils/getMarketAmountFromTokenValue'
-    import { IToken, formatTokenAmountBestMatch } from '@core/token'
+    import { getMarketAmountFromTokenValue, getMarketPriceForToken } from '@core/market/actions'
+    import { ITokenWithBalance, formatTokenAmountBestMatch } from '@core/token'
     import { truncateString } from '@core/utils'
     import { ClickableTile, FontWeight, Text, TextType, TokenAvatar } from '@ui'
 
-    export let token: IToken
+    export let token: ITokenWithBalance
     export let onClick: (() => unknown) | undefined = undefined
     export let selected = false
     export let classes = ''
diff --git a/packages/shared/src/components/tiles/TokenAvailableBalanceTile.svelte b/packages/shared/src/components/tiles/TokenAvailableBalanceTile.svelte
index d46c02d0a8..7f613cfe93 100644
--- a/packages/shared/src/components/tiles/TokenAvailableBalanceTile.svelte
+++ b/packages/shared/src/components/tiles/TokenAvailableBalanceTile.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { localize } from '@core/i18n'
-    import { IToken, formatTokenAmountBestMatch } from '@core/token'
+    import { ITokenWithBalance, formatTokenAmountBestMatch } from '@core/token'
     import { truncateString } from '@core/utils'
     import { FontWeight, Text, TextType, Tile, TokenAvatar } from '@ui'
 
-    export let token: IToken
+    export let token: ITokenWithBalance
     export let onMaxClick: () => unknown
 
     $: availableBalance = token?.balance?.available ?? 0
diff --git a/packages/shared/src/lib/core/account/stores/selected-account.store.ts b/packages/shared/src/lib/core/account/stores/selected-account.store.ts
index 8a39a679f0..c718419700 100644
--- a/packages/shared/src/lib/core/account/stores/selected-account.store.ts
+++ b/packages/shared/src/lib/core/account/stores/selected-account.store.ts
@@ -1,7 +1,7 @@
+import { activeAccounts, updateActiveAccount } from '@core/profile/stores/active-accounts.store'
 import { derived, get, Readable } from 'svelte/store'
 import type { IAccountState } from '../interfaces'
 import { selectedAccountIndex } from '../stores'
-import { activeAccounts, updateActiveAccount } from '@core/profile/stores/active-accounts.store'
 
 export const selectedAccount: Readable<IAccountState | undefined> = derived(
     [selectedAccountIndex, activeAccounts],
diff --git a/packages/shared/src/lib/core/market/utils/getMarketAmountFromTokenValue.ts b/packages/shared/src/lib/core/market/actions/getMarketAmountFromTokenValue.ts
similarity index 81%
rename from packages/shared/src/lib/core/market/utils/getMarketAmountFromTokenValue.ts
rename to packages/shared/src/lib/core/market/actions/getMarketAmountFromTokenValue.ts
index 38f1ef50ad..d0a7221544 100644
--- a/packages/shared/src/lib/core/market/utils/getMarketAmountFromTokenValue.ts
+++ b/packages/shared/src/lib/core/market/actions/getMarketAmountFromTokenValue.ts
@@ -1,7 +1,7 @@
-import { IToken } from '@core/token/interfaces'
+import { ITokenWithBalance } from '@core/token/interfaces'
 import { getMarketPriceForToken } from './getMarketPriceForToken'
 
-export function getMarketAmountFromTokenValue(amount: number, token: IToken): number | undefined {
+export function getMarketAmountFromTokenValue(amount: number, token: ITokenWithBalance): number | undefined {
     const marketPrice = getMarketPriceForToken(token)
     if (marketPrice === undefined || token?.metadata?.decimals === undefined) {
         return undefined
diff --git a/packages/shared/src/lib/core/market/utils/getMarketPriceForToken.ts b/packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts
similarity index 59%
rename from packages/shared/src/lib/core/market/utils/getMarketPriceForToken.ts
rename to packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts
index 08adb0f429..93fef1c697 100644
--- a/packages/shared/src/lib/core/market/utils/getMarketPriceForToken.ts
+++ b/packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts
@@ -1,8 +1,8 @@
 import { activeProfile } from '@core/profile/stores'
-import { IToken } from '@core/token/interfaces'
+import { ITokenWithBalance } from '@core/token/interfaces'
 import { get } from 'svelte/store'
 
-export function getMarketPriceForToken(token: IToken): number | undefined {
+export function getMarketPriceForToken(token: ITokenWithBalance): number | undefined {
     const marketCurrency = get(activeProfile)?.settings?.marketCurrency
     return token?.marketPrices?.[marketCurrency]
 }
diff --git a/packages/shared/src/lib/core/market/actions/index.ts b/packages/shared/src/lib/core/market/actions/index.ts
index b4ee3e7e9e..0c4d205b24 100644
--- a/packages/shared/src/lib/core/market/actions/index.ts
+++ b/packages/shared/src/lib/core/market/actions/index.ts
@@ -1,3 +1,5 @@
 export * from './getAndUpdateMarketPrices'
+export * from './getMarketAmountFromTokenValue'
+export * from './getMarketPriceForToken'
 export * from './getMarketPrices'
 export * from './market-prices-polling'
diff --git a/packages/shared/src/lib/core/market/index.ts b/packages/shared/src/lib/core/market/index.ts
index 7bc73ed9aa..3bae41465c 100644
--- a/packages/shared/src/lib/core/market/index.ts
+++ b/packages/shared/src/lib/core/market/index.ts
@@ -2,4 +2,3 @@ export * from './constants'
 export * from './enums'
 export * from './interfaces'
 export * from './types'
-export * from './utils'
diff --git a/packages/shared/src/lib/core/market/utils/index.ts b/packages/shared/src/lib/core/market/utils/index.ts
deleted file mode 100644
index 6757e8b051..0000000000
--- a/packages/shared/src/lib/core/market/utils/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './getMarketAmountFromTokenValue'
-export * from './getMarketPriceForToken'
diff --git a/packages/shared/src/lib/core/token/actions/getAccountTokensForSelectedAccount.ts b/packages/shared/src/lib/core/token/actions/getAccountTokensForSelectedAccount.ts
index cfab47409a..5cda0697ff 100644
--- a/packages/shared/src/lib/core/token/actions/getAccountTokensForSelectedAccount.ts
+++ b/packages/shared/src/lib/core/token/actions/getAccountTokensForSelectedAccount.ts
@@ -7,7 +7,7 @@ import { getActiveNetworkId } from '@core/network/actions/getActiveNetworkId'
 import { isStardustNetwork } from '@core/network/utils'
 import { sortTokens } from '@core/token/utils/sortTokens'
 import { BASE_TOKEN_ID } from '../constants'
-import { IToken } from '../interfaces'
+import { ITokenWithBalance } from '../interfaces'
 import { AccountTokens, IAccountTokensPerNetwork } from '../interfaces/account-tokens.interface'
 import { getPersistedToken } from '../stores'
 import { isValidIrc30Token, isValidToken } from '../utils'
@@ -42,7 +42,7 @@ function getAccountAssetForNetwork(
 ): IAccountTokensPerNetwork {
     const shouldCalculateFiatPrice = isStardustNetwork(networkId)
     const persistedBaseCoin = getPersistedToken(BASE_TOKEN_ID)
-    const baseCoin: IToken = {
+    const baseCoin: ITokenWithBalance = {
         ...persistedBaseCoin,
         networkId,
         balance: {
@@ -52,7 +52,7 @@ function getAccountAssetForNetwork(
         ...(shouldCalculateFiatPrice && { marketPrices: marketCoinPrices?.shimmer }),
     }
 
-    const nativeTokens: IToken[] = []
+    const nativeTokens: ITokenWithBalance[] = []
     const tokens = account?.balances?.nativeTokens ?? []
     for (const token of tokens) {
         const persistedAsset = getPersistedToken(token.tokenId)
@@ -81,8 +81,8 @@ function getAccountAssetForChain(accountIndex: number, networkId: NetworkId): IA
         return undefined
     }
 
-    let baseCoin: IToken | undefined
-    const nativeTokens: IToken[] = []
+    let baseCoin: ITokenWithBalance | undefined
+    const nativeTokens: ITokenWithBalance[] = []
     const tokens = Object.entries(balanceForNetworkId) ?? []
 
     for (const [tokenId, balance] of tokens) {
diff --git a/packages/shared/src/lib/core/token/actions/getTokenBalance.ts b/packages/shared/src/lib/core/token/actions/getTokenBalance.ts
new file mode 100644
index 0000000000..ebfa0b8b2c
--- /dev/null
+++ b/packages/shared/src/lib/core/token/actions/getTokenBalance.ts
@@ -0,0 +1,8 @@
+import { NetworkId } from '@core/network'
+import { ITokenBalance } from '..'
+import { getTokenFromSelectedAccountTokens } from '../stores'
+
+export function getTokenBalance(tokenId: string, networkId: NetworkId): ITokenBalance | undefined {
+    const token = getTokenFromSelectedAccountTokens(tokenId, networkId)
+    return token?.balance
+}
diff --git a/packages/shared/src/lib/core/token/actions/index.ts b/packages/shared/src/lib/core/token/actions/index.ts
index 17e3879010..a5dc730770 100644
--- a/packages/shared/src/lib/core/token/actions/index.ts
+++ b/packages/shared/src/lib/core/token/actions/index.ts
@@ -1,5 +1,6 @@
 export * from './getAccountTokensForSelectedAccount'
 export * from './getOrRequestTokenFromPersistedTokens'
+export * from './getTokenBalance'
 export * from './isVisibleToken'
 export * from './refreshAccountTokensForActiveProfile'
 export * from './removeTrackedTokenFromActiveProfile'
diff --git a/packages/shared/src/lib/core/token/interfaces/account-tokens.interface.ts b/packages/shared/src/lib/core/token/interfaces/account-tokens.interface.ts
index bd617de4a9..410ffc4ebe 100644
--- a/packages/shared/src/lib/core/token/interfaces/account-tokens.interface.ts
+++ b/packages/shared/src/lib/core/token/interfaces/account-tokens.interface.ts
@@ -1,11 +1,11 @@
 import { NetworkId } from '@core/network'
-import { IToken } from './token.interface'
+import { ITokenWithBalance } from '..'
 
 export type AccountTokens = {
     [networkId in NetworkId]?: IAccountTokensPerNetwork
 }
 
 export interface IAccountTokensPerNetwork {
-    baseCoin: IToken | undefined
-    nativeTokens: IToken[]
+    baseCoin: ITokenWithBalance | undefined
+    nativeTokens: ITokenWithBalance[]
 }
diff --git a/packages/shared/src/lib/core/token/interfaces/token.interface.ts b/packages/shared/src/lib/core/token/interfaces/token.interface.ts
index 64f0216f2b..ee3eee84ac 100644
--- a/packages/shared/src/lib/core/token/interfaces/token.interface.ts
+++ b/packages/shared/src/lib/core/token/interfaces/token.interface.ts
@@ -1,10 +1,6 @@
-import { MarketPrices } from '@core/market/types'
-import { ITokenBalance } from './token-balance.interface'
 import { IPersistedToken } from './persisted-token.interface'
 import { NetworkId } from '@core/network/types'
 
 export interface IToken extends IPersistedToken {
     networkId: NetworkId
-    balance: ITokenBalance
-    marketPrices?: MarketPrices
 }
diff --git a/packages/shared/src/lib/core/token/stores/selected-account-tokens.store.ts b/packages/shared/src/lib/core/token/stores/selected-account-tokens.store.ts
index b52199c728..ad5ffab8e4 100644
--- a/packages/shared/src/lib/core/token/stores/selected-account-tokens.store.ts
+++ b/packages/shared/src/lib/core/token/stores/selected-account-tokens.store.ts
@@ -1,14 +1,14 @@
 import { selectedAccount } from '@core/account/stores/selected-account.store'
 import { layer2Balances } from '@core/layer-2/stores/layer2-balances.store'
 import { marketCoinPrices } from '@core/market/stores/market-coin-prices.store'
+import { NetworkId } from '@core/network'
 import { activeProfileId } from '@core/profile/stores/active-profile-id.store'
 import { derived, get, Readable, writable, Writable } from 'svelte/store'
 import { getAccountTokensForSelectedAccount } from '../actions/getAccountTokensForSelectedAccount'
 import { DEFAULT_ASSET_FILTER } from '../constants'
-import { IToken, TokenFilter } from '../interfaces'
-import { persistedTokens } from './persisted-tokens.store'
+import { ITokenWithBalance, TokenFilter } from '../interfaces'
 import { AccountTokens, IAccountTokensPerNetwork } from '../interfaces/account-tokens.interface'
-import { NetworkId } from '@core/network'
+import { persistedTokens } from './persisted-tokens.store'
 
 export const tokenFilter: Writable<TokenFilter> = writable(DEFAULT_ASSET_FILTER)
 
@@ -39,7 +39,10 @@ export const visibleSelectedAccountTokens: Readable<AccountTokens> = derived(
     }
 )
 
-export function getTokenFromSelectedAccountTokens(tokenId: string, networkId: NetworkId): IToken | undefined {
+export function getTokenFromSelectedAccountTokens(
+    tokenId: string,
+    networkId: NetworkId
+): ITokenWithBalance | undefined {
     const tokens = get(selectedAccountTokens)[networkId]
     const { baseCoin, nativeTokens } = tokens ?? {}
     if (tokenId === baseCoin?.id) {
diff --git a/packages/shared/src/lib/core/token/utils/sortTokens.ts b/packages/shared/src/lib/core/token/utils/sortTokens.ts
index 5c6372df35..c7bfb7dd76 100644
--- a/packages/shared/src/lib/core/token/utils/sortTokens.ts
+++ b/packages/shared/src/lib/core/token/utils/sortTokens.ts
@@ -1,9 +1,9 @@
 import { AssetOrderOption, OrderOption } from '@core/utils/enums/filters'
 import { get } from 'svelte/store'
-import { IToken } from '../interfaces'
+import { ITokenWithBalance } from '../interfaces'
 import { tokenFilter } from '../stores'
 
-export function sortTokens(assets: IToken[]): IToken[] {
+export function sortTokens(tokens: ITokenWithBalance[]): ITokenWithBalance[] {
     const filter = get(tokenFilter)
     let orderFunction = sortByName
     let isAscending = true
@@ -20,12 +20,12 @@ export function sortTokens(assets: IToken[]): IToken[] {
         isAscending = filter.order.ascDesc === OrderOption.Asc
     }
 
-    return assets?.sort((asset1, asset2) => orderFunction(asset1, asset2, isAscending)) ?? []
+    return tokens?.sort((token1, token2) => orderFunction(token1, token2, isAscending)) ?? []
 }
 
-function sortByName(asset1: IToken, asset2: IToken, asc: boolean): number {
-    const name1 = asset1?.metadata?.name
-    const name2 = asset2?.metadata?.name
+function sortByName(token1: ITokenWithBalance, token2: ITokenWithBalance, asc: boolean): number {
+    const name1 = token1?.metadata?.name
+    const name2 = token2?.metadata?.name
     if (!name1) {
         return asc ? 1 : -1
     } else if (!name2) {
@@ -35,6 +35,6 @@ function sortByName(asset1: IToken, asset2: IToken, asc: boolean): number {
     return name1.toLowerCase() > name2.toLowerCase() ? (asc ? 1 : -1) : asc ? -1 : 1
 }
 
-function sortByAmount(asset1: IToken, asset2: IToken, asc: boolean): number {
-    return asset1.balance.total > asset2.balance.total ? (asc ? 1 : -1) : asc ? -1 : 1
+function sortByAmount(token1: ITokenWithBalance, token2: ITokenWithBalance, asc: boolean): number {
+    return token1.balance.total > token2.balance.total ? (asc ? 1 : -1) : asc ? -1 : 1
 }
diff --git a/packages/shared/src/lib/core/token/utils/validateTokenAmount.ts b/packages/shared/src/lib/core/token/utils/validateTokenAmount.ts
index c74d5f1a87..ed31f8808c 100644
--- a/packages/shared/src/lib/core/token/utils/validateTokenAmount.ts
+++ b/packages/shared/src/lib/core/token/utils/validateTokenAmount.ts
@@ -1,12 +1,12 @@
 import { localize, parseCurrency } from '@core/i18n'
 import { convertToRawAmount } from '@core/token'
 import { TokenStandard } from '@core/token/enums'
-import { IToken } from '@core/token/interfaces'
+import { ITokenWithBalance } from '@core/token/interfaces'
 import Big from 'big.js'
 
 export function validateTokenAmount(
     amount: string,
-    token: IToken,
+    token: ITokenWithBalance,
     unit: string,
     allowZeroOrNull = false
 ): Promise<string> {

From 611ba5e9deb8193d86f390fb052ef054e488bb27 Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Tue, 5 Sep 2023 09:42:20 +0100
Subject: [PATCH 2/2] refactor: display total transaction fees for L1 - L2
 transactions (#546)

* combine sd and gas fee for L1 -> L2 native tokens

* add locale

* fix transaction fee for basecoin

---------

Co-authored-by: Mark Nardi <nardimark7@gmail.com>
---
 .../StardustTransactionDetails.svelte         | 20 ++---
 .../StardustTransactionSummary.svelte         | 77 +++++++++++--------
 packages/shared/src/locales/en.json           |  1 +
 3 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte b/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte
index 662abef8e5..f006ec1f7b 100644
--- a/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte
+++ b/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte
@@ -12,8 +12,7 @@
 
     export let destinationNetworkId: NetworkId
     export let storageDeposit: number
-    export let estimatedGasFee: BigIntLike | undefined = undefined
-    export let maxGasFee: BigIntLike | undefined = undefined
+    export let transactionFee: BigIntLike | undefined = undefined
     export let giftStorageDeposit: boolean
     export let expirationDate: Date
     export let selectedExpirationPeriod: TimePeriod
@@ -23,6 +22,7 @@
     export let disableChangeTimelock: boolean
     export let disableGiftStorageDeposit: boolean
     export let disableAll: boolean
+    export let isToLayer2: boolean = false
 
     $: destinationNetwork = getNameFromNetworkId(destinationNetworkId)
 </script>
@@ -37,7 +37,7 @@
             </div>
         </section>
     {/if}
-    {#if storageDeposit || giftStorageDeposit}
+    {#if storageDeposit || (giftStorageDeposit && !isToLayer2)}
         <section class="key-value-box border-gray-200 dark:border-gray-700">
             <div class="flex flex-row">
                 <Text>{localize('general.storageDeposit')}</Text>
@@ -56,20 +56,12 @@
             />
         </section>
     {/if}
-    {#if estimatedGasFee}
+    {#if transactionFee}
         <section class="key-value-box border-gray-200 dark:border-gray-700">
             <div class="flex flex-row">
-                <Text>{localize('general.estimatedFee')}</Text>
+                <Text>{localize('general.transactionFee')}</Text>
             </div>
-            <Text color="gray-600">{formatTokenAmountBestMatch(Number(estimatedGasFee), getBaseToken())}</Text>
-        </section>
-    {/if}
-    {#if maxGasFee}
-        <section class="key-value-box border-gray-200 dark:border-gray-700">
-            <div class="flex flex-row">
-                <Text>{localize('general.maxFees')}</Text>
-            </div>
-            <Text color="gray-600">{formatTokenAmountBestMatch(Number(maxGasFee), getBaseToken())}</Text>
+            <Text color="gray-600">{formatTokenAmountBestMatch(Number(transactionFee), getBaseToken())}</Text>
         </section>
     {/if}
     {#if selectedExpirationPeriod}
diff --git a/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionSummary.svelte b/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionSummary.svelte
index 0455faf6ee..4f8a6686e8 100644
--- a/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionSummary.svelte
+++ b/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionSummary.svelte
@@ -2,14 +2,12 @@
     import { selectedAccount } from '@core/account/stores'
     import { getStorageDepositFromOutput } from '@core/activity/utils/helper'
     import { localize } from '@core/i18n'
-    import { getGasFeesForLayer1ToLayer2Transaction } from '@core/layer-2/actions'
-    import { getNetwork, isEvmChain } from '@core/network'
+    import { getActiveNetworkId, isEvmChain } from '@core/network'
     import { INft } from '@core/nfts/interfaces'
     import { selectedAccountTokens } from '@core/token/stores'
     import { TimePeriod } from '@core/utils/enums'
     import { Output, SendFlowParameters, TokenTransferData } from '@core/wallet'
     import { SendFlowType, updateSendFlowParameters } from '@core/wallet/stores'
-    import { BigIntLike } from '@ethereumjs/util'
     import { AddInputButton, OptionalInput, TransactionAssetSection } from '@ui'
     import { onMount } from 'svelte'
     import StardustTransactionDetails from './StardustTransactionDetails.svelte'
@@ -28,7 +26,6 @@
         disableToggleGift,
     } = sendFlowParameters
 
-    let baseCoinTransfer: TokenTransferData
     let storageDeposit: number
     let tagInput: OptionalInput
     let metadataInput: OptionalInput
@@ -38,6 +35,7 @@
 
     $: isTransferring = !!$selectedAccount.isTransferring
     $: updateSendFlowOnChange(expirationDate, timelockDate, giftStorageDeposit, tag, metadata)
+    $: storageDeposit = getStorageDepositFromOutput(output)
 
     const isToLayer2 = destinationNetworkId && isEvmChain(destinationNetworkId)
     disableGiftingStorageDeposit(isToLayer2)
@@ -67,17 +65,6 @@
         }
     }
 
-    let estimatedGasFee: BigIntLike | undefined = undefined
-    let maxGasFee: BigIntLike | undefined = undefined
-    async function setGasVariables(sendFlowParameters: SendFlowParameters): Promise<void> {
-        if (isToLayer2) {
-            const gasFees = await getGasFeesForLayer1ToLayer2Transaction(sendFlowParameters)
-            estimatedGasFee = gasFees.estimatedGasFee
-            maxGasFee = gasFees.maxGasFee
-        }
-    }
-    $: void setGasVariables(sendFlowParameters)
-
     function disableGiftingStorageDeposit(isToLayer2: boolean) {
         if (isToLayer2) {
             disableToggleGift = true
@@ -85,24 +72,47 @@
         }
     }
 
-    function setBaseCoinAndStorageDeposit(output: Output, maxGasFee: BigIntLike | undefined): void {
-        storageDeposit = getStorageDepositFromOutput(output)
-        baseCoinTransfer = {
-            token: $selectedAccountTokens?.[getNetwork().getMetadata().id].baseCoin,
-            rawAmount: String(Number(output.amount) - storageDeposit - Number(maxGasFee ?? 0)),
-        }
-    }
-    $: setBaseCoinAndStorageDeposit(output, maxGasFee)
+    $: transactionFee = isToLayer2
+        ? sendFlowParameters.type === SendFlowType.BaseCoinTransfer
+            ? String(Number(output.amount) - Number(sendFlowParameters.baseCoinTransfer.rawAmount))
+            : output.amount
+        : 0
 
-    function getTransactionAsset(sendFlowParameters: SendFlowParameters): {
-        tokenTransfer?: TokenTransferData
+    function getTransactionAssets(
+        output: Output,
+        sendFlowParameters: SendFlowParameters
+    ): {
         nft?: INft
+        tokenTransfer?: TokenTransferData
+        baseCoinTransfer?: TokenTransferData
     } {
-        return {
-            ...(sendFlowParameters.type === SendFlowType.TokenTransfer && {
-                tokenTransfer: sendFlowParameters.tokenTransfer,
-            }),
-            ...(sendFlowParameters.type === SendFlowType.NftTransfer && { nft: sendFlowParameters.nft }),
+        const baseCoin = $selectedAccountTokens?.[getActiveNetworkId()].baseCoin
+
+        if (sendFlowParameters.type === SendFlowType.BaseCoinTransfer) {
+            return {
+                baseCoinTransfer: {
+                    token: baseCoin,
+                    rawAmount: isToLayer2
+                        ? sendFlowParameters.baseCoinTransfer.rawAmount
+                        : String(Number(output.amount) - storageDeposit),
+                },
+            }
+        } else {
+            const baseCoinTransfer = {
+                token: baseCoin,
+                rawAmount: isToLayer2 ? '0' : String(Number(output.amount) - storageDeposit),
+            }
+            if (sendFlowParameters.type === SendFlowType.TokenTransfer) {
+                return {
+                    tokenTransfer: sendFlowParameters.tokenTransfer,
+                    baseCoinTransfer,
+                }
+            } else {
+                return {
+                    nft: sendFlowParameters.nft,
+                    baseCoinTransfer,
+                }
+            }
         }
     }
 
@@ -117,13 +127,13 @@
     }
 
     onMount(() => {
-        setBaseCoinAndStorageDeposit(output, maxGasFee)
+        storageDeposit = getStorageDepositFromOutput(output)
         selectedExpirationPeriod = getInitialExpirationDate(!!expirationDate, !!storageDeposit, giftStorageDeposit)
     })
 </script>
 
 <div class="w-full space-y-4">
-    <TransactionAssetSection {baseCoinTransfer} {...getTransactionAsset(sendFlowParameters)} />
+    <TransactionAssetSection {...getTransactionAssets(output, sendFlowParameters)} />
 
     <StardustTransactionDetails
         bind:expirationDate
@@ -131,9 +141,8 @@
         bind:selectedExpirationPeriod
         bind:selectedTimelockPeriod
         bind:giftStorageDeposit
-        {estimatedGasFee}
-        {maxGasFee}
         storageDeposit={getStorageDepositFromOutput(output)}
+        {transactionFee}
         {destinationNetworkId}
         {disableChangeExpiration}
         disableChangeTimelock={disableChangeExpiration}
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index 367d465b21..21cd2077fc 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -1736,6 +1736,7 @@
         "surplus": "Surplus",
         "storageDeposit": "Storage deposit",
         "gasFee": "Gas fee",
+        "transactionFee": "Transaction fee",
         "giftedStorageDeposit": "Gifted storage deposit",
         "storageDepositPerNft": "Storage deposit per NFT",
         "totalStorageDeposit": "Total storage deposit",