feat: remove the use of moebius to generate avatar colors (#1054)

examples/ui-demo/package.json

@@ -13,7 +13,6 @@
     "@account-kit/core": "^4.0.0-beta.0",
     "@account-kit/infra": "^4.0.0-beta.0",
     "@account-kit/react": "^4.0.0-beta.0",
-    "@phun-ky/moebius": "^1.0.6",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-switch": "^1.0.3",

examples/ui-demo/src/components/shared/UserAvatar.tsx

@@ -1,39 +1,17 @@
-import Moebius from "@phun-ky/moebius";
 import Avatar from "boring-avatars";
-import { useDebounceEffect } from "@/utils/hooks/useDebounceEffect";
-import { useState } from "react";
+import { useMemo } from "react";
 
 type UserAvatarProps = {
   address: string;
   primaryColor: string;
 };
 
-const BASE_COLOR = "#37BCFA";
-const UserAvatar = ({ address, primaryColor }: UserAvatarProps) => {
-  const [avatarColors, setAvatarColors] = useState<string[]>([]);
-
-  const getMoebiusColors = async (): Promise<string[]> => {
-    const { MoebiusColor, MoebiusPalettes } = await Moebius();
-
-    const palette = new MoebiusPalettes({
-      baseColor: new MoebiusColor(BASE_COLOR, "primary"),
-      secondaryColor: new MoebiusColor(primaryColor, "secondary"),
-      diverging: true,
-      bezier: true,
-    });
-
-    return palette.colors.interpolate as string[];
-  };
+const SUB_COLORS = ["#37BCFA", "#6D37FA"];
 
-  useDebounceEffect(
-    () => {
-      getMoebiusColors().then((moebius: string[]) => {
-        setAvatarColors(moebius);
-      });
-    },
-    [primaryColor],
-    2000
-  );
+const UserAvatar = ({ address, primaryColor }: UserAvatarProps) => {
+  const avatarColors = useMemo(() => {
+    return shuffleColors([primaryColor, ...SUB_COLORS]);
+  }, [primaryColor]);
 
   return (
     <Avatar
@@ -45,4 +23,8 @@ const UserAvatar = ({ address, primaryColor }: UserAvatarProps) => {
   );
 };
 
+const shuffleColors = (colors: string[]) => {
+  return colors.sort(() => Math.random() - 0.5);
+};
+
 export { UserAvatar };

yarn.lock

@@ -4643,14 +4643,6 @@
     "@parcel/watcher-win32-ia32" "2.3.0"
     "@parcel/watcher-win32-x64" "2.3.0"
 
-"@phun-ky/moebius@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/@phun-ky/moebius/-/moebius-1.0.6.tgz"
-  integrity sha512-cCbIEZHxwSeoyrqFA6ct+8mqARfdOdIlu/SKXTg29QGnTBm5SRCEIpQU62EFpC3FEsvtYbWZPqx0a+Wz3MTt1A==
-  dependencies:
-    chroma-js "^2.4.2"
-    nearest-color "^0.4.4"
-
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz"
@@ -16940,11 +16932,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-nearest-color@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.npmjs.org/nearest-color/-/nearest-color-0.4.4.tgz"
-  integrity sha512-orhcaIORC10tf41Ld2wwlcC+FaAavHG87JHWB3eHH5p7v2k9Tzym2XNEZzLAm5YJwGv6Q38WWc7SOb+Qfu/4NQ==
-
 negotiator@0.6.3, negotiator@^0.6.3:
   version "0.6.3"
   resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz"