update: icons and styles

.gitignore

@@ -2,6 +2,7 @@
 .DS_Store
 .AppleDouble
 .LSOverride
+.idea
 
 # Icon must end with two \r
 Icon

README.md

@@ -28,4 +28,3 @@ To run docs website locally:
 ```bash
 pnpm --filter docs dev
 ```
-

apps/docs/.eslintrc.cjs

@@ -7,8 +7,7 @@ const config = {
   "plugins": [
     "@typescript-eslint",
     "prettier",
-    "simple-import-sort",
-    "drizzle"
+    "simple-import-sort"
   ],
   "extends": [
     "next/core-web-vitals",
@@ -41,8 +40,6 @@ const config = {
         }
       }
     ],
-    "drizzle/enforce-delete-with-where": "error",
-    "drizzle/enforce-update-with-where": "error",
     "prettier/prettier": "warn",
     'simple-import-sort/imports': "error",
     'simple-import-sort/exports': "warn",

apps/docs/package.json

@@ -1,19 +1,38 @@
 {
-  "name": "docs",
+  "name": "@bgd-labs/react-web3-icons-docs",
+  "description": "Gallery for easy export in svg of all assets icons from the package.",
   "version": "0.1.0",
+  "author": "BGD labs",
+  "license": "MIT",
   "private": true,
   "type": "module",
+  "contributors": [
+    {
+      "name": "Karen Kakosyan",
+      "url": "https://github.com/smbdy"
+    },
+    {
+      "name": "Oleksandr Tkach",
+      "url": "https://github.com/Argeare5"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bgd-labs/icons.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bgd-labs/icons/issues"
+  },
+  "homepage": "https://github.com/bgd-labs/icons/blob/main/README.md",
   "scripts": {
     "build": "next build",
-    "generate": "tsx src/scripts/generate.ts",
-    "prebuild": "npm run generate",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
     "@bgd-labs/aave-address-book": "^2.26.1",
-    "@bgd-labs/react-icons": "workspace:^",
+    "@bgd-labs/react-web3-icons": "workspace:^",
     "clsx": "^2.1.0",
     "next": "^14.1.4",
     "next-themes": "^0.3.0",

apps/docs/public/manifest.json

@@ -0,0 +1,17 @@
+{
+  "short_name": "Boilerplate",
+  "name": "App boilerplate",
+  "description": "App boilerplate description",
+  "iconPath": "vercel.svg",
+  "icons": [
+    {
+      "src": "vercel.svg",
+      "sizes": "32x32",
+      "type": "image/svg"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

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

@@ -1,14 +1,20 @@
-import { Icon1inchMono } from "@bgd-labs/react-icons";
 import { IconCard } from "@/components/IconCard";
 
+import assets from "../../../../../icons/icons.json";
+
 const IconsPage = () => {
-  // TODO: map icons here
   return (
-    <main className="p-24">
-      <div className="block flex flex-wrap gap-4">
-        <IconCard name="1INCH" symbol="1inch">
-          <Icon1inchMono />
-        </IconCard>
+    <main className="p-4 md:p-8 xl:p-16">
+      <div className="flex flex-wrap items-center justify-center gap-2 sm:justify-start">
+        {assets
+          .filter((asset) => asset.symbol !== "unknown")
+          .map((asset) => (
+            <IconCard
+              key={asset.symbol}
+              name={asset.name}
+              symbol={asset.symbol}
+            />
+          ))}
       </div>
     </main>
   );

apps/docs/src/app/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 export default function Home() {
   return (
     <main className="flex h-screen flex-col items-center justify-center">
-      <h1 className="mx-auto mb-6 text-left text-center text-7xl font-bold leading-snug">
+      <h1 className="mx-auto mb-6 text-center text-7xl font-bold leading-snug">
         Reliable{" "}
         <span className="mx-3‰ rounded-xl bg-gray-100 px-2 py-1 font-mono font-normal text-gray-600">
           {"<svg/>"}
@@ -12,7 +12,7 @@ export default function Home() {
       </h1>
       <div className="mx-auto mb-20 flex items-center justify-center gap-3">
         <Link
-          href="/icons/mono"
+          href="/icons"
           className="text-md w-56 rounded border border-gray-900 bg-gray-900 py-3 text-center font-semibold text-white"
         >
           Explore icons
@@ -28,9 +28,9 @@ export default function Home() {
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
             className="h-5 w-5 text-gray-400"
           >
             <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />

apps/docs/src/components/CopyIcon.tsx

@@ -0,0 +1,46 @@
+import { cn } from "@/utils/cn";
+
+export const CopyIcon = ({ isCopied }: { isCopied: boolean }) => {
+  const size = 6;
+
+  return (
+    <>
+      <span className={`flex h-${size} w-${size} overflow-hidden`}>
+        <svg
+          className={cn(
+            `h-${size} w-${size} shrink-0 transition-all duration-150 ease-linear`,
+            {
+              ["-translate-x-full text-green-500"]: isCopied,
+            },
+          )}
+          viewBox="0 0 50 50"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15 30.7361H11V11H31.5714V14.3833M39 18.8944V38.0667H19V18.8944H39Z"
+            stroke="currentColor"
+            strokeWidth="3"
+          />
+        </svg>
+        <svg
+          viewBox="0 0 50 50"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={cn(
+            `h-${size} w-${size} shrink-0 translate-x-full transition-all duration-150 ease-linear`,
+            {
+              ["-translate-x-full text-green-500"]: isCopied,
+            },
+          )}
+        >
+          <path
+            d="M14 24.8571L21.1719 33L41 12"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+        </svg>
+      </span>
+    </>
+  );
+};

apps/docs/src/components/CopyToClipboard.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { type ReactNode, useState } from "react";
+import * as React from "react";
+
+import { CopyIcon } from "@/components/CopyIcon";
+import { cn } from "@/utils/cn";
+
+type Props = {
+  copyText: string | number | null | ReactNode;
+  children?: ReactNode;
+  className?: React.ComponentProps<"div">["className"];
+};
+
+export const CopyToClipboard = ({ copyText, className, children }: Props) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = async (event: React.MouseEvent) => {
+    event.preventDefault();
+    await navigator.clipboard.writeText(String(copyText));
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1500);
+  };
+
+  return (
+    <div className={cn("flex flex-wrap items-center", className)}>
+      {children}
+      <button
+        className="p-1 text-gray-400 hover:text-gray-800"
+        type="button"
+        onClick={handleCopyClick}
+      >
+        <CopyIcon isCopied={copied} />
+      </button>
+    </div>
+  );
+};

apps/docs/src/components/DownloadButton.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { type ReactNode, useCallback } from "react";
+import { renderToString } from "react-dom/server";
+
+function downloadBlob(blob: Blob, filename: string) {
+  const objectUrl = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = objectUrl;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  setTimeout(() => URL.revokeObjectURL(objectUrl), 5000);
+}
+
+interface DownloadButtonProps {
+  svgComponent: ReactNode;
+  fileName: string;
+}
+
+export const DownloadButton = ({
+  svgComponent,
+  fileName,
+}: DownloadButtonProps) => {
+  const downloadSVG = useCallback(() => {
+    const blob = new Blob([renderToString(svgComponent)], {
+      type: "image/svg+xml",
+    });
+    downloadBlob(blob, `${fileName}.svg`);
+  }, [fileName, svgComponent]);
+
+  return (
+    <button
+      className="ml-auto p-1 text-gray-400 hover:text-gray-800"
+      type="button"
+      onClick={downloadSVG}
+    >
+      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24">
+        <path
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+          d="M4.75 14.75V16.25C4.75 17.9069 6.09315 19.25 7.75 19.25H16.25C17.9069 19.25 19.25 17.9069 19.25 16.25V14.75"
+        ></path>
+        <path
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+          d="M12 14.25L12 4.75"
+        ></path>
+        <path
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+          d="M8.75 10.75L12 14.25L15.25 10.75"
+        ></path>
+      </svg>
+    </button>
+  );
+};