fix: pre prod cleanup (#4)

* fix: pre prod cleanup

* fix: package types

* fix: package structure

* fix: components generations

* fix: package version

* fix: deploy

apps/docs/package.json

@@ -31,7 +31,6 @@
     "start": "next start"
   },
   "dependencies": {
-    "@bgd-labs/aave-address-book": "^2.26.1",
     "@bgd-labs/react-web3-icons": "workspace:^",
     "clsx": "^2.1.0",
     "next": "^14.1.4",
@@ -46,7 +45,6 @@
     "@types/react-dom": "^18.2.24",
     "postcss": "^8.4.38",
     "prettier-plugin-tailwindcss": "^0.5.13",
-    "svgo": "^3.2.0",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7"
   },

apps/docs/src/components/ChainIconCard.tsx

@@ -18,7 +18,7 @@ export const ChainIconCard = ({
   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="max-w-[100%] p-2">
           <div className="text-sm font-semibold text-gray-800">{name}</div>
           <div className="font-mono text-xs uppercase text-gray-400">
             {chainId}

icons/README.md

@@ -1,3 +1,3 @@
 # Icons
 
-**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.
+**Do not edit these files directly.** They are automatically generated by the `generate.ts` and `generateChains.ts` scripts located in the `scripts` directory and are intended for use in the published packages.

package.json

@@ -4,7 +4,10 @@
   "version": "0.0.1",
   "author": "BGD labs",
   "license": "MIT",
-  "private": true,
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "contributors": [
     {
       "name": "Karen Kakosyan",

packages/react-web3-icons/README.md

@@ -10,15 +10,14 @@ This package includes all the icons in several variations related to the Aave ec
 <code>pnpm add @bgd-labs/react-web3-icons</code>
 
 ### Usage
-You have two use cases of this package:
-1) You can directly use the icon you need as a react component. This will be just a svg, which you can style if necessary.
+### 1) You can directly use the icon you need as a react component. This will be just a svg, which you can style if necessary.
 ```tsx
 import { IconAaveFull } from "@bgd-labs/react-web3-icons";
 export const UsageExample = () => {
   return <IconAaveFull />;
 };
 ```
-2) You can use `AssetIcon` or `ChainIcon` components.
+### 2) You can use `AssetIcon` or `ChainIcon` components.
 
 #### AssetIcon
 | Parameter  | Type                             | Description |
@@ -47,5 +46,32 @@ export const UsageExample = () => {
 };
 ```
 
+### 3) You can get chain or asset name without rpc call.
+#### Get asset name
+| Parameter  | Type                             | Description |
+|:-----------|:---------------------------------| :------ |
+| `symbol`   | `string`                         | The `symbol` parameter is not case sensitive, you can pass it as `AAVE` or `aave` or `AaVe`. The result will always be the AAVE asset token icon.
+| `formatSymbol`   | `(symbol: string) => string`     | If you have a special condition for asset symbol formatting, you can replace the formatting function inside the component.
+
+```tsx
+import { AssetIcon, getAssetName } from "@bgd-labs/react-web3-icons";
+export const UsageExample = () => {
+  const assetName = getAssetName({ symbol: "aave" });
+  return <div><span>{assetName}</span><AssetIcon symbol="aave" /></div>;
+};
+```
+#### Get chain name
+| Parameter  | Type                             | Description |
+|:-----------|:---------------------------------| :------ |
+| `chainId`   | `number`                         | Id of the chain.
+
+```tsx
+import { ChainIcon, getChainName } from "@bgd-labs/react-web3-icons";
+export const UsageExample = () => {
+  const chainName = getChainName({ chainId: 1 });
+  return <div><span>{chainName}</span><ChainIcon chainId={1} /></div>;
+};
+```
+
 ## Copyright
 2024 BGD Labs

packages/react-web3-icons/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@bgd-labs/react-web3-icons",
   "description": "Svg set of web3 assets icons.",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "author": "BGD labs",
   "license": "MIT",
-  "private": true,
+  "private": false,
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,9 @@
   "files": [
     "src/**/*"
   ],
+  "type": "module",
   "scripts": {
-    "start": "tsup src/index.tsx --watch",
+    "start": "tsup src/index.ts --watch",
     "build": "tsup",
     "ci:publish": "npm run build && npm publish --access=public"
   },

packages/react-web3-icons/src/AssetIcon.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import React, { Suspense } from "react";
+
 import { AssetIconProps, TokenVariant } from "./types";
+import { formatSymbolForIcon } from "./utils";
 import { capitalize } from "./utils/capitalize";
-import { formatSymbolForIcon } from "./utils/formatSymbolForIcon";
 
 /**
  * Renders a tokenIcon specified by symbol.
@@ -18,16 +20,27 @@ export const AssetIcon = ({
     : formatSymbolForIcon({ symbol });
 
   try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const Icon = require(
-      `./components/Icon${tokenTag ? tokenTag : ""}${tokenTag ? formattedSymbol : capitalize(formattedSymbol)}${capitalize(variant)}`,
-    )?.default;
-    return <Icon />;
+    const Icon = React.lazy(
+      () =>
+        import(
+          `./components/Icon${tokenTag ? tokenTag : ""}${tokenTag ? formattedSymbol : capitalize(formattedSymbol)}${capitalize(variant)}`
+        ),
+    );
+    return (
+      // TODO: need think about fallback
+      <Suspense fallback={<div />}>
+        <Icon />
+      </Suspense>
+    );
   } catch (e) {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const UnknownIcon = require(
-      `./components/IconUnknown${capitalize(variant)}`,
-    ).default;
-    return <UnknownIcon />;
+    const UnknownIcon = React.lazy(
+      () => import(`./components/IconUnknown${capitalize(variant)}`),
+    );
+    return (
+      // TODO: need think about fallback
+      <Suspense fallback={<div />}>
+        <UnknownIcon />
+      </Suspense>
+    );
   }
 };

packages/react-web3-icons/src/ChainIcon.tsx

@@ -1,22 +1,38 @@
 "use client";
 
+import React, { Suspense } from "react";
+
+import { ChainType } from "./types";
+import { getChainName } from "./utils";
 import { capitalize } from "./utils/capitalize";
-import { getChainName } from "./utils/getChainName";
 
 /**
  * Renders a chain icon specified by chainId.
  */
-export const ChainIcon = ({ chainId }: { chainId: number }) => {
+export const ChainIcon = ({ chainId }: Pick<ChainType, "chainId">) => {
   const chainName = getChainName({ chainId });
   try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const Icon = require(
-      `./components/chains/Icon${capitalize(chainName.replace(/\s/g, "").toLowerCase())}`,
-    )?.default;
-    return <Icon />;
+    const Icon = React.lazy(
+      () =>
+        import(
+          `./components/chains/Icon${capitalize(chainName.replace(/\s/g, "").toLowerCase())}`
+        ),
+    );
+    return (
+      // TODO: need think about fallback
+      <Suspense fallback={<div />}>
+        <Icon />
+      </Suspense>
+    );
   } catch (e) {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const UnknownIcon = require(`./components/IconUnknownFull`).default;
-    return <UnknownIcon />;
+    const UnknownIcon = React.lazy(
+      () => import(`./components/IconUnknownFull`),
+    );
+    return (
+      // TODO: need think about fallback
+      <Suspense fallback={<div />}>
+        <UnknownIcon />
+      </Suspense>
+    );
   }
 };

packages/react-web3-icons/src/components/Icon1inchFull.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const Icon1inchFull = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const Icon1inchFull = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="100%"
     height="100%"
     fill="none"
     viewBox="0 0 32 32"
-    {...props}
   >
     <g clipPath="url(#clip0_292_10)">
       <path

packages/react-web3-icons/src/components/Icon1inchMono.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const Icon1inchMono = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const Icon1inchMono = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="100%"
     height="100%"
     fill="none"
     viewBox="0 0 32 32"
-    {...props}
   >
     <g fill="currentColor" clipPath="url(#clip0_292_8)">
       <path d="M11.293 10.4C9.813 9.507 9.64 7.187 9.64 7.173c-.04.174-.893 3.147 1.653 3.227M10.68 11.787c.16-.28.027-.48-.107-.587-.026-.013-.04-.04-.04-.04-.266-.133-1.893-.747-3.52-1.307 1.414.934 2.987 1.854 3.254 1.987.2.08.333.107.413-.04zM13.96 13.053 12.827 15s1.053-.48 1.453-1.093c.333-.52-.32-.854-.32-.854" />

packages/react-web3-icons/src/components/IconA1inchFull.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const IconA1inchFull = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const IconA1inchFull = () => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <circle
       cx={16}

packages/react-web3-icons/src/components/IconA1inchMono.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const IconA1inchMono = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const IconA1inchMono = () => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <circle cx={16} cy={16} r={15} stroke="currentColor" strokeWidth={2} />
     <g clipPath="url(#circleClip)">

packages/react-web3-icons/src/components/IconAaaveFull.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const IconAaaveFull = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const IconAaaveFull = () => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <circle
       cx={16}

packages/react-web3-icons/src/components/IconAaaveMono.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const IconAaaveMono = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const IconAaaveMono = () => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <circle cx={16} cy={16} r={15} stroke="currentColor" strokeWidth={2} />
     <g clipPath="url(#circleClip)">

packages/react-web3-icons/src/components/IconAamplFull.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const IconAamplFull = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const IconAamplFull = () => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <circle
       cx={16}

packages/react-web3-icons/src/components/IconAamplMono.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const IconAamplMono = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const IconAamplMono = () => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <circle cx={16} cy={16} r={15} stroke="currentColor" strokeWidth={2} />
     <g clipPath="url(#circleClip)">

packages/react-web3-icons/src/components/IconAarbFull.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const IconAarbFull = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const IconAarbFull = () => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <circle
       cx={16}

packages/react-web3-icons/src/components/IconAarbMono.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const IconAarbMono = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const IconAarbMono = () => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <circle cx={16} cy={16} r={15} stroke="currentColor" strokeWidth={2} />
     <g clipPath="url(#circleClip)">

packages/react-web3-icons/src/components/IconAavaxFull.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const IconAavaxFull = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const IconAavaxFull = () => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <circle
       cx={16}

packages/react-web3-icons/src/components/IconAavaxMono.tsx

@@ -1,12 +1,11 @@
-import type { SVGProps } from "react";
-const IconAavaxMono = (props: SVGProps<SVGSVGElement>) => (
+import * as React from "react";
+const IconAavaxMono = () => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <circle cx={16} cy={16} r={15} stroke="currentColor" strokeWidth={2} />
     <g clipPath="url(#circleClip)">