Initial commit

.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+.env
+/node_modules/
+
+# React Router
+/.react-router/
+/build/

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:24-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:24-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:24-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:24-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]

README.md

@@ -0,0 +1,32 @@
+# Welcome to React and Wagmi!
+
+This example code features a modern, production-ready template for building full-stack React applications with React Router, Wagmi and Viem.
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+
+
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server:
+
+```bash
+npm run dev
+```

app/app.css

@@ -0,0 +1,23 @@
+@import "tailwindcss";
+@import "react-toastify/dist/ReactToastify.min.css";
+
+
+table {
+    @apply w-full text-left;
+}
+
+table thead {
+    @apply bg-slate-100;
+}
+
+table tbody {
+    @apply bg-white;
+}
+
+table tbody tr {
+    @apply border-b border-slate-200;
+}
+
+table thead th, table tbody td {
+    @apply px-4 py-2;
+}

app/components/error/ErrorView.tsx

@@ -0,0 +1,7 @@
+export function ErrorView() {
+    return (
+        <div>
+            <p>Ups, an unexpected error occurred.</p>
+        </div>
+    );
+}

app/components/layout/Footer.tsx

@@ -0,0 +1,13 @@
+export function Footer() {
+  return (
+    <footer className="max-w-6xl mx-auto px-4 py-12 border-t border-slate-200 mt-12">
+      <div className="text-center">
+        <p className="text-sm text-slate-500">
+          Copyright &copy; {new Date().getFullYear()} Brainster Next College.
+          All rights reserved.<br />
+          Icons by <a href="https://icons8.com/" target="_blank" rel="noopener noreferrer">Icons8</a>
+        </p>
+      </div>
+    </footer>
+  );
+}

app/components/layout/Header.tsx

@@ -0,0 +1,31 @@
+export function Header() {
+  return (
+    <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
+      <div className="max-w-6xl mx-auto px-4 py-3 h-auto min-h-16 flex items-center justify-between">
+        <div className="flex items-center space-x-3">
+          <div className="bg-blue-600 p-2 rounded-lg shrink-0">
+            <img
+              src="https://img.icons8.com/ios-filled/50/ffffff/flash-on.png"
+              className="w-5 h-5 object-contain"
+              alt="logo"
+            />
+          </div>
+          <div>
+            <h1 className="font-bold text-lg leading-tight">
+              Distributed Systems and Blockchain
+            </h1>
+            <p className="text-xs text-slate-500">Brainster Next College</p>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          <p className="text-sm text-slate-500 hidden md:block">Chain: Next Testnet</p>
+
+          <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-sm font-semibold transition-all shadow-sm">
+            Connect Wallet
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}

app/components/layout/Sidebar.tsx

@@ -0,0 +1,36 @@
+import { Link, useLocation } from "react-router";
+
+const navItems = [{ route: "/", label: "Explorer", icon: "home" }];
+
+export function Sidebar() {
+  const location = useLocation();
+
+  return (
+    <aside className="lg:col-span-3">
+      <nav className="space-y-1">
+        {navItems.map((item) => (
+          <Link
+            key={item.route}
+            to={item.route}
+            className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-colors ${
+              location.pathname === item.route
+                ? "bg-blue-50 text-blue-700 border border-blue-100"
+                : "text-slate-600 hover:bg-slate-100"
+            }`}
+          >
+            <img
+              src={
+                location.pathname === item.route
+                  ? `https://img.icons8.com/ios-filled/50/2563eb/${item.icon}.png`
+                  : `https://img.icons8.com/ios/50/64748b/${item.icon}.png`
+              }
+              className="w-5 h-5 shrink-0 object-contain"
+              alt={item.label}
+            />
+            <span>{item.label}</span>
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+}

app/components/loading/LoadingView.tsx

@@ -0,0 +1,7 @@
+export function LoadingView() {
+    return (
+        <div className="flex justify-center items-center">
+            <p className="sr-only">Loading...</p>
+        </div>
+    );
+}

app/config/wagmi.ts

@@ -0,0 +1,25 @@
+import { createConfig, http } from "wagmi";
+import { metaMask } from "wagmi/connectors";
+
+import { type Chain } from "viem";
+
+export const nextChain = {
+  id: 1337,
+  name: "Next",
+  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://eth.code-camp.org"] }
+  },
+  blockExplorers: {
+    default: { name: "Otterscan", url: "https://etherscan.code-camp.org" }
+  },
+  testnet: true
+} as const satisfies Chain;
+
+export const config = createConfig({
+  chains: [nextChain],
+  transports: {
+    [nextChain.id]: http()
+  },
+  connectors: [metaMask()]
+});

app/lib/fetch.ts

@@ -0,0 +1,7 @@
+export const fetchApi = async <T = any>(url: string): Promise<T> => {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.json();
+};

app/pages/home/HomePage.tsx

@@ -0,0 +1,7 @@
+export function HomePage() {
+  return (
+    <div>
+      <p>Hello Wagmi!</p>
+    </div>
+  );
+}

app/root.tsx

@@ -0,0 +1,103 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration
+} from "react-router";
+
+import { ToastContainer } from "react-toastify";
+
+import { WagmiProvider } from "wagmi";
+import { config } from "./config/wagmi";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+const queryClient = new QueryClient();
+
+import type { Route } from "./+types/root";
+import "./app.css";
+import { Header } from "./components/layout/Header";
+import { Footer } from "./components/layout/Footer";
+import { Sidebar } from "./components/layout/Sidebar";
+
+export const links: Route.LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous"
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+  }
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="bg-slate-50 text-slate-900 font-sans">
+        <div>
+          <Header />
+          <main className="max-w-6xl mx-auto px-4 py-8 min-h-[calc(100vh-15rem)]">
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+              <Sidebar />
+
+              <div className="lg:col-span-9 space-y-6">{children}</div>
+            </div>
+          </main>
+          <Footer />
+        </div>
+        <ToastContainer position="top-center" autoClose={5000} theme="colored" />
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <Outlet />
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

app/routes.ts

@@ -0,0 +1,6 @@
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
+
+export default [
+    index("routes/home.tsx"),
+    // route("connect", "routes/connect.tsx"),
+] satisfies RouteConfig;

app/routes/home.tsx

@@ -0,0 +1,12 @@
+import { HomePage } from "../pages/home/HomePage";
+
+export function meta() {
+  return [
+    { title: "Wagmi Starter" },
+    { name: "description", content: "Welcome to Wagmi!" },
+  ];
+}
+
+export default function Home() {
+  return <HomePage />;
+}

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "wagmi-starter",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "dependencies": {
+    "@metamask/sdk": "^0.33.1",
+    "@react-router/node": "7.12.0",
+    "@react-router/serve": "7.12.0",
+    "@tanstack/react-query": "^5.90.21",
+    "clsx": "^2.1.1",
+    "isbot": "^5.1.31",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-is": "^19.2.4",
+    "react-router": "7.12.0",
+    "react-toastify": "^10.0.6",
+    "recharts": "^3.7.0",
+    "viem": "^2.47.0",
+    "wagmi": "^3.5.0"
+  },
+  "devDependencies": {
+    "@react-router/dev": "7.12.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/node": "^22",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

react-router.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  // Config options...
+  // Server-side render by default, to enable SPA mode set this to `false`
+  ssr: true,
+} satisfies Config;

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "noImplicitAny": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}

vite.config.ts

@@ -0,0 +1,8 @@
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+});