add ton api example (#76)

examples/swaps-api-nextjs-ton/.eslintrc.js

@@ -0,0 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["eslint-config-examples/index.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

examples/swaps-api-nextjs-ton/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

examples/swaps-api-nextjs-ton/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "components",
+    "utils": "lib"
+  }
+}

examples/swaps-api-nextjs-ton/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/swaps-api-nextjs-ton/next.config.mjs

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  async headers() {
+    return [
+      {
+        source: "/tonconnect-manifest.json",
+        headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
+      },
+    ];
+  },
+};
+
+export default nextConfig;

examples/swaps-api-nextjs-ton/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "swaps-api-nextjs-ton",
+  "demo": "https://swaps-api-nextjs-ton.vercel.app/",
+  "keywords": [
+    "api",
+    "swaps",
+    "nextjs",
+    "thirdweb"
+  ],
+  "license": "MIT",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "lint": "eslint src",
+    "build": "next build",
+    "start": "next start",
+    "clean": "rm -rf .next node_modules"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@headlessui/react": "^1.7.18",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@swing.xyz/sdk": "^0.60.0",
+    "@tailwindcss/forms": "^0.5.7",
+    "@thirdweb-dev/react": "^4.4.17",
+    "@thirdweb-dev/sdk": "^4.0.44",
+    "@tonconnect/ui-react": "^2.0.9",
+    "@tronweb3/tronwallet-adapter-react-hooks": "^1.1.7",
+    "@tronweb3/tronwallet-adapter-react-ui": "^1.1.8",
+    "@tronweb3/tronwallet-adapters": "^1.2.3",
+    "axios": "^1.6.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "framer-motion": "^6.5.1",
+    "lucide-react": "^0.368.0",
+    "next": "14.1.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7",
+    "ton-core": "^0.53.0",
+    "tonweb": "^0.0.66",
+    "use-debounce": "^10.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.11.26",
+    "@types/react": "18.2.65",
+    "@types/react-dom": "18.2.22",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
+    "eslint-config-examples": "workspace:*",
+    "pino-pretty": "^10.3.1",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2",
+    "typescript-config": "workspace:*"
+  }
+}

examples/swaps-api-nextjs-ton/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

examples/swaps-api-nextjs-ton/src/app/api/ton-connect/route.ts

@@ -0,0 +1,11 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const manifest = {
+    url: "http://localhost:3000",
+    name: "Ton Bridge",
+    iconUrl: `"http://localhost:3000/app-icon.png`,
+  };
+
+  return NextResponse.json(manifest);
+}

examples/swaps-api-nextjs-ton/src/app/layout.tsx

@@ -0,0 +1,23 @@
+import "styles/globals.css";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+
+import { Header } from "../components/ui/Header";
+
+import { Toaster } from "components/ui/toaster";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head />
+
+      <body className="min-h-screen overflow-hidden">
+        <div className="absolute left-1/2 top-[60%] h-[150%] w-[150%] -translate-x-1/2 rounded-[100%] bg-sky-500 ring-1 ring-sky-600"></div>
+        <div className="absolute bottom-[70%] left-1/2 h-[150%] w-[150%] -translate-x-1/2 rounded-[100%] bg-sky-500 ring-1 ring-sky-600"></div>
+        <Header />
+
+        <main>{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  );
+}

examples/swaps-api-nextjs-ton/src/app/page.tsx

@@ -0,0 +1,15 @@
+import { Hero } from "../components/ui/Hero";
+import { ThirdwebProvider } from "../components/ThirdwebProvider";
+import { Backdrop } from "components/ui/Backdrop";
+import { DefaultProviders } from "providers/DefaultProviders";
+
+export default function Home() {
+  return (
+    <ThirdwebProvider>
+      <DefaultProviders>
+        <Backdrop />
+        <Hero />
+      </DefaultProviders>
+    </ThirdwebProvider>
+  );
+}