@ledgerhq/react-ui 0.26.0-next.0 → 0.27.0-nightly.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js +3 -1
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js +9 -9
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Address/Address.stories.js +2 -2
- package/lib/cjs/pre-ldls/components/Address/Address.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AssetList/AssetList.js +1 -1
- package/lib/cjs/pre-ldls/components/AssetList/AssetList.js.map +1 -1
- package/lib/cjs/pre-ldls/components/Tag/Tag.js +14 -2
- package/lib/cjs/pre-ldls/components/Tag/Tag.js.map +2 -2
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js +27 -19
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js.map +2 -2
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.js +3 -2
- package/lib/pre-ldls/components/AccountItem/AccountItem.js.map +1 -1
- package/lib/pre-ldls/components/AssetList/AssetList.js +1 -1
- package/lib/pre-ldls/components/Tag/Tag.d.ts +2 -1
- package/lib/pre-ldls/components/Tag/Tag.d.ts.map +1 -1
- package/lib/pre-ldls/components/Tag/Tag.js +2 -2
- package/lib/pre-ldls/components/Tag/Tag.js.map +1 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts.map +1 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.js +1 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.js.map +1 -1
- package/package.json +2 -2
|
@@ -42,6 +42,7 @@ const Wrapper = import_styled_components.default.div`
|
|
|
42
42
|
"spacing-xxxs",
|
|
43
43
|
"spacing-xxs",
|
|
44
44
|
"spacing-xs",
|
|
45
|
+
"radius-s",
|
|
45
46
|
"colors-content-default-default",
|
|
46
47
|
"colors-surface-transparent-hover",
|
|
47
48
|
"colors-surface-transparent-pressed",
|
|
@@ -51,6 +52,7 @@ const Wrapper = import_styled_components.default.div`
|
|
|
51
52
|
display: flex;
|
|
52
53
|
padding: var(--spacing-xs) var(--spacing-xxs);
|
|
53
54
|
cursor: pointer;
|
|
55
|
+
border-radius: var(--radius-s, 8px);
|
|
54
56
|
justify-content: space-between;
|
|
55
57
|
align-items: center;
|
|
56
58
|
|
|
@@ -95,7 +97,7 @@ const AccountItem = ({ onClick, account, showIcon = true }) => {
|
|
|
95
97
|
},
|
|
96
98
|
name
|
|
97
99
|
),
|
|
98
|
-
protocol && /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag,
|
|
100
|
+
protocol && /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { textTransform: "capitalize" }, protocol)
|
|
99
101
|
), /* @__PURE__ */ import_react.default.createElement(import_Address.Address, { address, cryptoId, ticker, showIcon }))
|
|
100
102
|
), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", textAlign: "right" } }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "14px" }, fiatValue), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance)));
|
|
101
103
|
};
|
|
@@ -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 { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { Tag } from \"../Tag/Tag\";\nimport { Address } from \"../Address/Address\";\n\nexport type Account = {\n name: string;\n id: string;\n balance: string;\n fiatValue: string;\n address: string;\n protocol?: string;\n cryptoId?: string;\n ticker?: string;\n};\n\ntype AccountItemProps = {\n onClick: () => void;\n showIcon?: boolean;\n account: Account;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxxs\",\n \"spacing-xxs\",\n \"spacing-xs\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n \"colors-content-subdued-default-default\",\n )}\n\n display: flex;\n padding: var(--spacing-xs) var(--spacing-xxs);\n cursor: pointer;\n justify-content: space-between;\n align-items: center;\n\n :hover {\n background-color: var(--colors-surface-transparent-hover);\n }\n\n :active {\n background-color: var(--colors-surface-transparent-pressed);\n }\n`;\n\nexport const AccountItem = ({ onClick, account, showIcon = true }: AccountItemProps) => {\n const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;\n\n return (\n <Wrapper onClick={onClick}>\n <div\n style={{\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n }}\n >\n <div style={{ display: \"flex\", flexDirection: \"column\", justifyContent: \"center\" }}>\n <div\n style={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n marginBottom: \"var(--spacing-xxxs)\",\n }}\n >\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n marginRight=\"var(--spacing-xxs)\"\n fontSize=\"14px\"\n lineHeight=\"20px\"\n >\n {name}\n </Text>\n {protocol && <Tag>{protocol}</Tag>}\n </div>\n <Address address={address} cryptoId={cryptoId} ticker={ticker} showIcon={showIcon} />\n </div>\n </div>\n <div style={{ display: \"flex\", flexDirection: \"column\", textAlign: \"right\" }}>\n <Text fontSize=\"14px\">{fiatValue}</Text>\n <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n {balance}\n </Text>\n </div>\n </Wrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,iBAAoB;AACpB,qBAAwB;AAmBxB,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;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { Tag } from \"../Tag/Tag\";\nimport { Address } from \"../Address/Address\";\n\nexport type Account = {\n name: string;\n id: string;\n balance: string;\n fiatValue: string;\n address: string;\n protocol?: string;\n cryptoId?: string;\n ticker?: string;\n};\n\ntype AccountItemProps = {\n onClick: () => void;\n showIcon?: boolean;\n account: Account;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxxs\",\n \"spacing-xxs\",\n \"spacing-xs\",\n \"radius-s\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n \"colors-content-subdued-default-default\",\n )}\n\n display: flex;\n padding: var(--spacing-xs) var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\n justify-content: space-between;\n align-items: center;\n\n :hover {\n background-color: var(--colors-surface-transparent-hover);\n }\n\n :active {\n background-color: var(--colors-surface-transparent-pressed);\n }\n`;\n\nexport const AccountItem = ({ onClick, account, showIcon = true }: AccountItemProps) => {\n const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;\n\n return (\n <Wrapper onClick={onClick}>\n <div\n style={{\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n }}\n >\n <div style={{ display: \"flex\", flexDirection: \"column\", justifyContent: \"center\" }}>\n <div\n style={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n marginBottom: \"var(--spacing-xxxs)\",\n }}\n >\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n marginRight=\"var(--spacing-xxs)\"\n fontSize=\"14px\"\n lineHeight=\"20px\"\n >\n {name}\n </Text>\n {protocol && <Tag textTransform=\"capitalize\">{protocol}</Tag>}\n </div>\n <Address address={address} cryptoId={cryptoId} ticker={ticker} showIcon={showIcon} />\n </div>\n </div>\n <div style={{ display: \"flex\", flexDirection: \"column\", textAlign: \"right\" }}>\n <Text fontSize=\"14px\">{fiatValue}</Text>\n <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n {balance}\n </Text>\n </div>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,iBAAoB;AACpB,qBAAwB;AAmBxB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;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;AAkBI,MAAM,cAAc,CAAC,EAAE,SAAS,SAAS,WAAW,KAAK,MAAwB;AACtF,QAAM,EAAE,MAAM,SAAS,WAAW,UAAU,SAAS,QAAQ,SAAS,IAAI;AAE1E,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,MACd;AAAA;AAAA,IAEA,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,gBAAgB,SAAS,KAC/E,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA;AAAA,MAEA,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,UAAS;AAAA,UACT,YAAW;AAAA;AAAA,QAEV;AAAA,MACH;AAAA,MACC,YAAY,6BAAAA,QAAA,cAAC,kBAAI,eAAc,gBAAc,QAAS;AAAA,IACzD,GACA,6BAAAA,QAAA,cAAC,0BAAQ,SAAkB,UAAoB,QAAgB,UAAoB,CACrF;AAAA,EACF,GACA,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,WAAW,QAAQ,KACzE,6BAAAA,QAAA,cAAC,0BAAK,UAAS,UAAQ,SAAU,GACjC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,QAAO,OAAM,mDACzB,OACH,CACF,CACF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -33,12 +33,12 @@ const meta = {
|
|
|
33
33
|
tags: ["autodocs"],
|
|
34
34
|
args: {
|
|
35
35
|
account: {
|
|
36
|
-
id: "
|
|
36
|
+
id: "12345",
|
|
37
|
+
cryptoId: "bitcoin",
|
|
37
38
|
name: "Main BTC",
|
|
38
39
|
balance: "0.118 ETH",
|
|
39
40
|
fiatValue: "$5,969.83",
|
|
40
41
|
address: "n4A9...Zgty",
|
|
41
|
-
cryptoId: "bitcoin",
|
|
42
42
|
ticker: "btc"
|
|
43
43
|
}
|
|
44
44
|
}
|
|
@@ -48,13 +48,13 @@ const Default = {};
|
|
|
48
48
|
const TestAccount = {
|
|
49
49
|
args: {
|
|
50
50
|
account: {
|
|
51
|
-
id: "
|
|
51
|
+
id: "12345",
|
|
52
|
+
cryptoId: "bitcoin",
|
|
52
53
|
name: "Main BTC",
|
|
53
54
|
balance: "0.118 BTC",
|
|
54
55
|
fiatValue: "$5,969.83",
|
|
55
56
|
protocol: "Native Segwit",
|
|
56
57
|
address: "n4A9...Zgty",
|
|
57
|
-
cryptoId: "bitcoin",
|
|
58
58
|
ticker: "btc"
|
|
59
59
|
}
|
|
60
60
|
},
|
|
@@ -63,7 +63,7 @@ const TestAccount = {
|
|
|
63
63
|
const name = canvas.getByText("Main BTC");
|
|
64
64
|
const protocol = canvas.getByTestId("tag");
|
|
65
65
|
const address = canvas.getByText("n4A9...Zgty");
|
|
66
|
-
const addressIcon = canvas.
|
|
66
|
+
const addressIcon = canvas.getByRole("img");
|
|
67
67
|
const fiatValue = canvas.getByText("$5,969.83");
|
|
68
68
|
const balance = canvas.getByText("0.118 BTC");
|
|
69
69
|
await (0, import_test.expect)(name).toBeInTheDocument();
|
|
@@ -78,12 +78,12 @@ const TestAccount = {
|
|
|
78
78
|
const TestWithoutProtocol = {
|
|
79
79
|
args: {
|
|
80
80
|
account: {
|
|
81
|
-
id: "
|
|
81
|
+
id: "21345",
|
|
82
|
+
cryptoId: "bitcoin",
|
|
82
83
|
name: "Main BTC",
|
|
83
84
|
balance: "0.118 BTC",
|
|
84
85
|
fiatValue: "$5,969.83",
|
|
85
86
|
address: "n4A9...Zgty",
|
|
86
|
-
cryptoId: "bitcoin",
|
|
87
87
|
ticker: "btc"
|
|
88
88
|
}
|
|
89
89
|
},
|
|
@@ -96,7 +96,7 @@ const TestWithoutProtocol = {
|
|
|
96
96
|
const TestWithoutAddressIcon = {
|
|
97
97
|
args: {
|
|
98
98
|
account: {
|
|
99
|
-
id: "
|
|
99
|
+
id: "bitcoin",
|
|
100
100
|
name: "Main BTC",
|
|
101
101
|
balance: "0.118 BTC",
|
|
102
102
|
fiatValue: "$5,969.83",
|
|
@@ -106,7 +106,7 @@ const TestWithoutAddressIcon = {
|
|
|
106
106
|
},
|
|
107
107
|
play: async ({ canvasElement }) => {
|
|
108
108
|
const canvas = (0, import_test.within)(canvasElement);
|
|
109
|
-
const addressIcon = canvas.
|
|
109
|
+
const addressIcon = canvas.queryByRole("img");
|
|
110
110
|
await (0, import_test.expect)(addressIcon).not.toBeInTheDocument();
|
|
111
111
|
}
|
|
112
112
|
};
|
|
@@ -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 { AccountItem } from \"./AccountItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof AccountItem> = {\n component: AccountItem,\n title: \"PreLdls/Components/AccountItem\",\n tags: [\"autodocs\"],\n args: {\n account: {\n id: \"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA4B;AAC5B,kBAA+B;AAE/B,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AccountItem } from \"./AccountItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof AccountItem> = {\n component: AccountItem,\n title: \"PreLdls/Components/AccountItem\",\n tags: [\"autodocs\"],\n args: {\n account: {\n id: \"12345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 ETH\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\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 account: {\n id: \"12345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n protocol: \"Native Segwit\",\n address: \"n4A9...Zgty\",\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(\"n4A9...Zgty\");\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 account: {\n id: \"21345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\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 account: {\n id: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA4B;AAC5B,kBAA+B;AAE/B,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,SAAS;AAAA,MACT,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,aAAa;AAC9C,UAAM,cAAc,OAAO,UAAU,KAAK;AAC1C,UAAM,YAAY,OAAO,UAAU,WAAW;AAC9C,UAAM,UAAU,OAAO,UAAU,WAAW;AAE5C,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,QAAQ,EAAE,kBAAkB;AACzC,cAAM,oBAAO,QAAQ,EAAE,kBAAkB,eAAe;AACxD,cAAM,oBAAO,OAAO,EAAE,kBAAkB;AACxC,cAAM,oBAAO,WAAW,EAAE,kBAAkB;AAC5C,cAAM,oBAAO,SAAS,EAAE,kBAAkB;AAC1C,cAAM,oBAAO,OAAO,EAAE,kBAAkB;AAAA,EAC1C;AACF;AAEO,MAAM,sBAA6B;AAAA,EACxC,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,WAAW,OAAO,cAAc,KAAK;AAE3C,cAAM,oBAAO,QAAQ,EAAE,IAAI,kBAAkB;AAAA,EAC/C;AACF;AAEO,MAAM,yBAAgC;AAAA,EAC3C,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,EACZ;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,cAAc,OAAO,YAAY,KAAK;AAE5C,cAAM,oBAAO,WAAW,EAAE,IAAI,kBAAkB;AAAA,EAClD;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,7 +38,7 @@ const TestAddress = {
|
|
|
38
38
|
play: async ({ canvasElement }) => {
|
|
39
39
|
const canvas = (0, import_test.within)(canvasElement);
|
|
40
40
|
const name = canvas.getByText("n4A9...Zgty");
|
|
41
|
-
const icon = canvas.
|
|
41
|
+
const icon = canvas.queryByRole("img");
|
|
42
42
|
await (0, import_test.expect)(name).toBeInTheDocument();
|
|
43
43
|
await (0, import_test.expect)(icon).not.toBeInTheDocument();
|
|
44
44
|
}
|
|
@@ -48,7 +48,7 @@ const TestAddressWithIcon = {
|
|
|
48
48
|
play: async ({ canvasElement }) => {
|
|
49
49
|
const canvas = (0, import_test.within)(canvasElement);
|
|
50
50
|
const name = canvas.getByText("n4A9...Zgty");
|
|
51
|
-
const icon = canvas.
|
|
51
|
+
const icon = canvas.getByRole("img");
|
|
52
52
|
await (0, import_test.expect)(name).toBeInTheDocument();
|
|
53
53
|
await (0, import_test.expect)(icon).toBeInTheDocument();
|
|
54
54
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Address/Address.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Address } from \"./Address\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof Address> = {\n component: Address,\n title: \"PreLdls/Components/Address\",\n tags: [\"autodocs\"],\n args: { address: \"n4A9...Zgty\", cryptoId: \"bitcoin\", ticker: \"BTC\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Address>;\n\nexport const Default: Story = {};\n\nexport const TestAddress: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"n4A9...Zgty\");\n const icon = canvas.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qBAAwB;AACxB,kBAA+B;AAE/B,MAAM,OAA6B;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,SAAS,eAAe,UAAU,WAAW,QAAQ,MAAM;AACrE;AACA,IAAO,0BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,cAAqB;AAAA,EAChC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,aAAa;AAC3C,UAAM,OAAO,OAAO,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Address } from \"./Address\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof Address> = {\n component: Address,\n title: \"PreLdls/Components/Address\",\n tags: [\"autodocs\"],\n args: { address: \"n4A9...Zgty\", cryptoId: \"bitcoin\", ticker: \"BTC\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Address>;\n\nexport const Default: Story = {};\n\nexport const TestAddress: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"n4A9...Zgty\");\n const icon = canvas.queryByRole(\"img\");\n\n await expect(name).toBeInTheDocument();\n await expect(icon).not.toBeInTheDocument();\n },\n};\n\nexport const TestAddressWithIcon: Story = {\n args: { showIcon: true },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"n4A9...Zgty\");\n const icon = canvas.getByRole(\"img\");\n\n await expect(name).toBeInTheDocument();\n await expect(icon).toBeInTheDocument();\n },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qBAAwB;AACxB,kBAA+B;AAE/B,MAAM,OAA6B;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,SAAS,eAAe,UAAU,WAAW,QAAQ,MAAM;AACrE;AACA,IAAO,0BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,cAAqB;AAAA,EAChC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,aAAa;AAC3C,UAAM,OAAO,OAAO,YAAY,KAAK;AAErC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,IAAI,EAAE,IAAI,kBAAkB;AAAA,EAC3C;AACF;AAEO,MAAM,sBAA6B;AAAA,EACxC,MAAM,EAAE,UAAU,KAAK;AAAA,EACvB,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,aAAa;AAC3C,UAAM,OAAO,OAAO,UAAU,KAAK;AAEnC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AAAA,EACvC;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport { AssetItem, AssetType } from \"../AssetItem/AssetItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AssetList = ({\n assets,\n onClick,\n onVisibleItemsScrollEnd,\n}: {\n assets: AssetType[];\n onClick: (asset: AssetType) => void;\n onVisibleItemsScrollEnd?: () => void;\n}) => {\n const renderAssetItem = useCallback(\n ({ name, ticker, id }: AssetType) => (\n <AssetItem name={name} ticker={ticker} id={id} onClick={onClick} />\n ),\n [onClick],\n );\n\n return (\n <VirtualList\n itemHeight={
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport { AssetItem, AssetType } from \"../AssetItem/AssetItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AssetList = ({\n assets,\n onClick,\n onVisibleItemsScrollEnd,\n}: {\n assets: AssetType[];\n onClick: (asset: AssetType) => void;\n onVisibleItemsScrollEnd?: () => void;\n}) => {\n const renderAssetItem = useCallback(\n ({ name, ticker, id }: AssetType) => (\n <AssetItem name={name} ticker={ticker} id={id} onClick={onClick} />\n ),\n [onClick],\n );\n\n return (\n <VirtualList\n itemHeight={70}\n items={assets}\n onVisibleItemsScrollEnd={onVisibleItemsScrollEnd}\n renderItem={renderAssetItem}\n />\n );\n};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,EAAE,MAAM,QAAQ,GAAG,MAClB,6BAAAA,QAAA,cAAC,8BAAU,MAAY,QAAgB,IAAQ,SAAkB;AAAA,IAEnE,CAAC,OAAO;AAAA,EACV;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA,YAAY;AAAA;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -48,7 +48,19 @@ const Wrapper = import_styled_components.default.div`
|
|
|
48
48
|
display: inline-flex;
|
|
49
49
|
background-color: var(--colors-surface-transparent-subdued-default);
|
|
50
50
|
`;
|
|
51
|
-
const Tag = ({
|
|
52
|
-
|
|
51
|
+
const Tag = ({
|
|
52
|
+
textTransform = "none",
|
|
53
|
+
children
|
|
54
|
+
}) => {
|
|
55
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { "data-testid": "tag" }, /* @__PURE__ */ import_react.default.createElement(
|
|
56
|
+
import_components.Text,
|
|
57
|
+
{
|
|
58
|
+
color: "var(--colors-content-subdued-default-default)",
|
|
59
|
+
fontSize: "10px",
|
|
60
|
+
lineHeight: "16px",
|
|
61
|
+
textTransform
|
|
62
|
+
},
|
|
63
|
+
children
|
|
64
|
+
));
|
|
53
65
|
};
|
|
54
66
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Tag/Tag.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = 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: 1px var(--spacing-xxxs);\n border-radius: var(--radius-xs);\n display: inline-flex;\n background-color: var(--colors-surface-transparent-subdued-default);\n`;\n\nexport const Tag = ({ children
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQI,MAAM,MAAM,CAAC,
|
|
4
|
+
"sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = 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: 1px var(--spacing-xxxs);\n border-radius: var(--radius-xs);\n display: inline-flex;\n background-color: var(--colors-surface-transparent-subdued-default);\n`;\n\nexport const Tag = ({\n textTransform = \"none\",\n children,\n}: {\n textTransform?: string;\n children: ReactNode;\n}) => {\n return (\n <Wrapper data-testid=\"tag\">\n <Text\n color=\"var(--colors-content-subdued-default-default)\"\n fontSize=\"10px\"\n lineHeight=\"16px\"\n textTransform={textTransform}\n >\n {children}\n </Text>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQI,MAAM,MAAM,CAAC;AAAA,EAClB,gBAAgB;AAAA,EAChB;AACF,MAGM;AACJ,SACE,6BAAAC,QAAA,cAAC,WAAQ,eAAY,SACnB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,UAAS;AAAA,MACT,YAAW;AAAA,MACX;AAAA;AAAA,IAEC;AAAA,EACH,CACF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -69,32 +69,40 @@ const VirtualList = ({
|
|
|
69
69
|
rowVirtualizer.getVirtualItems()
|
|
70
70
|
]);
|
|
71
71
|
const showCustomLoadingComponent = !!LoadingComponent;
|
|
72
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
72
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
73
73
|
"div",
|
|
74
74
|
{
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
width: "100%",
|
|
78
|
-
position: "relative"
|
|
79
|
-
}
|
|
75
|
+
ref: parentRef,
|
|
76
|
+
style: { width: "100%", height: "100%", overflow: "auto", scrollbarWidth: "none" }
|
|
80
77
|
},
|
|
81
|
-
|
|
78
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
82
79
|
"div",
|
|
83
80
|
{
|
|
84
|
-
key: virtualRow.index,
|
|
85
|
-
"data-index": virtualRow.index,
|
|
86
|
-
ref: rowVirtualizer.measureElement,
|
|
87
81
|
style: {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
transform: `translateY(${virtualRow.start}px)`,
|
|
92
|
-
height: `${itemHeight}px`,
|
|
93
|
-
width: "100%"
|
|
82
|
+
height: `${rowVirtualizer.getTotalSize()}px`,
|
|
83
|
+
width: "100%",
|
|
84
|
+
position: "relative"
|
|
94
85
|
}
|
|
95
86
|
},
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
87
|
+
rowVirtualizer.getVirtualItems().map((virtualRow) => /* @__PURE__ */ import_react.default.createElement(
|
|
88
|
+
"div",
|
|
89
|
+
{
|
|
90
|
+
key: virtualRow.index,
|
|
91
|
+
"data-index": virtualRow.index,
|
|
92
|
+
ref: rowVirtualizer.measureElement,
|
|
93
|
+
style: {
|
|
94
|
+
position: "absolute",
|
|
95
|
+
top: 0,
|
|
96
|
+
left: 0,
|
|
97
|
+
transform: `translateY(${virtualRow.start}px)`,
|
|
98
|
+
height: `${itemHeight}px`,
|
|
99
|
+
width: "100%"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
renderItem(items[virtualRow.index])
|
|
103
|
+
))
|
|
104
|
+
),
|
|
105
|
+
isLoading && (showCustomLoadingComponent ? LoadingComponent : /* @__PURE__ */ import_react.default.createElement(DefaultLoadingComponent, null))
|
|
106
|
+
);
|
|
99
107
|
};
|
|
100
108
|
//# sourceMappingURL=VirtualList.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useRef } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n key: string | number | bigint;\n index: number;\n start: number;\n end: number;\n size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n /**\n * Height of each item in the list.\n * This is used to calculate the total height of the list and the position of each item.\n */\n itemHeight: number;\n /**\n * Number of extra items to render outside the visible viewport for smoother scrolling.\n * Defaults to 5.\n */\n overscan?: number;\n /**\n * React component or node to display when the list is loading additional items.\n * If not provided, a default loading spinner will be used.\n */\n LoadingComponent?: React.ReactNode;\n /**\n * Indicates whether new items are currently being loaded.\n */\n isLoading?: boolean;\n /**\n * Indicates if there are more items to load.\n */\n hasNextPage?: boolean;\n /**\n * Number of items to check before the end of the list to trigger loading more items.\n * Defaults to 5.\n */\n threshold?: number;\n /**\n * Callback function to be called when the user scrolls to the end of the visible items.\n * This can be used to load more items when the user reaches the end of the list.\n */\n onVisibleItemsScrollEnd?: () => void;\n /**\n * Function to render each item in the list.\n * Receives a single value from the items array as an argument and should return a React node.\n */\n renderItem: (item: T) => React.ReactNode;\n /**\n * The array of items which will be rendered\n */\n items: T[];\n};\n\nconst DefaultLoadingComponent = () => (\n <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n <InfiniteLoader />\n </Flex>\n);\n\nexport const VirtualList = <T,>({\n itemHeight,\n overscan = 5,\n LoadingComponent,\n isLoading,\n hasNextPage = false,\n threshold = 5,\n onVisibleItemsScrollEnd,\n items,\n renderItem,\n}: VirtualListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null);\n\n const rowVirtualizer = useVirtualizer({\n count: hasNextPage ? items.length + 1 : items.length,\n getScrollElement: () => parentRef.current,\n estimateSize: () => itemHeight,\n overscan,\n });\n\n useEffect(() => {\n const items = rowVirtualizer.getVirtualItems();\n if (!items.length) return;\n const lastItem = items[items.length - 1];\n\n if (\n lastItem.index >= items.length - 1 - threshold &&\n hasNextPage &&\n !isLoading &&\n onVisibleItemsScrollEnd\n ) {\n onVisibleItemsScrollEnd();\n }\n }, [\n hasNextPage,\n onVisibleItemsScrollEnd,\n items.length,\n isLoading,\n rowVirtualizer.getVirtualItems(),\n ]);\n\n const showCustomLoadingComponent = !!LoadingComponent;\n\n return (\n <div
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,2BAA+B;AAC/B,wBAAqC;AA2DrC,MAAM,0BAA0B,MAC9B,6BAAAA,QAAA,cAAC,0BAAK,gBAAe,UAAS,YAAW,UAAS,QAAO,UACvD,6BAAAA,QAAA,cAAC,sCAAe,CAClB;AAGK,MAAM,cAAc,CAAK;AAAA,EAC9B;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,QAAM,qBAAiB,qCAAe;AAAA,IACpC,OAAO,cAAc,MAAM,SAAS,IAAI,MAAM;AAAA,IAC9C,kBAAkB,MAAM,UAAU;AAAA,IAClC,cAAc,MAAM;AAAA,IACpB;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,UAAMC,SAAQ,eAAe,gBAAgB;AAC7C,QAAI,CAACA,OAAM;AAAQ;AACnB,UAAM,WAAWA,OAAMA,OAAM,SAAS,CAAC;AAEvC,QACE,SAAS,SAASA,OAAM,SAAS,IAAI,aACrC,eACA,CAAC,aACD,yBACA;AACA,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,eAAe,gBAAgB;AAAA,EACjC,CAAC;AAED,QAAM,6BAA6B,CAAC,CAAC;AAErC,SACE,6BAAAD,QAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n key: string | number | bigint;\n index: number;\n start: number;\n end: number;\n size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n /**\n * Height of each item in the list.\n * This is used to calculate the total height of the list and the position of each item.\n */\n itemHeight: number;\n /**\n * Number of extra items to render outside the visible viewport for smoother scrolling.\n * Defaults to 5.\n */\n overscan?: number;\n /**\n * React component or node to display when the list is loading additional items.\n * If not provided, a default loading spinner will be used.\n */\n LoadingComponent?: React.ReactNode;\n /**\n * Indicates whether new items are currently being loaded.\n */\n isLoading?: boolean;\n /**\n * Indicates if there are more items to load.\n */\n hasNextPage?: boolean;\n /**\n * Number of items to check before the end of the list to trigger loading more items.\n * Defaults to 5.\n */\n threshold?: number;\n /**\n * Callback function to be called when the user scrolls to the end of the visible items.\n * This can be used to load more items when the user reaches the end of the list.\n */\n onVisibleItemsScrollEnd?: () => void;\n /**\n * Function to render each item in the list.\n * Receives a single value from the items array as an argument and should return a React node.\n */\n renderItem: (item: T) => React.ReactNode;\n /**\n * The array of items which will be rendered\n */\n items: T[];\n};\n\nconst DefaultLoadingComponent = () => (\n <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n <InfiniteLoader />\n </Flex>\n);\n\nexport const VirtualList = <T,>({\n itemHeight,\n overscan = 5,\n LoadingComponent,\n isLoading,\n hasNextPage = false,\n threshold = 5,\n onVisibleItemsScrollEnd,\n items,\n renderItem,\n}: VirtualListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null);\n\n const rowVirtualizer = useVirtualizer({\n count: hasNextPage ? items.length + 1 : items.length,\n getScrollElement: () => parentRef.current,\n estimateSize: () => itemHeight,\n overscan,\n });\n\n useEffect(() => {\n const items = rowVirtualizer.getVirtualItems();\n if (!items.length) return;\n const lastItem = items[items.length - 1];\n\n if (\n lastItem.index >= items.length - 1 - threshold &&\n hasNextPage &&\n !isLoading &&\n onVisibleItemsScrollEnd\n ) {\n onVisibleItemsScrollEnd();\n }\n }, [\n hasNextPage,\n onVisibleItemsScrollEnd,\n items.length,\n isLoading,\n rowVirtualizer.getVirtualItems(),\n ]);\n\n const showCustomLoadingComponent = !!LoadingComponent;\n\n return (\n <div\n ref={parentRef}\n style={{ width: \"100%\", height: \"100%\", overflow: \"auto\", scrollbarWidth: \"none\" }}\n >\n <div\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`,\n width: \"100%\",\n position: \"relative\",\n }}\n >\n {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => (\n <div\n key={virtualRow.index}\n data-index={virtualRow.index}\n ref={rowVirtualizer.measureElement}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n transform: `translateY(${virtualRow.start}px)`,\n height: `${itemHeight}px`,\n width: \"100%\",\n }}\n >\n {renderItem(items[virtualRow.index])}\n </div>\n ))}\n </div>\n {isLoading && (showCustomLoadingComponent ? LoadingComponent : <DefaultLoadingComponent />)}\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,2BAA+B;AAC/B,wBAAqC;AA2DrC,MAAM,0BAA0B,MAC9B,6BAAAA,QAAA,cAAC,0BAAK,gBAAe,UAAS,YAAW,UAAS,QAAO,UACvD,6BAAAA,QAAA,cAAC,sCAAe,CAClB;AAGK,MAAM,cAAc,CAAK;AAAA,EAC9B;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,QAAM,qBAAiB,qCAAe;AAAA,IACpC,OAAO,cAAc,MAAM,SAAS,IAAI,MAAM;AAAA,IAC9C,kBAAkB,MAAM,UAAU;AAAA,IAClC,cAAc,MAAM;AAAA,IACpB;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,UAAMC,SAAQ,eAAe,gBAAgB;AAC7C,QAAI,CAACA,OAAM;AAAQ;AACnB,UAAM,WAAWA,OAAMA,OAAM,SAAS,CAAC;AAEvC,QACE,SAAS,SAASA,OAAM,SAAS,IAAI,aACrC,eACA,CAAC,aACD,yBACA;AACA,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,eAAe,gBAAgB;AAAA,EACjC,CAAC;AAED,QAAM,6BAA6B,CAAC,CAAC;AAErC,SACE,6BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,UAAU,QAAQ,gBAAgB,OAAO;AAAA;AAAA,IAEjF,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQ,GAAG,eAAe,aAAa,CAAC;AAAA,UACxC,OAAO;AAAA,UACP,UAAU;AAAA,QACZ;AAAA;AAAA,MAEC,eAAe,gBAAgB,EAAE,IAAI,CAAC,eACrC,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,WAAW;AAAA,UAChB,cAAY,WAAW;AAAA,UACvB,KAAK,eAAe;AAAA,UACpB,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK;AAAA,YACL,MAAM;AAAA,YACN,WAAW,cAAc,WAAW,KAAK;AAAA,YACzC,QAAQ,GAAG,UAAU;AAAA,YACrB,OAAO;AAAA,UACT;AAAA;AAAA,QAEC,WAAW,MAAM,WAAW,KAAK,CAAC;AAAA,MACrC,CACD;AAAA,IACH;AAAA,IACC,cAAc,6BAA6B,mBAAmB,6BAAAA,QAAA,cAAC,6BAAwB;AAAA,EAC1F;AAEJ;",
|
|
6
6
|
"names": ["React", "items"]
|
|
7
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;AAO1B,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;
|
|
1
|
+
{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AA8BF,eAAO,MAAM,WAAW,mCAA2C,gBAAgB,sBA4ClF,CAAC"}
|
|
@@ -5,11 +5,12 @@ import { Text } from "../../../components";
|
|
|
5
5
|
import { Tag } from "../Tag/Tag";
|
|
6
6
|
import { Address } from "../Address/Address";
|
|
7
7
|
const Wrapper = styled.div `
|
|
8
|
-
${withTokens("spacing-xxxs", "spacing-xxs", "spacing-xs", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed", "colors-content-subdued-default-default")}
|
|
8
|
+
${withTokens("spacing-xxxs", "spacing-xxs", "spacing-xs", "radius-s", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed", "colors-content-subdued-default-default")}
|
|
9
9
|
|
|
10
10
|
display: flex;
|
|
11
11
|
padding: var(--spacing-xs) var(--spacing-xxs);
|
|
12
12
|
cursor: pointer;
|
|
13
|
+
border-radius: var(--radius-s, 8px);
|
|
13
14
|
justify-content: space-between;
|
|
14
15
|
align-items: center;
|
|
15
16
|
|
|
@@ -37,7 +38,7 @@ export const AccountItem = ({ onClick, account, showIcon = true }) => {
|
|
|
37
38
|
marginBottom: "var(--spacing-xxxs)",
|
|
38
39
|
} },
|
|
39
40
|
React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", marginRight: "var(--spacing-xxs)", fontSize: "14px", lineHeight: "20px" }, name),
|
|
40
|
-
protocol && React.createElement(Tag,
|
|
41
|
+
protocol && React.createElement(Tag, { textTransform: "capitalize" }, protocol)),
|
|
41
42
|
React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, showIcon: showIcon }))),
|
|
42
43
|
React.createElement("div", { style: { display: "flex", flexDirection: "column", textAlign: "right" } },
|
|
43
44
|
React.createElement(Text, { fontSize: "14px" }, fiatValue),
|
|
@@ -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,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAmB7C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,EACpC,wCAAwC,CACzC
|
|
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,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAmB7C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,EACpC,wCAAwC,CACzC;;;;;;;;;;;;;;;;CAgBF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,EAAoB,EAAE,EAAE;IACrF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAElF,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,6BACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,eAAe;gBAC/B,UAAU,EAAE,QAAQ;aACrB;YAED,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE;gBAChF,6BACE,KAAK,EAAE;wBACL,OAAO,EAAE,MAAM;wBACf,aAAa,EAAE,KAAK;wBACpB,UAAU,EAAE,QAAQ;wBACpB,YAAY,EAAE,qBAAqB;qBACpC;oBAED,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,WAAW,EAAC,oBAAoB,EAChC,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,IAEhB,IAAI,CACA;oBACN,QAAQ,IAAI,oBAAC,GAAG,IAAC,aAAa,EAAC,YAAY,IAAE,QAAQ,CAAO,CACzD;gBACN,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACjF,CACF;QACN,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE;YAC1E,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,IAAE,SAAS,CAAQ;YACxC,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,+CAA+C,IACxE,OAAO,CACH,CACH,CACE,CACX,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -3,6 +3,6 @@ import { AssetItem } from "../AssetItem/AssetItem";
|
|
|
3
3
|
import { VirtualList } from "../VirtualList/VirtualList";
|
|
4
4
|
export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, }) => {
|
|
5
5
|
const renderAssetItem = useCallback(({ name, ticker, id }) => (React.createElement(AssetItem, { name: name, ticker: ticker, id: id, onClick: onClick })), [onClick]);
|
|
6
|
-
return (React.createElement(VirtualList, { itemHeight:
|
|
6
|
+
return (React.createElement(VirtualList, { itemHeight: 70, items: assets, onVisibleItemsScrollEnd: onVisibleItemsScrollEnd, renderItem: renderAssetItem }));
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=AssetList.js.map
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
|
-
export declare const Tag: ({ children }: {
|
|
2
|
+
export declare const Tag: ({ textTransform, children, }: {
|
|
3
|
+
textTransform?: string | undefined;
|
|
3
4
|
children: ReactNode;
|
|
4
5
|
}) => React.JSX.Element;
|
|
5
6
|
//# sourceMappingURL=Tag.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBzC,eAAO,MAAM,GAAG
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBzC,eAAO,MAAM,GAAG;;cAKJ,SAAS;uBAcpB,CAAC"}
|
|
@@ -10,8 +10,8 @@ const Wrapper = styled.div `
|
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
background-color: var(--colors-surface-transparent-subdued-default);
|
|
12
12
|
`;
|
|
13
|
-
export const Tag = ({ children }) => {
|
|
13
|
+
export const Tag = ({ textTransform = "none", children, }) => {
|
|
14
14
|
return (React.createElement(Wrapper, { "data-testid": "tag" },
|
|
15
|
-
React.createElement(Text, { color: "var(--colors-content-subdued-default-default)", fontSize: "10px", lineHeight: "16px" }, children)));
|
|
15
|
+
React.createElement(Text, { color: "var(--colors-content-subdued-default-default)", fontSize: "10px", lineHeight: "16px", textTransform: textTransform }, children)));
|
|
16
16
|
};
|
|
17
17
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,4CAA4C,EAC5C,wCAAwC,EACxC,WAAW,EACX,cAAc,CACf;;;;;;CAMF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,4CAA4C,EAC5C,wCAAwC,EACxC,WAAW,EACX,cAAc,CACf;;;;;;CAMF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,aAAa,GAAG,MAAM,EACtB,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO,mBAAa,KAAK;QACxB,oBAAC,IAAI,IACH,KAAK,EAAC,+CAA+C,EACrD,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,aAAa,EAAE,aAAa,IAE3B,QAAQ,CACJ,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAYjD;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAQF,eAAO,MAAM,WAAW,kIAUrB,iBAAiB,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAYjD;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAQF,eAAO,MAAM,WAAW,kIAUrB,iBAAiB,CAAC,CAAC,sBAkErB,CAAC"}
|
|
@@ -30,7 +30,7 @@ export const VirtualList = ({ itemHeight, overscan = 5, LoadingComponent, isLoad
|
|
|
30
30
|
rowVirtualizer.getVirtualItems(),
|
|
31
31
|
]);
|
|
32
32
|
const showCustomLoadingComponent = !!LoadingComponent;
|
|
33
|
-
return (React.createElement("div", { ref: parentRef, style: { width: "100%", height: "100%", overflow: "auto" } },
|
|
33
|
+
return (React.createElement("div", { ref: parentRef, style: { width: "100%", height: "100%", overflow: "auto", scrollbarWidth: "none" } },
|
|
34
34
|
React.createElement("div", { style: {
|
|
35
35
|
height: `${rowVirtualizer.getTotalSize()}px`,
|
|
36
36
|
width: "100%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA2D3D,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CACpC,oBAAC,IAAI,IAAC,cAAc,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM;IAC7D,oBAAC,cAAc,OAAG,CACb,CACR,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAK,EAC9B,UAAU,EACV,QAAQ,GAAG,CAAC,EACZ,gBAAgB,EAChB,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,CAAC,EACb,uBAAuB,EACvB,KAAK,EACL,UAAU,GACU,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,MAAM,cAAc,GAAG,cAAc,CAAC;QACpC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM;QACpD,gBAAgB,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO;QACzC,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU;QAC9B,QAAQ;KACT,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,cAAc,CAAC,eAAe,EAAE,CAAC;QAC/C,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO;QAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAEzC,IACE,QAAQ,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS;YAC9C,WAAW;YACX,CAAC,SAAS;YACV,uBAAuB,EACvB,CAAC;YACD,uBAAuB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE;QACD,WAAW;QACX,uBAAuB;QACvB,KAAK,CAAC,MAAM;QACZ,SAAS;QACT,cAAc,CAAC,eAAe,EAAE;KACjC,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAAG,CAAC,CAAC,gBAAgB,CAAC;IAEtD,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA2D3D,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CACpC,oBAAC,IAAI,IAAC,cAAc,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM;IAC7D,oBAAC,cAAc,OAAG,CACb,CACR,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAK,EAC9B,UAAU,EACV,QAAQ,GAAG,CAAC,EACZ,gBAAgB,EAChB,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,CAAC,EACb,uBAAuB,EACvB,KAAK,EACL,UAAU,GACU,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,MAAM,cAAc,GAAG,cAAc,CAAC;QACpC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM;QACpD,gBAAgB,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO;QACzC,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU;QAC9B,QAAQ;KACT,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,cAAc,CAAC,eAAe,EAAE,CAAC;QAC/C,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO;QAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAEzC,IACE,QAAQ,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS;YAC9C,WAAW;YACX,CAAC,SAAS;YACV,uBAAuB,EACvB,CAAC;YACD,uBAAuB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE;QACD,WAAW;QACX,uBAAuB;QACvB,KAAK,CAAC,MAAM;QACZ,SAAS;QACT,cAAc,CAAC,eAAe,EAAE;KACjC,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAAG,CAAC,CAAC,gBAAgB,CAAC;IAEtD,OAAO,CACL,6BACE,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE;QAElF,6BACE,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG,cAAc,CAAC,YAAY,EAAE,IAAI;gBAC5C,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,UAAU;aACrB,IAEA,cAAc,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,UAAuB,EAAE,EAAE,CAAC,CACjE,6BACE,GAAG,EAAE,UAAU,CAAC,KAAK,gBACT,UAAU,CAAC,KAAK,EAC5B,GAAG,EAAE,cAAc,CAAC,cAAc,EAClC,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,SAAS,EAAE,cAAc,UAAU,CAAC,KAAK,KAAK;gBAC9C,MAAM,EAAE,GAAG,UAAU,IAAI;gBACzB,KAAK,EAAE,MAAM;aACd,IAEA,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAChC,CACP,CAAC,CACE;QACL,SAAS,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,oBAAC,uBAAuB,OAAG,CAAC,CACvF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.27.0-nightly.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"react-transition-group": "^4.4.2",
|
|
76
76
|
"react-window": "^1.8.6",
|
|
77
77
|
"styled-system": "^5.1.5",
|
|
78
|
-
"@ledgerhq/crypto-icons-ui": "^1.14.0
|
|
78
|
+
"@ledgerhq/crypto-icons-ui": "^1.14.0",
|
|
79
79
|
"@ledgerhq/icons-ui": "^0.10.0",
|
|
80
80
|
"@ledgerhq/ui-shared": "^0.3.0"
|
|
81
81
|
},
|