create-starknet: update next.js template

packages/create-starknet/templates/next/gitignore → packages/create-starknet/templates/next/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -23,7 +24,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local

packages/create-starknet/templates/next/README-template.md

@@ -10,15 +10,13 @@ npm run dev
 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 `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+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.
 
@@ -35,4 +33,4 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 
 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 the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

packages/create-starknet/templates/next/next.config.js

@@ -1,6 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-};
+const nextConfig = {};
 
 module.exports = nextConfig;

packages/create-starknet/templates/next/package.json

@@ -9,24 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@next/font": "13.1.6",
-    "@starknet-react/chains": "^0.1.0-next.1",
+    "@starknet-react/chains": "0.1.0-next.1",
     "@starknet-react/core": "2.0.0-next.6",
     "get-starknet-core": "^3.2.0",
-    "next": "^14.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "starknet": "^5.19.5",
-    "tailwindcss": "^3.3.5"
+    "next": "14.0.2",
+    "react": "^18",
+    "react-dom": "^18",
+    "starknet": "^5.19.5"
   },
   "devDependencies": {
-    "@types/node": "18.11.18",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "autoprefixer": "^10.4.16",
-    "eslint": "8.33.0",
-    "eslint-config-next": "13.1.6",
-    "postcss": "^8.4.31",
-    "typescript": "4.9.5"
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.2",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
   }
 }

packages/create-starknet/templates/next/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

packages/create-starknet/templates/next/src/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

packages/create-starknet/templates/next/src/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { StarknetProvider } from '@/components/starknet-provider'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+		<html lang="en">
+			<body className={inter.className}>
+				<StarknetProvider>{children}</StarknetProvider>
+			</body>
+		</html>
+	);
+}

packages/create-starknet/templates/next/src/app/page.tsx

@@ -0,0 +1,51 @@
+import WalletBar from "@/components/WalletBar";
+
+export default function Home() {
+  return (
+    <main className="flex flex-col items-center justify-center min-h-screen gap-12">
+      <WalletBar />
+      <p className="mb-2 text-lg">
+        Get started by editing&nbsp;
+        <code className="p-2 bg-gray-600 rounded">pages/index.tsx</code>
+      </p>
+      <div className="flex flex-row gap-12">
+        <a
+          className="p-4 rounded-md w-48 bg-black border flex flex-col items-center justify-center gap-6 group"
+          href="https://starknet.io/docs"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src="https://pbs.twimg.com/profile_images/1656626805816565763/WyFDMG6u_400x400.png"
+            className="object-contain w-24 h-24"
+            alt="starknet-icon"
+          />
+          <p className="mb-2 text-lg text-center">
+            Starknet Documentation
+            <span className=" group-hover:font-bold transition-all ml-2 group-hover:ml-4">
+              {">"}
+            </span>
+          </p>
+        </a>
+        <a
+          className="p-4 rounded-md w-48 bg-black border flex flex-col items-center justify-center gap-6 group"
+          href="https://starknet-react.com/docs/getting-started"
+          target="_blank"
+          rel="norefferer"
+        >
+          <img
+            src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1150px-React-icon.svg.png"
+            className="object-contain w-24 h-24"
+            alt="react-icon"
+          />
+          <p className="mb-2 text-lg text-center">
+            Starknet React Documentation
+            <span className="group-hover:font-bold transition-all ml-2 group-hover:ml-4">
+              {">"}
+            </span>
+          </p>
+        </a>
+      </div>
+    </main>
+  );
+}