From 055483ca86ebf14291158f4df189dffa5178a98a Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Mon, 1 Jul 2024 19:16:13 -0300
Subject: [PATCH 01/14] 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"
             }
         }
     },

From dbe60beb53eb4fea85c31376d7db627866cafbac Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Thu, 11 Jul 2024 19:00:28 -0300
Subject: [PATCH 02/14] feat: adds multichain support in Buy/Sell view (#2725)

* feat: adds multichain support in BuySell view

* refactor: use network id on transak cryptocurrency

Co-authored-by: Jean Ribeiro <contact@jeanribeiro.dev>

* use id in token popup filter

* enable buy sell on all profiles

* add network into transak crypto currencies

* dynamically pull in transak cryptos based of profile networks

* enhancment: sort transak cryptos

---------

Co-authored-by: Nicole O'Brien <nicole@bloomwallet.io>
---
 .../desktop/components/popup/Popup.svelte     |   2 +
 .../popups/TransakSelectTokenPopup.svelte     | 106 ++++++++++++++++++
 .../auxiliary/popup/enums/popup-id.enum.ts    |   1 +
 .../lib/electron/managers/transak.manager.ts  |   6 +-
 .../views/dashboard/buy-sell/BuySell.svelte   |   3 +-
 .../buy-sell/components/TokenTile.svelte      |  50 ---------
 .../TransakCryptoCurrencyAvatar.svelte        |  41 +++++++
 .../TransakCryptoCurrencyTile.svelte          |  24 ++++
 .../components/TransakExchangePanel.svelte    |  30 ++++-
 .../dashboard/buy-sell/components/index.ts    |   2 +-
 .../components/DashboardSidebar.svelte        |   8 +-
 .../actions/updateTransakCryptoCurrencies.ts  |  90 +++++++++++++++
 .../lib/auxiliary/transak/apis/transak.api.ts |  28 ++++-
 ...pi-crypto-currencies-response.interface.ts |   2 +-
 .../src/lib/auxiliary/transak/stores/index.ts |   1 +
 ...selected-exchange-crypto-currency.store.ts |   4 +
 .../stores/transak-crypto-currencies.store.ts |  13 ++-
 .../transak-window-data.interface.ts          |   2 +
 packages/shared/src/locales/en.json           |   2 +-
 19 files changed, 341 insertions(+), 74 deletions(-)
 create mode 100644 packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte
 delete mode 100644 packages/desktop/views/dashboard/buy-sell/components/TokenTile.svelte
 create mode 100644 packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte
 create mode 100644 packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
 create mode 100644 packages/shared/src/lib/auxiliary/transak/stores/selected-exchange-crypto-currency.store.ts

diff --git a/packages/desktop/components/popup/Popup.svelte b/packages/desktop/components/popup/Popup.svelte
index 9d54771aba..9f82ac46fc 100644
--- a/packages/desktop/components/popup/Popup.svelte
+++ b/packages/desktop/components/popup/Popup.svelte
@@ -64,6 +64,7 @@
     import SyncAccountsPopup from './popups/SyncAccountsPopup.svelte'
     import TestDeepLinkFormPopup from './popups/TestDeepLinkFormPopup.svelte'
     import TokenInformationPopup from './popups/TokenInformationPopup.svelte'
+    import TransakSelectTokenPopup from './popups/TransakSelectTokenPopup.svelte'
     import VoteForProposal from './popups/VoteForProposalPopup.svelte'
     import VotingPowerToZeroPopup from './popups/VotingPowerToZeroPopup.svelte'
     import { localize } from '@core/i18n'
@@ -146,6 +147,7 @@
         [PopupId.SyncAccounts]: SyncAccountsPopup,
         [PopupId.TestDeepLinkForm]: TestDeepLinkFormPopup,
         [PopupId.TokenInformation]: TokenInformationPopup,
+        [PopupId.TransakSelectToken]: TransakSelectTokenPopup,
         [PopupId.VoteForProposal]: VoteForProposal,
         [PopupId.VotingPowerToZero]: VotingPowerToZeroPopup,
     }
diff --git a/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte b/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte
new file mode 100644
index 0000000000..c9f575bb54
--- /dev/null
+++ b/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+    import { selectedExchangeCryptoCurrency, transakCryptoCurrencies, TransakCryptoCurrency } from '@auxiliary/transak'
+    import { IOption, SelectInput } from '@bloomwalletio/ui'
+    import { PopupTemplate } from '@components'
+    import { handleError } from '@core/error/handlers'
+    import { localize } from '@core/i18n'
+    import { networks } from '@core/network'
+    import { closePopup } from '@desktop/auxiliary/popup'
+    import { SearchInput } from '@ui'
+    import { TransakCryptoCurrencyTile } from '@views/dashboard/buy-sell/components'
+
+    let searchValue: string = ''
+
+    const options = [
+        { value: 'all', label: localize('popups.transaction.allNetworks') },
+        ...($networks?.reduce((acc, network) => {
+            if (!acc.find((option) => option.value === network.id)) {
+                acc.push({
+                    value: network.id,
+                    label: network.name,
+                })
+            }
+            return acc
+        }, [] as IOption[]) ?? []),
+    ]
+    let selectedOption = options[0]
+
+    let filteredCryptoCurrencies = $transakCryptoCurrencies
+    function setFilteredfilteredCryptoCurrencies(): void {
+        if (selectedOption.value === 'all') {
+            filteredCryptoCurrencies = $transakCryptoCurrencies?.filter((cryptoCurrency) => {
+                const _searchValue = searchValue.toLowerCase()
+                return (
+                    cryptoCurrency.name.toLowerCase().includes(_searchValue) ||
+                    cryptoCurrency.symbol.toLowerCase().includes(_searchValue)
+                )
+            })
+        } else {
+            filteredCryptoCurrencies = $transakCryptoCurrencies?.filter((cryptoCurrency) => {
+                // TODO: map key to transak network name or compare chain id if possible?
+                const isInNetwork = cryptoCurrency.network.id === selectedOption.value
+
+                const _searchValue = searchValue.toLowerCase()
+                const isSearched =
+                    cryptoCurrency.name.toLowerCase().includes(_searchValue) ||
+                    cryptoCurrency.symbol.toLowerCase().includes(_searchValue)
+
+                return isInNetwork && isSearched
+            })
+        }
+    }
+    $: $transakCryptoCurrencies, searchValue, selectedOption, setFilteredfilteredCryptoCurrencies()
+
+    function onCryptoCurrencyClick(cryptoCurrency: TransakCryptoCurrency): void {
+        try {
+            if (cryptoCurrency === $selectedExchangeCryptoCurrency) {
+                onContinueClick()
+            } else {
+                $selectedExchangeCryptoCurrency = cryptoCurrency
+            }
+        } catch (err) {
+            handleError(err)
+        }
+    }
+
+    function onCancelClick(): void {
+        closePopup()
+    }
+
+    function onContinueClick(): void {
+        closePopup()
+    }
+</script>
+
+<PopupTemplate
+    title={localize('popups.transaction.selectToken')}
+    backButton={{ text: localize('actions.cancel'), onClick: onCancelClick }}
+    continueButton={{
+        text: localize('actions.continue'),
+        onClick: onContinueClick,
+        disabled: !$selectedExchangeCryptoCurrency,
+    }}
+>
+    <div class="flex-1 h-0 flex flex-col gap-4">
+        <div class="flex-none flex flex-col gap-4">
+            {#if $networks.length > 1}
+                <SelectInput bind:selected={selectedOption} {options} hideValue />
+            {/if}
+            <SearchInput bind:value={searchValue} />
+        </div>
+        <div class="-mr-3 overflow-y-scroll">
+            <token-list class="flex flex-col p-0.5 pr-1.5 gap-2">
+                {#each filteredCryptoCurrencies ?? [] as cryptoCurrency}
+                    {@const selected =
+                        $selectedExchangeCryptoCurrency?.name === cryptoCurrency.name &&
+                        $selectedExchangeCryptoCurrency?.network.id === cryptoCurrency?.network.id}
+                    <TransakCryptoCurrencyTile
+                        {cryptoCurrency}
+                        onClick={() => onCryptoCurrencyClick(cryptoCurrency)}
+                        {selected}
+                    />
+                {/each}
+            </token-list>
+        </div>
+    </div>
+</PopupTemplate>
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..53c9ed9b22 100644
--- a/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
+++ b/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
@@ -48,6 +48,7 @@ export enum PopupId {
     SyncAccounts = 'syncAccounts',
     TestDeepLinkForm = 'testDeepLinkForm',
     TokenInformation = 'tokenInformation',
+    TransakSelectToken = 'transakSelectToken',
     VoteForProposal = 'voteForProposal',
     VotingPowerToZero = 'votingPowerToZero',
 }
diff --git a/packages/desktop/lib/electron/managers/transak.manager.ts b/packages/desktop/lib/electron/managers/transak.manager.ts
index fc0373bff5..cfbd42b7a0 100644
--- a/packages/desktop/lib/electron/managers/transak.manager.ts
+++ b/packages/desktop/lib/electron/managers/transak.manager.ts
@@ -219,7 +219,7 @@ export default class TransakManager implements ITransakManager {
     }
 
     private getUrl(data: ITransakWindowData): string {
-        const { address, currency, service, amount, paymentMethod } = data
+        const { address, currency, service, amount, paymentMethod, networkName, cryptoCurrencySymbol } = data
         const apiKey = process.env.TRANSAK_API_KEY
 
         if (typeof apiKey !== 'string') {
@@ -248,8 +248,8 @@ export default class TransakManager implements ITransakManager {
             walletAddress: address,
             paymentMethod: paymentMethod,
             productsAvailed: service,
-            cryptoCurrencyCode: 'IOTA',
-            network: 'miota',
+            cryptoCurrencyCode: cryptoCurrencySymbol,
+            network: networkName,
             themeColor: '7C41C9',
             hideMenu: true,
             disableWalletAddressForm: true,
diff --git a/packages/desktop/views/dashboard/buy-sell/BuySell.svelte b/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
index ac7e6c7e5c..9569e66a27 100644
--- a/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
@@ -4,7 +4,7 @@
     import { BuySellMainView } from './views'
     import { dashboardRoute, DashboardRoute } from '@core/router'
     import { onMount } from 'svelte'
-    import { updateTransakFiatCurrencies } from '@auxiliary/transak'
+    import { updateTransakCryptoCurrencies, updateTransakFiatCurrencies } from '@auxiliary/transak'
 
     $: if (features.analytics.dashboardRoute.buySell.enabled && $dashboardRoute === DashboardRoute.BuySell) {
         Platform.trackEvent('buy-sell-route', { route: $dashboardRoute })
@@ -12,6 +12,7 @@
 
     onMount(() => {
         void updateTransakFiatCurrencies()
+        void updateTransakCryptoCurrencies()
     })
 </script>
 
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TokenTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TokenTile.svelte
deleted file mode 100644
index ee3336b5a2..0000000000
--- a/packages/desktop/views/dashboard/buy-sell/components/TokenTile.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<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/TransakCryptoCurrencyAvatar.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte
new file mode 100644
index 0000000000..37cc41dd5b
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { TransakCryptoCurrency } from '@auxiliary/transak'
+    import { Avatar } from '@bloomwalletio/ui'
+    import { CoinGeckoCoinImage } from '@core/market/interfaces'
+    import { NetworkBadge } from '@ui/badges'
+
+    export let cryptoCurrency: TransakCryptoCurrency
+    export let size: 'xxs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' = 'md'
+    export let hideNetworkBadge: boolean = false
+
+    const IMAGE_SIZES: Record<typeof size, keyof CoinGeckoCoinImage> = {
+        xxs: 'thumb',
+        xs: 'thumb',
+        sm: 'thumb',
+        base: 'small',
+        md: 'small',
+        lg: 'small',
+    }
+
+    let imageLoadError = false
+
+    $: image = cryptoCurrency?.image[IMAGE_SIZES[size]]
+</script>
+
+<div class="avatar">
+    <Avatar {size} backgroundColor="brand/10">
+        {#if image && !imageLoadError}
+            <img
+                src={image}
+                alt={cryptoCurrency.name}
+                class="w-full h-full object-cover"
+                on:error={() => (imageLoadError = true)}
+            />
+        {/if}
+    </Avatar>
+    {#if (size === 'base' || size === 'md' || size === 'lg') && !hideNetworkBadge}
+        <span class="relative flex justify-center items-center bottom-0 right-0">
+            <NetworkBadge size="xs" networkId={cryptoCurrency.network.id} />
+        </span>
+    {/if}
+</div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
new file mode 100644
index 0000000000..b223344196
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { Tile, Text, Pill } from '@bloomwalletio/ui'
+    import { TransakCryptoCurrency } from '@auxiliary/transak/stores'
+    import TransakCryptoCurrencyAvatar from './TransakCryptoCurrencyAvatar.svelte'
+
+    export let cryptoCurrency: TransakCryptoCurrency
+    export let onClick: (() => unknown) | undefined = undefined
+    export let selected = false
+</script>
+
+<Tile {onClick} {selected} surface={1} width="full">
+    <div class="w-full flex items-center gap-2">
+        <TransakCryptoCurrencyAvatar {cryptoCurrency} hideNetworkBadge />
+        <div class="flex w-full justify-between items-center">
+            <div class="flex flex-col">
+                <Text>{cryptoCurrency.symbol}</Text>
+                <Text fontWeight="medium">{cryptoCurrency.name}</Text>
+            </div>
+            <Pill color="brand" compact>
+                <Text type="xs" textColor="brand" transform="uppercase">{cryptoCurrency.network.name}</Text>
+            </Pill>
+        </div>
+    </div>
+</Tile>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index c414ddf300..fd156ca64b 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -11,12 +11,19 @@
     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 {
+        IPopupState,
+        IProfileAuthPopupState,
+        openPopup,
+        PopupId,
+        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'
+    import { TransakCryptoCurrencyTile, TransakAmountInput } from './'
+    import { selectedExchangeCryptoCurrency, transakCryptoCurrencies, transakFiatCurrencies } from '@auxiliary/transak'
 
     const CURRENCY_OPTIONS: IOption[] = Object.keys(FiatCurrency).map((currency) => ({
         value: currency,
@@ -65,7 +72,7 @@
         state: IPopupState,
         profilePopupState: IProfileAuthPopupState,
         settingsState: ISettingsState,
-        drawerState: DrawerState
+        drawerState: DrawerState | undefined
     ): Promise<void> {
         if (state.active || profilePopupState.active || settingsState.open || drawerState?.id) {
             await Platform.hideTransak()
@@ -132,6 +139,10 @@
             service: selectedTab.key as 'BUY' | 'SELL',
             amount: Number(fiatValue),
             paymentMethod: selectedPaymentOption.value ?? '',
+            networkName:
+                $selectedExchangeCryptoCurrency?.networkName ?? $transakCryptoCurrencies?.[0]?.networkName ?? 'miota',
+            cryptoCurrencySymbol:
+                $selectedExchangeCryptoCurrency?.symbol ?? $transakCryptoCurrencies?.[0]?.symbol ?? 'IOTA',
         })
         isTransakOpen = true
         await updateTransakBounds()
@@ -142,6 +153,10 @@
         isTransakOpen = false
     }
 
+    function onTokenTileClick(): void {
+        openPopup({ id: PopupId.TransakSelectToken })
+    }
+
     onDestroy(() => {
         void Platform.closeTransak()
         isTransakOpen = false
@@ -181,7 +196,12 @@
                         />
                     </div>
                     <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} />
-                    <TokenTile {fiatValue} currency={FiatCurrency[selectedCurrency]} />
+                    {#if $transakCryptoCurrencies && $transakCryptoCurrencies.length > 0}
+                        <TransakCryptoCurrencyTile
+                            cryptoCurrency={$selectedExchangeCryptoCurrency ?? $transakCryptoCurrencies[0]}
+                            onClick={onTokenTileClick}
+                        />
+                    {/if}
                     <div class="w-full">
                         <SelectInput
                             label="Payment method"
diff --git a/packages/desktop/views/dashboard/buy-sell/components/index.ts b/packages/desktop/views/dashboard/buy-sell/components/index.ts
index 8491a9da95..9af899f777 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/index.ts
+++ b/packages/desktop/views/dashboard/buy-sell/components/index.ts
@@ -1,4 +1,4 @@
-export { default as TokenTile } from './TokenTile.svelte'
+export { default as TransakCryptoCurrencyTile } from './TransakCryptoCurrencyTile.svelte'
 export { default as TransakAmountInput } from './TransakAmountInput.svelte'
 export { default as TransakConnectionPanel } from './TransakConnectionPanel.svelte'
 export { default as TransakExchangePanel } from './TransakExchangePanel.svelte'
diff --git a/packages/desktop/views/dashboard/components/DashboardSidebar.svelte b/packages/desktop/views/dashboard/components/DashboardSidebar.svelte
index 146e879e3b..3d8baea64f 100644
--- a/packages/desktop/views/dashboard/components/DashboardSidebar.svelte
+++ b/packages/desktop/views/dashboard/components/DashboardSidebar.svelte
@@ -4,7 +4,6 @@
     import { ProfileActionsMenu, SidebarTab } from '@components'
     import { APP_STAGE, AppStage } from '@core/app'
     import { localize } from '@core/i18n'
-    import { SupportedStardustNetworkId } from '@core/network'
     import { activeProfile, isSoftwareProfile } from '@core/profile/stores'
     import {
         DashboardRoute,
@@ -16,12 +15,12 @@
     } from '@core/router'
     import { isDashboardSideBarExpanded } from '@core/ui'
     import { IDashboardSidebarTab } from '@desktop/routers'
+    import { isFeatureEnabled, isFeatureNotGeoFenced } from '@lib/features/utils'
     import { Logo } from '@ui'
     import { campaignsRouter } from '../campaigns'
     import LedgerStatusTile from './LedgerStatusTile.svelte'
     import StrongholdStatusTile from './StrongholdStatusTile.svelte'
     import { BackupToast, VersionToast } from './toasts'
-    import { isFeatureEnabled, isFeatureNotGeoFenced } from '@lib/features/utils'
 
     let expanded = true
     function toggleExpand(): void {
@@ -77,11 +76,6 @@
                       label: localize('tabs.buySell'),
                       route: DashboardRoute.BuySell,
                       onClick: openBuySell,
-                      disabled: $activeProfile?.network?.id !== SupportedStardustNetworkId.Iota,
-                      tooltip:
-                          $activeProfile?.network?.id !== SupportedStardustNetworkId.Iota
-                              ? localize('tabs.tooltips.buySell')
-                              : '',
                   },
               ]
             : []),
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
index e69de29bb2..d7d0018812 100644
--- a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
+++ b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
@@ -0,0 +1,90 @@
+import {
+    NetworkId,
+    NetworkNamespace,
+    StardustNetworkId,
+    SupportedStardustNetworkId,
+    getEvmNetworks,
+    getNetwork,
+    getStardustNetwork,
+} from '@core/network'
+import { TransakApi } from '../apis'
+import { ITransakApiCryptoCurrenciesResponseItem } from '../interfaces'
+import { TransakCryptoCurrency, transakCryptoCurrencies } from '../stores'
+import { AppStage } from '@core/app'
+
+const STARDUST_NETWORK_ID_TO_TRANSAK_NETWORK_NAME_MAP: Record<StardustNetworkId, string> = {
+    ...(process.env.STAGE === AppStage.PROD
+        ? { [SupportedStardustNetworkId.Iota]: 'miota' }
+        : { [SupportedStardustNetworkId.IotaTestnet]: 'miota' }),
+}
+
+export async function updateTransakCryptoCurrencies(): Promise<void> {
+    const stardustNetwork = getStardustNetwork()
+    const transakNetworkNameForStardustNetwork = STARDUST_NETWORK_ID_TO_TRANSAK_NETWORK_NAME_MAP[stardustNetwork.id]
+    const evmNetworks = getEvmNetworks()
+
+    const allowedNetworkNames = [transakNetworkNameForStardustNetwork]
+    const allowedNetworkChainIds = evmNetworks.map((network) => network.chainId)
+
+    const api = new TransakApi()
+    const response = await api.getFilteredCryptoCurrencies(allowedNetworkNames, allowedNetworkChainIds)
+
+    // sort response by stardust network first and then by order of evm networks
+    response?.sort((a, b) => {
+        const aNetworkId = getNetworkIdFromTransakNetwork(a.network.name, a.network.chainId)
+        const bNetworkId = getNetworkIdFromTransakNetwork(b.network.name, b.network.chainId)
+        if (aNetworkId === stardustNetwork.id) {
+            return -1
+        } else if (bNetworkId === stardustNetwork.id) {
+            return 1
+        } else {
+            return evmNetworks.findIndex((network) => network.id === aNetworkId) <
+                evmNetworks.findIndex((network) => network.id === bNetworkId)
+                ? -1
+                : 1
+        }
+    })
+
+    transakCryptoCurrencies.set(
+        response?.reduce((acc, token) => {
+            if (!token.isAllowed) {
+                return acc
+            }
+
+            return [...acc, buildTransakCryptoCurrencyFromResponseItem(token)]
+        }, [] as TransakCryptoCurrency[])
+    )
+}
+
+function buildTransakCryptoCurrencyFromResponseItem(
+    responseItem: ITransakApiCryptoCurrenciesResponseItem
+): TransakCryptoCurrency {
+    const networkId = getNetworkIdFromTransakNetwork(responseItem.network.name, responseItem.network.chainId)
+    const network = getNetwork(networkId)
+    if (!network) {
+        throw new Error(`Unsupported Transak network: ${responseItem.network.name}`)
+    }
+    return {
+        name: responseItem.name,
+        symbol: responseItem.symbol,
+        image: {
+            thumb: responseItem.image.thumb,
+            small: responseItem.image.small,
+            large: responseItem.image.large,
+        },
+        network,
+        decimals: responseItem.decimals,
+    }
+}
+
+function getNetworkIdFromTransakNetwork(transakNetworkName: string, chainId: string | null | undefined): NetworkId {
+    if (transakNetworkName === 'miota') {
+        return process.env.STAGE === AppStage.PROD
+            ? SupportedStardustNetworkId.Iota
+            : SupportedStardustNetworkId.IotaTestnet
+    } else if (chainId) {
+        return `${NetworkNamespace.Evm}:${chainId}`
+    } else {
+        throw new Error(`Unsupported Transak network: ${transakNetworkName}`)
+    }
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts b/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
index 99030c5452..2b054b592c 100644
--- a/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
+++ b/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
@@ -1,6 +1,10 @@
 import { BaseApi } from '@core/utils'
 import { TRANSAK_API_BASE_URL } from '../constants'
-import { ITransakApiCryptoCurrenciesResponse, ITransakApiFiatCurrenciesResponse } from '../interfaces'
+import {
+    ITransakApiCryptoCurrenciesResponse,
+    ITransakApiCryptoCurrenciesResponseItem,
+    ITransakApiFiatCurrenciesResponse,
+} from '../interfaces'
 import { TransakApiEndpoint } from '../enums'
 
 export class TransakApi extends BaseApi {
@@ -13,8 +17,26 @@ export class TransakApi extends BaseApi {
         return response
     }
 
-    async getCryptoCurrencies(): Promise<ITransakApiCryptoCurrenciesResponse | undefined> {
+    async getCryptoCurrencies(): Promise<ITransakApiCryptoCurrenciesResponseItem[] | undefined> {
         const response = await this.get<ITransakApiCryptoCurrenciesResponse>(TransakApiEndpoint.CryptoCurrencies)
-        return response
+        return response?.response
+    }
+
+    async getFilteredCryptoCurrencies(
+        allowedNetworkNames: string[],
+        allowedNetworkChainIds: string[]
+    ): Promise<ITransakApiCryptoCurrenciesResponseItem[] | undefined> {
+        const response = await this.getCryptoCurrencies()
+        const filteredResponse = response?.filter((cryptoCurrency) => {
+            if (cryptoCurrency.isAllowed && !cryptoCurrency.isSuspended) {
+                return (
+                    allowedNetworkNames.some((networkName) => networkName === cryptoCurrency.network.name) ||
+                    allowedNetworkChainIds.some((chainId) => chainId === cryptoCurrency.network.chainId)
+                )
+            } else {
+                return false
+            }
+        })
+        return filteredResponse
     }
 }
diff --git a/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-crypto-currencies-response.interface.ts b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-crypto-currencies-response.interface.ts
index 744ff7f655..9d7673933c 100644
--- a/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-crypto-currencies-response.interface.ts
+++ b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-crypto-currencies-response.interface.ts
@@ -19,7 +19,7 @@ export interface ITransakApiCryptoCurrenciesResponseItem {
     isIgnorePriceVerification: boolean
     image_bk?: ITransakCryptoCurrencyImage
     kycCountriesNotSupported: string[]
-    network: { name: string; fiatCurrenciesNotSupported: string[]; chainId?: string }
+    network: { name: string; fiatCurrenciesNotSupported: string[]; chainId?: string | null }
     uniqueId: string
     tokenType: string
     isPayInAllowed: boolean
diff --git a/packages/shared/src/lib/auxiliary/transak/stores/index.ts b/packages/shared/src/lib/auxiliary/transak/stores/index.ts
index 2c21a11252..20bd985aac 100644
--- a/packages/shared/src/lib/auxiliary/transak/stores/index.ts
+++ b/packages/shared/src/lib/auxiliary/transak/stores/index.ts
@@ -1,2 +1,3 @@
+export * from './selected-exchange-crypto-currency.store'
 export * from './transak-crypto-currencies.store'
 export * from './transak-fiat-currencies.store'
diff --git a/packages/shared/src/lib/auxiliary/transak/stores/selected-exchange-crypto-currency.store.ts b/packages/shared/src/lib/auxiliary/transak/stores/selected-exchange-crypto-currency.store.ts
new file mode 100644
index 0000000000..376f5707cb
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/stores/selected-exchange-crypto-currency.store.ts
@@ -0,0 +1,4 @@
+import { writable, Writable } from 'svelte/store'
+import { TransakCryptoCurrency } from './transak-crypto-currencies.store'
+
+export const selectedExchangeCryptoCurrency: Writable<TransakCryptoCurrency | undefined> = writable(undefined)
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
index 19dfaf7b2f..0ca87fba69 100644
--- 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
@@ -1,3 +1,12 @@
-import { writable } from 'svelte/store'
+import { Network } from '@core/network'
+import { Writable, writable } from 'svelte/store'
 
-export const transakCryptoCurrencies = writable({})
+export type TransakCryptoCurrency = {
+    name: string
+    symbol: string
+    image: { thumb: string; small: string; large: string }
+    network: Network
+    decimals: number
+}
+
+export const transakCryptoCurrencies: Writable<TransakCryptoCurrency[] | 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 32793943ae..1d49e11a74 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
@@ -6,4 +6,6 @@ export interface ITransakWindowData {
     service: 'BUY' | 'SELL'
     amount: number
     paymentMethod: string
+    networkName: string
+    cryptoCurrencySymbol: string
 }
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index b776380cbc..c729a0a0a1 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -2306,7 +2306,7 @@
         "collectibles": "Collectibles",
         "governance": "Governance",
         "campaigns": "Campaigns",
-        "buySell": "Buy IOTA",
+        "buySell": "Buy / Sell",
         "developer": "Developer",
         "tokens": "Tokens",
         "settings": "Settings",

From bca003359072b78de0a8e213572db510760983e7 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Tue, 16 Jul 2024 08:04:54 -0300
Subject: [PATCH 03/14] fix: ui polish

---
 .../components/TransakConnectionPanel.svelte  | 21 +++++++++++++++----
 .../components/TransakExchangePanel.svelte    |  4 ++--
 .../enums/transak-connection-status.enum.ts   |  1 +
 packages/shared/src/locales/en.json           |  3 ++-
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte
index 1b0b830af1..b277170063 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte
@@ -26,6 +26,8 @@
             return TransakConnectionStatus.Connected
         } else if (url) {
             return TransakConnectionStatus.Redirected
+        } else if (!url) {
+            return TransakConnectionStatus.Waiting
         } else {
             return TransakConnectionStatus.Disconnected
         }
@@ -47,6 +49,8 @@
                 <Pill color="success">{localize('general.connected')}</Pill>
             {:else if connectionStatus === TransakConnectionStatus.Redirected}
                 <Pill color="warning">{localize('general.redirected')}</Pill>
+            {:else if connectionStatus === TransakConnectionStatus.Waiting}
+                <Pill color="neutral">{localize('general.waitingConnection')}</Pill>
             {:else}
                 <Pill color="danger">{localize('general.disconnected')}</Pill>
             {/if}
@@ -68,6 +72,13 @@
                     size="xs"
                     tooltip={localize('views.buySell.tooltip.redirected')}
                 />
+            {:else if connectionStatus === TransakConnectionStatus.Waiting}
+                <TooltipIcon
+                    icon={IconName.Globe}
+                    textColor="secondary"
+                    size="xs"
+                    tooltip={localize('general.waitingConnection')}
+                />
             {:else}
                 <TooltipIcon
                     icon={IconName.DangerCircle}
@@ -83,9 +94,11 @@
                 <Tooltip anchor={textContainer} event="hover" placement="top" text={url ?? TRANSAK_WIDGET_URL} />
             {/if}
         </div>
-        <Tooltip anchor={refreshButton} text={localize('actions.refresh')} event="hover" placement="top" />
-        <div bind:this={refreshButton}>
-            <IconButton icon={IconName.Refresh} size="xs" on:click={refreshFunction} />
-        </div>
+        {#if connectionStatus !== TransakConnectionStatus.Waiting}
+            <Tooltip anchor={refreshButton} text={localize('actions.refresh')} event="hover" placement="top" />
+            <div bind:this={refreshButton}>
+                <IconButton icon={IconName.Refresh} size="xs" on:click={refreshFunction} />
+            </div>
+        {/if}
     </div>
 </Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index fd156ca64b..d03d8acf3e 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -188,7 +188,7 @@
                     </div>
                 {/if}
                 <div class="flex flex-col items-center gap-4 w-full">
-                    <div class="w-3/4">
+                    <div class="w-28 self-end">
                         <SelectInput
                             label="Currency"
                             options={CURRENCY_OPTIONS}
@@ -211,7 +211,7 @@
                         />
                     </div>
                 </div>
-                <Button text={selectedTab.value} on:click={resetTransak} />
+                <Button text={selectedTab.value} on:click={resetTransak} width="full" />
             </div>
         {/if}
     </Pane>
diff --git a/packages/shared/src/lib/auxiliary/transak/enums/transak-connection-status.enum.ts b/packages/shared/src/lib/auxiliary/transak/enums/transak-connection-status.enum.ts
index 40cfd529c9..30d50e7289 100644
--- a/packages/shared/src/lib/auxiliary/transak/enums/transak-connection-status.enum.ts
+++ b/packages/shared/src/lib/auxiliary/transak/enums/transak-connection-status.enum.ts
@@ -1,5 +1,6 @@
 export enum TransakConnectionStatus {
     Connected = 'connected',
     Redirected = 'redirected',
+    Waiting = 'waiting',
     Disconnected = 'disconnected',
 }
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index c729a0a0a1..0b6a918ad0 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -1778,7 +1778,8 @@
         "saving": "Saving",
         "enabled": "Enabled",
         "disabled": "Disabled",
-        "networkSettings": "Network settings"
+        "networkSettings": "Network settings",
+        "waitingConnection": "Waiting connection"
     },
     "filters":{
         "title": "Filters",

From 2fec83bbe0cfeef3fbcc1ce12674cd4272cea322 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Tue, 16 Jul 2024 08:23:34 -0300
Subject: [PATCH 04/14] fix: select token popup changing store

---
 .../popup/popups/TransakSelectTokenPopup.svelte        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte b/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte
index c9f575bb54..c55342ed65 100644
--- a/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte
+++ b/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte
@@ -10,6 +10,7 @@
     import { TransakCryptoCurrencyTile } from '@views/dashboard/buy-sell/components'
 
     let searchValue: string = ''
+    let selectedToken = $selectedExchangeCryptoCurrency
 
     const options = [
         { value: 'all', label: localize('popups.transaction.allNetworks') },
@@ -56,7 +57,7 @@
             if (cryptoCurrency === $selectedExchangeCryptoCurrency) {
                 onContinueClick()
             } else {
-                $selectedExchangeCryptoCurrency = cryptoCurrency
+                selectedToken = cryptoCurrency
             }
         } catch (err) {
             handleError(err)
@@ -68,6 +69,7 @@
     }
 
     function onContinueClick(): void {
+        $selectedExchangeCryptoCurrency = selectedToken
         closePopup()
     }
 </script>
@@ -78,7 +80,7 @@
     continueButton={{
         text: localize('actions.continue'),
         onClick: onContinueClick,
-        disabled: !$selectedExchangeCryptoCurrency,
+        disabled: !selectedToken,
     }}
 >
     <div class="flex-1 h-0 flex flex-col gap-4">
@@ -92,8 +94,8 @@
             <token-list class="flex flex-col p-0.5 pr-1.5 gap-2">
                 {#each filteredCryptoCurrencies ?? [] as cryptoCurrency}
                     {@const selected =
-                        $selectedExchangeCryptoCurrency?.name === cryptoCurrency.name &&
-                        $selectedExchangeCryptoCurrency?.network.id === cryptoCurrency?.network.id}
+                        selectedToken?.name === cryptoCurrency.name &&
+                        selectedToken?.network.id === cryptoCurrency?.network.id}
                     <TransakCryptoCurrencyTile
                         {cryptoCurrency}
                         onClick={() => onCryptoCurrencyClick(cryptoCurrency)}

From fc28eda6cae642e92e245184d03d9e45a3965dc4 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Wed, 17 Jul 2024 08:37:58 -0300
Subject: [PATCH 05/14] feat: adds icon and skeleton loading in cryptocurrency
 tile

---
 .../TransakCryptoCurrencyAvatar.svelte        |  8 +--
 .../TransakCryptoCurrencyTile.svelte          | 10 ++--
 .../components/TransakExchangePanel.svelte    | 59 +++++++++----------
 packages/shared/package.json                  |  2 +-
 yarn.lock                                     |  8 +--
 5 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte
index 37cc41dd5b..459470f629 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte
@@ -4,7 +4,7 @@
     import { CoinGeckoCoinImage } from '@core/market/interfaces'
     import { NetworkBadge } from '@ui/badges'
 
-    export let cryptoCurrency: TransakCryptoCurrency
+    export let cryptoCurrency: TransakCryptoCurrency | undefined
     export let size: 'xxs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' = 'md'
     export let hideNetworkBadge: boolean = false
 
@@ -22,12 +22,12 @@
     $: image = cryptoCurrency?.image[IMAGE_SIZES[size]]
 </script>
 
-<div class="avatar">
+<div class:animate-pulse={!cryptoCurrency}>
     <Avatar {size} backgroundColor="brand/10">
         {#if image && !imageLoadError}
             <img
                 src={image}
-                alt={cryptoCurrency.name}
+                alt={cryptoCurrency?.name ?? ''}
                 class="w-full h-full object-cover"
                 on:error={() => (imageLoadError = true)}
             />
@@ -35,7 +35,7 @@
     </Avatar>
     {#if (size === 'base' || size === 'md' || size === 'lg') && !hideNetworkBadge}
         <span class="relative flex justify-center items-center bottom-0 right-0">
-            <NetworkBadge size="xs" networkId={cryptoCurrency.network.id} />
+            <NetworkBadge size="xs" networkId={cryptoCurrency?.network.id ?? ''} />
         </span>
     {/if}
 </div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
index b223344196..c11c2636a0 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
@@ -3,21 +3,21 @@
     import { TransakCryptoCurrency } from '@auxiliary/transak/stores'
     import TransakCryptoCurrencyAvatar from './TransakCryptoCurrencyAvatar.svelte'
 
-    export let cryptoCurrency: TransakCryptoCurrency
+    export let cryptoCurrency: TransakCryptoCurrency | undefined
     export let onClick: (() => unknown) | undefined = undefined
     export let selected = false
 </script>
 
-<Tile {onClick} {selected} surface={1} width="full">
+<Tile {onClick} {selected} surface={1} width="full" class={cryptoCurrency ? '' : 'animate-pulse'}>
     <div class="w-full flex items-center gap-2">
         <TransakCryptoCurrencyAvatar {cryptoCurrency} hideNetworkBadge />
         <div class="flex w-full justify-between items-center">
             <div class="flex flex-col">
-                <Text>{cryptoCurrency.symbol}</Text>
-                <Text fontWeight="medium">{cryptoCurrency.name}</Text>
+                <Text>{cryptoCurrency?.symbol ?? '​'}</Text>
+                <Text fontWeight="medium">{cryptoCurrency?.name ?? '​'}</Text>
             </div>
             <Pill color="brand" compact>
-                <Text type="xs" textColor="brand" transform="uppercase">{cryptoCurrency.network.name}</Text>
+                <Text type="xs" textColor="brand" transform="uppercase">{cryptoCurrency?.network.name ?? '​'}</Text>
             </Pill>
         </div>
     </div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index d03d8acf3e..69eb0efcec 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -25,49 +25,48 @@
     import { TransakCryptoCurrencyTile, TransakAmountInput } from './'
     import { selectedExchangeCryptoCurrency, transakCryptoCurrencies, 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]
+    const CURRENCY_OPTIONS: IOption[] = Object.keys(FiatCurrency).map((currency) => ({
+        value: currency,
+    }))
 
     $: paymentOptions =
         $transakFiatCurrencies?.[selectedCurrency as keyof typeof FiatCurrency]?.paymentOptions.map((option) => ({
             value: option.id,
             label: option.name,
+            icon: option.id.includes('card') ? IconName.CreditCard : IconName.Bank,
         })) ?? []
-    $: selectedPaymentOption = paymentOptions?.[0]
-
-    $: selectedCurrency = selectedCurrencyOption.value
 
+    let error: boolean = false
     let isTransakOpen: boolean = false
     let isTransakLoading: boolean = false
+    let selectedTab = TABS[0]
+    let selectedCurrencyOption: IOption = CURRENCY_OPTIONS[0]
+    let selectedPaymentOption = paymentOptions?.[0]
 
+    $: fiatValue = String(getDefaultFiatAmount(FiatCurrency[selectedCurrencyOption.value as keyof typeof FiatCurrency]))
+    $: selectedCurrency = selectedCurrencyOption.value
     $: $isDashboardSideBarExpanded, void updateTransakBounds()
-
     $: if ($selectedAccountIndex !== undefined) {
         void closeTransak()
     }
-
     $: isTransakOpen, void handleOverlayChanges($popupState, $profileAuthPopup, $settingsState, $drawerState)
 
+    Platform.onEvent('transak-loaded', () => (isTransakLoading = false))
+    Platform.onEvent('transak-not-loaded', () => (error = true))
+
+    function onButtonClick(): void {
+        openUrlInBrowser(DISCORD_URL)
+    }
+
+    function onTokenTileClick(): void {
+        openPopup({ id: PopupId.TransakSelectToken })
+    }
+
     async function handleOverlayChanges(
         state: IPopupState,
         profilePopupState: IProfileAuthPopupState,
@@ -153,10 +152,6 @@
         isTransakOpen = false
     }
 
-    function onTokenTileClick(): void {
-        openPopup({ id: PopupId.TransakSelectToken })
-    }
-
     onDestroy(() => {
         void Platform.closeTransak()
         isTransakOpen = false
@@ -176,6 +171,8 @@
                 <Button on:click={onButtonClick} text={localize('actions.visitDiscord')} />
             </div>
         {:else}
+            {@const hasCryptoCurrencies = $transakCryptoCurrencies && $transakCryptoCurrencies.length > 0}
+            {@const selectedCryptoCurrency = $selectedExchangeCryptoCurrency ?? $transakCryptoCurrencies?.[0]}
             <div
                 class="flex flex-col justify-between items-center w-full h-full gap-8 {isTransakOpen &&
                 !isTransakLoading
@@ -196,12 +193,10 @@
                         />
                     </div>
                     <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} />
-                    {#if $transakCryptoCurrencies && $transakCryptoCurrencies.length > 0}
-                        <TransakCryptoCurrencyTile
-                            cryptoCurrency={$selectedExchangeCryptoCurrency ?? $transakCryptoCurrencies[0]}
-                            onClick={onTokenTileClick}
-                        />
-                    {/if}
+                    <TransakCryptoCurrencyTile
+                        cryptoCurrency={selectedCryptoCurrency}
+                        onClick={hasCryptoCurrencies ? onTokenTileClick : undefined}
+                    />
                     <div class="w-full">
                         <SelectInput
                             label="Payment method"
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 190ebd4b78..72a9fb6455 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <contact@bloomwallet.io>",
     "license": "PolyForm Strict License 1.0.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.21.8",
+        "@bloomwalletio/ui": "0.21.9",
         "@ethereumjs/common": "4.3.0",
         "@ethereumjs/rlp": "5.0.2",
         "@ethereumjs/tx": "5.3.0",
diff --git a/yarn.lock b/yarn.lock
index 09d7ca6bb0..2590b0a57b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -343,10 +343,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.21.8":
-  version "0.21.8"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.21.8/035a7b91ac561a9303996dcf33338424d59da548#035a7b91ac561a9303996dcf33338424d59da548"
-  integrity sha512-qfq0kohj89t2OfEpJtZlB80mV/gyz2/jNm7j0L+OVedDGJ7J4Qy0rJNkyo0IT4f2W/GN8R28/k/gjAQdjco1OA==
+"@bloomwalletio/ui@0.21.9":
+  version "0.21.9"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.21.9/6e15c4d64b92abdd4b02fe1d71ed169018721b02#6e15c4d64b92abdd4b02fe1d71ed169018721b02"
+  integrity sha512-kNcAV/kxhliDnpKtyZAUY345nOwX87JlmT3W6E2Sg5odPPCmbd5lsQxjNRzJR20D8xL3sQQKsmWBeqJojor9Ew==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"

From 87eb9228909fc252aea94a9e9e8900588766a160 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Wed, 17 Jul 2024 09:15:38 -0300
Subject: [PATCH 06/14] feat: adds getPrice function

---
 packages/desktop/webpack.config.ts            |  1 +
 .../transak/actions/getTransakPrice.ts        | 17 +++++++++++
 .../lib/auxiliary/transak/actions/index.ts    |  1 +
 .../lib/auxiliary/transak/apis/transak.api.ts | 17 +++++++++++
 .../enums/transak-api-endpoint.enum.ts        |  1 +
 .../lib/auxiliary/transak/interfaces/index.ts |  2 ++
 .../transak-api-price-params.interface.ts     | 10 +++++++
 .../transak-api-price-response.interface.ts   | 30 +++++++++++++++++++
 8 files changed, 79 insertions(+)
 create mode 100644 packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-params.interface.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-response.interface.ts

diff --git a/packages/desktop/webpack.config.ts b/packages/desktop/webpack.config.ts
index f62f3e8c64..43968f97f0 100644
--- a/packages/desktop/webpack.config.ts
+++ b/packages/desktop/webpack.config.ts
@@ -193,6 +193,7 @@ const rendererPlugins = [
         PRELOAD_SCRIPT: JSON.stringify(false),
         'process.env.APP_PROTOCOL': JSON.stringify(appProtocol),
         'process.env.WALLETCONNECT_PROJECT_ID': JSON.stringify(process.env.WALLETCONNECT_PROJECT_ID),
+        'process.env.TRANSAK_API_KEY': JSON.stringify(process.env.TRANSAK_API_KEY),
     }),
     // The ethereumjs libraries require the NormalModuleReplacementPlugin & the ProvidePlugin
     new NormalModuleReplacementPlugin(/node:/, (resource) => {
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts b/packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts
new file mode 100644
index 0000000000..62e7449854
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts
@@ -0,0 +1,17 @@
+import { TransakApi } from '../apis'
+import { ITransakApiPriceParams } from '../interfaces'
+
+export async function getTransakPrice(
+    params: ITransakApiPriceParams
+): Promise<{ fiatAmount: number; cryptoAmount: number } | undefined> {
+    const transakApi = new TransakApi()
+    const { response } = (await transakApi.getPrices(params)) ?? {}
+
+    if (!response) {
+        return
+    }
+
+    const { cryptoAmount, fiatAmount } = response
+
+    return { fiatAmount, cryptoAmount }
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/index.ts b/packages/shared/src/lib/auxiliary/transak/actions/index.ts
index 224393753e..c2563c0067 100644
--- a/packages/shared/src/lib/auxiliary/transak/actions/index.ts
+++ b/packages/shared/src/lib/auxiliary/transak/actions/index.ts
@@ -1,2 +1,3 @@
+export * from './getTransakPrice'
 export * from './updateTransakCryptoCurrencies'
 export * from './updateTransakFiatCurrencies'
diff --git a/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts b/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
index 2b054b592c..07b2e14b97 100644
--- a/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
+++ b/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
@@ -4,6 +4,8 @@ import {
     ITransakApiCryptoCurrenciesResponse,
     ITransakApiCryptoCurrenciesResponseItem,
     ITransakApiFiatCurrenciesResponse,
+    ITransakApiPriceParams,
+    ITransakApiPriceResponse,
 } from '../interfaces'
 import { TransakApiEndpoint } from '../enums'
 
@@ -39,4 +41,19 @@ export class TransakApi extends BaseApi {
         })
         return filteredResponse
     }
+
+    async getPrices(params: ITransakApiPriceParams): Promise<ITransakApiPriceResponse | undefined> {
+        const partnerApiKey = process.env.TRANSAK_API_KEY ?? ''
+        const { fiatCurrency, cryptoCurrency, isBuyOrSell, networkName, paymentMethod, fiatAmount } = params
+        const response = await this.get<ITransakApiPriceResponse>(TransakApiEndpoint.Price, {
+            partnerApiKey,
+            fiatCurrency,
+            cryptoCurrency,
+            isBuyOrSell,
+            networkName,
+            paymentMethod,
+            fiatAmount,
+        })
+        return response
+    }
 }
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 b571225395..59dba76340 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,5 @@
 export enum TransakApiEndpoint {
     CryptoCurrencies = 'api/v2/currencies/crypto-currencies',
     FiatCurrencies = 'fiat/public/v1/currencies/fiat-currencies',
+    Price = 'api/v1/pricing/public/quotes',
 }
diff --git a/packages/shared/src/lib/auxiliary/transak/interfaces/index.ts b/packages/shared/src/lib/auxiliary/transak/interfaces/index.ts
index f082000607..6f86828a8c 100644
--- a/packages/shared/src/lib/auxiliary/transak/interfaces/index.ts
+++ b/packages/shared/src/lib/auxiliary/transak/interfaces/index.ts
@@ -1,2 +1,4 @@
 export * from './transak-api-crypto-currencies-response.interface'
 export * from './transak-api-fiat-currencies-response.interface'
+export * from './transak-api-price-params.interface'
+export * from './transak-api-price-response.interface'
diff --git a/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-params.interface.ts b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-params.interface.ts
new file mode 100644
index 0000000000..135aa2825c
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-params.interface.ts
@@ -0,0 +1,10 @@
+import { FiatCurrency } from '@core/market/enums'
+
+export interface ITransakApiPriceParams {
+    fiatCurrency: keyof typeof FiatCurrency
+    cryptoCurrency: string
+    isBuyOrSell: 'BUY' | 'SELL'
+    networkName: string
+    paymentMethod: string
+    fiatAmount: number
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-response.interface.ts b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-response.interface.ts
new file mode 100644
index 0000000000..b3e04f36f1
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-response.interface.ts
@@ -0,0 +1,30 @@
+interface ITransakApiPriceResponseFeeBreakdown {
+    name: string
+    value: number
+    id: string
+    ids: string[]
+}
+
+interface ITransakApiPriceResponseContent {
+    quoteId: string
+    conversionPrice: number
+    marketConversionPrice: number
+    slippage: number
+    fiatCurrency: string
+    cryptoCurrency: string
+    paymentMethod: string
+    fiatAmount: number
+    cryptoAmount: number
+    isBuyOrSell: 'BUY' | 'SELL'
+    network: string
+    feeDecimal: number
+    totalFee: number
+    feeBreakdown: ITransakApiPriceResponseFeeBreakdown[]
+    nonce: number
+    cryptoLiquidityProvider: string
+    notes: string[]
+}
+
+export interface ITransakApiPriceResponse {
+    response: ITransakApiPriceResponseContent
+}

From 38c0523b05b9424c27cb0c22b167731f86596c46 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Thu, 18 Jul 2024 09:03:23 -0300
Subject: [PATCH 07/14] feat: add quotes panel in buy/sell view (#2739)

* WIP

* chore: fix reactivity and organize code

* chore: fix selected cryptocurrency & increase exchange panel height

* feat: add RecipientInput

---------

Co-authored-by: Nicole O'Brien <nicole@bloomwallet.io>
---
 .../TransakCryptoCurrencyAmountTile.svelte    |  32 ++
 .../components/TransakExchangePanel.svelte    | 300 ++++++++++++------
 .../dashboard/buy-sell/components/index.ts    |   1 +
 .../buy-sell/views/BuySellMainView.svelte     |   2 +-
 .../components/inputs/RecipientInput.svelte   |  15 +-
 5 files changed, 252 insertions(+), 98 deletions(-)
 create mode 100644 packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte

diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
new file mode 100644
index 0000000000..c3b58c4433
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { Tile, Text } from '@bloomwalletio/ui'
+    import { TransakCryptoCurrency } from '@auxiliary/transak/stores'
+    import { FiatCurrency } from '@core/market'
+    import { formatCurrency } from '@core/i18n'
+
+    export let cryptoCurrency: TransakCryptoCurrency | undefined
+    export let fiatAmount: number | undefined
+    export let fiatSymbol: keyof typeof FiatCurrency | undefined
+    export let cryptoAmount: number | undefined
+
+    $: isLoading = !cryptoCurrency || !fiatAmount || !fiatSymbol || !cryptoAmount
+</script>
+
+<Tile surface={1} width="full" class={isLoading ? 'animate-pulse' : ''}>
+    <div class="w-full flex justify-between items-center gap-2">
+        <img
+            data-label="transak-logo"
+            width="90"
+            height="28"
+            src="assets/logos/transak.svg"
+            alt="Transak"
+            class:opacity-0={isLoading}
+        />
+        <div class="flex flex-col">
+            <Text align="right"
+                >{cryptoAmount ? `≈ ${formatCurrency(String(cryptoAmount), cryptoCurrency?.symbol)}` : '​'}</Text
+            >
+            <Text align="right">{fiatAmount && fiatSymbol ? formatCurrency(String(fiatAmount), fiatSymbol) : '​'}</Text>
+        </div>
+    </div>
+</Tile>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index 69eb0efcec..7d8ddbeae4 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -20,36 +20,159 @@
         profileAuthPopup,
     } from '@desktop/auxiliary/popup'
     import { isFeatureEnabled } from '@lib/features/utils'
-    import { Pane } from '@ui'
+    import { Pane, RecipientInput } from '@ui'
     import { onDestroy, tick } from 'svelte'
     import { TransakCryptoCurrencyTile, TransakAmountInput } from './'
-    import { selectedExchangeCryptoCurrency, transakCryptoCurrencies, transakFiatCurrencies } from '@auxiliary/transak'
+    import {
+        getTransakPrice,
+        selectedExchangeCryptoCurrency,
+        transakCryptoCurrencies,
+        TransakCryptoCurrency,
+        TransakFiatCurrencies,
+        transakFiatCurrencies,
+    } from '@auxiliary/transak'
+    import TransakCryptoCurrencyAmountTile from './TransakCryptoCurrencyAmountTile.svelte'
+    import { isEvmNetwork } from '@core/network'
+    import { getAddressFromAccountForNetwork, IAccountState } from '@core/account'
+    import { Subject, SubjectType } from '@core/wallet'
 
+    // Buy / Sell Tabs
     const TABS = [
         { key: 'BUY', value: localize('views.buySell.tabs.buy') },
         { key: 'SELL', value: localize('views.buySell.tabs.sell') },
     ]
+    let selectedTab = TABS[0]
 
+    // Fiat Currency Selector
     const CURRENCY_OPTIONS: IOption[] = Object.keys(FiatCurrency).map((currency) => ({
         value: currency,
     }))
+    let selectedCurrencyOption: IOption = CURRENCY_OPTIONS[0]
+    $: selectedCurrency = selectedCurrencyOption.value
+
+    // Fiat Input
+    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)
+    }
+
+    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
+            }
+        }
+    }
+    let fiatValue = String(
+        getDefaultFiatAmount(FiatCurrency[selectedCurrencyOption.value as keyof typeof FiatCurrency])
+    )
 
-    $: paymentOptions =
-        $transakFiatCurrencies?.[selectedCurrency as keyof typeof FiatCurrency]?.paymentOptions.map((option) => ({
-            value: option.id,
-            label: option.name,
-            icon: option.id.includes('card') ? IconName.CreditCard : IconName.Bank,
-        })) ?? []
+    // Select Crypto Asset
+    $: selectedCryptoCurrency = $selectedExchangeCryptoCurrency ?? $transakCryptoCurrencies?.[0]
+
+    // Payment Options Selector
+    let paymentOptions: IOption[]
+    let selectedPaymentOption: IOption | undefined
+    function updatePaymentOptions(
+        supportedCurrencies: TransakFiatCurrencies | undefined,
+        selectedCurrency: string
+    ): void {
+        paymentOptions =
+            supportedCurrencies?.[selectedCurrency as keyof typeof FiatCurrency]?.paymentOptions.map((option) => ({
+                value: option.id,
+                label: option.name,
+                icon: option.id.includes('card') ? IconName.CreditCard : IconName.Bank,
+            })) ?? []
+        if (!paymentOptions.some((paymentOption) => paymentOption.value === selectedPaymentOption?.value)) {
+            selectedPaymentOption = paymentOptions?.[0]
+        }
+    }
+    $: updatePaymentOptions($transakFiatCurrencies, selectedCurrency)
+
+    // Recipient Input
+    let recipientInput
+    let selectedRecipient: Subject | undefined
+    function updateSelectedRecipient(
+        account: IAccountState | undefined,
+        cryptoCurrency: TransakCryptoCurrency | undefined
+    ) {
+        if (account && cryptoCurrency) {
+            const address = getAddressFromAccountForNetwork(account, cryptoCurrency.network.id)
+
+            if (address) {
+                selectedRecipient = {
+                    type: SubjectType.Account,
+                    account,
+                    address,
+                }
+            } else {
+                selectedRecipient = undefined
+            }
+        } else {
+            selectedRecipient = undefined
+        }
+    }
+    $: updateSelectedRecipient($selectedAccount, selectedCryptoCurrency)
+
+    // Quotations
+    let quote: { fiatAmount: number; cryptoAmount: number } | undefined = undefined
+    let latestQuoteRequestId = 0
+    async function updateQuote(): Promise<void> {
+        if (!selectedPaymentOption) {
+            return
+        }
+
+        const params = {
+            fiatCurrency: selectedCurrency as keyof typeof FiatCurrency,
+            cryptoCurrency: selectedCryptoCurrency?.symbol ?? 'IOTA',
+            isBuyOrSell: selectedTab.key as 'BUY' | 'SELL',
+            networkName: selectedCryptoCurrency?.network.name ?? 'miota',
+            paymentMethod: selectedPaymentOption.value,
+            fiatAmount: Number(fiatValue),
+        }
+
+        quote = undefined
+
+        const requestId = ++latestQuoteRequestId // Increment the request ID
+        const response = await getTransakPrice(params)
+
+        // Only update the quote if this is the latest request
+        if (requestId === latestQuoteRequestId && response) {
+            quote = {
+                fiatAmount: response.fiatAmount,
+                cryptoAmount: response.cryptoAmount,
+            }
+        }
+    }
+    $: selectedCurrency, selectedCryptoCurrency, selectedPaymentOption, fiatValue, void updateQuote()
+
+    // Handlers
+    function onButtonClick(): void {
+        openUrlInBrowser(DISCORD_URL)
+    }
+
+    function onTokenTileClick(): void {
+        openPopup({ id: PopupId.TransakSelectToken })
+    }
+
+    // TODO: Transak Popup to be in its own file
 
     let error: boolean = false
     let isTransakOpen: boolean = false
     let isTransakLoading: boolean = false
-    let selectedTab = TABS[0]
-    let selectedCurrencyOption: IOption = CURRENCY_OPTIONS[0]
-    let selectedPaymentOption = paymentOptions?.[0]
 
-    $: fiatValue = String(getDefaultFiatAmount(FiatCurrency[selectedCurrencyOption.value as keyof typeof FiatCurrency]))
-    $: selectedCurrency = selectedCurrencyOption.value
     $: $isDashboardSideBarExpanded, void updateTransakBounds()
     $: if ($selectedAccountIndex !== undefined) {
         void closeTransak()
@@ -59,14 +182,6 @@
     Platform.onEvent('transak-loaded', () => (isTransakLoading = false))
     Platform.onEvent('transak-not-loaded', () => (error = true))
 
-    function onButtonClick(): void {
-        openUrlInBrowser(DISCORD_URL)
-    }
-
-    function onTokenTileClick(): void {
-        openPopup({ id: PopupId.TransakSelectToken })
-    }
-
     async function handleOverlayChanges(
         state: IPopupState,
         profilePopupState: IProfileAuthPopupState,
@@ -103,31 +218,6 @@
         })
     }
 
-    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()
@@ -137,11 +227,9 @@
             address: $selectedAccount?.depositAddress ?? '',
             service: selectedTab.key as 'BUY' | 'SELL',
             amount: Number(fiatValue),
-            paymentMethod: selectedPaymentOption.value ?? '',
-            networkName:
-                $selectedExchangeCryptoCurrency?.networkName ?? $transakCryptoCurrencies?.[0]?.networkName ?? 'miota',
-            cryptoCurrencySymbol:
-                $selectedExchangeCryptoCurrency?.symbol ?? $transakCryptoCurrencies?.[0]?.symbol ?? 'IOTA',
+            paymentMethod: selectedPaymentOption?.value ?? '',
+            networkName: selectedCryptoCurrency?.network.name ?? 'miota',
+            cryptoCurrencySymbol: selectedCryptoCurrency?.symbol ?? 'IOTA',
         })
         isTransakOpen = true
         await updateTransakBounds()
@@ -156,58 +244,80 @@
         void Platform.closeTransak()
         isTransakOpen = false
         Platform.removeListenersForEvent('reset-transak')
+        $selectedExchangeCryptoCurrency = undefined
     })
 </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}
-            {@const hasCryptoCurrencies = $transakCryptoCurrencies && $transakCryptoCurrencies.length > 0}
-            {@const selectedCryptoCurrency = $selectedExchangeCryptoCurrency ?? $transakCryptoCurrencies?.[0]}
-            <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-28 self-end">
-                        <SelectInput
-                            label="Currency"
-                            options={CURRENCY_OPTIONS}
-                            bind:selected={selectedCurrencyOption}
-                        />
-                    </div>
-                    <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} />
-                    <TransakCryptoCurrencyTile
-                        cryptoCurrency={selectedCryptoCurrency}
-                        onClick={hasCryptoCurrencies ? onTokenTileClick : undefined}
-                    />
-                    <div class="w-full">
-                        <SelectInput
-                            label="Payment method"
-                            options={paymentOptions}
-                            bind:selected={selectedPaymentOption}
-                            hideValue
-                        />
+    <Pane
+        classes="px-6 pb-6 pt-4 bg-surface dark:bg-surface-dark shadow-lg w-full h-full grid grid-cols-2 divide-x divide-solid divide-stroke"
+    >
+        <div class="pr-4">
+            {#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}
+                {@const hasCryptoCurrencies = $transakCryptoCurrencies && $transakCryptoCurrencies.length > 0}
+                <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 justify-between items-center gap-4 h-full w-full">
+                        <div class="flex gap-2">
+                            <div class="w-28">
+                                <SelectInput options={CURRENCY_OPTIONS} bind:selected={selectedCurrencyOption} />
+                            </div>
+                            {#key paymentOptions}
+                                <SelectInput options={paymentOptions} bind:selected={selectedPaymentOption} hideValue />
+                            {/key}
+                        </div>
+                        <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} />
+                        <div class="flex flex-col gap-4 w-full">
+                            <TransakCryptoCurrencyTile
+                                cryptoCurrency={selectedCryptoCurrency}
+                                onClick={hasCryptoCurrencies ? onTokenTileClick : undefined}
+                            />
+                            <RecipientInput
+                                bind:this={recipientInput}
+                                bind:recipient={selectedRecipient}
+                                networkId={selectedCryptoCurrency?.network.id}
+                                isEvmNetwork={isEvmNetwork(selectedCryptoCurrency?.network.id)}
+                                disabled
+                            />
+                        </div>
                     </div>
                 </div>
-                <Button text={selectedTab.value} on:click={resetTransak} width="full" />
+            {/if}
+        </div>
+        <div class="w-full h-full flex flex-col justify-between pl-4">
+            <div class="flex flex-col gap-3">
+                <div class="flex flex-col items-center gap-2">
+                    <Text type="h6" align="center">Quotations</Text>
+                    <Text type="body2" textColor="secondary" align="center">
+                        How would you like to buy your crypto?
+                    </Text>
+                </div>
+                <TransakCryptoCurrencyAmountTile
+                    cryptoCurrency={selectedCryptoCurrency}
+                    fiatAmount={quote?.fiatAmount}
+                    fiatSymbol={selectedCurrency}
+                    cryptoAmount={quote?.cryptoAmount}
+                />
             </div>
-        {/if}
+            <Button text={selectedTab.value} on:click={resetTransak} width="full" />
+        </div>
     </Pane>
 </div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/index.ts b/packages/desktop/views/dashboard/buy-sell/components/index.ts
index 9af899f777..7b5f176098 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/index.ts
+++ b/packages/desktop/views/dashboard/buy-sell/components/index.ts
@@ -1,3 +1,4 @@
+export { default as TransakCryptoCurrencyAmountTile } from './TransakCryptoCurrencyAmountTile.svelte'
 export { default as TransakCryptoCurrencyTile } from './TransakCryptoCurrencyTile.svelte'
 export { default as TransakAmountInput } from './TransakAmountInput.svelte'
 export { default as TransakConnectionPanel } from './TransakConnectionPanel.svelte'
diff --git a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
index 2756af6812..691e42bb32 100644
--- a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
@@ -9,7 +9,7 @@
         <TransakConnectionPanel refreshFunction={transakExchangePanel?.resetTransak} />
         <TransakInfoPanel />
     </div>
-    <div class="w-[25rem] shrink-0 h-fit">
+    <div class="w-[40rem] shrink-0 h-[28rem]">
         <TransakExchangePanel bind:this={transakExchangePanel} />
     </div>
 </div>
diff --git a/packages/shared/src/components/inputs/RecipientInput.svelte b/packages/shared/src/components/inputs/RecipientInput.svelte
index 31b6e8389c..b5ceb61672 100644
--- a/packages/shared/src/components/inputs/RecipientInput.svelte
+++ b/packages/shared/src/components/inputs/RecipientInput.svelte
@@ -19,10 +19,21 @@
 
     let value: any
     let error: string
-    const selected: IOption = getSelectedRecipient(recipient)
+    let selected: IOption = getSelectedRecipient(recipient)
 
     $: isEvmNetwork, (error = '')
-    $: recipient = getSubjectFromAddress(value, networkId)
+    function updateRecipientIfValueChanges() {
+        recipient = getSubjectFromAddress(value, networkId)
+    }
+    $: value, updateRecipientIfValueChanges()
+
+    function updateValueIfRecipientPassedIn() {
+        if (recipient?.address !== value) {
+            value = recipient?.address
+            selected = getSelectedRecipient(recipient)
+        }
+    }
+    $: recipient, updateValueIfRecipientPassedIn()
 
     export function validate(): void {
         try {

From eab6d145dac858c3371e3a1b9bbf3f2e86700a52 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Tue, 23 Jul 2024 14:00:15 -0300
Subject: [PATCH 08/14] feat: Transak window as a Popup (#2743)

* feat: Transak window as a Popup

* refactor: change TransakConnectionPanel to be a popup banner

* fix: disable button if necessary

* fix: adds locale strings in quotations panel

* fix: makes TransakFramePopup props optional

* enhancement: sets error to true if any of the props in falsy
---
 .../components/ConfirmationDialog.svelte      |   2 +
 .../desktop/components/popup/Popup.svelte     |   8 +-
 .../popup/popups/TransakFramePopup.svelte     | 129 +++++++++
 .../auxiliary/popup/enums/popup-id.enum.ts    |   1 +
 .../popup/interfaces/popup-state.interface.ts |   1 +
 .../lib/electron/preloads/transak.preload.ts  |   4 +-
 ....svelte => TransakConnectionBanner.svelte} |  43 ++-
 .../TransakCryptoCurrencyAmountTile.svelte    |   2 +-
 .../components/TransakExchangePanel.svelte    | 249 ++++++------------
 .../components/TransakInfoPanel.svelte        |  12 -
 .../dashboard/buy-sell/components/index.ts    |   3 +-
 .../buy-sell/views/BuySellMainView.svelte     |   6 +-
 packages/shared/assets/logos/transak-full.svg |  42 +++
 packages/shared/assets/logos/transak-icon.svg |  22 ++
 packages/shared/assets/logos/transak-text.svg |  16 ++
 packages/shared/assets/logos/transak.svg      |  24 --
 .../actions/updateTransakCryptoCurrencies.ts  |   1 +
 .../stores/transak-crypto-currencies.store.ts |   1 +
 packages/shared/src/locales/en.json           |   9 +-
 19 files changed, 327 insertions(+), 248 deletions(-)
 create mode 100644 packages/desktop/components/popup/popups/TransakFramePopup.svelte
 rename packages/desktop/views/dashboard/buy-sell/components/{TransakConnectionPanel.svelte => TransakConnectionBanner.svelte} (68%)
 delete mode 100644 packages/desktop/views/dashboard/buy-sell/components/TransakInfoPanel.svelte
 create mode 100644 packages/shared/assets/logos/transak-full.svg
 create mode 100644 packages/shared/assets/logos/transak-icon.svg
 create mode 100644 packages/shared/assets/logos/transak-text.svg
 delete mode 100644 packages/shared/assets/logos/transak.svg

diff --git a/packages/desktop/components/ConfirmationDialog.svelte b/packages/desktop/components/ConfirmationDialog.svelte
index 12ade47f5c..606b5f75f9 100644
--- a/packages/desktop/components/ConfirmationDialog.svelte
+++ b/packages/desktop/components/ConfirmationDialog.svelte
@@ -12,6 +12,7 @@
     export let backText: string = localize('actions.cancel')
     export let confirmText: string = localize('actions.confirm')
     export let onConfirm: () => void
+    export let onClose: () => void
 
     export function openDialog(): void {
         visible = true
@@ -19,6 +20,7 @@
 
     function closeDialog(): void {
         visible = false
+        onClose()
     }
 
     function onConfirmClick(): void {
diff --git a/packages/desktop/components/popup/Popup.svelte b/packages/desktop/components/popup/Popup.svelte
index 9f82ac46fc..5cb335338d 100644
--- a/packages/desktop/components/popup/Popup.svelte
+++ b/packages/desktop/components/popup/Popup.svelte
@@ -64,6 +64,7 @@
     import SyncAccountsPopup from './popups/SyncAccountsPopup.svelte'
     import TestDeepLinkFormPopup from './popups/TestDeepLinkFormPopup.svelte'
     import TokenInformationPopup from './popups/TokenInformationPopup.svelte'
+    import TransakFramePopup from './popups/TransakFramePopup.svelte'
     import TransakSelectTokenPopup from './popups/TransakSelectTokenPopup.svelte'
     import VoteForProposal from './popups/VoteForProposalPopup.svelte'
     import VotingPowerToZeroPopup from './popups/VotingPowerToZeroPopup.svelte'
@@ -147,6 +148,7 @@
         [PopupId.SyncAccounts]: SyncAccountsPopup,
         [PopupId.TestDeepLinkForm]: TestDeepLinkFormPopup,
         [PopupId.TokenInformation]: TokenInformationPopup,
+        [PopupId.TransakFrame]: TransakFramePopup,
         [PopupId.TransakSelectToken]: TransakSelectTokenPopup,
         [PopupId.VoteForProposal]: VoteForProposal,
         [PopupId.VotingPowerToZero]: VotingPowerToZeroPopup,
@@ -171,6 +173,7 @@
         if (!preventClose) {
             if (confirmClickOutside) {
                 confirmationDialog?.openDialog()
+                modifyPopupState({ confirmClickOutsideActive: true })
             } else {
                 closePopup({ callOnCancel: true })
             }
@@ -243,9 +246,12 @@
     <ConfirmationDialog
         bind:this={confirmationDialog}
         onConfirm={() => {
-            modifyPopupState({ confirmClickOutside: false })
+            modifyPopupState({ confirmClickOutside: false, confirmClickOutsideActive: false })
             closePopup()
         }}
+        onClose={() => {
+            modifyPopupState({ confirmClickOutsideActive: false })
+        }}
         confirmText={localize('actions.close')}
         title="Close popup"
         variant="danger"
diff --git a/packages/desktop/components/popup/popups/TransakFramePopup.svelte b/packages/desktop/components/popup/popups/TransakFramePopup.svelte
new file mode 100644
index 0000000000..455b94a3da
--- /dev/null
+++ b/packages/desktop/components/popup/popups/TransakFramePopup.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+    import { TransakCryptoCurrency } from '@auxiliary/transak'
+    import { Button, Icon, IconName, Spinner, Text } from '@bloomwalletio/ui'
+    import { DISCORD_URL } from '@contexts/settings'
+    import { selectedAccountIndex } from '@core/account/stores'
+    import { openUrlInBrowser, Platform } from '@core/app'
+    import { localize } from '@core/i18n'
+    import { FiatCurrency } from '@core/market'
+    import { IPopupState, popupState } from '@desktop/auxiliary/popup'
+    import TransakConnectionBanner from '@views/dashboard/buy-sell/components/TransakConnectionBanner.svelte'
+    import { onDestroy, onMount, tick } from 'svelte'
+
+    export let isBuyOrSell: 'BUY' | 'SELL' | undefined = undefined
+    export let fiatAmount: number | undefined = undefined
+    export let fiatCurrency: keyof typeof FiatCurrency | undefined = undefined
+    export let cryptoCurrency: TransakCryptoCurrency | undefined = undefined
+    export let paymentMethod: string | undefined = undefined
+    export let recipientAddress: string | undefined = undefined
+
+    let error: boolean = false
+    let isTransakOpen: boolean = false
+    let isTransakLoading: boolean = false
+
+    $: if ($selectedAccountIndex !== undefined) {
+        void closeTransak()
+    }
+    $: isTransakOpen, void handleOverlayChanges($popupState)
+
+    Platform.onEvent('transak-loaded', () => (isTransakLoading = false))
+    Platform.onEvent('transak-not-loaded', () => (error = true))
+
+    async function handleOverlayChanges(state: IPopupState): Promise<void> {
+        if (!state.confirmClickOutside) {
+            return
+        }
+
+        if (state.confirmClickOutsideActive) {
+            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,
+        })
+    }
+
+    export async function resetTransak(): Promise<void> {
+        if (!fiatCurrency || !cryptoCurrency || !recipientAddress || !isBuyOrSell || !fiatAmount || !paymentMethod) {
+            error = true
+            return
+        }
+
+        isTransakLoading = true
+        await Platform.closeTransak()
+        isTransakOpen = false
+        await Platform.openTransak({
+            currency: fiatCurrency,
+            address: recipientAddress,
+            service: isBuyOrSell,
+            amount: Number(fiatAmount),
+            paymentMethod: paymentMethod,
+            networkName: cryptoCurrency.transakNetworkName,
+            cryptoCurrencySymbol: cryptoCurrency.symbol,
+        })
+        isTransakOpen = true
+        await updateTransakBounds()
+    }
+
+    async function closeTransak(): Promise<void> {
+        await Platform.closeTransak()
+        isTransakOpen = false
+    }
+
+    function onButtonClick(): void {
+        openUrlInBrowser(DISCORD_URL)
+    }
+
+    onMount(() => {
+        void resetTransak()
+    })
+
+    onDestroy(() => {
+        void Platform.closeTransak()
+        isTransakOpen = false
+        Platform.removeListenersForEvent('reset-transak')
+    })
+</script>
+
+<svelte:window on:resize={updateTransakBounds} />
+
+<div class="flex flex-col gap-4">
+    <div class="border-b border-solid border-stroke dark:border-stroke-dark">
+        <TransakConnectionBanner refreshFunction={resetTransak} />
+    </div>
+    <div class="w-[30rem] h-[60vh]" bind:this={transakContainer}>
+        {#if error}
+            <div class="flex flex-col justify-center items-center w-full h-full gap-4 px-10">
+                <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 isTransakLoading}
+            <div class="w-full h-full flex justify-center items-center">
+                <Spinner size="lg" textColor="info" />
+            </div>
+        {/if}
+    </div>
+</div>
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 53c9ed9b22..9efdc19e56 100644
--- a/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
+++ b/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
@@ -48,6 +48,7 @@ export enum PopupId {
     SyncAccounts = 'syncAccounts',
     TestDeepLinkForm = 'testDeepLinkForm',
     TokenInformation = 'tokenInformation',
+    TransakFrame = 'transakFrame',
     TransakSelectToken = 'transakSelectToken',
     VoteForProposal = 'voteForProposal',
     VotingPowerToZero = 'votingPowerToZero',
diff --git a/packages/desktop/lib/auxiliary/popup/interfaces/popup-state.interface.ts b/packages/desktop/lib/auxiliary/popup/interfaces/popup-state.interface.ts
index 1dc7bdac79..db2d3aa370 100644
--- a/packages/desktop/lib/auxiliary/popup/interfaces/popup-state.interface.ts
+++ b/packages/desktop/lib/auxiliary/popup/interfaces/popup-state.interface.ts
@@ -12,4 +12,5 @@ export interface IPopupState {
     relative?: boolean
     autofocusContent?: boolean
     confirmClickOutside?: boolean
+    confirmClickOutsideActive?: boolean
 }
diff --git a/packages/desktop/lib/electron/preloads/transak.preload.ts b/packages/desktop/lib/electron/preloads/transak.preload.ts
index 7fc46aa60c..2ff174de2a 100644
--- a/packages/desktop/lib/electron/preloads/transak.preload.ts
+++ b/packages/desktop/lib/electron/preloads/transak.preload.ts
@@ -32,7 +32,9 @@ window.addEventListener('DOMContentLoaded', () => {
 
     const appRoot = window.document.getElementById('appRoot')
     if (appRoot) {
-        appRoot.style.borderRadius = '16px'
+        appRoot.style.borderBottomLeftRadius = '32px'
+        appRoot.style.borderBottomRightRadius = '32px'
         appRoot.style.overflow = 'hidden'
     }
+    window.document.documentElement.style.backgroundColor = 'transparent'
 })
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
similarity index 68%
rename from packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte
rename to packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
index b277170063..28aea45845 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
     import { TRANSAK_WIDGET_URL } from '@auxiliary/transak'
     import { TransakConnectionStatus } from '@auxiliary/transak/enums'
-    import { IconButton, IconName, Pill, Text, TooltipIcon, Tooltip } from '@bloomwalletio/ui'
+    import { IconButton, IconName, Text, TooltipIcon, Tooltip } from '@bloomwalletio/ui'
     import { Platform } from '@core/app'
     import { localize } from '@core/i18n'
-    import { Pane } from '@ui'
     import { tick } from 'svelte'
 
     export let refreshFunction: () => Promise<void>
@@ -41,22 +40,11 @@
     }
 </script>
 
-<Pane classes="flex flex-col 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 h-8">
-        <img data-label="transak-logo" width="90" height="28" src="assets/logos/transak.svg" alt="Transak" />
-        <div>
-            {#if connectionStatus === TransakConnectionStatus.Connected}
-                <Pill color="success">{localize('general.connected')}</Pill>
-            {:else if connectionStatus === TransakConnectionStatus.Redirected}
-                <Pill color="warning">{localize('general.redirected')}</Pill>
-            {:else if connectionStatus === TransakConnectionStatus.Waiting}
-                <Pill color="neutral">{localize('general.waitingConnection')}</Pill>
-            {:else}
-                <Pill color="danger">{localize('general.disconnected')}</Pill>
-            {/if}
-        </div>
-    </div>
-    <div class="flex flex-row justify-between w-full items-center">
+<div class="flex flex-row items-center w-full p-6 gap-4 bg-surface-1 dark:bg-surface-1-dark rounded-t-[32px]">
+    <img class="w-10 h-10" src="assets/logos/transak-icon.svg" alt="Transak" />
+
+    <div class="flex flex-col items-start gap-2">
+        <img class="h-4" src="assets/logos/transak-text.svg" alt="Transak" />
         <div class="flex items-center gap-1 w-full h-3">
             {#if connectionStatus === TransakConnectionStatus.Connected}
                 <TooltipIcon
@@ -94,11 +82,16 @@
                 <Tooltip anchor={textContainer} event="hover" placement="top" text={url ?? TRANSAK_WIDGET_URL} />
             {/if}
         </div>
-        {#if connectionStatus !== TransakConnectionStatus.Waiting}
-            <Tooltip anchor={refreshButton} text={localize('actions.refresh')} event="hover" placement="top" />
-            <div bind:this={refreshButton}>
-                <IconButton icon={IconName.Refresh} size="xs" on:click={refreshFunction} />
-            </div>
-        {/if}
     </div>
-</Pane>
+    <div class="absolute top-8 right-16 flex flex-row justify-between items-center">
+        <Tooltip anchor={refreshButton} text={localize('actions.refresh')} event="hover" placement="top" />
+        <div bind:this={refreshButton}>
+            <IconButton
+                icon={IconName.Refresh}
+                size="sm"
+                on:click={refreshFunction}
+                disabled={connectionStatus === TransakConnectionStatus.Waiting}
+            />
+        </div>
+    </div>
+</div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
index c3b58c4433..d1cbb769f6 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
@@ -6,7 +6,7 @@
 
     export let cryptoCurrency: TransakCryptoCurrency | undefined
     export let fiatAmount: number | undefined
-    export let fiatSymbol: keyof typeof FiatCurrency | undefined
+    export let fiatSymbol: keyof typeof FiatCurrency | string | undefined
     export let cryptoAmount: number | undefined
 
     $: isLoading = !cryptoCurrency || !fiatAmount || !fiatSymbol || !cryptoAmount
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index 7d8ddbeae4..ebd2ea5dbc 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -1,28 +1,4 @@
 <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,
-        openPopup,
-        PopupId,
-        popupState,
-        profileAuthPopup,
-    } from '@desktop/auxiliary/popup'
-    import { isFeatureEnabled } from '@lib/features/utils'
-    import { Pane, RecipientInput } from '@ui'
-    import { onDestroy, tick } from 'svelte'
-    import { TransakCryptoCurrencyTile, TransakAmountInput } from './'
     import {
         getTransakPrice,
         selectedExchangeCryptoCurrency,
@@ -31,10 +7,21 @@
         TransakFiatCurrencies,
         transakFiatCurrencies,
     } from '@auxiliary/transak'
-    import TransakCryptoCurrencyAmountTile from './TransakCryptoCurrencyAmountTile.svelte'
-    import { isEvmNetwork } from '@core/network'
+    import { Button, IconName, IOption, SelectInput, Tabs, Text } from '@bloomwalletio/ui'
     import { getAddressFromAccountForNetwork, IAccountState } from '@core/account'
+    import { selectedAccount } from '@core/account/stores'
+    import { localize } from '@core/i18n'
+    import { FiatCurrency } from '@core/market'
+    import { MarketCoinId } from '@core/market/enums'
+    import { marketCoinPrices } from '@core/market/stores'
+    import { isEvmNetwork } from '@core/network'
     import { Subject, SubjectType } from '@core/wallet'
+    import { openPopup, PopupId } from '@desktop/auxiliary/popup'
+    import { isFeatureEnabled } from '@lib/features/utils'
+    import { Pane, RecipientInput } from '@ui'
+    import { onDestroy } from 'svelte'
+    import { TransakAmountInput, TransakCryptoCurrencyTile } from './'
+    import TransakCryptoCurrencyAmountTile from './TransakCryptoCurrencyAmountTile.svelte'
 
     // Buy / Sell Tabs
     const TABS = [
@@ -67,8 +54,8 @@
                 return DEFAULT_FIAT_AMOUNT
             default: {
                 const conversionRate =
-                    $marketCoinPrices[MarketCoinId.Iota]?.[currency] /
-                    $marketCoinPrices[MarketCoinId.Iota]?.[FiatCurrency.USD]
+                    ($marketCoinPrices?.[MarketCoinId.Iota]?.[currency] ?? 1) /
+                    ($marketCoinPrices?.[MarketCoinId.Iota]?.[FiatCurrency.USD] ?? 1)
                 const fiatAmount = DEFAULT_FIAT_AMOUNT * conversionRate
                 const roundedAmount = customRound(fiatAmount)
                 return roundedAmount
@@ -159,165 +146,83 @@
     $: selectedCurrency, selectedCryptoCurrency, selectedPaymentOption, fiatValue, void updateQuote()
 
     // Handlers
-    function onButtonClick(): void {
-        openUrlInBrowser(DISCORD_URL)
-    }
-
     function onTokenTileClick(): void {
         openPopup({ id: PopupId.TransakSelectToken })
     }
 
-    // TODO: Transak Popup to be in its own file
-
-    let error: boolean = false
-    let isTransakOpen: boolean = false
-    let isTransakLoading: boolean = false
-
-    $: $isDashboardSideBarExpanded, void updateTransakBounds()
-    $: if ($selectedAccountIndex !== undefined) {
-        void closeTransak()
-    }
-    $: isTransakOpen, void handleOverlayChanges($popupState, $profileAuthPopup, $settingsState, $drawerState)
-
-    Platform.onEvent('transak-loaded', () => (isTransakLoading = false))
-    Platform.onEvent('transak-not-loaded', () => (error = true))
-
-    async function handleOverlayChanges(
-        state: IPopupState,
-        profilePopupState: IProfileAuthPopupState,
-        settingsState: ISettingsState,
-        drawerState: DrawerState | undefined
-    ): 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,
-        })
-    }
-
-    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 ?? '',
-            networkName: selectedCryptoCurrency?.network.name ?? 'miota',
-            cryptoCurrencySymbol: selectedCryptoCurrency?.symbol ?? 'IOTA',
+    function onButtonClick(): void {
+        openPopup({
+            id: PopupId.TransakFrame,
+            props: {
+                isBuyOrSell: selectedTab.key as 'BUY' | 'SELL',
+                fiatAmount: Number(fiatValue),
+                fiatCurrency: selectedCurrency,
+                cryptoCurrency: selectedCryptoCurrency,
+                paymentMethod: selectedPaymentOption?.value ?? '',
+                recipientAddress: selectedRecipient?.address ?? '',
+            },
+            confirmClickOutside: true,
         })
-        isTransakOpen = true
-        await updateTransakBounds()
-    }
-
-    async function closeTransak(): Promise<void> {
-        await Platform.closeTransak()
-        isTransakOpen = false
     }
+    $: isButtonDisabled = !selectedCryptoCurrency || !selectedPaymentOption || !selectedRecipient
 
     onDestroy(() => {
-        void Platform.closeTransak()
-        isTransakOpen = false
-        Platform.removeListenersForEvent('reset-transak')
         $selectedExchangeCryptoCurrency = undefined
     })
 </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 grid grid-cols-2 divide-x divide-solid divide-stroke"
-    >
-        <div class="pr-4">
-            {#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')} />
+<Pane
+    classes="px-6 pb-6 pt-4 bg-surface dark:bg-surface-dark shadow-lg w-full h-full grid grid-cols-2 divide-x divide-solid divide-stroke"
+>
+    {@const hasCryptoCurrencies = $transakCryptoCurrencies && $transakCryptoCurrencies.length > 0}
+    <div class="pr-4">
+        <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>
-            {:else}
-                {@const hasCryptoCurrencies = $transakCryptoCurrencies && $transakCryptoCurrencies.length > 0}
-                <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 justify-between items-center gap-4 h-full w-full">
-                        <div class="flex gap-2">
-                            <div class="w-28">
-                                <SelectInput options={CURRENCY_OPTIONS} bind:selected={selectedCurrencyOption} />
-                            </div>
-                            {#key paymentOptions}
-                                <SelectInput options={paymentOptions} bind:selected={selectedPaymentOption} hideValue />
-                            {/key}
-                        </div>
-                        <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} />
-                        <div class="flex flex-col gap-4 w-full">
-                            <TransakCryptoCurrencyTile
-                                cryptoCurrency={selectedCryptoCurrency}
-                                onClick={hasCryptoCurrencies ? onTokenTileClick : undefined}
-                            />
-                            <RecipientInput
-                                bind:this={recipientInput}
-                                bind:recipient={selectedRecipient}
-                                networkId={selectedCryptoCurrency?.network.id}
-                                isEvmNetwork={isEvmNetwork(selectedCryptoCurrency?.network.id)}
-                                disabled
-                            />
-                        </div>
+            {/if}
+            <div class="flex flex-col justify-between items-center gap-4 h-full w-full">
+                <div class="flex gap-2">
+                    <div class="w-28">
+                        <SelectInput options={CURRENCY_OPTIONS} bind:selected={selectedCurrencyOption} />
                     </div>
+                    {#key paymentOptions}
+                        <SelectInput options={paymentOptions} bind:selected={selectedPaymentOption} hideValue />
+                    {/key}
                 </div>
-            {/if}
-        </div>
-        <div class="w-full h-full flex flex-col justify-between pl-4">
-            <div class="flex flex-col gap-3">
-                <div class="flex flex-col items-center gap-2">
-                    <Text type="h6" align="center">Quotations</Text>
-                    <Text type="body2" textColor="secondary" align="center">
-                        How would you like to buy your crypto?
-                    </Text>
+                <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} />
+                <div class="flex flex-col gap-4 w-full">
+                    <TransakCryptoCurrencyTile
+                        cryptoCurrency={selectedCryptoCurrency}
+                        onClick={hasCryptoCurrencies ? onTokenTileClick : undefined}
+                    />
+                    <RecipientInput
+                        bind:this={recipientInput}
+                        bind:recipient={selectedRecipient}
+                        networkId={selectedCryptoCurrency?.network.id}
+                        isEvmNetwork={isEvmNetwork(selectedCryptoCurrency?.network.id)}
+                        disabled
+                    />
                 </div>
-                <TransakCryptoCurrencyAmountTile
-                    cryptoCurrency={selectedCryptoCurrency}
-                    fiatAmount={quote?.fiatAmount}
-                    fiatSymbol={selectedCurrency}
-                    cryptoAmount={quote?.cryptoAmount}
-                />
             </div>
-            <Button text={selectedTab.value} on:click={resetTransak} width="full" />
         </div>
-    </Pane>
-</div>
+    </div>
+    <div class="w-full h-full flex flex-col justify-between pl-4">
+        <div class="flex flex-col gap-3">
+            <div class="flex flex-col items-center gap-2">
+                <Text type="h6" align="center">{localize('views.buySell.quotations.title')}</Text>
+                <Text type="body2" textColor="secondary" align="center"
+                    >{localize('views.buySell.quotations.description')}</Text
+                >
+            </div>
+            <TransakCryptoCurrencyAmountTile
+                cryptoCurrency={selectedCryptoCurrency}
+                fiatAmount={quote?.fiatAmount}
+                fiatSymbol={selectedCurrency}
+                cryptoAmount={quote?.cryptoAmount}
+            />
+        </div>
+        <Button text={selectedTab.value} on:click={onButtonClick} width="full" disabled={isButtonDisabled} />
+    </div>
+</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakInfoPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakInfoPanel.svelte
deleted file mode 100644
index 53baa91be1..0000000000
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakInfoPanel.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-    import { Pill, Text } from '@bloomwalletio/ui'
-    import { localize } from '@core/i18n'
-    import { Pane } from '@ui'
-</script>
-
-<Pane classes="flex flex-col justify-start items-start w-full p-6 gap-4 bg-surface dark:bg-surface-dark shadow-lg">
-    <Pill color="brand">{localize('general.info')}</Pill>
-    <Text color="secondary">{localize('views.buySell.info.receive')}</Text>
-    <Text color="secondary">{localize('views.buySell.info.multipleAccounts')}</Text>
-    <Text color="secondary">{localize('views.buySell.info.changingAccounts')}</Text>
-</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/index.ts b/packages/desktop/views/dashboard/buy-sell/components/index.ts
index 7b5f176098..b6bb39b5cc 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/index.ts
+++ b/packages/desktop/views/dashboard/buy-sell/components/index.ts
@@ -1,6 +1,5 @@
 export { default as TransakCryptoCurrencyAmountTile } from './TransakCryptoCurrencyAmountTile.svelte'
 export { default as TransakCryptoCurrencyTile } from './TransakCryptoCurrencyTile.svelte'
 export { default as TransakAmountInput } from './TransakAmountInput.svelte'
-export { default as TransakConnectionPanel } from './TransakConnectionPanel.svelte'
+export { default as TransakConnectionBanner } from './TransakConnectionBanner.svelte'
 export { default as TransakExchangePanel } from './TransakExchangePanel.svelte'
-export { default as TransakInfoPanel } from './TransakInfoPanel.svelte'
diff --git a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
index 691e42bb32..9f5b3bf7e3 100644
--- a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
@@ -1,14 +1,10 @@
 <script lang="ts">
-    import { TransakConnectionPanel, TransakInfoPanel, TransakExchangePanel } from '../components'
+    import { TransakExchangePanel } from '../components'
 
     let transakExchangePanel: TransakExchangePanel
 </script>
 
 <div class="flex justify-center gap-4 h-full w-full">
-    <div class="flex flex-col gap-4 max-w-[20rem] h-full">
-        <TransakConnectionPanel refreshFunction={transakExchangePanel?.resetTransak} />
-        <TransakInfoPanel />
-    </div>
     <div class="w-[40rem] shrink-0 h-[28rem]">
         <TransakExchangePanel bind:this={transakExchangePanel} />
     </div>
diff --git a/packages/shared/assets/logos/transak-full.svg b/packages/shared/assets/logos/transak-full.svg
new file mode 100644
index 0000000000..d2937b2653
--- /dev/null
+++ b/packages/shared/assets/logos/transak-full.svg
@@ -0,0 +1,42 @@
+<svg width="201" height="64" viewBox="0 0 201 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_3242_495)">
+        <path
+            d="M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 49.6731 14.3269 64 32 64Z"
+            fill="url(#paint0_linear_3242_495)" />
+        <path
+            d="M52.2062 30.0437L43.1677 21.0052L43.1513 20.9888L43.1155 20.9575C43.057 20.9046 42.9958 20.8549 42.9321 20.8084C42.8874 20.7726 42.8427 20.7383 42.7949 20.707C42.7741 20.6921 42.7532 20.6802 42.7308 20.6668C42.2155 20.3293 41.5922 20.1979 40.9845 20.2987C40.3768 20.3995 39.8293 20.7252 39.4506 21.211L25.3934 35.2697V22.7452C25.3934 22.0868 25.1318 21.4554 24.6663 20.9898C24.2007 20.5242 23.5693 20.2627 22.9109 20.2627C22.2525 20.2627 21.621 20.5242 21.1555 20.9898C20.6899 21.4554 20.4283 22.0868 20.4283 22.7452V35.2697L15.2963 30.1376C14.8272 29.6903 14.2017 29.4442 13.5536 29.4519C12.9055 29.4596 12.286 29.7205 11.8277 30.1789C11.3694 30.6372 11.1085 31.2566 11.1008 31.9048C11.0931 32.5529 11.3392 33.1784 11.7865 33.6475L21.156 43.017C21.2148 43.0766 21.2771 43.1329 21.3423 43.1854C21.405 43.2361 21.4706 43.2853 21.5362 43.3345C21.8747 43.5539 22.2616 43.6875 22.6634 43.7237H22.6738C22.7543 43.7312 22.8348 43.7356 22.9153 43.7356H22.9526C23.0202 43.7356 23.0873 43.7326 23.1539 43.7267H23.2031C23.2672 43.7192 23.3313 43.7118 23.394 43.6983H23.4223C23.4924 43.6834 23.5624 43.667 23.631 43.6462H23.643C23.7178 43.6236 23.7915 43.5972 23.8636 43.5671C23.9665 43.5246 24.0661 43.4748 24.1618 43.418L24.2185 43.3852C24.3123 43.3279 24.4019 43.2641 24.4869 43.1944L24.5122 43.172C24.5644 43.1273 24.6166 43.0826 24.6613 43.0319L38.9153 28.7689V41.2546C38.9153 41.913 39.1769 42.5444 39.6425 43.01C40.108 43.4756 40.7395 43.7371 41.3979 43.7371C42.0563 43.7371 42.6877 43.4756 43.1533 43.01C43.6188 42.5444 43.8804 41.913 43.8804 41.2546V28.7301L48.6963 33.555C49.1638 34.0114 49.7924 34.265 50.4457 34.261C51.099 34.257 51.7244 33.9957 52.1862 33.5336C52.6481 33.0715 52.9092 32.446 52.9129 31.7927C52.9167 31.1395 52.6627 30.511 52.2062 30.0437Z"
+            fill="white" />
+        <path d="M75.1797 24.5303H82.5453V43.7703H86.9572V24.5303H94.3227V20.4092H75.1797V24.5303Z"
+            fill="#1461DB" />
+        <path
+            d="M103.99 26.2091C103.468 26.2453 102.951 26.3378 102.448 26.4849C101.964 26.6257 101.501 26.8298 101.071 27.0917C100.529 27.4079 100.055 27.8273 99.675 28.3263C99.4958 28.5632 99.3334 28.8123 99.1889 29.0718V26.2493H95.2959V43.7702H99.748V34.8152C99.7362 34.2007 99.8264 33.5885 100.015 33.0036C100.186 32.4859 100.463 32.0098 100.829 31.6061C101.196 31.2023 101.642 30.8799 102.141 30.6597C102.689 30.4032 103.28 30.2515 103.884 30.2124C104.454 30.156 105.03 30.2065 105.581 30.3615V26.2493C105.053 26.1838 104.52 26.1703 103.99 26.2091Z"
+            fill="#1461DB" />
+        <path
+            d="M122.322 28.942C121.748 27.8129 120.778 26.9352 119.597 26.4774C118.397 26.0003 117.023 25.7617 115.476 25.7617C113.367 25.7617 111.702 26.2165 110.479 27.126C109.281 27.999 108.404 29.2417 107.982 30.6627L111.972 31.927C112.254 31.1259 112.746 30.5692 113.448 30.2571C114.083 29.9584 114.774 29.7978 115.476 29.7859C116.645 29.7859 117.478 30.0295 117.975 30.5165C118.364 30.8967 118.596 31.4529 118.68 32.1716C117.934 32.2834 117.226 32.3893 116.563 32.4862C115.429 32.6542 114.412 32.8301 113.514 33.014C112.726 33.1683 111.951 33.3796 111.194 33.6462C110.368 33.9281 109.604 34.3682 108.947 34.9419C108.407 35.4292 107.993 36.0386 107.737 36.7191C107.482 37.4317 107.356 38.1839 107.365 38.9407C107.354 39.8737 107.587 40.7934 108.039 41.6096C108.499 42.4316 109.186 43.1043 110.017 43.5479C110.888 44.03 111.951 44.2706 113.205 44.2696C114.72 44.2696 115.972 44.0072 116.961 43.4823C117.81 43.0089 118.562 42.3778 119.175 41.6231V43.7835H123.037V33.0617C123.04 32.3364 123.007 31.6113 122.938 30.8893C122.863 30.206 122.654 29.5442 122.322 28.942ZM118.201 38.4487C118.019 38.7855 117.793 39.0963 117.529 39.3731C117.149 39.7785 116.698 40.111 116.199 40.3542C115.559 40.6593 114.855 40.8065 114.146 40.7836C113.697 40.7947 113.251 40.7177 112.832 40.557C112.49 40.4264 112.194 40.1983 111.981 39.9009C111.776 39.5973 111.672 39.2368 111.683 38.8707C111.679 38.5943 111.743 38.3214 111.87 38.076C112.013 37.8161 112.213 37.5914 112.453 37.4184C112.776 37.1876 113.127 36.9996 113.497 36.8593C113.927 36.7033 114.365 36.5733 114.811 36.4701C115.308 36.3509 115.962 36.2182 116.774 36.072C117.292 35.9796 117.924 35.8693 118.646 35.747C118.637 36.0586 118.623 36.3941 118.599 36.7907C118.576 37.364 118.44 37.9271 118.201 38.4487Z"
+            fill="#1461DB" />
+        <path
+            d="M143.232 30.4267C143.017 29.6288 142.669 28.8728 142.203 28.1902C141.684 27.4448 140.991 26.8377 140.183 26.4219C139.318 25.9577 138.199 25.7256 136.825 25.7256C135.106 25.7256 133.681 26.0983 132.551 26.8438C132.032 27.1864 131.561 27.5949 131.147 28.059V26.2489H127.222V43.7698H131.695V34.8804C131.695 33.787 131.816 32.9108 132.058 32.2517C132.301 31.5927 132.614 31.0927 132.998 30.7518C133.343 30.4292 133.76 30.1927 134.215 30.0614C134.61 29.9475 135.019 29.8873 135.431 29.8825C136.371 29.8825 137.099 30.0937 137.613 30.5162C138.121 30.9286 138.505 31.4728 138.725 32.0892C138.946 32.692 139.083 33.3229 139.13 33.9634C139.174 34.5847 139.195 35.0956 139.194 35.4962V43.7698H143.667V33.9381C143.667 33.6399 143.647 33.1821 143.603 32.5425C143.547 31.827 143.423 31.1185 143.232 30.4267Z"
+            fill="#1461DB" />
+        <path
+            d="M159.756 34.4942C158.948 34.037 157.88 33.6344 156.551 33.2865C155.189 32.9406 154.175 32.6593 153.51 32.4426C152.845 32.2259 152.407 32.0152 152.196 31.8104C152.093 31.7124 152.011 31.5938 151.957 31.4623C151.902 31.3309 151.875 31.1894 151.879 31.047C151.879 30.5386 152.125 30.1524 152.617 29.8796C153.109 29.6067 153.762 29.5023 154.571 29.556C155.404 29.6206 156.064 29.8423 156.551 30.221C156.791 30.4059 156.989 30.6383 157.135 30.9036C157.28 31.1689 157.369 31.4614 157.395 31.7627L161.906 30.9501C161.773 29.9345 161.353 28.9777 160.696 28.1917C160.003 27.3862 159.119 26.7675 158.124 26.3921C156.959 25.9511 155.72 25.736 154.474 25.7584C153.058 25.7584 151.828 25.9831 150.784 26.4324C149.808 26.8267 148.965 27.492 148.355 28.3498C147.772 29.2131 147.472 30.2365 147.497 31.2781C147.473 32.0804 147.669 32.8739 148.063 33.5728C148.442 34.207 149.059 34.7507 149.913 35.204C150.768 35.6572 151.911 36.0682 153.343 36.437C154.607 36.773 155.54 37.0434 156.14 37.2481C156.736 37.4539 157.127 37.6611 157.3 37.8729C157.482 38.1118 157.574 38.4076 157.559 38.7078C157.569 38.9601 157.515 39.2108 157.402 39.4364C157.288 39.662 157.119 39.8551 156.911 39.9975C156.475 40.3047 155.86 40.4583 155.065 40.4583C154.091 40.4583 153.288 40.2257 152.655 39.7605C152.019 39.2907 151.582 38.5989 151.431 37.8222L146.915 38.52C147.207 40.3479 148.032 41.7624 149.389 42.7634C150.745 43.7643 152.527 44.2643 154.734 44.2633C157.027 44.2633 158.822 43.7494 160.119 42.7216C161.417 41.6938 162.068 40.2803 162.073 38.4812C162.096 37.6699 161.906 36.8667 161.521 36.1522C161.15 35.5101 160.562 34.9574 159.756 34.4942Z"
+            fill="#1461DB" />
+        <path
+            d="M179.62 28.942C179.046 27.8131 178.076 26.9356 176.895 26.4774C175.694 26.0003 174.32 25.7617 172.774 25.7617C170.665 25.7617 169 26.2165 167.777 27.126C166.579 27.9993 165.701 29.2418 165.278 30.6627L169.27 31.927C169.552 31.1259 170.044 30.5692 170.746 30.2571C171.381 29.9584 172.072 29.7978 172.774 29.7859C173.943 29.7859 174.776 30.0295 175.273 30.5165C175.662 30.8968 175.893 31.4529 175.978 32.1716C175.232 32.2834 174.524 32.3893 173.861 32.4862C172.726 32.6542 171.71 32.8301 170.812 33.014C170.024 33.1683 169.249 33.3796 168.492 33.6462C167.551 33.9941 166.802 34.424 166.245 34.9359C165.705 35.4232 165.291 36.0327 165.035 36.7132C164.779 37.4255 164.653 38.1779 164.663 38.9348C164.652 39.8678 164.884 40.7874 165.337 41.6037C165.797 42.4259 166.484 43.0987 167.315 43.542C168.186 44.0241 169.248 44.2646 170.503 44.2636C172.018 44.2636 173.27 44.0012 174.259 43.4764C175.108 43.0029 175.86 42.3719 176.473 41.6171V43.7776H180.335V33.0617C180.338 32.3364 180.305 31.6113 180.236 30.8893C180.161 30.206 179.952 29.5442 179.62 28.942ZM175.499 38.4487C175.317 38.7855 175.091 39.0963 174.827 39.3731C174.447 39.7785 173.996 40.111 173.497 40.3542C172.857 40.6593 172.153 40.8065 171.444 40.7836C170.995 40.7947 170.549 40.7177 170.13 40.557C169.788 40.4264 169.492 40.1983 169.279 39.9009C169.074 39.5973 168.969 39.2369 168.981 38.8707C168.977 38.5943 169.041 38.3214 169.168 38.076C169.311 37.8157 169.51 37.591 169.751 37.4184C170.074 37.1876 170.424 36.9996 170.795 36.8593C171.225 36.7031 171.663 36.5731 172.109 36.4701C172.606 36.3509 173.26 36.2182 174.072 36.072C174.59 35.9796 175.222 35.8693 175.944 35.747C175.935 36.0586 175.92 36.3941 175.897 36.7907C175.872 37.3638 175.737 37.9267 175.499 38.4487Z"
+            fill="#1461DB" />
+        <path
+            d="M194.091 35.0091L200.417 26.2495H194.966L189.029 34.6856V20.4092H184.551L184.519 43.7703H189.029V35.3342L195.096 43.7703H200.839L194.091 35.0091Z"
+            fill="#1461DB" />
+    </g>
+    <defs>
+        <linearGradient id="paint0_linear_3242_495" x1="4.28217" y1="15.997" x2="59.7178"
+            y2="48.0015" gradientUnits="userSpaceOnUse">
+            <stop offset="0.13" stop-color="#348BED" />
+            <stop offset="0.31" stop-color="#2B80E8" />
+            <stop offset="0.64" stop-color="#1461DB" />
+            <stop offset="0.72" stop-color="#0E57D7" />
+        </linearGradient>
+        <clipPath id="clip0_3242_495">
+            <rect width="200.839" height="64" fill="white" />
+        </clipPath>
+    </defs>
+</svg>
diff --git a/packages/shared/assets/logos/transak-icon.svg b/packages/shared/assets/logos/transak-icon.svg
new file mode 100644
index 0000000000..bdbf474f14
--- /dev/null
+++ b/packages/shared/assets/logos/transak-icon.svg
@@ -0,0 +1,22 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_3242_495)">
+        <path
+            d="M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 49.6731 14.3269 64 32 64Z"
+            fill="url(#paint0_linear_3242_495)" />
+        <path
+            d="M52.2062 30.0437L43.1677 21.0052L43.1513 20.9888L43.1155 20.9575C43.057 20.9046 42.9958 20.8549 42.9321 20.8084C42.8874 20.7726 42.8427 20.7383 42.7949 20.707C42.7741 20.6921 42.7532 20.6802 42.7308 20.6668C42.2155 20.3293 41.5922 20.1979 40.9845 20.2987C40.3768 20.3995 39.8293 20.7252 39.4506 21.211L25.3934 35.2697V22.7452C25.3934 22.0868 25.1318 21.4554 24.6663 20.9898C24.2007 20.5242 23.5693 20.2627 22.9109 20.2627C22.2525 20.2627 21.621 20.5242 21.1555 20.9898C20.6899 21.4554 20.4283 22.0868 20.4283 22.7452V35.2697L15.2963 30.1376C14.8272 29.6903 14.2017 29.4442 13.5536 29.4519C12.9055 29.4596 12.286 29.7205 11.8277 30.1789C11.3694 30.6372 11.1085 31.2566 11.1008 31.9048C11.0931 32.5529 11.3392 33.1784 11.7865 33.6475L21.156 43.017C21.2148 43.0766 21.2771 43.1329 21.3423 43.1854C21.405 43.2361 21.4706 43.2853 21.5362 43.3345C21.8747 43.5539 22.2616 43.6875 22.6634 43.7237H22.6738C22.7543 43.7312 22.8348 43.7356 22.9153 43.7356H22.9526C23.0202 43.7356 23.0873 43.7326 23.1539 43.7267H23.2031C23.2672 43.7192 23.3313 43.7118 23.394 43.6983H23.4223C23.4924 43.6834 23.5624 43.667 23.631 43.6462H23.643C23.7178 43.6236 23.7915 43.5972 23.8636 43.5671C23.9665 43.5246 24.0661 43.4748 24.1618 43.418L24.2185 43.3852C24.3123 43.3279 24.4019 43.2641 24.4869 43.1944L24.5122 43.172C24.5644 43.1273 24.6166 43.0826 24.6613 43.0319L38.9153 28.7689V41.2546C38.9153 41.913 39.1769 42.5444 39.6425 43.01C40.108 43.4756 40.7395 43.7371 41.3979 43.7371C42.0563 43.7371 42.6877 43.4756 43.1533 43.01C43.6188 42.5444 43.8804 41.913 43.8804 41.2546V28.7301L48.6963 33.555C49.1638 34.0114 49.7924 34.265 50.4457 34.261C51.099 34.257 51.7244 33.9957 52.1862 33.5336C52.6481 33.0715 52.9092 32.446 52.9129 31.7927C52.9167 31.1395 52.6627 30.511 52.2062 30.0437Z"
+            fill="white" />
+    </g>
+    <defs>
+        <linearGradient id="paint0_linear_3242_495" x1="4.28217" y1="15.997" x2="59.7178"
+            y2="48.0015" gradientUnits="userSpaceOnUse">
+            <stop offset="0.13" stop-color="#348BED" />
+            <stop offset="0.31" stop-color="#2B80E8" />
+            <stop offset="0.64" stop-color="#1461DB" />
+            <stop offset="0.72" stop-color="#0E57D7" />
+        </linearGradient>
+        <clipPath id="clip0_3242_495">
+            <rect width="200.839" height="64" fill="white" />
+        </clipPath>
+    </defs>
+</svg>
diff --git a/packages/shared/assets/logos/transak-text.svg b/packages/shared/assets/logos/transak-text.svg
new file mode 100644
index 0000000000..430e0f6b0f
--- /dev/null
+++ b/packages/shared/assets/logos/transak-text.svg
@@ -0,0 +1,16 @@
+<svg viewBox="74.756 19.833 126.244 24.43" width="126.244px" height="24.43px" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="clip0_3242_495">
+      <rect width="200.839" height="64" fill="white"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#clip0_3242_495)">
+    <path d="M75.1797 24.5303H82.5453V43.7703H86.9572V24.5303H94.3227V20.4092H75.1797V24.5303Z" fill="#1461DB"/>
+    <path d="M103.99 26.2091C103.468 26.2453 102.951 26.3378 102.448 26.4849C101.964 26.6257 101.501 26.8298 101.071 27.0917C100.529 27.4079 100.055 27.8273 99.675 28.3263C99.4958 28.5632 99.3334 28.8123 99.1889 29.0718V26.2493H95.2959V43.7702H99.748V34.8152C99.7362 34.2007 99.8264 33.5885 100.015 33.0036C100.186 32.4859 100.463 32.0098 100.829 31.6061C101.196 31.2023 101.642 30.8799 102.141 30.6597C102.689 30.4032 103.28 30.2515 103.884 30.2124C104.454 30.156 105.03 30.2065 105.581 30.3615V26.2493C105.053 26.1838 104.52 26.1703 103.99 26.2091Z" fill="#1461DB"/>
+    <path d="M122.322 28.942C121.748 27.8129 120.778 26.9352 119.597 26.4774C118.397 26.0003 117.023 25.7617 115.476 25.7617C113.367 25.7617 111.702 26.2165 110.479 27.126C109.281 27.999 108.404 29.2417 107.982 30.6627L111.972 31.927C112.254 31.1259 112.746 30.5692 113.448 30.2571C114.083 29.9584 114.774 29.7978 115.476 29.7859C116.645 29.7859 117.478 30.0295 117.975 30.5165C118.364 30.8967 118.596 31.4529 118.68 32.1716C117.934 32.2834 117.226 32.3893 116.563 32.4862C115.429 32.6542 114.412 32.8301 113.514 33.014C112.726 33.1683 111.951 33.3796 111.194 33.6462C110.368 33.9281 109.604 34.3682 108.947 34.9419C108.407 35.4292 107.993 36.0386 107.737 36.7191C107.482 37.4317 107.356 38.1839 107.365 38.9407C107.354 39.8737 107.587 40.7934 108.039 41.6096C108.499 42.4316 109.186 43.1043 110.017 43.5479C110.888 44.03 111.951 44.2706 113.205 44.2696C114.72 44.2696 115.972 44.0072 116.961 43.4823C117.81 43.0089 118.562 42.3778 119.175 41.6231V43.7835H123.037V33.0617C123.04 32.3364 123.007 31.6113 122.938 30.8893C122.863 30.206 122.654 29.5442 122.322 28.942ZM118.201 38.4487C118.019 38.7855 117.793 39.0963 117.529 39.3731C117.149 39.7785 116.698 40.111 116.199 40.3542C115.559 40.6593 114.855 40.8065 114.146 40.7836C113.697 40.7947 113.251 40.7177 112.832 40.557C112.49 40.4264 112.194 40.1983 111.981 39.9009C111.776 39.5973 111.672 39.2368 111.683 38.8707C111.679 38.5943 111.743 38.3214 111.87 38.076C112.013 37.8161 112.213 37.5914 112.453 37.4184C112.776 37.1876 113.127 36.9996 113.497 36.8593C113.927 36.7033 114.365 36.5733 114.811 36.4701C115.308 36.3509 115.962 36.2182 116.774 36.072C117.292 35.9796 117.924 35.8693 118.646 35.747C118.637 36.0586 118.623 36.3941 118.599 36.7907C118.576 37.364 118.44 37.9271 118.201 38.4487Z" fill="#1461DB"/>
+    <path d="M143.232 30.4267C143.017 29.6288 142.669 28.8728 142.203 28.1902C141.684 27.4448 140.991 26.8377 140.183 26.4219C139.318 25.9577 138.199 25.7256 136.825 25.7256C135.106 25.7256 133.681 26.0983 132.551 26.8438C132.032 27.1864 131.561 27.5949 131.147 28.059V26.2489H127.222V43.7698H131.695V34.8804C131.695 33.787 131.816 32.9108 132.058 32.2517C132.301 31.5927 132.614 31.0927 132.998 30.7518C133.343 30.4292 133.76 30.1927 134.215 30.0614C134.61 29.9475 135.019 29.8873 135.431 29.8825C136.371 29.8825 137.099 30.0937 137.613 30.5162C138.121 30.9286 138.505 31.4728 138.725 32.0892C138.946 32.692 139.083 33.3229 139.13 33.9634C139.174 34.5847 139.195 35.0956 139.194 35.4962V43.7698H143.667V33.9381C143.667 33.6399 143.647 33.1821 143.603 32.5425C143.547 31.827 143.423 31.1185 143.232 30.4267Z" fill="#1461DB"/>
+    <path d="M159.756 34.4942C158.948 34.037 157.88 33.6344 156.551 33.2865C155.189 32.9406 154.175 32.6593 153.51 32.4426C152.845 32.2259 152.407 32.0152 152.196 31.8104C152.093 31.7124 152.011 31.5938 151.957 31.4623C151.902 31.3309 151.875 31.1894 151.879 31.047C151.879 30.5386 152.125 30.1524 152.617 29.8796C153.109 29.6067 153.762 29.5023 154.571 29.556C155.404 29.6206 156.064 29.8423 156.551 30.221C156.791 30.4059 156.989 30.6383 157.135 30.9036C157.28 31.1689 157.369 31.4614 157.395 31.7627L161.906 30.9501C161.773 29.9345 161.353 28.9777 160.696 28.1917C160.003 27.3862 159.119 26.7675 158.124 26.3921C156.959 25.9511 155.72 25.736 154.474 25.7584C153.058 25.7584 151.828 25.9831 150.784 26.4324C149.808 26.8267 148.965 27.492 148.355 28.3498C147.772 29.2131 147.472 30.2365 147.497 31.2781C147.473 32.0804 147.669 32.8739 148.063 33.5728C148.442 34.207 149.059 34.7507 149.913 35.204C150.768 35.6572 151.911 36.0682 153.343 36.437C154.607 36.773 155.54 37.0434 156.14 37.2481C156.736 37.4539 157.127 37.6611 157.3 37.8729C157.482 38.1118 157.574 38.4076 157.559 38.7078C157.569 38.9601 157.515 39.2108 157.402 39.4364C157.288 39.662 157.119 39.8551 156.911 39.9975C156.475 40.3047 155.86 40.4583 155.065 40.4583C154.091 40.4583 153.288 40.2257 152.655 39.7605C152.019 39.2907 151.582 38.5989 151.431 37.8222L146.915 38.52C147.207 40.3479 148.032 41.7624 149.389 42.7634C150.745 43.7643 152.527 44.2643 154.734 44.2633C157.027 44.2633 158.822 43.7494 160.119 42.7216C161.417 41.6938 162.068 40.2803 162.073 38.4812C162.096 37.6699 161.906 36.8667 161.521 36.1522C161.15 35.5101 160.562 34.9574 159.756 34.4942Z" fill="#1461DB"/>
+    <path d="M179.62 28.942C179.046 27.8131 178.076 26.9356 176.895 26.4774C175.694 26.0003 174.32 25.7617 172.774 25.7617C170.665 25.7617 169 26.2165 167.777 27.126C166.579 27.9993 165.701 29.2418 165.278 30.6627L169.27 31.927C169.552 31.1259 170.044 30.5692 170.746 30.2571C171.381 29.9584 172.072 29.7978 172.774 29.7859C173.943 29.7859 174.776 30.0295 175.273 30.5165C175.662 30.8968 175.893 31.4529 175.978 32.1716C175.232 32.2834 174.524 32.3893 173.861 32.4862C172.726 32.6542 171.71 32.8301 170.812 33.014C170.024 33.1683 169.249 33.3796 168.492 33.6462C167.551 33.9941 166.802 34.424 166.245 34.9359C165.705 35.4232 165.291 36.0327 165.035 36.7132C164.779 37.4255 164.653 38.1779 164.663 38.9348C164.652 39.8678 164.884 40.7874 165.337 41.6037C165.797 42.4259 166.484 43.0987 167.315 43.542C168.186 44.0241 169.248 44.2646 170.503 44.2636C172.018 44.2636 173.27 44.0012 174.259 43.4764C175.108 43.0029 175.86 42.3719 176.473 41.6171V43.7776H180.335V33.0617C180.338 32.3364 180.305 31.6113 180.236 30.8893C180.161 30.206 179.952 29.5442 179.62 28.942ZM175.499 38.4487C175.317 38.7855 175.091 39.0963 174.827 39.3731C174.447 39.7785 173.996 40.111 173.497 40.3542C172.857 40.6593 172.153 40.8065 171.444 40.7836C170.995 40.7947 170.549 40.7177 170.13 40.557C169.788 40.4264 169.492 40.1983 169.279 39.9009C169.074 39.5973 168.969 39.2369 168.981 38.8707C168.977 38.5943 169.041 38.3214 169.168 38.076C169.311 37.8157 169.51 37.591 169.751 37.4184C170.074 37.1876 170.424 36.9996 170.795 36.8593C171.225 36.7031 171.663 36.5731 172.109 36.4701C172.606 36.3509 173.26 36.2182 174.072 36.072C174.59 35.9796 175.222 35.8693 175.944 35.747C175.935 36.0586 175.92 36.3941 175.897 36.7907C175.872 37.3638 175.737 37.9267 175.499 38.4487Z" fill="#1461DB"/>
+    <path d="M194.091 35.0091L200.417 26.2495H194.966L189.029 34.6856V20.4092H184.551L184.519 43.7703H189.029V35.3342L195.096 43.7703H200.839L194.091 35.0091Z" fill="#1461DB"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/shared/assets/logos/transak.svg b/packages/shared/assets/logos/transak.svg
deleted file mode 100644
index cf5148db37..0000000000
--- a/packages/shared/assets/logos/transak.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg width="201" height="64" viewBox="0 0 201 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3242_495)">
-<path d="M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 49.6731 14.3269 64 32 64Z" fill="url(#paint0_linear_3242_495)"/>
-<path d="M52.2062 30.0437L43.1677 21.0052L43.1513 20.9888L43.1155 20.9575C43.057 20.9046 42.9958 20.8549 42.9321 20.8084C42.8874 20.7726 42.8427 20.7383 42.7949 20.707C42.7741 20.6921 42.7532 20.6802 42.7308 20.6668C42.2155 20.3293 41.5922 20.1979 40.9845 20.2987C40.3768 20.3995 39.8293 20.7252 39.4506 21.211L25.3934 35.2697V22.7452C25.3934 22.0868 25.1318 21.4554 24.6663 20.9898C24.2007 20.5242 23.5693 20.2627 22.9109 20.2627C22.2525 20.2627 21.621 20.5242 21.1555 20.9898C20.6899 21.4554 20.4283 22.0868 20.4283 22.7452V35.2697L15.2963 30.1376C14.8272 29.6903 14.2017 29.4442 13.5536 29.4519C12.9055 29.4596 12.286 29.7205 11.8277 30.1789C11.3694 30.6372 11.1085 31.2566 11.1008 31.9048C11.0931 32.5529 11.3392 33.1784 11.7865 33.6475L21.156 43.017C21.2148 43.0766 21.2771 43.1329 21.3423 43.1854C21.405 43.2361 21.4706 43.2853 21.5362 43.3345C21.8747 43.5539 22.2616 43.6875 22.6634 43.7237H22.6738C22.7543 43.7312 22.8348 43.7356 22.9153 43.7356H22.9526C23.0202 43.7356 23.0873 43.7326 23.1539 43.7267H23.2031C23.2672 43.7192 23.3313 43.7118 23.394 43.6983H23.4223C23.4924 43.6834 23.5624 43.667 23.631 43.6462H23.643C23.7178 43.6236 23.7915 43.5972 23.8636 43.5671C23.9665 43.5246 24.0661 43.4748 24.1618 43.418L24.2185 43.3852C24.3123 43.3279 24.4019 43.2641 24.4869 43.1944L24.5122 43.172C24.5644 43.1273 24.6166 43.0826 24.6613 43.0319L38.9153 28.7689V41.2546C38.9153 41.913 39.1769 42.5444 39.6425 43.01C40.108 43.4756 40.7395 43.7371 41.3979 43.7371C42.0563 43.7371 42.6877 43.4756 43.1533 43.01C43.6188 42.5444 43.8804 41.913 43.8804 41.2546V28.7301L48.6963 33.555C49.1638 34.0114 49.7924 34.265 50.4457 34.261C51.099 34.257 51.7244 33.9957 52.1862 33.5336C52.6481 33.0715 52.9092 32.446 52.9129 31.7927C52.9167 31.1395 52.6627 30.511 52.2062 30.0437Z" fill="white"/>
-<path d="M75.1797 24.5303H82.5453V43.7703H86.9572V24.5303H94.3227V20.4092H75.1797V24.5303Z" fill="#1461DB"/>
-<path d="M103.99 26.2091C103.468 26.2453 102.951 26.3378 102.448 26.4849C101.964 26.6257 101.501 26.8298 101.071 27.0917C100.529 27.4079 100.055 27.8273 99.675 28.3263C99.4958 28.5632 99.3334 28.8123 99.1889 29.0718V26.2493H95.2959V43.7702H99.748V34.8152C99.7362 34.2007 99.8264 33.5885 100.015 33.0036C100.186 32.4859 100.463 32.0098 100.829 31.6061C101.196 31.2023 101.642 30.8799 102.141 30.6597C102.689 30.4032 103.28 30.2515 103.884 30.2124C104.454 30.156 105.03 30.2065 105.581 30.3615V26.2493C105.053 26.1838 104.52 26.1703 103.99 26.2091Z" fill="#1461DB"/>
-<path d="M122.322 28.942C121.748 27.8129 120.778 26.9352 119.597 26.4774C118.397 26.0003 117.023 25.7617 115.476 25.7617C113.367 25.7617 111.702 26.2165 110.479 27.126C109.281 27.999 108.404 29.2417 107.982 30.6627L111.972 31.927C112.254 31.1259 112.746 30.5692 113.448 30.2571C114.083 29.9584 114.774 29.7978 115.476 29.7859C116.645 29.7859 117.478 30.0295 117.975 30.5165C118.364 30.8967 118.596 31.4529 118.68 32.1716C117.934 32.2834 117.226 32.3893 116.563 32.4862C115.429 32.6542 114.412 32.8301 113.514 33.014C112.726 33.1683 111.951 33.3796 111.194 33.6462C110.368 33.9281 109.604 34.3682 108.947 34.9419C108.407 35.4292 107.993 36.0386 107.737 36.7191C107.482 37.4317 107.356 38.1839 107.365 38.9407C107.354 39.8737 107.587 40.7934 108.039 41.6096C108.499 42.4316 109.186 43.1043 110.017 43.5479C110.888 44.03 111.951 44.2706 113.205 44.2696C114.72 44.2696 115.972 44.0072 116.961 43.4823C117.81 43.0089 118.562 42.3778 119.175 41.6231V43.7835H123.037V33.0617C123.04 32.3364 123.007 31.6113 122.938 30.8893C122.863 30.206 122.654 29.5442 122.322 28.942ZM118.201 38.4487C118.019 38.7855 117.793 39.0963 117.529 39.3731C117.149 39.7785 116.698 40.111 116.199 40.3542C115.559 40.6593 114.855 40.8065 114.146 40.7836C113.697 40.7947 113.251 40.7177 112.832 40.557C112.49 40.4264 112.194 40.1983 111.981 39.9009C111.776 39.5973 111.672 39.2368 111.683 38.8707C111.679 38.5943 111.743 38.3214 111.87 38.076C112.013 37.8161 112.213 37.5914 112.453 37.4184C112.776 37.1876 113.127 36.9996 113.497 36.8593C113.927 36.7033 114.365 36.5733 114.811 36.4701C115.308 36.3509 115.962 36.2182 116.774 36.072C117.292 35.9796 117.924 35.8693 118.646 35.747C118.637 36.0586 118.623 36.3941 118.599 36.7907C118.576 37.364 118.44 37.9271 118.201 38.4487Z" fill="#1461DB"/>
-<path d="M143.232 30.4267C143.017 29.6288 142.669 28.8728 142.203 28.1902C141.684 27.4448 140.991 26.8377 140.183 26.4219C139.318 25.9577 138.199 25.7256 136.825 25.7256C135.106 25.7256 133.681 26.0983 132.551 26.8438C132.032 27.1864 131.561 27.5949 131.147 28.059V26.2489H127.222V43.7698H131.695V34.8804C131.695 33.787 131.816 32.9108 132.058 32.2517C132.301 31.5927 132.614 31.0927 132.998 30.7518C133.343 30.4292 133.76 30.1927 134.215 30.0614C134.61 29.9475 135.019 29.8873 135.431 29.8825C136.371 29.8825 137.099 30.0937 137.613 30.5162C138.121 30.9286 138.505 31.4728 138.725 32.0892C138.946 32.692 139.083 33.3229 139.13 33.9634C139.174 34.5847 139.195 35.0956 139.194 35.4962V43.7698H143.667V33.9381C143.667 33.6399 143.647 33.1821 143.603 32.5425C143.547 31.827 143.423 31.1185 143.232 30.4267Z" fill="#1461DB"/>
-<path d="M159.756 34.4942C158.948 34.037 157.88 33.6344 156.551 33.2865C155.189 32.9406 154.175 32.6593 153.51 32.4426C152.845 32.2259 152.407 32.0152 152.196 31.8104C152.093 31.7124 152.011 31.5938 151.957 31.4623C151.902 31.3309 151.875 31.1894 151.879 31.047C151.879 30.5386 152.125 30.1524 152.617 29.8796C153.109 29.6067 153.762 29.5023 154.571 29.556C155.404 29.6206 156.064 29.8423 156.551 30.221C156.791 30.4059 156.989 30.6383 157.135 30.9036C157.28 31.1689 157.369 31.4614 157.395 31.7627L161.906 30.9501C161.773 29.9345 161.353 28.9777 160.696 28.1917C160.003 27.3862 159.119 26.7675 158.124 26.3921C156.959 25.9511 155.72 25.736 154.474 25.7584C153.058 25.7584 151.828 25.9831 150.784 26.4324C149.808 26.8267 148.965 27.492 148.355 28.3498C147.772 29.2131 147.472 30.2365 147.497 31.2781C147.473 32.0804 147.669 32.8739 148.063 33.5728C148.442 34.207 149.059 34.7507 149.913 35.204C150.768 35.6572 151.911 36.0682 153.343 36.437C154.607 36.773 155.54 37.0434 156.14 37.2481C156.736 37.4539 157.127 37.6611 157.3 37.8729C157.482 38.1118 157.574 38.4076 157.559 38.7078C157.569 38.9601 157.515 39.2108 157.402 39.4364C157.288 39.662 157.119 39.8551 156.911 39.9975C156.475 40.3047 155.86 40.4583 155.065 40.4583C154.091 40.4583 153.288 40.2257 152.655 39.7605C152.019 39.2907 151.582 38.5989 151.431 37.8222L146.915 38.52C147.207 40.3479 148.032 41.7624 149.389 42.7634C150.745 43.7643 152.527 44.2643 154.734 44.2633C157.027 44.2633 158.822 43.7494 160.119 42.7216C161.417 41.6938 162.068 40.2803 162.073 38.4812C162.096 37.6699 161.906 36.8667 161.521 36.1522C161.15 35.5101 160.562 34.9574 159.756 34.4942Z" fill="#1461DB"/>
-<path d="M179.62 28.942C179.046 27.8131 178.076 26.9356 176.895 26.4774C175.694 26.0003 174.32 25.7617 172.774 25.7617C170.665 25.7617 169 26.2165 167.777 27.126C166.579 27.9993 165.701 29.2418 165.278 30.6627L169.27 31.927C169.552 31.1259 170.044 30.5692 170.746 30.2571C171.381 29.9584 172.072 29.7978 172.774 29.7859C173.943 29.7859 174.776 30.0295 175.273 30.5165C175.662 30.8968 175.893 31.4529 175.978 32.1716C175.232 32.2834 174.524 32.3893 173.861 32.4862C172.726 32.6542 171.71 32.8301 170.812 33.014C170.024 33.1683 169.249 33.3796 168.492 33.6462C167.551 33.9941 166.802 34.424 166.245 34.9359C165.705 35.4232 165.291 36.0327 165.035 36.7132C164.779 37.4255 164.653 38.1779 164.663 38.9348C164.652 39.8678 164.884 40.7874 165.337 41.6037C165.797 42.4259 166.484 43.0987 167.315 43.542C168.186 44.0241 169.248 44.2646 170.503 44.2636C172.018 44.2636 173.27 44.0012 174.259 43.4764C175.108 43.0029 175.86 42.3719 176.473 41.6171V43.7776H180.335V33.0617C180.338 32.3364 180.305 31.6113 180.236 30.8893C180.161 30.206 179.952 29.5442 179.62 28.942ZM175.499 38.4487C175.317 38.7855 175.091 39.0963 174.827 39.3731C174.447 39.7785 173.996 40.111 173.497 40.3542C172.857 40.6593 172.153 40.8065 171.444 40.7836C170.995 40.7947 170.549 40.7177 170.13 40.557C169.788 40.4264 169.492 40.1983 169.279 39.9009C169.074 39.5973 168.969 39.2369 168.981 38.8707C168.977 38.5943 169.041 38.3214 169.168 38.076C169.311 37.8157 169.51 37.591 169.751 37.4184C170.074 37.1876 170.424 36.9996 170.795 36.8593C171.225 36.7031 171.663 36.5731 172.109 36.4701C172.606 36.3509 173.26 36.2182 174.072 36.072C174.59 35.9796 175.222 35.8693 175.944 35.747C175.935 36.0586 175.92 36.3941 175.897 36.7907C175.872 37.3638 175.737 37.9267 175.499 38.4487Z" fill="#1461DB"/>
-<path d="M194.091 35.0091L200.417 26.2495H194.966L189.029 34.6856V20.4092H184.551L184.519 43.7703H189.029V35.3342L195.096 43.7703H200.839L194.091 35.0091Z" fill="#1461DB"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_3242_495" x1="4.28217" y1="15.997" x2="59.7178" y2="48.0015" gradientUnits="userSpaceOnUse">
-<stop offset="0.13" stop-color="#348BED"/>
-<stop offset="0.31" stop-color="#2B80E8"/>
-<stop offset="0.64" stop-color="#1461DB"/>
-<stop offset="0.72" stop-color="#0E57D7"/>
-</linearGradient>
-<clipPath id="clip0_3242_495">
-<rect width="200.839" height="64" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
index d7d0018812..17457d5681 100644
--- a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
+++ b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
@@ -73,6 +73,7 @@ function buildTransakCryptoCurrencyFromResponseItem(
             large: responseItem.image.large,
         },
         network,
+        transakNetworkName: responseItem.network.name,
         decimals: responseItem.decimals,
     }
 }
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
index 0ca87fba69..6eeb606bfe 100644
--- 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
@@ -6,6 +6,7 @@ export type TransakCryptoCurrency = {
     symbol: string
     image: { thumb: string; small: string; large: string }
     network: Network
+    transakNetworkName: string
     decimals: number
 }
 
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index 0b6a918ad0..81d09e2b1d 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -816,11 +816,6 @@
             }
         },
         "buySell": {
-            "info": {
-                "receive": "Your selected account will receive tokens directly from Transak once your payment method has been authorised.",
-                "multipleAccounts": "If you have multiple accounts, you can switch with the account selector dropdown prior to purchase.",
-                "changingAccounts": "Changing accounts will reset all information."
-            },
             "tooltip": {
                 "connected": "connected securely",
                 "redirected": "redirected, be careful!",
@@ -833,6 +828,10 @@
             "tabs": {
                 "buy": "Buy tokens",
                 "sell": "Sell tokens"
+            },
+            "quotations": {
+                "title": "Quotations",
+                "description": "How would you like to buy your crypto?"
             }
         }
     },

From 95342f7c9d28637bbaccb71e8db2d84808f2a99b Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Wed, 24 Jul 2024 13:24:52 -0300
Subject: [PATCH 09/14] feat: buy/sell quotations timer (#2753)

* feat: adds buy/sell quotations timer

* fix: quote timer logic

Co-authored-by: Jean Ribeiro <contact@jeanribeiro.dev>

* refactor: cleanup quote loading state

---------

Co-authored-by: Nicole O'Brien <nicole@bloomwallet.io>
---
 .../popup/popups/TransakFramePopup.svelte     |   2 +-
 .../components/TransakConnectionBanner.svelte |   1 -
 .../TransakCryptoCurrencyAmountTile.svelte    |  49 +++++----
 .../components/TransakExchangePanel.svelte    | 101 ++++++++++++++----
 packages/shared/src/locales/en.json           |   8 +-
 5 files changed, 120 insertions(+), 41 deletions(-)

diff --git a/packages/desktop/components/popup/popups/TransakFramePopup.svelte b/packages/desktop/components/popup/popups/TransakFramePopup.svelte
index 455b94a3da..b05c64f47b 100644
--- a/packages/desktop/components/popup/popups/TransakFramePopup.svelte
+++ b/packages/desktop/components/popup/popups/TransakFramePopup.svelte
@@ -7,7 +7,7 @@
     import { localize } from '@core/i18n'
     import { FiatCurrency } from '@core/market'
     import { IPopupState, popupState } from '@desktop/auxiliary/popup'
-    import TransakConnectionBanner from '@views/dashboard/buy-sell/components/TransakConnectionBanner.svelte'
+    import { TransakConnectionBanner } from '@views/dashboard/buy-sell/components'
     import { onDestroy, onMount, tick } from 'svelte'
 
     export let isBuyOrSell: 'BUY' | 'SELL' | undefined = undefined
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
index 28aea45845..b452bc12dc 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
@@ -42,7 +42,6 @@
 
 <div class="flex flex-row items-center w-full p-6 gap-4 bg-surface-1 dark:bg-surface-1-dark rounded-t-[32px]">
     <img class="w-10 h-10" src="assets/logos/transak-icon.svg" alt="Transak" />
-
     <div class="flex flex-col items-start gap-2">
         <img class="h-4" src="assets/logos/transak-text.svg" alt="Transak" />
         <div class="flex items-center gap-1 w-full h-3">
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
index d1cbb769f6..44c1ae43c8 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
@@ -4,29 +4,38 @@
     import { FiatCurrency } from '@core/market'
     import { formatCurrency } from '@core/i18n'
 
-    export let cryptoCurrency: TransakCryptoCurrency | undefined
-    export let fiatAmount: number | undefined
-    export let fiatSymbol: keyof typeof FiatCurrency | string | undefined
-    export let cryptoAmount: number | undefined
-
-    $: isLoading = !cryptoCurrency || !fiatAmount || !fiatSymbol || !cryptoAmount
+    export let isLoading: boolean = false
+    export let cryptoCurrency: TransakCryptoCurrency | undefined = undefined
+    export let fiatAmount: number | undefined = undefined
+    export let fiatSymbol: keyof typeof FiatCurrency | string | undefined = undefined
+    export let cryptoAmount: number | undefined = undefined
 </script>
 
 <Tile surface={1} width="full" class={isLoading ? 'animate-pulse' : ''}>
     <div class="w-full flex justify-between items-center gap-2">
-        <img
-            data-label="transak-logo"
-            width="90"
-            height="28"
-            src="assets/logos/transak.svg"
-            alt="Transak"
-            class:opacity-0={isLoading}
-        />
-        <div class="flex flex-col">
-            <Text align="right"
-                >{cryptoAmount ? `≈ ${formatCurrency(String(cryptoAmount), cryptoCurrency?.symbol)}` : '​'}</Text
-            >
-            <Text align="right">{fiatAmount && fiatSymbol ? formatCurrency(String(fiatAmount), fiatSymbol) : '​'}</Text>
-        </div>
+        {#if isLoading}
+            <div class="w-7 h-7 rounded-full bg-surface-2 dark:bg-surface-2-dark animate-pulse"></div>
+            <div class="flex flex-col items-end gap-1">
+                <div class="w-16 h-4 bg-surface-2 dark:bg-surface-2-dark animate-pulse"></div>
+                <div class="w-12 h-4 bg-surface-2 dark:bg-surface-2-dark animate-pulse"></div>
+            </div>
+        {:else}
+            <img
+                data-label="transak-logo"
+                width="90"
+                height="28"
+                src="assets/logos/transak.svg"
+                alt="Transak"
+                class:opacity-0={isLoading}
+            />
+            <div class="flex flex-col">
+                <Text align="right"
+                    >{cryptoAmount ? `≈ ${formatCurrency(String(cryptoAmount), cryptoCurrency?.symbol)}` : '​'}</Text
+                >
+                <Text align="right"
+                    >{fiatAmount && fiatSymbol ? formatCurrency(String(fiatAmount), fiatSymbol) : '​'}</Text
+                >
+            </div>
+        {/if}
     </div>
 </Tile>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index ebd2ea5dbc..693adceb59 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -7,7 +7,7 @@
         TransakFiatCurrencies,
         transakFiatCurrencies,
     } from '@auxiliary/transak'
-    import { Button, IconName, IOption, SelectInput, Tabs, Text } from '@bloomwalletio/ui'
+    import { Button, IconName, IOption, Pill, SelectInput, Tabs, Text } from '@bloomwalletio/ui'
     import { getAddressFromAccountForNetwork, IAccountState } from '@core/account'
     import { selectedAccount } from '@core/account/stores'
     import { localize } from '@core/i18n'
@@ -22,6 +22,7 @@
     import { onDestroy } from 'svelte'
     import { TransakAmountInput, TransakCryptoCurrencyTile } from './'
     import TransakCryptoCurrencyAmountTile from './TransakCryptoCurrencyAmountTile.svelte'
+    import { getBestTimeDuration, MILLISECONDS_PER_SECOND } from '@core/utils'
 
     // Buy / Sell Tabs
     const TABS = [
@@ -114,10 +115,15 @@
     $: updateSelectedRecipient($selectedAccount, selectedCryptoCurrency)
 
     // Quotations
-    let quote: { fiatAmount: number; cryptoAmount: number } | undefined = undefined
+    let quotes: ({ fiatAmount: number; cryptoAmount: number } | undefined)[] = new Array(3).fill(undefined)
     let latestQuoteRequestId = 0
+    let loading = false
     async function updateQuote(): Promise<void> {
+        loading = true
+        stopQuoteTimer()
+
         if (!selectedPaymentOption) {
+            loading = false
             return
         }
 
@@ -130,21 +136,60 @@
             fiatAmount: Number(fiatValue),
         }
 
-        quote = undefined
+        quotes = []
 
         const requestId = ++latestQuoteRequestId // Increment the request ID
         const response = await getTransakPrice(params)
 
         // Only update the quote if this is the latest request
-        if (requestId === latestQuoteRequestId && response) {
-            quote = {
-                fiatAmount: response.fiatAmount,
-                cryptoAmount: response.cryptoAmount,
-            }
+        if (requestId !== latestQuoteRequestId) {
+            return
+        }
+
+        if (response) {
+            quotes = [
+                {
+                    fiatAmount: response.fiatAmount,
+                    cryptoAmount: response.cryptoAmount,
+                },
+            ]
+            startQuoteTimer()
         }
+
+        loading = false
     }
     $: selectedCurrency, selectedCryptoCurrency, selectedPaymentOption, fiatValue, void updateQuote()
 
+    // Quotations timer
+    let displayedQuotationTime: string | null = null
+    let interval
+    let timeout
+    function startQuoteTimer(): void {
+        clearInterval(interval)
+        clearTimeout(timeout)
+
+        const maxQuoteTime = 30 * MILLISECONDS_PER_SECOND
+        let quotationTimeInMillis = maxQuoteTime
+        displayedQuotationTime = getBestTimeDuration(quotationTimeInMillis)
+
+        interval = setInterval(() => {
+            quotationTimeInMillis -= MILLISECONDS_PER_SECOND
+            displayedQuotationTime = getBestTimeDuration(quotationTimeInMillis)
+        }, MILLISECONDS_PER_SECOND)
+
+        timeout = setTimeout(() => {
+            clearInterval(interval)
+            displayedQuotationTime = null
+            updateQuote()
+        }, maxQuoteTime)
+    }
+
+    function stopQuoteTimer(): void {
+        clearInterval(interval)
+        clearTimeout(timeout)
+        displayedQuotationTime = null
+    }
+
     // Handlers
     function onTokenTileClick(): void {
         openPopup({ id: PopupId.TransakSelectToken })
@@ -168,6 +213,7 @@
 
     onDestroy(() => {
         $selectedExchangeCryptoCurrency = undefined
+        stopQuoteTimer()
     })
 </script>
 
@@ -211,17 +257,36 @@
     <div class="w-full h-full flex flex-col justify-between pl-4">
         <div class="flex flex-col gap-3">
             <div class="flex flex-col items-center gap-2">
-                <Text type="h6" align="center">{localize('views.buySell.quotations.title')}</Text>
-                <Text type="body2" textColor="secondary" align="center"
-                    >{localize('views.buySell.quotations.description')}</Text
-                >
+                <Text type="h6" align="center">
+                    {localize('views.buySell.quotations.title')}
+                </Text>
+                <Text type="body2" textColor="secondary" align="center">
+                    {loading || quotes.length > 0
+                        ? localize('views.buySell.quotations.description')
+                        : localize('views.buySell.quotations.noQuotes')}
+                </Text>
+                <Pill color="neutral" compact>
+                    {displayedQuotationTime
+                        ? localize('views.buySell.quotations.pill.newQuotes', { time: displayedQuotationTime })
+                        : loading
+                          ? localize('views.buySell.quotations.pill.fetchingQuotes')
+                          : localize('views.buySell.quotations.pill.noQuotes')}
+                </Pill>
             </div>
-            <TransakCryptoCurrencyAmountTile
-                cryptoCurrency={selectedCryptoCurrency}
-                fiatAmount={quote?.fiatAmount}
-                fiatSymbol={selectedCurrency}
-                cryptoAmount={quote?.cryptoAmount}
-            />
+            {#if loading}
+                <TransakCryptoCurrencyAmountTile isLoading />
+                <TransakCryptoCurrencyAmountTile isLoading />
+                <TransakCryptoCurrencyAmountTile isLoading />
+            {:else if quotes.length > 0}
+                {#each quotes as quote}
+                    <TransakCryptoCurrencyAmountTile
+                        cryptoCurrency={selectedCryptoCurrency}
+                        fiatAmount={quote?.fiatAmount}
+                        fiatSymbol={selectedCurrency}
+                        cryptoAmount={quote?.cryptoAmount}
+                    />
+                {/each}
+            {/if}
         </div>
         <Button text={selectedTab.value} on:click={onButtonClick} width="full" disabled={isButtonDisabled} />
     </div>
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index 81d09e2b1d..d1f765e3bc 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -831,7 +831,13 @@
             },
             "quotations": {
                 "title": "Quotations",
-                "description": "How would you like to buy your crypto?"
+                "description": "How would you like to buy your crypto?",
+                "pill": {
+                    "newQuotes": "New quotes in {time}",
+                    "fetchingQuotes": "Fetching quotes",
+                    "noQuotes": "No quotes"
+                },
+                "noQuotes": "No quotes available please try again"
             }
         }
     },

From 6cc469a9918bd195f88a96570d99d337b2c61a8b Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Tue, 6 Aug 2024 06:58:53 -0300
Subject: [PATCH 10/14] feat: adds selectable quotation and dynamic text
 (#2759)

Co-authored-by: Nicole O'Brien <nicole@bloomwallet.io>
---
 .../TransakCryptoCurrencyAmountTile.svelte    |  4 +++-
 .../components/TransakExchangePanel.svelte    | 23 +++++++++++++++----
 packages/shared/src/locales/en.json           |  6 ++++-
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
index 44c1ae43c8..a0e87ad992 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
@@ -9,9 +9,11 @@
     export let fiatAmount: number | undefined = undefined
     export let fiatSymbol: keyof typeof FiatCurrency | string | undefined = undefined
     export let cryptoAmount: number | undefined = undefined
+    export let onClick: () => void = () => {}
+    export let selected: boolean = false
 </script>
 
-<Tile surface={1} width="full" class={isLoading ? 'animate-pulse' : ''}>
+<Tile surface={1} width="full" class={isLoading ? 'animate-pulse' : ''} {onClick} {selected}>
     <div class="w-full flex justify-between items-center gap-2">
         {#if isLoading}
             <div class="w-7 h-7 rounded-full bg-surface-2 dark:bg-surface-2-dark animate-pulse"></div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index 693adceb59..1f21b05823 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -115,12 +115,16 @@
     $: updateSelectedRecipient($selectedAccount, selectedCryptoCurrency)
 
     // Quotations
-    let quotes: ({ fiatAmount: number; cryptoAmount: number } | undefined)[] = new Array(3).fill(undefined)
+    let quotes: ({ fiatAmount: number; cryptoAmount: number; provider: string } | undefined)[] = new Array(3).fill(
+        undefined
+    )
+    let selectedQuoteId: number | undefined = undefined
     let latestQuoteRequestId = 0
     let loading = false
     async function updateQuote(): Promise<void> {
         loading = true
         stopQuoteTimer()
+        selectedQuoteId = undefined
 
         if (!selectedPaymentOption) {
             loading = false
@@ -151,6 +155,7 @@
                 {
                     fiatAmount: response.fiatAmount,
                     cryptoAmount: response.cryptoAmount,
+                    provider: 'Transak',
                 },
             ]
             startQuoteTimer()
@@ -209,7 +214,8 @@
             confirmClickOutside: true,
         })
     }
-    $: isButtonDisabled = !selectedCryptoCurrency || !selectedPaymentOption || !selectedRecipient
+    $: isButtonDisabled =
+        !selectedCryptoCurrency || !selectedPaymentOption || !selectedRecipient || selectedQuoteId === undefined
 
     onDestroy(() => {
         $selectedExchangeCryptoCurrency = undefined
@@ -278,16 +284,25 @@
                 <TransakCryptoCurrencyAmountTile isLoading />
                 <TransakCryptoCurrencyAmountTile isLoading />
             {:else if quotes.length > 0}
-                {#each quotes as quote}
+                {#each quotes as quote, i}
                     <TransakCryptoCurrencyAmountTile
                         cryptoCurrency={selectedCryptoCurrency}
                         fiatAmount={quote?.fiatAmount}
                         fiatSymbol={selectedCurrency}
                         cryptoAmount={quote?.cryptoAmount}
+                        onClick={() => (selectedQuoteId = i)}
+                        selected={selectedQuoteId === i}
                     />
                 {/each}
             {/if}
         </div>
-        <Button text={selectedTab.value} on:click={onButtonClick} width="full" disabled={isButtonDisabled} />
+        <Button
+            text={selectedQuoteId !== undefined
+                ? localize('views.buySell.quotations.button.selected', { provider: quotes[selectedQuoteId]?.provider })
+                : localize('views.buySell.quotations.button.unselected')}
+            on:click={onButtonClick}
+            width="full"
+            disabled={isButtonDisabled}
+        />
     </div>
 </Pane>
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index b703c73a3c..7f5f7696fb 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -840,7 +840,11 @@
                     "fetchingQuotes": "Fetching quotes",
                     "noQuotes": "No quotes"
                 },
-                "noQuotes": "No quotes available please try again"
+                "noQuotes": "No quotes available please try again",
+                "button": {
+                    "selected": "Continue with {provider}",
+                    "unselected": "No quote selected"
+                }
             }
         }
     },

From 32567b25bbe36563a413e5d4bd71f27c1c4ad2a3 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Tue, 6 Aug 2024 07:25:01 -0300
Subject: [PATCH 11/14] feat: localise payment methods, improve icons and fix
 iframe width/border (#2760)

* enhancement: adds payment methods localization

* fix: remove array of undefined in quotes

* fix: getComputedStyle error and iframe out of bounds

* chore: update bloom ui kit version

---------

Co-authored-by: Nicole O'Brien <nicole@bloomwallet.io>
---
 .../popup/popups/TransakFramePopup.svelte     |  16 +--
 .../components/TransakExchangePanel.svelte    |   6 +-
 packages/shared/package.json                  |   2 +-
 .../actions/updateTransakFiatCurrencies.ts    |   4 +-
 .../stores/transak-fiat-currencies.store.ts   |   1 -
 packages/shared/src/locales/en.json           |  21 ++++
 yarn.lock                                     | 113 ++++++++++--------
 7 files changed, 95 insertions(+), 68 deletions(-)

diff --git a/packages/desktop/components/popup/popups/TransakFramePopup.svelte b/packages/desktop/components/popup/popups/TransakFramePopup.svelte
index b05c64f47b..2bd9237cfc 100644
--- a/packages/desktop/components/popup/popups/TransakFramePopup.svelte
+++ b/packages/desktop/components/popup/popups/TransakFramePopup.svelte
@@ -49,18 +49,14 @@
         }
 
         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,
+            // Safe 1px padding to prevent the iframe from being out of bounds
+            x: rect.x + 1,
+            y: rect.y,
+            // Safe 2px padding to prevent the iframe from being out of bounds
+            width: rect.width - 2,
+            height: rect.height,
         })
     }
 
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index 1f21b05823..8557c163e2 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -80,7 +80,7 @@
         paymentOptions =
             supportedCurrencies?.[selectedCurrency as keyof typeof FiatCurrency]?.paymentOptions.map((option) => ({
                 value: option.id,
-                label: option.name,
+                label: localize(`views.buySell.paymentOptions.${option.id}`),
                 icon: option.id.includes('card') ? IconName.CreditCard : IconName.Bank,
             })) ?? []
         if (!paymentOptions.some((paymentOption) => paymentOption.value === selectedPaymentOption?.value)) {
@@ -115,9 +115,7 @@
     $: updateSelectedRecipient($selectedAccount, selectedCryptoCurrency)
 
     // Quotations
-    let quotes: ({ fiatAmount: number; cryptoAmount: number; provider: string } | undefined)[] = new Array(3).fill(
-        undefined
-    )
+    let quotes: { fiatAmount: number; cryptoAmount: number; provider: string }[] = []
     let selectedQuoteId: number | undefined = undefined
     let latestQuoteRequestId = 0
     let loading = false
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 72aad3be62..88dfecbd90 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <contact@bloomwallet.io>",
     "license": "PolyForm Strict License 1.0.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.21.9",
+        "@bloomwalletio/ui": "0.21.10",
         "@ethereumjs/common": "4.3.0",
         "@ethereumjs/rlp": "5.0.2",
         "@ethereumjs/tx": "5.3.0",
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
index bb339bb5e1..87dcf626d8 100644
--- a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
+++ b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
@@ -14,8 +14,8 @@ export async function updateTransakFiatCurrencies(): Promise<void> {
                 [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 }
+                        .map(({ id, minAmount, maxAmount }) => {
+                            return { id, minAmount, maxAmount }
                         }),
                 },
             }
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
index d612ee8b9e..78e030acb5 100644
--- 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
@@ -5,7 +5,6 @@ export type TransakFiatCurrencies = {
     [key in keyof typeof FiatCurrency]: {
         paymentOptions: {
             id: string
-            name: string
             minAmount: number
             maxAmount: number
             disabled?: boolean
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index 7f5f7696fb..0483f26a5b 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -845,6 +845,27 @@
                     "selected": "Continue with {provider}",
                     "unselected": "No quote selected"
                 }
+            },
+            "paymentOptions": {
+                "credit_debit_card": "Card Payment",
+                "apple_pay": "Apple Pay",
+                "google_pay": "Google Pay",
+                "pm_cash_app": "Cash App",
+                "pm_us_wire_bank_transfer": "Wire Transfer",
+                "gbp_bank_transfer": "Instant Transfer",
+                "pm_open_banking": "Open Banking",
+                "inr_bank_transfer": "IMPS",
+                "inr_upi": "UPI",
+                "sepa_bank_transfer": "SEPA Transfer",
+                "pm_astropay": "AstroPay",
+                "pm_pix": "Pix",
+                "pm_gcash": "GCash",
+                "pm_paymaya": "Maya",
+                "pm_bpi": "BPI",
+                "pm_ubp": "Union Bank",
+                "pm_grabpay": "GrabPay",
+                "pm_shopeepay": "ShopeePay",
+                "pm_pse": "PSE"
             }
         }
     },
diff --git a/yarn.lock b/yarn.lock
index 83356e84bb..58bb9d7e41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -343,10 +343,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.21.9":
-  version "0.21.9"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.21.9/6e15c4d64b92abdd4b02fe1d71ed169018721b02#6e15c4d64b92abdd4b02fe1d71ed169018721b02"
-  integrity sha512-kNcAV/kxhliDnpKtyZAUY345nOwX87JlmT3W6E2Sg5odPPCmbd5lsQxjNRzJR20D8xL3sQQKsmWBeqJojor9Ew==
+"@bloomwalletio/ui@0.21.10":
+  version "0.21.10"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.21.10/44e5f2c482c58afb570ea8abe125f3f119e00da5#44e5f2c482c58afb570ea8abe125f3f119e00da5"
+  integrity sha512-3177JmjcVIaw2pv12tVU8XvxXJvNGmYYl/X7RWXPD4uOtCFbxPXCG+j+6eBCz4ttf1U2piUf6y9wE02x3SZhFQ==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"
@@ -3641,14 +3641,14 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
-autoprefixer@10.4.16:
-  version "10.4.16"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.16.tgz#fad1411024d8670880bdece3970aa72e3572feb8"
-  integrity sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==
+autoprefixer@10.4.19:
+  version "10.4.19"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.19.tgz#ad25a856e82ee9d7898c59583c1afeb3fa65f89f"
+  integrity sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==
   dependencies:
-    browserslist "^4.21.10"
-    caniuse-lite "^1.0.30001538"
-    fraction.js "^4.3.6"
+    browserslist "^4.23.0"
+    caniuse-lite "^1.0.30001599"
+    fraction.js "^4.3.7"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
@@ -3912,6 +3912,16 @@ browserslist@^4.21.10, browserslist@^4.22.2:
     node-releases "^2.0.14"
     update-browserslist-db "^1.0.13"
 
+browserslist@^4.23.0:
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.3.tgz#debb029d3c93ebc97ffbc8d9cbb03403e227c800"
+  integrity sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==
+  dependencies:
+    caniuse-lite "^1.0.30001646"
+    electron-to-chromium "^1.5.4"
+    node-releases "^2.0.18"
+    update-browserslist-db "^1.1.0"
+
 bs58@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/bs58/-/bs58-5.0.0.tgz#865575b4d13c09ea2a84622df6c8cbeb54ffc279"
@@ -4074,11 +4084,16 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001587:
+caniuse-lite@^1.0.30001587:
   version "1.0.30001597"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz#8be94a8c1d679de23b22fbd944232aa1321639e6"
   integrity sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==
 
+caniuse-lite@^1.0.30001599, caniuse-lite@^1.0.30001646:
+  version "1.0.30001649"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001649.tgz#3ec700309ca0da2b0d3d5fb03c411b191761c992"
+  integrity sha512-fJegqZZ0ZX8HOWr6rcafGr72+xcgJKI9oWfDW5DrD7ExUtgZC7a7R7ZYmZqplh7XDocFdGeIFn7roAxhOeYrPQ==
+
 cargo-cp-artifact@^0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/cargo-cp-artifact/-/cargo-cp-artifact-0.1.8.tgz#353814f49f6aa76601a4bcb3ea5f3071180b90de"
@@ -4969,6 +4984,11 @@ electron-to-chromium@^1.4.668:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.701.tgz#7335e5761331774b4dea54cd24a1b84861d45cdf"
   integrity sha512-K3WPQ36bUOtXg/1+69bFlFOvdSm0/0bGqmsfPDLRXLanoKXdA+pIWuf/VbA9b+2CwBFuONgl4NEz4OEm+OJOKA==
 
+electron-to-chromium@^1.5.4:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.5.tgz#03bfdf422bdd2c05ee2657efedde21264a1a566b"
+  integrity sha512-QR7/A7ZkMS8tZuoftC/jfqNkZLQO779SSW3YuZHP4eXpj3EffGLFcB/Xu9AAZQzLccTiCV+EmUo3ha4mQ9wnlA==
+
 electron-updater@6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/electron-updater/-/electron-updater-6.2.1.tgz#1c9adb9ba2a21a5dc50a8c434c45360d5e9fe6c9"
@@ -5214,10 +5234,10 @@ es6-weak-map@^2.0.3:
     es6-iterator "^2.0.3"
     es6-symbol "^3.1.1"
 
-esbuild-loader@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/esbuild-loader/-/esbuild-loader-4.2.0.tgz#4aa4967e8721fddfc629695bb3c25ebec010066d"
-  integrity sha512-BhwHchuDknxIa69AqOPeZh2fIFqj2AzZKC1E3RBRvXSuyk5drsqMrwsgYZJufX41yrauLYjDM3KBmruoGl1NWQ==
+esbuild-loader@4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/esbuild-loader/-/esbuild-loader-4.2.2.tgz#cce9032097767d325d6aa231edbd7d66a5d7fa1b"
+  integrity sha512-Mdq/A1L8p37hkibp8jGFwuQTDSWhDmlueAefsrCPRwNWThEOlQmIglV7Gd6GE2mO5bt7ksfxKOMwkuY7jjVTXg==
   dependencies:
     esbuild "^0.21.0"
     get-tsconfig "^4.7.0"
@@ -5312,7 +5332,7 @@ esbuild@^0.21.0:
     "@esbuild/win32-ia32" "0.21.5"
     "@esbuild/win32-x64" "0.21.5"
 
-escalade@^3.1.1:
+escalade@^3.1.1, escalade@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
   integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
@@ -5921,7 +5941,7 @@ forwarded@0.2.0:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-fraction.js@^4.3.6:
+fraction.js@^4.3.7:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
@@ -8310,6 +8330,11 @@ node-releases@^2.0.14:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
+node-releases@^2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
+
 normalize-package-data@^2.3.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -8685,6 +8710,11 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -10005,16 +10035,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10091,14 +10112,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10811,6 +10825,14 @@ update-browserslist-db@^1.0.13:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz#7ca61c0d8650766090728046e416a8cde682859e"
+  integrity sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==
+  dependencies:
+    escalade "^3.1.2"
+    picocolors "^1.0.1"
+
 uqr@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/uqr/-/uqr-0.1.2.tgz#5c6cd5dcff9581f9bb35b982cb89e2c483a41d7d"
@@ -11317,10 +11339,10 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@5.92.1:
-  version "5.92.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.92.1.tgz#eca5c1725b9e189cffbd86e8b6c3c7400efc5788"
-  integrity sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==
+webpack@5.93.0:
+  version "5.93.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.93.0.tgz#2e89ec7035579bdfba9760d26c63ac5c3462a5e5"
+  integrity sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^1.0.5"
@@ -11465,16 +11487,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From e20e834af9d65994237e6911f17b88c1c8ff9d4c Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Wed, 7 Aug 2024 16:40:08 +0100
Subject: [PATCH 12/14] enhancement: auto select first quotation

---
 .../dashboard/buy-sell/components/TransakExchangePanel.svelte    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index 8557c163e2..0b2123fb50 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -156,6 +156,7 @@
                     provider: 'Transak',
                 },
             ]
+            selectedQuoteId = 0
             startQuoteTimer()
         }
 

From 6b42903dd3012fa3bcd729b0f935c2f9b060b9b6 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Thu, 8 Aug 2024 13:22:39 -0300
Subject: [PATCH 13/14] feat: adds min and max amount in TransakAmountInput
 (#2761)

* feat: adds min and max amount in TransakAmountInput

* fix: logic so that no quotes are generated when value is outside min or max

Co-authored-by: Jean Ribeiro <contact@jeanribeiro.dev>

---------

Co-authored-by: Nicole O'Brien <nicole@bloomwallet.io>
---
 .../components/TransakAmountInput.svelte      | 27 +++++++++++++----
 .../components/TransakExchangePanel.svelte    | 30 ++++++++++++++++---
 .../stores/transak-fiat-currencies.store.ts   | 19 +++++++-----
 packages/shared/src/locales/en.json           |  4 +++
 4 files changed, 63 insertions(+), 17 deletions(-)

diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte
index 61e8ab3c1d..ae83db0be7 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte
@@ -1,16 +1,30 @@
 <script lang="ts">
     import { activeProfile } from '@core/profile/stores'
     import { AmountInput } from '@ui'
-    import { Text } from '@bloomwalletio/ui'
+    import { Error, Text } from '@bloomwalletio/ui'
+    import { localize, formatCurrency } from '@core/i18n'
 
     export let currency = $activeProfile?.settings?.marketCurrency?.toUpperCase()
     export let value: string
+    export let minValue: number | undefined = undefined
+    export let maxValue: number | undefined = undefined
 
-    let inputLength: number
     const fontSize: 'text-32' | 'text-48' | 'text-64' = 'text-64'
 
+    let inputLength: number
+    let error: string = '​'
+
     $: value, (inputLength = getInputLength())
     $: maxWidth = `${(inputLength * Number(/\d+/.exec(fontSize)?.[0] ?? 0) * 2) / 3}px`
+    $: {
+        if (minValue !== undefined && Number(value) < minValue) {
+            error = localize('error.buySell.minAmount', { amount: formatCurrency(String(minValue), currency) })
+        } else if (maxValue !== undefined && Number(value) > maxValue) {
+            error = localize('error.buySell.maxAmount', { amount: formatCurrency(String(maxValue), currency) })
+        } else {
+            error = '​'
+        }
+    }
 
     function getInputLength(): number {
         const length = value?.length || 1
@@ -20,7 +34,10 @@
     }
 </script>
 
-<div class="flex justify-center items-end gap-1">
-    <AmountInput bind:value maxDecimals={2} {fontSize} {maxWidth} />
-    <Text class="pb-5">{currency}</Text>
+<div class="flex flex-col justify-center items-center gap-1">
+    <div class="flex justify-center items-end gap-1">
+        <AmountInput bind:value maxDecimals={2} {fontSize} {maxWidth} />
+        <Text class="pb-5">{currency}</Text>
+    </div>
+    <Error {error} />
 </div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index 0b2123fb50..559e707bd8 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -73,6 +73,8 @@
     // Payment Options Selector
     let paymentOptions: IOption[]
     let selectedPaymentOption: IOption | undefined
+    let minValue: number | undefined
+    let maxValue: number | undefined
     function updatePaymentOptions(
         supportedCurrencies: TransakFiatCurrencies | undefined,
         selectedCurrency: string
@@ -86,6 +88,12 @@
         if (!paymentOptions.some((paymentOption) => paymentOption.value === selectedPaymentOption?.value)) {
             selectedPaymentOption = paymentOptions?.[0]
         }
+
+        const selectedTransakFiatCurrencyPaymentOption = $transakFiatCurrencies?.[
+            selectedCurrency
+        ]?.paymentOptions?.find((paymentOption) => paymentOption.id === selectedPaymentOption?.value)
+        minValue = selectedTransakFiatCurrencyPaymentOption?.minAmount
+        maxValue = selectedTransakFiatCurrencyPaymentOption?.maxAmount
     }
     $: updatePaymentOptions($transakFiatCurrencies, selectedCurrency)
 
@@ -120,9 +128,18 @@
     let latestQuoteRequestId = 0
     let loading = false
     async function updateQuote(): Promise<void> {
+        const requestId = ++latestQuoteRequestId // Increment the request ID
         loading = true
-        stopQuoteTimer()
         selectedQuoteId = undefined
+        stopQuoteTimer()
+        if (
+            (minValue !== undefined && Number(fiatValue) < minValue) ||
+            (maxValue !== undefined && Number(fiatValue) > maxValue)
+        ) {
+            quotes = []
+            loading = false
+            return
+        }
 
         if (!selectedPaymentOption) {
             loading = false
@@ -140,7 +157,6 @@
 
         quotes = []
 
-        const requestId = ++latestQuoteRequestId // Increment the request ID
         const response = await getTransakPrice(params)
 
         // Only update the quote if this is the latest request
@@ -162,7 +178,13 @@
 
         loading = false
     }
-    $: selectedCurrency, selectedCryptoCurrency, selectedPaymentOption, fiatValue, void updateQuote()
+    $: selectedCurrency,
+        selectedCryptoCurrency,
+        selectedPaymentOption,
+        fiatValue,
+        minValue,
+        maxValue,
+        void updateQuote()
 
     // Quotations timer
     let displayedQuotationTime: string | null = null
@@ -242,7 +264,7 @@
                         <SelectInput options={paymentOptions} bind:selected={selectedPaymentOption} hideValue />
                     {/key}
                 </div>
-                <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} />
+                <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} {minValue} {maxValue} />
                 <div class="flex flex-col gap-4 w-full">
                     <TransakCryptoCurrencyTile
                         cryptoCurrency={selectedCryptoCurrency}
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
index 78e030acb5..d7ca0b2205 100644
--- 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
@@ -1,15 +1,18 @@
 import { FiatCurrency } from '@core/market'
 import { Writable, writable } from 'svelte/store'
 
+export interface TransakFiatCurrency {
+    paymentOptions: {
+        id: string
+        name: string
+        minAmount: number
+        maxAmount: number
+        disabled?: boolean
+    }[]
+}
+
 export type TransakFiatCurrencies = {
-    [key in keyof typeof FiatCurrency]: {
-        paymentOptions: {
-            id: string
-            minAmount: number
-            maxAmount: number
-            disabled?: boolean
-        }[]
-    }
+    [key in keyof typeof FiatCurrency]: TransakFiatCurrency
 }
 
 export const transakFiatCurrencies: Writable<TransakFiatCurrencies | undefined> = writable(undefined)
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index 0483f26a5b..9b05eecb30 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -2264,6 +2264,10 @@
         },
         "token": {
             "missingMetadata": "The token metadata is missing."
+        },
+        "buySell": {
+            "minAmount": "The minimum amount is {amount}",
+            "maxAmount": "The maximum amount is {amount}"
         }
     },
     "warning": {

From 08bcd285268d5e691863ffffedb2490edd6c902f Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Tue, 13 Aug 2024 11:47:10 -0300
Subject: [PATCH 14/14] chore: polish multichain Transak upgrade (#2788)

* fix: only show currencies that have payment method available

* feat: adds TransakCryptoCurrencyTile variant

* feat: adds view title

* feat: adds colors to tokens network pills

* fix: prevent selected currency option undefined error

* feat: adds EmptyListPlaceholder in TransakExchangePanel

* refactor: uses transak api base url depending on profile network

* fix: undefined currency

* feat: adds transak widget url for testnet and mainnet

* fix: quotations positioning

* feat: updates ui kit and adds Pill colors

* chore: inverts TransakCryptoCurrencyAmountTile amounts position

* refactor: create network name pill component

* ui: fix transak frame height

* refactor: organise transak query params, enable transak menu

* refactor: rename transak quotation tile

* fix: iota showing on buy sell for mainnet profiles

* ui: dont capitalise names on network pill

---------

Co-authored-by: Nicole O'Brien <nicole@bloomwallet.io>
---
 .../popup/popups/TransakFramePopup.svelte     | 16 ++++-
 .../lib/electron/managers/transak.manager.ts  | 44 ++++++++----
 .../views/dashboard/buy-sell/BuySell.svelte   |  5 +-
 .../components/TransakConnectionBanner.svelte | 11 +--
 .../TransakCryptoCurrencyTile.svelte          | 36 +++++++---
 .../components/TransakExchangePanel.svelte    | 69 ++++++++++++-------
 ...ile.svelte => TransakQuotationTile.svelte} | 12 ++--
 .../dashboard/buy-sell/components/index.ts    |  2 +-
 packages/shared/package.json                  |  2 +-
 .../components/pills/NetworkNamePill.svelte   | 30 ++++++++
 packages/shared/src/components/pills/index.ts |  1 +
 .../transak/actions/getTransakPrice.ts        |  6 +-
 .../actions/updateTransakCryptoCurrencies.ts  | 41 +++++++----
 .../actions/updateTransakFiatCurrencies.ts    |  4 +-
 .../lib/auxiliary/transak/apis/transak.api.ts |  5 +-
 .../lib/auxiliary/transak/constants/index.ts  |  2 -
 .../transak-api-base-url.constant.ts          |  6 --
 .../constants/transak-widget-url.constant.ts  |  5 --
 .../shared/src/lib/auxiliary/transak/index.ts |  1 +
 .../transak/utils/getTransakApiUrl.ts         | 11 +++
 .../transak/utils/getTransakWidgetUrl.ts      | 12 ++++
 .../src/lib/auxiliary/transak/utils/index.ts  |  2 +
 .../transak-window-data.interface.ts          |  1 +
 packages/shared/src/locales/en.json           |  4 +-
 24 files changed, 231 insertions(+), 97 deletions(-)
 rename packages/desktop/views/dashboard/buy-sell/components/{TransakCryptoCurrencyAmountTile.svelte => TransakQuotationTile.svelte} (80%)
 create mode 100644 packages/shared/src/components/pills/NetworkNamePill.svelte
 delete mode 100644 packages/shared/src/lib/auxiliary/transak/constants/transak-api-base-url.constant.ts
 delete mode 100644 packages/shared/src/lib/auxiliary/transak/constants/transak-widget-url.constant.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/utils/getTransakApiUrl.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/utils/getTransakWidgetUrl.ts
 create mode 100644 packages/shared/src/lib/auxiliary/transak/utils/index.ts

diff --git a/packages/desktop/components/popup/popups/TransakFramePopup.svelte b/packages/desktop/components/popup/popups/TransakFramePopup.svelte
index 2bd9237cfc..37c553c0a9 100644
--- a/packages/desktop/components/popup/popups/TransakFramePopup.svelte
+++ b/packages/desktop/components/popup/popups/TransakFramePopup.svelte
@@ -6,10 +6,14 @@
     import { openUrlInBrowser, Platform } from '@core/app'
     import { localize } from '@core/i18n'
     import { FiatCurrency } from '@core/market'
+    import { SupportedNetworkId } from '@core/network'
+    import { activeProfile } from '@core/profile/stores'
     import { IPopupState, popupState } from '@desktop/auxiliary/popup'
     import { TransakConnectionBanner } from '@views/dashboard/buy-sell/components'
     import { onDestroy, onMount, tick } from 'svelte'
 
+    const isProduction = [SupportedNetworkId.Iota, SupportedNetworkId.Shimmer].includes($activeProfile?.network?.id)
+
     export let isBuyOrSell: 'BUY' | 'SELL' | undefined = undefined
     export let fiatAmount: number | undefined = undefined
     export let fiatCurrency: keyof typeof FiatCurrency | undefined = undefined
@@ -77,6 +81,7 @@
             paymentMethod: paymentMethod,
             networkName: cryptoCurrency.transakNetworkName,
             cryptoCurrencySymbol: cryptoCurrency.symbol,
+            environment: isProduction ? 'PRODUCTION' : 'STAGING',
         })
         isTransakOpen = true
         await updateTransakBounds()
@@ -104,11 +109,11 @@
 
 <svelte:window on:resize={updateTransakBounds} />
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col">
     <div class="border-b border-solid border-stroke dark:border-stroke-dark">
         <TransakConnectionBanner refreshFunction={resetTransak} />
     </div>
-    <div class="w-[30rem] h-[60vh]" bind:this={transakContainer}>
+    <div class="transak-container" bind:this={transakContainer}>
         {#if error}
             <div class="flex flex-col justify-center items-center w-full h-full gap-4 px-10">
                 <Icon name={IconName.ArrowDownUp} size="lg" textColor="brand" />
@@ -123,3 +128,10 @@
         {/if}
     </div>
 </div>
+
+<style>
+    .transak-container {
+        width: 30rem;
+        height: min(70vh, 700px);
+    }
+</style>
diff --git a/packages/desktop/lib/electron/managers/transak.manager.ts b/packages/desktop/lib/electron/managers/transak.manager.ts
index cfbd42b7a0..b5f5bc94a7 100644
--- a/packages/desktop/lib/electron/managers/transak.manager.ts
+++ b/packages/desktop/lib/electron/managers/transak.manager.ts
@@ -3,7 +3,7 @@ import { windows } from '../constants/windows.constant'
 import features from '@features/features'
 import { ITransakManager, ITransakWindowData } from '@core/app'
 import path from 'path'
-import { TRANSAK_WIDGET_URL } from '@auxiliary/transak/constants'
+import { TRANSAK_PRODUCTION_WIDGET_URL, TRANSAK_STAGING_WIDGET_URL } from '@auxiliary/transak/constants'
 import { buildUrl } from '@core/utils/url'
 import { FiatCurrency } from '@core/market/enums/fiat-currency.enum'
 import fs from 'fs'
@@ -144,13 +144,16 @@ export default class TransakManager implements ITransakManager {
         })
 
         windows.transak.webContents.addListener('did-navigate-in-page', (_, url) => {
-            const googlePayUrl = TRANSAK_WIDGET_URL + '/googlepay'
+            const widgetUrl =
+                data.environment === 'PRODUCTION' ? TRANSAK_PRODUCTION_WIDGET_URL : TRANSAK_STAGING_WIDGET_URL
+
+            const googlePayUrl = widgetUrl + '/googlepay'
             if (url.startsWith(googlePayUrl)) {
                 windows.main?.webContents?.send?.('try-open-url-in-browser', url)
                 void windows.transak?.loadURL?.(initialUrl)
             }
 
-            const kycUrl = TRANSAK_WIDGET_URL + '/user/kyc-forms/idProof'
+            const kycUrl = widgetUrl + '/user/kyc-forms/idProof'
             if (process.platform === 'darwin' && url.startsWith(kycUrl)) {
                 void systemPreferences.askForMediaAccess('camera')
             }
@@ -219,7 +222,8 @@ export default class TransakManager implements ITransakManager {
     }
 
     private getUrl(data: ITransakWindowData): string {
-        const { address, currency, service, amount, paymentMethod, networkName, cryptoCurrencySymbol } = data
+        const { address, currency, service, amount, paymentMethod, networkName, cryptoCurrencySymbol, environment } =
+            data
         const apiKey = process.env.TRANSAK_API_KEY
 
         if (typeof apiKey !== 'string') {
@@ -243,24 +247,34 @@ export default class TransakManager implements ITransakManager {
 
         const queryParams: QueryParameters = {
             apiKey,
-            fiatCurrency: currency,
-            fiatAmount: amount,
-            walletAddress: address,
-            paymentMethod: paymentMethod,
-            productsAvailed: service,
-            cryptoCurrencyCode: cryptoCurrencySymbol,
-            network: networkName,
+
+            // Styling
+            colorMode,
             themeColor: '7C41C9',
-            hideMenu: true,
-            disableWalletAddressForm: true,
+
+            // Service Feature Flags
+            productsAvailed: service,
+            hideMenu: false,
             isFeeCalculationHidden: true,
             disablePaymentMethods: ['apple_pay', 'google_pay'],
             excludeFiatCurrencies: 'USD',
-            colorMode,
+
+            // Quotations Fields
+            fiatCurrency: currency,
+            fiatAmount: amount,
+            network: networkName,
+            cryptoCurrencyCode: cryptoCurrencySymbol,
+            walletAddress: address,
+            paymentMethod: paymentMethod,
+
+            // Flags for skippable forms
             hideExchangeScreen: true,
+            disableWalletAddressForm: true,
         }
 
-        const urlObject = buildUrl({ base: TRANSAK_WIDGET_URL, query: queryParams })
+        const widgetUrl = environment === 'PRODUCTION' ? TRANSAK_PRODUCTION_WIDGET_URL : TRANSAK_STAGING_WIDGET_URL
+
+        const urlObject = buildUrl({ base: widgetUrl, query: queryParams })
 
         return urlObject?.href ?? ''
     }
diff --git a/packages/desktop/views/dashboard/buy-sell/BuySell.svelte b/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
index 9569e66a27..c45f460266 100644
--- a/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
@@ -5,6 +5,8 @@
     import { dashboardRoute, DashboardRoute } from '@core/router'
     import { onMount } from 'svelte'
     import { updateTransakCryptoCurrencies, updateTransakFiatCurrencies } from '@auxiliary/transak'
+    import { Text } from '@bloomwalletio/ui'
+    import { localize } from '@core/i18n'
 
     $: if (features.analytics.dashboardRoute.buySell.enabled && $dashboardRoute === DashboardRoute.BuySell) {
         Platform.trackEvent('buy-sell-route', { route: $dashboardRoute })
@@ -16,6 +18,7 @@
     })
 </script>
 
-<div class="w-full h-full flex flex-col flex-nowrap p-8 relative flex-1">
+<div class="w-full h-full flex flex-col flex-nowrap gap-4 p-8 relative flex-1">
+    <Text type="h6">{localize('views.buySell.title')}</Text>
     <BuySellMainView />
 </div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
index b452bc12dc..2b1023efee 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-    import { TRANSAK_WIDGET_URL } from '@auxiliary/transak'
     import { TransakConnectionStatus } from '@auxiliary/transak/enums'
+    import { getTransakWidgetUrl } from '@auxiliary/transak/utils'
     import { IconButton, IconName, Text, TooltipIcon, Tooltip } from '@bloomwalletio/ui'
     import { Platform } from '@core/app'
     import { localize } from '@core/i18n'
+    import { activeProfile } from '@core/profile/stores'
     import { tick } from 'svelte'
 
     export let refreshFunction: () => Promise<void>
 
+    const transakWidgetUrl = getTransakWidgetUrl($activeProfile?.network?.id)
+
     let refreshButton: HTMLElement
     let textContainer: HTMLElement
     let showTextTooltip: boolean = false
@@ -21,7 +24,7 @@
 
     function getConnectionStatus(url: string): TransakConnectionStatus {
         const _url = URL.canParse(url) ? new URL(url) : null
-        if (_url?.origin === TRANSAK_WIDGET_URL) {
+        if (_url?.origin === transakWidgetUrl) {
             return TransakConnectionStatus.Connected
         } else if (url) {
             return TransakConnectionStatus.Redirected
@@ -75,10 +78,10 @@
                 />
             {/if}
             <div bind:this={textContainer} class="truncate">
-                <Text type="sm" textColor="secondary" truncate>{url ?? TRANSAK_WIDGET_URL}</Text>
+                <Text type="sm" textColor="secondary" truncate>{url ?? transakWidgetUrl}</Text>
             </div>
             {#if showTextTooltip}
-                <Tooltip anchor={textContainer} event="hover" placement="top" text={url ?? TRANSAK_WIDGET_URL} />
+                <Tooltip anchor={textContainer} event="hover" placement="top" text={url ?? transakWidgetUrl} />
             {/if}
         </div>
     </div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
index c11c2636a0..d26daed79e 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
@@ -1,24 +1,42 @@
 <script lang="ts">
-    import { Tile, Text, Pill } from '@bloomwalletio/ui'
     import { TransakCryptoCurrency } from '@auxiliary/transak/stores'
+    import { Icon, IconName, Text, Tile } from '@bloomwalletio/ui'
+    import { NetworkNamePill } from '@ui/pills'
     import TransakCryptoCurrencyAvatar from './TransakCryptoCurrencyAvatar.svelte'
 
     export let cryptoCurrency: TransakCryptoCurrency | undefined
     export let onClick: (() => unknown) | undefined = undefined
     export let selected = false
+    export let variant: 'selector' | 'item' = 'item'
 </script>
 
 <Tile {onClick} {selected} surface={1} width="full" class={cryptoCurrency ? '' : 'animate-pulse'}>
     <div class="w-full flex items-center gap-2">
         <TransakCryptoCurrencyAvatar {cryptoCurrency} hideNetworkBadge />
-        <div class="flex w-full justify-between items-center">
-            <div class="flex flex-col">
-                <Text>{cryptoCurrency?.symbol ?? '​'}</Text>
-                <Text fontWeight="medium">{cryptoCurrency?.name ?? '​'}</Text>
+        {#if variant === 'item'}
+            <div class="flex w-full justify-between items-center">
+                <div class="flex flex-col">
+                    <Text>{cryptoCurrency?.symbol ?? '​'}</Text>
+                    <Text fontWeight="medium">{cryptoCurrency?.name ?? '​'}</Text>
+                </div>
+                <NetworkNamePill
+                    networkId={cryptoCurrency?.network.id}
+                    networkName={cryptoCurrency?.network.name}
+                    compact
+                />
             </div>
-            <Pill color="brand" compact>
-                <Text type="xs" textColor="brand" transform="uppercase">{cryptoCurrency?.network.name ?? '​'}</Text>
-            </Pill>
-        </div>
+        {:else}
+            <div class="flex w-full justify-between items-center">
+                <div class="flex flex-col">
+                    <Text>{cryptoCurrency?.symbol ?? '​'}</Text>
+                    <NetworkNamePill
+                        networkId={cryptoCurrency?.network.id}
+                        networkName={cryptoCurrency?.network.name}
+                        compact
+                    />
+                </div>
+                <Icon name={IconName.ChevronDown} size="sm" />
+            </div>
+        {/if}
     </div>
 </Tile>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
index 559e707bd8..2bd8b6107b 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -21,8 +21,9 @@
     import { Pane, RecipientInput } from '@ui'
     import { onDestroy } from 'svelte'
     import { TransakAmountInput, TransakCryptoCurrencyTile } from './'
-    import TransakCryptoCurrencyAmountTile from './TransakCryptoCurrencyAmountTile.svelte'
+    import TransakQuotationTile from './TransakQuotationTile.svelte'
     import { getBestTimeDuration, MILLISECONDS_PER_SECOND } from '@core/utils'
+    import { EmptyListPlaceholder } from '@components'
 
     // Buy / Sell Tabs
     const TABS = [
@@ -32,11 +33,20 @@
     let selectedTab = TABS[0]
 
     // Fiat Currency Selector
-    const CURRENCY_OPTIONS: IOption[] = Object.keys(FiatCurrency).map((currency) => ({
+    let currencyOptions: IOption[] = Object.keys(FiatCurrency).map((currency) => ({
         value: currency,
     }))
-    let selectedCurrencyOption: IOption = CURRENCY_OPTIONS[0]
-    $: selectedCurrency = selectedCurrencyOption.value
+    function updateCurrencyOptions(currencies: TransakFiatCurrencies | undefined): void {
+        if (!currencies) return
+        currencyOptions = Object.keys(FiatCurrency).reduce((acc, currency) => {
+            const hasPaymentOptionAvailable = currencies?.[currency]?.paymentOptions?.length > 0
+            return hasPaymentOptionAvailable ? [...acc, { value: currency }] : acc
+        }, [] as IOption[])
+    }
+    $: updateCurrencyOptions($transakFiatCurrencies)
+
+    let selectedCurrencyOption: IOption = currencyOptions[0]
+    $: selectedCurrency = selectedCurrencyOption?.value
 
     // Fiat Input
     function customRound(number) {
@@ -64,7 +74,7 @@
         }
     }
     let fiatValue = String(
-        getDefaultFiatAmount(FiatCurrency[selectedCurrencyOption.value as keyof typeof FiatCurrency])
+        getDefaultFiatAmount(FiatCurrency[selectedCurrencyOption?.value as keyof typeof FiatCurrency])
     )
 
     // Select Crypto Asset
@@ -258,7 +268,7 @@
             <div class="flex flex-col justify-between items-center gap-4 h-full w-full">
                 <div class="flex gap-2">
                     <div class="w-28">
-                        <SelectInput options={CURRENCY_OPTIONS} bind:selected={selectedCurrencyOption} />
+                        <SelectInput options={currencyOptions} bind:selected={selectedCurrencyOption} />
                     </div>
                     {#key paymentOptions}
                         <SelectInput options={paymentOptions} bind:selected={selectedPaymentOption} hideValue />
@@ -269,6 +279,7 @@
                     <TransakCryptoCurrencyTile
                         cryptoCurrency={selectedCryptoCurrency}
                         onClick={hasCryptoCurrencies ? onTokenTileClick : undefined}
+                        variant="selector"
                     />
                     <RecipientInput
                         bind:this={recipientInput}
@@ -282,31 +293,41 @@
         </div>
     </div>
     <div class="w-full h-full flex flex-col justify-between pl-4">
-        <div class="flex flex-col gap-3">
-            <div class="flex flex-col items-center gap-2">
+        <div class="flex-1 flex flex-col gap-3">
+            <div class="flex flex-col items-center gap-2" class:flex-1={quotes.length === 0 && !loading}>
                 <Text type="h6" align="center">
                     {localize('views.buySell.quotations.title')}
                 </Text>
-                <Text type="body2" textColor="secondary" align="center">
-                    {loading || quotes.length > 0
-                        ? localize('views.buySell.quotations.description')
-                        : localize('views.buySell.quotations.noQuotes')}
-                </Text>
-                <Pill color="neutral" compact>
-                    {displayedQuotationTime
-                        ? localize('views.buySell.quotations.pill.newQuotes', { time: displayedQuotationTime })
-                        : loading
-                          ? localize('views.buySell.quotations.pill.fetchingQuotes')
-                          : localize('views.buySell.quotations.pill.noQuotes')}
-                </Pill>
+                {#if loading}
+                    <Text type="body2" textColor="secondary" align="center">
+                        {localize('views.buySell.quotations.description')}
+                    </Text>
+                    <Pill color="neutral" compact>
+                        {displayedQuotationTime
+                            ? localize('views.buySell.quotations.pill.newQuotes', { time: displayedQuotationTime })
+                            : localize('views.buySell.quotations.pill.fetchingQuotes')}
+                    </Pill>
+                {:else if quotes.length === 0}
+                    <div class="h-full flex justify-center items-center">
+                        <EmptyListPlaceholder
+                            title={localize('views.buySell.quotations.emptyTitle')}
+                            subtitle={localize('views.buySell.quotations.emptyDescription')}
+                            icon={IconName.ArrowDownUp}
+                        />
+                    </div>
+                {:else}
+                    <Text type="body2" textColor="secondary" align="center">
+                        {localize('views.buySell.quotations.description')}
+                    </Text>
+                {/if}
             </div>
             {#if loading}
-                <TransakCryptoCurrencyAmountTile isLoading />
-                <TransakCryptoCurrencyAmountTile isLoading />
-                <TransakCryptoCurrencyAmountTile isLoading />
+                <TransakQuotationTile isLoading />
+                <TransakQuotationTile isLoading />
+                <TransakQuotationTile isLoading />
             {:else if quotes.length > 0}
                 {#each quotes as quote, i}
-                    <TransakCryptoCurrencyAmountTile
+                    <TransakQuotationTile
                         cryptoCurrency={selectedCryptoCurrency}
                         fiatAmount={quote?.fiatAmount}
                         fiatSymbol={selectedCurrency}
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakQuotationTile.svelte
similarity index 80%
rename from packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
rename to packages/desktop/views/dashboard/buy-sell/components/TransakQuotationTile.svelte
index a0e87ad992..57ada5c1c7 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAmountTile.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakQuotationTile.svelte
@@ -31,12 +31,12 @@
                 class:opacity-0={isLoading}
             />
             <div class="flex flex-col">
-                <Text align="right"
-                    >{cryptoAmount ? `≈ ${formatCurrency(String(cryptoAmount), cryptoCurrency?.symbol)}` : '​'}</Text
-                >
-                <Text align="right"
-                    >{fiatAmount && fiatSymbol ? formatCurrency(String(fiatAmount), fiatSymbol) : '​'}</Text
-                >
+                <Text align="right">
+                    {fiatAmount && fiatSymbol ? formatCurrency(String(fiatAmount), fiatSymbol) : '​'}
+                </Text>
+                <Text align="right" fontWeight="medium" textColor="secondary">
+                    {cryptoAmount ? `≈ ${formatCurrency(String(cryptoAmount), cryptoCurrency?.symbol)}` : '​'}
+                </Text>
             </div>
         {/if}
     </div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/index.ts b/packages/desktop/views/dashboard/buy-sell/components/index.ts
index b6bb39b5cc..3c37cf10bf 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/index.ts
+++ b/packages/desktop/views/dashboard/buy-sell/components/index.ts
@@ -1,4 +1,4 @@
-export { default as TransakCryptoCurrencyAmountTile } from './TransakCryptoCurrencyAmountTile.svelte'
+export { default as TransakQuotationTile } from './TransakQuotationTile.svelte'
 export { default as TransakCryptoCurrencyTile } from './TransakCryptoCurrencyTile.svelte'
 export { default as TransakAmountInput } from './TransakAmountInput.svelte'
 export { default as TransakConnectionBanner } from './TransakConnectionBanner.svelte'
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 88dfecbd90..f4859e1f10 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <contact@bloomwallet.io>",
     "license": "PolyForm Strict License 1.0.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.21.10",
+        "@bloomwalletio/ui": "0.21.11",
         "@ethereumjs/common": "4.3.0",
         "@ethereumjs/rlp": "5.0.2",
         "@ethereumjs/tx": "5.3.0",
diff --git a/packages/shared/src/components/pills/NetworkNamePill.svelte b/packages/shared/src/components/pills/NetworkNamePill.svelte
new file mode 100644
index 0000000000..363506640b
--- /dev/null
+++ b/packages/shared/src/components/pills/NetworkNamePill.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { Pill, Text } from '@bloomwalletio/ui'
+    import { NetworkId, SupportedNetworkId, getNameFromNetworkId } from '@core/network'
+
+    export let networkId: NetworkId | undefined
+    export let networkName: string | undefined = undefined
+    export let compact: boolean = false
+
+    const PILL_COLOR: { [id in NetworkId]?: string } = {
+        [SupportedNetworkId.Iota]: 'iota-background',
+        [SupportedNetworkId.Shimmer]: 'shimmer',
+        [SupportedNetworkId.Testnet]: 'text-secondary',
+        [SupportedNetworkId.IotaTestnet]: 'text-secondary',
+        [SupportedNetworkId.IotaEvm]: 'iota-evm-background',
+        [SupportedNetworkId.ShimmerEvm]: 'shimmer-evm-background',
+        [SupportedNetworkId.IotaTestnetEvm]: 'iota-evm-background/90',
+        [SupportedNetworkId.TestnetEvm]: 'shimmer-evm-background/90',
+        [SupportedNetworkId.Ethereum]: 'ethereum',
+        [SupportedNetworkId.Sepolia]: 'text-secondary',
+        [SupportedNetworkId.GenericEvm]: 'text-secondary',
+    }
+
+    $: networkName = networkName ? networkName : networkId ? getNameFromNetworkId(networkId) ?? networkId : networkId
+</script>
+
+<Pill color={PILL_COLOR[networkId ?? SupportedNetworkId.GenericEvm]} {compact}>
+    <Text type="xs" textColor="current">
+        {networkName ?? '​'}
+    </Text>
+</Pill>
diff --git a/packages/shared/src/components/pills/index.ts b/packages/shared/src/components/pills/index.ts
index 407eac1e67..a3e2ed4867 100644
--- a/packages/shared/src/components/pills/index.ts
+++ b/packages/shared/src/components/pills/index.ts
@@ -4,6 +4,7 @@ export { default as TimelockPill } from './TimelockPill.svelte'
 export { default as UnclaimedPill } from './UnclaimedPill.svelte'
 export { default as ActivityAsyncStatusPill } from './ActivityAsyncStatusPill.svelte'
 export { default as AsyncStatusPill } from './AsyncStatusPill.svelte'
+export { default as NetworkNamePill } from './NetworkNamePill.svelte'
 export { default as NetworkStatusPill } from './NetworkStatusPill.svelte'
 export { default as NetworkTypePill } from './NetworkTypePill.svelte'
 export { default as NftStandardPill } from './NftStandardPill.svelte'
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts b/packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts
index 62e7449854..40344534bf 100644
--- a/packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts
+++ b/packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts
@@ -1,11 +1,13 @@
 import { TransakApi } from '../apis'
 import { ITransakApiPriceParams } from '../interfaces'
+import { getTransakApiUrl } from '../utils'
 
 export async function getTransakPrice(
     params: ITransakApiPriceParams
 ): Promise<{ fiatAmount: number; cryptoAmount: number } | undefined> {
-    const transakApi = new TransakApi()
-    const { response } = (await transakApi.getPrices(params)) ?? {}
+    const apiUrl = getTransakApiUrl()
+    const api = new TransakApi(apiUrl)
+    const { response } = (await api.getPrices(params)) ?? {}
 
     if (!response) {
         return
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
index 17457d5681..f06c7deb7b 100644
--- a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
+++ b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
@@ -2,23 +2,28 @@ import {
     NetworkId,
     NetworkNamespace,
     StardustNetworkId,
+    SupportedNetworkId,
     SupportedStardustNetworkId,
     getEvmNetworks,
     getNetwork,
     getStardustNetwork,
 } from '@core/network'
+import { activeProfile } from '@core/profile/stores'
+import { get } from 'svelte/store'
 import { TransakApi } from '../apis'
 import { ITransakApiCryptoCurrenciesResponseItem } from '../interfaces'
 import { TransakCryptoCurrency, transakCryptoCurrencies } from '../stores'
-import { AppStage } from '@core/app'
+import { getTransakApiUrl } from '../utils'
 
 const STARDUST_NETWORK_ID_TO_TRANSAK_NETWORK_NAME_MAP: Record<StardustNetworkId, string> = {
-    ...(process.env.STAGE === AppStage.PROD
-        ? { [SupportedStardustNetworkId.Iota]: 'miota' }
-        : { [SupportedStardustNetworkId.IotaTestnet]: 'miota' }),
+    [SupportedStardustNetworkId.Iota]: 'miota',
+    [SupportedStardustNetworkId.IotaTestnet]: 'miota',
 }
 
 export async function updateTransakCryptoCurrencies(): Promise<void> {
+    const currentNetworkId = get(activeProfile)?.network?.id
+    const isStagingEnvironment = [SupportedNetworkId.IotaTestnet, SupportedNetworkId.Testnet].includes(currentNetworkId)
+
     const stardustNetwork = getStardustNetwork()
     const transakNetworkNameForStardustNetwork = STARDUST_NETWORK_ID_TO_TRANSAK_NETWORK_NAME_MAP[stardustNetwork.id]
     const evmNetworks = getEvmNetworks()
@@ -26,13 +31,14 @@ export async function updateTransakCryptoCurrencies(): Promise<void> {
     const allowedNetworkNames = [transakNetworkNameForStardustNetwork]
     const allowedNetworkChainIds = evmNetworks.map((network) => network.chainId)
 
-    const api = new TransakApi()
+    const apiUrl = getTransakApiUrl()
+    const api = new TransakApi(apiUrl)
     const response = await api.getFilteredCryptoCurrencies(allowedNetworkNames, allowedNetworkChainIds)
 
     // sort response by stardust network first and then by order of evm networks
     response?.sort((a, b) => {
-        const aNetworkId = getNetworkIdFromTransakNetwork(a.network.name, a.network.chainId)
-        const bNetworkId = getNetworkIdFromTransakNetwork(b.network.name, b.network.chainId)
+        const aNetworkId = getNetworkIdFromTransakNetwork(a.network.name, a.network.chainId, isStagingEnvironment)
+        const bNetworkId = getNetworkIdFromTransakNetwork(b.network.name, b.network.chainId, isStagingEnvironment)
         if (aNetworkId === stardustNetwork.id) {
             return -1
         } else if (bNetworkId === stardustNetwork.id) {
@@ -51,15 +57,20 @@ export async function updateTransakCryptoCurrencies(): Promise<void> {
                 return acc
             }
 
-            return [...acc, buildTransakCryptoCurrencyFromResponseItem(token)]
+            return [...acc, buildTransakCryptoCurrencyFromResponseItem(token, isStagingEnvironment)]
         }, [] as TransakCryptoCurrency[])
     )
 }
 
 function buildTransakCryptoCurrencyFromResponseItem(
-    responseItem: ITransakApiCryptoCurrenciesResponseItem
+    responseItem: ITransakApiCryptoCurrenciesResponseItem,
+    isStagingEnvironment: boolean
 ): TransakCryptoCurrency {
-    const networkId = getNetworkIdFromTransakNetwork(responseItem.network.name, responseItem.network.chainId)
+    const networkId = getNetworkIdFromTransakNetwork(
+        responseItem.network.name,
+        responseItem.network.chainId,
+        isStagingEnvironment
+    )
     const network = getNetwork(networkId)
     if (!network) {
         throw new Error(`Unsupported Transak network: ${responseItem.network.name}`)
@@ -78,11 +89,13 @@ function buildTransakCryptoCurrencyFromResponseItem(
     }
 }
 
-function getNetworkIdFromTransakNetwork(transakNetworkName: string, chainId: string | null | undefined): NetworkId {
+function getNetworkIdFromTransakNetwork(
+    transakNetworkName: string,
+    chainId: string | null | undefined,
+    isStagingEnvironment: boolean
+): NetworkId {
     if (transakNetworkName === 'miota') {
-        return process.env.STAGE === AppStage.PROD
-            ? SupportedStardustNetworkId.Iota
-            : SupportedStardustNetworkId.IotaTestnet
+        return isStagingEnvironment ? SupportedStardustNetworkId.IotaTestnet : SupportedStardustNetworkId.Iota
     } else if (chainId) {
         return `${NetworkNamespace.Evm}:${chainId}`
     } else {
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
index 87dcf626d8..7fcf1094c0 100644
--- a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
+++ b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
@@ -1,10 +1,12 @@
 import { TransakApi } from '../apis'
 import { TransakFiatCurrencies, transakFiatCurrencies } from '../stores'
+import { getTransakApiUrl } from '../utils'
 
 const FILTERED_PAYMENT_OPTIONS = ['apple_pay', 'google_pay']
 
 export async function updateTransakFiatCurrencies(): Promise<void> {
-    const api = new TransakApi()
+    const apiUrl = getTransakApiUrl()
+    const api = new TransakApi(apiUrl)
     const { response } = (await api.getFiatCurrencies()) ?? {}
 
     transakFiatCurrencies.set(
diff --git a/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts b/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
index 07b2e14b97..35ed8d5948 100644
--- a/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
+++ b/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
@@ -1,5 +1,4 @@
 import { BaseApi } from '@core/utils'
-import { TRANSAK_API_BASE_URL } from '../constants'
 import {
     ITransakApiCryptoCurrenciesResponse,
     ITransakApiCryptoCurrenciesResponseItem,
@@ -10,8 +9,8 @@ import {
 import { TransakApiEndpoint } from '../enums'
 
 export class TransakApi extends BaseApi {
-    constructor() {
-        super(TRANSAK_API_BASE_URL)
+    constructor(url: string) {
+        super(url)
     }
 
     async getFiatCurrencies(): Promise<ITransakApiFiatCurrenciesResponse | undefined> {
diff --git a/packages/shared/src/lib/auxiliary/transak/constants/index.ts b/packages/shared/src/lib/auxiliary/transak/constants/index.ts
index 357bab4c03..3fda7900b6 100644
--- a/packages/shared/src/lib/auxiliary/transak/constants/index.ts
+++ b/packages/shared/src/lib/auxiliary/transak/constants/index.ts
@@ -1,6 +1,4 @@
-export * from './transak-api-base-url.constant'
 export * from './transak-api-production-base-url.constant'
 export * from './transak-api-staging-base-url.constant'
 export * from './transak-production-widget-url.constant'
 export * from './transak-staging-widget-url.constant'
-export * from './transak-widget-url.constant'
diff --git a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-base-url.constant.ts b/packages/shared/src/lib/auxiliary/transak/constants/transak-api-base-url.constant.ts
deleted file mode 100644
index 099a76306d..0000000000
--- a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-base-url.constant.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { AppStage } from '@core/app/enums/app-stage.enum'
-import { TRANSAK_API_PRODUCTION_BASE_URL } from './transak-api-production-base-url.constant'
-import { TRANSAK_API_STAGING_BASE_URL } from './transak-api-staging-base-url.constant'
-
-export const TRANSAK_API_BASE_URL =
-    process.env.STAGE === AppStage.PROD ? TRANSAK_API_PRODUCTION_BASE_URL : TRANSAK_API_STAGING_BASE_URL
diff --git a/packages/shared/src/lib/auxiliary/transak/constants/transak-widget-url.constant.ts b/packages/shared/src/lib/auxiliary/transak/constants/transak-widget-url.constant.ts
deleted file mode 100644
index e5649b76a1..0000000000
--- a/packages/shared/src/lib/auxiliary/transak/constants/transak-widget-url.constant.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { AppStage } from '@core/app/enums/app-stage.enum'
-import { TRANSAK_PRODUCTION_WIDGET_URL, TRANSAK_STAGING_WIDGET_URL } from '.'
-
-export const TRANSAK_WIDGET_URL =
-    process.env.STAGE === AppStage.PROD ? TRANSAK_PRODUCTION_WIDGET_URL : TRANSAK_STAGING_WIDGET_URL
diff --git a/packages/shared/src/lib/auxiliary/transak/index.ts b/packages/shared/src/lib/auxiliary/transak/index.ts
index 812088a792..1cc1000877 100644
--- a/packages/shared/src/lib/auxiliary/transak/index.ts
+++ b/packages/shared/src/lib/auxiliary/transak/index.ts
@@ -4,3 +4,4 @@ export * from './constants'
 export * from './enums'
 export * from './interfaces'
 export * from './stores'
+export * from './utils'
diff --git a/packages/shared/src/lib/auxiliary/transak/utils/getTransakApiUrl.ts b/packages/shared/src/lib/auxiliary/transak/utils/getTransakApiUrl.ts
new file mode 100644
index 0000000000..be69f5ac4e
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/utils/getTransakApiUrl.ts
@@ -0,0 +1,11 @@
+import { SupportedNetworkId } from '@core/network'
+import { activeProfile } from '@core/profile/stores'
+import { get } from 'svelte/store'
+import { TRANSAK_API_PRODUCTION_BASE_URL, TRANSAK_API_STAGING_BASE_URL } from '../constants'
+
+export function getTransakApiUrl(): string {
+    const currentNetworkId = get(activeProfile)?.network?.id
+    const isTestnet = [SupportedNetworkId.IotaTestnet, SupportedNetworkId.Testnet].includes(currentNetworkId)
+
+    return isTestnet ? TRANSAK_API_STAGING_BASE_URL : TRANSAK_API_PRODUCTION_BASE_URL
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/utils/getTransakWidgetUrl.ts b/packages/shared/src/lib/auxiliary/transak/utils/getTransakWidgetUrl.ts
new file mode 100644
index 0000000000..54c991f88d
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/utils/getTransakWidgetUrl.ts
@@ -0,0 +1,12 @@
+import { NetworkId, SupportedNetworkId } from '@core/network'
+import { TRANSAK_PRODUCTION_WIDGET_URL, TRANSAK_STAGING_WIDGET_URL } from '../constants'
+
+export function getTransakWidgetUrl(networkId: NetworkId): string {
+    switch (networkId) {
+        case SupportedNetworkId.Iota:
+        case SupportedNetworkId.Shimmer:
+            return TRANSAK_PRODUCTION_WIDGET_URL
+        default:
+            return TRANSAK_STAGING_WIDGET_URL
+    }
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/utils/index.ts b/packages/shared/src/lib/auxiliary/transak/utils/index.ts
new file mode 100644
index 0000000000..b3422ae8da
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './getTransakApiUrl'
+export * from './getTransakWidgetUrl'
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 1d49e11a74..4e0a66a791 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
@@ -8,4 +8,5 @@ export interface ITransakWindowData {
     paymentMethod: string
     networkName: string
     cryptoCurrencySymbol: string
+    environment: 'PRODUCTION' | 'STAGING'
 }
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index 9b05eecb30..f5024d4912 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -819,6 +819,7 @@
             }
         },
         "buySell": {
+            "title": "Buy and Sell",
             "tooltip": {
                 "connected": "connected securely",
                 "redirected": "redirected, be careful!",
@@ -840,7 +841,8 @@
                     "fetchingQuotes": "Fetching quotes",
                     "noQuotes": "No quotes"
                 },
-                "noQuotes": "No quotes available please try again",
+                "emptyTitle": "No quotes available",
+                "emptyDescription": "Please select other options and try again",
                 "button": {
                     "selected": "Continue with {provider}",
                     "unselected": "No quote selected"