Fix: appkit next js

.gitignore

@@ -35,4 +35,3 @@ release-artifacts
 *.tgz
 
 .claude
-apps/appkit-minter/src/pages/example.tsx

apps/appkit-minter/src/core/configs/app-kit.ts

@@ -6,9 +6,8 @@
  *
  */
 
-import { AppKit, Network } from '@ton/appkit';
+import { AppKit, Network, tonConnect } from '@ton/appkit';
 import { OmnistonSwapProvider } from '@ton/appkit/swap/omniston';
-import { TonConnectConnector } from '@ton/appkit';
 
 import { ENV_TON_API_KEY_MAINNET, ENV_TON_API_KEY_TESTNET } from '@/core/configs/env';
 
@@ -28,7 +27,7 @@ export const appKit = new AppKit({
         },
     },
     connectors: [
-        new TonConnectConnector({
+        tonConnect({
             tonConnectOptions: {
                 manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
             },

apps/appkit-next/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/appkit-next/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.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## 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/app/building-your-application/deploying) for more details.

apps/appkit-next/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

apps/appkit-next/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "appkit-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "clean": "rm -rf .next node_modules"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "catalog:",
+    "@ton/appkit": "workspace:*",
+    "@ton/appkit-react": "workspace:*",
+    "@ton/core": "catalog:",
+    "@ton/crypto": "catalog:",
+    "@ton/walletkit": "workspace:*",
+    "@tonconnect/sdk": "catalog:",
+    "@tonconnect/ui": "catalog:",
+    "next": "16.1.6",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^25.2.3",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "tailwindcss": "^4",
+    "typescript": "^5.9.3"
+  }
+}

apps/appkit-next/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+    plugins: {
+        '@tailwindcss/postcss': {},
+    },
+};
+
+export default config;

apps/appkit-next/src/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

apps/appkit-next/src/app/layout.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
+
+import AppKitContext from '../context';
+import './globals.css';
+
+export const metadata: Metadata = {
+    title: 'Create Next App',
+    description: 'Generated by create next app',
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+    return (
+        <html lang="en">
+            <body className="antialiased">
+                <AppKitContext>{children}</AppKitContext>
+            </body>
+        </html>
+    );
+}

apps/appkit-next/src/app/page.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Balance } from '../components/balance';
+import { Header } from '../components/header';
+
+export default function Home() {
+    return (
+        <div className="flex flex-col gap-4 min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+            <Header />
+            <Balance />
+        </div>
+    );
+}

apps/appkit-next/src/components/balance.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use client';
+
+import { useBalance } from '@ton/appkit-react';
+import type { FC } from 'react';
+
+export const Balance: FC = () => {
+    const { data: balance } = useBalance({
+        query: {
+            refetchInterval: 20000,
+        },
+    });
+
+    return (
+        <div>
+            <p className="inline font-bold">Balance: </p>
+            <p className="inline">{balance ? `${balance} TON` : 'Loading...'}</p>
+        </div>
+    );
+};

apps/appkit-next/src/components/header.tsx

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use client';
+
+import { TonConnectButton } from '@ton/appkit-react';
+import type { FC } from 'react';
+
+export const Header: FC = () => {
+    return (
+        <div className="flex">
+            <TonConnectButton />
+        </div>
+    );
+};

apps/appkit-next/src/config/env.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export const ENV_TON_API_KEY_MAINNET =
+    process.env.NEXT_PUBLIC_TON_API_KEY ?? '25a9b2326a34b39a5fa4b264fb78fb4709e1bd576fc5e6b176639f5b71e94b0d';
+export const ENV_TON_API_KEY_TESTNET =
+    process.env.NEXT_PUBLIC_TON_API_TESTNET_KEY ?? 'd852b54d062f631565761042cccea87fa6337c41eb19b075e6c7fb88898a3992';

apps/appkit-next/src/context.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use client';
+
+import { AppKit, Network, AppKitProvider, tonConnect } from '@ton/appkit-react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+// import { useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+
+import { ENV_TON_API_KEY_MAINNET, ENV_TON_API_KEY_TESTNET } from './config/env';
+
+// Import styles
+import '@ton/appkit-react/styles.css';
+
+const appKit = new AppKit({
+    ssr: true,
+    networks: {
+        [Network.mainnet().chainId]: {
+            apiClient: {
+                url: 'https://toncenter.com',
+                key: ENV_TON_API_KEY_MAINNET,
+            },
+        },
+        [Network.testnet().chainId]: {
+            apiClient: {
+                url: 'https://testnet.toncenter.com',
+                key: ENV_TON_API_KEY_TESTNET,
+            },
+        },
+    },
+    connectors: [
+        tonConnect({
+            tonConnectOptions: {
+                manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
+            },
+        }),
+    ],
+});
+
+const queryClient = new QueryClient();
+
+export default function AppKitContext({ children }: { children: ReactNode }) {
+    return (
+        <AppKitProvider appKit={appKit}>
+            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+        </AppKitProvider>
+    );
+}

apps/appkit-next/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "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": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}