@ledgerhq/react-ui 0.24.0 → 0.25.0-nightly.0

package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js

@@ -0,0 +1,102 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AccountItem_exports = {};
+__export(AccountItem_exports, {
+  AccountItem: () => AccountItem
+});
+module.exports = __toCommonJS(AccountItem_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_libs = require("../../libs");
+var import_components = require("../../../components");
+var import_Tag = require("../Tag/Tag");
+var import_Address = require("../Address/Address");
+const Wrapper = import_styled_components.default.div`
+  ${(0, import_libs.withTokens)(
+  "spacing-xxxs",
+  "spacing-xxs",
+  "spacing-xs",
+  "colors-content-default-default",
+  "colors-surface-transparent-hover",
+  "colors-surface-transparent-pressed",
+  "colors-content-subdued-default-default"
+)}
+
+  display: flex;
+  padding: var(--spacing-xs) var(--spacing-xxs);
+  cursor: pointer;
+  justify-content: space-between;
+  align-items: center;
+
+  :hover {
+    background-color: var(--colors-surface-transparent-hover);
+  }
+
+  :active {
+    background-color: var(--colors-surface-transparent-pressed);
+  }
+`;
+const AccountItem = ({ onClick, account, showIcon = true }) => {
+  const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" } }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          marginBottom: "var(--spacing-xxxs)"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.Text,
+        {
+          variant: "largeLineHeight",
+          fontWeight: "semiBold",
+          color: "var(--colors-content-default-default)",
+          marginRight: "var(--spacing-xxs)",
+          fontSize: "14px",
+          lineHeight: "20px"
+        },
+        name
+      ),
+      protocol && /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, null, protocol)
+    ), /* @__PURE__ */ import_react.default.createElement(import_Address.Address, { address, cryptoId, ticker, showIcon }))
+  ), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", textAlign: "right" } }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "14px" }, fiatValue), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance)));
+};
+//# sourceMappingURL=AccountItem.js.map

package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { Tag } from \"../Tag/Tag\";\nimport { Address } from \"../Address/Address\";\n\nexport type Account = {\n  name: string;\n  id: string;\n  balance: string;\n  fiatValue: string;\n  address: string;\n  protocol?: string;\n  cryptoId?: string;\n  ticker?: string;\n};\n\ntype AccountItemProps = {\n  onClick: () => void;\n  showIcon?: boolean;\n  account: Account;\n};\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxxs\",\n    \"spacing-xxs\",\n    \"spacing-xs\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n    \"colors-content-subdued-default-default\",\n  )}\n\n  display: flex;\n  padding: var(--spacing-xs) var(--spacing-xxs);\n  cursor: pointer;\n  justify-content: space-between;\n  align-items: center;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nexport const AccountItem = ({ onClick, account, showIcon = true }: AccountItemProps) => {\n  const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;\n\n  return (\n    <Wrapper onClick={onClick}>\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n        }}\n      >\n        <div style={{ display: \"flex\", flexDirection: \"column\", justifyContent: \"center\" }}>\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"row\",\n              alignItems: \"center\",\n              marginBottom: \"var(--spacing-xxxs)\",\n            }}\n          >\n            <Text\n              variant=\"largeLineHeight\"\n              fontWeight=\"semiBold\"\n              color=\"var(--colors-content-default-default)\"\n              marginRight=\"var(--spacing-xxs)\"\n              fontSize=\"14px\"\n              lineHeight=\"20px\"\n            >\n              {name}\n            </Text>\n            {protocol && <Tag>{protocol}</Tag>}\n          </div>\n          <Address address={address} cryptoId={cryptoId} ticker={ticker} showIcon={showIcon} />\n        </div>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", textAlign: \"right\" }}>\n        <Text fontSize=\"14px\">{fiatValue}</Text>\n        <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n          {balance}\n        </Text>\n      </div>\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,iBAAoB;AACpB,qBAAwB;AAmBxB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBI,MAAM,cAAc,CAAC,EAAE,SAAS,SAAS,WAAW,KAAK,MAAwB;AACtF,QAAM,EAAE,MAAM,SAAS,WAAW,UAAU,SAAS,QAAQ,SAAS,IAAI;AAE1E,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,MACd;AAAA;AAAA,IAEA,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,gBAAgB,SAAS,KAC/E,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA;AAAA,MAEA,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,UAAS;AAAA,UACT,YAAW;AAAA;AAAA,QAEV;AAAA,MACH;AAAA,MACC,YAAY,6BAAAA,QAAA,cAAC,sBAAK,QAAS;AAAA,IAC9B,GACA,6BAAAA,QAAA,cAAC,0BAAQ,SAAkB,UAAoB,QAAgB,UAAoB,CACrF;AAAA,EACF,GACA,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,WAAW,QAAQ,KACzE,6BAAAA,QAAA,cAAC,0BAAK,UAAS,UAAQ,SAAU,GACjC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,QAAO,OAAM,mDACzB,OACH,CACF,CACF;AAEJ;",
+  "names": ["styled", "React"]
+}

package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js

@@ -0,0 +1,113 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AccountItem_stories_exports = {};
+__export(AccountItem_stories_exports, {
+  Default: () => Default,
+  TestAccount: () => TestAccount,
+  TestWithoutAddressIcon: () => TestWithoutAddressIcon,
+  TestWithoutProtocol: () => TestWithoutProtocol,
+  default: () => AccountItem_stories_default
+});
+module.exports = __toCommonJS(AccountItem_stories_exports);
+var import_AccountItem = require("./AccountItem");
+var import_test = require("@storybook/test");
+const meta = {
+  component: import_AccountItem.AccountItem,
+  title: "PreLdls/Components/AccountItem",
+  tags: ["autodocs"],
+  args: {
+    account: {
+      id: "1234",
+      name: "Main BTC",
+      balance: "0.118 ETH",
+      fiatValue: "$5,969.83",
+      address: "n4A9...Zgty",
+      cryptoId: "bitcoin",
+      ticker: "btc"
+    }
+  }
+};
+var AccountItem_stories_default = meta;
+const Default = {};
+const TestAccount = {
+  args: {
+    account: {
+      id: "1234",
+      name: "Main BTC",
+      balance: "0.118 BTC",
+      fiatValue: "$5,969.83",
+      protocol: "Native Segwit",
+      address: "n4A9...Zgty",
+      cryptoId: "bitcoin",
+      ticker: "btc"
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const name = canvas.getByText("Main BTC");
+    const protocol = canvas.getByTestId("tag");
+    const address = canvas.getByText("n4A9...Zgty");
+    const addressIcon = canvas.getByTestId("address-icon");
+    const fiatValue = canvas.getByText("$5,969.83");
+    const balance = canvas.getByText("0.118 BTC");
+    await (0, import_test.expect)(name).toBeInTheDocument();
+    await (0, import_test.expect)(protocol).toBeInTheDocument();
+    await (0, import_test.expect)(protocol).toHaveTextContent("Native Segwit");
+    await (0, import_test.expect)(address).toBeInTheDocument();
+    await (0, import_test.expect)(addressIcon).toBeInTheDocument();
+    await (0, import_test.expect)(fiatValue).toBeInTheDocument();
+    await (0, import_test.expect)(balance).toBeInTheDocument();
+  }
+};
+const TestWithoutProtocol = {
+  args: {
+    account: {
+      id: "1234",
+      name: "Main BTC",
+      balance: "0.118 BTC",
+      fiatValue: "$5,969.83",
+      address: "n4A9...Zgty",
+      cryptoId: "bitcoin",
+      ticker: "btc"
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const protocol = canvas.queryByTestId("tag");
+    await (0, import_test.expect)(protocol).not.toBeInTheDocument();
+  }
+};
+const TestWithoutAddressIcon = {
+  args: {
+    account: {
+      id: "1234",
+      name: "Main BTC",
+      balance: "0.118 BTC",
+      fiatValue: "$5,969.83",
+      address: "n4A9...Zgty"
+    },
+    showIcon: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const addressIcon = canvas.queryByTestId("address-icon");
+    await (0, import_test.expect)(addressIcon).not.toBeInTheDocument();
+  }
+};
+//# sourceMappingURL=AccountItem.stories.js.map

package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AccountItem } from \"./AccountItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof AccountItem> = {\n  component: AccountItem,\n  title: \"PreLdls/Components/AccountItem\",\n  tags: [\"autodocs\"],\n  args: {\n    account: {\n      id: \"1234\",\n      name: \"Main BTC\",\n      balance: \"0.118 ETH\",\n      fiatValue: \"$5,969.83\",\n      address: \"n4A9...Zgty\",\n      cryptoId: \"bitcoin\",\n      ticker: \"btc\",\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AccountItem>;\n\nexport const Default: Story = {};\n\nexport const TestAccount: Story = {\n  args: {\n    account: {\n      id: \"1234\",\n      name: \"Main BTC\",\n      balance: \"0.118 BTC\",\n      fiatValue: \"$5,969.83\",\n      protocol: \"Native Segwit\",\n      address: \"n4A9...Zgty\",\n      cryptoId: \"bitcoin\",\n      ticker: \"btc\",\n    },\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const name = canvas.getByText(\"Main BTC\");\n    const protocol = canvas.getByTestId(\"tag\");\n    const address = canvas.getByText(\"n4A9...Zgty\");\n    const addressIcon = canvas.getByTestId(\"address-icon\");\n    const fiatValue = canvas.getByText(\"$5,969.83\");\n    const balance = canvas.getByText(\"0.118 BTC\");\n\n    await expect(name).toBeInTheDocument();\n    await expect(protocol).toBeInTheDocument();\n    await expect(protocol).toHaveTextContent(\"Native Segwit\");\n    await expect(address).toBeInTheDocument();\n    await expect(addressIcon).toBeInTheDocument();\n    await expect(fiatValue).toBeInTheDocument();\n    await expect(balance).toBeInTheDocument();\n  },\n};\n\nexport const TestWithoutProtocol: Story = {\n  args: {\n    account: {\n      id: \"1234\",\n      name: \"Main BTC\",\n      balance: \"0.118 BTC\",\n      fiatValue: \"$5,969.83\",\n      address: \"n4A9...Zgty\",\n      cryptoId: \"bitcoin\",\n      ticker: \"btc\",\n    },\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const protocol = canvas.queryByTestId(\"tag\");\n\n    await expect(protocol).not.toBeInTheDocument();\n  },\n};\n\nexport const TestWithoutAddressIcon: Story = {\n  args: {\n    account: {\n      id: \"1234\",\n      name: \"Main BTC\",\n      balance: \"0.118 BTC\",\n      fiatValue: \"$5,969.83\",\n      address: \"n4A9...Zgty\",\n    },\n    showIcon: false,\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const addressIcon = canvas.queryByTestId(\"address-icon\");\n\n    await expect(addressIcon).not.toBeInTheDocument();\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA4B;AAC5B,kBAA+B;AAE/B,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,UAAU;AACxC,UAAM,WAAW,OAAO,YAAY,KAAK;AACzC,UAAM,UAAU,OAAO,UAAU,aAAa;AAC9C,UAAM,cAAc,OAAO,YAAY,cAAc;AACrD,UAAM,YAAY,OAAO,UAAU,WAAW;AAC9C,UAAM,UAAU,OAAO,UAAU,WAAW;AAE5C,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,QAAQ,EAAE,kBAAkB;AACzC,cAAM,oBAAO,QAAQ,EAAE,kBAAkB,eAAe;AACxD,cAAM,oBAAO,OAAO,EAAE,kBAAkB;AACxC,cAAM,oBAAO,WAAW,EAAE,kBAAkB;AAC5C,cAAM,oBAAO,SAAS,EAAE,kBAAkB;AAC1C,cAAM,oBAAO,OAAO,EAAE,kBAAkB;AAAA,EAC1C;AACF;AAEO,MAAM,sBAA6B;AAAA,EACxC,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,WAAW,OAAO,cAAc,KAAK;AAE3C,cAAM,oBAAO,QAAQ,EAAE,IAAI,kBAAkB;AAAA,EAC/C;AACF;AAEO,MAAM,yBAAgC;AAAA,EAC3C,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,EACZ;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,cAAc,OAAO,cAAc,cAAc;AAEvD,cAAM,oBAAO,WAAW,EAAE,IAAI,kBAAkB;AAAA,EAClD;AACF;",
+  "names": []
+}

package/lib/cjs/pre-ldls/components/AccountList/AccountList.js

@@ -0,0 +1,47 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AccountList_exports = {};
+__export(AccountList_exports, {
+  AccountList: () => AccountList
+});
+module.exports = __toCommonJS(AccountList_exports);
+var import_react = __toESM(require("react"));
+var import_AccountItem = require("../AccountItem/AccountItem");
+var import_VirtualList = require("../VirtualList/VirtualList");
+const AccountList = ({
+  accounts,
+  onClick
+}) => {
+  const renderAccountItem = (0, import_react.useCallback)(
+    (account) => /* @__PURE__ */ import_react.default.createElement(import_AccountItem.AccountItem, { onClick: () => onClick(account.id), account }),
+    [onClick]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_VirtualList.VirtualList, { items: accounts, itemHeight: 68, renderItem: renderAccountItem });
+};
+//# sourceMappingURL=AccountList.js.map

package/lib/cjs/pre-ldls/components/AccountList/AccountList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { Account, AccountItem } from \"../AccountItem/AccountItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AccountList = ({\n  accounts,\n  onClick,\n}: {\n  accounts: Account[];\n  onClick: (networkId: string) => void;\n}) => {\n  const renderAccountItem = useCallback(\n    (account: Account) => <AccountItem onClick={() => onClick(account.id)} account={account} />,\n    [onClick],\n  );\n\n  return <VirtualList items={accounts} itemHeight={68} renderItem={renderAccountItem} />;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,yBAAqC;AACrC,yBAA4B;AAErB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,wBAAoB;AAAA,IACxB,CAAC,YAAqB,6BAAAA,QAAA,cAAC,kCAAY,SAAS,MAAM,QAAQ,QAAQ,EAAE,GAAG,SAAkB;AAAA,IACzF,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,6BAAAA,QAAA,cAAC,kCAAY,OAAO,UAAU,YAAY,IAAI,YAAY,mBAAmB;AACtF;",
+  "names": ["React"]
+}

package/lib/cjs/pre-ldls/components/AccountList/AccountList.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AccountList_stories_exports = {};
+__export(AccountList_stories_exports, {
+  Default: () => Default,
+  TestAccountClick: () => TestAccountClick,
+  default: () => AccountList_stories_default
+});
+module.exports = __toCommonJS(AccountList_stories_exports);
+var import_react = __toESM(require("react"));
+var import_AccountList = require("./AccountList");
+var import_test = require("@storybook/test");
+const testFn = (0, import_test.fn)();
+const meta = {
+  component: import_AccountList.AccountList,
+  decorators: [
+    (Story) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "400px" } }, /* @__PURE__ */ import_react.default.createElement(Story, null))
+  ],
+  title: "PreLdls/Components/AccountList",
+  tags: ["autodocs"],
+  args: {
+    accounts: Array.from({ length: 50 }, (_, i) => {
+      return {
+        name: `Bitcoin ${i}`,
+        id: `btc${i}`,
+        balance: "0.004 BTC",
+        fiatValue: "\xA3288.53",
+        protocol: "Native Segwit",
+        address: "n4A9...Zgty",
+        ticker: "btc",
+        cryptoId: "bitcoin"
+      };
+    }),
+    onClick: testFn
+  }
+};
+var AccountList_stories_default = meta;
+const Default = {};
+const TestAccountClick = {
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const input = canvas.getByText("Bitcoin 1");
+    await import_test.userEvent.click(input);
+    await (0, import_test.expect)(testFn).toHaveBeenCalledWith("btc1");
+  }
+};
+//# sourceMappingURL=AccountList.stories.js.map

package/lib/cjs/pre-ldls/components/AccountList/AccountList.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/AccountList/AccountList.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { AccountList } from \"./AccountList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof AccountList> = {\n  component: AccountList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/AccountList\",\n  tags: [\"autodocs\"],\n  args: {\n    accounts: Array.from({ length: 50 }, (_, i) => {\n      return {\n        name: `Bitcoin ${i}`,\n        id: `btc${i}`,\n        balance: \"0.004 BTC\",\n        fiatValue: \"\u00A3288.53\",\n        protocol: \"Native Segwit\",\n        address: \"n4A9...Zgty\",\n        ticker: \"btc\",\n        cryptoId: \"bitcoin\",\n      };\n    }),\n    onClick: testFn,\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof AccountList>;\n\nexport const Default: Story = {};\n\nexport const TestAccountClick: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const input = canvas.getByText(\"Bitcoin 1\");\n    await userEvent.click(input);\n    await expect(testFn).toHaveBeenCalledWith(\"btc1\");\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,yBAA4B;AAC5B,kBAA8C;AAE9C,MAAM,aAAS,gBAAG;AAElB,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,YAAY;AAAA,IACV,WACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,KAC5B,6BAAAA,QAAA,cAAC,WAAM,CACT;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,UAAU,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,MAAM;AAC7C,aAAO;AAAA,QACL,MAAM,WAAW,CAAC;AAAA,QAClB,IAAI,MAAM,CAAC;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,UAAU;AAAA,MACZ;AAAA,IACF,CAAC;AAAA,IACD,SAAS;AAAA,EACX;AACF;AAEA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,mBAA0B;AAAA,EACrC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,UAAU,WAAW;AAC1C,UAAM,sBAAU,MAAM,KAAK;AAC3B,cAAM,oBAAO,MAAM,EAAE,qBAAqB,MAAM;AAAA,EAClD;AACF;",
+  "names": ["React"]
+}

package/lib/cjs/pre-ldls/components/Address/Address.js

@@ -0,0 +1,79 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Address_exports = {};
+__export(Address_exports, {
+  Address: () => Address
+});
+module.exports = __toCommonJS(Address_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("../../../components");
+var import_styled_components = __toESM(require("styled-components"));
+var import_libs = require("../../libs");
+const TempAssetBadge = ({
+  ledgerId: _ledgerId,
+  ticker: _ticker
+}) => (
+  // TODO: To be replaced with LIVE-18221
+  /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center" }, "data-testid": "address-icon" }, /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      style: {
+        height: 20,
+        width: 20,
+        borderRadius: 20,
+        backgroundColor: "grey",
+        display: "inline-block"
+      }
+    }
+  ))
+);
+const Wrapper = import_styled_components.default.div`
+  ${(0, import_libs.withTokens)("spacing-xxxs", "colors-content-subdued-default-default")}
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const Address = ({
+  address,
+  showIcon,
+  cryptoId,
+  ticker
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, null, /* @__PURE__ */ import_react.default.createElement(
+    import_components.Text,
+    {
+      marginRight: "var(--spacing-xxxs)",
+      fontSize: "12px",
+      color: "var(--colors-content-subdued-default-default)"
+    },
+    address
+  ), showIcon && /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, { ledgerId: cryptoId, ticker }));
+};
+//# sourceMappingURL=Address.js.map

package/lib/cjs/pre-ldls/components/Address/Address.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/Address/Address.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst TempAssetBadge = ({\n  ledgerId: _ledgerId,\n  ticker: _ticker,\n}: {\n  ledgerId?: string;\n  ticker?: string;\n}) => (\n  // TODO: To be replaced with LIVE-18221\n  <div style={{ display: \"flex\", alignItems: \"center\" }} data-testid=\"address-icon\">\n    <span\n      style={{\n        height: 20,\n        width: 20,\n        borderRadius: 20,\n        backgroundColor: \"grey\",\n        display: \"inline-block\",\n      }}\n    />\n  </div>\n);\n\nconst Wrapper = styled.div`\n  ${withTokens(\"spacing-xxxs\", \"colors-content-subdued-default-default\")}\n\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Address = ({\n  address,\n  showIcon,\n  cryptoId,\n  ticker,\n}: {\n  address: string;\n  showIcon: boolean;\n  cryptoId?: string;\n  ticker?: string;\n}) => {\n  return (\n    <Wrapper>\n      <Text\n        marginRight=\"var(--spacing-xxxs)\"\n        fontSize=\"12px\"\n        color=\"var(--colors-content-subdued-default-default)\"\n      >\n        {address}\n      </Text>\n      {showIcon && <TempAssetBadge ledgerId={cryptoId} ticker={ticker} />}\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,iBAAiB,CAAC;AAAA,EACtB,UAAU;AAAA,EACV,QAAQ;AACV;AAAA;AAAA,EAKE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAAG,eAAY,kBACjE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF;AAAA;AAGF,MAAM,UAAU,yBAAAC,QAAO;AAAA,QACnB,wBAAW,gBAAgB,wCAAwC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,SACE,6BAAAD,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,UAAS;AAAA,MACT,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,YAAY,6BAAAA,QAAA,cAAC,kBAAe,UAAU,UAAU,QAAgB,CACnE;AAEJ;",
+  "names": ["React", "styled"]
+}

package/lib/cjs/pre-ldls/components/Address/Address.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Address_stories_exports = {};
+__export(Address_stories_exports, {
+  Default: () => Default,
+  TestAddress: () => TestAddress,
+  TestAddressWithIcon: () => TestAddressWithIcon,
+  default: () => Address_stories_default
+});
+module.exports = __toCommonJS(Address_stories_exports);
+var import_Address = require("./Address");
+var import_test = require("@storybook/test");
+const meta = {
+  component: import_Address.Address,
+  title: "PreLdls/Components/Address",
+  tags: ["autodocs"],
+  args: { address: "n4A9...Zgty", cryptoId: "bitcoin", ticker: "BTC" }
+};
+var Address_stories_default = meta;
+const Default = {};
+const TestAddress = {
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const name = canvas.getByText("n4A9...Zgty");
+    const icon = canvas.queryByTestId("address-icon");
+    await (0, import_test.expect)(name).toBeInTheDocument();
+    await (0, import_test.expect)(icon).not.toBeInTheDocument();
+  }
+};
+const TestAddressWithIcon = {
+  args: { showIcon: true },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const name = canvas.getByText("n4A9...Zgty");
+    const icon = canvas.getByTestId("address-icon");
+    await (0, import_test.expect)(name).toBeInTheDocument();
+    await (0, import_test.expect)(icon).toBeInTheDocument();
+  }
+};
+//# sourceMappingURL=Address.stories.js.map

package/lib/cjs/pre-ldls/components/Address/Address.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/Address/Address.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Address } from \"./Address\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof Address> = {\n  component: Address,\n  title: \"PreLdls/Components/Address\",\n  tags: [\"autodocs\"],\n  args: { address: \"n4A9...Zgty\", cryptoId: \"bitcoin\", ticker: \"BTC\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Address>;\n\nexport const Default: Story = {};\n\nexport const TestAddress: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const name = canvas.getByText(\"n4A9...Zgty\");\n    const icon = canvas.queryByTestId(\"address-icon\");\n\n    await expect(name).toBeInTheDocument();\n    await expect(icon).not.toBeInTheDocument();\n  },\n};\n\nexport const TestAddressWithIcon: Story = {\n  args: { showIcon: true },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const name = canvas.getByText(\"n4A9...Zgty\");\n    const icon = canvas.getByTestId(\"address-icon\");\n\n    await expect(name).toBeInTheDocument();\n    await expect(icon).toBeInTheDocument();\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qBAAwB;AACxB,kBAA+B;AAE/B,MAAM,OAA6B;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,SAAS,eAAe,UAAU,WAAW,QAAQ,MAAM;AACrE;AACA,IAAO,0BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,cAAqB;AAAA,EAChC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,aAAa;AAC3C,UAAM,OAAO,OAAO,cAAc,cAAc;AAEhD,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,IAAI,EAAE,IAAI,kBAAkB;AAAA,EAC3C;AACF;AAEO,MAAM,sBAA6B;AAAA,EACxC,MAAM,EAAE,UAAU,KAAK;AAAA,EACvB,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,aAAa;AAC3C,UAAM,OAAO,OAAO,YAAY,cAAc;AAE9C,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AAAA,EACvC;AACF;",
+  "names": []
+}

package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js

@@ -52,8 +52,9 @@ const TempAssetBadge = () => (
 );
 const Wrapper = import_styled_components.default.div`
   ${(0, import_libs.withTokens)(
-  "spacing-xs",
-  "marging-s",
+  "spacing-xxs",
+  "margin-s",
+  "radius-s",
   "colors-content-subdued-default-default",
   "colors-content-default-default",
   "colors-surface-transparent-hover",
@@ -61,8 +62,9 @@ const Wrapper = import_styled_components.default.div`
 )}
 
   display: flex;
-  padding: var(--spacing-xs);
+  padding: var(--spacing-xxs);
   cursor: pointer;
+  border-radius: var(--radius-s, 8px);
 
   :hover {
     background-color: var(--colors-surface-transparent-hover);
@@ -76,10 +78,10 @@ const InfoWrapper = import_styled_components.default.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-left: var(--marging-s);
+  margin-left: var(--margin-s);
 `;
-const AssetItem = ({ name, ticker, onClick }) => {
-  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick: () => onClick({ name, ticker }) }, /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, null), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
+const AssetItem = ({ name, ticker, id, onClick }) => {
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) }, /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, null), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
     import_components.Text,
     {
       variant: "largeLineHeight",

package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\n\nexport type AssetType = {\n  name: string;\n  ticker: string;\n};\n\ntype AssetItemProps = AssetType & {\n  onClick: (asset: AssetType) => void;\n};\n\nconst TempAssetBadge = () => (\n  // TODO: To be replaced with LIVE-18221\n  <div style={{ display: \"flex\", alignItems: \"center\" }}>\n    <span\n      style={{\n        height: 48,\n        width: 48,\n        borderRadius: 48,\n        backgroundColor: \"grey\",\n        display: \"inline-block\",\n      }}\n    />\n  </div>\n);\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xs\",\n    \"marging-s\",\n    \"colors-content-subdued-default-default\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n\n  display: flex;\n  padding: var(--spacing-xs);\n  cursor: pointer;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--marging-s);\n`;\n\nexport const AssetItem = ({ name, ticker, onClick }: AssetItemProps) => {\n  return (\n    <Wrapper onClick={() => onClick({ name, ticker })}>\n      <TempAssetBadge />\n      <InfoWrapper>\n        <Text\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n        >\n          {name}\n        </Text>\n        <Text\n          variant=\"bodyLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-subdued-default-default)\"\n        >\n          {ticker}\n        </Text>\n      </InfoWrapper>\n    </Wrapper>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AAWrB,MAAM,iBAAiB;AAAA;AAAA,EAErB,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,KAClD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF;AAAA;AAGF,MAAM,UAAU,yBAAAC,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,YAAY,CAAC,EAAE,MAAM,QAAQ,QAAQ,MAAsB;AACtE,SACE,6BAAAD,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,OAAO,CAAC,KAC9C,6BAAAA,QAAA,cAAC,oBAAe,GAChB,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\n\nexport type AssetType = {\n  name: string;\n  ticker: string;\n  id: string;\n};\n\ntype AssetItemProps = AssetType & {\n  onClick: (asset: AssetType) => void;\n};\n\nconst TempAssetBadge = () => (\n  // TODO: To be replaced with LIVE-18221\n  <div style={{ display: \"flex\", alignItems: \"center\" }}>\n    <span\n      style={{\n        height: 48,\n        width: 48,\n        borderRadius: 48,\n        backgroundColor: \"grey\",\n        display: \"inline-block\",\n      }}\n    />\n  </div>\n);\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"colors-content-subdued-default-default\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n\n  display: flex;\n  padding: var(--spacing-xxs);\n  cursor: pointer;\n  border-radius: var(--radius-s, 8px);\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--margin-s);\n`;\n\nexport const AssetItem = ({ name, ticker, id, onClick }: AssetItemProps) => {\n  return (\n    <Wrapper onClick={() => onClick({ name, ticker, id })}>\n      <TempAssetBadge />\n      <InfoWrapper>\n        <Text\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n        >\n          {name}\n        </Text>\n        <Text\n          variant=\"bodyLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-subdued-default-default)\"\n        >\n          {ticker}\n        </Text>\n      </InfoWrapper>\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AAYrB,MAAM,iBAAiB;AAAA;AAAA,EAErB,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,KAClD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF;AAAA;AAGF,MAAM,UAAU,yBAAAC,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,YAAY,CAAC,EAAE,MAAM,QAAQ,IAAI,QAAQ,MAAsB;AAC1E,SACE,6BAAAD,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,QAAQ,GAAG,CAAC,KAClD,6BAAAA,QAAA,cAAC,oBAAe,GAChB,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,CACF,CACF;AAEJ;",
   "names": ["React", "styled"]
 }

package/lib/cjs/pre-ldls/components/AssetList/AssetList.js

@@ -36,14 +36,20 @@ var import_AssetItem = require("../AssetItem/AssetItem");
 var import_VirtualList = require("../VirtualList/VirtualList");
 const AssetList = ({
   assets,
-  onClick
+  onClick,
+  onVisibleItemsScrollEnd
 }) => {
+  const renderAssetItem = (0, import_react.useCallback)(
+    ({ name, ticker, id }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, id, onClick }),
+    [onClick]
+  );
   return /* @__PURE__ */ import_react.default.createElement(
     import_VirtualList.VirtualList,
     {
       itemHeight: 64,
-      count: assets.length,
-      renderItem: (i) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name: assets[i].name, ticker: assets[i].ticker, onClick })
+      items: assets,
+      onVisibleItemsScrollEnd,
+      renderItem: renderAssetItem
     }
   );
 };