WIP

packages/desktop/features/buy-sell.features.ts

@@ -2,6 +2,9 @@ import { IFeatureFlag } from '@lib/features/interfaces'
 
 const buySellFeatures: IFeatureFlag = {
     enabled: true,
+    sell: {
+        enabled: true
+    }
 }
 
 export default buySellFeatures

packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts

@@ -39,6 +39,7 @@ export enum PopupId {
     ReceiveAddress = 'receiveAddress',
     RemoveProposal = 'removeProposal',
     Revote = 'revote',
+    SelectToken = 'selectToken',
     SendFlow = 'sendFlow',
     SignTypedData = 'signTypedData',
     SignMessage = 'signMessage',

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}

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>

packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { Platform, openUrlInBrowser } from '@core/app'
+    import { Pane } from '@ui'
+    import { Button, Icon, IconName, IOption, SelectInput, Tabs, Text } from '@bloomwalletio/ui'
+    import { localize } from '@core/i18n'
+    import { DISCORD_URL } from '@contexts/settings/constants'
+    import { isFeatureEnabled } from '@lib/features/utils'
+    import { TokenTile, TransakAmountInput } from './'
+    import { FiatCurrency } from '@core/market'
+
+    export let loading: boolean = false
+    let error: boolean = false
+    let fiatValue: string = ''
+
+    Platform.onEvent('transak-loaded', () => (loading = false))
+    Platform.onEvent('transak-not-loaded', () => (error = true))
+
+    function onButtonClick(): void {
+        openUrlInBrowser(DISCORD_URL)
+    }
+
+    const TABS = [
+        { key: 'buy', value: localize('views.buySell.tabs.buy') },
+        { key: 'sell', value: localize('views.buySell.tabs.sell') },
+    ]
+
+    let selectedTab = TABS[0]
+
+    const PAYMENT_METHOD_OPTIONS: IOption[] = [
+        { value: 'credit_card', label: 'Credit Card' },
+        { value: 'bank_transfer', label: 'Bank Transfer' },
+    ]
+
+    const CURRENCY_OPTIONS: IOption[] = Object.keys(FiatCurrency).map((currency) => ({
+        value: currency,
+    }))
+    let selectedCurrencyOption: IOption = CURRENCY_OPTIONS[0]
+    $: selectedCurrency = selectedCurrencyOption.value
+</script>
+
+<Pane classes="px-6 pb-6 pt-4 bg-surface dark:bg-surface-dark shadow-lg w-full h-full">
+    {#if error}
+        <div class="flex flex-col justify-center items-center w-full h-full gap-4">
+            <Icon name={IconName.ArrowDownUp} size="lg" textColor="brand" />
+            <Text type="body1">{localize('views.buySell.error.title')}</Text>
+            <Text textColor="secondary" align="center">{localize('views.buySell.error.description')}</Text>
+            <Button on:click={onButtonClick} text={localize('actions.visitDiscord')} />
+        </div>
+    {:else if loading}
+        <div class="flex flex-col justify-between items-center w-full h-full gap-8">
+            {#if isFeatureEnabled('buySell.sell')}
+                <div class="w-full">
+                    <Tabs bind:selectedTab tabs={TABS} />
+                </div>
+            {/if}
+            <div class="flex flex-col items-center gap-4 w-full">
+                <div class="w-3/4">
+                    <SelectInput label="Currency" options={CURRENCY_OPTIONS} bind:selected={selectedCurrencyOption} />
+                </div>
+                <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} />
+                <TokenTile {fiatValue} currency={FiatCurrency[selectedCurrency]} />
+                <div class="w-full">
+                    <SelectInput
+                        label="Payment method"
+                        options={PAYMENT_METHOD_OPTIONS}
+                        selected={PAYMENT_METHOD_OPTIONS[0]}
+                        hideValue
+                    />
+                </div>
+            </div>
+            <Button text={selectedTab.value} />
+        </div>
+    {/if}
+</Pane>

packages/desktop/views/dashboard/buy-sell/components/TransakHistoryPanel.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { Pill } from '@bloomwalletio/ui'
+    import { Pane } from '@ui'
+</script>
+
+<Pane classes="flex flex-col justify-start items-start w-full h-full p-6 gap-4 bg-surface dark:bg-surface-dark shadow-lg">
+    <Pill color="brand">Order history</Pill>
+</Pane>

packages/desktop/views/dashboard/buy-sell/components/index.ts

@@ -1,4 +1,6 @@
-export { default as TransakAccountPanel } from './TransakAccountPanel.svelte'
+export { default as TokenTile } from './TokenTile.svelte'
+export { default as TransakAmountInput } from './TransakAmountInput.svelte'
 export { default as TransakConnectionPanel } from './TransakConnectionPanel.svelte'
+export { default as TransakHistoryPanel } from './TransakHistoryPanel.svelte'
+export { default as TransakExchangePanel } from './TransakExchangePanel.svelte'
 export { default as TransakInfoPanel } from './TransakInfoPanel.svelte'
-export { default as TransakWindowPlaceholder } from './TransakWindowPlaceholder.svelte'

packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte

@@ -5,21 +5,15 @@
     import { activeProfile } from '@core/profile/stores'
     import { IPopupState, IProfileAuthPopupState, popupState, profileAuthPopup } from '@desktop/auxiliary/popup'
     import { onDestroy, onMount, tick } from 'svelte'
-    import {
-        TransakAccountPanel,
-        TransakConnectionPanel,
-        TransakInfoPanel,
-        TransakWindowPlaceholder,
-    } from '../components'
+    import { TransakConnectionPanel, TransakHistoryPanel, TransakExchangePanel, TransakInfoPanel } from '../components'
     import { isDashboardSideBarExpanded } from '@core/ui'
-    import { FiatCurrency, MarketCoinId } from '@core/market/enums'
-    import { MarketCurrency } from '@core/market/types'
+    import { MarketCoinId, FiatCurrency } from '@core/market/enums'
     import { marketCoinPrices } from '@core/market/stores'
     import { DrawerState } from '@desktop/auxiliary/drawer/types'
     import { drawerState } from '@desktop/auxiliary/drawer/stores'
 
     let isTransakOpen: boolean = false
-    let isTransakLoading: boolean = true
+    let isTransakLoading: boolean = false
 
     $: $isDashboardSideBarExpanded, void updateTransakBounds()
 
@@ -65,7 +59,7 @@
         })
     }
 
-    function getDefaultFiatAmount(currency: MarketCurrency): number {
+    function getDefaultFiatAmount(currency: FiatCurrency): number {
         const DEFAULT_FIAT_AMOUNT = 1000
         switch (currency) {
             case FiatCurrency.USD:
@@ -95,10 +89,12 @@
         await Platform.closeTransak()
         isTransakOpen = false
         await Platform.openTransak({
-            currency: $activeProfile?.settings.marketCurrency,
-            address: $selectedAccount.depositAddress,
+            currency: Object.values(FiatCurrency).includes($activeProfile?.settings.marketCurrency as FiatCurrency)
+                ? $activeProfile?.settings.marketCurrency
+                : FiatCurrency.USD,
+            address: $selectedAccount?.depositAddress ?? '',
             service: 'BUY',
-            amount: getDefaultFiatAmount($activeProfile?.settings.marketCurrency ?? FiatCurrency.USD),
+            amount: getDefaultFiatAmount(($activeProfile?.settings.marketCurrency as FiatCurrency) ?? FiatCurrency.USD),
         })
         isTransakOpen = true
         await updateTransakBounds()
@@ -118,29 +114,14 @@
 <svelte:window on:resize={updateTransakBounds} />
 
 <div class="flex justify-center gap-4 h-full w-full">
-    <div class="account-panel flex flex-col gap-4">
+    <div class="flex flex-col gap-4 max-w-[20rem] h-full">
         <TransakConnectionPanel refreshFunction={resetTransak} />
-        <TransakAccountPanel />
+        <TransakInfoPanel />
     </div>
-    <div class="transak-panel" bind:this={transakContainer}>
-        <TransakWindowPlaceholder bind:loading={isTransakLoading} />
+    <div class="w-[25rem] shrink-0 h-fit" bind:this={transakContainer}>
+        <TransakExchangePanel bind:loading={isTransakLoading} />
     </div>
-    <div class="info-panel">
-        <TransakInfoPanel />
+    <div class="flex-1 max-w-[20rem] h-full">
+        <TransakHistoryPanel />
     </div>
 </div>
-
-<style lang="postcss">
-    .transak-panel {
-        @apply flex-1 min-w-[360px] max-w-[480px] max-h-[786px];
-    }
-
-    .account-panel,
-    .info-panel {
-        @apply max-w-[312px];
-    }
-
-    .account-panel {
-        @apply shrink-0 w-[312px];
-    }
-</style>