From 4fd44e03760fabe5aa9101498ee7ace53e522ec5 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Mon, 1 Jul 2024 19:16:13 -0300
Subject: [PATCH] WIP

---
 .../desktop/features/buy-sell.features.ts     |   3 +
 .../auxiliary/popup/enums/popup-id.enum.ts    |   1 +
 .../buy-sell/components/TokenTile.svelte      |  50 +++++++
 .../components/TransakAccountPanel.svelte     |  49 -------
 .../components/TransakAmountInput.svelte      |  26 ++++
 .../components/TransakExchangePanel.svelte    |  74 ++++++++++
 .../components/TransakHistoryPanel.svelte     |   8 ++
 .../TransakWindowPlaceholder.svelte           |  30 ----
 .../dashboard/buy-sell/components/index.ts    |   6 +-
 .../buy-sell/views/BuySellMainView.svelte     |  47 ++-----
 .../components/inputs/FiatAmountInput.svelte  | 130 ++++++++++++++++++
 .../transak-window-data.interface.ts          |   4 +-
 .../market/actions/getMarketPriceForToken.ts  |   6 +-
 .../actions/getTokenValueFromFiatAmount.ts    |  29 ++++
 .../src/lib/core/market/actions/index.ts      |   1 +
 .../interfaces/feature-flag.interface.ts      |   1 +
 packages/shared/src/locales/en.json           |   4 +
 17 files changed, 351 insertions(+), 118 deletions(-)
 create mode 100644 packages/desktop/views/dashboard/buy-sell/components/TokenTile.svelte
 delete mode 100644 packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte
 create mode 100644 packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte
 create mode 100644 packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
 create mode 100644 packages/desktop/views/dashboard/buy-sell/components/TransakHistoryPanel.svelte
 delete mode 100644 packages/desktop/views/dashboard/buy-sell/components/TransakWindowPlaceholder.svelte
 create mode 100644 packages/shared/src/components/inputs/FiatAmountInput.svelte
 create mode 100644 packages/shared/src/lib/core/market/actions/getTokenValueFromFiatAmount.ts

diff --git a/packages/desktop/features/buy-sell.features.ts b/packages/desktop/features/buy-sell.features.ts
index 07735ed62c..de3c65ecb1 100644
--- a/packages/desktop/features/buy-sell.features.ts
+++ b/packages/desktop/features/buy-sell.features.ts
@@ -2,6 +2,9 @@ import { IFeatureFlag } from '@lib/features/interfaces'
 
 const buySellFeatures: IFeatureFlag = {
     enabled: true,
+    sell: {
+        enabled: true
+    }
 }
 
 export default buySellFeatures
diff --git a/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts b/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
index 429921049d..dd8bb4410d 100644
--- a/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
+++ b/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
@@ -39,6 +39,7 @@ export enum PopupId {
     ReceiveAddress = 'receiveAddress',
     RemoveProposal = 'removeProposal',
     Revote = 'revote',
+    SelectToken = 'selectToken',
     SendFlow = 'sendFlow',
     SignTypedData = 'signTypedData',
     SignMessage = 'signMessage',
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TokenTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TokenTile.svelte
new file mode 100644
index 0000000000..ee3336b5a2
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TokenTile.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { formatCurrency } from '@core/i18n/utils'
+    import { getMarketPriceForToken, getTokenValueFromFiatAmount } from '@core/market/actions'
+    import { formatTokenAmount } from '@core/token'
+    import { truncateString } from '@core/utils'
+    import { Tile, Text } from '@bloomwalletio/ui'
+    import { TokenAvatar } from '@ui'
+    import { selectedAccountTokens } from '@core/token/stores'
+    import { SupportedStardustNetworkId } from '@core/network'
+    import { MarketCurrency } from '@core/market'
+
+    export let token = $selectedAccountTokens[SupportedStardustNetworkId.Iota]?.baseCoin
+    export let onClick: (() => unknown) | undefined = undefined
+    export let selected = false
+    export let fiatValue = '0'
+    export let currency: MarketCurrency
+
+    $: marketPrice = token ? getMarketPriceForToken(token, currency) : undefined
+    $: tokenAmount = token && currency ? getTokenValueFromFiatAmount(fiatValue, token, currency) : BigInt(0)
+</script>
+
+{#if token && token.metadata}
+    <Tile {onClick} {selected} surface={1} width="full">
+        <div class="w-full flex flex-row items-center gap-2">
+            <TokenAvatar {token} />
+            <div class="flex flex-col w-full">
+                <div class="flex flex-row w-full justify-between">
+                    <Text>
+                        {token.metadata.name
+                            ? truncateString(token.metadata.name, 13, 0)
+                            : truncateString(token.id, 6, 7)}
+                    </Text>
+                    <Text align="right">
+                        {token.metadata
+                            ? `≈ ${formatTokenAmount(tokenAmount ?? BigInt(0), token.metadata, { round: false })}`
+                            : '-'}
+                    </Text>
+                </div>
+                <div class="flex flex-row w-full justify-between">
+                    <Text fontWeight="medium" textColor="secondary">
+                        {marketPrice ? formatCurrency(marketPrice, currency) : '-'}
+                    </Text>
+                    <Text fontWeight="medium" textColor="secondary" align="right">
+                        {fiatValue !== undefined ? formatCurrency(fiatValue ?? '', currency) : '-'}
+                    </Text>
+                </div>
+            </div>
+        </div>
+    </Tile>
+{/if}
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte
deleted file mode 100644
index e4a16a29cb..0000000000
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-    import { Pane } from '@ui'
-    import { AccountSwitcher, FormattedBalance } from '@components'
-    import { Copyable, Icon, IconName, Text } from '@bloomwalletio/ui'
-    import { selectedAccount, selectedAccountIndex } from '@core/account/stores'
-    import { formatCurrency } from '@core/i18n'
-    import { getFiatValueFromTokenAmount } from '@core/market/actions'
-    import { activeProfile } from '@core/profile/stores'
-    import { formatTokenAmount } from '@core/token'
-    import { selectedAccountTokens } from '@core/token/stores'
-
-    let tokenBalance: string = ''
-    let fiatBalance: string = ''
-
-    function updateBalances(): void {
-        const tokens = $selectedAccountTokens?.[$activeProfile.network.id]
-        const networkBaseCoin = tokens?.baseCoin
-        if (!networkBaseCoin) return
-        tokenBalance = formatTokenAmount(networkBaseCoin.balance.total, networkBaseCoin.metadata)
-        fiatBalance = formatCurrency(getFiatValueFromTokenAmount(networkBaseCoin.balance.total, networkBaseCoin))
-    }
-
-    $: if ($selectedAccountIndex !== undefined) {
-        updateBalances()
-    }
-</script>
-
-<Pane classes="flex flex-col justify-center items-center w-full p-6 gap-4 bg-surface dark:bg-surface-dark shadow-lg">
-    <div class="w-full flex justify-between items-center gap-2">
-        <div class="flex items-center gap-2">
-            <icon-container class="bg-black p-1 rounded-full">
-                <Icon name={IconName.Iota} size="sm" customColor="#ffffff" />
-            </icon-container>
-            <Text type="body2">IOTA</Text>
-        </div>
-        <AccountSwitcher compact placement="bottom-end" />
-    </div>
-    <div class="w-full flex flex-col gap-1 justify-center">
-        <FormattedBalance balanceText={tokenBalance} textType="h4" />
-        <Text type="h6" textColor="secondary">{fiatBalance}</Text>
-    </div>
-    <Copyable value={$selectedAccount?.depositAddress}>
-        <div class="bg-surface-2 dark:bg-surface-2-dark rounded-xl py-2 px-3">
-            <Text type="pre-sm" textColor="secondary" class="break-all whitespace-normal">
-                {$selectedAccount?.depositAddress}
-            </Text>
-        </div>
-    </Copyable>
-</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte
new file mode 100644
index 0000000000..61e8ab3c1d
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { activeProfile } from '@core/profile/stores'
+    import { AmountInput } from '@ui'
+    import { Text } from '@bloomwalletio/ui'
+
+    export let currency = $activeProfile?.settings?.marketCurrency?.toUpperCase()
+    export let value: string
+
+    let inputLength: number
+    const fontSize: 'text-32' | 'text-48' | 'text-64' = 'text-64'
+
+    $: value, (inputLength = getInputLength())
+    $: maxWidth = `${(inputLength * Number(/\d+/.exec(fontSize)?.[0] ?? 0) * 2) / 3}px`
+
+    function getInputLength(): number {
+        const length = value?.length || 1
+        const isDecimal = value?.includes('.') || value?.includes(',')
+
+        return length - (isDecimal ? 0.5 : 0)
+    }
+</script>
+
+<div class="flex justify-center items-end gap-1">
+    <AmountInput bind:value maxDecimals={2} {fontSize} {maxWidth} />
+    <Text class="pb-5">{currency}</Text>
+</div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
new file mode 100644
index 0000000000..693dfc12e7
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { Platform, openUrlInBrowser } from '@core/app'
+    import { Pane } from '@ui'
+    import { Button, Icon, IconName, IOption, SelectInput, Tabs, Text } from '@bloomwalletio/ui'
+    import { localize } from '@core/i18n'
+    import { DISCORD_URL } from '@contexts/settings/constants'
+    import { isFeatureEnabled } from '@lib/features/utils'
+    import { TokenTile, TransakAmountInput } from './'
+    import { FiatCurrency } from '@core/market'
+
+    export let loading: boolean = false
+    let error: boolean = false
+    let fiatValue: string = ''
+
+    Platform.onEvent('transak-loaded', () => (loading = false))
+    Platform.onEvent('transak-not-loaded', () => (error = true))
+
+    function onButtonClick(): void {
+        openUrlInBrowser(DISCORD_URL)
+    }
+
+    const TABS = [
+        { key: 'buy', value: localize('views.buySell.tabs.buy') },
+        { key: 'sell', value: localize('views.buySell.tabs.sell') },
+    ]
+
+    let selectedTab = TABS[0]
+
+    const PAYMENT_METHOD_OPTIONS: IOption[] = [
+        { value: 'credit_card', label: 'Credit Card' },
+        { value: 'bank_transfer', label: 'Bank Transfer' },
+    ]
+
+    const CURRENCY_OPTIONS: IOption[] = Object.keys(FiatCurrency).map((currency) => ({
+        value: currency,
+    }))
+    let selectedCurrencyOption: IOption = CURRENCY_OPTIONS[0]
+    $: selectedCurrency = selectedCurrencyOption.value
+</script>
+
+<Pane classes="px-6 pb-6 pt-4 bg-surface dark:bg-surface-dark shadow-lg w-full h-full">
+    {#if error}
+        <div class="flex flex-col justify-center items-center w-full h-full gap-4">
+            <Icon name={IconName.ArrowDownUp} size="lg" textColor="brand" />
+            <Text type="body1">{localize('views.buySell.error.title')}</Text>
+            <Text textColor="secondary" align="center">{localize('views.buySell.error.description')}</Text>
+            <Button on:click={onButtonClick} text={localize('actions.visitDiscord')} />
+        </div>
+    {:else if loading}
+        <div class="flex flex-col justify-between items-center w-full h-full gap-8">
+            {#if isFeatureEnabled('buySell.sell')}
+                <div class="w-full">
+                    <Tabs bind:selectedTab tabs={TABS} />
+                </div>
+            {/if}
+            <div class="flex flex-col items-center gap-4 w-full">
+                <div class="w-3/4">
+                    <SelectInput label="Currency" options={CURRENCY_OPTIONS} bind:selected={selectedCurrencyOption} />
+                </div>
+                <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} />
+                <TokenTile {fiatValue} currency={FiatCurrency[selectedCurrency]} />
+                <div class="w-full">
+                    <SelectInput
+                        label="Payment method"
+                        options={PAYMENT_METHOD_OPTIONS}
+                        selected={PAYMENT_METHOD_OPTIONS[0]}
+                        hideValue
+                    />
+                </div>
+            </div>
+            <Button text={selectedTab.value} />
+        </div>
+    {/if}
+</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakHistoryPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakHistoryPanel.svelte
new file mode 100644
index 0000000000..5c8eb59826
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakHistoryPanel.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { Pill } from '@bloomwalletio/ui'
+    import { Pane } from '@ui'
+</script>
+
+<Pane classes="flex flex-col justify-start items-start w-full h-full p-6 gap-4 bg-surface dark:bg-surface-dark shadow-lg">
+    <Pill color="brand">Order history</Pill>
+</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakWindowPlaceholder.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakWindowPlaceholder.svelte
deleted file mode 100644
index 1abbf927dd..0000000000
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakWindowPlaceholder.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-    import { Platform, openUrlInBrowser } from '@core/app'
-    import { Pane } from '@ui'
-    import { Button, Icon, IconName, Spinner, Text } from '@bloomwalletio/ui'
-    import { localize } from '@core/i18n'
-    import { DISCORD_URL } from '@contexts/settings/constants'
-
-    export let loading: boolean = true
-    let error: boolean = false
-
-    Platform.onEvent('transak-loaded', () => (loading = false))
-    Platform.onEvent('transak-not-loaded', () => (error = true))
-
-    function onButtonClick(): void {
-        openUrlInBrowser(DISCORD_URL)
-    }
-</script>
-
-<Pane
-    classes="flex flex-col justify-center items-center w-full h-full px-6 pb-6 pt-4 gap-4 bg-surface dark:bg-surface-dark shadow-lg"
->
-    {#if error}
-        <Icon name={IconName.ArrowDownUp} size="lg" textColor="brand" />
-        <Text type="body1">{localize('views.buySell.error.title')}</Text>
-        <Text textColor="secondary" align="center">{localize('views.buySell.error.description')}</Text>
-        <Button on:click={onButtonClick} text={localize('actions.visitDiscord')} />
-    {:else if loading}
-        <Spinner size="lg" textColor="info" />
-    {/if}
-</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/index.ts b/packages/desktop/views/dashboard/buy-sell/components/index.ts
index de70d28d33..601af4b8b1 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/index.ts
+++ b/packages/desktop/views/dashboard/buy-sell/components/index.ts
@@ -1,4 +1,6 @@
-export { default as TransakAccountPanel } from './TransakAccountPanel.svelte'
+export { default as TokenTile } from './TokenTile.svelte'
+export { default as TransakAmountInput } from './TransakAmountInput.svelte'
 export { default as TransakConnectionPanel } from './TransakConnectionPanel.svelte'
+export { default as TransakHistoryPanel } from './TransakHistoryPanel.svelte'
+export { default as TransakExchangePanel } from './TransakExchangePanel.svelte'
 export { default as TransakInfoPanel } from './TransakInfoPanel.svelte'
-export { default as TransakWindowPlaceholder } from './TransakWindowPlaceholder.svelte'
diff --git a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
index b86b78b1ba..7d52b141e6 100644
--- a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
@@ -5,21 +5,15 @@
     import { activeProfile } from '@core/profile/stores'
     import { IPopupState, IProfileAuthPopupState, popupState, profileAuthPopup } from '@desktop/auxiliary/popup'
     import { onDestroy, onMount, tick } from 'svelte'
-    import {
-        TransakAccountPanel,
-        TransakConnectionPanel,
-        TransakInfoPanel,
-        TransakWindowPlaceholder,
-    } from '../components'
+    import { TransakConnectionPanel, TransakHistoryPanel, TransakExchangePanel, TransakInfoPanel } from '../components'
     import { isDashboardSideBarExpanded } from '@core/ui'
     import { FiatCurrency, MarketCoinId } from '@core/market/enums'
-    import { MarketCurrency } from '@core/market/types'
     import { marketCoinPrices } from '@core/market/stores'
     import { DrawerState } from '@desktop/auxiliary/drawer/types'
     import { drawerState } from '@desktop/auxiliary/drawer/stores'
 
     let isTransakOpen: boolean = false
-    let isTransakLoading: boolean = true
+    let isTransakLoading: boolean = false
 
     $: $isDashboardSideBarExpanded, void updateTransakBounds()
 
@@ -65,7 +59,7 @@
         })
     }
 
-    function getDefaultFiatAmount(currency: MarketCurrency): number {
+    function getDefaultFiatAmount(currency: FiatCurrency): number {
         const DEFAULT_FIAT_AMOUNT = 1000
         switch (currency) {
             case FiatCurrency.USD:
@@ -95,10 +89,12 @@
         await Platform.closeTransak()
         isTransakOpen = false
         await Platform.openTransak({
-            currency: $activeProfile?.settings.marketCurrency,
-            address: $selectedAccount.depositAddress,
+            currency: Object.values(FiatCurrency).includes($activeProfile?.settings.marketCurrency as FiatCurrency)
+                ? $activeProfile?.settings.marketCurrency
+                : FiatCurrency.USD,
+            address: $selectedAccount?.depositAddress ?? '',
             service: 'BUY',
-            amount: getDefaultFiatAmount($activeProfile?.settings.marketCurrency ?? FiatCurrency.USD),
+            amount: getDefaultFiatAmount(($activeProfile?.settings.marketCurrency as FiatCurrency) ?? FiatCurrency.USD),
         })
         isTransakOpen = true
         await updateTransakBounds()
@@ -118,29 +114,14 @@
 <svelte:window on:resize={updateTransakBounds} />
 
 <div class="flex justify-center gap-4 h-full w-full">
-    <div class="account-panel flex flex-col gap-4">
+    <div class="flex flex-col gap-4 max-w-[20rem] h-full">
         <TransakConnectionPanel refreshFunction={resetTransak} />
-        <TransakAccountPanel />
+        <TransakInfoPanel />
     </div>
-    <div class="transak-panel" bind:this={transakContainer}>
-        <TransakWindowPlaceholder bind:loading={isTransakLoading} />
+    <div class="w-[25rem] shrink-0 h-fit" bind:this={transakContainer}>
+        <TransakExchangePanel bind:loading={isTransakLoading} />
     </div>
-    <div class="info-panel">
-        <TransakInfoPanel />
+    <div class="flex-1 max-w-[20rem] h-full">
+        <TransakHistoryPanel />
     </div>
 </div>
-
-<style lang="postcss">
-    .transak-panel {
-        @apply flex-1 min-w-[360px] max-w-[480px] max-h-[786px];
-    }
-
-    .account-panel,
-    .info-panel {
-        @apply max-w-[312px];
-    }
-
-    .account-panel {
-        @apply shrink-0 w-[312px];
-    }
-</style>
diff --git a/packages/shared/src/components/inputs/FiatAmountInput.svelte b/packages/shared/src/components/inputs/FiatAmountInput.svelte
new file mode 100644
index 0000000000..19d225765f
--- /dev/null
+++ b/packages/shared/src/components/inputs/FiatAmountInput.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+    import { formatCurrency, getDecimalSeparator, localize } from '@core/i18n'
+    import { getFiatValueFromTokenAmount } from '@core/market/actions'
+    import { activeProfile } from '@core/profile/stores'
+    import {
+        ITokenWithBalance,
+        convertToRawAmount,
+        formatTokenAmount,
+        getMaxDecimalsFromTokenMetadata,
+        validateTokenAmount,
+    } from '@core/token'
+    import { visibleSelectedAccountTokens } from '@core/token/stores'
+    import { AmountInput } from '@ui'
+    import { Error as ErrorComponent, Text } from '@bloomwalletio/ui'
+
+    export let token: ITokenWithBalance | undefined =
+        $visibleSelectedAccountTokens?.[$activeProfile?.network?.id]?.baseCoin
+    export let rawAmount: bigint | undefined = undefined
+    export let unit: string | undefined = undefined
+    export let availableBalance: bigint
+    export let inputtedAmount: string | undefined =
+        rawAmount && token?.metadata
+            ? formatTokenAmount(rawAmount, token.metadata, { withUnit: false, round: false })
+            : undefined
+
+    type InputFontSize = 'text-32' | 'text-48' | 'text-64'
+
+    let inputElement: HTMLInputElement | undefined
+    let error: string | undefined
+    let inputLength = 0
+    let fontSize: InputFontSize
+    let maxLength = 0
+
+    $: inputtedAmount,
+        (error = ''),
+        (inputLength = getInputLength()),
+        (fontSize = getFontSizeForInputLength()),
+        (maxLength = getMaxAmountOfDigits())
+    $: allowedDecimals = token?.metadata && unit ? getMaxDecimalsFromTokenMetadata(token.metadata, unit) : 0
+    $: rawAmount =
+        inputtedAmount && token?.metadata ? convertToRawAmount(inputtedAmount, token.metadata, unit) : BigInt(0)
+    $: fiatAmount = token ? getFiatValueFromTokenAmount(rawAmount, token) : undefined
+    $: maxWidth = `${(inputLength * Number(/\d+/.exec(fontSize)?.[0] ?? 0) * 2) / 3}px`
+
+    function getInputLength(): number {
+        const length = inputtedAmount?.length || 1
+        const isDecimal = inputtedAmount?.includes('.') || inputtedAmount?.includes(',')
+
+        return length - (isDecimal ? 0.5 : 0)
+    }
+
+    function getMaxAmountOfDigits(): number {
+        const metadata = token?.metadata
+        if (!metadata) {
+            return 32
+        }
+
+        const decimalSeparator = getDecimalSeparator()
+
+        const decimalPlacesAmount = inputtedAmount?.includes(decimalSeparator)
+            ? inputtedAmount.split(decimalSeparator)[1].length || 1
+            : 0
+        const allowedDecimalAmount = Math.min(decimalPlacesAmount, metadata.decimals)
+
+        const integerLengthOfBalance =
+            formatTokenAmount(availableBalance, metadata, { withUnit: false, round: false }).split(
+                decimalSeparator
+            )?.[0]?.length ?? 0
+
+        return (
+            allowedDecimalAmount +
+            integerLengthOfBalance +
+            (metadata.decimals ? 1 : 0) +
+            (inputtedAmount?.includes(decimalSeparator) ? 1 : 0)
+        )
+    }
+
+    function getFontSizeForInputLength(): InputFontSize {
+        if (inputLength < 10) {
+            return 'text-64'
+        } else if (inputLength < 14) {
+            return 'text-48'
+        } else {
+            return 'text-32'
+        }
+    }
+
+    export async function validate(allowZeroOrNull = false): Promise<void> {
+        if (inputtedAmount === undefined || token === undefined || unit === undefined) {
+            throw new Error(localize('error.send.amountInvalidFormat'))
+        }
+        try {
+            rawAmount = await validateTokenAmount(inputtedAmount, token, unit, allowZeroOrNull)
+        } catch (err) {
+            error = err as string
+            throw new Error(error)
+        }
+    }
+</script>
+
+<token-amount-input class="flex flex-col items-center w-full">
+    <div class="w-full flex flex-col items-center space-y-1">
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div
+            on:click={() => inputElement?.focus()}
+            class="flex flex-row justify-center items-end w-full
+                gap-0.5 cursor-text rounded-lg"
+        >
+            <AmountInput
+                bind:inputElement
+                bind:value={inputtedAmount}
+                maxDecimals={allowedDecimals}
+                maxlength={maxLength}
+                {fontSize}
+                {maxWidth}
+                autofocus
+            />
+            <Text class={inputLength < 14 ? 'py-4' : 'py-2'}>
+                {unit}
+            </Text>
+        </div>
+        {#if error}
+            <ErrorComponent {error} />
+        {/if}
+    </div>
+    <Text textColor="secondary">
+        {formatCurrency(fiatAmount) || '--'}
+    </Text>
+</token-amount-input>
diff --git a/packages/shared/src/lib/core/app/interfaces/transak-window-data.interface.ts b/packages/shared/src/lib/core/app/interfaces/transak-window-data.interface.ts
index 858cf83e7d..99469ab0ae 100644
--- a/packages/shared/src/lib/core/app/interfaces/transak-window-data.interface.ts
+++ b/packages/shared/src/lib/core/app/interfaces/transak-window-data.interface.ts
@@ -1,7 +1,7 @@
-import { MarketCurrency } from '@core/market/types'
+import { FiatCurrency } from '@core/market/enums'
 
 export interface ITransakWindowData {
-    currency: MarketCurrency
+    currency: FiatCurrency
     address: string
     service: 'BUY' | 'SELL'
     amount: number
diff --git a/packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts b/packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts
index 7266ed7d43..242c4d8816 100644
--- a/packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts
+++ b/packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts
@@ -2,8 +2,10 @@ import { activeProfile } from '@core/profile/stores'
 import { ITokenWithBalance } from '@core/token/interfaces'
 import { get } from 'svelte/store'
 
-export function getMarketPriceForToken(token: ITokenWithBalance): string | undefined {
-    const marketCurrency = get(activeProfile)?.settings?.marketCurrency
+export function getMarketPriceForToken(
+    token: ITokenWithBalance,
+    marketCurrency = get(activeProfile)?.settings?.marketCurrency
+): string | undefined {
     const marketPrice = token?.marketPrices?.[marketCurrency]
     return marketPrice ? String(marketPrice) : undefined
 }
diff --git a/packages/shared/src/lib/core/market/actions/getTokenValueFromFiatAmount.ts b/packages/shared/src/lib/core/market/actions/getTokenValueFromFiatAmount.ts
new file mode 100644
index 0000000000..b4b84aa6d5
--- /dev/null
+++ b/packages/shared/src/lib/core/market/actions/getTokenValueFromFiatAmount.ts
@@ -0,0 +1,29 @@
+import { ITokenWithBalance } from '@core/token/interfaces'
+import { getMarketPriceForToken } from './getMarketPriceForToken'
+import { MarketCurrency } from '../types'
+
+export function getTokenValueFromFiatAmount(
+    fiatValue: string | undefined,
+    token: ITokenWithBalance,
+    marketCurrency?: MarketCurrency
+): bigint | undefined {
+    if (fiatValue === undefined) return undefined
+
+    const marketPrice = getMarketPriceForToken(token, marketCurrency)
+    if (marketPrice === undefined) return undefined
+
+    try {
+        const fiatValueNumber = parseFloat(fiatValue)
+        if (isNaN(fiatValueNumber)) return undefined
+
+        const tokenDecimals = token?.metadata?.decimals || 0
+        const marketPriceNumber = parseFloat(marketPrice)
+        if (isNaN(marketPriceNumber)) return undefined
+
+        // Calculate the token amount: fiatValue / marketPrice * 10^tokenDecimals
+        const tokenAmount = (fiatValueNumber / marketPriceNumber) * Math.pow(10, tokenDecimals)
+        return BigInt(Math.floor(tokenAmount))
+    } catch {
+        return undefined
+    }
+}
diff --git a/packages/shared/src/lib/core/market/actions/index.ts b/packages/shared/src/lib/core/market/actions/index.ts
index d58adb887c..aa269eba07 100644
--- a/packages/shared/src/lib/core/market/actions/index.ts
+++ b/packages/shared/src/lib/core/market/actions/index.ts
@@ -2,4 +2,5 @@ export * from './getAndUpdateMarketPrices'
 export * from './getAndUpdateTokensMetadataFromCoinGecko'
 export * from './getFiatValueFromTokenAmount'
 export * from './getMarketPriceForToken'
+export * from './getTokenValueFromFiatAmount'
 export * from './market-prices-polling'
diff --git a/packages/shared/src/lib/features/interfaces/feature-flag.interface.ts b/packages/shared/src/lib/features/interfaces/feature-flag.interface.ts
index b09ce73231..b0d6a50e77 100644
--- a/packages/shared/src/lib/features/interfaces/feature-flag.interface.ts
+++ b/packages/shared/src/lib/features/interfaces/feature-flag.interface.ts
@@ -1,4 +1,5 @@
 export interface IFeatureFlag {
     enabled: boolean
     hidden?: boolean
+    sell?: IFeatureFlag
 }
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index 3ff2eed0bd..06718280ad 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -822,6 +822,10 @@
             "error": {
                 "title": "Transak could not be loaded",
                 "description": "Please restart the app, if the issue persists please ask for support in our Discord server"
+            },
+            "tabs": {
+                "buy": "Buy tokens",
+                "sell": "Sell tokens"
             }
         }
     },