chore: init (#1)

.env.local.example

@@ -0,0 +1,3 @@
+# See https://www.coinbase.com/developer-platform/products/base-node
+NEXT_PUBLIC_CDP_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM"
+ENVIRONMENT=localhost

.gitignore

@@ -0,0 +1,36 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+bun.lockb
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env

README.md

@@ -1,2 +1,45 @@
-# an-onchain-app-in-100-components
-An Onchain App in less than 100 components, and ready to be deployed to Vercel.
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/coinbase/onchainkit/main/site/docs/public/logo/v0-27.png">
+    <img alt="OnchainKit logo vibes" src="https://raw.githubusercontent.com/coinbase/onchainkit/main/site/docs/public/logo/v0-27.png" width="auto">
+  </picture>
+</p>
+
+# Onchain App Template
+
+An Onchain App Template build with [OnchainKit](https://onchainkit.xyz), and ready to be deployed to Vercel.
+
+To ensure all components work seamlessly, set the `NEXT_PUBLIC_CDP_API_KEY` in your `.env` file.
+
+You can find the API KEY on the Node page at the [Coinbase Dev Portal](https://portal.cdp.coinbase.com/products/node).
+
+<br />
+
+Play with it live on https://onchain-app-template.vercel.app
+
+Have fun! ⛵️
+
+<br />
+
+## Locally run
+
+```sh
+# Install bun in case you don't have it
+bun curl -fsSL <https://bun.sh/install> | bash
+
+# Install packages
+bun i
+
+# Run Next app
+bun run dev
+```
+
+## Resources
+
+- [OnchainKit documentation](https://onchainkit.xyz)
+
+<br />
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

biome.json

@@ -0,0 +1,68 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentWidth": 2,
+    "indentStyle": "space",
+    "ignore": ["package.json"]
+  },
+  "javascript": {
+    "formatter": {
+      "enabled": true,
+      "lineWidth": 80,
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "double",
+      "indentWidth": 2,
+      "indentStyle": "space",
+      "semicolons": "always",
+      "trailingCommas": "all"
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noConstantMathMinMaxClamp": "error",
+        "noNodejsModules": "error",
+        "noUnusedImports": "error",
+        "noUnusedPrivateClassMembers": "error",
+        "noUnusedVariables": "error",
+        "useArrayLiterals": "error"
+      },
+      "nursery": {
+        "useSortedClasses": "error"
+      },
+      "style": {
+        "noImplicitBoolean": "error",
+        "noNamespace": "error",
+        "noNamespaceImport": "error",
+        "noNegationElse": "error",
+        "noParameterProperties": "error",
+        "noShoutyConstants": "error",
+        "useBlockStatements": "error",
+        "useCollapsedElseIf": "error",
+        "useConsistentArrayType": "error",
+        "useForOf": "error",
+        "useFragmentSyntax": "error",
+        "useShorthandArrayType": "error",
+        "useShorthandAssign": "error",
+        "useSingleCaseStatement": "error"
+      }
+    },
+    "ignore": []
+  },
+  "json": {
+    "formatter": {
+      "trailingCommas": "none"
+    }
+  },
+  "files": {
+    "ignore": [".next"]
+  }
+}

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "onchain-app-template",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "build": "next build",
+    "check": "biome check --write .",
+    "ci:check": "biome ci --formatter-enabled=false --linter-enabled=false",
+    "ci:format": "biome ci --linter-enabled=false --organize-imports-enabled=false",
+    "ci:lint": "biome ci --formatter-enabled=false --organize-imports-enabled=false",
+    "dev": "NODE_OPTIONS='--inspect' next dev",
+    "format": "biome format --write .",
+    "lint": "biome lint --write .",
+    "lint:unsafe": "biome lint --write --unsafe .",
+    "start": "next start",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@coinbase/onchainkit": "^0.27.0",
+    "next": "^14.2.5",
+    "permissionless": "^0.1.26",
+    "react": "^18",
+    "react-dom": "^18",
+    "siwe": "^2.3.2"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.8.0",
+    "@types/node": "^20.11.8",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.7",
+    "@vitest/coverage-v8": "^2.0.2",
+    "@vitest/ui": "^2.0.1",
+    "@wagmi/cli": "latest",
+    "autoprefixer": "^10.4.19",
+    "bufferutil": "^4.0.7",
+    "encoding": "^0.1.13",
+    "lokijs": "^1.5.12",
+    "jsdom": "^24.1.0",
+    "pino-pretty": "^10.2.0",
+    "postcss": "^8.4.38",
+    "supports-color": "^9.4.0",
+    "tailwindcss": "^3.4.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^14.2.0",
+    "typescript": "^5.3.3",
+    "utf-8-validate": "^6.0.3",
+    "vitest": "^2.0.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/app/global.css

@@ -0,0 +1,65 @@
+/* stylelint-disable custom-property-pattern */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Palette */
+  --palette-bg-black: #fff;
+  --palette-bg-white: rgb(21, 26, 38);
+
+  /* Indicates that the element can be rendered using 
+   * the operating system dark color scheme. 
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme */
+  color-scheme: light;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+html .font-robotoMono {
+  font-family: var(--font-roboto-mono);
+}
+
+html .font-inter {
+  font-family: var(--font-inter);
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  background-color: var(--palette-bg-black);
+  color: var(--palette-bg-white);
+  font-family: Inter, sans-serif;
+  overflow-x: hidden;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+a {
+  text-decoration: underline;
+}
+
+svg {
+  display: block;
+  overflow: visible;
+  vertical-align: middle;
+}
+
+ul {
+  padding-inline-start: 0;
+}
+
+/* stylelint-disable-next-line */
+#__next {
+  position: relative;
+  z-index: 0;
+}

src/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from 'next';
+import OnchainProviders from '../components/OnchainProviders';
+import { NEXT_PUBLIC_URL } from '../config';
+
+import './global.css';
+import '@coinbase/onchainkit/styles.css';
+
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1.0,
+};
+
+export const metadata: Metadata = {
+  title: 'Onchain App Template',
+  description: 'LFG',
+  openGraph: {
+    title: 'Onchain App Template',
+    description: 'LFG',
+    images: [`${NEXT_PUBLIC_URL}/vibes/vibes-19.png`],
+  },
+};
+
+export default function RootLayout({
+  children,
+}: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className="flex items-center justify-center">
+        <OnchainProviders>{children}</OnchainProviders>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,22 @@
+'use client';
+import WalletComponents from '../components/WalletComponents';
+
+export default function Page() {
+  return (
+    <div className="flex w-96 flex-col md:w-[600px]">
+      <section className="mb-6 flex w-full flex-col border-sky-800 border-b pb-6">
+        <aside className="mb-6 flex">
+          <h2 className="text-2xl">Onchain App Template</h2>
+        </aside>
+      </section>
+      <section className="mb-6 flex w-full flex-col border-sky-800 border-b pb-6">
+        <aside className="mb-6 flex">
+          <h2 className="text-xl">Identity</h2>
+        </aside>
+        <main className="flex h-10 items-center space-x-4">
+          <WalletComponents />
+        </main>
+      </section>
+    </div>
+  );
+}

src/components/OnchainProviders.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { OnchainKitProvider } from '@coinbase/onchainkit';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import { base } from 'viem/chains';
+import { WagmiProvider } from 'wagmi';
+import { NEXT_PUBLIC_CDP_API_KEY } from '../config';
+import { wagmiConfig } from '../wagmi';
+
+type Props = { children: ReactNode };
+
+const queryClient = new QueryClient();
+
+function OnchainProviders({ children }: Props) {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <OnchainKitProvider apiKey={NEXT_PUBLIC_CDP_API_KEY} chain={base}>
+          {children}
+        </OnchainKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+
+export default OnchainProviders;

src/components/WalletComponents.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import WalletComponents from './WalletComponents';
+
+describe('WalletComponents', () => {
+  it('should renders', () => {
+    render(<WalletComponents />);
+    expect(true).toBeTruthy();
+  });
+});