Added chains icons (#3)

* fix: AssetIcon component & eslint errors * feat: added chains icons * fix: update workflows * fix: cleanup
bgd-labs · Jun 19, 2024 · ef37d0f · ef37d0f
1 parent aa07d71
commit ef37d0f
Show file tree

Hide file tree

Showing 960 changed files with 3,433 additions and 3,595 deletions.
diff --git a/.github/workflows/release-node-alpha.yml b/.github/workflows/release-node-alpha.yml
@@ -19,7 +19,9 @@ jobs:
         with:
           node-version: 20
           registry-url: "https://registry.npmjs.org"
-          cache: "pnpm"
+
+      - name: Install PNPM
+        run: npm i -g pnpm
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

diff --git a/.github/workflows/release-node.yml b/.github/workflows/release-node.yml
@@ -21,7 +21,9 @@ jobs:
         with:
           node-version: 20
           registry-url: "https://registry.npmjs.org"
-          cache: "pnpm"
+
+      - name: Install PNPM
+        run: npm i -g pnpm
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # Web3 icons library
-Svg set of web3 assets icons and utils for easy generation.
+Svg set of web3 icons and utils for easy generation.
 
 ### Installation
 We have prepared a package with all the icons for easy use in the React.js ecosystem. Described in more detail [here](./packages/react-web3-icons/README.md).
@@ -11,10 +11,10 @@ We have prepared a package with all the icons for easy use in the React.js ecosy
 #### pnpm
 <code>pnpm add @bgd-labs/react-web3-icons</code>
 
-### Adding new icons
-1. Add new `svg` icon files to `src/assets/icons` folder
+### Adding new asset icon
+1. Add new `svg` icon files to `src/assets/assets-icons` folder
 2. Naming convention is `[symbol]_mono.svg` and `[symbol]_full.svg`
-3. Prepare a metadata file in `src/assets/icons` folder with the same name as the icon file, but with `.json` extension:
+3. Prepare a metadata file in `src/assets/assets-icons` folder with the same name as the icon file, but with `.json` extension:
 ```json
 {
   "name": "Aave",
@@ -31,6 +31,22 @@ We have prepared a package with all the icons for easy use in the React.js ecosy
 pnpm generate
 ```
 
+### Adding new chain icon
+1. Add new `svg` icon files to `src/assets/chains-icons` folder
+2. Naming convention is `[chainName.replaceAll(/\s/g, '').toLowerCase()].svg`
+3. Prepare a metadata file in `src/assets/chains-icons` folder with the same name as the icon file, but with `.json` extension:
+
+```json
+{
+  "name": "Ethereum",
+  "chainId": 1
+}
+```
+4. Generate icons and react components, run:
+```bash
+pnpm generate
+```
+
 ### Running docs project
 
 To run docs website locally:

diff --git a/apps/docs/.eslintrc.cjs b/apps/docs/.eslintrc.cjs
diff --git a/apps/docs/README.md b/apps/docs/README.md
@@ -1,5 +1,5 @@
 # React web3 icons preview
-This is a small application that has a gallery of all the asset icons that are included in the package. Also here you can immediately download the SVG icon of the asset you need in the desired version if you do not need to install the package, or for some reason the package does not suit you.
+This is a small application that has a gallery of all the icons that are included in the package. Also here you can immediately download the SVG icon of the asset you need in the desired version if you do not need to install the package, or for some reason the package does not suit you.
 
 ## Copyright
 2024 BGD Labs
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -36,34 +36,19 @@
     "clsx": "^2.1.0",
     "next": "^14.1.4",
     "next-themes": "^0.3.0",
-    "pino-pretty": "^11.0.0",
-    "postgres": "^3.4.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "server-only": "^0.0.1",
     "tailwind-merge": "^2.2.2"
   },
   "devDependencies": {
-    "@types/eslint": "^8.56.7",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
     "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.13",
     "svgo": "^3.2.0",
     "tailwindcss": "^3.4.3",
-    "tailwindcss-animate": "^1.0.7",
-    "tsx": "^4.7.3",
-    "typescript": "^5.4.5"
+    "tailwindcss-animate": "^1.0.7"
   },
   "packageManager": "pnpm@8.15.5"
 }
diff --git a/apps/docs/src/app/icons/page.tsx b/apps/docs/src/app/icons/page.tsx
@@ -1,10 +1,13 @@
+import { ChainIconCard } from "@/components/ChainIconCard";
 import { IconCard } from "@/components/IconCard";
 
-import assets from "../../../../../icons/icons.json";
+import assets from "../../../../../icons/assets-icons/assets-icons.json";
+import chains from "../../../../../icons/chains-icons/chains-icons.json";
 
 const IconsPage = () => {
   return (
     <main className="p-4 md:p-8 xl:p-16">
+      <h2 className="mb-4 text-4xl font-bold">Assets icons</h2>
       <div className="flex flex-wrap items-center justify-center gap-2 sm:justify-start">
         {assets
           .filter((asset) => asset.symbol !== "unknown")
@@ -16,6 +19,17 @@ const IconsPage = () => {
             />
           ))}
       </div>
+
+      <h2 className="mb-4 mt-12 text-4xl font-bold">Chains icons</h2>
+      <div className="mt-8 flex flex-wrap items-center justify-center gap-2 sm:justify-start">
+        {chains.map((chain) => (
+          <ChainIconCard
+            key={chain.chainId}
+            chainId={chain.chainId}
+            name={chain.name}
+          />
+        ))}
+      </div>
     </main>
   );
 };

diff --git a/apps/docs/src/components/ChainIconCard.tsx b/apps/docs/src/components/ChainIconCard.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { ChainIcon } from "@bgd-labs/react-web3-icons";
+import { renderToString } from "react-dom/server";
+
+import { CopyToClipboard } from "@/components/CopyToClipboard";
+import { DownloadButton } from "@/components/DownloadButton";
+
+export const ChainIconCard = ({
+  name,
+  chainId,
+}: {
+  name: string;
+  chainId: number;
+}) => {
+  const Icon = () => <ChainIcon chainId={chainId} />;
+
+  return (
+    <div className="relative flex h-[175px] w-[175px] flex-col justify-center border border-gray-200">
+      <div className="absolute top-0 w-full flex-1">
+        <div className="max-w-[75%] p-2">
+          <div className="text-sm font-semibold text-gray-800">{name}</div>
+          <div className="font-mono text-xs uppercase text-gray-400">
+            {chainId}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1" />
+
+      <div className="flex size-11 w-full flex-1 items-center justify-center">
+        <Icon />
+      </div>
+
+      <div className="relative flex flex-1 items-end justify-between">
+        <div className="flex flex-1 items-end justify-end">
+          <DownloadButton svgComponent={<Icon />} fileName={name} />
+          <CopyToClipboard copyText={renderToString(<Icon />)} />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/docs/src/components/IconCard.tsx b/apps/docs/src/components/IconCard.tsx
@@ -8,15 +8,12 @@ import { CopyToClipboard } from "@/components/CopyToClipboard";
 import { DownloadButton } from "@/components/DownloadButton";
 import { cn } from "@/utils/cn";
 
-// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 const tags: { tag: TokenTag | undefined; symbol: string }[] = [
   {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
     tag: TokenTag.AToken,
     symbol: "AT",
   },
   {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
     tag: TokenTag.StataToken,
     symbol: "StaT",
   },
@@ -28,27 +25,25 @@ const tags: { tag: TokenTag | undefined; symbol: string }[] = [
 
 const types = [
   {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
     tag: TokenVariant.Full,
     symbol: "Full",
   },
   {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
     tag: TokenVariant.Mono,
     symbol: "Mono",
   },
 ];
 
-export const TagButton = ({
+const TagButton = <T extends string>({
   tag,
   tagName,
   isActive,
   onClick,
 }: {
-  tag: string | undefined;
+  tag: T | undefined;
   tagName: string;
   isActive: boolean;
-  onClick: (value: string | undefined) => void;
+  onClick: (value: T | undefined) => void;
 }) => {
   return (
     <button
@@ -74,13 +69,10 @@ export const IconCard = ({
   name: string;
   symbol: string;
 }) => {
-  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents,@typescript-eslint/no-unsafe-assignment
   const [activeTag, setActiveTag] = useState<TokenTag | undefined>(undefined);
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
-  const [activeType, setActiveType] = useState<TokenVariant>(TokenVariant.Full);
+  const [activeType, setActiveType] = useState(TokenVariant.Full);
 
   const Icon = () => (
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     <AssetIcon symbol={symbol} variant={activeType} tokenTag={activeTag} />
   );
 
@@ -101,9 +93,7 @@ export const IconCard = ({
               tag={tag.tag}
               tagName={tag.symbol}
               isActive={tag.tag === activeType}
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-expect-error
-              onClick={setActiveType}
+              onClick={() => setActiveType(tag.tag)}
             />
           ))}
         </div>
@@ -123,17 +113,14 @@ export const IconCard = ({
               tag={tag.tag}
               tagName={tag.symbol}
               isActive={tag.tag === activeTag}
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-expect-error
-              onClick={setActiveTag}
+              onClick={() => setActiveTag(tag.tag)}
             />
           ))}
         </div>
 
         <div className="flex flex-1 items-end justify-end">
           <DownloadButton
             svgComponent={<Icon />}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             fileName={`${activeTag ? activeTag : ""}${symbol}${activeType === TokenVariant.Full ? "" : activeType}`}
           />
           <CopyToClipboard copyText={renderToString(<Icon />)} />

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -21,7 +21,7 @@ export default tseslint.config(
     },
   },
   {
-    ignores: ['dist', 'node_modules', 'coverage', 'eslint.config.js', "apps", "icons", "packages"],
+    ignores: ['dist', 'node_modules', 'coverage', 'eslint.config.mjs', "icons"],
   },
   js.configs.recommended,
   ...tseslint.configs.recommended,

diff --git a/icons/README.md b/icons/README.md
@@ -1,3 +1,3 @@
 # Icons
 
-**Do not edit these files directly.** They are automatically generated by the `generate.ts` script located in the `scripts` directory and are intended for use in the published packages.
+**Do not edit these files directly.** They are automatically generated by the `generate.ts` and `generateChains.ts` script located in the `scripts` directory and are intended for use in the published packages.