Brands icons and stk template (#37)

* feat: added brands logic

* feat: added brand icons for lido and etherfi

* feat: added stk logic

* fix: added usds asset

Author: Argeare5

README.md

@@ -54,6 +54,18 @@ Package with some of web3 assets, chains and web3 wallets icons for easy use in
   "identityFlag": "isMetaMask"
 }
 ```
+### Adding new brand icon
+1. Add new `svg` icon files to `src/assets` folder
+2. Naming convention is `[brandName.toLowerCase()].svg`
+3. Prepare a metadata file in `src/assets` folder with the same name as the icon file, but with `.json` extension:
+
+```json
+{
+  "type": ["brand"],
+  "brandName": "Lido",
+  "addressAliases": ["0x4e033931ad43597d96D6bcc25c280717730B58B1"]
+}
+```
 ### Adding new combine asset and chain icon
 1. Add new `svg` icon files to `src/assets` folder
 2. Naming convention is `[symbol]_mono.svg` and `[symbol]_full.svg`

apps/docs/src/app/icons/page.tsx

@@ -3,13 +3,18 @@ import Fuse from "fuse.js";
 import React, { useMemo } from "react";
 
 import { AssetIconCard } from "@/components/AssetIconCard";
+import { BrandIconCard } from "@/components/BrandIconCard";
 import { Branding } from "@/components/Branding";
 import { ChainIconCard } from "@/components/ChainIconCard";
 import { Search } from "@/components/Search";
 import { WalletIconCard } from "@/components/WalletIconCard";
 
 import icons from "../../../../../icons/icons.json";
-import { IconInfo, IconType } from "../../../../../src/scripts/types";
+import {
+  IconFormat,
+  IconInfo,
+  IconType,
+} from "../../../../../src/scripts/types";
 
 async function IconsPage({
   searchParams,
@@ -23,7 +28,7 @@ async function IconsPage({
   const filteredIcons = useMemo(
     () =>
       new Fuse(icons as IconInfo[], {
-        keys: ["chainId", "symbol", "identityFlag", "walletName"],
+        keys: ["chainId", "symbol", "identityFlag", "walletName", "brandName"],
         threshold: 0.3,
         distance: 1000,
       })
@@ -42,16 +47,16 @@ async function IconsPage({
           .map((item) => {
             const asset = item;
             if (asset.type.includes(IconType.asset)) {
-              if (asset.icons.aToken && !asset.icons.stataToken) {
-                return (
-                  <React.Fragment key={asset?.symbol ?? asset?.chainId}>
-                    <AssetIconCard
-                      name={asset.name ?? ""}
-                      symbol={asset?.symbol ?? ""}
-                      chainId={asset.chainId}
-                      chainName={asset.chainName}
-                      icons={asset.icons}
-                    />
+              return (
+                <React.Fragment key={asset?.symbol ?? asset?.chainId}>
+                  <AssetIconCard
+                    name={asset.name ?? ""}
+                    symbol={asset?.symbol ?? ""}
+                    chainId={asset.chainId}
+                    chainName={asset.chainName}
+                    icons={asset.icons}
+                  />
+                  {asset.icons[IconFormat.aToken] && (
                     <AssetIconCard
                       name={asset.name ?? ""}
                       symbol={asset?.symbol ?? ""}
@@ -60,18 +65,8 @@ async function IconsPage({
                       icons={asset.icons}
                       assetTag={AssetTag.AToken}
                     />
-                  </React.Fragment>
-                );
-              } else if (!asset.icons.aToken && asset.icons.stataToken) {
-                return (
-                  <React.Fragment key={asset?.symbol ?? asset?.chainId}>
-                    <AssetIconCard
-                      name={asset.name ?? ""}
-                      symbol={asset?.symbol ?? ""}
-                      chainId={asset.chainId}
-                      chainName={asset.chainName}
-                      icons={asset.icons}
-                    />
+                  )}
+                  {asset.icons[IconFormat.stataToken] && (
                     <AssetIconCard
                       name={asset.name ?? ""}
                       symbol={asset?.symbol ?? ""}
@@ -80,48 +75,19 @@ async function IconsPage({
                       icons={asset.icons}
                       assetTag={AssetTag.StataToken}
                     />
-                  </React.Fragment>
-                );
-              } else if (asset.icons.aToken && asset.icons.stataToken) {
-                return (
-                  <React.Fragment key={asset?.symbol ?? asset?.chainId}>
-                    <AssetIconCard
-                      name={asset.name ?? ""}
-                      symbol={asset?.symbol ?? ""}
-                      chainId={asset.chainId}
-                      chainName={asset.chainName}
-                      icons={asset.icons}
-                    />
+                  )}
+                  {asset.icons[IconFormat.stkToken] && (
                     <AssetIconCard
                       name={asset.name ?? ""}
                       symbol={asset?.symbol ?? ""}
                       chainId={asset.chainId}
                       chainName={asset.chainName}
                       icons={asset.icons}
-                      assetTag={AssetTag.AToken}
-                    />
-                    <AssetIconCard
-                      name={asset.name ?? ""}
-                      symbol={asset?.symbol ?? ""}
-                      chainId={asset.chainId}
-                      chainName={asset.chainName}
-                      icons={asset.icons}
-                      assetTag={AssetTag.StataToken}
+                      assetTag={AssetTag.STKToken}
                     />
-                  </React.Fragment>
-                );
-              } else {
-                return (
-                  <AssetIconCard
-                    key={asset?.symbol ?? asset?.chainId}
-                    name={asset.name ?? ""}
-                    symbol={asset?.symbol ?? ""}
-                    chainId={asset.chainId}
-                    chainName={asset.chainName}
-                    icons={asset.icons}
-                  />
-                );
-              }
+                  )}
+                </React.Fragment>
+              );
             } else if (asset.type.includes(IconType.chain)) {
               return (
                 <ChainIconCard
@@ -138,6 +104,13 @@ async function IconsPage({
                   name={asset?.walletName ?? "Unknown"}
                 />
               );
+            } else if (asset.type.includes(IconType.brand)) {
+              return (
+                <BrandIconCard
+                  icons={asset.icons}
+                  name={asset?.brandName ?? "Unknown"}
+                />
+              );
             }
           })}
         {!filteredIcons.length && searchString !== "" && (

apps/docs/src/components/BrandIconCard.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { githubIconsPath } from "@bgd-labs/react-web3-icons/dist/constants";
+import {
+  IconInfoIcons,
+  IconVariant,
+} from "@bgd-labs/react-web3-icons/dist/utils";
+import { useState } from "react";
+
+import { IconCard } from "@/components/IconCard";
+import { BrandIcon } from "@/components/Web3Icons/BrandIcon";
+
+export const BrandIconCard = ({
+  name,
+  icons,
+}: {
+  name: string;
+  icons: IconInfoIcons;
+}) => {
+  const [variant, setVariant] = useState(IconVariant.Full);
+  return (
+    <IconCard
+      svgPath={`${githubIconsPath}/${icons[variant]}`}
+      name={name}
+      subName={""}
+      fileName={name}
+      setActiveType={setVariant}
+      activeType={variant}
+    >
+      <BrandIcon addressOrName={name} mono={variant === IconVariant.Mono} />
+    </IconCard>
+  );
+};

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

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