feat(example-next): init

example-next/.env.example

@@ -0,0 +1,14 @@
+# Since the ".env" file is gitignored, you can use the ".env.example" file to
+# build a new ".env" file when you clone the repo. Keep this file up-to-date
+# when you add new variables to `.env`.
+
+# This file will be committed to version control, so make sure not to have any
+# secrets in it. If you are cloning this repo, create a copy of this file named
+# ".env" and populate it with your secrets.
+
+# When adding additional environment variables, the schema in "/src/env.js"
+# should be updated accordingly.
+
+# Example:
+# SERVERVAR="foo"
+# NEXT_PUBLIC_CLIENTVAR="bar"

example-next/.eslintrc.cjs

@@ -0,0 +1,40 @@
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+  },
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'next/core-web-vitals',
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+  ],
+  rules: {
+    '@typescript-eslint/array-type': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
+    '@typescript-eslint/consistent-type-imports': [
+      'warn',
+      {
+        prefer: 'type-imports',
+        fixStyle: 'inline-type-imports',
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+    '@typescript-eslint/require-await': 'off',
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksVoidReturn: {
+          attributes: false,
+        },
+      },
+    ],
+  },
+};
+module.exports = config;

example-next/.gitignore

@@ -0,0 +1,46 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# database
+/prisma/db.sqlite
+/prisma/db.sqlite-journal
+db.sqlite
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# idea files
+.idea

example-next/README.md

@@ -0,0 +1,15 @@
+# Tangled Next.js Example
+
+```
+------
+next.config.js
+------
+{
+  ...
+  webpack: config => {
+    config.externals.push('pino-pretty', 'lokijs', 'encoding')
+    return config
+  }
+}
+
+```

example-next/next.config.js

@@ -0,0 +1,15 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+await import('./src/env.js');
+
+/** @type {import("next").NextConfig} */
+const config = {
+  webpack: (config) => {
+    config.externals.push('pino-pretty', 'lokijs', 'encoding');
+    return config;
+  },
+};
+
+export default config;

example-next/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@tangled3/example-next",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "next lint",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@t3-oss/env-nextjs": "^0.10.1",
+    "@tangled3/react": "workspace:*",
+    "@tangled3/ui": "workspace:*",
+    "geist": "^1.3.0",
+    "next": "^14.2.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zod": "^3.23.3"
+  },
+  "devDependencies": {
+    "@types/eslint": "^8.56.10",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.4",
+    "postcss": "^8.4.39",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.5.3"
+  },
+  "ct3aMetadata": {
+    "initVersion": "7.36.2"
+  },
+  "packageManager": "[email protected]"
+}

example-next/postcss.config.cjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+module.exports = config;

example-next/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import '@/styles/globals.css';
+
+import { GeistSans } from 'geist/font/sans';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Tangled3 Next Example',
+  description: 'Generated by create-t3-app',
+  icons: [{ rel: 'icon', url: '/favicon.ico' }],
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html
+      lang='en'
+      className={`${GeistSans.variable}`}
+    >
+      <body>{children}</body>
+    </html>
+  );
+}

example-next/src/app/page.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { CHAIN_TYPES, useAccounts, useConnect, useDisConnect, useWallets } from '@tangled3/react';
+import dynamic from 'next/dynamic';
+
+const TangledContextProvider = dynamic(() => import('@tangled3/react').then((mod) => mod.TangledContextProvider), {
+  ssr: false,
+});
+
+export default function HomePage() {
+  return (
+    <TangledContextProvider
+      config={{
+        projectName: 'Next.js Example',
+        chainConfigs: {},
+      }}
+    >
+      <main className='flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white'>
+        <Example />
+      </main>
+    </TangledContextProvider>
+  );
+}
+const Example = () => {
+  const accounts = useAccounts();
+  const wallets = useWallets();
+
+  const { connect } = useConnect();
+  const { disconnect } = useDisConnect();
+
+  return (
+    <div className=''>
+      <h1>Tangled Example</h1>
+
+      <h2>ACCOUNTS</h2>
+
+      <div>
+        <span>Connected Accounts:</span>
+
+        <ul>
+          {accounts.map((account) => {
+            return (
+              <li
+                key={`${account.address}-${account.wallet}`}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
+                  gap: '1rem',
+                }}
+              >
+                <img
+                  src={wallets[account.chainType].find((wallet) => wallet.id === account.wallet)?.icon}
+                  alt=''
+                  width={32}
+                  height={32}
+                />
+                <span>{account.address}</span>
+                <span>{account.chainId}</span>
+                <span>{account.chainType}</span>
+                <span>{account.wallet}</span>
+
+                <button
+                  onClick={() =>
+                    disconnect({
+                      chainType: account.chainType,
+                      walletId: account.wallet,
+                    })
+                  }
+                >
+                  Disconnect
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+
+      <br />
+
+      <h2>WALLETS</h2>
+
+      <div className=''>
+        {CHAIN_TYPES.map((chainType) => (
+          <div
+            className=''
+            key={chainType}
+          >
+            <span>{chainType}</span>
+            <ul>
+              {wallets[chainType].map((wallet) => (
+                <li
+                  key={wallet.id}
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '2ch 1fr 1fr 1fr 1fr',
+                    gap: '1rem',
+                  }}
+                >
+                  <span>{wallet.installed ? '✅' : '❌'}</span>
+                  <span>{wallet.name}</span>
+                  <img
+                    src={wallet.icon}
+                    alt=''
+                    width={32}
+                    height={32}
+                  />
+                  {wallet.installed ? (
+                    <button onClick={() => connect({ walletId: wallet.id, chainType })}>connect</button>
+                  ) : wallet.url ? (
+                    <a href={wallet.url}>Install Link</a>
+                  ) : (
+                    <span>Not Installed</span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

example-next/src/env.js

@@ -0,0 +1,40 @@
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+export const env = createEnv({
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    NODE_ENV: z.enum(['development', 'test', 'production']),
+  },
+
+  /**
+   * Specify your client-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars. To expose them to the client, prefix them with
+   * `NEXT_PUBLIC_`.
+   */
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+  },
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+  },
+  /**
+   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+   * useful for Docker builds.
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  /**
+   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+   * `SOME_VAR=''` will throw an error.
+   */
+  emptyStringAsUndefined: true,
+});

example-next/src/styles/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

example-next/tailwind.config.ts

@@ -0,0 +1,14 @@
+import { type Config } from 'tailwindcss';
+import { fontFamily } from 'tailwindcss/defaultTheme';
+
+export default {
+  content: ['./src/**/*.tsx'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['var(--font-geist-sans)', ...fontFamily.sans],
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;