From 2a18a056ec09f0dfe1b2bb42ce910ded26e2e863 Mon Sep 17 00:00:00 2001 From: Pegasus <83475418+0xp3gasus@users.noreply.github.com> Date: Tue, 26 Mar 2024 09:12:16 +0100 Subject: [PATCH] Next.js template (#1096) --- .../frameworks/next.js-example/.eslintrc.json | 3 + .../frameworks/next.js-example/.gitignore | 36 +++++++++ examples/frameworks/next.js-example/README.md | 36 +++++++++ .../components/ClientComponent.tsx | 74 +++++++++++++++++++ .../next.js-example/next.config.mjs | 9 +++ .../frameworks/next.js-example/package.json | 32 ++++++++ .../next.js-example/postcss.config.js | 6 ++ .../next.js-example/src/app/globals.css | 3 + .../next.js-example/src/app/layout.tsx | 23 ++++++ .../next.js-example/src/app/page.tsx | 19 +++++ .../next.js-example/tailwind.config.ts | 20 +++++ .../frameworks/next.js-example/tsconfig.json | 26 +++++++ 12 files changed, 287 insertions(+) create mode 100644 examples/frameworks/next.js-example/.eslintrc.json create mode 100644 examples/frameworks/next.js-example/.gitignore create mode 100644 examples/frameworks/next.js-example/README.md create mode 100644 examples/frameworks/next.js-example/components/ClientComponent.tsx create mode 100644 examples/frameworks/next.js-example/next.config.mjs create mode 100644 examples/frameworks/next.js-example/package.json create mode 100644 examples/frameworks/next.js-example/postcss.config.js create mode 100644 examples/frameworks/next.js-example/src/app/globals.css create mode 100644 examples/frameworks/next.js-example/src/app/layout.tsx create mode 100644 examples/frameworks/next.js-example/src/app/page.tsx create mode 100644 examples/frameworks/next.js-example/tailwind.config.ts create mode 100644 examples/frameworks/next.js-example/tsconfig.json diff --git a/examples/frameworks/next.js-example/.eslintrc.json b/examples/frameworks/next.js-example/.eslintrc.json new file mode 100644 index 000000000..bffb357a7 --- /dev/null +++ b/examples/frameworks/next.js-example/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/examples/frameworks/next.js-example/.gitignore b/examples/frameworks/next.js-example/.gitignore new file mode 100644 index 000000000..fd3dbb571 --- /dev/null +++ b/examples/frameworks/next.js-example/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/frameworks/next.js-example/README.md b/examples/frameworks/next.js-example/README.md new file mode 100644 index 000000000..c4033664f --- /dev/null +++ b/examples/frameworks/next.js-example/README.md @@ -0,0 +1,36 @@ +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). + +## Getting Started + +First, run the development server: + +```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. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## 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. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/examples/frameworks/next.js-example/components/ClientComponent.tsx b/examples/frameworks/next.js-example/components/ClientComponent.tsx new file mode 100644 index 000000000..d9c7f836f --- /dev/null +++ b/examples/frameworks/next.js-example/components/ClientComponent.tsx @@ -0,0 +1,74 @@ +'use client' +import { Balance } from '@xchainjs/xchain-client' +import { generatePhrase } from '@xchainjs/xchain-crypto' +import { Client as DashClient, defaultDashParams } from '@xchainjs/xchain-dash' +import { assetToString, baseToAsset } from '@xchainjs/xchain-util' +import { useRequest } from 'ahooks' +import { useRef, useState } from 'react' + +export function ClientComponent() { + const dashClient = useRef() + const [balance, setBalance] = useState() + const { run: getBalance, loading } = useRequest( + async () => { + if (!dashClient.current) return undefined + return dashClient.current.getBalance(await dashClient.current.getAddressAsync()) + }, + { + pollingInterval: 60 * 1000, + manual: true, + onSuccess: setBalance, + }, + ) + + return ( +
+

Client component

+ {!dashClient.current && ( + + )} + {dashClient.current && ( +
+

Your address

+

{dashClient.current.getAddress()}

+
+ )} + {loading &&

Loading balance...

} + {balance && ( +
+

Your balance

+ {balance.map((balance, index) => { + return ( +
+ {assetToString(balance.asset)} {baseToAsset(balance.amount).amount().toString()} +
+ ) + })} +
+ )} + {dashClient.current && ( + + )} +
+ ) +} diff --git a/examples/frameworks/next.js-example/next.config.mjs b/examples/frameworks/next.js-example/next.config.mjs new file mode 100644 index 000000000..8deadc193 --- /dev/null +++ b/examples/frameworks/next.js-example/next.config.mjs @@ -0,0 +1,9 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + webpack: (config) => { + config.resolve.fallback = { fs: false } + return config + } +}; + +export default nextConfig; diff --git a/examples/frameworks/next.js-example/package.json b/examples/frameworks/next.js-example/package.json new file mode 100644 index 000000000..e5f713608 --- /dev/null +++ b/examples/frameworks/next.js-example/package.json @@ -0,0 +1,32 @@ +{ + "name": "next.js-example", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "react": "18.2.0", + "react-dom": "18.2.0", + "next": "14.1.4", + "@xchainjs/xchain-dash": "*", + "@xchainjs/xchain-crypto": "*", + "@xchainjs/xchain-util": "*", + "@xchainjs/xchain-client": "*", + "ahooks": "3.7.10" + }, + "devDependencies": { + "typescript": "5.4.3", + "@types/node": "20.11.30", + "@types/react": "18.2.69", + "@types/react-dom": "18.2.22", + "autoprefixer": "10.0.1", + "postcss": "8.4.38", + "tailwindcss": "3.3.0", + "eslint": "8.57.0", + "eslint-config-next": "14.1.4" + } +} \ No newline at end of file diff --git a/examples/frameworks/next.js-example/postcss.config.js b/examples/frameworks/next.js-example/postcss.config.js new file mode 100644 index 000000000..12a703d90 --- /dev/null +++ b/examples/frameworks/next.js-example/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/examples/frameworks/next.js-example/src/app/globals.css b/examples/frameworks/next.js-example/src/app/globals.css new file mode 100644 index 000000000..bd6213e1d --- /dev/null +++ b/examples/frameworks/next.js-example/src/app/globals.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/examples/frameworks/next.js-example/src/app/layout.tsx b/examples/frameworks/next.js-example/src/app/layout.tsx new file mode 100644 index 000000000..a31e541be --- /dev/null +++ b/examples/frameworks/next.js-example/src/app/layout.tsx @@ -0,0 +1,23 @@ +import type { Metadata } from 'next' +import { Inter } from 'next/font/google' + +import './globals.css' + +const inter = Inter({ subsets: ['latin'] }) + +export const metadata: Metadata = { + title: 'Next.js Template', + description: 'Generated by create next app', +} + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + {children} + + ) +} diff --git a/examples/frameworks/next.js-example/src/app/page.tsx b/examples/frameworks/next.js-example/src/app/page.tsx new file mode 100644 index 000000000..18afc8767 --- /dev/null +++ b/examples/frameworks/next.js-example/src/app/page.tsx @@ -0,0 +1,19 @@ +import { generatePhrase } from '@xchainjs/xchain-crypto' +import { Client, defaultDashParams } from '@xchainjs/xchain-dash' + +import { ClientComponent } from '../../components/ClientComponent' + +export default async function Home() { + const client = new Client({ + ...defaultDashParams, + phrase: generatePhrase(), + }) + + return ( +
+

Next.js template

+

Get random DASH address from server component: {await client.getAddressAsync()}

+ +
+ ) +} diff --git a/examples/frameworks/next.js-example/tailwind.config.ts b/examples/frameworks/next.js-example/tailwind.config.ts new file mode 100644 index 000000000..b5ed6ab8d --- /dev/null +++ b/examples/frameworks/next.js-example/tailwind.config.ts @@ -0,0 +1,20 @@ +import type { Config } from 'tailwindcss' + +const config: Config = { + content: [ + './src/pages/**/*.{js,ts,jsx,tsx,mdx}', + './src/components/**/*.{js,ts,jsx,tsx,mdx}', + './components/**/*.{js,ts,jsx,tsx,mdx}', + './src/app/**/*.{js,ts,jsx,tsx,mdx}', + ], + theme: { + extend: { + backgroundImage: { + 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', + 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + }, + }, + }, + plugins: [], +} +export default config diff --git a/examples/frameworks/next.js-example/tsconfig.json b/examples/frameworks/next.js-example/tsconfig.json new file mode 100644 index 000000000..7b2858930 --- /dev/null +++ b/examples/frameworks/next.js-example/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +}