@ledgerhq/react-ui 0.38.0-nightly.0 → 0.38.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 (18) hide show
  1. package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js +43 -2
  2. package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map +2 -2
  3. package/lib/cjs/pre-ldls/components/AssetList/AssetList.js +4 -3
  4. package/lib/cjs/pre-ldls/components/AssetList/AssetList.js.map +2 -2
  5. package/lib/cjs/pre-ldls/components/Search/Search.js +12 -2
  6. package/lib/cjs/pre-ldls/components/Search/Search.js.map +3 -3
  7. package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts +4 -1
  8. package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts.map +1 -1
  9. package/lib/pre-ldls/components/AssetItem/AssetItem.js +25 -2
  10. package/lib/pre-ldls/components/AssetItem/AssetItem.js.map +1 -1
  11. package/lib/pre-ldls/components/AssetList/AssetList.d.ts +2 -1
  12. package/lib/pre-ldls/components/AssetList/AssetList.d.ts.map +1 -1
  13. package/lib/pre-ldls/components/AssetList/AssetList.js +2 -2
  14. package/lib/pre-ldls/components/AssetList/AssetList.js.map +1 -1
  15. package/lib/pre-ldls/components/Search/Search.d.ts.map +1 -1
  16. package/lib/pre-ldls/components/Search/Search.js +12 -1
  17. package/lib/pre-ldls/components/Search/Search.js.map +1 -1
  18. package/package.json +1 -1
package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js CHANGED
@@ -36,6 +36,13 @@ var import_styled_components = __toESM(require("styled-components"));
36
36
  var import_libs = require("../../libs");
37
37
  var import_components = require("../../../components");
38
38
  var import_CryptoIcon = require("../CryptoIcon/CryptoIcon");
39
+ const copyToClipboard = async (text) => {
40
+ try {
41
+ await navigator.clipboard.writeText(text);
42
+ } catch (err) {
43
+ console.error("Failed to copy to clipboard:", err);
44
+ }
45
+ };
39
46
  const Wrapper = import_styled_components.default.div`
40
47
  ${(0, import_libs.withTokens)(
41
48
  "spacing-xxs",
@@ -76,13 +83,31 @@ const LeftElementWrapper = import_styled_components.default.div`
76
83
  align-items: center;
77
84
  gap: 4px;
78
85
  `;
86
+ const TagWrapper = import_styled_components.default.div`
87
+ ${(0, import_libs.withTokens)(
88
+ "colors-surface-transparent-subdued-default",
89
+ "colors-content-subdued-default-default",
90
+ "radius-xs",
91
+ "spacing-xxxs"
92
+ )}
93
+
94
+ padding: var(--spacing-xxxs);
95
+ border-radius: var(--radius-xs);
96
+ display: inline-flex;
97
+ background-color: var(--colors-surface-transparent-subdued-default);
98
+ flex-shrink: 0;
99
+ cursor: pointer;
100
+ `;
79
101
  const AssetItem = ({
80
102
  name,
81
103
  ticker,
104
+ numberOfNetworks,
82
105
  id,
106
+ assetId,
83
107
  onClick,
84
108
  leftElement,
85
- rightElement
109
+ rightElement,
110
+ shouldDisplayId
86
111
  }) => {
87
112
  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(
88
113
  import_components.Text,
@@ -111,6 +136,22 @@ const AssetItem = ({
111
136
  color: "var(--colors-content-subdued-default-default)"
112
137
  },
113
138
  ticker
114
- ), leftElement)), rightElement);
139
+ ), leftElement, shouldDisplayId && assetId ? /* @__PURE__ */ import_react.default.createElement(
140
+ TagWrapper,
141
+ {
142
+ onClick: (e) => {
143
+ e.stopPropagation();
144
+ copyToClipboard(assetId);
145
+ }
146
+ },
147
+ /* @__PURE__ */ import_react.default.createElement(
148
+ import_components.Text,
149
+ {
150
+ color: "var(--colors-content-subdued-default-default)",
151
+ fontSize: "12px"
152
+ },
153
+ `${assetId} (${numberOfNetworks} networks)`
154
+ )
155
+ ) : null)), rightElement);
115
156
  };
116
157
  //# 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 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 gap: 4px;\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 data-testid={`asset-item-name-${name}`}\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 data-testid={`asset-item-ticker-${ticker}`}\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;AAAA;AAU3B,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,eAAa,mBAAmB,IAAI;AAAA,MACpC,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,eAAa,qBAAqB,MAAM;AAAA,MACxC,UAAS;AAAA,MACT,YAAW;AAAA,MACX,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,WACH,CACF,GACC,YACH;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\nconst copyToClipboard = async (text: string) => {\n try {\n await navigator.clipboard.writeText(text);\n } catch (err) {\n console.error(\"Failed to copy to clipboard:\", err);\n }\n};\n\nexport type AssetType = {\n name: string;\n ticker: string;\n id: string;\n leftElement?: React.ReactNode;\n rightElement?: React.ReactNode;\n numberOfNetworks?: number;\n assetId?: string;\n shouldDisplayId?: boolean;\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 gap: 4px;\n`;\n\nconst LeftElementWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nconst TagWrapper = styled.div`\n ${withTokens(\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n \"radius-xs\",\n \"spacing-xxxs\",\n )}\n\n padding: var(--spacing-xxxs);\n border-radius: var(--radius-xs);\n display: inline-flex;\n background-color: var(--colors-surface-transparent-subdued-default);\n flex-shrink: 0;\n cursor: pointer;\n`;\n\nexport const AssetItem = ({\n name,\n ticker,\n numberOfNetworks,\n id,\n assetId,\n onClick,\n leftElement,\n rightElement,\n shouldDisplayId,\n}: AssetItemProps) => {\n return (\n <Wrapper onClick={() => onClick({ name, ticker, id })}>\n <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n <InfoWrapper>\n <Text\n data-testid={`asset-item-name-${name}`}\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 data-testid={`asset-item-ticker-${ticker}`}\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 {shouldDisplayId && assetId ? (\n <TagWrapper\n onClick={e => {\n e.stopPropagation();\n copyToClipboard(assetId);\n }}\n >\n <Text\n color=\"var(--colors-content-subdued-default-default)\"\n fontSize=\"12px\"\n >{`${assetId} (${numberOfNetworks} networks)`}</Text>\n </TagWrapper>\n ) : null}\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;AAE3B,MAAM,kBAAkB,OAAO,SAAiB;AAC9C,MAAI;AACF,UAAM,UAAU,UAAU,UAAU,IAAI;AAAA,EAC1C,SAAS,KAAK;AACZ,YAAQ,MAAM,gCAAgC,GAAG;AAAA,EACnD;AACF;AAiBA,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;AAAA;AAU3B,MAAM,qBAAqB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMlC,MAAM,aAAa,yBAAAA,QAAO;AAAA,QACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUI,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;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,eAAa,mBAAmB,IAAI;AAAA,MACpC,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,eAAa,qBAAqB,MAAM;AAAA,MACxC,UAAS;AAAA,MACT,YAAW;AAAA,MACX,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,aACA,mBAAmB,UAClB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAK;AACZ,UAAE,gBAAgB;AAClB,wBAAgB,OAAO;AAAA,MACzB;AAAA;AAAA,IAEA,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,UAAS;AAAA;AAAA,MACT,GAAG,OAAO,KAAK,gBAAgB;AAAA,IAAa;AAAA,EAChD,IACE,IACN,CACF,GACC,YACH;AAEJ;",
6
6
  "names": ["styled", "React"]
7
7
  }
package/lib/cjs/pre-ldls/components/AssetList/AssetList.js CHANGED
@@ -39,11 +39,12 @@ const AssetList = ({
39
39
  onClick,
40
40
  onVisibleItemsScrollEnd,
41
41
  scrollToTop,
42
- hasNextPage
42
+ hasNextPage,
43
+ isDebuggingDuplicates
43
44
  }) => {
44
45
  const renderAssetItem = (0, import_react.useCallback)(
45
- (props) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { ...props, onClick }),
46
- [onClick]
46
+ (props) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { ...props, shouldDisplayId: isDebuggingDuplicates, onClick }),
47
+ [onClick, isDebuggingDuplicates]
47
48
  );
48
49
  return /* @__PURE__ */ import_react.default.createElement(
49
50
  import_VirtualList.VirtualList,
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 (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;",
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 isDebuggingDuplicates,\n}: {\n assets: AssetType[];\n onClick: (asset: AssetType) => void;\n onVisibleItemsScrollEnd?: () => void;\n scrollToTop?: boolean;\n hasNextPage?: boolean;\n isDebuggingDuplicates?: boolean;\n}) => {\n const renderAssetItem = useCallback(\n (props: AssetType) => (\n <AssetItem {...props} shouldDisplayId={isDebuggingDuplicates} onClick={onClick} />\n ),\n [onClick, isDebuggingDuplicates],\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;AAAA,EACA;AACF,MAOM;AACJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,UACC,6BAAAA,QAAA,cAAC,8BAAW,GAAG,OAAO,iBAAiB,uBAAuB,SAAkB;AAAA,IAElF,CAAC,SAAS,qBAAqB;AAAA,EACjC;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/Search/Search.js CHANGED
@@ -35,6 +35,16 @@ var import_react = __toESM(require("react"));
35
35
  var import_assets = require("../../../assets");
36
36
  var import_hooks = require("../../hooks");
37
37
  var import__ = require("..");
38
+ var import_styled_components = __toESM(require("styled-components"));
39
+ var import_libs = require("../../libs");
40
+ const Wrapper = import_styled_components.default.div`
41
+ ${(0, import_libs.withTokens)("colors-border-active-default", "radius-s")}
42
+
43
+ :focus-within {
44
+ box-shadow: inset 0 0 0 2px var(--colors-border-active-default);
45
+ }
46
+ border-radius: var(--radius-s, 8px);
47
+ `;
38
48
  function Search({
39
49
  onDebouncedChange,
40
50
  debounceTime = 500,
@@ -73,7 +83,7 @@ function Search({
73
83
  handleDebouncedChange == null ? void 0 : handleDebouncedChange(event);
74
84
  };
75
85
  }, [handleDebouncedChange, onChange]);
76
- return /* @__PURE__ */ import_react.default.createElement(
86
+ return /* @__PURE__ */ import_react.default.createElement(Wrapper, null, /* @__PURE__ */ import_react.default.createElement(
77
87
  import__.Input,
78
88
  {
79
89
  ...props,
@@ -81,6 +91,6 @@ function Search({
81
91
  icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Search, { size: "S" }),
82
92
  onChange: handleChange
83
93
  }
84
- );
94
+ ));
85
95
  }
86
96
  //# sourceMappingURL=Search.js.map
package/lib/cjs/pre-ldls/components/Search/Search.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/Search/Search.tsx"],
4
- "sourcesContent": ["import React, { ChangeEvent, useEffect, useMemo, useRef } from \"react\";\nimport { Icons } from \"../../../assets\";\nimport { useDebouncedCallback } from \"../../hooks\";\nimport { Input } from \"..\";\n\ntype InputProps = React.ComponentProps<\"input\">;\ntype Props = Readonly<\n InputProps & {\n onDebouncedChange?: (current: string, prev: string) => void;\n debounceTime?: number;\n autoFocus?: boolean;\n }\n>;\n\nexport function Search({\n onDebouncedChange,\n debounceTime = 500,\n onChange,\n autoFocus = true,\n ...props\n}: Props) {\n const initialValue = props.value ?? props.defaultValue ?? \"\";\n const prevValue = useRef(String(initialValue));\n const searchInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoFocus && searchInputRef.current) {\n // Delay focus to prevent layout shifts\n setTimeout(() => {\n searchInputRef.current?.focus({ preventScroll: true });\n }, 0);\n }\n }, [autoFocus]);\n\n const handleDebouncedChange = useDebouncedCallback(\n useMemo(() => {\n if (!onDebouncedChange) return;\n return (event: ChangeEvent<HTMLInputElement>) => {\n const current = event.target.value;\n onDebouncedChange(current, prevValue.current);\n prevValue.current = current;\n };\n }, [onDebouncedChange]),\n debounceTime,\n );\n\n const handleChange = useMemo(() => {\n if (!handleDebouncedChange && !onChange) return;\n return (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleDebouncedChange?.(event);\n };\n }, [handleDebouncedChange, onChange]);\n\n return (\n <Input\n {...props}\n ref={searchInputRef}\n icon={<Icons.Search size=\"S\" />}\n onChange={handleChange}\n />\n );\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+D;AAC/D,oBAAsB;AACtB,mBAAqC;AACrC,eAAsB;AAWf,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAU;AACR,QAAM,eAAe,MAAM,SAAS,MAAM,gBAAgB;AAC1D,QAAM,gBAAY,qBAAO,OAAO,YAAY,CAAC;AAC7C,QAAM,qBAAiB,qBAAyB,IAAI;AAEpD,8BAAU,MAAM;AACd,QAAI,aAAa,eAAe,SAAS;AAEvC,iBAAW,MAAM;AA5BvB;AA6BQ,6BAAe,YAAf,mBAAwB,MAAM,EAAE,eAAe,KAAK;AAAA,MACtD,GAAG,CAAC;AAAA,IACN;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,4BAAwB;AAAA,QAC5B,sBAAQ,MAAM;AACZ,UAAI,CAAC;AAAmB;AACxB,aAAO,CAAC,UAAyC;AAC/C,cAAM,UAAU,MAAM,OAAO;AAC7B,0BAAkB,SAAS,UAAU,OAAO;AAC5C,kBAAU,UAAU;AAAA,MACtB;AAAA,IACF,GAAG,CAAC,iBAAiB,CAAC;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC,yBAAyB,CAAC;AAAU;AACzC,WAAO,CAAC,UAAyC;AAC/C,2CAAW;AACX,qEAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,uBAAuB,QAAQ,CAAC;AAEpC,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,6BAAAA,QAAA,cAAC,oBAAM,QAAN,EAAa,MAAK,KAAI;AAAA,MAC7B,UAAU;AAAA;AAAA,EACZ;AAEJ;",
6
- "names": ["React"]
4
+ "sourcesContent": ["import React, { ChangeEvent, useEffect, useMemo, useRef } from \"react\";\nimport { Icons } from \"../../../assets\";\nimport { useDebouncedCallback } from \"../../hooks\";\nimport { Input } from \"..\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst Wrapper = styled.div`\n ${withTokens(\"colors-border-active-default\", \"radius-s\")}\n\n :focus-within {\n box-shadow: inset 0 0 0 2px var(--colors-border-active-default);\n }\n border-radius: var(--radius-s, 8px);\n`;\n\ntype InputProps = React.ComponentProps<\"input\">;\ntype Props = Readonly<\n InputProps & {\n onDebouncedChange?: (current: string, prev: string) => void;\n debounceTime?: number;\n autoFocus?: boolean;\n }\n>;\n\nexport function Search({\n onDebouncedChange,\n debounceTime = 500,\n onChange,\n autoFocus = true,\n ...props\n}: Props) {\n const initialValue = props.value ?? props.defaultValue ?? \"\";\n const prevValue = useRef(String(initialValue));\n const searchInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoFocus && searchInputRef.current) {\n // Delay focus to prevent layout shifts\n setTimeout(() => {\n searchInputRef.current?.focus({ preventScroll: true });\n }, 0);\n }\n }, [autoFocus]);\n\n const handleDebouncedChange = useDebouncedCallback(\n useMemo(() => {\n if (!onDebouncedChange) return;\n return (event: ChangeEvent<HTMLInputElement>) => {\n const current = event.target.value;\n onDebouncedChange(current, prevValue.current);\n prevValue.current = current;\n };\n }, [onDebouncedChange]),\n debounceTime,\n );\n\n const handleChange = useMemo(() => {\n if (!handleDebouncedChange && !onChange) return;\n return (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleDebouncedChange?.(event);\n };\n }, [handleDebouncedChange, onChange]);\n\n return (\n <Wrapper>\n <Input\n {...props}\n ref={searchInputRef}\n icon={<Icons.Search size=\"S\" />}\n onChange={handleChange}\n />\n </Wrapper>\n );\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+D;AAC/D,oBAAsB;AACtB,mBAAqC;AACrC,eAAsB;AACtB,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB,wBAAW,gCAAgC,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBnD,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAU;AACR,QAAM,eAAe,MAAM,SAAS,MAAM,gBAAgB;AAC1D,QAAM,gBAAY,qBAAO,OAAO,YAAY,CAAC;AAC7C,QAAM,qBAAiB,qBAAyB,IAAI;AAEpD,8BAAU,MAAM;AACd,QAAI,aAAa,eAAe,SAAS;AAEvC,iBAAW,MAAM;AAvCvB;AAwCQ,6BAAe,YAAf,mBAAwB,MAAM,EAAE,eAAe,KAAK;AAAA,MACtD,GAAG,CAAC;AAAA,IACN;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,4BAAwB;AAAA,QAC5B,sBAAQ,MAAM;AACZ,UAAI,CAAC;AAAmB;AACxB,aAAO,CAAC,UAAyC;AAC/C,cAAM,UAAU,MAAM,OAAO;AAC7B,0BAAkB,SAAS,UAAU,OAAO;AAC5C,kBAAU,UAAU;AAAA,MACtB;AAAA,IACF,GAAG,CAAC,iBAAiB,CAAC;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC,yBAAyB,CAAC;AAAU;AACzC,WAAO,CAAC,UAAyC;AAC/C,2CAAW;AACX,qEAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,uBAAuB,QAAQ,CAAC;AAEpC,SACE,6BAAAC,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,6BAAAA,QAAA,cAAC,oBAAM,QAAN,EAAa,MAAK,KAAI;AAAA,MAC7B,UAAU;AAAA;AAAA,EACZ,CACF;AAEJ;",
6
+ "names": ["styled", "React"]
7
7
  }
package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts CHANGED
@@ -5,10 +5,13 @@ export type AssetType = {
5
5
  id: string;
6
6
  leftElement?: React.ReactNode;
7
7
  rightElement?: React.ReactNode;
8
+ numberOfNetworks?: number;
9
+ assetId?: string;
10
+ shouldDisplayId?: boolean;
8
11
  };
9
12
  type AssetItemProps = AssetType & {
10
13
  onClick: (asset: AssetType) => void;
11
14
  };
12
- export declare const AssetItem: ({ name, ticker, id, onClick, leftElement, rightElement, }: AssetItemProps) => React.JSX.Element;
15
+ export declare const AssetItem: ({ name, ticker, numberOfNetworks, id, assetId, onClick, leftElement, rightElement, shouldDisplayId, }: AssetItemProps) => React.JSX.Element;
13
16
  export {};
14
17
  //# 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;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;AA6CF,eAAO,MAAM,SAAS,8DAOnB,cAAc,sBAqChB,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;AAc1B,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;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC,CAAC;AA6DF,eAAO,MAAM,SAAS,0GAUnB,cAAc,sBAkDhB,CAAC"}
package/lib/pre-ldls/components/AssetItem/AssetItem.js CHANGED
@@ -3,6 +3,14 @@ import styled from "styled-components";
3
3
  import { withTokens } from "../../libs";
4
4
  import { Text } from "../../../components";
5
5
  import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
6
+ const copyToClipboard = async (text) => {
7
+ try {
8
+ await navigator.clipboard.writeText(text);
9
+ }
10
+ catch (err) {
11
+ console.error("Failed to copy to clipboard:", err);
12
+ }
13
+ };
6
14
  const Wrapper = styled.div `
7
15
  ${withTokens("spacing-xxs", "margin-s", "radius-s", "colors-content-subdued-default-default", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
8
16
 
@@ -35,7 +43,17 @@ const LeftElementWrapper = styled.div `
35
43
  align-items: center;
36
44
  gap: 4px;
37
45
  `;
38
- export const AssetItem = ({ name, ticker, id, onClick, leftElement, rightElement, }) => {
46
+ const TagWrapper = styled.div `
47
+ ${withTokens("colors-surface-transparent-subdued-default", "colors-content-subdued-default-default", "radius-xs", "spacing-xxxs")}
48
+
49
+ padding: var(--spacing-xxxs);
50
+ border-radius: var(--radius-xs);
51
+ display: inline-flex;
52
+ background-color: var(--colors-surface-transparent-subdued-default);
53
+ flex-shrink: 0;
54
+ cursor: pointer;
55
+ `;
56
+ export const AssetItem = ({ name, ticker, numberOfNetworks, id, assetId, onClick, leftElement, rightElement, shouldDisplayId, }) => {
39
57
  return (React.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) },
40
58
  React.createElement(CryptoIcon, { size: "48px", ledgerId: id, ticker: ticker }),
41
59
  React.createElement(InfoWrapper, null,
@@ -47,7 +65,12 @@ export const AssetItem = ({ name, ticker, id, onClick, leftElement, rightElement
47
65
  } }, name),
48
66
  React.createElement(LeftElementWrapper, null,
49
67
  React.createElement(Text, { "data-testid": `asset-item-ticker-${ticker}`, fontSize: "12px", lineHeight: "16px", variant: "bodyLineHeight", fontWeight: "medium", color: "var(--colors-content-subdued-default-default)" }, ticker),
50
- leftElement)),
68
+ leftElement,
69
+ shouldDisplayId && assetId ? (React.createElement(TagWrapper, { onClick: e => {
70
+ e.stopPropagation();
71
+ copyToClipboard(assetId);
72
+ } },
73
+ React.createElement(Text, { color: "var(--colors-content-subdued-default-default)", fontSize: "12px" }, `${assetId} (${numberOfNetworks} networks)`))) : null)),
51
74
  rightElement));
52
75
  };
53
76
  //# 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;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;;;;;;;;CAQ7B,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,mBACU,mBAAmB,IAAI,EAAE,EACtC,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,mBACU,qBAAqB,MAAM,EAAE,EAC1C,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"}
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;AAEtD,MAAM,eAAe,GAAG,KAAK,EAAE,IAAY,EAAE,EAAE;IAC7C,IAAI,CAAC;QACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,GAAG,CAAC,CAAC;IACrD,CAAC;AACH,CAAC,CAAC;AAiBF,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;;;;;;;;CAQ7B,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;IACzB,UAAU,CACV,4CAA4C,EAC5C,wCAAwC,EACxC,WAAW,EACX,cAAc,CACf;;;;;;;;CAQF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,MAAM,EACN,gBAAgB,EAChB,EAAE,EACF,OAAO,EACP,OAAO,EACP,WAAW,EACX,YAAY,EACZ,eAAe,GACA,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,mBACU,mBAAmB,IAAI,EAAE,EACtC,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,mBACU,qBAAqB,MAAM,EAAE,EAC1C,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;gBACX,eAAe,IAAI,OAAO,CAAC,CAAC,CAAC,CAC5B,oBAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE;wBACX,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,eAAe,CAAC,OAAO,CAAC,CAAC;oBAC3B,CAAC;oBAED,oBAAC,IAAI,IACH,KAAK,EAAC,+CAA+C,EACrD,QAAQ,EAAC,MAAM,IACf,GAAG,OAAO,KAAK,gBAAgB,YAAY,CAAQ,CAC1C,CACd,CAAC,CAAC,CAAC,IAAI,CACW,CACT;QACb,YAAY,CACL,CACX,CAAC;AACJ,CAAC,CAAC"}
package/lib/pre-ldls/components/AssetList/AssetList.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from "react";
2
2
  import { AssetType } from "../AssetItem/AssetItem";
3
- export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }: {
3
+ export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, isDebuggingDuplicates, }: {
4
4
  assets: AssetType[];
5
5
  onClick: (asset: AssetType) => void;
6
6
  onVisibleItemsScrollEnd?: (() => void) | undefined;
7
7
  scrollToTop?: boolean | undefined;
8
8
  hasNextPage?: boolean | undefined;
9
+ isDebuggingDuplicates?: boolean | undefined;
9
10
  }) => React.JSX.Element;
10
11
  //# sourceMappingURL=AssetList.d.ts.map
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;;;uBAmBrC,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;YAQZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;;;uBAsBrC,CAAC"}
package/lib/pre-ldls/components/AssetList/AssetList.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { useCallback } from "react";
2
2
  import { AssetItem } from "../AssetItem/AssetItem";
3
3
  import { VirtualList } from "../VirtualList/VirtualList";
4
- export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }) => {
5
- const renderAssetItem = useCallback((props) => React.createElement(AssetItem, { ...props, onClick: onClick }), [onClick]);
4
+ export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, isDebuggingDuplicates, }) => {
5
+ const renderAssetItem = useCallback((props) => (React.createElement(AssetItem, { ...props, shouldDisplayId: isDebuggingDuplicates, onClick: onClick })), [onClick, isDebuggingDuplicates]);
6
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,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"}
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,EACX,qBAAqB,GAQtB,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,KAAgB,EAAE,EAAE,CAAC,CACpB,oBAAC,SAAS,OAAK,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,OAAO,EAAE,OAAO,GAAI,CACnF,EACD,CAAC,OAAO,EAAE,qBAAqB,CAAC,CACjC,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/Search/Search.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAChD,KAAK,KAAK,GAAG,QAAQ,CACnB,UAAU,GAAG;IACX,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,iBAAiB,EACjB,YAAkB,EAClB,QAAQ,EACR,SAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,qBA0CP"}
1
+ {"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAgBvE,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAChD,KAAK,KAAK,GAAG,QAAQ,CACnB,UAAU,GAAG;IACX,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,iBAAiB,EACjB,YAAkB,EAClB,QAAQ,EACR,SAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,qBA4CP"}
package/lib/pre-ldls/components/Search/Search.js CHANGED
@@ -2,6 +2,16 @@ import React, { useEffect, useMemo, useRef } from "react";
2
2
  import { Icons } from "../../../assets";
3
3
  import { useDebouncedCallback } from "../../hooks";
4
4
  import { Input } from "..";
5
+ import styled from "styled-components";
6
+ import { withTokens } from "../../libs";
7
+ const Wrapper = styled.div `
8
+ ${withTokens("colors-border-active-default", "radius-s")}
9
+
10
+ :focus-within {
11
+ box-shadow: inset 0 0 0 2px var(--colors-border-active-default);
12
+ }
13
+ border-radius: var(--radius-s, 8px);
14
+ `;
5
15
  export function Search({ onDebouncedChange, debounceTime = 500, onChange, autoFocus = true, ...props }) {
6
16
  const initialValue = props.value ?? props.defaultValue ?? "";
7
17
  const prevValue = useRef(String(initialValue));
@@ -31,6 +41,7 @@ export function Search({ onDebouncedChange, debounceTime = 500, onChange, autoFo
31
41
  handleDebouncedChange?.(event);
32
42
  };
33
43
  }, [handleDebouncedChange, onChange]);
34
- return (React.createElement(Input, { ...props, ref: searchInputRef, icon: React.createElement(Icons.Search, { size: "S" }), onChange: handleChange }));
44
+ return (React.createElement(Wrapper, null,
45
+ React.createElement(Input, { ...props, ref: searchInputRef, icon: React.createElement(Icons.Search, { size: "S" }), onChange: handleChange })));
35
46
  }
36
47
  //# sourceMappingURL=Search.js.map
package/lib/pre-ldls/components/Search/Search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAW3B,MAAM,UAAU,MAAM,CAAC,EACrB,iBAAiB,EACjB,YAAY,GAAG,GAAG,EAClB,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EACF;IACN,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;IAC7D,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YACxC,uCAAuC;YACvC,UAAU,CAAC,GAAG,EAAE;gBACd,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YACzD,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,qBAAqB,GAAG,oBAAoB,CAChD,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAC/B,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACnC,iBAAiB,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;YAC9C,SAAS,CAAC,OAAO,GAAG,OAAO,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,EACvB,YAAY,CACb,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,qBAAqB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAChD,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;YAClB,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,oBAAC,KAAK,OACA,KAAK,EACT,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,oBAAC,KAAK,CAAC,MAAM,IAAC,IAAI,EAAC,GAAG,GAAG,EAC/B,QAAQ,EAAE,YAAY,GACtB,CACH,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAC3B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CAAC,8BAA8B,EAAE,UAAU,CAAC;;;;;;CAMzD,CAAC;AAWF,MAAM,UAAU,MAAM,CAAC,EACrB,iBAAiB,EACjB,YAAY,GAAG,GAAG,EAClB,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EACF;IACN,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;IAC7D,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YACxC,uCAAuC;YACvC,UAAU,CAAC,GAAG,EAAE;gBACd,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YACzD,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,qBAAqB,GAAG,oBAAoB,CAChD,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAC/B,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACnC,iBAAiB,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;YAC9C,SAAS,CAAC,OAAO,GAAG,OAAO,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,EACvB,YAAY,CACb,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,qBAAqB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAChD,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;YAClB,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,KAAK,OACA,KAAK,EACT,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,oBAAC,KAAK,CAAC,MAAM,IAAC,IAAI,EAAC,GAAG,GAAG,EAC/B,QAAQ,EAAE,YAAY,GACtB,CACM,CACX,CAAC;AACJ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
- "version": "0.38.0-nightly.0",
3
+ "version": "0.38.0-nightly.2",
4
4
  "description": "Ledger Live - Desktop UI",
5
5
  "author": "Ledger Live Team <team-live@ledger.fr>",
6
6
  "repository": {