Fixing EMFILE issue by removing react-simple-icons (#10)

app.config.ts

@@ -4,6 +4,10 @@ import tsConfigPaths from "vite-tsconfig-paths";
 export default defineConfig({
   server: { preset: "vercel" },
   vite: {
-    plugins: [tsConfigPaths()],
+    plugins: [
+      tsConfigPaths({
+        projects: ["./tsconfig.json"],
+      }),
+    ],
   },
 });

app/api.ts

@@ -1,6 +1,6 @@
 import {
   createStartAPIHandler,
   defaultAPIFileRouteHandler,
-} from '@tanstack/start/api'
+} from "@tanstack/start/api";
 
-export default createStartAPIHandler(defaultAPIFileRouteHandler)
+export default createStartAPIHandler(defaultAPIFileRouteHandler);

app/client.tsx

@@ -1,8 +1,8 @@
+import { StartClient } from "@tanstack/start";
 /// <reference types="vinxi/types/client" />
-import { hydrateRoot } from 'react-dom/client'
-import { StartClient } from '@tanstack/start'
-import { createRouter } from './router'
+import { hydrateRoot } from "react-dom/client";
+import { createRouter } from "./router";
 
-const router = createRouter()
+const router = createRouter();
 
-hydrateRoot(document, <StartClient router={router} />)
+hydrateRoot(document, <StartClient router={router} />);

app/components/DefaultCatchBoundary.tsx

@@ -17,28 +17,29 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   console.error("DefaultCatchBoundary Error:", error);
 
   return (
-    <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+    <div className="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-4">
       <ErrorComponent error={error} />
-      <div className="flex gap-2 items-center flex-wrap">
+      <div className="flex flex-wrap items-center gap-2">
         <button
+          type="button"
           onClick={() => {
             router.invalidate();
           }}
-          className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+          className="rounded bg-gray-600 px-2 py-1 font-extrabold text-white uppercase dark:bg-gray-700"
         >
           Try Again
         </button>
         {isRoot ? (
           <Link
             to="/"
-            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+            className="rounded bg-gray-600 px-2 py-1 font-extrabold text-white uppercase dark:bg-gray-700"
           >
             Home
           </Link>
         ) : (
           <Link
             to="/"
-            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+            className="rounded bg-gray-600 px-2 py-1 font-extrabold text-white uppercase dark:bg-gray-700"
             onClick={(e) => {
               e.preventDefault();
               window.history.back();

app/components/NotFound.tsx

@@ -1,25 +1,26 @@
-import { Link } from '@tanstack/react-router'
+import { Link } from "@tanstack/react-router";
 
 export function NotFound({ children }: { children?: any }) {
   return (
     <div className="space-y-2 p-2">
       <div className="text-gray-600 dark:text-gray-400">
         {children || <p>The page you are looking for does not exist.</p>}
       </div>
-      <p className="flex items-center gap-2 flex-wrap">
+      <p className="flex flex-wrap items-center gap-2">
         <button
+          type="button"
           onClick={() => window.history.back()}
-          className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+          className="rounded bg-emerald-500 px-2 py-1 font-black text-sm text-white uppercase"
         >
           Go back
         </button>
         <Link
           to="/"
-          className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+          className="rounded bg-cyan-600 px-2 py-1 font-black text-sm text-white uppercase"
         >
           Start Over
         </Link>
       </p>
     </div>
-  )
+  );
 }

app/components/header.tsx

@@ -1,4 +1,4 @@
-import { SiGithub } from "@icons-pack/react-simple-icons";
+import { GithubIcon } from "#/components/icons";
 import { Link } from "@tanstack/react-router";
 
 export function Header() {
@@ -18,7 +18,7 @@ export function Header() {
           className="font-medium text-sm underline-offset-4 hover:underline"
           to="https://github.com/ethui/ethui"
         >
-          <SiGithub className="inline h-6 w-6" />
+          <GithubIcon className="inline h-6 w-6" />
         </Link>
       </nav>
     </header>

app/components/icons.tsx

@@ -0,0 +1,34 @@
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import {
+  siApple,
+  siFirefoxbrowser,
+  siGithub,
+  siGooglechrome,
+  siLinux,
+  type SimpleIcon,
+} from "simple-icons";
+
+function generateIcon(icon: SimpleIcon) {
+  return forwardRef<SVGSVGElement, ComponentPropsWithoutRef<"svg">>(
+    (props, ref) => {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ref={ref}
+          fill="currentColor"
+          {...props}
+        >
+          <title>{icon.title}</title>
+          <path d={icon.path} />
+        </svg>
+      );
+    },
+  );
+}
+
+export const GithubIcon = generateIcon(siGithub);
+export const AppleIcon = generateIcon(siApple);
+export const LinuxIcon = generateIcon(siLinux);
+export const FirefoxIcon = generateIcon(siFirefoxbrowser);
+export const GoogleChromeIcon = generateIcon(siGooglechrome);

app/router.tsx

@@ -1,22 +1,22 @@
-import { createRouter as createTanStackRouter } from '@tanstack/react-router'
-import { routeTree } from './routeTree.gen'
-import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
-import { NotFound } from './components/NotFound'
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { DefaultCatchBoundary } from "./components/DefaultCatchBoundary";
+import { NotFound } from "./components/NotFound";
+import { routeTree } from "./routeTree.gen";
 
 export function createRouter() {
   const router = createTanStackRouter({
     routeTree,
-    defaultPreload: 'intent',
+    defaultPreload: "intent",
     defaultErrorComponent: DefaultCatchBoundary,
     defaultNotFoundComponent: () => <NotFound />,
     scrollRestoration: true,
-  })
+  });
 
-  return router
+  return router;
 }
 
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface Register {
-    router: ReturnType<typeof createRouter>
+    router: ReturnType<typeof createRouter>;
   }
 }

app/routes/__root.tsx

@@ -1,12 +1,12 @@
-import { Header } from "#/components/header";
+import appCss from "@ethui/ui/tailwind.css?url";
+import rainbowkiwCss from "@rainbow-me/rainbowkit/styles.css?url";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 import { Meta, Scripts } from "@tanstack/start";
 import { DefaultCatchBoundary } from "#/components/DefaultCatchBoundary";
 import { NotFound } from "#/components/NotFound";
-import appCss from "@ethui/ui/tailwind.css?url";
-import rainbowkiwCss from "@rainbow-me/rainbowkit/styles.css?url";
+import { Header } from "#/components/header";
 import { seo } from "#/utils/seo";
 
 export const Route = createRootRoute({

app/routes/index.tsx

@@ -1,6 +1,6 @@
+import { AppleIcon, LinuxIcon } from "#/components/icons";
 import { Button } from "@ethui/ui/components/shadcn/button";
-import { SiApple, SiLinux } from "@icons-pack/react-simple-icons";
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { Link, createFileRoute } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 
 export const Route = createFileRoute("/")({
@@ -61,7 +61,7 @@ function Home() {
                 rel="noreferrer"
                 download={data?.osx?.name}
               >
-                <SiApple className="mr-1" />
+                <AppleIcon className="mr-1" />
                 Download
               </a>
             </Button>
@@ -72,7 +72,7 @@ function Home() {
                 rel="noreferrer"
                 download={data?.linux?.name}
               >
-                <SiLinux className="mr-1" />
+                <LinuxIcon className="mr-1" />
                 Download
               </Link>
             </Button>

app/routes/onboarding/extension/index.tsx

@@ -1,9 +1,5 @@
 import { Button } from "@ethui/ui/components/shadcn/button";
-import {
-  SiFirefoxbrowser,
-  SiGithub,
-  SiGooglechrome,
-} from "@icons-pack/react-simple-icons";
+import { FirefoxIcon, GithubIcon, GoogleChromeIcon } from "#/components/icons";
 import {
   ConnectButton,
   RainbowKitProvider,
@@ -75,19 +71,19 @@ const DownloadLinks = () => {
     <div className="flex gap-2">
       <Button asChild>
         <a href={CHROME_EXTENSION} rel="noreferrer" target="_blank">
-          <SiGooglechrome className="text-4xl" />
+          <GoogleChromeIcon className="text-4xl" />
           <span className="pl-2">Chrome</span>
         </a>
       </Button>
       <Button asChild>
         <a href={FIREFOX_EXTENSION} rel="noreferrer" target="_blank">
-          <SiFirefoxbrowser className="text-4xl" />
+          <FirefoxIcon className="text-4xl" />
           <span className="pl-2">Firefox</span>
         </a>
       </Button>
       <Button asChild>
         <a href={GITHUB_LATEST_RELEASE} rel="noreferrer" target="_blank">
-          <SiGithub className="text-4xl" />
+          <GithubIcon className="text-4xl" />
           <span className="pl-2">From Github</span>
         </a>
       </Button>
@@ -99,7 +95,7 @@ const Refresh = () => {
   return (
     <div className="flex gap-2">
       <Button asChild>
-        <Link to="/onboarding/extension?refresh=true">
+        <Link to="/onboarding/extension" search={{ refresh: true }}>
           <span>Refresh now</span>
         </Link>
       </Button>

app/ssr.tsx

@@ -1,13 +1,13 @@
+import { getRouterManifest } from "@tanstack/start/router-manifest";
 /// <reference types="vinxi/types/server" />
 import {
   createStartHandler,
   defaultStreamHandler,
-} from '@tanstack/start/server'
-import { getRouterManifest } from '@tanstack/start/router-manifest'
+} from "@tanstack/start/server";
 
-import { createRouter } from './router'
+import { createRouter } from "./router";
 
 export default createStartHandler({
   createRouter,
   getRouterManifest,
-})(defaultStreamHandler)
+})(defaultStreamHandler);

app/utils/loggingMiddleware.tsx

@@ -1,8 +1,8 @@
-import { createMiddleware } from '@tanstack/start'
+import { createMiddleware } from "@tanstack/start";
 
 export const logMiddleware = createMiddleware()
   .client(async (ctx) => {
-    const clientTime = new Date()
+    const clientTime = new Date();
 
     return ctx.next({
       context: {
@@ -11,27 +11,27 @@ export const logMiddleware = createMiddleware()
       sendContext: {
         clientTime,
       },
-    })
+    });
   })
   .server(async (ctx) => {
-    const serverTime = new Date()
+    const serverTime = new Date();
 
     return ctx.next({
       sendContext: {
         serverTime,
         durationToServer:
           serverTime.getTime() - ctx.context.clientTime.getTime(),
       },
-    })
+    });
   })
   .clientAfter(async (ctx) => {
-    const now = new Date()
+    const now = new Date();
 
-    console.log('Client Req/Res:', {
+    console.log("Client Req/Res:", {
       duration: ctx.context.clientTime.getTime() - now.getTime(),
       durationToServer: ctx.context.durationToServer,
       durationFromServer: now.getTime() - ctx.context.serverTime.getTime(),
-    })
+    });
 
-    return ctx.next()
-  })
+    return ctx.next();
+  });

app/utils/seo.ts

@@ -4,30 +4,30 @@ export const seo = ({
   keywords,
   image,
 }: {
-  title: string
-  description?: string
-  image?: string
-  keywords?: string
+  title: string;
+  description?: string;
+  image?: string;
+  keywords?: string;
 }) => {
   const tags = [
     { title },
-    { name: 'description', content: description },
-    { name: 'keywords', content: keywords },
-    { name: 'twitter:title', content: title },
-    { name: 'twitter:description', content: description },
-    { name: 'twitter:creator', content: '@tannerlinsley' },
-    { name: 'twitter:site', content: '@tannerlinsley' },
-    { name: 'og:type', content: 'website' },
-    { name: 'og:title', content: title },
-    { name: 'og:description', content: description },
+    { name: "description", content: description },
+    { name: "keywords", content: keywords },
+    { name: "twitter:title", content: title },
+    { name: "twitter:description", content: description },
+    { name: "twitter:creator", content: "@tannerlinsley" },
+    { name: "twitter:site", content: "@tannerlinsley" },
+    { name: "og:type", content: "website" },
+    { name: "og:title", content: title },
+    { name: "og:description", content: description },
     ...(image
       ? [
-          { name: 'twitter:image', content: image },
-          { name: 'twitter:card', content: 'summary_large_image' },
-          { name: 'og:image', content: image },
+          { name: "twitter:image", content: image },
+          { name: "twitter:card", content: "summary_large_image" },
+          { name: "og:image", content: image },
         ]
       : []),
-  ]
+  ];
 
-  return tags
-}
+  return tags;
+};