chore: add multichain siwx example (#38)

Co-authored-by: Tomas R <[email protected]>

nextjs/next-siwx-multichain/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_PROJECT_ID=

nextjs/next-siwx-multichain/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

nextjs/next-siwx-multichain/.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env
+.env.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+pnpm-lock.yaml

nextjs/next-siwx-multichain/README.md

@@ -0,0 +1,16 @@
+# Reown AppKit Example using ethers (next.js with App Router)
+
+This is a Next.js project.
+
+## Usage
+
+1. Go to [Reown Cloud](https://cloud.reown.com) and create a new project.
+2. Copy your `Project ID`
+3. Rename `.env.example` to `.env` and paste your `Project ID` as the value for `NEXT_PUBLIC_PROJECT_ID`
+4. Run `pnpm install` to install dependencies
+5. Run `pnpm run dev` to start the development server
+
+## Resources
+
+- [Reown — Docs](https://docs.reown.com)
+- [Next.js — Docs](https://nextjs.org/docs)

nextjs/next-siwx-multichain/next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  webpack: config => {
+    config.externals.push('pino-pretty', 'lokijs', 'encoding')
+    return config
+  }
+};
+
+export default nextConfig;

nextjs/next-siwx-multichain/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "next-siwx-multichain",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@reown/appkit": "1.6.5",
+    "@reown/appkit-adapter-bitcoin": "1.6.5",
+    "@reown/appkit-adapter-wagmi": "1.6.5",
+    "@reown/appkit-siwx": "1.6.5",
+    "@tanstack/react-query": "^5.64.2",
+    "bip322-js": "^2.0.0",
+    "bs58": "^6.0.0",
+    "next": "15.0.3",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "tweetnacl": "^1.0.3",
+    "viem": "^2.22.12",
+    "wagmi": "^2.14.9"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "typescript": "^5"
+  }
+}

nextjs/next-siwx-multichain/src/app/globals.css

@@ -0,0 +1,109 @@
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
+
+section {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: #f9f9f9;
+  padding: 13px;
+  margin: 10px;
+  width: 90%;
+  text-align: left;
+}
+
+.pages {
+  align-items: center;
+  justify-items: center;
+  text-align: center;
+}
+
+button {
+  padding: 10px 15px;
+  background-color: white;
+  color: black;
+  border: 2px solid black;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin: 15px; /* Space between buttons */
+}
+
+button:hover {
+  background-color: black;
+    color: white;
+}
+
+button:active {
+  background-color: #333; /* Dark gray on click */
+    color: white;
+}
+
+h1 {
+  margin: 20px;
+}
+
+pre {
+  white-space: pre-wrap; /* Wrap text */
+  word-wrap: break-word; /* Break long words */
+  word-break: break-all;
+}
+
+
+.link-button {
+  background-color: black;
+  color: white;
+  padding: 5px 10px;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+.link-button:hover {
+  background-color: #333;  /* Darken the background on hover */
+}
+
+.link-button:hover {
+  background-color: white;  /* Change background to white on hover */
+  color: black;  /* Change text color to black on hover */
+}
+
+.advice {
+  text-align: 'center';
+   margin-bottom: 10px;
+   line-height: 25px;
+}

nextjs/next-siwx-multichain/src/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+
+import "./globals.css";
+import ContextProvider from "@/context";
+
+export const metadata: Metadata = {
+  title: "AppKit in Next.js + ethers",
+  description: "AppKit example dApp",
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <ContextProvider>{children}</ContextProvider>
+      </body>
+    </html>
+  );
+}

nextjs/next-siwx-multichain/src/app/not-found.tsx

@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <h1>404 - Page Not Found</h1>;
+}

nextjs/next-siwx-multichain/src/app/page.tsx

@@ -0,0 +1,32 @@
+import { ConnectButton } from "@/components/ConnectButton";
+import { InfoList } from "@/components/InfoList";
+import { ActionButtonList } from "@/components/ActionButtonList";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className={"pages"}>
+      <Image src="/reown.svg" alt="Reown" width={150} height={150} priority />
+      <h1>AppKit Multichain SIWX - App Router Example</h1>
+
+      <ConnectButton />
+      <ActionButtonList />
+      <div className="advice">
+        <p>
+          This projectId only works on localhost. <br />
+          Go to{" "}
+          <a
+            href="https://cloud.reown.com"
+            target="_blank"
+            className="link-button"
+            rel="Reown Cloud"
+          >
+            Reown Cloud
+          </a>{" "}
+          to get your own.
+        </p>
+      </div>
+      <InfoList />
+    </div>
+  );
+}

nextjs/next-siwx-multichain/src/components/ActionButtonList.tsx

@@ -0,0 +1,24 @@
+'use client'
+import { useDisconnect, useAppKit, useAppKitNetwork  } from '@reown/appkit/react'
+import { networks } from '@/config'
+
+export const ActionButtonList = () => {
+    const { disconnect } = useDisconnect();
+    const { open } = useAppKit();
+    const { switchNetwork } = useAppKitNetwork();
+
+    const handleDisconnect = async () => {
+      try {
+        await disconnect();
+      } catch (error) {
+        console.error("Failed to disconnect:", error);
+      }
+    }
+  return (
+    <div>
+        <button onClick={() => open()}>Open</button>
+        <button onClick={handleDisconnect}>Disconnect</button>
+        <button onClick={() => switchNetwork(networks[1]) }>Switch</button>
+    </div>
+  )
+}

nextjs/next-siwx-multichain/src/components/ConnectButton.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+export const ConnectButton = () => {
+  return (
+    <div >
+        <appkit-button />
+    </div>
+  )
+}

nextjs/next-siwx-multichain/src/components/InfoList.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useEffect } from 'react'
+import {
+    useAppKitState,
+    useAppKitTheme,
+    useAppKitEvents,
+    useAppKitAccount,
+    useWalletInfo
+     } from '@reown/appkit/react'
+
+export const InfoList = () => {
+    const kitTheme = useAppKitTheme();
+    const state = useAppKitState();
+    const {address, caipAddress, isConnected, embeddedWalletInfo} = useAppKitAccount();
+    const events = useAppKitEvents()
+    const walletInfo = useWalletInfo()
+
+    useEffect(() => {
+        console.log("Events: ", events);
+    }, [events]);
+
+  return (
+    <>
+        <section>
+            <h2>useAppKit</h2>
+            <pre>
+                Address: {address}<br />
+                caip Address: {caipAddress}<br />
+                Connected: {isConnected.toString()}<br />
+            </pre>
+        </section>
+
+        <section>
+            <h2>Theme</h2>
+            <pre>
+                Theme: {kitTheme.themeMode}<br />
+            </pre>
+        </section>
+
+        <section>
+            <h2>State</h2>
+            <pre>
+                activeChain: {state.activeChain}<br />
+                loading: {state.loading.toString()}<br />
+                open: {state.open.toString()}<br />
+            </pre>
+        </section>
+
+        <section>
+            <h2>WalletInfo</h2>
+            <pre>
+                Name: {walletInfo.walletInfo?.name?.toString()}<br />
+                Account Type: {embeddedWalletInfo?.accountType}<br />
+                {embeddedWalletInfo?.user?.email && (`Email: ${embeddedWalletInfo?.user?.email}\n`)}
+                {embeddedWalletInfo?.user?.username && (`Username: ${embeddedWalletInfo?.user?.username}\n`)}
+            </pre>
+        </section>
+    </>
+  )
+}