├── .eslintrc.json ├── .gitignore ├── README.md ├── next.config.mjs ├── package.json ├── pnpm-lock.yaml ├── postcss.config.mjs ├── public ├── abs-green.svg ├── abs.svg └── abstract.svg ├── src ├── app │ ├── favicon.ico │ ├── fonts │ │ ├── Avenue Mono.ttf │ │ ├── GeistMonoVF.woff │ │ ├── GeistVF.woff │ │ ├── Roobert-Bold.ttf │ │ ├── Roobert-Heavy.ttf │ │ ├── Roobert-Light.ttf │ │ ├── Roobert-Medium.ttf │ │ ├── Roobert-Regular.ttf │ │ └── Roobert-SemiBold.ttf │ ├── globals.css │ ├── layout.tsx │ └── page.tsx └── components │ └── NextAbstractWalletProvider.tsx ├── tailwind.config.ts └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 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 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | # npmrc 39 | .npmrc -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This repository is now archived. 2 | 3 | Please see the [agw-nextjs example repository](https://github.com/Abstract-Foundation/examples/tree/main/agw-nextjs) for the latest template application. 4 | -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-abstract-app-template", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@abstract-foundation/agw-client": "latest", 13 | "@abstract-foundation/agw-react": "latest", 14 | "@privy-io/cross-app-connect": "^0.1.5", 15 | "next": "14.2.13", 16 | "react": "18.2.0", 17 | "react-dom": "18.2.0", 18 | "wagmi": "2.12.25", 19 | "viem": "2.21.26" 20 | }, 21 | "devDependencies": { 22 | "@types/node": "20.11.30", 23 | "@types/react": "18.2.67", 24 | "@types/react-dom": "18.2.22", 25 | "eslint": "9.17.0", 26 | "eslint-config-next": "15.1.3", 27 | "postcss": "8.4.35", 28 | "tailwindcss": "3.4.1", 29 | "typescript": "5.4.2" 30 | } 31 | } -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /public/abs-green.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/abs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/abstract.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abstract-Foundation/create-abstract-app-template/1c63aecac6ee77f4f2de79818b7af78ed079640b/src/app/favicon.ico -------------------------------------------------------------------------------- /src/app/fonts/Avenue Mono.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abstract-Foundation/create-abstract-app-template/1c63aecac6ee77f4f2de79818b7af78ed079640b/src/app/fonts/Avenue Mono.ttf -------------------------------------------------------------------------------- /src/app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abstract-Foundation/create-abstract-app-template/1c63aecac6ee77f4f2de79818b7af78ed079640b/src/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /src/app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abstract-Foundation/create-abstract-app-template/1c63aecac6ee77f4f2de79818b7af78ed079640b/src/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /src/app/fonts/Roobert-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abstract-Foundation/create-abstract-app-template/1c63aecac6ee77f4f2de79818b7af78ed079640b/src/app/fonts/Roobert-Bold.ttf -------------------------------------------------------------------------------- /src/app/fonts/Roobert-Heavy.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abstract-Foundation/create-abstract-app-template/1c63aecac6ee77f4f2de79818b7af78ed079640b/src/app/fonts/Roobert-Heavy.ttf -------------------------------------------------------------------------------- /src/app/fonts/Roobert-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abstract-Foundation/create-abstract-app-template/1c63aecac6ee77f4f2de79818b7af78ed079640b/src/app/fonts/Roobert-Light.ttf -------------------------------------------------------------------------------- /src/app/fonts/Roobert-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abstract-Foundation/create-abstract-app-template/1c63aecac6ee77f4f2de79818b7af78ed079640b/src/app/fonts/Roobert-Medium.ttf -------------------------------------------------------------------------------- /src/app/fonts/Roobert-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abstract-Foundation/create-abstract-app-template/1c63aecac6ee77f4f2de79818b7af78ed079640b/src/app/fonts/Roobert-Regular.ttf -------------------------------------------------------------------------------- /src/app/fonts/Roobert-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abstract-Foundation/create-abstract-app-template/1c63aecac6ee77f4f2de79818b7af78ed079640b/src/app/fonts/Roobert-SemiBold.ttf -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --background: #0a0a0a; 7 | --foreground: #ededed; 8 | } 9 | 10 | body { 11 | color: var(--foreground); 12 | background: var(--background); 13 | font-family: Arial, Helvetica, sans-serif; 14 | } 15 | 16 | @layer utilities { 17 | .text-balance { 18 | text-wrap: balance; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import localFont from "next/font/local"; 3 | import "./globals.css"; 4 | import NextAbstractWalletProvider from "../components/NextAbstractWalletProvider"; 5 | 6 | // Default Fonts from Next.js 7 | const geistSans = localFont({ 8 | src: "./fonts/GeistVF.woff", 9 | variable: "--font-geist-sans", 10 | weight: "100 900", 11 | }); 12 | const geistMono = localFont({ 13 | src: "./fonts/GeistMonoVF.woff", 14 | variable: "--font-geist-mono", 15 | weight: "100 900", 16 | }); 17 | 18 | // Abstract Fonts 19 | const avenueMono = localFont({ 20 | src: "./fonts/Avenue Mono.ttf", 21 | variable: "--font-avenue-mono", 22 | weight: "100, 900", 23 | }); 24 | const roobert = localFont({ 25 | src: [ 26 | { path: "./fonts/Roobert-Light.ttf", weight: "300", style: "normal" }, 27 | { path: "./fonts/Roobert-Regular.ttf", weight: "400", style: "normal" }, 28 | { path: "./fonts/Roobert-Medium.ttf", weight: "500", style: "normal" }, 29 | { path: "./fonts/Roobert-SemiBold.ttf", weight: "600", style: "normal" }, 30 | { path: "./fonts/Roobert-Bold.ttf", weight: "700", style: "normal" }, 31 | { path: "./fonts/Roobert-Heavy.ttf", weight: "800", style: "normal" }, 32 | ], 33 | variable: "--font-roobert", 34 | }); 35 | 36 | export const metadata: Metadata = { 37 | title: "Create Abstract App", 38 | description: "Generated by create abstract app", 39 | }; 40 | 41 | export default function RootLayout({ 42 | children, 43 | }: Readonly<{ 44 | children: React.ReactNode; 45 | }>) { 46 | return ( 47 | 48 | 49 | 52 | {children} 53 | 54 | 55 | 56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Image from "next/image"; 4 | import { useLoginWithAbstract, useWriteContractSponsored } from "@abstract-foundation/agw-react"; 5 | import { useAccount, useSendTransaction, useWaitForTransactionReceipt } from "wagmi"; 6 | import { getGeneralPaymasterInput } from "viem/zksync"; 7 | import { parseAbi } from "viem"; 8 | 9 | export default function Home() { 10 | const { login, logout } = useLoginWithAbstract(); 11 | const { address, status } = useAccount(); 12 | const { sendTransaction, isPending } = useSendTransaction(); 13 | const { writeContractSponsored, data: transactionHash } = useWriteContractSponsored(); 14 | const { data: transactionReceipt } = useWaitForTransactionReceipt({ 15 | hash: transactionHash, 16 | }); 17 | 18 | return ( 19 |
20 | {/* Grids and aurora gradients */} 21 |
22 |
23 |
24 | 25 | {/* Main content */} 26 |
27 |
28 | Abstract logo 36 |

37 | Get started by editing{" "} 38 | 39 | src/app/page.tsx 40 | 41 | . 42 |

43 | 44 |
45 | {status === "connected" ? ( 46 |
47 |
48 |
49 |

50 | Connected to Abstract Global Wallet 51 |

52 |

53 | {address} 54 |

55 |

56 | 61 | View on Explorer 62 | 63 |

64 |
65 |
66 | 86 | 131 |
132 | {!!transactionReceipt && ( 133 | 138 |

139 | Transaction Status: {transactionReceipt?.status} 140 |

141 |

142 | {transactionReceipt?.transactionHash?.slice(0, 8)}... 143 | {transactionReceipt?.transactionHash?.slice(-6)} 144 |

145 | 146 | )} 147 |
148 |
149 | ) : status === "reconnecting" || status === "connecting" ? ( 150 |
151 |
152 | Loading 153 |
154 |
155 | ) : ( 156 | 170 | )} 171 |
172 |
173 |
174 | 175 | {/* Updated cards section */} 176 |
177 | 183 | 188 | 189 | 190 |

191 | Documentation 192 |

193 |

Explore our developer docs.

194 | 195 | 196 | 202 | 203 | 208 | 209 |

210 | GitHub Examples 211 |

212 |

213 | View our example repos on GitHub. 214 |

215 | 216 | 217 | 223 | 224 | 225 | 226 |

227 | YouTube Channel 228 |

229 |

230 | Watch our video tutorials on YouTube. 231 |

232 | 233 |
234 |
235 | ); 236 | } -------------------------------------------------------------------------------- /src/components/NextAbstractWalletProvider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { AbstractWalletProvider } from "@abstract-foundation/agw-react"; 4 | import { abstractTestnet } from "viem/chains"; 5 | 6 | export default function AbstractWalletWrapper({ 7 | children, 8 | }: { 9 | children: React.ReactNode; 10 | }) { 11 | return ( 12 | 13 | {children} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | colors: { 12 | background: "var(--background)", 13 | foreground: "var(--foreground)", 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | }; 19 | export default config; 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | --------------------------------------------------------------------------------