@ledgerhq/native-ui 0.42.0 → 0.43.0

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

@@ -0,0 +1,37 @@
+import React from "react";
+export type AccountUI = {
+    address: string;
+    balance?: string;
+    cryptoId?: string;
+    fiatValue?: string;
+    id: string;
+    name: string;
+    parentId?: string;
+    protocol?: string;
+    ticker?: string;
+};
+export type RightElementArrow = {
+    type: "arrow";
+};
+export type RightElementCheckbox = {
+    type: "checkbox";
+    checkbox: {
+        checked: boolean;
+        onChange?: () => void;
+        disabled?: boolean;
+    };
+};
+export type RightElementEdit = {
+    type: "edit";
+    onClick: () => void;
+};
+export type RightElement = RightElementArrow | RightElementCheckbox | RightElementEdit;
+export type AccountItemProps = {
+    onClick?: () => void;
+    account: AccountUI;
+    rightElement?: RightElement;
+    showIcon?: boolean;
+    backgroundColor?: string;
+};
+export declare const AccountItem: ({ onClick, account, rightElement, showIcon, backgroundColor, }: AccountItemProps) => React.JSX.Element;
+//# sourceMappingURL=AccountItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE;QACR,OAAO,EAAE,OAAO,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,iBAAiB,GAAG,oBAAoB,GAAG,gBAAgB,CAAC;AAEvF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAkGF,eAAO,MAAM,WAAW,mEAMrB,gBAAgB,sBA6FlB,CAAC"}

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

@@ -0,0 +1,114 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import styled, { useTheme } from "styled-components/native";
+import { ChevronRightMedium, PenMedium } from "@ledgerhq/icons-ui/nativeLegacy";
+import Text from "../../../components/Text";
+import { Address } from "../Address/Address";
+import { Tag } from "../Tag/Tag";
+import Checkbox from "../../../components/Form/Checkbox";
+import { useTokens } from "../../libs";
+const ICON_BUTTONS_SIZE = 32;
+const IconButton = styled(Pressable) `
+  align-items: center;
+  justify-content: center;
+  height: ${ICON_BUTTONS_SIZE}px;
+  width: ${ICON_BUTTONS_SIZE}px;
+`;
+const Wrapper = styled(Pressable) `
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+  ${(props) => props.backgroundColor && `background-color: ${props.backgroundColor};`}
+`;
+const ContentContainer = styled(View) `
+  align-items: center;
+  flex-direction: row;
+  flex: 1;
+  justify-content: space-between;
+  min-width: 0;
+  overflow: hidden;
+  width: 100%;
+`;
+const AccountInfoContainer = styled(View) `
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+`;
+const NameRow = styled(View) `
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+`;
+const NameWrapper = styled(View) `
+  min-width: 0;
+  flex-shrink: 1;
+`;
+const TagWrapper = styled(View) `
+  flex-shrink: 0;
+  align-items: flex-start;
+`;
+const BalanceContainer = styled(View) `
+  flex-direction: column;
+  flex-shrink: 0;
+  align-items: flex-end;
+`;
+const RightElementContainer = styled(View) `
+  align-items: center;
+  justify-content: center;
+`;
+const RightElementRenderer = ({ rightElement, tokens, onEditPress }) => {
+    return (React.createElement(RightElementContainer, { style: { marginLeft: Number(tokens["spacing-xs"]) } },
+        rightElement.type === "checkbox" && (React.createElement(View, { testID: "right-element-checkbox" },
+            React.createElement(Checkbox, { checked: rightElement.checkbox.checked, onChange: rightElement.checkbox.onChange, disabled: rightElement.checkbox.disabled }))),
+        rightElement.type === "arrow" && (React.createElement(View, { testID: "right-element-arrow-icon" },
+            React.createElement(ChevronRightMedium, { size: 24, color: String(tokens["colors-content-default-default"]) }))),
+        rightElement.type === "edit" && (React.createElement(IconButton, { onPress: onEditPress, testID: "right-element-edit-icon" },
+            React.createElement(PenMedium, { size: 16, color: String(tokens["colors-content-default-default"]) })))));
+};
+export const AccountItem = ({ onClick, account, rightElement, showIcon = true, backgroundColor, }) => {
+    const theme = useTheme();
+    const colorType = theme.colors.type === "dark" ? "dark" : "light";
+    const tokens = useTokens(colorType, [
+        "spacing-xxxs",
+        "spacing-xs",
+        "margin-s",
+        "radius-s",
+        "colors-content-default-default",
+        "colors-content-subdued-default-default",
+        "colors-surface-transparent-hover",
+        "colors-surface-transparent-pressed",
+    ]);
+    const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
+    const handlePress = () => {
+        if (onClick) {
+            onClick();
+        }
+    };
+    const handleEditPress = () => {
+        if (rightElement?.type === "edit") {
+            rightElement.onClick();
+        }
+    };
+    return (React.createElement(Wrapper, { backgroundColor: backgroundColor, isClickable: Boolean(onClick), onPress: handlePress, style: ({ pressed }) => ({
+            paddingTop: onClick ? Number(tokens["margin-s"]) : 0,
+            borderRadius: onClick ? Number(tokens["radius-s"]) : 0,
+            opacity: pressed && onClick ? 0.7 : 1,
+        }), testID: "account-item" },
+        React.createElement(ContentContainer, null,
+            React.createElement(AccountInfoContainer, null,
+                React.createElement(NameRow, { style: { marginBottom: Number(tokens["spacing-xxxs"]) } },
+                    React.createElement(NameWrapper, null,
+                        React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: String(tokens["colors-content-default-default"]), fontSize: "18px", numberOfLines: 1, ellipsizeMode: "tail" }, name)),
+                    protocol && (React.createElement(TagWrapper, { style: { marginLeft: Number(tokens["spacing-xs"]) } },
+                        React.createElement(Tag, { textTransform: "uppercase" }, protocol)))),
+                React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, parentId: parentId, showIcon: showIcon })),
+            React.createElement(BalanceContainer, { style: { gap: Number(tokens["spacing-xxxs"]) } },
+                fiatValue && (React.createElement(Text, { fontSize: "18px", color: String(tokens["colors-content-default-default"]) }, fiatValue)),
+                balance && (React.createElement(Text, { fontSize: "14px", color: String(tokens["colors-content-subdued-default-default"]) }, balance))),
+            rightElement && (React.createElement(RightElementRenderer, { rightElement: rightElement, tokens: tokens, onEditPress: handleEditPress })))));
+};

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AccountItem } from "./AccountItem";
+declare const meta: Meta<typeof AccountItem>;
+export default meta;
+type Story = StoryObj<typeof AccountItem>;
+export declare const Default: Story;
+export declare const TestAccount: Story;
+export declare const TestWithoutProtocol: Story;
+export declare const TestWithoutAddressIcon: Story;
+export declare const TestWithCheckbox: Story;
+export declare const TestWithArrow: Story;
+export declare const TestWithEdit: Story;
+//# sourceMappingURL=AccountItem.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountItem.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.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,CAwBlC,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,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAYpC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC"}

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

@@ -0,0 +1,123 @@
+import { AccountItem } from "./AccountItem";
+const onClick = () => console.log("Account clicked");
+const meta = {
+    component: AccountItem,
+    title: "PreLdls/Components/AccountItem",
+    tags: ["autodocs"],
+    args: {
+        onClick: onClick,
+        account: {
+            address: "n4A9...Zgty",
+            balance: "0.118 ETH",
+            cryptoId: "bitcoin",
+            fiatValue: "$5,969.83",
+            id: "12345",
+            name: "Main BTC",
+            ticker: "btc",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "AccountItem displays an account with its name, address, balance, and fiat value. Use it to represent selectable accounts in lists.",
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {};
+export const TestAccount = {
+    args: {
+        onClick: onClick,
+        account: {
+            address: "n4A9...Zgty",
+            balance: "0.118 BTC",
+            cryptoId: "bitcoin",
+            fiatValue: "$5,969.83",
+            id: "12345",
+            name: "Main BTC",
+            protocol: "Native Segwit",
+            ticker: "btc",
+        },
+    },
+};
+export const TestWithoutProtocol = {
+    args: {
+        onClick: onClick,
+        account: {
+            address: "n4A9...Zgty",
+            balance: "0.118 BTC",
+            cryptoId: "bitcoin",
+            fiatValue: "$5,969.83",
+            id: "21345",
+            name: "Main BTC",
+            ticker: "btc",
+        },
+    },
+};
+export const TestWithoutAddressIcon = {
+    args: {
+        onClick: onClick,
+        account: {
+            address: "n4A9...Zgty",
+            balance: "0.118 BTC",
+            fiatValue: "$5,969.83",
+            id: "bitcoin",
+            name: "Main BTC",
+        },
+        showIcon: false,
+    },
+};
+export const TestWithCheckbox = {
+    args: {
+        account: {
+            address: "n4A9...Zgty",
+            balance: "0.118",
+            cryptoId: "bitcoin",
+            fiatValue: "$5,969.83",
+            id: "12345",
+            name: "Main BTC",
+            ticker: "btc",
+        },
+        onClick: onClick,
+        rightElement: {
+            type: "checkbox",
+            checkbox: {
+                checked: false,
+                onChange: () => { },
+            },
+        },
+    },
+};
+export const TestWithArrow = {
+    args: {
+        account: {
+            address: "n4A9...Zgty",
+            cryptoId: "bitcoin",
+            fiatValue: "$5,969.83",
+            id: "12345",
+            name: "Main BTC",
+            ticker: "btc",
+        },
+        rightElement: {
+            type: "arrow",
+        },
+    },
+};
+export const TestWithEdit = {
+    args: {
+        account: {
+            address: "n4A9...Zgty",
+            cryptoId: "bitcoin",
+            fiatValue: "$5,969.83",
+            id: "12345",
+            name: "Main BTC",
+            ticker: "btc",
+        },
+        onClick: undefined,
+        rightElement: {
+            type: "edit",
+            onClick: onClick,
+        },
+    },
+};

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

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const AddAccountButton: ({ label, onClick, disabled, }: {
+    onClick: () => void;
+    disabled?: boolean | undefined;
+    label: string;
+}) => React.JSX.Element;
+//# sourceMappingURL=AddAccountButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddAccountButton.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AddAccountButton/AddAccountButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,eAAO,MAAM,gBAAgB;aAKlB,MAAM,IAAI;;WAEZ,MAAM;uBAuBd,CAAC"}

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

@@ -0,0 +1,31 @@
+import React from "react";
+import styled, { useTheme } from "styled-components/native";
+import { Pressable } from "react-native";
+import Text from "../../../components/Text";
+import { Icon } from "../../../components/Icon";
+const StyledPressable = styled(Pressable) `
+  border-width: 1px;
+  border-style: dotted;
+  padding: 16px;
+  margin-vertical: 8px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 12px;
+`;
+export const AddAccountButton = ({ label, onClick, disabled = false, }) => {
+    const theme = useTheme();
+    return (React.createElement(StyledPressable, { disabled: disabled, style: ({ pressed }) => [
+            {
+                opacity: pressed ? 0.5 : 1.0,
+                marginVertical: 12,
+                width: "100%",
+                borderColor: theme.colors.opacityDefault.c10,
+            },
+            disabled && { opacity: 0.5 },
+        ], hitSlop: 6, onPress: () => onClick(), testID: "add-new-account-button" },
+        React.createElement(Text, { variant: "large" }, label),
+        React.createElement(Icon, { name: "Plus", size: 20, color: "neutral.c100" })));
+};

package/lib/pre-ldls/components/AddAccountButton/AddAccountButton.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AddAccountButton } from "./AddAccountButton";
+declare const meta: Meta<typeof AddAccountButton>;
+export default meta;
+type Story = StoryObj<typeof AddAccountButton>;
+export declare const Default: Story;
+//# sourceMappingURL=AddAccountButton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddAccountButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AddAccountButton/AddAccountButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAgBvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { View } from "react-native";
+import { AddAccountButton } from "./AddAccountButton";
+const meta = {
+    component: AddAccountButton,
+    decorators: [
+        (Story) => (React.createElement(View, { style: { height: 400, width: 400 } },
+            React.createElement(Story, null))),
+    ],
+    title: "PreLdls/Components/AddAccountButton",
+    tags: ["autodocs"],
+    args: {
+        t: (key) => key,
+        onClick: () => { },
+        label: "Add new or existing account",
+    },
+};
+export default meta;
+export const Default = {};

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

@@ -0,0 +1,9 @@
+import React from "react";
+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

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

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { View } from "react-native";
+import styled, { useTheme } from "styled-components/native";
+import Text from "../../../components/Text";
+import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
+import { useTokens } from "../../libs";
+const Wrapper = styled(View) `
+  flex-direction: row;
+  align-items: center;
+`;
+export const Address = ({ address, showIcon, cryptoId, ticker, parentId, }) => {
+    const { theme } = useTheme();
+    const colorType = theme;
+    const tokens = useTokens(colorType, ["spacing-xxxs", "colors-content-subdued-default-default"]);
+    return (React.createElement(Wrapper, null,
+        React.createElement(Text, { fontSize: "14px", color: String(tokens["colors-content-subdued-default-default"]), marginRight: showIcon ? Number(tokens["spacing-xxxs"]) : 0 }, address),
+        showIcon && React.createElement(CryptoIcon, { ledgerId: cryptoId, network: parentId, ticker: ticker, size: 20 })));
+};

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

@@ -5,4 +5,7 @@ export * from "./NetworkItem/NetworkItem";
 export * from "./NetworkList/NetworkList";
 export * from "./Tag/Tag";
 export * from "./Search/Search";
+export * from "./AccountItem/AccountItem";
+export * from "./Address/Address";
+export * from "./AddAccountButton/AddAccountButton";
 //# 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;AAC1B,cAAc,iBAAiB,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;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qCAAqC,CAAC"}

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

@@ -5,3 +5,6 @@ export * from "./NetworkItem/NetworkItem";
 export * from "./NetworkList/NetworkList";
 export * from "./Tag/Tag";
 export * from "./Search/Search";
+export * from "./AccountItem/AccountItem";
+export * from "./Address/Address";
+export * from "./AddAccountButton/AddAccountButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -35,14 +35,14 @@
     "lib/**/*"
   ],
   "dependencies": {
-    "@ledgerhq/crypto-icons": "1.1.2",
+    "@ledgerhq/crypto-icons": "1.1.3",
     "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",
-    "@ledgerhq/ui-shared": "^0.3.0",
-    "@ledgerhq/icons-ui": "^0.13.0"
+    "@ledgerhq/crypto-icons-ui": "^1.17.0",
+    "@ledgerhq/icons-ui": "^0.13.0",
+    "@ledgerhq/ui-shared": "^0.3.0"
   },
   "peerDependencies": {
     "react": ">=17",