@ledgerhq/native-ui 0.9.1-nightly.0 → 0.10.0-nightly.2

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

@@ -4,7 +4,11 @@ export declare type Props = {
     size?: number;
     color?: string;
     backgroundColor?: string;
+    circleIcon?: boolean;
+    disabled?: boolean;
+    tokenIcon?: string;
+    fallbackIcon?: JSX.Element;
 };
 export declare const iconNames: string[];
-declare const CryptoIcon: ({ name, size, color, backgroundColor }: Props) => JSX.Element | null;
+declare const CryptoIcon: ({ name, size, color, backgroundColor, circleIcon, disabled, tokenIcon, fallbackIcon, }: Props) => JSX.Element;
 export default CryptoIcon;

package/lib/components/Icon/CryptoIcon.js

@@ -1,23 +1,77 @@
 import * as icons from "@ledgerhq/crypto-icons-ui/native";
 import React from "react";
 import { ensureContrast } from "../../styles";
-import { useTheme } from "styled-components/native";
+import styled, { useTheme } from "styled-components/native";
+import Text from "../Text/index";
+import Flex from "../Layout/Flex";
 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 Container = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+})) ``;
+const Circle = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    borderRadius: "50%",
+    backgroundColor: p.backgroundColor,
+})) ``;
+const TokenContainer = styled(Flex).attrs((p) => ({
+    position: "absolute",
+    bottom: "-2px",
+    right: "-5px",
+    alignItems: "center",
+    justifyContent: "center",
+    heigth: p.size,
+    width: p.size,
+    borderRadius: "50%",
+    border: `2px solid ${p.borderColor}`,
+    backgroundColor: p.backgroundColor,
+    zIndex: 0,
+})) ``;
+function Fallback({ name }) {
+    return (React.createElement(Text, { uppercase: true, color: "neutral.c70" }, name.slice(0, 1)));
+}
+const IconBox = ({ children, color, backgroundColor, disabled, size = 16, tokenIcon = "", }) => {
+    const { colors } = useTheme();
+    if (tokenIcon in icons) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = icons[tokenIcon];
+        const defaultColor = Component.DefaultColor;
+        const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
+        const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);
+        return (React.createElement(Container, { size: size },
+            children,
+            tokenIcon && (React.createElement(TokenContainer, { size: size / 3, borderColor: colors.background.main, backgroundColor: contrastedColor },
+                React.createElement(Component, { size: size, color: colors.background.main })))));
+    }
+    return children;
+};
+const CryptoIcon = ({ name, size = 16, color, backgroundColor, circleIcon, disabled, tokenIcon, fallbackIcon, }) => {
     const { colors } = useTheme();
+    const maybeIconName = `${name}`;
     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 });
+        const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
+        const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);
+        return (React.createElement(IconBox, { size: size, tokenIcon: tokenIcon, color: color, disabled: disabled, name: name }, tokenIcon || circleIcon ? (React.createElement(Circle, { backgroundColor: contrastedColor, size: size },
+            React.createElement(Component, { size: size, color: colors.background.main }))) : (React.createElement(Component, { size: size, color: contrastedColor }))));
+    }
+    if (fallbackIcon) {
+        return fallbackIcon;
     }
-    return null;
+    return React.createElement(Fallback, { name: name });
 };
 export default CryptoIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.9.1-nightly.0",
+  "version": "0.10.0-nightly.2",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",