From 6a8f4923629500a985c2fc09231c2e283a8705e6 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Mon, 1 Jul 2024 19:16:13 -0300
Subject: [PATCH] feat: adds MVP exchange screen in buy/sell view

---
 .../desktop/features/buy-sell.features.ts     |   3 +
 .../lib/electron/managers/transak.manager.ts  |  10 +-
 .../views/dashboard/buy-sell/BuySell.svelte   |   6 +
 .../buy-sell/components/TokenTile.svelte      |  50 +++++
 .../components/TransakAccountPanel.svelte     |  49 -----
 .../components/TransakAmountInput.svelte      |  26 +++
 .../components/TransakExchangePanel.svelte    | 198 ++++++++++++++++++
 .../TransakWindowPlaceholder.svelte           |  30 ---
 .../dashboard/buy-sell/components/index.ts    |   5 +-
 .../buy-sell/views/BuySellMainView.svelte     | 145 +------------
 .../components/inputs/FiatAmountInput.svelte  | 130 ++++++++++++
 .../lib/auxiliary/transak/actions/index.ts    |   2 +
 .../actions/updateTransakCryptoCurrencies.ts  |   0
 .../actions/updateTransakFiatCurrencies.ts    |  24 +++
 ...ransak-api-production-base-url.constant.ts |   2 +-
 .../transak-api-staging-base-url.constant.ts  |   2 +-
 .../enums/transak-api-endpoint.enum.ts        |   4 +-
 .../enums/transak-payment-option.enum.ts      |   0
 .../shared/src/lib/auxiliary/transak/index.ts |   4 +
 .../src/lib/auxiliary/transak/stores/index.ts |   2 +
 .../stores/transak-crypto-currencies.store.ts |   3 +
 .../stores/transak-fiat-currencies.store.ts   |  16 ++
 .../transak-window-data.interface.ts          |   5 +-
 .../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 +
 28 files changed, 526 insertions(+), 231 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
 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/auxiliary/transak/actions/index.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/enums/transak-payment-option.enum.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/stores/index.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/stores/transak-crypto-currencies.store.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/stores/transak-fiat-currencies.store.ts
 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..8d2e1c259f 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: false,
+    },
 }
 
 export default buySellFeatures
diff --git a/packages/desktop/lib/electron/managers/transak.manager.ts b/packages/desktop/lib/electron/managers/transak.manager.ts
index 8bd5498e19..fc0373bff5 100644
--- a/packages/desktop/lib/electron/managers/transak.manager.ts
+++ b/packages/desktop/lib/electron/managers/transak.manager.ts
@@ -219,14 +219,14 @@ export default class TransakManager implements ITransakManager {
     }
 
     private getUrl(data: ITransakWindowData): string {
-        const { address, currency, service, amount } = data
+        const { address, currency, service, amount, paymentMethod } = data
         const apiKey = process.env.TRANSAK_API_KEY
 
         if (typeof apiKey !== 'string') {
             throw new Error('Undefined Transak API key')
         }
 
-        if (!Object.values(FiatCurrency).includes(currency as FiatCurrency)) {
+        if (!Object.keys(FiatCurrency).includes(currency)) {
             throw new Error('Invalid Transak currency')
         }
 
@@ -243,9 +243,10 @@ export default class TransakManager implements ITransakManager {
 
         const queryParams: QueryParameters = {
             apiKey,
-            defaultFiatCurrency: currency,
-            defaultFiatAmount: amount,
+            fiatCurrency: currency,
+            fiatAmount: amount,
             walletAddress: address,
+            paymentMethod: paymentMethod,
             productsAvailed: service,
             cryptoCurrencyCode: 'IOTA',
             network: 'miota',
@@ -256,6 +257,7 @@ export default class TransakManager implements ITransakManager {
             disablePaymentMethods: ['apple_pay', 'google_pay'],
             excludeFiatCurrencies: 'USD',
             colorMode,
+            hideExchangeScreen: true,
         }
 
         const urlObject = buildUrl({ base: TRANSAK_WIDGET_URL, query: queryParams })
diff --git a/packages/desktop/views/dashboard/buy-sell/BuySell.svelte b/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
index d3185a10b6..ac7e6c7e5c 100644
--- a/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
@@ -3,10 +3,16 @@
     import features from '@features/features'
     import { BuySellMainView } from './views'
     import { dashboardRoute, DashboardRoute } from '@core/router'
+    import { onMount } from 'svelte'
+    import { updateTransakFiatCurrencies } from '@auxiliary/transak'
 
     $: if (features.analytics.dashboardRoute.buySell.enabled && $dashboardRoute === DashboardRoute.BuySell) {
         Platform.trackEvent('buy-sell-route', { route: $dashboardRoute })
     }
+
+    onMount(() => {
+        void updateTransakFiatCurrencies()
+    })
 </script>
 
 <div class="w-full h-full flex flex-col flex-nowrap p-8 relative flex-1">
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..c414ddf300
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+    import { Button, Icon, IconName, IOption, SelectInput, Tabs, Text } from '@bloomwalletio/ui'
+    import { DISCORD_URL } from '@contexts/settings/constants'
+    import { ISettingsState, settingsState } from '@contexts/settings/stores'
+    import { selectedAccount, selectedAccountIndex } from '@core/account/stores'
+    import { openUrlInBrowser, Platform } from '@core/app'
+    import { localize } from '@core/i18n'
+    import { FiatCurrency } from '@core/market'
+    import { MarketCoinId } from '@core/market/enums'
+    import { marketCoinPrices } from '@core/market/stores'
+    import { isDashboardSideBarExpanded } from '@core/ui'
+    import { drawerState } from '@desktop/auxiliary/drawer/stores'
+    import { DrawerState } from '@desktop/auxiliary/drawer/types'
+    import { IPopupState, IProfileAuthPopupState, popupState, profileAuthPopup } from '@desktop/auxiliary/popup'
+    import { isFeatureEnabled } from '@lib/features/utils'
+    import { Pane } from '@ui'
+    import { onDestroy, tick } from 'svelte'
+    import { TokenTile, TransakAmountInput } from './'
+    import { transakFiatCurrencies } from '@auxiliary/transak'
+
+    const CURRENCY_OPTIONS: IOption[] = Object.keys(FiatCurrency).map((currency) => ({
+        value: currency,
+    }))
+    let selectedCurrencyOption: IOption = CURRENCY_OPTIONS[0]
+
+    let error: boolean = false
+
+    $: fiatValue = String(getDefaultFiatAmount(FiatCurrency[selectedCurrencyOption.value as keyof typeof FiatCurrency]))
+
+    Platform.onEvent('transak-loaded', () => (isTransakLoading = 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]
+
+    $: paymentOptions =
+        $transakFiatCurrencies?.[selectedCurrency as keyof typeof FiatCurrency]?.paymentOptions.map((option) => ({
+            value: option.id,
+            label: option.name,
+        })) ?? []
+    $: selectedPaymentOption = paymentOptions?.[0]
+
+    $: selectedCurrency = selectedCurrencyOption.value
+
+    let isTransakOpen: boolean = false
+    let isTransakLoading: boolean = false
+
+    $: $isDashboardSideBarExpanded, void updateTransakBounds()
+
+    $: if ($selectedAccountIndex !== undefined) {
+        void closeTransak()
+    }
+
+    $: isTransakOpen, void handleOverlayChanges($popupState, $profileAuthPopup, $settingsState, $drawerState)
+
+    async function handleOverlayChanges(
+        state: IPopupState,
+        profilePopupState: IProfileAuthPopupState,
+        settingsState: ISettingsState,
+        drawerState: DrawerState
+    ): Promise<void> {
+        if (state.active || profilePopupState.active || settingsState.open || drawerState?.id) {
+            await Platform.hideTransak()
+        } else {
+            await tick()
+            await Platform.showTransak()
+        }
+    }
+
+    let transakContainer: HTMLDivElement | undefined
+    async function updateTransakBounds(): Promise<void> {
+        if (!transakContainer) {
+            return
+        }
+
+        const rect = transakContainer.getBoundingClientRect()
+        const transakPaneStyles = getComputedStyle(transakContainer?.children[0])
+        const extractDigitsToNumbers = (str: string) => Number(str?.replace(/\D/g, '') ?? 0)
+        const borderTop = extractDigitsToNumbers(transakPaneStyles?.borderTopWidth)
+        const borderBottom = extractDigitsToNumbers(transakPaneStyles?.borderBottomWidth)
+        const borderLeft = extractDigitsToNumbers(transakPaneStyles?.borderLeftWidth)
+        const borderRight = extractDigitsToNumbers(transakPaneStyles?.borderRightWidth)
+
+        await Platform.updateTransakBounds({
+            x: rect.x + borderLeft,
+            y: rect.y + borderTop,
+            width: rect.width - borderLeft - borderRight,
+            height: rect.height - borderTop - borderBottom,
+        })
+    }
+
+    function getDefaultFiatAmount(currency: FiatCurrency): number {
+        const DEFAULT_FIAT_AMOUNT = 100
+        switch (currency) {
+            case FiatCurrency.USD:
+            case FiatCurrency.EUR:
+            case FiatCurrency.GBP:
+                return DEFAULT_FIAT_AMOUNT
+            default: {
+                const conversionRate =
+                    $marketCoinPrices[MarketCoinId.Iota]?.[currency] /
+                    $marketCoinPrices[MarketCoinId.Iota]?.[FiatCurrency.USD]
+                const fiatAmount = DEFAULT_FIAT_AMOUNT * conversionRate
+                const roundedAmount = customRound(fiatAmount)
+                return roundedAmount
+            }
+        }
+    }
+
+    function customRound(number) {
+        const magnitude = Math.pow(10, Math.floor(Math.log10(number)))
+        return magnitude <= 10
+            ? Math.round(number / magnitude) * magnitude
+            : Math.round((number / magnitude) * 10) * (magnitude / 10)
+    }
+
+    export async function resetTransak(): Promise<void> {
+        isTransakLoading = true
+        await Platform.closeTransak()
+        isTransakOpen = false
+        await Platform.openTransak({
+            currency: selectedCurrencyOption.value as keyof typeof FiatCurrency,
+            address: $selectedAccount?.depositAddress ?? '',
+            service: selectedTab.key as 'BUY' | 'SELL',
+            amount: Number(fiatValue),
+            paymentMethod: selectedPaymentOption.value ?? '',
+        })
+        isTransakOpen = true
+        await updateTransakBounds()
+    }
+
+    async function closeTransak(): Promise<void> {
+        await Platform.closeTransak()
+        isTransakOpen = false
+    }
+
+    onDestroy(() => {
+        void Platform.closeTransak()
+        isTransakOpen = false
+        Platform.removeListenersForEvent('reset-transak')
+    })
+</script>
+
+<svelte:window on:resize={updateTransakBounds} />
+
+<div class="w-full h-full" bind:this={transakContainer}>
+    <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}
+            <div
+                class="flex flex-col justify-between items-center w-full h-full gap-8 {isTransakOpen &&
+                !isTransakLoading
+                    ? 'opacity-0 pointer-events-none'
+                    : ''}"
+            >
+                {#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={paymentOptions}
+                            bind:selected={selectedPaymentOption}
+                            hideValue
+                        />
+                    </div>
+                </div>
+                <Button text={selectedTab.value} on:click={resetTransak} />
+            </div>
+        {/if}
+    </Pane>
+</div>
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..8491a9da95 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/index.ts
+++ b/packages/desktop/views/dashboard/buy-sell/components/index.ts
@@ -1,4 +1,5 @@
-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 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..2756af6812 100644
--- a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
@@ -1,146 +1,15 @@
 <script lang="ts">
-    import { ISettingsState, settingsState } from '@contexts/settings/stores'
-    import { selectedAccount, selectedAccountIndex } from '@core/account/stores'
-    import { Platform } from '@core/app'
-    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 { 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'
+    import { TransakConnectionPanel, TransakInfoPanel, TransakExchangePanel } from '../components'
 
-    let isTransakOpen: boolean = false
-    let isTransakLoading: boolean = true
-
-    $: $isDashboardSideBarExpanded, void updateTransakBounds()
-
-    $: if ($selectedAccountIndex !== undefined) {
-        void resetTransak()
-    }
-
-    $: isTransakOpen, void handleOverlayChanges($popupState, $profileAuthPopup, $settingsState, $drawerState)
-
-    async function handleOverlayChanges(
-        state: IPopupState,
-        profilePopupState: IProfileAuthPopupState,
-        settingsState: ISettingsState,
-        drawerState: DrawerState
-    ): Promise<void> {
-        if (state.active || profilePopupState.active || settingsState.open || drawerState?.id) {
-            await Platform.hideTransak()
-        } else {
-            await tick()
-            await Platform.showTransak()
-        }
-    }
-
-    let transakContainer: HTMLDivElement | undefined
-    async function updateTransakBounds(): Promise<void> {
-        if (!transakContainer) {
-            return
-        }
-
-        const rect = transakContainer.getBoundingClientRect()
-        const transakPaneStyles = getComputedStyle(transakContainer?.children[0])
-        const extractDigitsToNumbers = (str: string) => Number(str?.replace(/\D/g, '') ?? 0)
-        const borderTop = extractDigitsToNumbers(transakPaneStyles?.borderTopWidth)
-        const borderBottom = extractDigitsToNumbers(transakPaneStyles?.borderBottomWidth)
-        const borderLeft = extractDigitsToNumbers(transakPaneStyles?.borderLeftWidth)
-        const borderRight = extractDigitsToNumbers(transakPaneStyles?.borderRightWidth)
-
-        await Platform.updateTransakBounds({
-            x: rect.x + borderLeft,
-            y: rect.y + borderTop,
-            width: rect.width - borderLeft - borderRight,
-            height: rect.height - borderTop - borderBottom,
-        })
-    }
-
-    function getDefaultFiatAmount(currency: MarketCurrency): number {
-        const DEFAULT_FIAT_AMOUNT = 1000
-        switch (currency) {
-            case FiatCurrency.USD:
-            case FiatCurrency.EUR:
-            case FiatCurrency.GBP:
-                return DEFAULT_FIAT_AMOUNT
-            default: {
-                const conversionRate =
-                    $marketCoinPrices[MarketCoinId.Iota]?.[currency] /
-                    $marketCoinPrices[MarketCoinId.Iota]?.[FiatCurrency.USD]
-                const fiatAmount = DEFAULT_FIAT_AMOUNT * conversionRate
-                const roundedAmount = customRound(fiatAmount)
-                return roundedAmount
-            }
-        }
-    }
-
-    function customRound(number) {
-        const magnitude = Math.pow(10, Math.floor(Math.log10(number)))
-        return magnitude <= 10
-            ? Math.round(number / magnitude) * magnitude
-            : Math.round((number / magnitude) * 10) * (magnitude / 10)
-    }
-
-    async function resetTransak(): Promise<void> {
-        isTransakLoading = true
-        await Platform.closeTransak()
-        isTransakOpen = false
-        await Platform.openTransak({
-            currency: $activeProfile?.settings.marketCurrency,
-            address: $selectedAccount.depositAddress,
-            service: 'BUY',
-            amount: getDefaultFiatAmount($activeProfile?.settings.marketCurrency ?? FiatCurrency.USD),
-        })
-        isTransakOpen = true
-        await updateTransakBounds()
-    }
-
-    onMount(() => {
-        Platform.onEvent('reset-transak', resetTransak)
-    })
-
-    onDestroy(() => {
-        void Platform.closeTransak()
-        isTransakOpen = false
-        Platform.removeListenersForEvent('reset-transak')
-    })
+    let transakExchangePanel: TransakExchangePanel
 </script>
 
-<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">
-        <TransakConnectionPanel refreshFunction={resetTransak} />
-        <TransakAccountPanel />
-    </div>
-    <div class="transak-panel" bind:this={transakContainer}>
-        <TransakWindowPlaceholder bind:loading={isTransakLoading} />
-    </div>
-    <div class="info-panel">
+    <div class="flex flex-col gap-4 max-w-[20rem] h-full">
+        <TransakConnectionPanel refreshFunction={transakExchangePanel?.resetTransak} />
         <TransakInfoPanel />
     </div>
+    <div class="w-[25rem] shrink-0 h-fit">
+        <TransakExchangePanel bind:this={transakExchangePanel} />
+    </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/auxiliary/transak/actions/index.ts b/packages/shared/src/lib/auxiliary/transak/actions/index.ts
new file mode 100644
index 0000000000..224393753e
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/actions/index.ts
@@ -0,0 +1,2 @@
+export * from './updateTransakCryptoCurrencies'
+export * from './updateTransakFiatCurrencies'
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
new file mode 100644
index 0000000000..bb339bb5e1
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
@@ -0,0 +1,24 @@
+import { TransakApi } from '../apis'
+import { TransakFiatCurrencies, transakFiatCurrencies } from '../stores'
+
+const FILTERED_PAYMENT_OPTIONS = ['apple_pay', 'google_pay']
+
+export async function updateTransakFiatCurrencies(): Promise<void> {
+    const api = new TransakApi()
+    const { response } = (await api.getFiatCurrencies()) ?? {}
+
+    transakFiatCurrencies.set(
+        response?.reduce((acc, val) => {
+            return {
+                ...acc,
+                [val.symbol]: {
+                    paymentOptions: val.paymentOptions
+                        .filter((option) => !FILTERED_PAYMENT_OPTIONS.includes(option.id) && option.isActive)
+                        .map(({ id, name, minAmount, maxAmount }) => {
+                            return { id, name: name ? name : id, minAmount, maxAmount }
+                        }),
+                },
+            }
+        }, {} as TransakFiatCurrencies)
+    )
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-production-base-url.constant.ts b/packages/shared/src/lib/auxiliary/transak/constants/transak-api-production-base-url.constant.ts
index e2b293925e..069f9bc05e 100644
--- a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-production-base-url.constant.ts
+++ b/packages/shared/src/lib/auxiliary/transak/constants/transak-api-production-base-url.constant.ts
@@ -1 +1 @@
-export const TRANSAK_API_PRODUCTION_BASE_URL = 'https://api.transak.com/api/v2'
+export const TRANSAK_API_PRODUCTION_BASE_URL = 'https://api.transak.com'
diff --git a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-staging-base-url.constant.ts b/packages/shared/src/lib/auxiliary/transak/constants/transak-api-staging-base-url.constant.ts
index d60fc85351..aa713b28d1 100644
--- a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-staging-base-url.constant.ts
+++ b/packages/shared/src/lib/auxiliary/transak/constants/transak-api-staging-base-url.constant.ts
@@ -1 +1 @@
-export const TRANSAK_API_STAGING_BASE_URL = 'https://api-stg.transak.com/api/v2'
+export const TRANSAK_API_STAGING_BASE_URL = 'https://api-stg.transak.com'
diff --git a/packages/shared/src/lib/auxiliary/transak/enums/transak-api-endpoint.enum.ts b/packages/shared/src/lib/auxiliary/transak/enums/transak-api-endpoint.enum.ts
index 96e150b901..b571225395 100644
--- a/packages/shared/src/lib/auxiliary/transak/enums/transak-api-endpoint.enum.ts
+++ b/packages/shared/src/lib/auxiliary/transak/enums/transak-api-endpoint.enum.ts
@@ -1,4 +1,4 @@
 export enum TransakApiEndpoint {
-    CryptoCurrencies = 'currencies/crypto-currencies',
-    FiatCurrencies = 'currencies/fiat-currencies',
+    CryptoCurrencies = 'api/v2/currencies/crypto-currencies',
+    FiatCurrencies = 'fiat/public/v1/currencies/fiat-currencies',
 }
diff --git a/packages/shared/src/lib/auxiliary/transak/enums/transak-payment-option.enum.ts b/packages/shared/src/lib/auxiliary/transak/enums/transak-payment-option.enum.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/shared/src/lib/auxiliary/transak/index.ts b/packages/shared/src/lib/auxiliary/transak/index.ts
index 6921285864..812088a792 100644
--- a/packages/shared/src/lib/auxiliary/transak/index.ts
+++ b/packages/shared/src/lib/auxiliary/transak/index.ts
@@ -1,2 +1,6 @@
+export * from './actions'
+export * from './apis'
 export * from './constants'
 export * from './enums'
+export * from './interfaces'
+export * from './stores'
diff --git a/packages/shared/src/lib/auxiliary/transak/stores/index.ts b/packages/shared/src/lib/auxiliary/transak/stores/index.ts
new file mode 100644
index 0000000000..2c21a11252
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/stores/index.ts
@@ -0,0 +1,2 @@
+export * from './transak-crypto-currencies.store'
+export * from './transak-fiat-currencies.store'
diff --git a/packages/shared/src/lib/auxiliary/transak/stores/transak-crypto-currencies.store.ts b/packages/shared/src/lib/auxiliary/transak/stores/transak-crypto-currencies.store.ts
new file mode 100644
index 0000000000..19dfaf7b2f
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/stores/transak-crypto-currencies.store.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store'
+
+export const transakCryptoCurrencies = writable({})
diff --git a/packages/shared/src/lib/auxiliary/transak/stores/transak-fiat-currencies.store.ts b/packages/shared/src/lib/auxiliary/transak/stores/transak-fiat-currencies.store.ts
new file mode 100644
index 0000000000..d612ee8b9e
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/stores/transak-fiat-currencies.store.ts
@@ -0,0 +1,16 @@
+import { FiatCurrency } from '@core/market'
+import { Writable, writable } from 'svelte/store'
+
+export type TransakFiatCurrencies = {
+    [key in keyof typeof FiatCurrency]: {
+        paymentOptions: {
+            id: string
+            name: string
+            minAmount: number
+            maxAmount: number
+            disabled?: boolean
+        }[]
+    }
+}
+
+export const transakFiatCurrencies: Writable<TransakFiatCurrencies | undefined> = writable(undefined)
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..32793943ae 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,8 +1,9 @@
-import { MarketCurrency } from '@core/market/types'
+import { FiatCurrency } from '@core/market/enums'
 
 export interface ITransakWindowData {
-    currency: MarketCurrency
+    currency: keyof typeof FiatCurrency
     address: string
     service: 'BUY' | 'SELL'
     amount: number
+    paymentMethod: string
 }
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 61ba62c4d2..b776380cbc 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -829,6 +829,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"
             }
         }
     },