New Next.js example

reown-com · Jul 22, 2024 · 71a2f51 · 71a2f51
1 parent 909c7e1
commit 71a2f51
Show file tree

Hide file tree

Showing 31 changed files with 16,993 additions and 9,671 deletions.
diff --git a/dapps/web3modal/next/.env.example b/dapps/web3modal/next/.env.example
@@ -1 +1 @@
-NEXT_PUBLIC_PROJECT_ID=YOUR_PROJECT_ID
+NEXT_PUBLIC_PROJECT_ID = ""
diff --git a/dapps/web3modal/next/.gitignore b/dapps/web3modal/next/.gitignore
@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

diff --git a/dapps/web3modal/next/README.md b/dapps/web3modal/next/README.md
@@ -1,36 +1,25 @@
-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).
+# WalletConnect AppKit Example App
 
-## Getting Started
+1. Go to [cloud.walletconnect.com](https://cloud.walletconnect.com) and create a new project. Copy the project ID.
 
-First, run the development server:
+2. Rename `.env.example` to `.env` and fill in the project ID that you just created in step 1.
+
+3. Run:
 
 ```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.
+...or `yarn dev`, or `pnpm dev`, or `bun dev`.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+5. See examples of how you can use AppKit in your app.
 
 ## 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.
+To learn more about AppKit:
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- [AppKit Documentation](https://docs.walletconnect.com/appkit/overview) - learn how to use AppKit in your project.
+- [WalletConnect Docs](https://docs.walletconnect.com/) - docs for WalletConnect SDKs: AppKit (to build apps) and WalletKit (to build wallets).
+- [WalletConnect.com](https://walletconnect.com/) - tools to build user experiences that make digital ownership effortless, intuitive, and secure.
diff --git a/dapps/web3modal/next/app/favicon.ico b/dapps/web3modal/next/app/favicon.ico
diff --git a/dapps/web3modal/next/app/globals.css b/dapps/web3modal/next/app/globals.css
@@ -0,0 +1,26 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 69, 84, 176;
+  --background-end-rgb: 27, 33, 69;
+}
+
+body {
+  background-color: #f4f5fd;
+}
+
+@layer utilities {
+  @media (max-width: 600px) {
+    .grid {
+      width: 100%;
+      flex-direction: column;
+    }
+  }
+  ,
+  .text-balance {
+    text-wrap: balance;
+  }
+}
diff --git a/dapps/web3modal/next/app/layout.tsx b/dapps/web3modal/next/app/layout.tsx
@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+import { headers } from "next/headers"; // added
+import { cookieToInitialState } from "wagmi"; // added
+import { config } from "@/config"; // added
+import Web3ModalProvider from "@/context"; // added
+
+export const metadata: Metadata = {
+  title: "AppKit Example App",
+  description: "Powered by WalletConnect"
+};
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const initialState = cookieToInitialState(config, headers().get("cookie")); // added
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Web3ModalProvider initialState={initialState}>{children}</Web3ModalProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/dapps/web3modal/next/app/page.tsx b/dapps/web3modal/next/app/page.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import CustomButton from "@/components/CustomButton";
+import { useAccount } from "wagmi";
+
+export default function Home() {
+  const { isConnected } = useAccount();
+
+  return (
+    <main className="min-h-screen px-8 py-0 pb-12 flex-1 flex flex-col items-center">
+      <header className="w-full py-4 flex justify-between items-center">
+        <div className="flex items-center">
+          <img src="/walletconnect.png" alt="logo" className="w-10 h-10 mr-2" />
+          <div className="hidden sm:inline text-xl font-bold">WalletConnect AppKit example app</div>
+        </div>
+        <div className="flex items-center">
+          <w3m-button />
+        </div>
+      </header>
+      <h2 className="my-8 text-2xl font-bold leading-snug text-center">Examples</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl w-full">
+        <div className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
+          <h3 className="text-sm font-semibold bg-gray-100 p-2">Connect button medium</h3>
+          <div className="text-xs bg-gray-50 p-2 font-mono overflow-x-auto">{'<w3m-button size="md" />'}</div>
+          <div className="flex justify-center items-center p-4">
+            <w3m-button size="md" />
+          </div>
+        </div>
+        <div className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
+          <h3 className="text-sm font-semibold bg-gray-100 p-2">Connect button small</h3>
+          <div className="text-xs bg-gray-50 p-2 font-mono overflow-x-auto">
+            {'<w3m-button size="sm" label="Connect, pretty please!" />'}
+          </div>
+          <div className="flex justify-center items-center p-4">
+            <w3m-button size="sm" label="Connect, pretty please!" />
+          </div>
+        </div>
+
+        {isConnected && (
+          <>
+            {" "}
+            <div className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
+              <h3 className="text-sm font-semibold bg-gray-100 p-2">Account button (only when connected)</h3>
+              <div className="text-xs bg-gray-50 p-2 font-mono overflow-x-auto">
+                {'<w3m-account-button balance={"show"} />'}
+              </div>
+              <div className="flex justify-center items-center p-4">
+                <w3m-account-button balance={"show"} />
+              </div>
+            </div>
+            <div className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
+              <h3 className="text-sm font-semibold bg-gray-100 p-2">Account button with balance hidden</h3>
+              <div className="text-xs bg-gray-50 p-2 font-mono overflow-x-auto">
+                {'<w3m-account-button balance={"hide"} />'}
+              </div>
+              <div className="flex justify-center items-center p-4">
+                <w3m-account-button balance={"hide"} />
+              </div>
+            </div>
+          </>
+        )}
+
+        {!isConnected && (
+          <div className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
+            <h3 className="text-sm font-semibold bg-gray-100 p-2">Connect button (only when not connected)</h3>
+            <div className="text-xs bg-gray-50 p-2 font-mono overflow-x-auto">{"<w3m-connect-button />"}</div>
+            <div className="flex justify-center items-center p-4">
+              <w3m-connect-button />
+            </div>
+          </div>
+        )}
+
+        {isConnected && (
+          <div className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
+            <h3 className="text-sm font-semibold bg-gray-100 p-2">Network selection button</h3>
+            <div className="text-xs bg-gray-50 p-2 font-mono overflow-x-auto">{"<w3m-network-button />"}</div>
+            <div className="flex justify-center items-center p-4">
+              <w3m-network-button />
+            </div>
+          </div>
+        )}
+
+        <div className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
+          <h3 className="text-sm font-semibold bg-gray-100 p-2">Custom button</h3>
+          <div className="text-xs bg-gray-50 p-2 font-mono overflow-x-auto">{"Check: components/CustomButton.tsx"}</div>
+          <div className="flex justify-center items-center p-4">
+            <CustomButton />
+          </div>
+        </div>
+      </div>
+      <h2 className="my-8 text-2xl font-bold leading-snug text-center">Docs</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl w-full">
+        <a
+          href="https://docs.walletconnect.com/appkit/overview"
+          className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"
+        >
+          <div className="flex justify-between items-center bg-gray-100 p-3">
+            <h3 className="text-lg font-semibold">AppKit Docs</h3>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+          <div className="p-4">
+            <p className="text-left">
+              Learn how to use AppKit in your project. Wallet connection, email & social logins, on-ramp, Smart
+              Accounts, one-click auth, and more...
+            </p>
+          </div>
+        </a>
+        <a
+          href="https://docs.walletconnect.com/"
+          className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"
+        >
+          <div className="flex justify-between items-center bg-gray-100 p-3">
+            <h3 className="text-lg font-semibold">WalletConnect Docs</h3>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+          <div className="p-4">
+            <p className="text-left">
+              Check WalletConnect docs. AppKit SDK for when you build apps, WalletKit SDK when you&apos;re building a
+              wallet.)
+            </p>
+          </div>
+        </a>
+      </div>
+    </main>
+  );
+}
diff --git a/dapps/web3modal/next/biome.json b/dapps/web3modal/next/biome.json
diff --git a/dapps/web3modal/next/components/CustomButton.tsx b/dapps/web3modal/next/components/CustomButton.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useWeb3Modal } from "@web3modal/wagmi/react";
+import { useAccount, useDisconnect } from "wagmi";
+
+export default function CustomButton() {
+  const { open } = useWeb3Modal();
+  const { isConnected } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  const baseStyle =
+    "px-4 py-2 font-bold text-white rounded-lg transition-all duration-300 ease-in-out transform hover:-translate-y-1 active:translate-y-0 focus:outline-none";
+
+  if (isConnected)
+    return (
+      <button
+        onClick={() => disconnect()}
+        className={`${baseStyle} bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600`}
+      >
+        <span className="mr-2 text-xl">🔓</span>
+        Disconnect
+      </button>
+    );
+  return (
+    <button
+      onClick={() => open()}
+      className={`${baseStyle} bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600`}
+    >
+      <span className="mr-2 text-xl">👛</span>
+      Connect Wallet
+    </button>
+  );
+}
diff --git a/dapps/web3modal/next/config/index.tsx b/dapps/web3modal/next/config/index.tsx
@@ -0,0 +1,35 @@
+import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
+import { authConnector } from "@web3modal/wagmi";
+
+import { cookieStorage, createStorage } from "wagmi";
+import { mainnet, arbitrum, base, sepolia } from "wagmi/chains";
+
+// Get projectId from https://cloud.walletconnect.com
+export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+
+if (!projectId) throw new Error("Project ID is not defined");
+
+const metadata = {
+  name: "appkit-example-app",
+  description: "AppKit Example",
+  url: "https://web3modal.com", // origin must match your domain & subdomain
+  icons: ["https://avatars.githubusercontent.com/u/37784886"]
+};
+
+// Create wagmiConfig
+const chains = [mainnet, arbitrum, base, sepolia] as const;
+export const config = defaultWagmiConfig({
+  chains,
+  projectId,
+  metadata,
+  auth: {
+    email: true, // default to true
+    socials: ["github", "google", "x", "discord", "apple"],
+    showWallets: true, // default to true
+    walletFeatures: true // default to true
+  },
+  ssr: true,
+  storage: createStorage({
+    storage: cookieStorage
+  })
+});
diff --git a/dapps/web3modal/next/context/index.tsx b/dapps/web3modal/next/context/index.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import { config, projectId } from "@/config";
+
+import { createWeb3Modal } from "@web3modal/wagmi/react";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { State, WagmiProvider } from "wagmi";
+
+// Setup queryClient
+const queryClient = new QueryClient();
+
+if (!projectId) throw new Error("Project ID is not defined");
+
+// Create modal
+createWeb3Modal({
+  wagmiConfig: config,
+  projectId,
+  enableAnalytics: true, // Optional - defaults to your Cloud configuration
+  enableOnramp: true, // Optional - false as default
+  themeMode: "light", // By default - set to user system settings
+  themeVariables: {
+    "--w3m-font-family": "Verdana", // Base font family
+    // "--w3m-color-mix": "#0137b6", // The color that blends in with the default colors
+    // "--w3m-color-mix-strength": 60, // The percentage on how much "--w3m-color-mix" should blend in
+    // "--w3m-accent": "#feea35", // Color used for buttons, icons, labels, etc.
+    // "--w3m-font-size-master": "10px",
+    "--w3m-border-radius-master": "2px",
+    "--w3m-z-index": 1
+  }
+});
+
+export default function Web3ModalProvider({ children, initialState }: { children: ReactNode; initialState?: State }) {
+  return (
+    <WagmiProvider config={config} initialState={initialState}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}