Feat/coinmarket crypto select #14551

adderpositive · 2024-09-26T12:31:23Z

Description

Replace Select with Select modal of assets in Swap & Buy
Search should allow to input crypto name, symbol, contract address or network name
- Placeholder copy: Search by name or paste address
Networks filter: this works as radio button, only one can be selected and it’s static list, not all available networks will be listed
- Ethereum
- Polygon
- Solana
- BNB Smart Chain

Design

design in Figma

Before

In Buy section

In Exchange section

After

@@ -44,13 +53,21 @@ type VirtualizedListProps<T> = {
    items: Array<T & { height: number }>;
    onScroll?: (e: Event) => void;
    onScrollEnd: () => void;
-    height: number | string;
+    listHeight: number | string;
+    listMinHeight: number | string;
    renderItem: (item: T, index: number) => React.ReactNode;
 };

 export const VirtualizedList = forwardRef<HTMLDivElement, VirtualizedListProps<any>>(


The shadow at the bottom is over scrollbar

scrollbar should probably not be over items

Screen.Recording.2024-09-27.at.16.14.26.mov

cc @jvaclavik

packages/suite/src/support/messages.ts

tomasklim · 2024-09-27T14:22:33Z

...let/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx

+
+    const getNetworks = () => {
+        const eth = getNetwork('eth');
+        const polygon = getNetwork('matic');


I like that there is Base but we do not offer filter for it :(

tomasklim · 2024-09-27T14:24:40Z

packages/suite/src/hooks/wallet/coinmarket/useCoinmarketInfo.ts

+    a: CoinmarketCryptoSelectItemProps,
+    b: CoinmarketCryptoSelectItemProps,
+) => {
+    const order = ['bitcoin', 'ethereum', 'litecoin', 'solana', 'cardano'];


I would sort it using order from networksConfig.

cc @Hannsek maybe we should also sort it somehow?

packages/product-components/src/components/SelectAssetModal/AssetItem.tsx

tomasklim · 2024-09-27T14:33:20Z

@marek-andrsk
Why tokens are sorted like that? OMG is first, it was delisted from Binance 3 months ago, that does not sound like that it should be on #1 place

packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx

packages/suite/src/support/messages.ts

tomasklim · 2024-09-30T11:21:28Z

...let/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx

+
+    const getNetworks = () => {
+        const eth = getNetwork('eth');
+        const polygon = getNetwork('matic');


Please use order from networksConfig. We will sort it before freeze

packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx

tomasklim · 2024-09-30T11:31:00Z

It is not possible to get offer for Base, Optimism, Arbitrum

tomasklim

LGTM 🎸

LukasRada

Resolve the conflict and good job :)

adderpositive added feature Product related issue visible for end user components Related to global components +Invity Related to Invity project labels Sep 26, 2024

adderpositive requested review from jvaclavik, LukasRada and tomasklim September 26, 2024 12:31

adderpositive self-assigned this Sep 26, 2024

adderpositive requested review from MiroslavProchazka and adamhavel as code owners September 26, 2024 12:31

adderpositive force-pushed the feat/coinmarket-crypto-select branch 3 times, most recently from bab3e17 to 17c25c9 Compare September 26, 2024 12:47

tomasklim reviewed Sep 26, 2024

View reviewed changes

tomasklim reviewed Sep 27, 2024

View reviewed changes

jvaclavik reviewed Sep 27, 2024

View reviewed changes

adderpositive requested review from jvaclavik and tomasklim September 27, 2024 13:22

LukasRada reviewed Sep 27, 2024

View reviewed changes

packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx Show resolved Hide resolved

LukasRada reviewed Sep 27, 2024

View reviewed changes

tomasklim requested changes Sep 27, 2024

View reviewed changes

tomasklim reviewed Sep 27, 2024

View reviewed changes

packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx Outdated Show resolved Hide resolved

tomasklim mentioned this pull request Sep 30, 2024

EVM Tokens / Contract address in send form #13749

Open

tomasklim reviewed Sep 30, 2024

View reviewed changes

tomasklim approved these changes Oct 1, 2024

View reviewed changes

adderpositive force-pushed the feat/coinmarket-crypto-select branch from 1e81d6a to efec9bf Compare October 1, 2024 11:37

adderpositive added 2 commits October 1, 2024 14:28

feat(coinmarket): add crypto picker for buy/exchange

8ba5ffb

refactor(suite): rename menuIsOpen to isMenuOpen

1889ce1

LukasRada approved these changes Oct 1, 2024

View reviewed changes

feat(suite): add minHeight to Flex component

b1afdee

adderpositive force-pushed the feat/coinmarket-crypto-select branch from efec9bf to b1afdee Compare October 1, 2024 12:38

tomasklim merged commit 4bc84bf into develop Oct 1, 2024
16 of 22 checks passed

tomasklim deleted the feat/coinmarket-crypto-select branch October 1, 2024 16:32

+              const ColumnWrapper = styled.div<{ $height: string }>`
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  justify-content: center;
+                  height: ${({ $height }) => $height};
+                  min-height: 180px;
+              `;

-                  onSelectAssetModal: (selectedAsset: string) => void;
-                  onFavoriteClick: (isFavorite: boolean) => void;
-              };
+              const LIST_HEIGHT = 'calc(80vh - 267px)'; // 267px is height header part of modal

-                  onFavoriteClick: (isFavorite: boolean) => void;
-              };
+              const LIST_HEIGHT = 'calc(80vh - 267px)'; // 267px is height header part of modal
+              const height = 60;

                                                   name={name}
                                                   symbol={symbol}
                                                   isFavorite={isFavorite}
                                                   badge={badge}
+                                                  logo={{

@@ @@ -113,7 +131,7 @@ export const CoinmarketFormInputCryptoSelect = < @@
                                       }}
                                       data-testid="@coinmarket/form/select-crypto"
                                       isClearable={false}
-                                      isSearchable
+                                      menuIsOpen={false}

+              const ParagraphWrapper = styled.div`
+                  max-width: 280px;
+                  margin: 0 auto;

+              };
+              // temporary styles, should be replaced in the future
+              const CheckableTag = styled.button<CheckableTagProps>`

+              import { FormattedMessage } from 'react-intl';
+              interface CheckableTagProps {
+                  $variant: 'primary' | 'tertiary';

		label: string; // token shortcut
		cryptoName: string \| undefined; // full name

Feat/coinmarket crypto select #14551

Feat/coinmarket crypto select #14551

Conversation

adderpositive commented Sep 26, 2024 • edited Loading

Description

Design

Before

After

Related

tomasklim left a comment • edited Loading

Choose a reason for hiding this comment

adderpositive commented Sep 27, 2024

jvaclavik commented Sep 27, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jvaclavik left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adderpositive Sep 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adderpositive commented Sep 27, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tomasklim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tomasklim commented Sep 27, 2024 • edited Loading

Choose a reason for hiding this comment

tomasklim commented Sep 30, 2024

tomasklim left a comment

Choose a reason for hiding this comment

LukasRada left a comment

Choose a reason for hiding this comment

adderpositive commented Sep 26, 2024 •

edited

Loading

tomasklim left a comment •

edited

Loading

adderpositive Sep 27, 2024 •

edited

Loading

tomasklim commented Sep 27, 2024 •

edited

Loading