@ledgerhq/react-ui 0.25.0-nightly.1 → 0.25.0

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 (71) hide show
  1. package/lib/cjs/pre-ldls/components/Address/Address.js +19 -2
  2. package/lib/cjs/pre-ldls/components/Address/Address.js.map +3 -3
  3. package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js +17 -6
  4. package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map +3 -3
  5. package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.stories.js +1 -1
  6. package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.stories.js.map +2 -2
  7. package/lib/cjs/pre-ldls/components/AssetList/AssetList.js +3 -12
  8. package/lib/cjs/pre-ldls/components/AssetList/AssetList.js.map +2 -2
  9. package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js +2 -6
  10. package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js.map +2 -2
  11. package/lib/cjs/pre-ldls/components/Input/Input.js +1 -2
  12. package/lib/cjs/pre-ldls/components/Input/Input.js.map +2 -2
  13. package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js +17 -6
  14. package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js.map +3 -3
  15. package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.stories.js +1 -1
  16. package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.stories.js.map +2 -2
  17. package/lib/cjs/pre-ldls/components/NetworkList/NetworkList.js +1 -1
  18. package/lib/cjs/pre-ldls/components/NetworkList/NetworkList.js.map +2 -2
  19. package/lib/cjs/pre-ldls/components/NetworkList/NetworkList.stories.js +2 -6
  20. package/lib/cjs/pre-ldls/components/NetworkList/NetworkList.stories.js.map +2 -2
  21. package/lib/cjs/pre-ldls/components/index.js +0 -1
  22. package/lib/cjs/pre-ldls/components/index.js.map +2 -2
  23. package/lib/cjs/pre-ldls/libs/index.js +2 -15
  24. package/lib/cjs/pre-ldls/libs/index.js.map +2 -2
  25. package/lib/pre-ldls/components/Address/Address.d.ts.map +1 -1
  26. package/lib/pre-ldls/components/Address/Address.js +11 -2
  27. package/lib/pre-ldls/components/Address/Address.js.map +1 -1
  28. package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts +1 -2
  29. package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts.map +1 -1
  30. package/lib/pre-ldls/components/AssetItem/AssetItem.js +14 -7
  31. package/lib/pre-ldls/components/AssetItem/AssetItem.js.map +1 -1
  32. package/lib/pre-ldls/components/AssetList/AssetList.d.ts +1 -2
  33. package/lib/pre-ldls/components/AssetList/AssetList.d.ts.map +1 -1
  34. package/lib/pre-ldls/components/AssetList/AssetList.js +3 -3
  35. package/lib/pre-ldls/components/AssetList/AssetList.js.map +1 -1
  36. package/lib/pre-ldls/components/Input/Input.d.ts.map +1 -1
  37. package/lib/pre-ldls/components/Input/Input.js +1 -2
  38. package/lib/pre-ldls/components/Input/Input.js.map +1 -1
  39. package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts +2 -6
  40. package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts.map +1 -1
  41. package/lib/pre-ldls/components/NetworkItem/NetworkItem.js +13 -6
  42. package/lib/pre-ldls/components/NetworkItem/NetworkItem.js.map +1 -1
  43. package/lib/pre-ldls/components/NetworkList/NetworkList.d.ts +5 -1
  44. package/lib/pre-ldls/components/NetworkList/NetworkList.d.ts.map +1 -1
  45. package/lib/pre-ldls/components/NetworkList/NetworkList.js +1 -1
  46. package/lib/pre-ldls/components/NetworkList/NetworkList.js.map +1 -1
  47. package/lib/pre-ldls/components/index.d.ts +0 -1
  48. package/lib/pre-ldls/components/index.d.ts.map +1 -1
  49. package/lib/pre-ldls/components/index.js +0 -1
  50. package/lib/pre-ldls/components/index.js.map +1 -1
  51. package/lib/pre-ldls/libs/index.d.ts +1 -14
  52. package/lib/pre-ldls/libs/index.d.ts.map +1 -1
  53. package/lib/pre-ldls/libs/index.js +4 -10
  54. package/lib/pre-ldls/libs/index.js.map +1 -1
  55. package/package.json +1 -2
  56. package/lib/cjs/pre-ldls/components/CardButton/CardButton.js +0 -91
  57. package/lib/cjs/pre-ldls/components/CardButton/CardButton.js.map +0 -7
  58. package/lib/cjs/pre-ldls/components/CardButton/CardButton.stories.js +0 -84
  59. package/lib/cjs/pre-ldls/components/CardButton/CardButton.stories.js.map +0 -7
  60. package/lib/cjs/pre-ldls/components/CryptoIcon/CryptoIcon.js +0 -39
  61. package/lib/cjs/pre-ldls/components/CryptoIcon/CryptoIcon.js.map +0 -7
  62. package/lib/cjs/pre-ldls/components/CryptoIcon/CryptoIcon.stories.js +0 -47
  63. package/lib/cjs/pre-ldls/components/CryptoIcon/CryptoIcon.stories.js.map +0 -7
  64. package/lib/pre-ldls/components/CardButton/CardButton.d.ts +0 -8
  65. package/lib/pre-ldls/components/CardButton/CardButton.d.ts.map +0 -1
  66. package/lib/pre-ldls/components/CardButton/CardButton.js +0 -43
  67. package/lib/pre-ldls/components/CardButton/CardButton.js.map +0 -1
  68. package/lib/pre-ldls/components/CryptoIcon/CryptoIcon.d.ts +0 -4
  69. package/lib/pre-ldls/components/CryptoIcon/CryptoIcon.d.ts.map +0 -1
  70. package/lib/pre-ldls/components/CryptoIcon/CryptoIcon.js +0 -6
  71. package/lib/pre-ldls/components/CryptoIcon/CryptoIcon.js.map +0 -1
@@ -35,7 +35,24 @@ var import_react = __toESM(require("react"));
35
35
  var import_components = require("../../../components");
36
36
  var import_styled_components = __toESM(require("styled-components"));
37
37
  var import_libs = require("../../libs");
38
- var import_CryptoIcon = require("../CryptoIcon/CryptoIcon");
38
+ const TempAssetBadge = ({
39
+ ledgerId: _ledgerId,
40
+ ticker: _ticker
41
+ }) => (
42
+ // TODO: To be replaced with LIVE-18221
43
+ /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center" }, "data-testid": "address-icon" }, /* @__PURE__ */ import_react.default.createElement(
44
+ "span",
45
+ {
46
+ style: {
47
+ height: 20,
48
+ width: 20,
49
+ borderRadius: 20,
50
+ backgroundColor: "grey",
51
+ display: "inline-block"
52
+ }
53
+ }
54
+ ))
55
+ );
39
56
  const Wrapper = import_styled_components.default.div`
40
57
  ${(0, import_libs.withTokens)("spacing-xxxs", "colors-content-subdued-default-default")}
41
58
 
@@ -57,6 +74,6 @@ const Address = ({
57
74
  color: "var(--colors-content-subdued-default-default)"
58
75
  },
59
76
  address
60
- ), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, ticker }));
77
+ ), showIcon && /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, { ledgerId: cryptoId, ticker }));
61
78
  };
62
79
  //# sourceMappingURL=Address.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/Address/Address.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport { Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\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 && <CryptoIcon ledgerId={cryptoId} ticker={ticker} />}\n </Wrapper>\n );\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAA2B;AAE3B,MAAM,UAAU,yBAAAA,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,6BAAAC,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,gCAAW,UAAU,UAAU,QAAgB,CAC/D;AAEJ;",
6
- "names": ["styled", "React"]
4
+ "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"],
5
+ "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;",
6
+ "names": ["React", "styled"]
7
7
  }
@@ -35,12 +35,25 @@ var import_react = __toESM(require("react"));
35
35
  var import_styled_components = __toESM(require("styled-components"));
36
36
  var import_libs = require("../../libs");
37
37
  var import_components = require("../../../components");
38
- var import_CryptoIcon = require("../CryptoIcon/CryptoIcon");
38
+ const TempAssetBadge = () => (
39
+ // TODO: To be replaced with LIVE-18221
40
+ /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(
41
+ "span",
42
+ {
43
+ style: {
44
+ height: 48,
45
+ width: 48,
46
+ borderRadius: 48,
47
+ backgroundColor: "grey",
48
+ display: "inline-block"
49
+ }
50
+ }
51
+ ))
52
+ );
39
53
  const Wrapper = import_styled_components.default.div`
40
54
  ${(0, import_libs.withTokens)(
41
55
  "spacing-xxs",
42
56
  "margin-s",
43
- "radius-s",
44
57
  "colors-content-subdued-default-default",
45
58
  "colors-content-default-default",
46
59
  "colors-surface-transparent-hover",
@@ -50,8 +63,6 @@ const Wrapper = import_styled_components.default.div`
50
63
  display: flex;
51
64
  padding: var(--spacing-xxs);
52
65
  cursor: pointer;
53
- border-radius: var(--radius-s, 8px);
54
- align-items: center;
55
66
 
56
67
  :hover {
57
68
  background-color: var(--colors-surface-transparent-hover);
@@ -67,8 +78,8 @@ const InfoWrapper = import_styled_components.default.div`
67
78
  justify-content: center;
68
79
  margin-left: var(--margin-s);
69
80
  `;
70
- const AssetItem = ({ name, ticker, id, onClick }) => {
71
- 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(
81
+ const AssetItem = ({ name, ticker, onClick }) => {
82
+ 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(
72
83
  import_components.Text,
73
84
  {
74
85
  variant: "largeLineHeight",
@@ -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\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 <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 >\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;AAiBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,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;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;",
6
- "names": ["styled", "React"]
4
+ "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-xxs\",\n \"margin-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\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, 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"],
5
+ "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;",
6
+ "names": ["React", "styled"]
7
7
  }
@@ -29,7 +29,7 @@ const meta = {
29
29
  component: import_AssetItem.AssetItem,
30
30
  title: "PreLdls/Components/AssetItem",
31
31
  tags: ["autodocs"],
32
- args: { name: "Bitcoin", ticker: "BTC", id: "bitcoin" }
32
+ args: { name: "Bitcoin", ticker: "BTC" }
33
33
  };
34
34
  var AssetItem_stories_default = meta;
35
35
  const Default = {};
@@ -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\";\n\nconst meta: Meta<typeof AssetItem> = {\n component: AssetItem,\n title: \"PreLdls/Components/AssetItem\",\n tags: [\"autodocs\"],\n args: { name: \"Bitcoin\", ticker: \"BTC\" },\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,MAAM;AACzC;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;",
6
6
  "names": []
7
7
  }
@@ -36,21 +36,12 @@ var import_AssetItem = require("../AssetItem/AssetItem");
36
36
  var import_VirtualList = require("../VirtualList/VirtualList");
37
37
  const AssetList = ({
38
38
  assets,
39
- onClick,
40
- onVisibleItemsScrollEnd
39
+ onClick
41
40
  }) => {
42
41
  const renderAssetItem = (0, import_react.useCallback)(
43
- ({ name, ticker, id }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, id, onClick }),
42
+ ({ name, ticker }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, onClick }),
44
43
  [onClick]
45
44
  );
46
- return /* @__PURE__ */ import_react.default.createElement(
47
- import_VirtualList.VirtualList,
48
- {
49
- itemHeight: 64,
50
- items: assets,
51
- onVisibleItemsScrollEnd,
52
- renderItem: renderAssetItem
53
- }
54
- );
45
+ return /* @__PURE__ */ import_react.default.createElement(import_VirtualList.VirtualList, { itemHeight: 64, items: assets, renderItem: renderAssetItem });
55
46
  };
56
47
  //# sourceMappingURL=AssetList.js.map
@@ -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}: {\n assets: AssetType[];\n onClick: (asset: AssetType) => void;\n onVisibleItemsScrollEnd?: () => void;\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={64}\n items={assets}\n onVisibleItemsScrollEnd={onVisibleItemsScrollEnd}\n renderItem={renderAssetItem}\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;AACF,MAIM;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;AAAA,EACd;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}: {\n assets: AssetType[];\n onClick: (asset: AssetType) => void;\n}) => {\n const renderAssetItem = useCallback(\n ({ name, ticker }: AssetType) => <AssetItem name={name} ticker={ticker} onClick={onClick} />,\n [onClick],\n );\n\n return <VirtualList itemHeight={64} items={assets} renderItem={renderAssetItem} />;\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,EAAE,MAAM,OAAO,MAAiB,6BAAAA,QAAA,cAAC,8BAAU,MAAY,QAAgB,SAAkB;AAAA,IAC1F,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,6BAAAA,QAAA,cAAC,kCAAY,YAAY,IAAI,OAAO,QAAQ,YAAY,iBAAiB;AAClF;",
6
6
  "names": ["React"]
7
7
  }
@@ -45,11 +45,7 @@ const meta = {
45
45
  title: "PreLdls/Components/AssetList",
46
46
  tags: ["autodocs"],
47
47
  args: {
48
- assets: Array.from({ length: 50 }).map((_, i) => ({
49
- name: `Bitcoin ${i}`,
50
- ticker: "BTC",
51
- id: "bitcoin"
52
- })),
48
+ assets: Array.from({ length: 50 }).map((_, i) => ({ name: `Bitcoin ${i}`, ticker: "BTC" })),
53
49
  onClick: testFn
54
50
  }
55
51
  };
@@ -60,7 +56,7 @@ const TestAssetClick = {
60
56
  const canvas = (0, import_test.within)(canvasElement);
61
57
  const input = canvas.getByText("Bitcoin 1");
62
58
  await import_test.userEvent.click(input);
63
- await (0, import_test.expect)(testFn).toHaveBeenCalledWith({ name: "Bitcoin 1", ticker: "BTC", id: "bitcoin" });
59
+ await (0, import_test.expect)(testFn).toHaveBeenCalledWith({ name: "Bitcoin 1", ticker: "BTC" });
64
60
  }
65
61
  };
66
62
  //# sourceMappingURL=AssetList.stories.js.map
@@ -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 },\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,EACX;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\";\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) => ({ name: `Bitcoin ${i}`, ticker: \"BTC\" })),\n onClick: testFn,\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\" });\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,EAAE,MAAM,WAAW,CAAC,IAAI,QAAQ,MAAM,EAAE;AAAA,IAC1F,SAAS;AAAA,EACX;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,MAAM,CAAC;AAAA,EAChF;AACF;",
6
6
  "names": ["React"]
7
7
  }
@@ -44,6 +44,7 @@ const Wrapper = import_styled_components.default.div`
44
44
  )}
45
45
 
46
46
  display: flex;
47
+ width: 328px;
47
48
  height: 40px;
48
49
  min-width: 328px;
49
50
  padding: 0px var(--spacing-s, 16px);
@@ -53,11 +54,9 @@ const Wrapper = import_styled_components.default.div`
53
54
  border-radius: var(--radius-s, 8px);
54
55
  background: var(--colors-surface-transparent-subdued-default, rgba(0, 0, 0, 0.03));
55
56
  color: var(--colors-content-subdued-default-default);
56
- overflow: hidden;
57
57
  `;
58
58
  const StyledInput = import_styled_components.default.input`
59
59
  background: none;
60
- cursor: text;
61
60
  border: none;
62
61
  width: 100%;
63
62
  `;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/Input/Input.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\ntype Props = Readonly<React.ComponentProps<\"input\"> & { icon?: React.ReactNode }>;\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-s\",\n \"spacing-xxs\",\n \"radius-s\",\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n )}\n\n display: flex;\n height: 40px;\n min-width: 328px;\n padding: 0px var(--spacing-s, 16px);\n align-items: center;\n gap: var(--spacing-xxs, 8px);\n\n border-radius: var(--radius-s, 8px);\n background: var(--colors-surface-transparent-subdued-default, rgba(0, 0, 0, 0.03));\n color: var(--colors-content-subdued-default-default);\n overflow: hidden;\n`;\n\nconst StyledInput = styled.input`\n background: none;\n cursor: text;\n border: none;\n width: 100%;\n`;\n\nexport const Input = React.forwardRef<HTMLInputElement, Props>(\n ({ type = \"text\", icon = null, ...props }, ref) => {\n return (\n <Wrapper>\n {icon}\n <StyledInput {...props} type={type} ref={ref} />\n </Wrapper>\n );\n },\n);\nInput.displayName = \"Input\";\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAI3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;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,QAAQ,aAAAC,QAAM;AAAA,EACzB,CAAC,EAAE,OAAO,QAAQ,OAAO,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE,6BAAAA,QAAA,cAAC,eACE,MACD,6BAAAA,QAAA,cAAC,eAAa,GAAG,OAAO,MAAY,KAAU,CAChD;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;",
4
+ "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\ntype Props = Readonly<React.ComponentProps<\"input\"> & { icon?: React.ReactNode }>;\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-s\",\n \"spacing-xxs\",\n \"radius-s\",\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n )}\n\n display: flex;\n width: 328px;\n height: 40px;\n min-width: 328px;\n padding: 0px var(--spacing-s, 16px);\n align-items: center;\n gap: var(--spacing-xxs, 8px);\n\n border-radius: var(--radius-s, 8px);\n background: var(--colors-surface-transparent-subdued-default, rgba(0, 0, 0, 0.03));\n color: var(--colors-content-subdued-default-default);\n`;\n\nconst StyledInput = styled.input`\n background: none;\n border: none;\n width: 100%;\n`;\n\nexport const Input = React.forwardRef<HTMLInputElement, Props>(\n ({ type = \"text\", icon = null, ...props }, ref) => {\n return (\n <Wrapper>\n {icon}\n <StyledInput {...props} type={type} ref={ref} />\n </Wrapper>\n );\n },\n);\nInput.displayName = \"Input\";\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAI3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;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;AAMpB,MAAM,QAAQ,aAAAC,QAAM;AAAA,EACzB,CAAC,EAAE,OAAO,QAAQ,OAAO,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE,6BAAAA,QAAA,cAAC,eACE,MACD,6BAAAA,QAAA,cAAC,eAAa,GAAG,OAAO,MAAY,KAAU,CAChD;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;",
6
6
  "names": ["styled", "React"]
7
7
  }
@@ -35,12 +35,25 @@ var import_react = __toESM(require("react"));
35
35
  var import_styled_components = __toESM(require("styled-components"));
36
36
  var import_libs = require("../../libs");
37
37
  var import_components = require("../../../components");
38
- var import_CryptoIcon = require("../CryptoIcon/CryptoIcon");
38
+ const TempAssetBadge = () => (
39
+ // TODO: To be replaced with LIVE-18221
40
+ /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(
41
+ "span",
42
+ {
43
+ style: {
44
+ height: 48,
45
+ width: 48,
46
+ borderRadius: 48,
47
+ backgroundColor: "grey",
48
+ display: "inline-block"
49
+ }
50
+ }
51
+ ))
52
+ );
39
53
  const Wrapper = import_styled_components.default.div`
40
54
  ${(0, import_libs.withTokens)(
41
55
  "spacing-xxs",
42
56
  "margin-s",
43
- "radius-s",
44
57
  "colors-content-default-default",
45
58
  "colors-surface-transparent-hover",
46
59
  "colors-surface-transparent-pressed"
@@ -48,8 +61,6 @@ const Wrapper = import_styled_components.default.div`
48
61
  display: flex;
49
62
  padding: var(--spacing-xxs);
50
63
  cursor: pointer;
51
- border-radius: var(--radius-s, 8px);
52
- align-items: center;
53
64
 
54
65
  :hover {
55
66
  background-color: var(--colors-surface-transparent-hover);
@@ -65,8 +76,8 @@ const InfoWrapper = import_styled_components.default.div`
65
76
  justify-content: center;
66
77
  margin-left: var(--margin-s);
67
78
  `;
68
- const NetworkItem = ({ name, onClick, id, ticker }) => {
69
- return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__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(
79
+ const NetworkItem = ({ name, onClick }) => {
80
+ return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, null), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
70
81
  import_components.Text,
71
82
  {
72
83
  variant: "largeLineHeight",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/NetworkItem/NetworkItem.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 Network = { name: string; id: string; ticker: string };\n\ntype NetworkItemProps = Network & {\n onClick: () => void;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxs\",\n \"margin-s\",\n \"radius-s\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n )}\n display: flex;\n padding: var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\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\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 NetworkItem = ({ name, onClick, id, ticker }: NetworkItemProps) => {\n return (\n <Wrapper onClick={onClick}>\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 >\n {name}\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;AAQ3B,MAAM,UAAU,yBAAAA,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;AAAA;AAgBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,cAAc,CAAC,EAAE,MAAM,SAAS,IAAI,OAAO,MAAwB;AAC9E,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,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;AAAA,IAEL;AAAA,EACH,CACF,CACF;AAEJ;",
6
- "names": ["styled", "React"]
4
+ "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\n\ntype NetworkItemProps = {\n name: string;\n onClick: () => 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 \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n )}\n display: flex;\n padding: var(--spacing-xxs);\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(--margin-s);\n`;\n\nexport const NetworkItem = ({ name, onClick }: NetworkItemProps) => {\n return (\n <Wrapper onClick={onClick}>\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 </InfoWrapper>\n </Wrapper>\n );\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AAOrB,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;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,cAAc,CAAC,EAAE,MAAM,QAAQ,MAAwB;AAClE,SACE,6BAAAD,QAAA,cAAC,WAAQ,WACP,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,CACF,CACF;AAEJ;",
6
+ "names": ["React", "styled"]
7
7
  }
@@ -29,7 +29,7 @@ const meta = {
29
29
  component: import_NetworkItem.NetworkItem,
30
30
  title: "PreLdls/Components/NetworkItem",
31
31
  tags: ["autodocs"],
32
- args: { name: "Bitcoin", id: "bitcoin", ticker: "btc" }
32
+ args: { name: "Bitcoin" }
33
33
  };
34
34
  var NetworkItem_stories_default = meta;
35
35
  const Default = {};
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/NetworkItem/NetworkItem.stories.tsx"],
4
- "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkItem } from \"./NetworkItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof NetworkItem> = {\n component: NetworkItem,\n title: \"PreLdls/Components/NetworkItem\",\n tags: [\"autodocs\"],\n args: { name: \"Bitcoin\", id: \"bitcoin\", ticker: \"btc\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkItem>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkItem: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"Bitcoin\");\n\n await expect(name).toBeInTheDocument();\n },\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;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,EAAE,MAAM,WAAW,IAAI,WAAW,QAAQ,MAAM;AACxD;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,kBAAyB;AAAA,EACpC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AAEvC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AAAA,EACvC;AACF;",
4
+ "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkItem } from \"./NetworkItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof NetworkItem> = {\n component: NetworkItem,\n title: \"PreLdls/Components/NetworkItem\",\n tags: [\"autodocs\"],\n args: { name: \"Bitcoin\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkItem>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkItem: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"Bitcoin\");\n\n await expect(name).toBeInTheDocument();\n },\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;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,EAAE,MAAM,UAAU;AAC1B;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,kBAAyB;AAAA,EACpC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AAEvC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AAAA,EACvC;AACF;",
6
6
  "names": []
7
7
  }
@@ -39,7 +39,7 @@ const NetworkList = ({
39
39
  onClick
40
40
  }) => {
41
41
  const renderNetworkItem = (0, import_react.useCallback)(
42
- (network) => /* @__PURE__ */ import_react.default.createElement(import_NetworkItem.NetworkItem, { ...network, onClick: () => onClick(network.id) }),
42
+ ({ name, id }) => /* @__PURE__ */ import_react.default.createElement(import_NetworkItem.NetworkItem, { name, onClick: () => onClick(id) }),
43
43
  [onClick]
44
44
  );
45
45
  return /* @__PURE__ */ import_react.default.createElement(import_VirtualList.VirtualList, { items: networks, itemHeight: 64, renderItem: renderNetworkItem });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/NetworkList/NetworkList.tsx"],
4
- "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { Network, NetworkItem } from \"../NetworkItem/NetworkItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const NetworkList = ({\n networks,\n onClick,\n}: {\n networks: Network[];\n onClick: (networkId: string) => void;\n}) => {\n const renderNetworkItem = useCallback(\n (network: Network) => <NetworkItem {...network} onClick={() => onClick(network.id)} />,\n [onClick],\n );\n\n return <VirtualList items={networks} itemHeight={64} renderItem={renderNetworkItem} />;\n};\n"],
5
- "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,kCAAa,GAAG,SAAS,SAAS,MAAM,QAAQ,QAAQ,EAAE,GAAG;AAAA,IACpF,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,6BAAAA,QAAA,cAAC,kCAAY,OAAO,UAAU,YAAY,IAAI,YAAY,mBAAmB;AACtF;",
4
+ "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { NetworkItem } from \"../NetworkItem/NetworkItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\ntype Network = { name: string; id: string };\n\nexport const NetworkList = ({\n networks,\n onClick,\n}: {\n networks: Network[];\n onClick: (networkId: string) => void;\n}) => {\n const renderNetworkItem = useCallback(\n ({ name, id }: Network) => <NetworkItem name={name} onClick={() => onClick(id)} />,\n [onClick],\n );\n\n return <VirtualList items={networks} itemHeight={64} renderItem={renderNetworkItem} />;\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,yBAA4B;AAC5B,yBAA4B;AAIrB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,wBAAoB;AAAA,IACxB,CAAC,EAAE,MAAM,GAAG,MAAe,6BAAAA,QAAA,cAAC,kCAAY,MAAY,SAAS,MAAM,QAAQ,EAAE,GAAG;AAAA,IAChF,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,6BAAAA,QAAA,cAAC,kCAAY,OAAO,UAAU,YAAY,IAAI,YAAY,mBAAmB;AACtF;",
6
6
  "names": ["React"]
7
7
  }
@@ -45,11 +45,7 @@ const meta = {
45
45
  title: "PreLdls/Components/NetworkList",
46
46
  tags: ["autodocs"],
47
47
  args: {
48
- networks: Array.from({ length: 50 }, (_, i) => ({
49
- name: `Bitcoin ${i}`,
50
- id: `bitcoin`,
51
- ticker: "btc"
52
- })),
48
+ networks: Array.from({ length: 50 }, (_, i) => ({ name: `Bitcoin ${i}`, id: `btc${i}` })),
53
49
  onClick: testFn
54
50
  }
55
51
  };
@@ -60,7 +56,7 @@ const TestNetworkClick = {
60
56
  const canvas = (0, import_test.within)(canvasElement);
61
57
  const input = canvas.getByText("Bitcoin 1");
62
58
  await import_test.userEvent.click(input);
63
- await (0, import_test.expect)(testFn).toHaveBeenCalledWith("bitcoin");
59
+ await (0, import_test.expect)(testFn).toHaveBeenCalledWith("btc1");
64
60
  }
65
61
  };
66
62
  //# sourceMappingURL=NetworkList.stories.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/NetworkList/NetworkList.stories.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkList } from \"./NetworkList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof NetworkList> = {\n component: NetworkList,\n decorators: [\n Story => (\n <div style={{ height: \"400px\" }}>\n <Story />\n </div>\n ),\n ],\n title: \"PreLdls/Components/NetworkList\",\n tags: [\"autodocs\"],\n args: {\n networks: Array.from({ length: 50 }, (_, i) => ({\n name: `Bitcoin ${i}`,\n id: `bitcoin`,\n ticker: \"btc\",\n })),\n onClick: testFn,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkList>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkClick: 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(\"bitcoin\");\n },\n};\n"],
5
- "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,OAAO;AAAA,MAC9C,MAAM,WAAW,CAAC;AAAA,MAClB,IAAI;AAAA,MACJ,QAAQ;AAAA,IACV,EAAE;AAAA,IACF,SAAS;AAAA,EACX;AACF;AACA,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,SAAS;AAAA,EACrD;AACF;",
4
+ "sourcesContent": ["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkList } from \"./NetworkList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof NetworkList> = {\n component: NetworkList,\n decorators: [\n Story => (\n <div style={{ height: \"400px\" }}>\n <Story />\n </div>\n ),\n ],\n title: \"PreLdls/Components/NetworkList\",\n tags: [\"autodocs\"],\n args: {\n networks: Array.from({ length: 50 }, (_, i) => ({ name: `Bitcoin ${i}`, id: `btc${i}` })),\n onClick: testFn,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkList>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkClick: 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"],
5
+ "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,OAAO,EAAE,MAAM,WAAW,CAAC,IAAI,IAAI,MAAM,CAAC,GAAG,EAAE;AAAA,IACxF,SAAS;AAAA,EACX;AACF;AACA,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;",
6
6
  "names": ["React"]
7
7
  }
@@ -20,7 +20,6 @@ __reExport(components_exports, require("./AccountList/AccountList"), module.expo
20
20
  __reExport(components_exports, require("./Address/Address"), module.exports);
21
21
  __reExport(components_exports, require("./AssetItem/AssetItem"), module.exports);
22
22
  __reExport(components_exports, require("./AssetList/AssetList"), module.exports);
23
- __reExport(components_exports, require("./CardButton/CardButton"), module.exports);
24
23
  __reExport(components_exports, require("./Input/Input"), module.exports);
25
24
  __reExport(components_exports, require("./NetworkItem/NetworkItem"), module.exports);
26
25
  __reExport(components_exports, require("./NetworkList/NetworkList"), module.exports);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/pre-ldls/components/index.ts"],
4
- "sourcesContent": ["export * from \"./AccountItem/AccountItem\";\nexport * from \"./AccountList/AccountList\";\nexport * from \"./Address/Address\";\nexport * from \"./AssetItem/AssetItem\";\nexport * from \"./AssetList/AssetList\";\nexport * from \"./CardButton/CardButton\";\nexport * from \"./Input/Input\";\nexport * from \"./NetworkItem/NetworkItem\";\nexport * from \"./NetworkList/NetworkList\";\nexport * from \"./Search/Search\";\nexport * from \"./Tag/Tag\";\nexport * from \"./VirtualList/VirtualList\";\n"],
5
- "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,sCAAd;AACA,+BAAc,sCADd;AAEA,+BAAc,8BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,kCAJd;AAKA,+BAAc,oCALd;AAMA,+BAAc,0BANd;AAOA,+BAAc,sCAPd;AAQA,+BAAc,sCARd;AASA,+BAAc,4BATd;AAUA,+BAAc,sBAVd;AAWA,+BAAc,sCAXd;",
4
+ "sourcesContent": ["export * from \"./AccountItem/AccountItem\";\nexport * from \"./AccountList/AccountList\";\nexport * from \"./Address/Address\";\nexport * from \"./AssetItem/AssetItem\";\nexport * from \"./AssetList/AssetList\";\nexport * from \"./Input/Input\";\nexport * from \"./NetworkItem/NetworkItem\";\nexport * from \"./NetworkList/NetworkList\";\nexport * from \"./Search/Search\";\nexport * from \"./Tag/Tag\";\nexport * from \"./VirtualList/VirtualList\";\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,sCAAd;AACA,+BAAc,sCADd;AAEA,+BAAc,8BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,kCAJd;AAKA,+BAAc,0BALd;AAMA,+BAAc,sCANd;AAOA,+BAAc,sCAPd;AAQA,+BAAc,4BARd;AASA,+BAAc,sBATd;AAUA,+BAAc,sCAVd;",
6
6
  "names": []
7
7
  }
@@ -39,10 +39,6 @@ const overrideOther = {
39
39
  // missing from tokens
40
40
  "radius-xs": "4px",
41
41
  // missing from tokens
42
- "border-width-default": "1px",
43
- // missing from tokens
44
- "border-width-focus": "2px",
45
- // missing from tokens
46
42
  "margin-xs": "8px",
47
43
  // redefines marging-xs
48
44
  "margin-s": "16px",
@@ -59,18 +55,9 @@ const overrideOther = {
59
55
  const overrideColor = {
60
56
  light: {
61
57
  "surface-transparent-hover": "#0000000D",
62
- // override from colours
63
- "surface-transparent-pressed": "#0000001A",
64
- // override from colours
65
- "border-subdued-default-hover": "#D5D5D5",
66
- // override from colours
67
- "border-subdued-default-pressed": "#C1C1C1"
68
- // missing from colours
58
+ "surface-transparent-pressed": "#0000001A"
69
59
  },
70
- dark: {
71
- "opacity-default-10": "#FFFFFF1A"
72
- // missing from colours
73
- }
60
+ dark: {}
74
61
  };
75
62
  const withTokens = (...usedTokens) => {
76
63
  const filterTokens = (0, import_memoize.default)((theme) => {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/pre-ldls/libs/index.ts"],
4
- "sourcesContent": ["import memoize from \"lodash/memoize\";\nimport { css, DefaultTheme } from \"styled-components\";\nimport { dark, light, ModeColors, spacing, SpacingScale } from \"./design-tokens\";\n\n// Add temporarily missing and override incorrect tokens here\nconst overrideOther = {\n \"radius-s\": \"8px\", // missing from tokens\n \"radius-xs\": \"4px\", // missing from tokens\n \"border-width-default\": \"1px\", // missing from tokens\n \"border-width-focus\": \"2px\", // missing from tokens\n \"margin-xs\": \"8px\", // redefines marging-xs\n \"margin-s\": \"16px\", // redefines marging-s\n \"margin-m\": \"24px\", // redefines marging-m\n \"margin-l\": \"32px\", // redefines marging-l\n\n \"spacing-xs\": \"12px\", // override from \"spacing-xxs\": \"12px\"\n \"spacing-xxs\": \"8px\", // override from \"spacing-xs\": \"8px\"\n} as const;\n\n// Add temporarily missing and override incorrect colours here\nconst overrideColor = {\n light: {\n \"surface-transparent-hover\": \"#0000000D\", // override from colours\n \"surface-transparent-pressed\": \"#0000001A\", // override from colours\n \"border-subdued-default-hover\": \"#D5D5D5\", // override from colours\n\n \"border-subdued-default-pressed\": \"#C1C1C1\", // missing from colours\n },\n dark: {\n \"opacity-default-10\": \"#FFFFFF1A\", // missing from colours\n },\n} as const;\n\ntype ColorToken =\n | `colors-${keyof ModeColors}`\n | `colors-${keyof typeof overrideColor.light}`\n | `colors-${keyof typeof overrideColor.dark}`;\ntype OtherToken = keyof (SpacingScale & typeof overrideOther);\n\nexport const withTokens = (...usedTokens: Array<ColorToken | OtherToken>) => {\n const filterTokens = memoize((theme: DefaultTheme[\"theme\"]) => {\n const colors = {\n dark: { ...dark, ...overrideColor.dark },\n light: { ...light, ...overrideColor.light },\n }[theme];\n\n const colorEntries = Object.entries(colors).flatMap(([key, value]) => {\n const color = `colors-${key}` as ColorToken;\n if (!usedTokens.includes(color)) return [];\n return [[`--${color}`, value]];\n });\n const otherEntries = [spacing, overrideOther]\n .flatMap(Object.entries)\n .flatMap(([key, value]) => {\n if (!usedTokens.includes(key as OtherToken)) return [];\n return [[`--${key}`, value]];\n });\n\n return Object.fromEntries([...colorEntries, ...otherEntries]);\n });\n\n return css(({ theme }) => filterTokens(theme.colors.type as DefaultTheme[\"theme\"]));\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoB;AACpB,+BAAkC;AAClC,2BAA+D;AAG/D,MAAM,gBAAgB;AAAA,EACpB,YAAY;AAAA;AAAA,EACZ,aAAa;AAAA;AAAA,EACb,wBAAwB;AAAA;AAAA,EACxB,sBAAsB;AAAA;AAAA,EACtB,aAAa;AAAA;AAAA,EACb,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EAEZ,cAAc;AAAA;AAAA,EACd,eAAe;AAAA;AACjB;AAGA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,IACL,6BAA6B;AAAA;AAAA,IAC7B,+BAA+B;AAAA;AAAA,IAC/B,gCAAgC;AAAA;AAAA,IAEhC,kCAAkC;AAAA;AAAA,EACpC;AAAA,EACA,MAAM;AAAA,IACJ,sBAAsB;AAAA;AAAA,EACxB;AACF;AAQO,MAAM,aAAa,IAAI,eAA+C;AAC3E,QAAM,mBAAe,eAAAA,SAAQ,CAAC,UAAiC;AAC7D,UAAM,SAAS;AAAA,MACb,MAAM,EAAE,GAAG,2BAAM,GAAG,cAAc,KAAK;AAAA,MACvC,OAAO,EAAE,GAAG,4BAAO,GAAG,cAAc,MAAM;AAAA,IAC5C,EAAE,KAAK;AAEP,UAAM,eAAe,OAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACpE,YAAM,QAAQ,UAAU,GAAG;AAC3B,UAAI,CAAC,WAAW,SAAS,KAAK;AAAG,eAAO,CAAC;AACzC,aAAO,CAAC,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC;AAAA,IAC/B,CAAC;AACD,UAAM,eAAe,CAAC,8BAAS,aAAa,EACzC,QAAQ,OAAO,OAAO,EACtB,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACzB,UAAI,CAAC,WAAW,SAAS,GAAiB;AAAG,eAAO,CAAC;AACrD,aAAO,CAAC,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC;AAAA,IAC7B,CAAC;AAEH,WAAO,OAAO,YAAY,CAAC,GAAG,cAAc,GAAG,YAAY,CAAC;AAAA,EAC9D,CAAC;AAED,aAAO,8BAAI,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,IAA6B,CAAC;AACpF;",
4
+ "sourcesContent": ["import memoize from \"lodash/memoize\";\nimport { css, DefaultTheme } from \"styled-components\";\nimport { dark, light, ModeColors, spacing, SpacingScale } from \"./design-tokens\";\n\n// Add temporarily missing and override incorrect tokens here\nconst overrideOther = {\n \"radius-s\": \"8px\", // missing from tokens\n \"radius-xs\": \"4px\", // missing from tokens\n \"margin-xs\": \"8px\", // redefines marging-xs\n \"margin-s\": \"16px\", // redefines marging-s\n \"margin-m\": \"24px\", // redefines marging-m\n \"margin-l\": \"32px\", // redefines marging-l\n\n \"spacing-xs\": \"12px\", // override from \"spacing-xxs\": \"12px\"\n \"spacing-xxs\": \"8px\", // override from \"spacing-xs\": \"8px\"\n} as const;\n\n// override colours based on Figma differing from design-tokens.ts\nconst overrideColor = {\n light: {\n \"surface-transparent-hover\": \"#0000000D\",\n \"surface-transparent-pressed\": \"#0000001A\",\n },\n dark: {},\n} as const;\n\ntype ColorToken = `colors-${keyof ModeColors}`;\ntype OtherToken = keyof (SpacingScale & typeof overrideOther);\n\nexport const withTokens = (...usedTokens: Array<ColorToken | OtherToken>) => {\n const filterTokens = memoize((theme: DefaultTheme[\"theme\"]) => {\n const colors = {\n dark: { ...dark, ...overrideColor.dark },\n light: { ...light, ...overrideColor.light },\n }[theme];\n\n const colorEntries = Object.entries(colors).flatMap(([key, value]) => {\n const color = `colors-${key}` as ColorToken;\n if (!usedTokens.includes(color)) return [];\n return [[`--${color}`, value]];\n });\n const otherEntries = [spacing, overrideOther]\n .flatMap(Object.entries)\n .flatMap(([key, value]) => {\n if (!usedTokens.includes(key as OtherToken)) return [];\n return [[`--${key}`, value]];\n });\n\n return Object.fromEntries([...colorEntries, ...otherEntries]);\n });\n\n return css(({ theme }) => filterTokens(theme.colors.type as DefaultTheme[\"theme\"]));\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoB;AACpB,+BAAkC;AAClC,2BAA+D;AAG/D,MAAM,gBAAgB;AAAA,EACpB,YAAY;AAAA;AAAA,EACZ,aAAa;AAAA;AAAA,EACb,aAAa;AAAA;AAAA,EACb,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EAEZ,cAAc;AAAA;AAAA,EACd,eAAe;AAAA;AACjB;AAGA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,IACL,6BAA6B;AAAA,IAC7B,+BAA+B;AAAA,EACjC;AAAA,EACA,MAAM,CAAC;AACT;AAKO,MAAM,aAAa,IAAI,eAA+C;AAC3E,QAAM,mBAAe,eAAAA,SAAQ,CAAC,UAAiC;AAC7D,UAAM,SAAS;AAAA,MACb,MAAM,EAAE,GAAG,2BAAM,GAAG,cAAc,KAAK;AAAA,MACvC,OAAO,EAAE,GAAG,4BAAO,GAAG,cAAc,MAAM;AAAA,IAC5C,EAAE,KAAK;AAEP,UAAM,eAAe,OAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACpE,YAAM,QAAQ,UAAU,GAAG;AAC3B,UAAI,CAAC,WAAW,SAAS,KAAK;AAAG,eAAO,CAAC;AACzC,aAAO,CAAC,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC;AAAA,IAC/B,CAAC;AACD,UAAM,eAAe,CAAC,8BAAS,aAAa,EACzC,QAAQ,OAAO,OAAO,EACtB,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACzB,UAAI,CAAC,WAAW,SAAS,GAAiB;AAAG,eAAO,CAAC;AACrD,aAAO,CAAC,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC;AAAA,IAC7B,CAAC;AAEH,WAAO,OAAO,YAAY,CAAC,GAAG,cAAc,GAAG,YAAY,CAAC;AAAA,EAC9D,CAAC;AAED,aAAO,8BAAI,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,IAA6B,CAAC;AACpF;",
6
6
  "names": ["memoize"]
7
7
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,eAAO,MAAM,OAAO;aAMT,MAAM;cACL,OAAO;;;uBAgBlB,CAAC"}
1
+ {"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkC1B,eAAO,MAAM,OAAO;aAMT,MAAM;cACL,OAAO;;;uBAgBlB,CAAC"}
@@ -2,7 +2,16 @@ import React from "react";
2
2
  import { Text } from "../../../components";
3
3
  import styled from "styled-components";
4
4
  import { withTokens } from "../../libs";
5
- import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
5
+ const TempAssetBadge = ({ ledgerId: _ledgerId, ticker: _ticker, }) => (
6
+ // TODO: To be replaced with LIVE-18221
7
+ React.createElement("div", { style: { display: "flex", alignItems: "center" }, "data-testid": "address-icon" },
8
+ React.createElement("span", { style: {
9
+ height: 20,
10
+ width: 20,
11
+ borderRadius: 20,
12
+ backgroundColor: "grey",
13
+ display: "inline-block",
14
+ } })));
6
15
  const Wrapper = styled.div `
7
16
  ${withTokens("spacing-xxxs", "colors-content-subdued-default-default")}
8
17
 
@@ -13,6 +22,6 @@ const Wrapper = styled.div `
13
22
  export const Address = ({ address, showIcon, cryptoId, ticker, }) => {
14
23
  return (React.createElement(Wrapper, null,
15
24
  React.createElement(Text, { marginRight: "var(--spacing-xxxs)", fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, address),
16
- showIcon && React.createElement(CryptoIcon, { ledgerId: cryptoId, ticker: ticker })));
25
+ showIcon && React.createElement(TempAssetBadge, { ledgerId: cryptoId, ticker: ticker })));
17
26
  };
18
27
  //# sourceMappingURL=Address.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Address.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CAAC,cAAc,EAAE,wCAAwC,CAAC;;;;;CAKvE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,GAMP,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,IAAI,IACH,WAAW,EAAC,qBAAqB,EACjC,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,+CAA+C,IAEpD,OAAO,CACH;QACN,QAAQ,IAAI,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,CACvD,CACX,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Address.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,cAAc,GAAG,CAAC,EACtB,QAAQ,EAAE,SAAS,EACnB,MAAM,EAAE,OAAO,GAIhB,EAAE,EAAE,CAAC;AACJ,uCAAuC;AACvC,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAc,cAAc;IAC/E,8BACE,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,YAAY,EAAE,EAAE;YAChB,eAAe,EAAE,MAAM;YACvB,OAAO,EAAE,cAAc;SACxB,GACD,CACE,CACP,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CAAC,cAAc,EAAE,wCAAwC,CAAC;;;;;CAKvE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,GAMP,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,IAAI,IACH,WAAW,EAAC,qBAAqB,EACjC,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,+CAA+C,IAEpD,OAAO,CACH;QACN,QAAQ,IAAI,oBAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,CAC3D,CACX,CAAC;AACJ,CAAC,CAAC"}
@@ -2,11 +2,10 @@ import React from "react";
2
2
  export type AssetType = {
3
3
  name: string;
4
4
  ticker: string;
5
- id: string;
6
5
  };
7
6
  type AssetItemProps = AssetType & {
8
7
  onClick: (asset: AssetType) => void;
9
8
  };
10
- export declare const AssetItem: ({ name, ticker, id, onClick }: AssetItemProps) => React.JSX.Element;
9
+ export declare const AssetItem: ({ name, ticker, onClick }: AssetItemProps) => React.JSX.Element;
11
10
  export {};
12
11
  //# sourceMappingURL=AssetItem.d.ts.map
@@ -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;AAmCF,eAAO,MAAM,SAAS,kCAAmC,cAAc,sBAsBtE,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;AAK1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC,CAAC;AA+CF,eAAO,MAAM,SAAS,8BAA+B,cAAc,sBAsBlE,CAAC"}