@ledgerhq/native-ui 0.39.0-nightly.3 → 0.40.0-nightly.0

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

@@ -1 +1 @@
-{"version":3,"file":"AssetItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC,CAAC;AAuBF,eAAO,MAAM,SAAS,8DAOnB,cAAc,sBAsDhB,CAAC"}
+{"version":3,"file":"AssetItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC,CAAC;AAwBF,eAAO,MAAM,SAAS,8DAOnB,cAAc,sBAkDhB,CAAC"}

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

@@ -16,6 +16,7 @@ const InfoWrapper = styled(View) `
   overflow: hidden;
   flex: 1;
   gap: 4px;
+  margin-left: 16px;
 `;
 const LeftElementWrapper = styled(View) `
   flex-direction: row;
@@ -39,10 +40,8 @@ export const AssetItem = ({ name, ticker, id, onClick, leftElement, rightElement
             backgroundColor: String(tokens["colors-surface-transparent-default"]),
             opacity: pressed ? 0.7 : 1,
         }) },
-        React.createElement(CryptoIcon, { size: "48px", ledgerId: id, ticker: ticker }),
-        React.createElement(InfoWrapper, { style: {
-                marginLeft: Number(tokens["margin-s"]),
-            } },
+        React.createElement(CryptoIcon, { size: 48, ledgerId: id, ticker: ticker }),
+        React.createElement(InfoWrapper, null,
             React.createElement(Text, { fontSize: "14px", variant: "largeLineHeight", fontWeight: "semiBold", color: String(tokens["colors-content-default-default"]), numberOfLines: 1, ellipsizeMode: "tail" }, name),
             React.createElement(LeftElementWrapper, null,
                 React.createElement(Text, { fontSize: "12px", lineHeight: "16px", variant: "bodyLineHeight", fontWeight: "medium", color: String(tokens["colors-content-subdued-default-default"]) }, ticker),

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

@@ -1 +1 @@
-{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetTypeList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE9D,eAAO,MAAM,SAAS;YAOZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;;uBAuCrC,CAAC"}
+{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetTypeList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAK9D,eAAO,MAAM,SAAS;YAOZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;;uBA0CrC,CAAC"}

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

@@ -1,13 +1,15 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import { FlashList } from "@shopify/flash-list";
+import { FlatList } from "react-native";
 import { AssetItem } from "../AssetItem/AssetItem";
+const ITEM_PADDING = 8;
+const ITEM_HEIGHT = 48 + ITEM_PADDING * 2;
 export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }) => {
-    const flashListRef = useRef(null);
+    const flatListRef = useRef(null);
     const renderAssetItem = useCallback(({ item }) => React.createElement(AssetItem, { ...item, onClick: onClick }), [onClick]);
     const keyExtractor = useCallback((item, index) => `${item.id}-${index}`, []);
     useEffect(() => {
-        if (scrollToTop && flashListRef.current) {
-            flashListRef.current.scrollToOffset({ offset: 0, animated: true });
+        if (scrollToTop && flatListRef.current) {
+            flatListRef.current.scrollToOffset({ offset: 0, animated: true });
         }
     }, [scrollToTop]);
     const handleEndReached = useCallback(() => {
@@ -15,17 +17,20 @@ export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTo
             onVisibleItemsScrollEnd();
         }
     }, [hasNextPage, onVisibleItemsScrollEnd]);
-    const flashListProps = {
-        ref: flashListRef,
+    const flatListProps = {
         data: assets,
         renderItem: renderAssetItem,
+        initialNumToRender: 15,
         keyExtractor,
-        estimatedItemSize: 72,
-        style: { flex: 1, width: "100%" },
+        getItemLayout: (data, index) => ({
+            length: ITEM_HEIGHT,
+            offset: ITEM_HEIGHT * index,
+            index,
+        }),
         ...(hasNextPage && {
             onEndReached: handleEndReached,
             onEndReachedThreshold: 0.1,
         }),
     };
-    return React.createElement(FlashList, { ...flashListProps });
+    return React.createElement(FlatList, { ref: flatListRef, ...flatListProps });
 };

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

@@ -1,4 +1,4 @@
 import React from "react";
-import { CryptoIcon as Icon } from "@ledgerhq/crypto-icons";
+import Icon from "@ledgerhq/crypto-icons/native";
 export declare function CryptoIcon(props: Parameters<typeof Icon>[0]): React.JSX.Element;
 //# sourceMappingURL=CryptoIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CryptoIcon.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/CryptoIcon/CryptoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE5D,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,qBAE3D"}
+{"version":3,"file":"CryptoIcon.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/CryptoIcon/CryptoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,+BAA+B,CAAC;AAEjD,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,qBAE3D"}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { CryptoIcon as Icon } from "@ledgerhq/crypto-icons";
+import Icon from "@ledgerhq/crypto-icons/native";
 export function CryptoIcon(props) {
     return React.createElement(Icon, { ...props });
 }

package/lib/pre-ldls/components/CryptoIcon/CryptoIcon.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CryptoIcon.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/CryptoIcon/CryptoIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAmBjC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}
+{"version":3,"file":"CryptoIcon.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/CryptoIcon/CryptoIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAoBjC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/lib/pre-ldls/components/CryptoIcon/CryptoIcon.stories.js

@@ -7,6 +7,7 @@ const meta = {
         ledgerId: "bitcoin",
         ticker: "BTC",
         size: 56,
+        backgroundColor: "red",
         network: "",
     },
     argTypes: {

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

@@ -14,7 +14,7 @@ const Wrapper = styled(Pressable) `
 const InfoWrapper = styled(View) `
   flex-direction: column;
   justify-content: center;
-  margin-left: ${({ tokens }) => tokens["margin-s"]}px;
+  margin-left: 16px;
   flex: 1;
 `;
 const LeftElementWrapper = styled(View) `
@@ -38,7 +38,7 @@ export const NetworkItem = ({ name, onClick, id, ticker, leftElement, rightEleme
     return (React.createElement(Wrapper, { tokens: tokens, onPress: onClick, style: ({ pressed }) => ({
             opacity: pressed ? 0.7 : 1,
         }) },
-        React.createElement(CryptoIcon, { size: "48px", ledgerId: id, ticker: ticker }),
+        React.createElement(CryptoIcon, { size: 48, ledgerId: id, ticker: ticker }),
         React.createElement(InfoWrapper, { tokens: tokens },
             React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: String(tokens["colors-content-default-default"]) }, name),
             React.createElement(LeftElementWrapper, null, leftElement)),

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkList/NetworkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAe,MAAM,4BAA4B,CAAC;AAMlE,eAAO,MAAM,WAAW;cAOZ,OAAO,EAAE;yBACE,MAAM,KAAK,IAAI;qCACJ,IAAI;;;uBAyCrC,CAAC"}

package/lib/pre-ldls/components/{NetwrokList → NetworkList}/NetworkList.js

@@ -1,13 +1,15 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import { FlashList } from "@shopify/flash-list";
 import { NetworkItem } from "../NetworkItem/NetworkItem";
+import { FlatList } from "react-native";
+const ITEM_PADDING = 8;
+const ITEM_HEIGHT = 48 + ITEM_PADDING * 2;
 export const NetworkList = ({ networks, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }) => {
-    const flashListRef = useRef(null);
+    const flatListRef = useRef(null);
     const renderNetworkItem = useCallback(({ item }) => React.createElement(NetworkItem, { ...item, onClick: () => onClick(item.id) }), [onClick]);
     const keyExtractor = useCallback((item, index) => `${item.id}-${index}`, []);
     useEffect(() => {
-        if (scrollToTop && flashListRef.current) {
-            flashListRef.current.scrollToOffset({ offset: 0, animated: true });
+        if (scrollToTop && flatListRef.current) {
+            flatListRef.current.scrollToOffset({ offset: 0, animated: true });
         }
     }, [scrollToTop]);
     const handleEndReached = useCallback(() => {
@@ -15,17 +17,19 @@ export const NetworkList = ({ networks, onClick, onVisibleItemsScrollEnd, scroll
             onVisibleItemsScrollEnd();
         }
     }, [hasNextPage, onVisibleItemsScrollEnd]);
-    const flashListProps = {
-        ref: flashListRef,
+    const flatListProps = {
         data: networks,
         renderItem: renderNetworkItem,
         keyExtractor,
-        estimatedItemSize: 72,
-        style: { flex: 1, width: "100%" },
+        getItemLayout: (data, index) => ({
+            length: ITEM_HEIGHT,
+            offset: ITEM_HEIGHT * index,
+            index,
+        }),
         ...(hasNextPage && {
             onEndReached: handleEndReached,
             onEndReachedThreshold: 0.1,
         }),
     };
-    return React.createElement(FlashList, { ...flashListProps });
+    return React.createElement(FlatList, { ref: flatListRef, ...flatListProps });
 };

package/lib/pre-ldls/components/{NetwrokList → NetworkList}/NetwrokList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetwrokList.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetwrokList/NetwrokList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAkBlC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC"}
+{"version":3,"file":"NetwrokList.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkList/NetwrokList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAkBlC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC"}

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

@@ -8,8 +8,7 @@ export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...pro
     const handleDebouncedChange = useDebouncedCallback(useMemo(() => {
         if (!onDebouncedChange)
             return;
-        return (e) => {
-            const current = e.nativeEvent.text;
+        return (current) => {
             onDebouncedChange(current, prevValue.current);
             prevValue.current = current;
         };
@@ -18,8 +17,9 @@ export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...pro
         if (!handleDebouncedChange && !onChange)
             return;
         return (e) => {
+            const current = e.nativeEvent.text;
             onChange?.(e);
-            handleDebouncedChange?.(e);
+            handleDebouncedChange?.(current);
         };
     }, [handleDebouncedChange, onChange]);
     return React.createElement(Input, { ...props, icon: Icons.Search, onChange: handleChange });

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

@@ -2,6 +2,7 @@ export * from "./Input/Input";
 export * from "./AssetItem/AssetItem";
 export * from "./AssetTypeList/AssetList";
 export * from "./NetworkItem/NetworkItem";
-export * from "./NetwrokList/NetworkList";
+export * from "./NetworkList/NetworkList";
 export * from "./Tag/Tag";
+export * from "./Search/Search";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}

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

@@ -2,5 +2,6 @@ export * from "./Input/Input";
 export * from "./AssetItem/AssetItem";
 export * from "./AssetTypeList/AssetList";
 export * from "./NetworkItem/NetworkItem";
-export * from "./NetwrokList/NetworkList";
+export * from "./NetworkList/NetworkList";
 export * from "./Tag/Tag";
+export * from "./Search/Search";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.39.0-nightly.3",
+  "version": "0.40.0-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -35,13 +35,12 @@
     "lib/**/*"
   ],
   "dependencies": {
-    "@ledgerhq/crypto-icons": "1.1.1",
-    "@shopify/flash-list": "1.6.4",
+    "@ledgerhq/crypto-icons": "1.1.2",
     "color": "^4.0.0",
     "react-native-modal": "14.0.0-rc.1",
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.16.0-nightly.0",
+    "@ledgerhq/crypto-icons-ui": "^1.16.0",
     "@ledgerhq/icons-ui": "^0.13.0-nightly.0",
     "@ledgerhq/ui-shared": "^0.3.0"
   },

package/lib/pre-ldls/components/NetwrokList/NetworkList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NetworkList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetwrokList/NetworkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAe,MAAM,4BAA4B,CAAC;AAElE,eAAO,MAAM,WAAW;cAOZ,OAAO,EAAE;yBACE,MAAM,KAAK,IAAI;qCACJ,IAAI;;;uBAuCrC,CAAC"}