From b09929853ffeb58f4d0155cf2566d269bb5fdc72 Mon Sep 17 00:00:00 2001 From: Jean Ribeiro Date: Thu, 11 Jul 2024 11:04:43 -0300 Subject: [PATCH] feat: adds multichain support in BuySell view --- .../popups/TransakSelectTokenPopup.svelte | 112 +++++++----------- .../lib/electron/managers/transak.manager.ts | 6 +- .../buy-sell/components/TokenTile.svelte | 50 -------- .../TransakCryptoCurrencyAvatar.svelte | 41 +++++++ .../TransakCryptoCurrencyTile.svelte | 24 ++++ .../components/TransakExchangePanel.svelte | 17 ++- .../dashboard/buy-sell/components/index.ts | 2 +- .../actions/updateTransakCryptoCurrencies.ts | 12 +- .../lib/auxiliary/transak/apis/transak.api.ts | 28 ++++- .../src/lib/auxiliary/transak/stores/index.ts | 1 + ...selected-exchange-crypto-currency.store.ts | 4 + .../stores/transak-crypto-currencies.store.ts | 8 +- .../transak-window-data.interface.ts | 2 + 13 files changed, 173 insertions(+), 134 deletions(-) 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/popups/TransakSelectTokenPopup.svelte b/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte index 8e757999e5..5145a37293 100644 --- a/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte +++ b/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte @@ -1,83 +1,60 @@ - -{#if token && token.metadata} - -
- -
-
- - {token.metadata.name - ? truncateString(token.metadata.name, 13, 0) - : truncateString(token.id, 6, 7)} - - - {token.metadata - ? `≈ ${formatTokenAmount(tokenAmount ?? BigInt(0), token.metadata, { round: false })}` - : '-'} - -
-
- - {marketPrice ? formatCurrency(marketPrice, currency) : '-'} - - - {fiatValue !== undefined ? formatCurrency(fiatValue ?? '', currency) : '-'} - -
-
-
- -{/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..0cf464cd5d --- /dev/null +++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte @@ -0,0 +1,41 @@ + + +
+ + {#if image && !imageLoadError} + {cryptoCurrency.name} (imageLoadError = true)} + /> + {/if} + + {#if (size === 'base' || size === 'md' || size === 'lg') && !hideNetworkBadge} + + + + {/if} +
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..8b9cb998b7 --- /dev/null +++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte @@ -0,0 +1,24 @@ + + + +
+ +
+
+ {cryptoCurrency.symbol} + {cryptoCurrency.name} +
+ + {cryptoCurrency.networkName} + +
+
+ diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte index 9be5fd0bc4..fd156ca64b 100644 --- a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte +++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte @@ -22,8 +22,8 @@ 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, @@ -72,7 +72,7 @@ state: IPopupState, profilePopupState: IProfileAuthPopupState, settingsState: ISettingsState, - drawerState: DrawerState + drawerState: DrawerState | undefined ): Promise { if (state.active || profilePopupState.active || settingsState.open || drawerState?.id) { await Platform.hideTransak() @@ -139,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() @@ -192,7 +196,12 @@ /> - + {#if $transakCryptoCurrencies && $transakCryptoCurrencies.length > 0} + + {/if}
{ + // TODO: dynamically generate list of allowed names + const allowedNetworkNames = ['miota', 'ethereum'] + const allowedNetworkChainIds = ['1'] + const api = new TransakApi() - const { response } = (await api.getCryptoCurrencies()) ?? {} + const response = await api.getFilteredCryptoCurrencies(allowedNetworkNames, allowedNetworkChainIds) transakCryptoCurrencies.set( response?.reduce((acc, token) => { @@ -14,6 +18,8 @@ export async function updateTransakCryptoCurrencies(): Promise { return [ ...acc, { + name: token.name, + symbol: token.symbol, image: { thumb: token.image.thumb, small: token.image.small, @@ -24,6 +30,6 @@ export async function updateTransakCryptoCurrencies(): Promise { decimals: token.decimals, }, ] - }, [] as TransakCryptoCurrencies) + }, [] as TransakCryptoCurrency[]) ) } 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 { + async getCryptoCurrencies(): Promise { const response = await this.get(TransakApiEndpoint.CryptoCurrencies) - return response + return response?.response + } + + async getFilteredCryptoCurrencies( + allowedNetworkNames: string[], + allowedNetworkChainIds: string[] + ): Promise { + 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/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 = 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 457a3f4104..d3627ad272 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,10 +1,12 @@ import { Writable, writable } from 'svelte/store' -export type TransakCryptoCurrencies = { +export type TransakCryptoCurrency = { + name: string + symbol: string image: { thumb: string; small: string; large: string } networkName: string chainId?: string | null decimals: number -}[] +} -export const transakCryptoCurrencies: Writable = writable(undefined) +export const transakCryptoCurrencies: Writable = 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 }