TON-281: SSR support for AppKit

.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, createTonConnectConnector, ApiClientTonApi } from '@ton/appkit';
 import { OmnistonSwapProvider } from '@ton/appkit/swap/omniston';
-import { TonConnectConnector, ApiClientTonApi } from '@ton/appkit';
 
 import { ENV_TON_API_KEY_TESTNET, ENV_TON_API_KEY_MAINNET } from '@/core/configs/env';
 
@@ -34,7 +33,7 @@ export const appKit = new AppKit({
         },
     },
     connectors: [
-        new TonConnectConnector({
+        createTonConnectConnector({
             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,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    distDir: 'dist',
+};
+
+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 dist .turbo 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/layout.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 '@/core/contexts/context';
+
+import '@/core/styles/app.css';
+import '@/core/styles/index.css';
+import '@ton/appkit-react/styles.css';
+
+export const metadata: Metadata = {
+    title: 'NFT Minter - AppKit Demo App',
+    description: 'NFT Minter - AppKit Demo 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,13 @@
+/**
+ * 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 { MinterPage } from '@/core/pages/minter-page';
+
+export default function Home() {
+    return <MinterPage />;
+}

apps/appkit-next/src/core/components/common/button.tsx

@@ -0,0 +1,62 @@
+/**
+ * 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 React from 'react';
+import { Loader2 } from 'lucide-react';
+
+import { cn } from '@/core/lib/utils';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    isLoading?: boolean;
+    children: React.ReactNode;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+    variant = 'primary',
+    size = 'md',
+    isLoading = false,
+    children,
+    disabled,
+    className = '',
+    ...props
+}) => {
+    const baseClasses =
+        'font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center';
+
+    const variantClasses = {
+        primary: 'bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-ring shadow-md hover:shadow-lg',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:ring-ring',
+        danger: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus:ring-destructive',
+        ghost: 'hover:bg-accent hover:text-accent-foreground focus:ring-ring',
+    };
+
+    const sizeClasses = {
+        sm: 'px-3 py-2 text-sm',
+        md: 'px-4 py-2.5 text-base',
+        lg: 'px-6 py-3 text-lg',
+    };
+
+    return (
+        <button
+            className={cn(baseClasses, variantClasses[variant], sizeClasses[size], className)}
+            disabled={disabled || isLoading}
+            {...props}
+        >
+            {isLoading ? (
+                <>
+                    <Loader2 className="animate-spin -ml-1 mr-2 h-4 w-4" />
+                    Loading...
+                </>
+            ) : (
+                children
+            )}
+        </button>
+    );
+};

apps/appkit-next/src/core/components/common/card.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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 { FC, ComponentProps } from 'react';
+
+import { cn } from '@/core/lib/utils';
+
+interface CardProps extends ComponentProps<'div'> {
+    title?: string;
+}
+
+export const Card: FC<CardProps> = ({ children, className, title, ...props }) => {
+    return (
+        <div
+            className={cn('bg-card rounded-xl shadow-md border border-border text-card-foreground', className)}
+            {...props}
+        >
+            {title && (
+                <div className="px-6 py-4 border-b border-border">
+                    <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+                </div>
+            )}
+
+            <div className="p-6">{children}</div>
+        </div>
+    );
+};

apps/appkit-next/src/core/components/common/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { Button } from './button';
+export { Card } from './card';

apps/appkit-next/src/core/components/index.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ */
+
+// Common components
+export { Button, Card } from './common';
+
+// Layout components
+export { Layout, ThemeProvider } from './layout';

apps/appkit-next/src/core/components/layout/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { Layout } from './layout';
+export { ThemeProvider } from './theme-provider';

apps/appkit-next/src/core/components/layout/layout.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 React from 'react';
+import { TonConnectButton } from '@ton/appkit-react';
+import { Layers } from 'lucide-react';
+
+import { ThemeSwitcher } from './theme-switcher';
+
+import { NetworkPicker } from '@/features/network';
+
+interface LayoutProps {
+    children: React.ReactNode;
+    title?: string;
+}
+
+export const Layout: React.FC<LayoutProps> = ({ children, title = 'NFT Minter' }) => {
+    return (
+        <div className="w-full min-h-screen bg-background">
+            <header className="bg-card shadow-sm border-b border-border sticky top-0 z-10">
+                <div className="max-w-2xl mx-auto px-4 py-3 flex items-center">
+                    <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                            <Layers className="w-5 h-5 text-white" />
+                        </div>
+                        <h1 className="text-xl font-bold text-foreground">{title}</h1>
+                    </div>
+
+                    <div className="ml-auto flex items-center gap-2">
+                        <NetworkPicker />
+                        <TonConnectButton />
+                        <ThemeSwitcher />
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-2xl mx-auto px-4 py-4">{children}</main>
+
+            <footer className="text-center py-2 text-xs text-muted-foreground">
+                <p>Powered by AppKit & TonConnect</p>
+            </footer>
+        </div>
+    );
+};