@ledgerhq/native-ui 0.8.4-nightly.0 → 0.9.0-nightly.1

package/lib/assets/cryptoIcons.d.ts

@@ -0,0 +1 @@
+export * from "@ledgerhq/crypto-icons-ui/native";

package/lib/assets/cryptoIcons.js

@@ -0,0 +1 @@
+export * from "@ledgerhq/crypto-icons-ui/native";

package/lib/assets/index.d.ts

@@ -1,2 +1,3 @@
 export * as Icons from "@ledgerhq/icons-ui/native";
 export * as Logos from "./logos";
+export * as CryptoIcons from "@ledgerhq/crypto-icons-ui/native";

package/lib/assets/index.js

@@ -2,3 +2,5 @@ import * as Icons_1 from "@ledgerhq/icons-ui/native";
 export { Icons_1 as Icons };
 import * as Logos_1 from "./logos";
 export { Logos_1 as Logos };
+import * as CryptoIcons_1 from "@ledgerhq/crypto-icons-ui/native";
+export { CryptoIcons_1 as CryptoIcons };

package/lib/components/Icon/CryptoIcon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type Props = {
+    name: string;
+    size?: number;
+    color?: string;
+    backgroundColor?: string;
+};
+export declare const iconNames: string[];
+declare const CryptoIcon: ({ name, size, color, backgroundColor }: Props) => JSX.Element | null;
+export default CryptoIcon;

package/lib/components/Icon/CryptoIcon.js

@@ -0,0 +1,23 @@
+import * as icons from "@ledgerhq/crypto-icons-ui/native";
+import React from "react";
+import { ensureContrast } from "../../styles";
+import { useTheme } from "styled-components/native";
+export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
+    const key = rawKey;
+    if (!set.has(key))
+        set.add(key);
+    return set;
+}, new Set()));
+const CryptoIcon = ({ name, size = 16, color, backgroundColor }) => {
+    const maybeIconName = `${name}`;
+    const { colors } = useTheme();
+    if (maybeIconName in icons) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = icons[maybeIconName];
+        const defaultColor = Component.DefaultColor;
+        const contrastedColor = ensureContrast(color || defaultColor, backgroundColor || colors.background.main);
+        return React.createElement(Component, { size: size, color: contrastedColor });
+    }
+    return null;
+};
+export default CryptoIcon;

package/lib/components/Icon/index.d.ts

@@ -1,3 +1,4 @@
 export { default as IconBox } from "./IconBox";
 export { default as BoxedIcon } from "./BoxedIcon";
 export { default as Icon } from "./Icon";
+export { default as CryptoIcon } from "./CryptoIcon";

package/lib/components/Icon/index.js

@@ -1,3 +1,4 @@
 export { default as IconBox } from "./IconBox";
 export { default as BoxedIcon } from "./BoxedIcon";
 export { default as Icon } from "./Icon";
+export { default as CryptoIcon } from "./CryptoIcon";

package/lib/styles/helpers.d.ts

@@ -6,3 +6,4 @@ export declare const mix: (c: string, b: string, a: number) => string;
 export declare const getColor: (p: {
     colors: unknown;
 }, color: string) => string;
+export declare const ensureContrast: (color1: string, color2: string) => string;

package/lib/styles/helpers.js

@@ -12,3 +12,12 @@ export const getColor = (p, color) => {
     const c = get(p.colors, color);
     return c;
 };
+export const ensureContrast = (color1, color2) => {
+    const colorL1 = Color(color1).luminosity() + 0.05;
+    const colorL2 = Color(color2).luminosity() + 0.05;
+    const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;
+    if (lRatio < 1.5) {
+        return Color(color1).rotate(180).negate().string();
+    }
+    return color1;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.8.4-nightly.0",
+  "version": "0.9.0-nightly.1",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -32,6 +32,7 @@
     "lib/**/*"
   ],
   "dependencies": {
+    "@ledgerhq/crypto-icons-ui": "^0.2.0-nightly.0",
     "@ledgerhq/icons-ui": "^0.2.7",
     "@ledgerhq/ui-shared": "^0.1.9",
     "@types/color": "^3.0.3",
@@ -140,7 +141,7 @@
   "scripts": {
     "android": "expo start --android",
     "build": "tsc -p tsconfig.prod.json && node scripts/postBuild",
-    "prebuild:storybook": "pnpm -F ui-shared -F icons-ui build",
+    "prebuild:storybook": "pnpm -F ui-shared -F icons-ui -F crypto-icons-ui build",
     "build:storybook": "pnpm build-storybook -o web-build",
     "watch": "tsc -p tsconfig.prod.json --watch",
     "clean": "rimraf lib",