-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <[email protected]> * 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 <[email protected]>
- Loading branch information
1 parent
270748b
commit e7e8d4d
Showing
19 changed files
with
341 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 0 additions & 50 deletions
50
packages/desktop/views/dashboard/buy-sell/components/TokenTile.svelte
This file was deleted.
Oops, something went wrong.
41 changes: 41 additions & 0 deletions
41
packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
24 changes: 24 additions & 0 deletions
24
packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.