@ledgerhq/react-ui 0.27.0 → 0.28.0-next.0

package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js

@@ -55,6 +55,11 @@ const Wrapper = import_styled_components.default.div`
   border-radius: var(--radius-s, 8px);
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 200px;
+  overflow: hidden;
 
   :hover {
     background-color: var(--colors-surface-transparent-hover);
@@ -64,41 +69,82 @@ const Wrapper = import_styled_components.default.div`
     background-color: var(--colors-surface-transparent-pressed);
   }
 `;
+const ContentContainer = import_styled_components.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+`;
+const AccountInfoContainer = import_styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+`;
+const NameRow = import_styled_components.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: var(--spacing-xxxs);
+  min-width: 0;
+  width: 100%;
+`;
+const NameDiv = import_styled_components.default.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
+  max-width: fit-content;
+`;
+const TagWrapper = import_styled_components.default.div`
+  flex-shrink: 0;
+  margin-left: var(--spacing-xxs);
+  display: flex;
+  flex: 1;
+  max-width: fit-content;
+  align-items: center;
+`;
+const BalanceContainer = import_styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  flex-shrink: 0;
+  margin-left: var(--spacing-xs);
+`;
 const AccountItem = ({ onClick, account, showIcon = true }) => {
-  const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;
-  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(
-    "div",
+  const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, /* @__PURE__ */ import_react.default.createElement(AccountInfoContainer, null, /* @__PURE__ */ import_react.default.createElement(NameRow, null, /* @__PURE__ */ import_react.default.createElement(NameDiv, null, /* @__PURE__ */ import_react.default.createElement(
+    import_components.Text,
     {
+      variant: "largeLineHeight",
+      fontWeight: "semiBold",
+      color: "var(--colors-content-default-default)",
+      fontSize: "14px",
+      lineHeight: "20px",
+      title: name,
       style: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center"
+        display: "block",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" } }, /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          marginBottom: "var(--spacing-xxxs)"
-        }
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_components.Text,
-        {
-          variant: "largeLineHeight",
-          fontWeight: "semiBold",
-          color: "var(--colors-content-default-default)",
-          marginRight: "var(--spacing-xxs)",
-          fontSize: "14px",
-          lineHeight: "20px"
-        },
-        name
-      ),
-      protocol && /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { textTransform: "capitalize" }, protocol)
-    ), /* @__PURE__ */ import_react.default.createElement(import_Address.Address, { address, cryptoId, ticker, showIcon }))
-  ), /* @__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)));
+    name
+  )), protocol && /* @__PURE__ */ import_react.default.createElement(TagWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { textTransform: "uppercase" }, protocol))), /* @__PURE__ */ import_react.default.createElement(
+    import_Address.Address,
+    {
+      address,
+      cryptoId,
+      ticker,
+      parentId,
+      showIcon
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, /* @__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))));
 };
 //# sourceMappingURL=AccountItem.js.map

package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],
-  "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"],
-  "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;",
+  "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  parentId?: 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  width: 100%;\n  box-sizing: border-box;\n  max-width: 100%;\n  min-width: 200px;\n  overflow: hidden;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst ContentContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\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  text-align: right;\n  flex-shrink: 0;\n  margin-left: var(--spacing-xs);\n`;\n\nexport const AccountItem = ({ onClick, account, showIcon = true }: AccountItemProps) => {\n  const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;\n\n  return (\n    <Wrapper onClick={onClick}>\n      <ContentContainer>\n        <AccountInfoContainer>\n          <NameRow>\n            <NameDiv>\n              <Text\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          <Text fontSize=\"14px\">{fiatValue}</Text>\n          <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n            {balance}\n          </Text>\n        </BalanceContainer>\n      </ContentContainer>\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,iBAAoB;AACpB,qBAAwB;AAoBxB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBH,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhC,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;AAAA;AAQzB,MAAM,cAAc,CAAC,EAAE,SAAS,SAAS,WAAW,KAAK,MAAwB;AACtF,QAAM,EAAE,MAAM,SAAS,WAAW,UAAU,SAAS,QAAQ,UAAU,SAAS,IAAI;AAEpF,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,4BACC,6BAAAA,QAAA,cAAC,eACC,6BAAAA,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,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,EACF,CACF,GACA,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,UAAQ,SAAU,GACjC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,QAAO,OAAM,mDACzB,OACH,CACF,CACF,CACF;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/cjs/pre-ldls/components/Address/Address.js

@@ -47,7 +47,8 @@ const Address = ({
   address,
   showIcon,
   cryptoId,
-  ticker
+  ticker,
+  parentId
 }) => {
   return /* @__PURE__ */ import_react.default.createElement(Wrapper, null, /* @__PURE__ */ import_react.default.createElement(
     import_components.Text,
@@ -57,6 +58,6 @@ const Address = ({
       color: "var(--colors-content-subdued-default-default)"
     },
     address
-  ), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, ticker }));
+  ), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, ticker, network: parentId }));
 };
 //# sourceMappingURL=Address.js.map

package/lib/cjs/pre-ldls/components/Address/Address.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/Address/Address.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nconst Wrapper = styled.div`\n  ${withTokens(\"spacing-xxxs\", \"colors-content-subdued-default-default\")}\n\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Address = ({\n  address,\n  showIcon,\n  cryptoId,\n  ticker,\n}: {\n  address: string;\n  showIcon: boolean;\n  cryptoId?: string;\n  ticker?: string;\n}) => {\n  return (\n    <Wrapper>\n      <Text\n        marginRight=\"var(--spacing-xxxs)\"\n        fontSize=\"12px\"\n        color=\"var(--colors-content-subdued-default-default)\"\n      >\n        {address}\n      </Text>\n      {showIcon && <CryptoIcon ledgerId={cryptoId} ticker={ticker} />}\n    </Wrapper>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAA2B;AAE3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB,wBAAW,gBAAgB,wCAAwC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,SACE,6BAAAC,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,UAAS;AAAA,MACT,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,YAAY,6BAAAA,QAAA,cAAC,gCAAW,UAAU,UAAU,QAAgB,CAC/D;AAEJ;",
+  "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        {address}\n      </Text>\n      {showIcon && <CryptoIcon ledgerId={cryptoId} ticker={ticker} network={parentId} />}\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAA2B;AAE3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB,wBAAW,gBAAgB,wCAAwC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,SACE,6BAAAC,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,UAAS;AAAA,MACT,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,YAAY,6BAAAA,QAAA,cAAC,gCAAW,UAAU,UAAU,QAAgB,SAAS,UAAU,CAClF;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/cjs/pre-ldls/components/AssetList/AssetList.js

@@ -37,7 +37,8 @@ var import_VirtualList = require("../VirtualList/VirtualList");
 const AssetList = ({
   assets,
   onClick,
-  onVisibleItemsScrollEnd
+  onVisibleItemsScrollEnd,
+  scrollToTop
 }) => {
   const renderAssetItem = (0, import_react.useCallback)(
     ({ name, ticker, id }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, id, onClick }),
@@ -49,7 +50,8 @@ const AssetList = ({
       itemHeight: 70,
       items: assets,
       onVisibleItemsScrollEnd,
-      renderItem: renderAssetItem
+      renderItem: renderAssetItem,
+      scrollToTop
     }
   );
 };

package/lib/cjs/pre-ldls/components/AssetList/AssetList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],
-  "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"],
-  "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;",
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { AssetItem, AssetType } from \"../AssetItem/AssetItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AssetList = ({\n  assets,\n  onClick,\n  onVisibleItemsScrollEnd,\n  scrollToTop,\n}: {\n  assets: AssetType[];\n  onClick: (asset: AssetType) => void;\n  onVisibleItemsScrollEnd?: () => void;\n  scrollToTop?: boolean;\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      scrollToTop={scrollToTop}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;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,MACZ;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js

@@ -50,7 +50,8 @@ const meta = {
       ticker: "BTC",
       id: "bitcoin"
     })),
-    onClick: testFn
+    onClick: testFn,
+    scrollToTop: false
   }
 };
 var AssetList_stories_default = meta;

package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AssetList/AssetList.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetList } from \"./AssetList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof AssetList> = {\n  component: AssetList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/AssetList\",\n  tags: [\"autodocs\"],\n  args: {\n    assets: Array.from({ length: 50 }).map((_, i) => ({\n      name: `Bitcoin ${i}`,\n      ticker: \"BTC\",\n      id: \"bitcoin\",\n    })),\n    onClick: testFn,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetList>;\n\nexport const Default: Story = {};\n\nexport const TestAssetClick: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const input = canvas.getByText(\"Bitcoin 1\");\n    await userEvent.click(input);\n    await expect(testFn).toHaveBeenCalledWith({ name: \"Bitcoin 1\", ticker: \"BTC\", id: \"bitcoin\" });\n  },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA8C;AAC9C,mBAAkB;AAElB,MAAM,aAAS,gBAAG;AAElB,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,YAAY;AAAA,IACV,WACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,KAC5B,6BAAAA,QAAA,cAAC,WAAM,CACT;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,IACN,EAAE;AAAA,IACF,SAAS;AAAA,EACX;AACF;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,iBAAwB;AAAA,EACnC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,UAAU,WAAW;AAC1C,UAAM,sBAAU,MAAM,KAAK;AAC3B,cAAM,oBAAO,MAAM,EAAE,qBAAqB,EAAE,MAAM,aAAa,QAAQ,OAAO,IAAI,UAAU,CAAC;AAAA,EAC/F;AACF;",
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetList } from \"./AssetList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof AssetList> = {\n  component: AssetList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/AssetList\",\n  tags: [\"autodocs\"],\n  args: {\n    assets: Array.from({ length: 50 }).map((_, i) => ({\n      name: `Bitcoin ${i}`,\n      ticker: \"BTC\",\n      id: \"bitcoin\",\n    })),\n    onClick: testFn,\n    scrollToTop: false,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetList>;\n\nexport const Default: Story = {};\n\nexport const TestAssetClick: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const input = canvas.getByText(\"Bitcoin 1\");\n    await userEvent.click(input);\n    await expect(testFn).toHaveBeenCalledWith({ name: \"Bitcoin 1\", ticker: \"BTC\", id: \"bitcoin\" });\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA8C;AAC9C,mBAAkB;AAElB,MAAM,aAAS,gBAAG;AAElB,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,YAAY;AAAA,IACV,WACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,KAC5B,6BAAAA,QAAA,cAAC,WAAM,CACT;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,IACN,EAAE;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,iBAAwB;AAAA,EACnC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,UAAU,WAAW;AAC1C,UAAM,sBAAU,MAAM,KAAK;AAC3B,cAAM,oBAAO,MAAM,EAAE,qBAAqB,EAAE,MAAM,aAAa,QAAQ,OAAO,IAAI,UAAU,CAAC;AAAA,EAC/F;AACF;",
   "names": ["React"]
 }

package/lib/cjs/pre-ldls/components/Tag/Tag.js

@@ -47,6 +47,7 @@ const Wrapper = import_styled_components.default.div`
   border-radius: var(--radius-xs);
   display: inline-flex;
   background-color: var(--colors-surface-transparent-subdued-default);
+  flex-shrink: 0;
 `;
 const Tag = ({
   textTransform = "none",

package/lib/cjs/pre-ldls/components/Tag/Tag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/Tag/Tag.tsx"],
-  "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"],
-  "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;",
+  "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  flex-shrink: 0;\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"],
+  "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;AAAA;AASI,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;",
   "names": ["styled", "React"]
 }

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js

@@ -35,6 +35,9 @@ var import_react = __toESM(require("react"));
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_components = require("../../../components");
 const DefaultLoadingComponent = () => /* @__PURE__ */ import_react.default.createElement(import_components.Flex, { justifyContent: "center", alignItems: "center", height: "76px" }, /* @__PURE__ */ import_react.default.createElement(import_components.InfiniteLoader, null));
+function easeInOutCubic(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
 const VirtualList = ({
   itemHeight,
   overscan = 5,
@@ -42,32 +45,59 @@ const VirtualList = ({
   isLoading,
   hasNextPage = false,
   threshold = 5,
-  onVisibleItemsScrollEnd,
   items,
-  renderItem
+  onVisibleItemsScrollEnd,
+  renderItem,
+  scrollToTop = false
 }) => {
   const parentRef = (0, import_react.useRef)(null);
+  const scrollToFn = (0, import_react.useCallback)(
+    (offset, options, instance) => {
+      const element = instance.scrollElement;
+      if (!element)
+        return;
+      const duration = options.behavior === "smooth" ? 100 : 0;
+      if (duration === 0) {
+        element.scrollTop = offset;
+        return;
+      }
+      const startTime = performance.now();
+      const startTop = element.scrollTop;
+      const distanceToScroll = offset - startTop;
+      const scrollStep = (currentTime) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easedProgress = easeInOutCubic(progress);
+        element.scrollTop = startTop + distanceToScroll * easedProgress;
+        if (progress < 1) {
+          requestAnimationFrame(scrollStep);
+        }
+      };
+      requestAnimationFrame(scrollStep);
+    },
+    []
+  );
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: hasNextPage ? items.length + 1 : items.length,
+    overscan,
     getScrollElement: () => parentRef.current,
     estimateSize: () => itemHeight,
-    overscan
+    scrollToFn
   });
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  (0, import_react.useEffect)(() => {
+    if (scrollToTop && parentRef.current) {
+      scrollToFn(0, { behavior: "smooth" }, { scrollElement: parentRef.current });
+    }
+  }, [scrollToTop, scrollToFn]);
   (0, import_react.useEffect)(() => {
-    const items2 = rowVirtualizer.getVirtualItems();
-    if (!items2.length)
+    if (!virtualItems.length)
       return;
-    const lastItem = items2[items2.length - 1];
-    if (lastItem.index >= items2.length - 1 - threshold && hasNextPage && !isLoading && onVisibleItemsScrollEnd) {
+    const lastItem = virtualItems[virtualItems.length - 1];
+    if (lastItem.index >= virtualItems.length - 1 - threshold && hasNextPage && !isLoading && onVisibleItemsScrollEnd) {
       onVisibleItemsScrollEnd();
     }
-  }, [
-    hasNextPage,
-    onVisibleItemsScrollEnd,
-    items.length,
-    isLoading,
-    rowVirtualizer.getVirtualItems()
-  ]);
+  }, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);
   const showCustomLoadingComponent = !!LoadingComponent;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],
-  "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"],
-  "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;",
-  "names": ["React", "items"]
+  "sourcesContent": ["import React, { useEffect, useRef, useCallback } 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   * When set to true, the list will scroll to the top\n   */\n  scrollToTop?: boolean;\n};\n\nconst DefaultLoadingComponent = () => (\n  <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n    <InfiniteLoader />\n  </Flex>\n);\n\nfunction easeInOutCubic(t: number) {\n  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nexport const VirtualList = <T,>({\n  itemHeight,\n  overscan = 5,\n  LoadingComponent,\n  isLoading,\n  hasNextPage = false,\n  threshold = 5,\n  items,\n  onVisibleItemsScrollEnd,\n  renderItem,\n  scrollToTop = false,\n}: VirtualListProps<T>) => {\n  const parentRef = useRef<HTMLDivElement>(null);\n\n  const scrollToFn = useCallback(\n    (\n      offset: number,\n      options: { adjustments?: number; behavior?: \"auto\" | \"smooth\" },\n      instance: { scrollElement: HTMLElement | null },\n    ) => {\n      const element = instance.scrollElement;\n      if (!element) return;\n\n      const duration = options.behavior === \"smooth\" ? 100 : 0;\n\n      if (duration === 0) {\n        element.scrollTop = offset;\n        return;\n      }\n\n      const startTime = performance.now();\n      const startTop = element.scrollTop;\n      const distanceToScroll = offset - startTop;\n\n      const scrollStep = (currentTime: number) => {\n        const elapsed = currentTime - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n\n        const easedProgress = easeInOutCubic(progress);\n\n        element.scrollTop = startTop + distanceToScroll * easedProgress;\n\n        if (progress < 1) {\n          requestAnimationFrame(scrollStep);\n        }\n      };\n\n      requestAnimationFrame(scrollStep);\n    },\n    [],\n  );\n\n  const rowVirtualizer = useVirtualizer({\n    count: hasNextPage ? items.length + 1 : items.length,\n    overscan,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => itemHeight,\n    scrollToFn,\n  });\n\n  const virtualItems = rowVirtualizer.getVirtualItems();\n\n  useEffect(() => {\n    if (scrollToTop && parentRef.current) {\n      scrollToFn(0, { behavior: \"smooth\" }, { scrollElement: parentRef.current });\n    }\n  }, [scrollToTop, scrollToFn]);\n\n  useEffect(() => {\n    if (!virtualItems.length) return;\n    const lastItem = virtualItems[virtualItems.length - 1];\n\n    if (\n      lastItem.index >= virtualItems.length - 1 - threshold &&\n      hasNextPage &&\n      !isLoading &&\n      onVisibleItemsScrollEnd\n    ) {\n      onVisibleItemsScrollEnd();\n    }\n  }, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);\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"],
+  "mappings": "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",
+  "names": ["React"]
 }

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js

@@ -89,6 +89,9 @@ const meta = {
     },
     renderItem: {
       description: "Function to render each item in the list. Receives the index of the item as an argument and should return a React node."
+    },
+    scrollToTop: {
+      description: "When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position."
     }
   },
   args: {
@@ -101,7 +104,8 @@ const meta = {
     onVisibleItemsScrollEnd: () => {
     },
     items,
-    renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("h1", { tabIndex: i }, "Item #", i)
+    renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("h1", { tabIndex: i }, "Item #", i),
+    scrollToTop: false
   }
 };
 var VirtualList_stories_default = meta;

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.stories.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { VirtualList } from \"./VirtualList\";\nimport { action } from \"@storybook/addon-actions\";\nimport { expect, userEvent, waitFor, within } from \"@storybook/test\";\n\nconst items = Array.from({ length: 50 }, (_, i) => ({ i }));\n\nconst meta: Meta<typeof VirtualList<{ i: number }>> = {\n  component: VirtualList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/VirtualList\",\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n    docs: {\n      description: {\n        component:\n          \"A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering.\",\n      },\n    },\n  },\n  argTypes: {\n    itemHeight: {\n      description: \"Height of each item in the list.\",\n    },\n    overscan: {\n      description:\n        \"Number of extra items to render outside the visible viewport for smoother scrolling.\",\n      table: {\n        defaultValue: {\n          summary: \"5\",\n        },\n      },\n    },\n    LoadingComponent: {\n      description:\n        \"React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used.\",\n    },\n    isLoading: {\n      description: \"Indicates whether new items are currently being loaded.\",\n    },\n    hasNextPage: {\n      description:\n        \"Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.\",\n      defaultValue: {\n        summary: \"false\",\n      },\n    },\n    threshold: {\n      description:\n        \"Number of items to check before the end of the list to trigger loading more items.\",\n      defaultValue: {\n        summary: \"5\",\n      },\n    },\n    onVisibleItemsScrollEnd: {\n      description:\n        \"Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list.\",\n    },\n    renderItem: {\n      description:\n        \"Function to render each item in the list. Receives the index of the item as an argument and should return a React node.\",\n    },\n  },\n  args: {\n    itemHeight: 64,\n    LoadingComponent: undefined,\n    isLoading: false,\n    overscan: 5,\n    hasNextPage: false,\n    threshold: 5,\n    onVisibleItemsScrollEnd: () => {},\n    items,\n    renderItem: ({ i }: { i: number }) => <h1 tabIndex={i}>Item #{i}</h1>,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VirtualList<{ i: number }>>;\n\nexport const Default: Story = {\n  args: {\n    itemHeight: 50,\n    overscan: 5,\n    items,\n    renderItem: ({ i }: { i: number }) => (\n      <div style={{ height: 50, backgroundColor: \"lightblue\", border: \"1px solid black\" }}>\n        Item {i}\n      </div>\n    ),\n  },\n};\n\nexport const WithPagination: Story = {\n  render: args => {\n    const [items, setItems] = useState(Array.from({ length: 50 }, (_, i) => i));\n    const [isFetching, setIsFetching] = useState(false);\n\n    const handleFetchNextPage = async () => {\n      action(\"fetchNextPage\")();\n      if (isFetching) return;\n      setIsFetching(true);\n      await new Promise(resolve => setTimeout(resolve, 1000));\n      setItems(prev => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);\n      setIsFetching(false);\n    };\n\n    return (\n      <VirtualList\n        {...args}\n        isLoading={isFetching}\n        onVisibleItemsScrollEnd={handleFetchNextPage}\n        hasNextPage={true}\n        items={items}\n        renderItem={item => (\n          <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n            Item {item}\n          </div>\n        )}\n      />\n    );\n  },\n  args: {\n    itemHeight: 50,\n    overscan: 5,\n    hasNextPage: true,\n    isLoading: false,\n  },\n};\n\nexport const TestVirtualList: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const visibleItems = canvas.getAllByText(/Item #/i);\n    const firstVisibleItem = visibleItems[0];\n    const lastVisibleItem = visibleItems[visibleItems.length - 1];\n\n    // need to add 5 due to the overscan set to 5 (it renders 5 items before and after the visible items)\n    await expect(visibleItems.length).toBeLessThanOrEqual(12);\n\n    await expect(firstVisibleItem).toBeInTheDocument();\n\n    await userEvent.pointer([\n      { keys: \"[TouchA>]\", target: lastVisibleItem },\n      { target: firstVisibleItem },\n      { keys: \"[/TouchA]\" },\n    ]);\n\n    await waitFor(() => expect(firstVisibleItem).not.toBeInTheDocument());\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { VirtualList } from \"./VirtualList\";\nimport { action } from \"@storybook/addon-actions\";\nimport { expect, userEvent, waitFor, within } from \"@storybook/test\";\n\nconst items = Array.from({ length: 50 }, (_, i) => ({ i }));\n\nconst meta: Meta<typeof VirtualList<{ i: number }>> = {\n  component: VirtualList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/VirtualList\",\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n    docs: {\n      description: {\n        component:\n          \"A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering.\",\n      },\n    },\n  },\n  argTypes: {\n    itemHeight: {\n      description: \"Height of each item in the list.\",\n    },\n    overscan: {\n      description:\n        \"Number of extra items to render outside the visible viewport for smoother scrolling.\",\n      table: {\n        defaultValue: {\n          summary: \"5\",\n        },\n      },\n    },\n    LoadingComponent: {\n      description:\n        \"React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used.\",\n    },\n    isLoading: {\n      description: \"Indicates whether new items are currently being loaded.\",\n    },\n    hasNextPage: {\n      description:\n        \"Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.\",\n      defaultValue: {\n        summary: \"false\",\n      },\n    },\n    threshold: {\n      description:\n        \"Number of items to check before the end of the list to trigger loading more items.\",\n      defaultValue: {\n        summary: \"5\",\n      },\n    },\n    onVisibleItemsScrollEnd: {\n      description:\n        \"Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list.\",\n    },\n    renderItem: {\n      description:\n        \"Function to render each item in the list. Receives the index of the item as an argument and should return a React node.\",\n    },\n    scrollToTop: {\n      description:\n        \"When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position.\",\n    },\n  },\n  args: {\n    itemHeight: 64,\n    LoadingComponent: undefined,\n    isLoading: false,\n    overscan: 5,\n    hasNextPage: false,\n    threshold: 5,\n    onVisibleItemsScrollEnd: () => {},\n    items,\n    renderItem: ({ i }: { i: number }) => <h1 tabIndex={i}>Item #{i}</h1>,\n    scrollToTop: false,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VirtualList<{ i: number }>>;\n\nexport const Default: Story = {\n  args: {\n    itemHeight: 50,\n    overscan: 5,\n    items,\n    renderItem: ({ i }: { i: number }) => (\n      <div style={{ height: 50, backgroundColor: \"lightblue\", border: \"1px solid black\" }}>\n        Item {i}\n      </div>\n    ),\n  },\n};\n\nexport const WithPagination: Story = {\n  render: args => {\n    const [items, setItems] = useState(Array.from({ length: 50 }, (_, i) => i));\n    const [isFetching, setIsFetching] = useState(false);\n\n    const handleFetchNextPage = async () => {\n      action(\"fetchNextPage\")();\n      if (isFetching) return;\n      setIsFetching(true);\n      await new Promise(resolve => setTimeout(resolve, 1000));\n      setItems(prev => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);\n      setIsFetching(false);\n    };\n\n    return (\n      <VirtualList\n        {...args}\n        isLoading={isFetching}\n        onVisibleItemsScrollEnd={handleFetchNextPage}\n        hasNextPage={true}\n        items={items}\n        renderItem={item => (\n          <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n            Item {item}\n          </div>\n        )}\n      />\n    );\n  },\n  args: {\n    itemHeight: 50,\n    overscan: 5,\n    hasNextPage: true,\n    isLoading: false,\n  },\n};\n\nexport const TestVirtualList: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const visibleItems = canvas.getAllByText(/Item #/i);\n    const firstVisibleItem = visibleItems[0];\n    const lastVisibleItem = visibleItems[visibleItems.length - 1];\n\n    // need to add 5 due to the overscan set to 5 (it renders 5 items before and after the visible items)\n    await expect(visibleItems.length).toBeLessThanOrEqual(12);\n\n    await expect(firstVisibleItem).toBeInTheDocument();\n\n    await userEvent.pointer([\n      { keys: \"[TouchA>]\", target: lastVisibleItem },\n      { target: firstVisibleItem },\n      { keys: \"[/TouchA]\" },\n    ]);\n\n    await waitFor(() => expect(firstVisibleItem).not.toBeInTheDocument());\n  },\n};\n"],
+  "mappings": "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",
   "names": ["React", "items"]
 }

package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts

@@ -8,6 +8,7 @@ export type Account = {
     protocol?: string;
     cryptoId?: string;
     ticker?: string;
+    parentId?: string;
 };
 type AccountItemProps = {
     onClick: () => void;

package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map

@@ -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;AA8BF,eAAO,MAAM,WAAW,mCAA2C,gBAAgB,sBA4ClF,CAAC"}
+{"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;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAyFF,eAAO,MAAM,WAAW,mCAA2C,gBAAgB,sBAiDlF,CAAC"}

package/lib/pre-ldls/components/AccountItem/AccountItem.js

@@ -13,6 +13,11 @@ const Wrapper = styled.div `
   border-radius: var(--radius-s, 8px);
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 200px;
+  overflow: hidden;
 
   :hover {
     background-color: var(--colors-surface-transparent-hover);
@@ -22,26 +27,72 @@ const Wrapper = styled.div `
     background-color: var(--colors-surface-transparent-pressed);
   }
 `;
+const ContentContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+`;
+const AccountInfoContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+`;
+const NameRow = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: var(--spacing-xxxs);
+  min-width: 0;
+  width: 100%;
+`;
+const NameDiv = styled.div `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
+  max-width: fit-content;
+`;
+const TagWrapper = styled.div `
+  flex-shrink: 0;
+  margin-left: var(--spacing-xxs);
+  display: flex;
+  flex: 1;
+  max-width: fit-content;
+  align-items: center;
+`;
+const BalanceContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  flex-shrink: 0;
+  margin-left: var(--spacing-xs);
+`;
 export const AccountItem = ({ onClick, account, showIcon = true }) => {
-    const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;
+    const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
     return (React.createElement(Wrapper, { onClick: onClick },
-        React.createElement("div", { style: {
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-            } },
-            React.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" } },
-                React.createElement("div", { style: {
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        marginBottom: "var(--spacing-xxxs)",
-                    } },
-                    React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", marginRight: "var(--spacing-xxs)", fontSize: "14px", lineHeight: "20px" }, name),
-                    protocol && React.createElement(Tag, { textTransform: "capitalize" }, protocol)),
-                React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, showIcon: showIcon }))),
-        React.createElement("div", { style: { display: "flex", flexDirection: "column", textAlign: "right" } },
-            React.createElement(Text, { fontSize: "14px" }, fiatValue),
-            React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))));
+        React.createElement(ContentContainer, null,
+            React.createElement(AccountInfoContainer, null,
+                React.createElement(NameRow, null,
+                    React.createElement(NameDiv, null,
+                        React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", fontSize: "14px", lineHeight: "20px", title: name, style: {
+                                display: "block",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                            } }, name)),
+                    protocol && (React.createElement(TagWrapper, null,
+                        React.createElement(Tag, { textTransform: "uppercase" }, protocol)))),
+                React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, parentId: parentId, showIcon: showIcon })),
+            React.createElement(BalanceContainer, null,
+                React.createElement(Text, { fontSize: "14px" }, fiatValue),
+                React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance)))));
 };
 //# sourceMappingURL=AccountItem.js.map

package/lib/pre-ldls/components/AccountItem/AccountItem.js.map

@@ -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,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"}
+{"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;AAoB7C,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;;;;;;;;;;;;;;;;;;;;;CAqBF,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQlC,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;;;;;;CAMlC,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,QAAQ,EAAE,GAAG,OAAO,CAAC;IAE5F,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,oBAAC,gBAAgB;YACf,oBAAC,oBAAoB;gBACnB,oBAAC,OAAO;oBACN,oBAAC,OAAO;wBACN,oBAAC,IAAI,IACH,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,GAClB,CACmB;YACvB,oBAAC,gBAAgB;gBACf,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,IAAE,SAAS,CAAQ;gBACxC,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,+CAA+C,IACxE,OAAO,CACH,CACU,CACF,CACX,CACX,CAAC;AACJ,CAAC,CAAC"}

package/lib/pre-ldls/components/Address/Address.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-export declare const Address: ({ address, showIcon, cryptoId, ticker, }: {
+export declare const Address: ({ address, showIcon, cryptoId, ticker, parentId, }: {
     address: string;
     showIcon: boolean;
     cryptoId?: string | undefined;
     ticker?: string | undefined;
+    parentId?: string | undefined;
 }) => React.JSX.Element;
 //# sourceMappingURL=Address.d.ts.map

package/lib/pre-ldls/components/Address/Address.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,eAAO,MAAM,OAAO;aAMT,MAAM;cACL,OAAO;;;uBAgBlB,CAAC"}
+{"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,eAAO,MAAM,OAAO;aAOT,MAAM;cACL,OAAO;;;;uBAiBlB,CAAC"}

package/lib/pre-ldls/components/Address/Address.js

@@ -10,9 +10,9 @@ const Wrapper = styled.div `
   flex-direction: row;
   align-items: center;
 `;
-export const Address = ({ address, showIcon, cryptoId, ticker, }) => {
+export const Address = ({ address, showIcon, cryptoId, ticker, parentId, }) => {
     return (React.createElement(Wrapper, null,
         React.createElement(Text, { marginRight: "var(--spacing-xxxs)", fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, address),
-        showIcon && React.createElement(CryptoIcon, { ledgerId: cryptoId, ticker: ticker })));
+        showIcon && React.createElement(CryptoIcon, { ledgerId: cryptoId, ticker: ticker, network: parentId })));
 };
 //# sourceMappingURL=Address.js.map

package/lib/pre-ldls/components/Address/Address.js.map

@@ -1 +1 @@
-{"version":3,"file":"Address.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CAAC,cAAc,EAAE,wCAAwC,CAAC;;;;;CAKvE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,GAMP,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,IAAI,IACH,WAAW,EAAC,qBAAqB,EACjC,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,+CAA+C,IAEpD,OAAO,CACH;QACN,QAAQ,IAAI,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,CACvD,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Address.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CAAC,cAAc,EAAE,wCAAwC,CAAC;;;;;CAKvE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,GAOT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,IAAI,IACH,WAAW,EAAC,qBAAqB,EACjC,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,+CAA+C,IAEpD,OAAO,CACH;QACN,QAAQ,IAAI,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,GAAI,CAC1E,CACX,CAAC;AACJ,CAAC,CAAC"}

package/lib/pre-ldls/components/AssetList/AssetList.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import { AssetType } from "../AssetItem/AssetItem";
-export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, }: {
+export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, }: {
     assets: AssetType[];
     onClick: (asset: AssetType) => void;
     onVisibleItemsScrollEnd?: (() => void) | undefined;
+    scrollToTop?: boolean | undefined;
 }) => React.JSX.Element;
 //# sourceMappingURL=AssetList.d.ts.map

package/lib/pre-ldls/components/AssetList/AssetList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,eAAO,MAAM,SAAS;YAKZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;uBAiBrC,CAAC"}
+{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,eAAO,MAAM,SAAS;YAMZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;uBAmBrC,CAAC"}

package/lib/pre-ldls/components/AssetList/AssetList.js

@@ -1,8 +1,8 @@
 import React, { useCallback } from "react";
 import { AssetItem } from "../AssetItem/AssetItem";
 import { VirtualList } from "../VirtualList/VirtualList";
-export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, }) => {
+export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, }) => {
     const renderAssetItem = useCallback(({ name, ticker, id }) => (React.createElement(AssetItem, { name: name, ticker: ticker, id: id, onClick: onClick })), [onClick]);
-    return (React.createElement(VirtualList, { itemHeight: 70, items: assets, onVisibleItemsScrollEnd: onVisibleItemsScrollEnd, renderItem: renderAssetItem }));
+    return (React.createElement(VirtualList, { itemHeight: 70, items: assets, onVisibleItemsScrollEnd: onVisibleItemsScrollEnd, renderItem: renderAssetItem, scrollToTop: scrollToTop }));
 };
 //# sourceMappingURL=AssetList.js.map

package/lib/pre-ldls/components/AssetList/AssetList.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,MAAM,EACN,OAAO,EACP,uBAAuB,GAKxB,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAa,EAAE,EAAE,CAAC,CACnC,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,GAAI,CACpE,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IACV,UAAU,EAAE,EAAE,EACd,KAAK,EAAE,MAAM,EACb,uBAAuB,EAAE,uBAAuB,EAChD,UAAU,EAAE,eAAe,GAC3B,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"AssetList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,MAAM,EACN,OAAO,EACP,uBAAuB,EACvB,WAAW,GAMZ,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAa,EAAE,EAAE,CAAC,CACnC,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,GAAI,CACpE,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IACV,UAAU,EAAE,EAAE,EACd,KAAK,EAAE,MAAM,EACb,uBAAuB,EAAE,uBAAuB,EAChD,UAAU,EAAE,eAAe,EAC3B,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC,CAAC"}

package/lib/pre-ldls/components/Tag/Tag.d.ts.map

@@ -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;;cAKJ,SAAS;uBAcpB,CAAC"}
+{"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;AAoBzC,eAAO,MAAM,GAAG;;cAKJ,SAAS;uBAcpB,CAAC"}

package/lib/pre-ldls/components/Tag/Tag.js

@@ -9,6 +9,7 @@ const Wrapper = styled.div `
   border-radius: var(--radius-xs);
   display: inline-flex;
   background-color: var(--colors-surface-transparent-subdued-default);
+  flex-shrink: 0;
 `;
 export const Tag = ({ textTransform = "none", children, }) => {
     return (React.createElement(Wrapper, { "data-testid": "tag" },

package/lib/pre-ldls/components/Tag/Tag.js.map

@@ -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,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"}
+{"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;;;;;;;CAOF,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"}

package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts

@@ -46,7 +46,11 @@ type VirtualListProps<T> = {
      * The array of items which will be rendered
      */
     items: T[];
+    /**
+     * When set to true, the list will scroll to the top
+     */
+    scrollToTop?: boolean;
 };
-export declare const VirtualList: <T>({ itemHeight, overscan, LoadingComponent, isLoading, hasNextPage, threshold, onVisibleItemsScrollEnd, items, renderItem, }: VirtualListProps<T>) => React.JSX.Element;
+export declare const VirtualList: <T>({ itemHeight, overscan, LoadingComponent, isLoading, hasNextPage, threshold, items, onVisibleItemsScrollEnd, renderItem, scrollToTop, }: VirtualListProps<T>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=VirtualList.d.ts.map

package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts.map

@@ -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,sBAkErB,CAAC"}
+{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D;;;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;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAYF,eAAO,MAAM,WAAW,+IAWrB,iBAAiB,CAAC,CAAC,sBA0GrB,CAAC"}

package/lib/pre-ldls/components/VirtualList/VirtualList.js

@@ -1,34 +1,60 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useCallback } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Flex, InfiniteLoader } from "../../../components";
 const DefaultLoadingComponent = () => (React.createElement(Flex, { justifyContent: "center", alignItems: "center", height: "76px" },
     React.createElement(InfiniteLoader, null)));
-export const VirtualList = ({ itemHeight, overscan = 5, LoadingComponent, isLoading, hasNextPage = false, threshold = 5, onVisibleItemsScrollEnd, items, renderItem, }) => {
+function easeInOutCubic(t) {
+    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+export const VirtualList = ({ itemHeight, overscan = 5, LoadingComponent, isLoading, hasNextPage = false, threshold = 5, items, onVisibleItemsScrollEnd, renderItem, scrollToTop = false, }) => {
     const parentRef = useRef(null);
+    const scrollToFn = useCallback((offset, options, instance) => {
+        const element = instance.scrollElement;
+        if (!element)
+            return;
+        const duration = options.behavior === "smooth" ? 100 : 0;
+        if (duration === 0) {
+            element.scrollTop = offset;
+            return;
+        }
+        const startTime = performance.now();
+        const startTop = element.scrollTop;
+        const distanceToScroll = offset - startTop;
+        const scrollStep = (currentTime) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const easedProgress = easeInOutCubic(progress);
+            element.scrollTop = startTop + distanceToScroll * easedProgress;
+            if (progress < 1) {
+                requestAnimationFrame(scrollStep);
+            }
+        };
+        requestAnimationFrame(scrollStep);
+    }, []);
     const rowVirtualizer = useVirtualizer({
         count: hasNextPage ? items.length + 1 : items.length,
+        overscan,
         getScrollElement: () => parentRef.current,
         estimateSize: () => itemHeight,
-        overscan,
+        scrollToFn,
     });
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    useEffect(() => {
+        if (scrollToTop && parentRef.current) {
+            scrollToFn(0, { behavior: "smooth" }, { scrollElement: parentRef.current });
+        }
+    }, [scrollToTop, scrollToFn]);
     useEffect(() => {
-        const items = rowVirtualizer.getVirtualItems();
-        if (!items.length)
+        if (!virtualItems.length)
             return;
-        const lastItem = items[items.length - 1];
-        if (lastItem.index >= items.length - 1 - threshold &&
+        const lastItem = virtualItems[virtualItems.length - 1];
+        if (lastItem.index >= virtualItems.length - 1 - threshold &&
             hasNextPage &&
             !isLoading &&
             onVisibleItemsScrollEnd) {
             onVisibleItemsScrollEnd();
         }
-    }, [
-        hasNextPage,
-        onVisibleItemsScrollEnd,
-        items.length,
-        isLoading,
-        rowVirtualizer.getVirtualItems(),
-    ]);
+    }, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);
     const showCustomLoadingComponent = !!LoadingComponent;
     return (React.createElement("div", { ref: parentRef, style: { width: "100%", height: "100%", overflow: "auto", scrollbarWidth: "none" } },
         React.createElement("div", { style: {

package/lib/pre-ldls/components/VirtualList/VirtualList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.27.0",
+  "version": "0.28.0-next.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -76,8 +76,8 @@
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
     "@ledgerhq/crypto-icons-ui": "^1.14.0",
-    "@ledgerhq/ui-shared": "^0.3.0",
-    "@ledgerhq/icons-ui": "^0.10.0"
+    "@ledgerhq/icons-ui": "^0.10.0",
+    "@ledgerhq/ui-shared": "^0.3.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2",