CN-832: add llm icons for Acre, Midas, ChorusOne, Babylon, EigenLayer (…

…#8193)

* feat: add llm icons for Acre, Midas, ChorusOne, Babylon, EigenLayer

* chore: add changeset

* chore: sort import on icons

* chore: move provider icons under their own module

.changeset/early-garlics-rhyme.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Add new Provider `react-native-svg` icons for Acre, Midas, ChorusOne, Babylon, EigenLayer

apps/ledger-live-mobile/src/families/evm/StakingDrawer/EvmStakingDrawerProviderIcon.tsx

@@ -1,13 +1,19 @@
 import React from "react";
-import { Kiln } from "~/icons/Kiln";
-import { Lido } from "~/icons/Lido";
-import { Figment } from "~/icons/Figment";
-import { Stader } from "~/icons/Stader";
-import { MissingIcon } from "~/icons/MissingIcon";
-import { KelpDAO } from "~/icons/KelpDAO";
-import { P2P } from "~/icons/P2P";
-import { RocketPool } from "~/icons/RocketPool";
 import type { ColorValue } from "react-native";
+import { MissingIcon } from "~/icons/MissingIcon";
+import { Acre } from "~/icons/providers/Acre";
+import { Babylon } from "~/icons/providers/Babylon";
+import { ChorusOne } from "~/icons/providers/ChorusOne";
+import { Coinbase } from "~/icons/providers/Coinbase";
+import { EigenLayer } from "~/icons/providers/EigenLayer";
+import { Figment } from "~/icons/providers/Figment";
+import { KelpDAO } from "~/icons/providers/KelpDAO";
+import { Kiln } from "~/icons/providers/Kiln";
+import { Lido } from "~/icons/providers/Lido";
+import { Midas } from "~/icons/providers/Midas";
+import { P2P } from "~/icons/providers/P2P";
+import { RocketPool } from "~/icons/providers/RocketPool";
+import { Stader } from "~/icons/providers/Stader";
 
 type Props = {
   icon?: string;
@@ -20,20 +26,32 @@ export function EvmStakingDrawerProviderIcon({ icon = "", outline }: Props) {
   const [name] = icon.split(":");
 
   switch (name) {
-    case "Kiln":
-      return <Kiln size={ICON_SIZE} outline={outline} />;
-    case "Lido":
-      return <Lido size={ICON_SIZE} outline={outline} />;
+    case "Acre":
+      return <Acre size={ICON_SIZE} outline={outline} />;
+    case "Babylon":
+      return <Babylon size={ICON_SIZE} outline={outline} />;
+    case "ChorusOne":
+      return <ChorusOne size={ICON_SIZE} outline={outline} />;
+    case "Coinbase":
+      return <Coinbase size={ICON_SIZE} outline={outline} />;
+    case "EigenLayer":
+      return <EigenLayer size={ICON_SIZE} outline={outline} />;
     case "Figment":
       return <Figment size={ICON_SIZE} outline={outline} />;
-    case "Stader":
-      return <Stader size={ICON_SIZE} outline={outline} />;
     case "KelpDAO":
       return <KelpDAO size={ICON_SIZE} outline={outline} />;
-    case "RocketPool":
-      return <RocketPool size={ICON_SIZE} outline={outline} />;
+    case "Kiln":
+      return <Kiln size={ICON_SIZE} outline={outline} />;
+    case "Lido":
+      return <Lido size={ICON_SIZE} outline={outline} />;
+    case "Midas":
+      return <Midas size={ICON_SIZE} outline={outline} />;
     case "P2P":
       return <P2P size={ICON_SIZE} outline={outline} />;
+    case "RocketPool":
+      return <RocketPool size={ICON_SIZE} outline={outline} />;
+    case "Stader":
+      return <Stader size={ICON_SIZE} outline={outline} />;
     default:
       return <MissingIcon initialLetter={name.charAt(0)} size={ICON_SIZE} />;
   }

apps/ledger-live-mobile/src/families/evm/StakingDrawer_deprecated/EvmStakingDrawerProviderIcon.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import Kiln from "~/icons/Kiln";
-import { Lido } from "~/icons/Lido";
-import Figment from "~/icons/Figment";
-import Stader from "~/icons/Stader";
 import MissingIcon from "~/icons/MissingIcon";
+import { Figment } from "~/icons/providers/Figment";
+import { Kiln } from "~/icons/providers/Kiln";
+import { Lido } from "~/icons/providers/Lido";
+import { Stader } from "~/icons/providers/Stader";
 
 type Props = {
   icon?: string;

apps/ledger-live-mobile/src/icons/providers/Acre.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { ColorValue } from "react-native";
+import Svg, { Rect, Path, SvgProps } from "react-native-svg";
+
+type Props = SvgProps & { size?: number; outline?: ColorValue };
+
+export function Acre({ size = 32, outline = "white", ...props }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none" {...props}>
+      <Rect width="32" height="32" rx="5.33333" stroke={outline} fill="#F34900" />
+      <Rect
+        x="0.266667"
+        y="0.266667"
+        width="31.4667"
+        height="31.4667"
+        rx="5.06667"
+        stroke="white"
+        strokeOpacity="0.05"
+        strokeWidth="0.533333"
+      />
+      <Path
+        d="M18.7941 17.6958L18.056 16.6377H13.9161L13.178 17.6958H15.5078V18.8501H9.96873V17.6958H11.8429L14.6157 13.752H12.9533V12.5977H19.0187V13.752H17.3564L20.1291 17.6958H22.0033V18.8501H16.4706V17.6958H18.8005H18.7941ZM14.6157 15.6309H17.3499L15.9828 13.6878L14.6157 15.6309Z"
+        fill="#F3E5C1"
+      />
+    </Svg>
+  );
+}

apps/ledger-live-mobile/src/icons/providers/Babylon.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { ColorValue } from "react-native";
+import Svg, { Rect, Path, SvgProps } from "react-native-svg";
+
+type Props = SvgProps & { size?: number; outline?: ColorValue };
+
+export function Babylon({ size = 32, outline = "black", ...props }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none" {...props}>
+      <Rect width="32" height="32" rx="8" fill="#F1F1F1" />
+      <Rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke={outline} strokeOpacity="0.2" />
+      <Path
+        d="M16.4737 6.3999C16.7727 6.42254 17.0391 6.46284 17.3118 6.50315C21.1468 7.06419 24.3639 9.92737 25.3018 13.626C26.6583 18.9742 23.2517 24.2858 17.8169 25.4056L16.4733 25.5999H15.2313C14.9838 25.5275 14.6922 25.5392 14.4328 25.503C10.6415 24.9709 7.34205 22.1182 6.44599 18.4449H8.33194C9.2372 21.2959 11.9272 23.4572 14.9558 23.7429V21.2977C10.1231 20.4826 8.69718 14.2654 12.8256 11.5254C15.5423 9.72224 19.3565 10.747 20.7516 13.645H18.6127C16.7585 11.5521 13.1393 12.2684 12.3679 14.9691C11.3154 18.6532 15.8555 21.1455 18.5207 18.4449H20.7056C19.9499 19.9492 18.4305 21.0273 16.7497 21.2977V23.7429C21.8795 23.1963 25.0898 18.0143 23.2701 13.2262C22.4996 11.1993 20.7935 9.49764 18.7392 8.7206C14.4323 7.09181 9.69903 9.35636 8.28779 13.6242L6.39999 13.645V13.5545C7.46441 9.66835 10.9985 6.67658 15.1209 6.44745L15.2778 6.44518L16.4737 6.3999Z"
+        fill="black"
+      />
+      <Path
+        d="M17.8077 15.9772C17.8077 17.0401 16.9324 17.9017 15.8527 17.9017C14.7731 17.9017 13.8978 17.0401 13.8978 15.9772C13.8978 14.9144 14.7731 14.0527 15.8527 14.0527C16.9324 14.0527 17.8077 14.9144 17.8077 15.9772Z"
+        fill="#F7931A"
+      />
+    </Svg>
+  );
+}

apps/ledger-live-mobile/src/icons/providers/ChorusOne.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { ColorValue } from "react-native";
+import Svg, { Rect, Path, SvgProps } from "react-native-svg";
+
+type Props = SvgProps & { size?: number; outline?: ColorValue };
+
+export function ChorusOne({ size = 32, outline = "black", ...props }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none" {...props}>
+      <Rect width="32" height="32" rx="8" fill="#F1F1F1" />
+      <Rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke={outline} strokeOpacity="0.2" />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.40541 23.463L8.53816 25.5959L10.6709 23.463L8.53816 21.3301L6.40541 23.463Z"
+        fill="#168F9C"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M25.6 8.53283L23.4672 6.3999L21.3344 8.53283L23.4672 10.6658L25.6 8.53283Z"
+        fill="#168F9C"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.1353 18.131L16.0025 20.2639L13.8698 18.131L11.7371 15.9981L13.8698 13.8651L16.0025 11.7322L18.1353 13.8651L20.268 15.9981L18.1353 18.131ZM24.5335 15.998L22.4008 13.8651L20.268 11.7322L18.1353 9.59923L16.0025 7.46631L13.8698 9.59923L11.7371 11.7322L9.6043 13.8651L7.47156 15.998L9.6043 18.1309L11.7371 20.2639L13.8698 22.3968L16.0025 24.5297L18.1353 22.3968L20.268 20.2639L22.4008 18.1309L24.5335 15.998Z"
+        fill="#168F9C"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.3321 23.4669L23.4648 25.5998L25.5975 23.4669L23.4648 21.334L21.3321 23.4669Z"
+        fill="#168F9C"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.6655 8.53429L8.53274 6.40137L6.39999 8.53429L8.53274 10.6672L10.6655 8.53429Z"
+        fill="#168F9C"
+      />
+    </Svg>
+  );
+}

apps/ledger-live-mobile/src/icons/providers/Coinbase.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { ColorValue } from "react-native";
+import Svg, { Path, Rect, SvgProps } from "react-native-svg";
+
+type Props = SvgProps & { size?: number; outline?: ColorValue };
+
+const BASE_SIZE = 32;
+
+export function Coinbase({ size = BASE_SIZE, outline = "white", ...props }: Props): JSX.Element {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 60 60" fill="none" {...props}>
+      <Rect width="60" height="60" rx="18" fill="#0052FF" />
+      <Rect x="0.5" y="0.5" width="59" height="59" rx="17.5" stroke={outline} strokeOpacity={0.1} />
+      <Path
+        d="M30.3131 19.0067C34.7076 19.0067 38.1941 21.7283 39.5177 25.7763H48.375C46.7699 17.1228 39.6572 11.2595 30.3842 11.2595C19.8534 11.2595 11.625 19.2868 11.625 30.0357C11.625 40.7846 19.6455 48.7405 30.3842 48.7405C39.4493 48.7405 46.7014 42.8773 48.3066 34.1524H39.5177C38.2626 38.2004 34.776 40.9933 30.3816 40.9933C24.3136 40.9933 20.0612 36.3164 20.0612 30.0357C20.0639 23.6836 24.2478 19.0067 30.3131 19.0067Z"
+        fill="white"
+      />
+    </Svg>
+  );
+}

apps/ledger-live-mobile/src/icons/providers/EigenLayer.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { ColorValue } from "react-native";
+import Svg, { Rect, Path, SvgProps } from "react-native-svg";
+
+type Props = SvgProps & { size?: number; outline?: ColorValue };
+
+export function EigenLayer({ size = 32, outline = "black", ...props }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none" {...props}>
+      <Rect width="32" height="32" rx="8" fill="#F1F1F1" />
+      <Rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke={outline} strokeOpacity="0.2" />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.39999 6.3999H11.8461V21.456H14.6154V15.9769H17.3846V21.456H22.8308V25.5999H17.3846H14.6154H11.8461H6.39999V21.456V6.3999ZM17.3846 7.7812L17.3846 10.4977L17.3846 15.9769H20.1077H22.8308V10.4977H20.1077V7.7812V6.3999H17.3846H14.6154V7.7812H17.3846ZM22.8308 6.3999H25.6V10.4977H22.8308V6.3999Z"
+        fill="#1A0C6D"
+      />
+    </Svg>
+  );
+}

apps/ledger-live-mobile/src/icons/Figment.tsx → apps/ledger-live-mobile/src/icons/providers/Figment.tsx

@@ -23,4 +23,3 @@ export function Figment({ size = BASE_SIZE, outline, ...props }: Props): JSX.Ele
     </Svg>
   );
 }
-export default Figment;

apps/ledger-live-mobile/src/icons/KelpDAO.tsx → apps/ledger-live-mobile/src/icons/providers/KelpDAO.tsx

@@ -22,5 +22,3 @@ export function KelpDAO({ size = BASE_SIZE, outline, ...props }: Props): JSX.Ele
     </Svg>
   );
 }
-
-export default KelpDAO;

apps/ledger-live-mobile/src/icons/Kiln.tsx → apps/ledger-live-mobile/src/icons/providers/Kiln.tsx

@@ -30,4 +30,3 @@ export function Kiln({ size = BASE_SIZE, outline }: Props): JSX.Element {
     </Svg>
   );
 }
-export default Kiln;

apps/ledger-live-mobile/src/icons/providers/Midas.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { ColorValue } from "react-native";
+import Svg, { Rect, Path, G, Defs, ClipPath, SvgProps } from "react-native-svg";
+
+type Props = SvgProps & { size?: number; outline?: ColorValue };
+
+export function Midas({ size = 32, outline = "white", ...props }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none" {...props}>
+      <Rect width="32" height="32" rx="8" fill="#323232" />
+      <Rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke={outline} strokeOpacity="0.05" />
+      <G clipPath="url(#clip0_2938_1971)">
+        <Path
+          d="M25.0647 17.6436V23.4189C25.0647 23.5418 24.6891 23.9358 24.4956 23.8444H7.50514C7.34233 23.9005 7.01208 23.5111 7.01208 23.4189V17.6436L7.32159 17.6781L16.076 20.5527L24.7544 17.6781L25.0639 17.6436H25.0647Z"
+          fill="#FDC210"
+        />
+        <Path
+          d="M7.08812 13.4367L9.68857 14.2776C9.7669 11.0651 12.4918 8.39091 15.6905 8.23117C19.1918 8.05607 22.2584 10.7679 22.3874 14.2776L24.9879 13.4367V14.7753C24.9879 14.8106 24.7322 15.0349 24.6477 15.0472L16.0637 17.9287L7.42834 15.0472C7.34386 15.0349 7.08812 14.8106 7.08812 14.7753V13.4367ZM17.4154 9.07751C16.417 8.88397 15.4524 8.86247 14.4671 9.152C14.3557 9.18503 14.3334 9.10669 14.3549 9.30637C14.8203 9.26336 15.7734 9.8048 16.1513 9.76794C16.3026 9.75335 16.4508 9.50451 16.7089 9.47303C17.089 9.42771 17.3302 9.77331 17.4154 9.07751ZM17.7963 9.38317C17.6174 9.33248 17.6681 9.43232 17.6235 9.48071C17.1735 9.97607 17.6381 10.3255 18.1796 10.377L17.7963 9.38317ZM20.3215 10.9891C20.3546 10.8447 20.2394 10.8078 20.1687 10.7218C19.946 10.4499 18.3324 9.18887 18.1035 9.38394L18.6427 10.4891L20.3215 10.9891ZM16.0292 10.0805C15.3195 9.91079 14.6237 9.59898 13.8964 9.536L15.7834 11.287C15.8771 11.2947 16.1643 10.9207 16.1812 10.8577C16.2204 10.7103 15.9416 10.3209 16.0284 10.0805H16.0292ZM15.5784 11.5267C15.487 11.519 15.4132 11.476 15.348 11.4138C14.7405 10.8339 14.1729 10.2141 13.5147 9.68807C13.5908 10.0943 14.0109 12.8492 14.1445 12.959C14.1952 13.0004 14.4417 13.0604 14.5078 13.0204C14.6191 12.7908 15.6621 11.6457 15.5784 11.5267ZM13.7267 13.0388L13.0931 9.76717C12.2445 10.3063 11.4273 11.0682 11.0602 12.0151C11.425 12.1349 13.2621 13.2255 13.461 13.1901C13.4879 13.1855 13.7183 13.0519 13.7267 13.0388ZM17.5037 10.5405C17.4761 10.5605 17.4484 10.6995 17.3824 10.7625C17.0084 11.1227 16.7442 10.88 16.4546 11.0612C16.321 11.145 16.0814 11.4583 16.1244 11.6234C16.1981 11.906 17.2925 12.6218 17.4945 12.9428C17.6258 13.0089 17.9307 12.8783 18.1419 12.8968C18.3332 12.9137 18.486 13.0688 18.6411 13.025C18.7049 13.0074 19.1595 12.6641 19.1688 12.6264C18.9192 12.2532 18.5981 10.9844 18.2863 10.7686C18.198 10.7072 17.5713 10.4922 17.5037 10.5405ZM18.7924 10.913L19.446 12.3653C19.6058 12.4014 20.5166 11.6319 20.7025 11.4867C20.7025 11.3869 19.0221 10.9614 18.7917 10.913H18.7924ZM21.0074 11.8331C20.8922 11.7517 20.4982 12.0681 20.3745 12.1503C20.2217 12.2516 19.6418 12.6579 19.6296 12.7869L20.522 14.8951C20.7823 14.7907 21.6525 14.6593 21.7024 14.3921C21.7454 14.164 21.5895 13.4513 21.525 13.1909C21.4067 12.7155 21.1863 12.2839 21.0081 11.8331H21.0074ZM17.3317 14.038C17.2219 13.74 17.2849 13.5081 17.3025 13.2101C16.8433 12.9352 16.3994 12.2432 16.0038 11.9805C15.9201 11.9245 15.8479 11.8707 15.7412 11.9183C15.5937 12.3192 14.9094 12.873 14.7743 13.2116C14.6913 13.419 14.9916 13.8913 14.6621 14.2454C14.5961 14.3168 14.4433 14.3383 14.4271 14.4082C14.3534 14.7269 14.7274 15.5003 14.6614 15.8851C14.7758 15.9104 14.8288 15.8428 14.914 15.7944C15.7373 15.3252 16.4869 14.5027 17.3309 14.0388L17.3317 14.038ZM13.2843 13.7423C13.2874 13.6579 13.2989 13.588 13.249 13.5104C13.1845 13.4098 11.3482 12.5082 11.1201 12.4252C11.0426 12.3968 10.9742 12.3446 10.8836 12.3699C10.6639 12.4321 10.2984 14.1939 10.3775 14.508L13.2843 13.7423ZM20.1664 15.0403C20.2363 14.9435 19.4207 13.227 19.2893 12.9797L18.8078 13.2992L18.7264 14.0726C18.9514 14.3014 19.6111 15.0986 19.8991 15.1148C19.9383 15.1171 20.1579 15.0518 20.1664 15.041V15.0403ZM13.4349 14.0503C12.6838 14.2454 11.9219 14.4351 11.1785 14.6601C11.0702 14.6931 11.0433 14.6109 11.0656 14.8137L12.7736 15.2783C12.8735 15.0372 13.7313 14.2715 13.4349 14.0503ZM15.1206 16.1132L16.1329 16.4065L19.403 15.2338C19.1403 15.041 18.6772 14.3468 18.3754 14.3491C18.2518 14.3498 18.1281 14.432 17.9945 14.4266C17.8401 14.4205 17.6827 14.2799 17.5406 14.2945C17.3985 14.3091 15.5307 15.7215 15.2796 15.9273C15.2335 15.9649 15.0907 16.0725 15.1206 16.1116V16.1132ZM14.1138 14.5219C13.8926 14.187 13.332 15.041 13.2075 15.2346C13.1661 15.2998 13.067 15.3313 13.1668 15.4281C13.3419 15.4964 14.2528 15.9043 14.3549 15.8075L14.113 14.5219H14.1138Z"
+          fill="#FDC314"
+        />
+        <Path
+          d="M25.0647 15.5027V16.7645C25.0647 16.7914 24.9472 16.9581 24.908 16.9903L16.076 19.9448C13.3788 18.9626 10.2968 18.2821 7.66028 17.1862C7.50207 17.1201 7.08812 16.9665 7.08812 16.7638V15.502L16.076 18.4756L25.0639 15.502L25.0647 15.5027Z"
+          fill="#FDC211"
+        />
+      </G>
+      <Defs>
+        <ClipPath id="clip0_2938_1971">
+          <Rect width="19.2" height="19.2" fill="white" transform="translate(6.39999 6.39941)" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+}

apps/ledger-live-mobile/src/icons/P2P.tsx → apps/ledger-live-mobile/src/icons/providers/P2P.tsx

@@ -50,5 +50,3 @@ export function P2P({ size = BASE_SIZE, outline, ...props }: Props): JSX.Element
     </Svg>
   );
 }
-
-export default P2P;

apps/ledger-live-mobile/src/icons/RocketPool.tsx → apps/ledger-live-mobile/src/icons/providers/RocketPool.tsx

@@ -255,5 +255,3 @@ export function RocketPool({ size = 32, outline, ...props }: Props): JSX.Element
     </Svg>
   );
 }
-
-export default RocketPool;

apps/ledger-live-mobile/src/icons/Stader.tsx → apps/ledger-live-mobile/src/icons/providers/Stader.tsx

@@ -35,5 +35,3 @@ export function Stader({ size = BASE_SIZE, outline, ...props }: Props): JSX.Elem
     </Svg>
   );
 }
-
-export default Stader;