@ledgerhq/react-ui 0.29.0-nightly.0 → 0.29.0-nightly.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js +19 -4
  2. package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map +2 -2
  3. package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.stories.js +46 -1
  4. package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.stories.js.map +2 -2
  5. package/lib/cjs/pre-ldls/components/AssetList/AssetList.js +2 -2
  6. package/lib/cjs/pre-ldls/components/AssetList/AssetList.js.map +2 -2
  7. package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js +42 -0
  8. package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js.map +2 -2
  9. package/lib/cjs/pre-ldls/components/sharedStoryBook.js +67 -0
  10. package/lib/cjs/pre-ldls/components/sharedStoryBook.js.map +7 -0
  11. package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts +3 -1
  12. package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts.map +1 -1
  13. package/lib/pre-ldls/components/AssetItem/AssetItem.js +11 -3
  14. package/lib/pre-ldls/components/AssetItem/AssetItem.js.map +1 -1
  15. package/lib/pre-ldls/components/AssetList/AssetList.d.ts.map +1 -1
  16. package/lib/pre-ldls/components/AssetList/AssetList.js +2 -2
  17. package/lib/pre-ldls/components/AssetList/AssetList.js.map +1 -1
  18. package/lib/pre-ldls/components/sharedStoryBook.d.ts +5 -0
  19. package/lib/pre-ldls/components/sharedStoryBook.d.ts.map +1 -0
  20. package/lib/pre-ldls/components/sharedStoryBook.js +15 -0
  21. package/lib/pre-ldls/components/sharedStoryBook.js.map +1 -0
  22. package/package.json +7 -7
package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js CHANGED
@@ -70,10 +70,23 @@ const InfoWrapper = import_styled_components.default.div`
70
70
  overflow: hidden;
71
71
  flex: 1;
72
72
  `;
73
- const AssetItem = ({ name, ticker, id, onClick }) => {
73
+ const LeftElementWrapper = import_styled_components.default.div`
74
+ display: flex;
75
+ align-items: center;
76
+ gap: 4px;
77
+ `;
78
+ const AssetItem = ({
79
+ name,
80
+ ticker,
81
+ id,
82
+ onClick,
83
+ leftElement,
84
+ rightElement
85
+ }) => {
74
86
  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) }, /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { size: "48px", ledgerId: id, ticker }), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
75
87
  import_components.Text,
76
88
  {
89
+ fontSize: "14px",
77
90
  variant: "largeLineHeight",
78
91
  fontWeight: "semiBold",
79
92
  color: "var(--colors-content-default-default)",
@@ -85,14 +98,16 @@ const AssetItem = ({ name, ticker, id, onClick }) => {
85
98
  }
86
99
  },
87
100
  name
88
- ), /* @__PURE__ */ import_react.default.createElement(
101
+ ), /* @__PURE__ */ import_react.default.createElement(LeftElementWrapper, null, /* @__PURE__ */ import_react.default.createElement(
89
102
  import_components.Text,
90
103
  {
104
+ fontSize: "12px",
105
+ lineHeight: "16px",
91
106
  variant: "bodyLineHeight",
92
- fontWeight: "semiBold",
107
+ fontWeight: "medium",
93
108
  color: "var(--colors-content-subdued-default-default)"
94
109
  },
95
110
  ticker
96
- )));
111
+ ), leftElement)), rightElement);
97
112
  };
98
113
  //# sourceMappingURL=AssetItem.js.map
package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\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 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 align-items: center;\n overflow: hidden;\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 overflow: hidden;\n flex: 1;\n`;\n\nexport const AssetItem = ({ name, ticker, id, onClick }: AssetItemProps) => {\n return (\n <Wrapper onClick={() => onClick({ name, ticker, id })}>\n <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n <InfoWrapper>\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n style={{\n display: \"block\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAY3B,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;AAAA;AAkBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpB,MAAM,YAAY,CAAC,EAAE,MAAM,QAAQ,IAAI,QAAQ,MAAsB;AAC1E,SACE,6BAAAC,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,QAAQ,GAAG,CAAC,KAClD,6BAAAA,QAAA,cAAC,gCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cAAc;AAAA,MAChB;AAAA;AAAA,IAEC;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;",
4
+ "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nexport type AssetType = {\n name: string;\n ticker: string;\n id: string;\n leftElement?: React.ReactNode;\n rightElement?: React.ReactNode;\n};\n\ntype AssetItemProps = AssetType & {\n onClick: (asset: AssetType) => void;\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 align-items: center;\n overflow: hidden;\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 overflow: hidden;\n flex: 1;\n`;\n\nconst LeftElementWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nexport const AssetItem = ({\n name,\n ticker,\n id,\n onClick,\n leftElement,\n rightElement,\n}: AssetItemProps) => {\n return (\n <Wrapper onClick={() => onClick({ name, ticker, id })}>\n <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n <InfoWrapper>\n <Text\n fontSize=\"14px\"\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n style={{\n display: \"block\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {name}\n </Text>\n <LeftElementWrapper>\n <Text\n fontSize=\"12px\"\n lineHeight=\"16px\"\n variant=\"bodyLineHeight\"\n fontWeight=\"medium\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {ticker}\n </Text>\n {leftElement}\n </LeftElementWrapper>\n </InfoWrapper>\n {rightElement}\n </Wrapper>\n );\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAc3B,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;AAAA;AAkBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,qBAAqB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,SACE,6BAAAC,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,QAAQ,GAAG,CAAC,KAClD,6BAAAA,QAAA,cAAC,gCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cAAc;AAAA,MAChB;AAAA;AAAA,IAEC;AAAA,EACH,GACA,6BAAAA,QAAA,cAAC,0BACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,YAAW;AAAA,MACX,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,WACH,CACF,GACC,YACH;AAEJ;",
6
6
  "names": ["styled", "React"]
7
7
  }
package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.stories.js CHANGED
@@ -20,19 +20,64 @@ var AssetItem_stories_exports = {};
20
20
  __export(AssetItem_stories_exports, {
21
21
  Default: () => Default,
22
22
  TestAssetItem: () => TestAssetItem,
23
+ WithBalance: () => WithBalance,
24
+ WithDiscreetModeEnabled: () => WithDiscreetModeEnabled,
25
+ WithLeftTagAndRightBalance: () => WithLeftTagAndRightBalance,
26
+ WithTag: () => WithTag,
23
27
  default: () => AssetItem_stories_default
24
28
  });
25
29
  module.exports = __toCommonJS(AssetItem_stories_exports);
26
30
  var import_AssetItem = require("./AssetItem");
27
31
  var import_test = require("@storybook/test");
32
+ var import_sharedStoryBook = require("../sharedStoryBook");
28
33
  const meta = {
29
34
  component: import_AssetItem.AssetItem,
30
35
  title: "PreLdls/Components/AssetItem",
31
36
  tags: ["autodocs"],
32
- args: { name: "Bitcoin", ticker: "BTC", id: "bitcoin" }
37
+ args: { name: "Bitcoin", ticker: "BTC", id: "bitcoin" },
38
+ parameters: {
39
+ docs: {
40
+ description: {
41
+ component: "AssetItem displays a crypto asset with its name, ticker, icon, and optionally fiat value and balance. Use it to represent selectable assets in lists."
42
+ }
43
+ }
44
+ }
33
45
  };
34
46
  var AssetItem_stories_default = meta;
35
47
  const Default = {};
48
+ const WithBalance = {
49
+ args: {
50
+ name: "Bitcoin",
51
+ ticker: "BTC",
52
+ id: "bitcoin",
53
+ rightElement: (0, import_sharedStoryBook.createRightElement)(false)
54
+ }
55
+ };
56
+ const WithTag = {
57
+ args: {
58
+ name: "Bitcoin",
59
+ ticker: "BTC",
60
+ id: "bitcoin",
61
+ leftElement: import_sharedStoryBook.leftElement
62
+ }
63
+ };
64
+ const WithLeftTagAndRightBalance = {
65
+ args: {
66
+ name: "Bitcoin",
67
+ ticker: "BTC",
68
+ id: "bitcoin",
69
+ leftElement: import_sharedStoryBook.leftElement,
70
+ rightElement: (0, import_sharedStoryBook.createRightElement)(false)
71
+ }
72
+ };
73
+ const WithDiscreetModeEnabled = {
74
+ args: {
75
+ name: "Bitcoin",
76
+ ticker: "BTC",
77
+ id: "bitcoin",
78
+ rightElement: (0, import_sharedStoryBook.createRightElement)(true)
79
+ }
80
+ };
36
81
  const TestAssetItem = {
37
82
  play: async ({ canvasElement }) => {
38
83
  const canvas = (0, import_test.within)(canvasElement);
package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/AssetItem/AssetItem.stories.tsx"],
4
- "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetItem } from \"./AssetItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof AssetItem> = {\n component: AssetItem,\n title: \"PreLdls/Components/AssetItem\",\n tags: [\"autodocs\"],\n args: { name: \"Bitcoin\", ticker: \"BTC\", id: \"bitcoin\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetItem>;\n\nexport const Default: Story = {};\n\nexport const TestAssetItem: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"Bitcoin\");\n const ticker = canvas.getByText(\"BTC\");\n\n await expect(name).toBeInTheDocument();\n await expect(ticker).toBeInTheDocument();\n },\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA+B;AAE/B,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,MAAM,WAAW,QAAQ,OAAO,IAAI,UAAU;AACxD;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,gBAAuB;AAAA,EAClC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AACvC,UAAM,SAAS,OAAO,UAAU,KAAK;AAErC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,MAAM,EAAE,kBAAkB;AAAA,EACzC;AACF;",
4
+ "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetItem } from \"./AssetItem\";\nimport { expect, within } from \"@storybook/test\";\nimport { createRightElement, leftElement } from \"../sharedStoryBook\";\n\nconst meta: Meta<typeof AssetItem> = {\n component: AssetItem,\n title: \"PreLdls/Components/AssetItem\",\n tags: [\"autodocs\"],\n args: { name: \"Bitcoin\", ticker: \"BTC\", id: \"bitcoin\" },\n parameters: {\n docs: {\n description: {\n component:\n \"AssetItem displays a crypto asset with its name, ticker, icon, and optionally fiat value and balance. Use it to represent selectable assets in lists.\",\n },\n },\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetItem>;\n\nexport const Default: Story = {};\n\nexport const WithBalance: Story = {\n args: {\n name: \"Bitcoin\",\n ticker: \"BTC\",\n id: \"bitcoin\",\n rightElement: createRightElement(false),\n },\n};\n\nexport const WithTag: Story = {\n args: {\n name: \"Bitcoin\",\n ticker: \"BTC\",\n id: \"bitcoin\",\n leftElement: leftElement,\n },\n};\n\nexport const WithLeftTagAndRightBalance: Story = {\n args: {\n name: \"Bitcoin\",\n ticker: \"BTC\",\n id: \"bitcoin\",\n leftElement: leftElement,\n rightElement: createRightElement(false),\n },\n};\n\nexport const WithDiscreetModeEnabled: Story = {\n args: {\n name: \"Bitcoin\",\n ticker: \"BTC\",\n id: \"bitcoin\",\n rightElement: createRightElement(true),\n },\n};\n\nexport const TestAssetItem: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"Bitcoin\");\n const ticker = canvas.getByText(\"BTC\");\n\n await expect(name).toBeInTheDocument();\n await expect(ticker).toBeInTheDocument();\n },\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA+B;AAC/B,6BAAgD;AAEhD,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,MAAM,WAAW,QAAQ,OAAO,IAAI,UAAU;AAAA,EACtD,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,kBAAc,2CAAmB,KAAK;AAAA,EACxC;AACF;AAEO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AACF;AAEO,MAAM,6BAAoC;AAAA,EAC/C,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,aAAa;AAAA,IACb,kBAAc,2CAAmB,KAAK;AAAA,EACxC;AACF;AAEO,MAAM,0BAAiC;AAAA,EAC5C,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,kBAAc,2CAAmB,IAAI;AAAA,EACvC;AACF;AAEO,MAAM,gBAAuB;AAAA,EAClC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AACvC,UAAM,SAAS,OAAO,UAAU,KAAK;AAErC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,MAAM,EAAE,kBAAkB;AAAA,EACzC;AACF;",
6
6
  "names": []
7
7
  }
package/lib/cjs/pre-ldls/components/AssetList/AssetList.js CHANGED
@@ -42,13 +42,13 @@ const AssetList = ({
42
42
  hasNextPage
43
43
  }) => {
44
44
  const renderAssetItem = (0, import_react.useCallback)(
45
- ({ name, ticker, id }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, id, onClick }),
45
+ (props) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { ...props, onClick }),
46
46
  [onClick]
47
47
  );
48
48
  return /* @__PURE__ */ import_react.default.createElement(
49
49
  import_VirtualList.VirtualList,
50
50
  {
51
- itemHeight: 70,
51
+ itemHeight: 64,
52
52
  items: assets,
53
53
  onVisibleItemsScrollEnd,
54
54
  renderItem: renderAssetItem,
package/lib/cjs/pre-ldls/components/AssetList/AssetList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],
4
- "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { AssetItem, AssetType } from \"../AssetItem/AssetItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AssetList = ({\n assets,\n onClick,\n onVisibleItemsScrollEnd,\n scrollToTop,\n hasNextPage,\n}: {\n assets: AssetType[];\n onClick: (asset: AssetType) => void;\n onVisibleItemsScrollEnd?: () => void;\n scrollToTop?: boolean;\n hasNextPage?: boolean;\n}) => {\n const renderAssetItem = useCallback(\n ({ name, ticker, id }: AssetType) => (\n <AssetItem name={name} ticker={ticker} id={id} onClick={onClick} />\n ),\n [onClick],\n );\n\n return (\n <VirtualList\n itemHeight={70}\n items={assets}\n onVisibleItemsScrollEnd={onVisibleItemsScrollEnd}\n renderItem={renderAssetItem}\n scrollToTop={scrollToTop}\n hasNextPage={hasNextPage}\n />\n );\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,EAAE,MAAM,QAAQ,GAAG,MAClB,6BAAAA,QAAA,cAAC,8BAAU,MAAY,QAAgB,IAAQ,SAAkB;AAAA,IAEnE,CAAC,OAAO;AAAA,EACV;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { AssetItem, AssetType } from \"../AssetItem/AssetItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AssetList = ({\n assets,\n onClick,\n onVisibleItemsScrollEnd,\n scrollToTop,\n hasNextPage,\n}: {\n assets: AssetType[];\n onClick: (asset: AssetType) => void;\n onVisibleItemsScrollEnd?: () => void;\n scrollToTop?: boolean;\n hasNextPage?: boolean;\n}) => {\n const renderAssetItem = useCallback(\n (props: AssetType) => <AssetItem {...props} onClick={onClick} />,\n [onClick],\n );\n\n return (\n <VirtualList\n itemHeight={64}\n items={assets}\n onVisibleItemsScrollEnd={onVisibleItemsScrollEnd}\n renderItem={renderAssetItem}\n scrollToTop={scrollToTop}\n hasNextPage={hasNextPage}\n />\n );\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,UAAqB,6BAAAA,QAAA,cAAC,8BAAW,GAAG,OAAO,SAAkB;AAAA,IAC9D,CAAC,OAAO;AAAA,EACV;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js CHANGED
@@ -30,12 +30,16 @@ var AssetList_stories_exports = {};
30
30
  __export(AssetList_stories_exports, {
31
31
  Default: () => Default,
32
32
  TestAssetClick: () => TestAssetClick,
33
+ WithDiscreetModeEnabled: () => WithDiscreetModeEnabled,
34
+ WithFiatValue: () => WithFiatValue,
35
+ WithLeftTagAndRightBalance: () => WithLeftTagAndRightBalance,
33
36
  default: () => AssetList_stories_default
34
37
  });
35
38
  module.exports = __toCommonJS(AssetList_stories_exports);
36
39
  var import_AssetList = require("./AssetList");
37
40
  var import_test = require("@storybook/test");
38
41
  var import_react = __toESM(require("react"));
42
+ var import_sharedStoryBook = require("../sharedStoryBook");
39
43
  const testFn = (0, import_test.fn)();
40
44
  const meta = {
41
45
  component: import_AssetList.AssetList,
@@ -52,10 +56,48 @@ const meta = {
52
56
  })),
53
57
  onClick: testFn,
54
58
  scrollToTop: false
59
+ },
60
+ parameters: {
61
+ docs: {
62
+ description: {
63
+ component: "AssetList displays a list of crypto assets. It supports virtual scrolling for performance with large datasets. Use it to represent selectable assets in lists."
64
+ }
65
+ }
55
66
  }
56
67
  };
57
68
  var AssetList_stories_default = meta;
58
69
  const Default = {};
70
+ const WithFiatValue = {
71
+ args: {
72
+ assets: Array.from({ length: 50 }).map((_, i) => ({
73
+ name: `Bitcoin ${i}`,
74
+ ticker: "BTC",
75
+ id: "bitcoin",
76
+ rightElement: (0, import_sharedStoryBook.createRightElement)(false)
77
+ }))
78
+ }
79
+ };
80
+ const WithDiscreetModeEnabled = {
81
+ args: {
82
+ assets: Array.from({ length: 50 }).map((_, i) => ({
83
+ name: `Bitcoin ${i}`,
84
+ ticker: "BTC",
85
+ id: "bitcoin",
86
+ rightElement: (0, import_sharedStoryBook.createRightElement)(true)
87
+ }))
88
+ }
89
+ };
90
+ const WithLeftTagAndRightBalance = {
91
+ args: {
92
+ assets: Array.from({ length: 50 }).map((_, i) => ({
93
+ name: `Bitcoin ${i}`,
94
+ ticker: "BTC",
95
+ id: "bitcoin",
96
+ leftElement: import_sharedStoryBook.leftElement,
97
+ rightElement: (0, import_sharedStoryBook.createRightElement)(false)
98
+ }))
99
+ }
100
+ };
59
101
  const TestAssetClick = {
60
102
  play: async ({ canvasElement }) => {
61
103
  const canvas = (0, import_test.within)(canvasElement);
package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/AssetList/AssetList.stories.tsx"],
4
- "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetList } from \"./AssetList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof AssetList> = {\n component: AssetList,\n decorators: [\n Story => (\n <div style={{ height: \"400px\" }}>\n <Story />\n </div>\n ),\n ],\n title: \"PreLdls/Components/AssetList\",\n tags: [\"autodocs\"],\n args: {\n assets: Array.from({ length: 50 }).map((_, i) => ({\n name: `Bitcoin ${i}`,\n ticker: \"BTC\",\n id: \"bitcoin\",\n })),\n onClick: testFn,\n scrollToTop: false,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetList>;\n\nexport const Default: Story = {};\n\nexport const TestAssetClick: 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({ name: \"Bitcoin 1\", ticker: \"BTC\", id: \"bitcoin\" });\n },\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA8C;AAC9C,mBAAkB;AAElB,MAAM,aAAS,gBAAG;AAElB,MAAM,OAA+B;AAAA,EACnC,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,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,IACN,EAAE;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,iBAAwB;AAAA,EACnC,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,EAAE,MAAM,aAAa,QAAQ,OAAO,IAAI,UAAU,CAAC;AAAA,EAC/F;AACF;",
4
+ "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetList } from \"./AssetList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\nimport { createRightElement, leftElement } from \"../sharedStoryBook\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof AssetList> = {\n component: AssetList,\n decorators: [\n Story => (\n <div style={{ height: \"400px\" }}>\n <Story />\n </div>\n ),\n ],\n title: \"PreLdls/Components/AssetList\",\n tags: [\"autodocs\"],\n args: {\n assets: Array.from({ length: 50 }).map((_, i) => ({\n name: `Bitcoin ${i}`,\n ticker: \"BTC\",\n id: \"bitcoin\",\n })),\n onClick: testFn,\n scrollToTop: false,\n },\n parameters: {\n docs: {\n description: {\n component:\n \"AssetList displays a list of crypto assets. It supports virtual scrolling for performance with large datasets. Use it to represent selectable assets in lists.\",\n },\n },\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetList>;\n\nexport const Default: Story = {};\n\nexport const WithFiatValue: Story = {\n args: {\n assets: Array.from({ length: 50 }).map((_, i) => ({\n name: `Bitcoin ${i}`,\n ticker: \"BTC\",\n id: \"bitcoin\",\n rightElement: createRightElement(false),\n })),\n },\n};\n\nexport const WithDiscreetModeEnabled: Story = {\n args: {\n assets: Array.from({ length: 50 }).map((_, i) => ({\n name: `Bitcoin ${i}`,\n ticker: \"BTC\",\n id: \"bitcoin\",\n rightElement: createRightElement(true),\n })),\n },\n};\n\nexport const WithLeftTagAndRightBalance: Story = {\n args: {\n assets: Array.from({ length: 50 }).map((_, i) => ({\n name: `Bitcoin ${i}`,\n ticker: \"BTC\",\n id: \"bitcoin\",\n leftElement: leftElement,\n rightElement: createRightElement(false),\n })),\n },\n};\n\nexport const TestAssetClick: 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({ name: \"Bitcoin 1\", ticker: \"BTC\", id: \"bitcoin\" });\n },\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA8C;AAC9C,mBAAkB;AAClB,6BAAgD;AAEhD,MAAM,aAAS,gBAAG;AAElB,MAAM,OAA+B;AAAA,EACnC,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,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,IACN,EAAE;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,gBAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,kBAAc,2CAAmB,KAAK;AAAA,IACxC,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,0BAAiC;AAAA,EAC5C,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,kBAAc,2CAAmB,IAAI;AAAA,IACvC,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,6BAAoC;AAAA,EAC/C,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,aAAa;AAAA,MACb,kBAAc,2CAAmB,KAAK;AAAA,IACxC,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,iBAAwB;AAAA,EACnC,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,EAAE,MAAM,aAAa,QAAQ,OAAO,IAAI,UAAU,CAAC;AAAA,EAC/F;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/lib/cjs/pre-ldls/components/sharedStoryBook.js ADDED
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var sharedStoryBook_exports = {};
30
+ __export(sharedStoryBook_exports, {
31
+ BalanceContainer: () => BalanceContainer,
32
+ createRightElement: () => createRightElement,
33
+ leftElement: () => leftElement
34
+ });
35
+ module.exports = __toCommonJS(sharedStoryBook_exports);
36
+ var import_react = __toESM(require("react"));
37
+ var import_styled_components = __toESM(require("styled-components"));
38
+ var import_components = require("../../components");
39
+ var import_Tag = require("./Tag/Tag");
40
+ const BalanceContainer = import_styled_components.default.div`
41
+ display: flex;
42
+ flex-direction: column;
43
+ align-items: flex-end;
44
+ gap: 4px;
45
+ `;
46
+ const leftElement = /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, null, "1.34% APY");
47
+ const createRightElement = (discreetMode) => /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, /* @__PURE__ */ import_react.default.createElement(
48
+ import_components.Text,
49
+ {
50
+ fontSize: "14px",
51
+ variant: "largeLineHeight",
52
+ fontWeight: "semiBold",
53
+ color: "var(--colors-content-default-default)"
54
+ },
55
+ discreetMode ? "$***" : "$5,969.83"
56
+ ), /* @__PURE__ */ import_react.default.createElement(
57
+ import_components.Text,
58
+ {
59
+ fontSize: "12px",
60
+ lineHeight: "16px",
61
+ variant: "bodyLineHeight",
62
+ fontWeight: "medium",
63
+ color: "var(--colors-content-subdued-default-default)"
64
+ },
65
+ discreetMode ? "*** BTC" : "0.118 BTC"
66
+ ));
67
+ //# sourceMappingURL=sharedStoryBook.js.map
package/lib/cjs/pre-ldls/components/sharedStoryBook.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/pre-ldls/components/sharedStoryBook.tsx"],
4
+ "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Text } from \"../../components\";\nimport { Tag } from \"./Tag/Tag\";\n\nexport const BalanceContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n`;\n\nexport const leftElement = <Tag>{\"1.34% APY\"}</Tag>;\n\nexport const createRightElement = (discreetMode: boolean) => (\n <BalanceContainer>\n <Text\n fontSize=\"14px\"\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n >\n {discreetMode ? \"$***\" : \"$5,969.83\"}\n </Text>\n <Text\n fontSize=\"12px\"\n lineHeight=\"16px\"\n variant=\"bodyLineHeight\"\n fontWeight=\"medium\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {discreetMode ? \"*** BTC\" : \"0.118 BTC\"}\n </Text>\n </BalanceContainer>\n);\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,wBAAqB;AACrB,iBAAoB;AAEb,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,cAAc,6BAAAC,QAAA,cAAC,sBAAK,WAAY;AAEtC,MAAM,qBAAqB,CAAC,iBACjC,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA;AAAA,EAAC;AAAA;AAAA,IACC,UAAS;AAAA,IACT,SAAQ;AAAA,IACR,YAAW;AAAA,IACX,OAAM;AAAA;AAAA,EAEL,eAAe,SAAS;AAC3B,GACA,6BAAAA,QAAA;AAAA,EAAC;AAAA;AAAA,IACC,UAAS;AAAA,IACT,YAAW;AAAA,IACX,SAAQ;AAAA,IACR,YAAW;AAAA,IACX,OAAM;AAAA;AAAA,EAEL,eAAe,YAAY;AAC9B,CACF;",
6
+ "names": ["styled", "React"]
7
+ }
package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts CHANGED
@@ -3,10 +3,12 @@ export type AssetType = {
3
3
  name: string;
4
4
  ticker: string;
5
5
  id: string;
6
+ leftElement?: React.ReactNode;
7
+ rightElement?: React.ReactNode;
6
8
  };
7
9
  type AssetItemProps = AssetType & {
8
10
  onClick: (asset: AssetType) => void;
9
11
  };
10
- export declare const AssetItem: ({ name, ticker, id, onClick }: AssetItemProps) => React.JSX.Element;
12
+ export declare const AssetItem: ({ name, ticker, id, onClick, leftElement, rightElement, }: AssetItemProps) => React.JSX.Element;
11
13
  export {};
12
14
  //# sourceMappingURL=AssetItem.d.ts.map
package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AssetItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC,CAAC;AAsCF,eAAO,MAAM,SAAS,kCAAmC,cAAc,sBA4BtE,CAAC"}
1
+ {"version":3,"file":"AssetItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC,CAAC;AA4CF,eAAO,MAAM,SAAS,8DAOnB,cAAc,sBAmChB,CAAC"}
package/lib/pre-ldls/components/AssetItem/AssetItem.js CHANGED
@@ -29,16 +29,24 @@ const InfoWrapper = styled.div `
29
29
  overflow: hidden;
30
30
  flex: 1;
31
31
  `;
32
- export const AssetItem = ({ name, ticker, id, onClick }) => {
32
+ const LeftElementWrapper = styled.div `
33
+ display: flex;
34
+ align-items: center;
35
+ gap: 4px;
36
+ `;
37
+ export const AssetItem = ({ name, ticker, id, onClick, leftElement, rightElement, }) => {
33
38
  return (React.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) },
34
39
  React.createElement(CryptoIcon, { size: "48px", ledgerId: id, ticker: ticker }),
35
40
  React.createElement(InfoWrapper, null,
36
- React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", style: {
41
+ React.createElement(Text, { fontSize: "14px", variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", style: {
37
42
  display: "block",
38
43
  whiteSpace: "nowrap",
39
44
  overflow: "hidden",
40
45
  textOverflow: "ellipsis",
41
46
  } }, name),
42
- React.createElement(Text, { variant: "bodyLineHeight", fontWeight: "semiBold", color: "var(--colors-content-subdued-default-default)" }, ticker))));
47
+ React.createElement(LeftElementWrapper, null,
48
+ React.createElement(Text, { fontSize: "12px", lineHeight: "16px", variant: "bodyLineHeight", fontWeight: "medium", color: "var(--colors-content-subdued-default-default)" }, ticker),
49
+ leftElement)),
50
+ rightElement));
43
51
  };
44
52
  //# sourceMappingURL=AssetItem.js.map
package/lib/pre-ldls/components/AssetItem/AssetItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AssetItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAYtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,wCAAwC,EACxC,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;;;;CAgBF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO7B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAkB,EAAE,EAAE;IACzE,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;QACnD,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI;QACxD,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,KAAK,EAAE;oBACL,OAAO,EAAE,OAAO;oBAChB,UAAU,EAAE,QAAQ;oBACpB,QAAQ,EAAE,QAAQ;oBAClB,YAAY,EAAE,UAAU;iBACzB,IAEA,IAAI,CACA;YACP,oBAAC,IAAI,IACH,OAAO,EAAC,gBAAgB,EACxB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,+CAA+C,IAEpD,MAAM,CACF,CACK,CACN,CACX,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"AssetItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AActD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,wCAAwC,EACxC,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;;;;CAgBF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO7B,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,MAAM,EACN,EAAE,EACF,OAAO,EACP,WAAW,EACX,YAAY,GACG,EAAE,EAAE;IACnB,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;QACnD,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI;QACxD,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,KAAK,EAAE;oBACL,OAAO,EAAE,OAAO;oBAChB,UAAU,EAAE,QAAQ;oBACpB,QAAQ,EAAE,QAAQ;oBAClB,YAAY,EAAE,UAAU;iBACzB,IAEA,IAAI,CACA;YACP,oBAAC,kBAAkB;gBACjB,oBAAC,IAAI,IACH,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,gBAAgB,EACxB,UAAU,EAAC,QAAQ,EACnB,KAAK,EAAC,+CAA+C,IAEpD,MAAM,CACF;gBACN,WAAW,CACO,CACT;QACb,YAAY,CACL,CACX,CAAC;AACJ,CAAC,CAAC"}
package/lib/pre-ldls/components/AssetList/AssetList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,eAAO,MAAM,SAAS;YAOZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;;uBAqBrC,CAAC"}
1
+ {"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,eAAO,MAAM,SAAS;YAOZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;;uBAmBrC,CAAC"}
package/lib/pre-ldls/components/AssetList/AssetList.js CHANGED
@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
2
2
  import { AssetItem } from "../AssetItem/AssetItem";
3
3
  import { VirtualList } from "../VirtualList/VirtualList";
4
4
  export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }) => {
5
- const renderAssetItem = useCallback(({ name, ticker, id }) => (React.createElement(AssetItem, { name: name, ticker: ticker, id: id, onClick: onClick })), [onClick]);
6
- return (React.createElement(VirtualList, { itemHeight: 70, items: assets, onVisibleItemsScrollEnd: onVisibleItemsScrollEnd, renderItem: renderAssetItem, scrollToTop: scrollToTop, hasNextPage: hasNextPage }));
5
+ const renderAssetItem = useCallback((props) => React.createElement(AssetItem, { ...props, onClick: onClick }), [onClick]);
6
+ return (React.createElement(VirtualList, { itemHeight: 64, items: assets, onVisibleItemsScrollEnd: onVisibleItemsScrollEnd, renderItem: renderAssetItem, scrollToTop: scrollToTop, hasNextPage: hasNextPage }));
7
7
  };
8
8
  //# sourceMappingURL=AssetList.js.map
package/lib/pre-ldls/components/AssetList/AssetList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AssetList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,MAAM,EACN,OAAO,EACP,uBAAuB,EACvB,WAAW,EACX,WAAW,GAOZ,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAa,EAAE,EAAE,CAAC,CACnC,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,GAAI,CACpE,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IACV,UAAU,EAAE,EAAE,EACd,KAAK,EAAE,MAAM,EACb,uBAAuB,EAAE,uBAAuB,EAChD,UAAU,EAAE,eAAe,EAC3B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"AssetList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,MAAM,EACN,OAAO,EACP,uBAAuB,EACvB,WAAW,EACX,WAAW,GAOZ,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,KAAgB,EAAE,EAAE,CAAC,oBAAC,SAAS,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,EAChE,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IACV,UAAU,EAAE,EAAE,EACd,KAAK,EAAE,MAAM,EACb,uBAAuB,EAAE,uBAAuB,EAChD,UAAU,EAAE,eAAe,EAC3B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC,CAAC"}
package/lib/pre-ldls/components/sharedStoryBook.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import React from "react";
2
+ export declare const BalanceContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const leftElement: React.JSX.Element;
4
+ export declare const createRightElement: (discreetMode: boolean) => React.JSX.Element;
5
+ //# sourceMappingURL=sharedStoryBook.d.ts.map
package/lib/pre-ldls/components/sharedStoryBook.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sharedStoryBook.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/sharedStoryBook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,mBAA2B,CAAC;AAEpD,eAAO,MAAM,kBAAkB,iBAAkB,OAAO,sBAoBvD,CAAC"}
package/lib/pre-ldls/components/sharedStoryBook.js ADDED
@@ -0,0 +1,15 @@
1
+ import React from "react";
2
+ import styled from "styled-components";
3
+ import { Text } from "../../components";
4
+ import { Tag } from "./Tag/Tag";
5
+ export const BalanceContainer = styled.div `
6
+ display: flex;
7
+ flex-direction: column;
8
+ align-items: flex-end;
9
+ gap: 4px;
10
+ `;
11
+ export const leftElement = React.createElement(Tag, null, "1.34% APY");
12
+ export const createRightElement = (discreetMode) => (React.createElement(BalanceContainer, null,
13
+ React.createElement(Text, { fontSize: "14px", variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)" }, discreetMode ? "$***" : "$5,969.83"),
14
+ React.createElement(Text, { fontSize: "12px", lineHeight: "16px", variant: "bodyLineHeight", fontWeight: "medium", color: "var(--colors-content-subdued-default-default)" }, discreetMode ? "*** BTC" : "0.118 BTC")));
15
+ //# sourceMappingURL=sharedStoryBook.js.map
package/lib/pre-ldls/components/sharedStoryBook.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sharedStoryBook.js","sourceRoot":"","sources":["../../../src/pre-ldls/components/sharedStoryBook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAEhC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKzC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,oBAAC,GAAG,QAAE,WAAW,CAAO,CAAC;AAEpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,YAAqB,EAAE,EAAE,CAAC,CAC3D,oBAAC,gBAAgB;IACf,oBAAC,IAAI,IACH,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,IAE5C,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAC/B;IACP,oBAAC,IAAI,IACH,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,gBAAgB,EACxB,UAAU,EAAC,QAAQ,EACnB,KAAK,EAAC,+CAA+C,IAEpD,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAClC,CACU,CACpB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
- "version": "0.29.0-nightly.0",
3
+ "version": "0.29.0-nightly.2",
4
4
  "description": "Ledger Live - Desktop UI",
5
5
  "author": "Ledger Live Team <team-live@ledger.fr>",
6
6
  "repository": {
@@ -75,8 +75,8 @@
75
75
  "react-transition-group": "^4.4.2",
76
76
  "react-window": "^1.8.6",
77
77
  "styled-system": "^5.1.5",
78
- "@ledgerhq/crypto-icons-ui": "^1.14.0",
79
- "@ledgerhq/icons-ui": "^0.10.0",
78
+ "@ledgerhq/crypto-icons-ui": "^1.15.0-nightly.0",
79
+ "@ledgerhq/icons-ui": "^0.11.0-nightly.0",
80
80
  "@ledgerhq/ui-shared": "^0.3.0"
81
81
  },
82
82
  "peerDependencies": {
@@ -85,10 +85,10 @@
85
85
  "styled-components": "^5.3.3"
86
86
  },
87
87
  "devDependencies": {
88
- "@babel/core": "^7.22.8",
89
- "@babel/preset-env": "^7.24.3",
90
- "@babel/preset-react": "^7.24.1",
91
- "@babel/preset-typescript": "^7.24.1",
88
+ "@babel/core": "7.27.1",
89
+ "@babel/preset-env": "7.27.1",
90
+ "@babel/preset-react": "7.27.1",
91
+ "@babel/preset-typescript": "7.27.1",
92
92
  "@storybook/addon-actions": "^8.6.12",
93
93
  "@storybook/addon-essentials": "^8.6.12",
94
94
  "@storybook/addon-interactions": "8.6.12",