Skip to content

Commit 2a18a05

Browse files
0xp3gasus0xp3gasus
authored
Next.js template (#1096)
1 parent 502ceca commit 2a18a05

12 files changed

+287
-0
lines changed

‎examples/frameworks/next.js-example/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎examples/frameworks/next.js-example/.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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

‎examples/frameworks/next.js-example/README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
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).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
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.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎examples/frameworks/next.js-example/components/ClientComponent.tsx

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
'use client'
2+
import { Balance } from '@xchainjs/xchain-client'
3+
import { generatePhrase } from '@xchainjs/xchain-crypto'
4+
import { Client as DashClient, defaultDashParams } from '@xchainjs/xchain-dash'
5+
import { assetToString, baseToAsset } from '@xchainjs/xchain-util'
6+
import { useRequest } from 'ahooks'
7+
import { useRef, useState } from 'react'
8+
9+
export function ClientComponent() {
10+
const dashClient = useRef<DashClient>()
11+
const [balance, setBalance] = useState<Balance[]>()
12+
const { run: getBalance, loading } = useRequest(
13+
async () => {
14+
if (!dashClient.current) return undefined
15+
return dashClient.current.getBalance(await dashClient.current.getAddressAsync())
16+
},
17+
{
18+
pollingInterval: 60 * 1000,
19+
manual: true,
20+
onSuccess: setBalance,
21+
},
22+
)
23+
24+
return (
25+
<div className="flex flex-col items-center gap-y-5">
26+
<p className="text-xl">Client component</p>
27+
{!dashClient.current && (
28+
<button
29+
className="text-2xl bg-slate-400 p-2 rounded-xl"
30+
onClick={() => {
31+
dashClient.current = new DashClient({
32+
...defaultDashParams,
33+
phrase: process.env.NEXT_PUBLIC_PHRASE || generatePhrase(),
34+
})
35+
getBalance()
36+
}}
37+
>
38+
Init DASH client with {process.env.NEXT_PUBLIC_PHRASE ? 'your phrase' : 'random phrase'}
39+
</button>
40+
)}
41+
{dashClient.current && (
42+
<div className="flex flex-col items-center">
43+
<p>Your address</p>
44+
<p>{dashClient.current.getAddress()}</p>
45+
</div>
46+
)}
47+
{loading && <p>Loading balance...</p>}
48+
{balance && (
49+
<div className="flex flex-col items-center">
50+
<p>Your balance</p>
51+
{balance.map((balance, index) => {
52+
return (
53+
<div key={index}>
54+
{assetToString(balance.asset)} {baseToAsset(balance.amount).amount().toString()}
55+
</div>
56+
)
57+
})}
58+
</div>
59+
)}
60+
{dashClient.current && (
61+
<button
62+
className="text-2xl bg-slate-400 p-2 rounded-xl"
63+
onClick={() => {
64+
dashClient.current?.purgeClient()
65+
dashClient.current = undefined
66+
setBalance(undefined)
67+
}}
68+
>
69+
Disconnect client
70+
</button>
71+
)}
72+
</div>
73+
)
74+
}

‎examples/frameworks/next.js-example/next.config.mjs

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
webpack: (config) => {
4+
config.resolve.fallback = { fs: false }
5+
return config
6+
}
7+
};
8+
9+
export default nextConfig;

‎examples/frameworks/next.js-example/package.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "next.js-example",
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+
"react": "18.2.0",
13+
"react-dom": "18.2.0",
14+
"next": "14.1.4",
15+
"@xchainjs/xchain-dash": "*",
16+
"@xchainjs/xchain-crypto": "*",
17+
"@xchainjs/xchain-util": "*",
18+
"@xchainjs/xchain-client": "*",
19+
"ahooks": "3.7.10"
20+
},
21+
"devDependencies": {
22+
"typescript": "5.4.3",
23+
"@types/node": "20.11.30",
24+
"@types/react": "18.2.69",
25+
"@types/react-dom": "18.2.22",
26+
"autoprefixer": "10.0.1",
27+
"postcss": "8.4.38",
28+
"tailwindcss": "3.3.0",
29+
"eslint": "8.57.0",
30+
"eslint-config-next": "14.1.4"
31+
}
32+
}

‎examples/frameworks/next.js-example/postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎examples/frameworks/next.js-example/src/app/globals.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎examples/frameworks/next.js-example/src/app/layout.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { Metadata } from 'next'
2+
import { Inter } from 'next/font/google'
3+
4+
import './globals.css'
5+
6+
const inter = Inter({ subsets: ['latin'] })
7+
8+
export const metadata: Metadata = {
9+
title: 'Next.js Template',
10+
description: 'Generated by create next app',
11+
}
12+
13+
export default function RootLayout({
14+
children,
15+
}: Readonly<{
16+
children: React.ReactNode
17+
}>) {
18+
return (
19+
<html lang="en">
20+
<body className={inter.className}>{children}</body>
21+
</html>
22+
)
23+
}

‎examples/frameworks/next.js-example/src/app/page.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { generatePhrase } from '@xchainjs/xchain-crypto'
2+
import { Client, defaultDashParams } from '@xchainjs/xchain-dash'
3+
4+
import { ClientComponent } from '../../components/ClientComponent'
5+
6+
export default async function Home() {
7+
const client = new Client({
8+
...defaultDashParams,
9+
phrase: generatePhrase(),
10+
})
11+
12+
return (
13+
<main className="flex min-h-screen flex-col items-center p-24 gap-y-5">
14+
<h1 className="text-2xl">Next.js template</h1>
15+
<p>Get random DASH address from server component: {await client.getAddressAsync()}</p>
16+
<ClientComponent />
17+
</main>
18+
)
19+
}

‎examples/frameworks/next.js-example/tailwind.config.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
'./components/**/*.{js,ts,jsx,tsx,mdx}',
8+
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
9+
],
10+
theme: {
11+
extend: {
12+
backgroundImage: {
13+
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
14+
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
15+
},
16+
},
17+
},
18+
plugins: [],
19+
}
20+
export default config

‎examples/frameworks/next.js-example/tsconfig.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
}

0 commit comments

Comments
 (0)