@ledgerhq/react-ui 0.40.0-nightly.1 → 0.40.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.
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js +2 -1
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js +8 -8
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Address/Address.js +5 -2
- package/lib/cjs/pre-ldls/components/Address/Address.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Address/formatAddress.js +36 -0
- package/lib/cjs/pre-ldls/components/Address/formatAddress.js.map +7 -0
- package/lib/cjs/pre-ldls/components/Address/tests/formatAddress.test.js +53 -0
- package/lib/cjs/pre-ldls/components/Address/tests/formatAddress.test.js.map +7 -0
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.js +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.js.map +1 -1
- package/lib/pre-ldls/components/Address/Address.d.ts +2 -1
- package/lib/pre-ldls/components/Address/Address.d.ts.map +1 -1
- package/lib/pre-ldls/components/Address/Address.js +4 -2
- package/lib/pre-ldls/components/Address/Address.js.map +1 -1
- package/lib/pre-ldls/components/Address/formatAddress.d.ts +18 -0
- package/lib/pre-ldls/components/Address/formatAddress.d.ts.map +1 -0
- package/lib/pre-ldls/components/Address/formatAddress.js +19 -0
- package/lib/pre-ldls/components/Address/formatAddress.js.map +1 -0
- package/package.json +7 -3
|
@@ -171,7 +171,8 @@ const AccountItem = ({
|
|
|
171
171
|
cryptoId,
|
|
172
172
|
ticker,
|
|
173
173
|
parentId,
|
|
174
|
-
showIcon
|
|
174
|
+
showIcon,
|
|
175
|
+
isShortened: true
|
|
175
176
|
}
|
|
176
177
|
)), /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, fiatValue && /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "14px" }, fiatValue), balance && /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance)), rightElement && rightElement.type === "checkbox" && /* @__PURE__ */ import_react.default.createElement(import_components.Flex, { "data-testid": "right-element-checkbox", "aria-label": "Checkbox account item" }, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.Checkbox, { ...rightElement.checkbox, size: 20 })), rightElement && rightElement.type === "arrow" && /* @__PURE__ */ import_react.default.createElement(import_components.Flex, { "data-testid": "right-element-arrow-icon", "aria-label": "Arrow account item" }, /* @__PURE__ */ import_react.default.createElement(import_components.Icon, { name: "ChevronRight", size: 24 })), rightElement && rightElement.type === "edit" && /* @__PURE__ */ import_react.default.createElement(
|
|
177
178
|
IconButton,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../assets\";\nimport { Flex, Icon, Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport { Address } from \"../Address/Address\";\nimport type { CheckboxProps } from \"../Checkbox/Checkbox\";\nimport { Checkbox } from \"../Checkbox/Checkbox\";\nimport { Tag } from \"../Tag/Tag\";\n\nexport type Account = {\n address: string;\n balance?: string;\n cryptoId?: string;\n fiatValue?: string;\n id: string;\n name: string;\n parentId?: string;\n protocol?: string;\n ticker?: string;\n};\n\nexport type RightElementArrow = {\n type: \"arrow\";\n};\n\nexport type RightElementCheckbox = {\n type: \"checkbox\";\n checkbox: CheckboxProps;\n};\n\nexport type RightElementEdit = {\n type: \"edit\";\n onClick: () => void;\n};\n\nexport type RightElement = RightElementArrow | RightElementCheckbox | RightElementEdit;\n\nexport type AccountItemProps = {\n onClick?: () => void;\n account: Account;\n rightElement?: RightElement;\n showIcon?: boolean;\n backgroundColor?: string;\n};\n\nconst ICON_BUTTONS_SIZE = \"32px\";\n\n// TODO a proper IconButton component that handles hover and pressed states.\nconst IconButton = styled.button`\n ${withTokens(\"colors-content-default-default\")}\n\n all: unset;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ${ICON_BUTTONS_SIZE};\n width: ${ICON_BUTTONS_SIZE};\n`;\n\nconst Wrapper = styled.div<{ backgroundColor?: string; isClickable: boolean }>`\n ${withTokens(\n \"spacing-xxxs\",\n \"spacing-xxs\",\n \"spacing-xs\",\n \"margin-s\",\n \"radius-s\",\n \"radius-m\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n \"colors-content-subdued-default-default\",\n \"colors-surface-transparent-subdued-default\",\n )}\n\n display: flex;\n cursor: ${p => (p.isClickable ? \"pointer\" : \"default\")};\n justify-content: space-between;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n max-width: 100%;\n min-width: 200px;\n overflow: hidden;\n\n background-color: ${p => (p.backgroundColor ? p.backgroundColor : \"transparent\")};\n\n ${p =>\n p.isClickable\n ? `\n border-radius: var(--radius-m);\n padding: var(--margin-s);\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 : \"\"}\n`;\n\nconst ContentContainer = styled.div`\n align-items: center;\n display: flex;\n flex: 1;\n gap: var(--spacing-xs);\n justify-content: space-between;\n min-width: 0;\n overflow: hidden;\n width: 100%;\n`;\n\nconst AccountInfoContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 0;\n flex: 1;\n overflow: hidden;\n`;\n\nconst NameRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: var(--spacing-xxxs);\n min-width: 0;\n width: 100%;\n`;\n\nconst NameDiv = styled.div`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n flex: 1;\n max-width: fit-content;\n`;\n\nconst TagWrapper = styled.div`\n flex-shrink: 0;\n margin-left: var(--spacing-xxs);\n display: flex;\n flex: 1;\n max-width: fit-content;\n align-items: center;\n`;\n\nconst BalanceContainer = styled.div`\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n text-align: right;\n`;\n\nexport const AccountItem = ({\n onClick,\n account,\n rightElement,\n showIcon = true,\n backgroundColor,\n}: AccountItemProps) => {\n const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;\n\n return (\n <Wrapper backgroundColor={backgroundColor} isClickable={Boolean(onClick)} onClick={onClick}>\n <ContentContainer>\n <AccountInfoContainer>\n <NameRow>\n <NameDiv>\n <Text\n data-testid={`account-row-${name}`}\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n fontSize=\"14px\"\n lineHeight=\"20px\"\n title={name}\n style={{\n display: \"block\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {name}\n </Text>\n </NameDiv>\n {protocol && (\n <TagWrapper>\n <Tag textTransform=\"uppercase\">{protocol}</Tag>\n </TagWrapper>\n )}\n </NameRow>\n <Address\n address={address}\n cryptoId={cryptoId}\n ticker={ticker}\n parentId={parentId}\n showIcon={showIcon}\n />\n </AccountInfoContainer>\n <BalanceContainer>\n {fiatValue && <Text fontSize=\"14px\">{fiatValue}</Text>}\n {balance && (\n <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n {balance}\n </Text>\n )}\n </BalanceContainer>\n {rightElement && rightElement.type === \"checkbox\" && (\n <Flex data-testid=\"right-element-checkbox\" aria-label=\"Checkbox account item\">\n <Checkbox {...rightElement.checkbox} size={20} />\n </Flex>\n )}\n {rightElement && rightElement.type === \"arrow\" && (\n <Flex data-testid=\"right-element-arrow-icon\" aria-label=\"Arrow account item\">\n <Icon name=\"ChevronRight\" size={24} />\n </Flex>\n )}\n {rightElement && rightElement.type === \"edit\" && (\n <IconButton\n aria-label=\"Edit account item\"\n data-testid=\"right-element-edit-icon\"\n onClick={e => {\n e.stopPropagation();\n if (rightElement?.type === \"edit\") {\n rightElement.onClick();\n }\n }}\n >\n <Icons.PenEdit size=\"S\" color=\"var(--colors-content-default-default)\" />\n </IconButton>\n )}\n </ContentContainer>\n </Wrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,oBAAsB;AACtB,wBAAiC;AACjC,kBAA2B;AAC3B,qBAAwB;AAExB,sBAAyB;AACzB,iBAAoB;AAsCpB,MAAM,oBAAoB;AAG1B,MAAM,aAAa,yBAAAA,QAAO;AAAA,QACtB,wBAAW,gCAAgC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOpC,iBAAiB;AAAA,WAClB,iBAAiB;AAAA;AAG5B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA,YAGS,OAAM,EAAE,cAAc,YAAY,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBASlC,OAAM,EAAE,kBAAkB,EAAE,kBAAkB,aAAc;AAAA;AAAA,IAE9E,OACA,EAAE,cACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWA,EAAE;AAAA;AAGV,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhC,MAAM,uBAAuB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpC,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1B,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAwB;AACtB,QAAM,EAAE,MAAM,SAAS,WAAW,UAAU,SAAS,QAAQ,UAAU,SAAS,IAAI;AAEpF,SACE,6BAAAC,QAAA,cAAC,WAAQ,iBAAkC,aAAa,QAAQ,OAAO,GAAG,WACxE,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,4BACC,6BAAAA,QAAA,cAAC,eACC,6BAAAA,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,eAAe,IAAI;AAAA,MAChC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA,MACN,UAAS;AAAA,MACT,YAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cAAc;AAAA,MAChB;AAAA;AAAA,IAEC;AAAA,EACH,CACF,GACC,YACC,6BAAAA,QAAA,cAAC,kBACC,6BAAAA,QAAA,cAAC,kBAAI,eAAc,eAAa,QAAS,CAC3C,CAEJ,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../assets\";\nimport { Flex, Icon, Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport { Address } from \"../Address/Address\";\nimport type { CheckboxProps } from \"../Checkbox/Checkbox\";\nimport { Checkbox } from \"../Checkbox/Checkbox\";\nimport { Tag } from \"../Tag/Tag\";\n\nexport type Account = {\n address: string;\n balance?: string;\n cryptoId?: string;\n fiatValue?: string;\n id: string;\n name: string;\n parentId?: string;\n protocol?: string;\n ticker?: string;\n};\n\nexport type RightElementArrow = {\n type: \"arrow\";\n};\n\nexport type RightElementCheckbox = {\n type: \"checkbox\";\n checkbox: CheckboxProps;\n};\n\nexport type RightElementEdit = {\n type: \"edit\";\n onClick: () => void;\n};\n\nexport type RightElement = RightElementArrow | RightElementCheckbox | RightElementEdit;\n\nexport type AccountItemProps = {\n onClick?: () => void;\n account: Account;\n rightElement?: RightElement;\n showIcon?: boolean;\n backgroundColor?: string;\n};\n\nconst ICON_BUTTONS_SIZE = \"32px\";\n\n// TODO a proper IconButton component that handles hover and pressed states.\nconst IconButton = styled.button`\n ${withTokens(\"colors-content-default-default\")}\n\n all: unset;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ${ICON_BUTTONS_SIZE};\n width: ${ICON_BUTTONS_SIZE};\n`;\n\nconst Wrapper = styled.div<{ backgroundColor?: string; isClickable: boolean }>`\n ${withTokens(\n \"spacing-xxxs\",\n \"spacing-xxs\",\n \"spacing-xs\",\n \"margin-s\",\n \"radius-s\",\n \"radius-m\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n \"colors-content-subdued-default-default\",\n \"colors-surface-transparent-subdued-default\",\n )}\n\n display: flex;\n cursor: ${p => (p.isClickable ? \"pointer\" : \"default\")};\n justify-content: space-between;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n max-width: 100%;\n min-width: 200px;\n overflow: hidden;\n\n background-color: ${p => (p.backgroundColor ? p.backgroundColor : \"transparent\")};\n\n ${p =>\n p.isClickable\n ? `\n border-radius: var(--radius-m);\n padding: var(--margin-s);\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 : \"\"}\n`;\n\nconst ContentContainer = styled.div`\n align-items: center;\n display: flex;\n flex: 1;\n gap: var(--spacing-xs);\n justify-content: space-between;\n min-width: 0;\n overflow: hidden;\n width: 100%;\n`;\n\nconst AccountInfoContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 0;\n flex: 1;\n overflow: hidden;\n`;\n\nconst NameRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: var(--spacing-xxxs);\n min-width: 0;\n width: 100%;\n`;\n\nconst NameDiv = styled.div`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n flex: 1;\n max-width: fit-content;\n`;\n\nconst TagWrapper = styled.div`\n flex-shrink: 0;\n margin-left: var(--spacing-xxs);\n display: flex;\n flex: 1;\n max-width: fit-content;\n align-items: center;\n`;\n\nconst BalanceContainer = styled.div`\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n text-align: right;\n`;\n\nexport const AccountItem = ({\n onClick,\n account,\n rightElement,\n showIcon = true,\n backgroundColor,\n}: AccountItemProps) => {\n const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;\n\n return (\n <Wrapper backgroundColor={backgroundColor} isClickable={Boolean(onClick)} onClick={onClick}>\n <ContentContainer>\n <AccountInfoContainer>\n <NameRow>\n <NameDiv>\n <Text\n data-testid={`account-row-${name}`}\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n fontSize=\"14px\"\n lineHeight=\"20px\"\n title={name}\n style={{\n display: \"block\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {name}\n </Text>\n </NameDiv>\n {protocol && (\n <TagWrapper>\n <Tag textTransform=\"uppercase\">{protocol}</Tag>\n </TagWrapper>\n )}\n </NameRow>\n <Address\n address={address}\n cryptoId={cryptoId}\n ticker={ticker}\n parentId={parentId}\n showIcon={showIcon}\n isShortened\n />\n </AccountInfoContainer>\n <BalanceContainer>\n {fiatValue && <Text fontSize=\"14px\">{fiatValue}</Text>}\n {balance && (\n <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n {balance}\n </Text>\n )}\n </BalanceContainer>\n {rightElement && rightElement.type === \"checkbox\" && (\n <Flex data-testid=\"right-element-checkbox\" aria-label=\"Checkbox account item\">\n <Checkbox {...rightElement.checkbox} size={20} />\n </Flex>\n )}\n {rightElement && rightElement.type === \"arrow\" && (\n <Flex data-testid=\"right-element-arrow-icon\" aria-label=\"Arrow account item\">\n <Icon name=\"ChevronRight\" size={24} />\n </Flex>\n )}\n {rightElement && rightElement.type === \"edit\" && (\n <IconButton\n aria-label=\"Edit account item\"\n data-testid=\"right-element-edit-icon\"\n onClick={e => {\n e.stopPropagation();\n if (rightElement?.type === \"edit\") {\n rightElement.onClick();\n }\n }}\n >\n <Icons.PenEdit size=\"S\" color=\"var(--colors-content-default-default)\" />\n </IconButton>\n )}\n </ContentContainer>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -38,7 +38,7 @@ const meta = {
|
|
|
38
38
|
args: {
|
|
39
39
|
onClick,
|
|
40
40
|
account: {
|
|
41
|
-
address: "
|
|
41
|
+
address: "n4A9323232Zgty",
|
|
42
42
|
balance: "0.118 ETH",
|
|
43
43
|
cryptoId: "bitcoin",
|
|
44
44
|
fiatValue: "$5,969.83",
|
|
@@ -54,7 +54,7 @@ const TestAccount = {
|
|
|
54
54
|
args: {
|
|
55
55
|
onClick,
|
|
56
56
|
account: {
|
|
57
|
-
address: "
|
|
57
|
+
address: "n4A9323232Zgty",
|
|
58
58
|
balance: "0.118 BTC",
|
|
59
59
|
cryptoId: "bitcoin",
|
|
60
60
|
fiatValue: "$5,969.83",
|
|
@@ -68,7 +68,7 @@ const TestAccount = {
|
|
|
68
68
|
const canvas = (0, import_test.within)(canvasElement);
|
|
69
69
|
const name = canvas.getByText("Main BTC");
|
|
70
70
|
const protocol = canvas.getByTestId("tag");
|
|
71
|
-
const address = canvas.getByText("
|
|
71
|
+
const address = canvas.getByText("n4A93...2Zgty");
|
|
72
72
|
const addressIcon = canvas.getByRole("img");
|
|
73
73
|
const fiatValue = canvas.getByText("$5,969.83");
|
|
74
74
|
const balance = canvas.getByText("0.118 BTC");
|
|
@@ -85,7 +85,7 @@ const TestWithoutProtocol = {
|
|
|
85
85
|
args: {
|
|
86
86
|
onClick,
|
|
87
87
|
account: {
|
|
88
|
-
address: "
|
|
88
|
+
address: "n4A9323232Zgty",
|
|
89
89
|
balance: "0.118 BTC",
|
|
90
90
|
cryptoId: "bitcoin",
|
|
91
91
|
fiatValue: "$5,969.83",
|
|
@@ -104,7 +104,7 @@ const TestWithoutAddressIcon = {
|
|
|
104
104
|
args: {
|
|
105
105
|
onClick,
|
|
106
106
|
account: {
|
|
107
|
-
address: "
|
|
107
|
+
address: "n4A9323232Zgty",
|
|
108
108
|
balance: "0.118 BTC",
|
|
109
109
|
fiatValue: "$5,969.83",
|
|
110
110
|
id: "bitcoin",
|
|
@@ -121,7 +121,7 @@ const TestWithoutAddressIcon = {
|
|
|
121
121
|
const TestWithCheckbox = {
|
|
122
122
|
args: {
|
|
123
123
|
account: {
|
|
124
|
-
address: "
|
|
124
|
+
address: "n4A9323232Zgty",
|
|
125
125
|
balance: "0.118",
|
|
126
126
|
cryptoId: "bitcoin",
|
|
127
127
|
fiatValue: "$5,969.83",
|
|
@@ -149,7 +149,7 @@ const TestWithCheckbox = {
|
|
|
149
149
|
const TestWithArrow = {
|
|
150
150
|
args: {
|
|
151
151
|
account: {
|
|
152
|
-
address: "
|
|
152
|
+
address: "n4A9323232Zgty",
|
|
153
153
|
cryptoId: "bitcoin",
|
|
154
154
|
fiatValue: "$5,969.83",
|
|
155
155
|
id: "12345",
|
|
@@ -169,7 +169,7 @@ const TestWithArrow = {
|
|
|
169
169
|
const TestWithEdit = {
|
|
170
170
|
args: {
|
|
171
171
|
account: {
|
|
172
|
-
address: "
|
|
172
|
+
address: "n4A9323232Zgty",
|
|
173
173
|
cryptoId: "bitcoin",
|
|
174
174
|
fiatValue: "$5,969.83",
|
|
175
175
|
id: "12345",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, within } from \"@storybook/test\";\nimport { AccountItem } from \"./AccountItem\";\n\nconst onClick = fn();\n\nconst meta: Meta<typeof AccountItem> = {\n component: AccountItem,\n title: \"PreLdls/Components/AccountItem\",\n tags: [\"autodocs\"],\n args: {\n onClick: onClick,\n account: {\n address: \"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAmC;AACnC,yBAA4B;AAE5B,MAAM,cAAU,gBAAG;AAEnB,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,UAAU;AACxC,UAAM,WAAW,OAAO,YAAY,KAAK;AACzC,UAAM,UAAU,OAAO,UAAU,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, within } from \"@storybook/test\";\nimport { AccountItem } from \"./AccountItem\";\n\nconst onClick = fn();\n\nconst meta: Meta<typeof AccountItem> = {\n component: AccountItem,\n title: \"PreLdls/Components/AccountItem\",\n tags: [\"autodocs\"],\n args: {\n onClick: onClick,\n account: {\n address: \"n4A9323232Zgty\",\n balance: \"0.118 ETH\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"12345\",\n name: \"Main BTC\",\n ticker: \"btc\",\n },\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AccountItem>;\n\nexport const Default: Story = {};\n\nexport const TestAccount: Story = {\n args: {\n onClick: onClick,\n account: {\n address: \"n4A9323232Zgty\",\n balance: \"0.118 BTC\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"12345\",\n name: \"Main BTC\",\n protocol: \"Native Segwit\",\n ticker: \"btc\",\n },\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"Main BTC\");\n const protocol = canvas.getByTestId(\"tag\");\n const address = canvas.getByText(\"n4A93...2Zgty\");\n const addressIcon = canvas.getByRole(\"img\");\n const fiatValue = canvas.getByText(\"$5,969.83\");\n const balance = canvas.getByText(\"0.118 BTC\");\n\n await expect(name).toBeInTheDocument();\n await expect(protocol).toBeInTheDocument();\n await expect(protocol).toHaveTextContent(\"Native Segwit\");\n await expect(address).toBeInTheDocument();\n await expect(addressIcon).toBeInTheDocument();\n await expect(fiatValue).toBeInTheDocument();\n await expect(balance).toBeInTheDocument();\n },\n};\n\nexport const TestWithoutProtocol: Story = {\n args: {\n onClick: onClick,\n account: {\n address: \"n4A9323232Zgty\",\n balance: \"0.118 BTC\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"21345\",\n name: \"Main BTC\",\n ticker: \"btc\",\n },\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const protocol = canvas.queryByTestId(\"tag\");\n\n await expect(protocol).not.toBeInTheDocument();\n },\n};\n\nexport const TestWithoutAddressIcon: Story = {\n args: {\n onClick: onClick,\n account: {\n address: \"n4A9323232Zgty\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n id: \"bitcoin\",\n name: \"Main BTC\",\n },\n showIcon: false,\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const addressIcon = canvas.queryByRole(\"img\");\n\n await expect(addressIcon).not.toBeInTheDocument();\n },\n};\n\nexport const TestWithCheckbox: Story = {\n args: {\n account: {\n address: \"n4A9323232Zgty\",\n balance: \"0.118\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"12345\",\n name: \"Main BTC\",\n ticker: \"btc\",\n },\n onClick,\n rightElement: {\n type: \"checkbox\",\n checkbox: {\n isChecked: false,\n name: \"checkbox\",\n onChange: () => {},\n },\n },\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const arrowIcon = canvas.getByTestId(\"right-element-checkbox\");\n\n await expect(arrowIcon).toBeInTheDocument();\n },\n};\n\nexport const TestWithArrow: Story = {\n args: {\n account: {\n address: \"n4A9323232Zgty\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"12345\",\n name: \"Main BTC\",\n ticker: \"btc\",\n },\n rightElement: {\n type: \"arrow\",\n },\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const arrowIcon = canvas.getByTestId(\"right-element-arrow-icon\");\n\n await expect(arrowIcon).toBeInTheDocument();\n },\n};\n\nexport const TestWithEdit: Story = {\n args: {\n account: {\n address: \"n4A9323232Zgty\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"12345\",\n name: \"Main BTC\",\n ticker: \"btc\",\n },\n onClick: undefined,\n rightElement: {\n type: \"edit\",\n onClick,\n },\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const arrowIcon = canvas.getByTestId(\"right-element-edit-icon\");\n\n await expect(arrowIcon).toBeInTheDocument();\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,6 +36,7 @@ var import_components = require("../../../components");
|
|
|
36
36
|
var import_styled_components = __toESM(require("styled-components"));
|
|
37
37
|
var import_libs = require("../../libs");
|
|
38
38
|
var import_CryptoIcon = require("../CryptoIcon/CryptoIcon");
|
|
39
|
+
var import_formatAddress = require("./formatAddress");
|
|
39
40
|
const Wrapper = import_styled_components.default.div`
|
|
40
41
|
${(0, import_libs.withTokens)("spacing-xxxs", "colors-content-subdued-default-default")}
|
|
41
42
|
|
|
@@ -48,8 +49,10 @@ const Address = ({
|
|
|
48
49
|
showIcon,
|
|
49
50
|
cryptoId,
|
|
50
51
|
ticker,
|
|
51
|
-
parentId
|
|
52
|
+
parentId,
|
|
53
|
+
isShortened = false
|
|
52
54
|
}) => {
|
|
55
|
+
const formattedAddress = isShortened ? (0, import_formatAddress.formatAddress)(address) : address;
|
|
53
56
|
return /* @__PURE__ */ import_react.default.createElement(Wrapper, null, /* @__PURE__ */ import_react.default.createElement(
|
|
54
57
|
import_components.Text,
|
|
55
58
|
{
|
|
@@ -57,7 +60,7 @@ const Address = ({
|
|
|
57
60
|
fontSize: "12px",
|
|
58
61
|
color: "var(--colors-content-subdued-default-default)"
|
|
59
62
|
},
|
|
60
|
-
|
|
63
|
+
formattedAddress
|
|
61
64
|
), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, network: parentId, ticker, size: "20px" }));
|
|
62
65
|
};
|
|
63
66
|
//# 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 parentId,\n}: {\n address: string;\n showIcon: boolean;\n cryptoId?: string;\n ticker?: string;\n parentId?: 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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAA2B;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\nimport { formatAddress } from \"./formatAddress\";\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 parentId,\n isShortened = false,\n}: {\n address: string;\n showIcon: boolean;\n cryptoId?: string;\n ticker?: string;\n parentId?: string;\n isShortened?: boolean;\n}) => {\n const formattedAddress = isShortened ? formatAddress(address) : address;\n return (\n <Wrapper>\n <Text\n marginRight=\"var(--spacing-xxxs)\"\n fontSize=\"12px\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {formattedAddress}\n </Text>\n {showIcon && (\n <CryptoIcon ledgerId={cryptoId} network={parentId} ticker={ticker} size=\"20px\" />\n )}\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAA2B;AAC3B,2BAA8B;AAE9B,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;AAAA,EACA;AAAA,EACA,cAAc;AAChB,MAOM;AACJ,QAAM,mBAAmB,kBAAc,oCAAc,OAAO,IAAI;AAChE,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,YACC,6BAAAA,QAAA,cAAC,gCAAW,UAAU,UAAU,SAAS,UAAU,QAAgB,MAAK,QAAO,CAEnF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var formatAddress_exports = {};
|
|
20
|
+
__export(formatAddress_exports, {
|
|
21
|
+
formatAddress: () => formatAddress
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(formatAddress_exports);
|
|
24
|
+
const formatAddress = (address, options = {}) => {
|
|
25
|
+
const {
|
|
26
|
+
prefixLength = 5,
|
|
27
|
+
suffixLength = 5,
|
|
28
|
+
separator = "...",
|
|
29
|
+
threshold = prefixLength + separator.length + suffixLength
|
|
30
|
+
} = options;
|
|
31
|
+
if (!address || address.length <= threshold) {
|
|
32
|
+
return address;
|
|
33
|
+
}
|
|
34
|
+
return `${address.slice(0, prefixLength)}${separator}${address.slice(-suffixLength)}`;
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=formatAddress.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../src/pre-ldls/components/Address/formatAddress.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Format an address by showing only parts of it\n *\n * @param address - The address to format\n * @param options - Configuration options\n * @param options.prefixLength - Number of characters to show at the start (default: 5)\n * @param options.suffixLength - Number of characters to show at the end (default: 5)\n * @param options.separator - String to use as separator (default: \"...\")\n * @param options.threshold - Minimum length before truncating (default: calculated from other params)\n * @returns Formatted address string\n */\nexport const formatAddress = (\n address: string,\n options: {\n prefixLength?: number;\n suffixLength?: number;\n separator?: string;\n threshold?: number;\n } = {},\n) => {\n const {\n prefixLength = 5,\n suffixLength = 5,\n separator = \"...\",\n threshold = prefixLength + separator.length + suffixLength,\n } = options;\n\n if (!address || address.length <= threshold) {\n return address;\n }\n\n return `${address.slice(0, prefixLength)}${separator}${address.slice(-suffixLength)}`;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,MAAM,gBAAgB,CAC3B,SACA,UAKI,CAAC,MACF;AACH,QAAM;AAAA,IACJ,eAAe;AAAA,IACf,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,YAAY,eAAe,UAAU,SAAS;AAAA,EAChD,IAAI;AAEJ,MAAI,CAAC,WAAW,QAAQ,UAAU,WAAW;AAC3C,WAAO;AAAA,EACT;AAEA,SAAO,GAAG,QAAQ,MAAM,GAAG,YAAY,CAAC,GAAG,SAAS,GAAG,QAAQ,MAAM,CAAC,YAAY,CAAC;AACrF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var import_formatAddress = require("../formatAddress");
|
|
3
|
+
describe("formatAddress", () => {
|
|
4
|
+
it("should format address correctly with default options", () => {
|
|
5
|
+
const address = "1234567890abcdef1234567890abcdef12345678";
|
|
6
|
+
const formattedAddress = (0, import_formatAddress.formatAddress)(address);
|
|
7
|
+
expect(formattedAddress).toBe("12345...45678");
|
|
8
|
+
});
|
|
9
|
+
it("should format address correctly with custom options", () => {
|
|
10
|
+
const address = "1234567890abcdef1234567890abcdef12345678bbbbbbbbbb";
|
|
11
|
+
const formattedAddress = (0, import_formatAddress.formatAddress)(address, {
|
|
12
|
+
prefixLength: 8,
|
|
13
|
+
suffixLength: 8,
|
|
14
|
+
separator: "---"
|
|
15
|
+
});
|
|
16
|
+
expect(formattedAddress).toBe("12345678---bbbbbbbb");
|
|
17
|
+
});
|
|
18
|
+
it("should return the original address if it's shorter than the threshold", () => {
|
|
19
|
+
const address = "12345";
|
|
20
|
+
const formattedAddress = (0, import_formatAddress.formatAddress)(address);
|
|
21
|
+
expect(formattedAddress).toBe(address);
|
|
22
|
+
});
|
|
23
|
+
it("should return an empty string if the address is empty", () => {
|
|
24
|
+
const formattedAddress = (0, import_formatAddress.formatAddress)("");
|
|
25
|
+
expect(formattedAddress).toBe("");
|
|
26
|
+
});
|
|
27
|
+
it("should return all the address if threshold is greater to address lenght", () => {
|
|
28
|
+
const address = "123456789";
|
|
29
|
+
const formattedAddress = (0, import_formatAddress.formatAddress)(address, {
|
|
30
|
+
threshold: 10
|
|
31
|
+
});
|
|
32
|
+
expect(formattedAddress).toBe("123456789");
|
|
33
|
+
});
|
|
34
|
+
it("should handle addresses with only suffix length", () => {
|
|
35
|
+
const address = "1234567890abcdef";
|
|
36
|
+
const formattedAddress = (0, import_formatAddress.formatAddress)(address, {
|
|
37
|
+
prefixLength: 0,
|
|
38
|
+
suffixLength: 10,
|
|
39
|
+
separator: "---"
|
|
40
|
+
});
|
|
41
|
+
expect(formattedAddress).toBe("---7890abcdef");
|
|
42
|
+
});
|
|
43
|
+
it("should handle addresses with no separator", () => {
|
|
44
|
+
const address = "1234567890abcdef1234567890abcdef";
|
|
45
|
+
const formattedAddress = (0, import_formatAddress.formatAddress)(address, {
|
|
46
|
+
prefixLength: 5,
|
|
47
|
+
suffixLength: 5,
|
|
48
|
+
separator: ""
|
|
49
|
+
});
|
|
50
|
+
expect(formattedAddress).toBe("12345bcdef");
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
//# sourceMappingURL=formatAddress.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../src/pre-ldls/components/Address/tests/formatAddress.test.ts"],
|
|
4
|
+
"sourcesContent": ["import { formatAddress } from \"../formatAddress\";\n\ndescribe(\"formatAddress\", () => {\n it(\"should format address correctly with default options\", () => {\n const address = \"1234567890abcdef1234567890abcdef12345678\";\n const formattedAddress = formatAddress(address);\n expect(formattedAddress).toBe(\"12345...45678\");\n });\n\n it(\"should format address correctly with custom options\", () => {\n const address = \"1234567890abcdef1234567890abcdef12345678bbbbbbbbbb\";\n const formattedAddress = formatAddress(address, {\n prefixLength: 8,\n suffixLength: 8,\n separator: \"---\",\n });\n expect(formattedAddress).toBe(\"12345678---bbbbbbbb\");\n });\n\n it(\"should return the original address if it's shorter than the threshold\", () => {\n const address = \"12345\";\n const formattedAddress = formatAddress(address);\n expect(formattedAddress).toBe(address);\n });\n\n it(\"should return an empty string if the address is empty\", () => {\n const formattedAddress = formatAddress(\"\");\n expect(formattedAddress).toBe(\"\");\n });\n\n it(\"should return all the address if threshold is greater to address lenght\", () => {\n const address = \"123456789\";\n const formattedAddress = formatAddress(address, {\n threshold: 10,\n });\n expect(formattedAddress).toBe(\"123456789\");\n });\n\n it(\"should handle addresses with only suffix length\", () => {\n const address = \"1234567890abcdef\";\n const formattedAddress = formatAddress(address, {\n prefixLength: 0,\n suffixLength: 10,\n separator: \"---\",\n });\n expect(formattedAddress).toBe(\"---7890abcdef\");\n });\n\n it(\"should handle addresses with no separator\", () => {\n const address = \"1234567890abcdef1234567890abcdef\";\n const formattedAddress = formatAddress(address, {\n prefixLength: 5,\n suffixLength: 5,\n separator: \"\",\n });\n expect(formattedAddress).toBe(\"12345bcdef\");\n });\n});\n"],
|
|
5
|
+
"mappings": ";AAAA,2BAA8B;AAE9B,SAAS,iBAAiB,MAAM;AAC9B,KAAG,wDAAwD,MAAM;AAC/D,UAAM,UAAU;AAChB,UAAM,uBAAmB,oCAAc,OAAO;AAC9C,WAAO,gBAAgB,EAAE,KAAK,eAAe;AAAA,EAC/C,CAAC;AAED,KAAG,uDAAuD,MAAM;AAC9D,UAAM,UAAU;AAChB,UAAM,uBAAmB,oCAAc,SAAS;AAAA,MAC9C,cAAc;AAAA,MACd,cAAc;AAAA,MACd,WAAW;AAAA,IACb,CAAC;AACD,WAAO,gBAAgB,EAAE,KAAK,qBAAqB;AAAA,EACrD,CAAC;AAED,KAAG,yEAAyE,MAAM;AAChF,UAAM,UAAU;AAChB,UAAM,uBAAmB,oCAAc,OAAO;AAC9C,WAAO,gBAAgB,EAAE,KAAK,OAAO;AAAA,EACvC,CAAC;AAED,KAAG,yDAAyD,MAAM;AAChE,UAAM,uBAAmB,oCAAc,EAAE;AACzC,WAAO,gBAAgB,EAAE,KAAK,EAAE;AAAA,EAClC,CAAC;AAED,KAAG,2EAA2E,MAAM;AAClF,UAAM,UAAU;AAChB,UAAM,uBAAmB,oCAAc,SAAS;AAAA,MAC9C,WAAW;AAAA,IACb,CAAC;AACD,WAAO,gBAAgB,EAAE,KAAK,WAAW;AAAA,EAC3C,CAAC;AAED,KAAG,mDAAmD,MAAM;AAC1D,UAAM,UAAU;AAChB,UAAM,uBAAmB,oCAAc,SAAS;AAAA,MAC9C,cAAc;AAAA,MACd,cAAc;AAAA,MACd,WAAW;AAAA,IACb,CAAC;AACD,WAAO,gBAAgB,EAAE,KAAK,eAAe;AAAA,EAC/C,CAAC;AAED,KAAG,6CAA6C,MAAM;AACpD,UAAM,UAAU;AAChB,UAAM,uBAAmB,oCAAc,SAAS;AAAA,MAC9C,cAAc;AAAA,MACd,cAAc;AAAA,MACd,WAAW;AAAA,IACb,CAAC;AACD,WAAO,gBAAgB,EAAE,KAAK,YAAY;AAAA,EAC5C,CAAC;AACH,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAI1D,MAAM,MAAM,OAAO,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,iBAAiB,GAAG,oBAAoB,GAAG,gBAAgB,CAAC;AAEvF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAkHF,eAAO,MAAM,WAAW,mEAMrB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAI1D,MAAM,MAAM,OAAO,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,iBAAiB,GAAG,oBAAoB,GAAG,gBAAgB,CAAC;AAEvF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAkHF,eAAO,MAAM,WAAW,mEAMrB,gBAAgB,sBA6ElB,CAAC"}
|
|
@@ -111,7 +111,7 @@ export const AccountItem = ({ onClick, account, rightElement, showIcon = true, b
|
|
|
111
111
|
} }, name)),
|
|
112
112
|
protocol && (React.createElement(TagWrapper, null,
|
|
113
113
|
React.createElement(Tag, { textTransform: "uppercase" }, protocol)))),
|
|
114
|
-
React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, parentId: parentId, showIcon: showIcon })),
|
|
114
|
+
React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, parentId: parentId, showIcon: showIcon, isShortened: true })),
|
|
115
115
|
React.createElement(BalanceContainer, null,
|
|
116
116
|
fiatValue && React.createElement(Text, { fontSize: "14px" }, fiatValue),
|
|
117
117
|
balance && (React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAsCjC,MAAM,iBAAiB,GAAG,MAAM,CAAC;AAEjC,4EAA4E;AAC5E,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,UAAU,CAAC,gCAAgC,CAAC;;;;;;;YAOpC,iBAAiB;WAClB,iBAAiB;CAC3B,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAoD;IAC1E,UAAU,CACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,EACpC,wCAAwC,EACxC,4CAA4C,CAC7C;;;YAGS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;;;sBASlC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;;IAE9E,CAAC,CAAC,EAAE,CACJ,CAAC,CAAC,WAAW;IACX,CAAC,CAAC;;;;;;;;;;GAUL;IACG,CAAC,CAAC,EAAE;CACT,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASlC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOtC,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzB,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzB,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,OAAO,EACP,YAAY,EACZ,QAAQ,GAAG,IAAI,EACf,eAAe,GACE,EAAE,EAAE;IACrB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAE5F,OAAO,CACL,oBAAC,OAAO,IAAC,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO;QACxF,oBAAC,gBAAgB;YACf,oBAAC,oBAAoB;gBACnB,oBAAC,OAAO;oBACN,oBAAC,OAAO;wBACN,oBAAC,IAAI,mBACU,eAAe,IAAI,EAAE,EAClC,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE;gCACL,OAAO,EAAE,OAAO;gCAChB,UAAU,EAAE,QAAQ;gCACpB,QAAQ,EAAE,QAAQ;gCAClB,YAAY,EAAE,UAAU;6BACzB,IAEA,IAAI,CACA,CACC;oBACT,QAAQ,IAAI,CACX,oBAAC,UAAU;wBACT,oBAAC,GAAG,IAAC,aAAa,EAAC,WAAW,IAAE,QAAQ,CAAO,CACpC,CACd,CACO;gBACV,oBAAC,OAAO,IACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"AccountItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export declare const Address: ({ address, showIcon, cryptoId, ticker, parentId, }: {
|
|
2
|
+
export declare const Address: ({ address, showIcon, cryptoId, ticker, parentId, isShortened, }: {
|
|
3
3
|
address: string;
|
|
4
4
|
showIcon: boolean;
|
|
5
5
|
cryptoId?: string | undefined;
|
|
6
6
|
ticker?: string | undefined;
|
|
7
7
|
parentId?: string | undefined;
|
|
8
|
+
isShortened?: boolean | undefined;
|
|
8
9
|
}) => React.JSX.Element;
|
|
9
10
|
//# sourceMappingURL=Address.d.ts.map
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,eAAO,MAAM,OAAO;aAQT,MAAM;cACL,OAAO;;;;;uBAqBlB,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { Text } from "../../../components";
|
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import { withTokens } from "../../libs";
|
|
5
5
|
import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
|
|
6
|
+
import { formatAddress } from "./formatAddress";
|
|
6
7
|
const Wrapper = styled.div `
|
|
7
8
|
${withTokens("spacing-xxxs", "colors-content-subdued-default-default")}
|
|
8
9
|
|
|
@@ -10,9 +11,10 @@ const Wrapper = styled.div `
|
|
|
10
11
|
flex-direction: row;
|
|
11
12
|
align-items: center;
|
|
12
13
|
`;
|
|
13
|
-
export const Address = ({ address, showIcon, cryptoId, ticker, parentId, }) => {
|
|
14
|
+
export const Address = ({ address, showIcon, cryptoId, ticker, parentId, isShortened = false, }) => {
|
|
15
|
+
const formattedAddress = isShortened ? formatAddress(address) : address;
|
|
14
16
|
return (React.createElement(Wrapper, null,
|
|
15
|
-
React.createElement(Text, { marginRight: "var(--spacing-xxxs)", fontSize: "12px", color: "var(--colors-content-subdued-default-default)" },
|
|
17
|
+
React.createElement(Text, { marginRight: "var(--spacing-xxxs)", fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, formattedAddress),
|
|
16
18
|
showIcon && (React.createElement(CryptoIcon, { ledgerId: cryptoId, network: parentId, ticker: ticker, size: "20px" }))));
|
|
17
19
|
};
|
|
18
20
|
//# 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;
|
|
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;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,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,EACN,QAAQ,EACR,WAAW,GAAG,KAAK,GAQpB,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACxE,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,IAAI,IACH,WAAW,EAAC,qBAAqB,EACjC,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,+CAA+C,IAEpD,gBAAgB,CACZ;QACN,QAAQ,IAAI,CACX,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAG,CAClF,CACO,CACX,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Format an address by showing only parts of it
|
|
3
|
+
*
|
|
4
|
+
* @param address - The address to format
|
|
5
|
+
* @param options - Configuration options
|
|
6
|
+
* @param options.prefixLength - Number of characters to show at the start (default: 5)
|
|
7
|
+
* @param options.suffixLength - Number of characters to show at the end (default: 5)
|
|
8
|
+
* @param options.separator - String to use as separator (default: "...")
|
|
9
|
+
* @param options.threshold - Minimum length before truncating (default: calculated from other params)
|
|
10
|
+
* @returns Formatted address string
|
|
11
|
+
*/
|
|
12
|
+
export declare const formatAddress: (address: string, options?: {
|
|
13
|
+
prefixLength?: number;
|
|
14
|
+
suffixLength?: number;
|
|
15
|
+
separator?: string;
|
|
16
|
+
threshold?: number;
|
|
17
|
+
}) => string;
|
|
18
|
+
//# sourceMappingURL=formatAddress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formatAddress.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/formatAddress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,YACf,MAAM,YACN;IACP,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,WAcF,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Format an address by showing only parts of it
|
|
3
|
+
*
|
|
4
|
+
* @param address - The address to format
|
|
5
|
+
* @param options - Configuration options
|
|
6
|
+
* @param options.prefixLength - Number of characters to show at the start (default: 5)
|
|
7
|
+
* @param options.suffixLength - Number of characters to show at the end (default: 5)
|
|
8
|
+
* @param options.separator - String to use as separator (default: "...")
|
|
9
|
+
* @param options.threshold - Minimum length before truncating (default: calculated from other params)
|
|
10
|
+
* @returns Formatted address string
|
|
11
|
+
*/
|
|
12
|
+
export const formatAddress = (address, options = {}) => {
|
|
13
|
+
const { prefixLength = 5, suffixLength = 5, separator = "...", threshold = prefixLength + separator.length + suffixLength, } = options;
|
|
14
|
+
if (!address || address.length <= threshold) {
|
|
15
|
+
return address;
|
|
16
|
+
}
|
|
17
|
+
return `${address.slice(0, prefixLength)}${separator}${address.slice(-suffixLength)}`;
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=formatAddress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formatAddress.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/formatAddress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,OAAe,EACf,UAKI,EAAE,EACN,EAAE;IACF,MAAM,EACJ,YAAY,GAAG,CAAC,EAChB,YAAY,GAAG,CAAC,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC,MAAM,GAAG,YAAY,GAC3D,GAAG,OAAO,CAAC;IAEZ,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC;QAC5C,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC;AACxF,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.40.0-nightly.
|
|
3
|
+
"version": "0.40.0-nightly.2",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
"react-window": "^1.8.6",
|
|
77
77
|
"styled-system": "^5.1.5",
|
|
78
78
|
"@ledgerhq/crypto-icons-ui": "^1.21.0-nightly.1",
|
|
79
|
-
"@ledgerhq/ui
|
|
80
|
-
"@ledgerhq/
|
|
79
|
+
"@ledgerhq/icons-ui": "^0.15.0-nightly.0",
|
|
80
|
+
"@ledgerhq/ui-shared": "^0.4.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"react": ">=17.0.2",
|
|
@@ -107,6 +107,7 @@
|
|
|
107
107
|
"@testing-library/react": "16.3.0",
|
|
108
108
|
"@testing-library/user-event": "14.5.2",
|
|
109
109
|
"@types/color": "^3.0.2",
|
|
110
|
+
"@types/jest": "^29.5.12",
|
|
110
111
|
"@types/hoist-non-react-statics": "^3.3.1",
|
|
111
112
|
"@types/lodash": "4",
|
|
112
113
|
"@types/react": "~18.2.21",
|
|
@@ -125,6 +126,7 @@
|
|
|
125
126
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
126
127
|
"eslint-plugin-storybook": "^0.12.0",
|
|
127
128
|
"fs-extra": "^10.0.1",
|
|
129
|
+
"jest": "29.7.0",
|
|
128
130
|
"os-browserify": "0.3.0",
|
|
129
131
|
"react": "18.3.1",
|
|
130
132
|
"react-dom": "18.3.1",
|
|
@@ -165,6 +167,8 @@
|
|
|
165
167
|
"lint:css": "stylelint './src/**/*.{js,jsx,ts,tsx}' --fix",
|
|
166
168
|
"typecheck": "tsc --p . --noEmit",
|
|
167
169
|
"test": "pnpm -w -F ui build-and-test",
|
|
170
|
+
"test:jest": "jest --maxWorkers=50%",
|
|
171
|
+
"test:jest:coverage": "pnpm test:jest --ci --coverage",
|
|
168
172
|
"unimported": "unimported"
|
|
169
173
|
}
|
|
170
174
|
}
|