fix: Fix nextjs issues (#9)

* Feat/wenty (#7)

* feat: Update demo

* docs: Update docs

* fix: Fix nextjs issue (#8)

* feat: Update demo

* docs: Update docs

* fix: Fix nextjs styles issue

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.next
 
 # Editor directories and files
 .vscode/*

examples/nextjs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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

examples/nextjs/README.md

@@ -0,0 +1,40 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

examples/nextjs/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "example-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "^13",
+    "@totejs/walletkit": "workspace:*",
+    "viem": "^1.16.6",
+    "wagmi": "^1.4.4"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18"
+  }
+}

examples/nextjs/pages/_app.tsx

@@ -0,0 +1,43 @@
+import '@totejs/walletkit/styles.css';
+import '@/styles/globals.css';
+import type { AppProps } from 'next/app';
+import { chains } from './chains';
+import { WagmiConfig, createConfig } from 'wagmi';
+import {
+  SwitchNetworkModal,
+  WalletKitButton,
+  WalletKitOptions,
+  WalletKitProvider,
+  getDefaultConfig,
+} from '@totejs/walletkit';
+import { trustWallet, metaMask, walletConnect } from '@totejs/walletkit/wallets';
+
+const config = createConfig(
+  getDefaultConfig({
+    autoConnect: true,
+    appName: 'WalletKit',
+
+    // WalletConnect 2.0 requires a projectId which you can create quickly
+    // and easily for free over at WalletConnect Cloud https://cloud.walletconnect.com/sign-in
+    walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
+
+    chains,
+    connectors: [trustWallet(), metaMask(), walletConnect()],
+  }),
+);
+
+const options: WalletKitOptions = {
+  initialChainId: 56,
+};
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <WagmiConfig config={config}>
+      <WalletKitProvider options={options} mode="auto" debugMode>
+        <WalletKitButton />
+        <Component {...pageProps} />
+        <SwitchNetworkModal />
+      </WalletKitProvider>
+    </WagmiConfig>
+  );
+}

examples/nextjs/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

examples/nextjs/pages/chains.ts

@@ -0,0 +1,50 @@
+import { bsc, mainnet } from 'wagmi/chains';
+
+export const chains = [
+  {
+    id: 5600,
+    name: 'Greenfield Mekong Testnet',
+    network: 'Greenfield Mekong Testnet',
+    nativeCurrency: {
+      name: 'tBNB',
+      symbol: 'tBNB',
+      decimals: 18,
+    },
+    rpcUrls: {
+      default: {
+        http: [`https://gnfd-testnet-fullnode-tendermint-us.bnbchain.org`],
+      },
+      public: {
+        http: [`https://gnfd-testnet-fullnode-tendermint-us.bnbchain.org`],
+      },
+    },
+    blockExplorers: {
+      etherscan: { name: 'Greenfield Mekong Testnet Scan', url: `https://greenfieldscan.com` },
+      default: { name: 'Greenfield Mekong Testnet Scan', url: `https://greenfieldscan.com` },
+    },
+  },
+  {
+    id: 97,
+    name: 'BNB Smart Chain Testnet',
+    network: 'BNB Smart Chain Testnet',
+    nativeCurrency: {
+      name: 'tBNB',
+      symbol: 'tBNB',
+      decimals: 18,
+    },
+    rpcUrls: {
+      default: {
+        http: [`https://data-seed-prebsc-1-s1.binance.org:8545`],
+      },
+      public: {
+        http: [`https://data-seed-prebsc-1-s1.binance.org:8545`],
+      },
+    },
+    blockExplorers: {
+      etherscan: { name: 'BNB Smart Chain Testnet Scan', url: `https://testnet.bscscan.com` },
+      default: { name: 'BNB Smart Chain Testnet Scan', url: `https://testnet.bscscan.com` },
+    },
+  },
+  bsc,
+  mainnet,
+];

examples/nextjs/pages/index.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return null;
+}

examples/nextjs/styles/globals.css

@@ -0,0 +1,18 @@
+:root {
+  --font-mono: Inter, -apple-system, system-ui, ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  font-family: var(--font-mono);
+}

examples/nextjs/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/vite/src/App.tsx

@@ -1,3 +1,4 @@
+import '@totejs/walletkit/styles.css';
 import { WagmiConfig, createConfig } from 'wagmi';
 import { chains } from './chains';
 import {

examples/vite/src/main.tsx

@@ -1,3 +1,4 @@
+import '@totejs/walletkit/styles.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';

package.json

@@ -4,13 +4,13 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "pnpm --recursive --parallel --filter @totejs/walletkit --filter example-vite dev",
+    "dev": "pnpm --recursive --parallel --filter @totejs/walletkit --filter example-nextjs dev",
     "dev:lib": "pnpm --filter @totejs/walletkit dev",
     "dev:example": "pnpm --filter example-vite dev"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/rainbow-me/rainbowkit.git"
+    "url": "git+https://github.com/node-real/walletkit.git"
   },
   "license": "MIT",
   "devDependencies": {

packages/walletkit/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@totejs/walletkit",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "files": [
     "dist",
-    "wallets"
+    "wallets",
+    "styles.css"
   ],
   "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "dev": "rollup --config rollup.config.js -w",
-    "build": "rollup --config rollup.config.js"
+    "dev": "vite build --watch",
+    "build": "vite build"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -28,12 +29,21 @@
     "@types/react-dom": "^18.2.7",
     "@vanilla-extract/css": "^1.13.0",
     "@vanilla-extract/rollup-plugin": "^1.3.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    "@vitejs/plugin-react": "^4.1.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup-plugin-embed-css": "^1.0.26",
+    "rollup-plugin-import-css": "^3.3.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.0.2",
     "viem": "^1.16.6",
+    "vite": "^4.5.0",
+    "vite-plugin-dts": "^3.6.3",
     "wagmi": "^1.4.4"
   },
   "dependencies": {

packages/walletkit/src/components/ThemeProvider/index.tsx

@@ -73,7 +73,7 @@ export function ThemeProvider(props: ThemeProviderProps) {
       styleElement = document.createElement('style');
 
       styleElement.id = id;
-      document.documentElement.appendChild(styleElement);
+      document.head.appendChild(styleElement);
     }
 
     styleElement.textContent = styleContent;