Skip to content

Commit 5a9b747

Browse files
youssefeayoussefea
committed
add wagmi template
1 parent 5ed4df0 commit 5a9b747

File tree

11 files changed

+250
-0
lines changed

11 files changed

+250
-0
lines changed

‎base-account/base-account-wagmi-template/.gitignore‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎base-account/base-account-wagmi-template/.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
legacy-peer-deps = true

‎base-account/base-account-wagmi-template/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-wagmi`](https://github.com/wevm/wagmi/tree/main/packages/create-wagmi).

‎base-account/base-account-wagmi-template/next.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {}
3+
4+
module.exports = nextConfig

‎base-account/base-account-wagmi-template/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "base-account-wagmi-template",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@tanstack/react-query": "5.45.1",
13+
"next": "14.2.4",
14+
"react": "^18.3.1",
15+
"react-dom": "^18.3.1",
16+
"viem": "latest",
17+
"wagmi": "latest"
18+
},
19+
"devDependencies": {
20+
"@types/node": "^20.12.10",
21+
"@types/react": "^18.3.1",
22+
"@types/react-dom": "^18.3.0",
23+
"@wagmi/cli": "latest",
24+
"bufferutil": "^4.0.8",
25+
"encoding": "^0.1.13",
26+
"lokijs": "^1.5.12",
27+
"pino-pretty": "^10.3.1",
28+
"supports-color": "^9.4.0",
29+
"typescript": "^5.8.3",
30+
"utf-8-validate": "^5.0.2"
31+
}
32+
}

‎base-account/base-account-wagmi-template/src/app/globals.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
:root {
2+
background-color: #181818;
3+
color: rgba(255, 255, 255, 0.87);
4+
color-scheme: light dark;
5+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
6+
font-synthesis: none;
7+
font-weight: 400;
8+
line-height: 1.5;
9+
text-rendering: optimizeLegibility;
10+
11+
-webkit-font-smoothing: antialiased;
12+
-moz-osx-font-smoothing: grayscale;
13+
-webkit-text-size-adjust: 100%;
14+
}
15+
16+
@media (prefers-color-scheme: light) {
17+
:root {
18+
background-color: #f8f8f8;
19+
color: #181818;
20+
}
21+
}

‎base-account/base-account-wagmi-template/src/app/layout.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import './globals.css'
2+
import type { Metadata } from 'next'
3+
import { Inter } from 'next/font/google'
4+
import { headers } from 'next/headers'
5+
import { type ReactNode } from 'react'
6+
import { cookieToInitialState } from 'wagmi'
7+
8+
import { getConfig } from '../wagmi'
9+
import { Providers } from './providers'
10+
11+
const inter = Inter({ subsets: ['latin'] })
12+
13+
export const metadata: Metadata = {
14+
title: 'Create Wagmi',
15+
description: 'Generated by create-wagmi',
16+
}
17+
18+
export default async function RootLayout(props: { children: ReactNode }) {
19+
const initialState = cookieToInitialState(
20+
getConfig(),
21+
(await headers()).get('cookie'),
22+
)
23+
return (
24+
<html lang="en">
25+
<body className={inter.className}>
26+
<Providers initialState={initialState}>{props.children}</Providers>
27+
</body>
28+
</html>
29+
)
30+
}

‎base-account/base-account-wagmi-template/src/app/page.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
'use client'
2+
3+
import { useAccount, useConnect, useDisconnect } from 'wagmi'
4+
5+
function App() {
6+
const account = useAccount()
7+
const { connectors, connect, status, error } = useConnect()
8+
const { disconnect } = useDisconnect()
9+
10+
return (
11+
<>
12+
<div>
13+
<h2>Account</h2>
14+
15+
<div>
16+
status: {account.status}
17+
<br />
18+
addresses: {JSON.stringify(account.addresses)}
19+
<br />
20+
chainId: {account.chainId}
21+
</div>
22+
23+
{account.status === 'connected' && (
24+
<button type="button" onClick={() => disconnect()}>
25+
Disconnect
26+
</button>
27+
)}
28+
</div>
29+
30+
<div>
31+
<h2>Connect</h2>
32+
{connectors.map((connector) => (
33+
<button
34+
key={connector.uid}
35+
onClick={() => connect({ connector })}
36+
type="button"
37+
>
38+
{connector.name}
39+
</button>
40+
))}
41+
<div>{status}</div>
42+
<div>{error?.message}</div>
43+
</div>
44+
</>
45+
)
46+
}
47+
48+
export default App

‎base-account/base-account-wagmi-template/src/app/providers.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use client'
2+
3+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
4+
import { type ReactNode, useState } from 'react'
5+
import { type State, WagmiProvider } from 'wagmi'
6+
7+
import { getConfig } from '@/wagmi'
8+
9+
export function Providers(props: {
10+
children: ReactNode
11+
initialState?: State
12+
}) {
13+
const [config] = useState(() => getConfig())
14+
const [queryClient] = useState(() => new QueryClient())
15+
16+
return (
17+
<WagmiProvider config={config} initialState={props.initialState}>
18+
<QueryClientProvider client={queryClient}>
19+
{props.children}
20+
</QueryClientProvider>
21+
</WagmiProvider>
22+
)
23+
}

‎base-account/base-account-wagmi-template/src/wagmi.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { cookieStorage, createConfig, createStorage, http } from 'wagmi'
2+
import { mainnet, sepolia } from 'wagmi/chains'
3+
import { baseAccount, injected, walletConnect } from 'wagmi/connectors'
4+
5+
export function getConfig() {
6+
return createConfig({
7+
chains: [mainnet, sepolia],
8+
connectors: [
9+
injected(),
10+
baseAccount(),
11+
walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID! }),
12+
],
13+
storage: createStorage({
14+
storage: cookieStorage,
15+
}),
16+
ssr: true,
17+
transports: {
18+
[mainnet.id]: http(),
19+
[sepolia.id]: http(),
20+
},
21+
})
22+
}
23+
24+
declare module 'wagmi' {
25+
interface Register {
26+
config: ReturnType<typeof getConfig>
27+
}
28+
}

0 commit comments

Comments
 (0)