@ledgerhq/react-ui 0.38.0-nightly.1 → 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 (13) 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/pre-ldls/components/AssetItem/AssetItem.d.ts +4 -1
  6. package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts.map +1 -1
  7. package/lib/pre-ldls/components/AssetItem/AssetItem.js +25 -2
  8. package/lib/pre-ldls/components/AssetItem/AssetItem.js.map +1 -1
  9. package/lib/pre-ldls/components/AssetList/AssetList.d.ts +2 -1
  10. package/lib/pre-ldls/components/AssetList/AssetList.d.ts.map +1 -1
  11. package/lib/pre-ldls/components/AssetList/AssetList.js +2 -2
  12. package/lib/pre-ldls/components/AssetList/AssetList.js.map +1 -1
  13. 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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
- "version": "0.38.0-nightly.1",
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": {