feat: update package icons (#21)

* feat: update logic of the icons generation

* fix: code style and remove test release workflow

* feat: added statics icons and fix dynamics

* fix: cleanup

* fix: added zkSync and celo chains icons (without mono versions)

apps/docs/src/components/AssetIconCard.tsx

@@ -1,14 +1,10 @@
 "use client";
 
-import {
-  AssetTag,
-  IconVariant,
-  Web3IconType,
-} from "@bgd-labs/react-web3-icons/dist/utils";
+import { AssetTag, IconVariant } from "@bgd-labs/react-web3-icons/dist/utils";
 import { useState } from "react";
 
 import { IconCard } from "@/components/IconCard";
-import { Web3Icon } from "@/components/Web3Icon";
+import { AssetIcon } from "@/components/Web3Icons/AssetIcon";
 import { githubIconsPath } from "@/utils/constants";
 
 import { IconInfoIcons } from "../../../../src/scripts/types";
@@ -41,15 +37,6 @@ export const AssetIconCard = ({
       ][variant]
     : icons[variant];
 
-  const Icon = () => (
-    <Web3Icon
-      iconInfo={{
-        type: Web3IconType.asset,
-        info: { symbol, variant, tokenTag: assetTag },
-      }}
-    />
-  );
-
   return (
     <IconCard
       svgPath={`${githubIconsPath}${iconPath}`}
@@ -65,7 +52,11 @@ export const AssetIconCard = ({
       setActiveType={setVariant}
       activeType={variant}
     >
-      <Icon />
+      <AssetIcon
+        symbol={symbol}
+        assetTag={assetTag}
+        mono={variant === IconVariant.Mono}
+      />
     </IconCard>
   );
 };

apps/docs/src/components/ChainIconCard.tsx

@@ -3,12 +3,11 @@
 import {
   IconInfoIcons,
   IconVariant,
-  Web3IconType,
 } from "@bgd-labs/react-web3-icons/dist/utils";
 import { useState } from "react";
 
 import { IconCard } from "@/components/IconCard";
-import { Web3Icon } from "@/components/Web3Icon";
+import { ChainIcon } from "@/components/Web3Icons/ChainIcon";
 import { githubIconsPath } from "@/utils/constants";
 
 export const ChainIconCard = ({
@@ -21,11 +20,6 @@ export const ChainIconCard = ({
   icons: IconInfoIcons;
 }) => {
   const [variant, setVariant] = useState(IconVariant.Full);
-  const Icon = () => (
-    <Web3Icon
-      iconInfo={{ type: Web3IconType.chain, info: { chainId, variant } }}
-    />
-  );
   return (
     <IconCard
       svgPath={`${githubIconsPath}${icons[variant]}`}
@@ -35,7 +29,7 @@ export const ChainIconCard = ({
       setActiveType={setVariant}
       activeType={variant}
     >
-      <Icon />
+      <ChainIcon chainId={chainId} mono={variant === IconVariant.Mono} />
     </IconCard>
   );
 };

apps/docs/src/components/InstalledWalletIcon.tsx

@@ -1,25 +1,16 @@
 "use client";
 
-import {
-  getWeb3WalletName,
-  IconVariant,
-  Web3IconType,
-} from "@bgd-labs/react-web3-icons/dist/utils";
+import { getWeb3WalletName } from "@bgd-labs/react-web3-icons/dist/utils";
 import dynamic from "next/dynamic";
 
-import { Web3Icon } from "@/components/Web3Icon";
+import { WalletIcon } from "@/components/Web3Icons/WalletIcon";
 
 const InstalledBrowserWalletWallet = () => {
   const walletName = getWeb3WalletName();
   return (
     <div>
       {walletName}
-      <Web3Icon
-        iconInfo={{
-          type: Web3IconType.wallet,
-          info: { walletName, variant: IconVariant.Full },
-        }}
-      />
+      <WalletIcon walletName={walletName} />
     </div>
   );
 };

apps/docs/src/components/WalletIconCard.tsx

@@ -3,12 +3,11 @@
 import {
   IconInfoIcons,
   IconVariant,
-  Web3IconType,
 } from "@bgd-labs/react-web3-icons/dist/utils";
 import { useState } from "react";
 
 import { IconCard } from "@/components/IconCard";
-import { Web3Icon } from "@/components/Web3Icon";
+import { WalletIcon } from "@/components/Web3Icons/WalletIcon";
 import { githubIconsPath } from "@/utils/constants";
 
 export const WalletIconCard = ({
@@ -19,15 +18,6 @@ export const WalletIconCard = ({
   icons: IconInfoIcons;
 }) => {
   const [variant, setVariant] = useState(IconVariant.Full);
-  const Icon = () => (
-    <Web3Icon
-      iconInfo={{
-        type: Web3IconType.wallet,
-        info: { walletName: name, variant },
-      }}
-    />
-  );
-
   return (
     <IconCard
       svgPath={`${githubIconsPath}${icons[variant]}`}
@@ -37,7 +27,7 @@ export const WalletIconCard = ({
       setActiveType={setVariant}
       activeType={variant}
     >
-      <Icon />
+      <WalletIcon walletName={name} mono={variant === IconVariant.Mono} />
     </IconCard>
   );
 };

apps/docs/src/components/Web3Icons/AssetIcon.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { AssetIcon as AI } from "@bgd-labs/react-web3-icons";
+import {
+  AssetIconProps,
+  ExternalComponentBaseProps,
+} from "@bgd-labs/react-web3-icons/dist/utils";
+
+import { cn } from "@/utils/cn";
+
+/**
+ * Renders an asset icon specified by symbol.
+ */
+export const AssetIcon = ({
+  symbol,
+  className,
+  ...props
+}: AssetIconProps & ExternalComponentBaseProps) => {
+  return (
+    <AI
+      symbol={symbol}
+      className={cn("size-[70px]", className)}
+      loader={
+        <div
+          className={cn(
+            "size-[70px] animate-pulse rounded-full bg-brand-300",
+            className,
+          )}
+        />
+      }
+      {...props}
+    />
+  );
+};

apps/docs/src/components/Web3Icons/ChainIcon.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { StaticChainIcon as CI } from "@bgd-labs/react-web3-icons";
+import { ExternalComponentBaseProps } from "@bgd-labs/react-web3-icons/dist/utils";
+
+import { cn } from "@/utils/cn";
+
+interface ChainIconProps extends ExternalComponentBaseProps {
+  chainId: number;
+}
+/**
+ * Renders a chain icon specified by chainId.
+ */
+export const ChainIcon = ({ chainId, className, ...props }: ChainIconProps) => {
+  return (
+    <CI
+      chainId={chainId}
+      className={cn("size-[70px]", className)}
+      loader={
+        <div
+          className={cn(
+            "size-[70px] animate-pulse rounded-full bg-brand-300",
+            className,
+          )}
+        />
+      }
+      {...props}
+    />
+  );
+};

apps/docs/src/components/Web3Icons/WalletIcon.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { WalletIcon as WI } from "@bgd-labs/react-web3-icons";
+import { ExternalComponentBaseProps } from "@bgd-labs/react-web3-icons/dist/utils/index";
+
+import { cn } from "@/utils/cn";
+
+interface WalletIconProps extends ExternalComponentBaseProps {
+  walletName: string;
+}
+/**
+ * Renders a wallet icon specified by walletName.
+ */
+export const WalletIcon = ({
+  walletName,
+  className,
+  ...props
+}: WalletIconProps) => {
+  return (
+    <WI
+      walletName={walletName}
+      className={cn("size-[70px]", className)}
+      loader={
+        <div
+          className={cn(
+            "size-[70px] animate-pulse rounded-full bg-brand-300",
+            className,
+          )}
+        />
+      }
+      {...props}
+    />
+  );
+};