Merge pull request #10034 from LedgerHQ/feat/select-network-component

feat(LLD): select network component

Author: ejaycoleman

.changeset/eight-parrots-leave.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": minor
+"@ledgerhq/react-ui": minor
+---
+
+Add network selection components

apps/ledger-live-desktop/src/newArch/features/ModularDrawer/components/SelectAssetFlow.tsx

@@ -6,7 +6,7 @@ import { CryptoOrTokenCurrency, Currency } from "@ledgerhq/types-cryptoassets";
 import Fuse from "fuse.js";
 import { useCurrenciesByMarketcap } from "@ledgerhq/live-common/currencies/hooks";
 import Text from "~/renderer/components/Text";
-import { CurrencyList } from "~/renderer/drawers/DataSelector/CurrencyList";
+import { SelectNetwork } from "./SelectNetwork";
 import { listAndFilterCurrencies } from "@ledgerhq/live-common/platform/helpers";
 import { getEnv } from "@ledgerhq/live-env";
 
@@ -81,8 +81,13 @@ function SelectAssetFlow(props: SelectAccountAndCurrencyDrawerProps) {
             onChange={setSearchValue}
           />
         </SearchInputContainer>
-        {/* @ts-expect-error compatibility issue betwenn CryptoOrTokenCurrency and Currency (which includes Fiat) and the SelectAccountDrawer components  */}
-        <CurrencyList currencies={filteredCurrencies} onCurrencySelect={handleCurrencySelected} />
+        <SelectNetwork
+          // @ts-expect-error compatibility issue between CryptoOrTokenCurrency and Currency (which includes Fiat) and the SelectAccountDrawer components
+          networks={filteredCurrencies}
+          onNetworkSelected={handleCurrencySelected}
+          flow="Modular Asset Flow"
+          source="Accounts"
+        />
       </SelectorContent>
     </SelectAccountAndCurrencyDrawerContainer>
   );

apps/ledger-live-desktop/src/newArch/features/ModularDrawer/components/SelectNetwork.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { NetworkList } from "@ledgerhq/react-ui/pre-ldls";
+import { track } from "~/renderer/analytics/segment";
+import TrackPage from "~/renderer/analytics/TrackPage";
+
+type SelectNetworkProps = {
+  networks: CryptoOrTokenCurrency[];
+  onNetworkSelected: (network: CryptoOrTokenCurrency) => void;
+  source: string;
+  flow: string;
+};
+
+export const SelectNetwork = ({
+  networks,
+  onNetworkSelected,
+  source,
+  flow,
+}: SelectNetworkProps) => {
+  const onClick = (networkId: string) => {
+    track("network_clicked", { network: networkId, page: "Modular Asset Flow", flow });
+
+    const network = networks.find(({ id }) => id === networkId);
+    if (!network) return;
+
+    onNetworkSelected(network);
+  };
+
+  return (
+    <>
+      <TrackPage category={source} name="Modular Network Selection" flow={flow} />
+      <div style={{ flex: "1 1 auto", width: "100%" }}>
+        <NetworkList networks={networks} onClick={onClick} />
+      </div>
+    </>
+  );
+};

libs/ui/packages/react/src/pre-ldls/components/NetworkItem/NetworkItem.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NetworkItem } from "./NetworkItem";
+import { expect, within } from "@storybook/test";
+
+const meta: Meta<typeof NetworkItem> = {
+  component: NetworkItem,
+  title: "PreLdls/Components/NetworkItem",
+  tags: ["autodocs"],
+  args: { name: "Bitcoin" },
+};
+export default meta;
+
+type Story = StoryObj<typeof NetworkItem>;
+
+export const Default: Story = {};
+
+export const TestNetworkItem: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const name = canvas.getByText("Bitcoin");
+
+    await expect(name).toBeInTheDocument();
+  },
+};

libs/ui/packages/react/src/pre-ldls/components/NetworkItem/NetworkItem.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import styled from "styled-components";
+import { withTokens } from "../../libs";
+import { Text } from "../../../components";
+
+type NetworkItemProps = {
+  name: string;
+  onClick: () => void;
+};
+
+const TempAssetBadge = () => (
+  // TODO: To be replaced with LIVE-18221
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <span
+      style={{
+        height: 48,
+        width: 48,
+        borderRadius: 48,
+        backgroundColor: "grey",
+        display: "inline-block",
+      }}
+    />
+  </div>
+);
+
+const Wrapper = styled.div`
+  ${withTokens(
+    "spacing-xs",
+    "marging-s",
+    "colors-content-default-default",
+    "colors-surface-transparent-hover",
+    "colors-surface-transparent-pressed",
+  )}
+  display: flex;
+  padding: var(--spacing-xs);
+  cursor: pointer;
+
+  :hover {
+    background-color: var(--colors-surface-transparent-hover);
+  }
+
+  :active {
+    background-color: var(--colors-surface-transparent-pressed);
+  }
+`;
+
+const InfoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: var(--marging-s);
+`;
+
+export const NetworkItem = ({ name, onClick }: NetworkItemProps) => {
+  return (
+    <Wrapper onClick={onClick}>
+      <TempAssetBadge />
+      <InfoWrapper>
+        <Text
+          variant="largeLineHeight"
+          fontWeight="semiBold"
+          color="var(--colors-content-default-default)"
+        >
+          {name}
+        </Text>
+      </InfoWrapper>
+    </Wrapper>
+  );
+};

libs/ui/packages/react/src/pre-ldls/components/NetworkList/NetworkList.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { NetworkList } from "./NetworkList";
+import { expect, fn, userEvent, within } from "@storybook/test";
+
+const testFn = fn();
+
+const meta: Meta<typeof NetworkList> = {
+  component: NetworkList,
+  decorators: [
+    Story => (
+      <div style={{ height: "400px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  title: "PreLdls/Components/NetworkList",
+  tags: ["autodocs"],
+  args: {
+    networks: Array.from({ length: 50 }, (_, i) => ({ name: `Bitcoin ${i}`, id: `btc${i}` })),
+    onClick: testFn,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof NetworkList>;
+
+export const Default: Story = {};
+
+export const TestNetworkClick: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByText("Bitcoin 1");
+    await userEvent.click(input);
+    await expect(testFn).toHaveBeenCalledWith("btc1");
+  },
+};

libs/ui/packages/react/src/pre-ldls/components/NetworkList/NetworkList.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { NetworkItem } from "../NetworkItem/NetworkItem";
+import { VirtualList } from "../VirtualList/VirtualList";
+
+export const NetworkList = ({
+  networks,
+  onClick,
+}: {
+  networks: { name: string; id: string }[];
+  onClick: (networkId: string) => void;
+}) => {
+  return (
+    <VirtualList
+      itemHeight={64}
+      count={networks.length}
+      renderItem={(i: number) => (
+        <NetworkItem name={networks[i].name} onClick={() => onClick(networks[i].id)} />
+      )}
+    />
+  );
+};

libs/ui/packages/react/src/pre-ldls/components/index.ts

@@ -1,5 +1,7 @@
 export * from "./AssetItem/AssetItem";
 export * from "./AssetList/AssetList";
 export * from "./Input/Input";
+export * from "./NetworkItem/NetworkItem";
+export * from "./NetworkList/NetworkList";
 export * from "./Search/Search";
 export * from "./VirtualList/VirtualList";