Add Next.js Sui swaps example with Swing API integration

examples/swaps-api-nextjs-sui/.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-sui/.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-sui/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-sui/next-env.d.ts

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

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

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

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

@@ -0,0 +1,60 @@
+{
+  "name": "swaps-api-nextjs-sui",
+  "demo": "https://swaps-api-nextjs-sui.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",
+    "@mysten/sui.js": "^0.54.1",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@suiet/wallet-kit": "^0.2.25",
+    "@swing.xyz/sdk": "^0.60.0",
+    "@tailwindcss/forms": "^0.5.7",
+    "@thirdweb-dev/react": "^4.4.17",
+    "@thirdweb-dev/sdk": "^4.0.44",
+    "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",
+    "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-sui/postcss.config.js

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

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

@@ -0,0 +1,27 @@
+import "styles/globals.css";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+
+import { Header } from "../components/ui/Header";
+import dynamic from "next/dynamic";
+
+import { Toaster } from "components/ui/toaster";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const SuiWalletProviders = dynamic(
+    () => import("components/providers/SuiWalletProviders"),
+    { ssr: false },
+  );
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head />
+
+      <body className="min-h-screen">
+        <SuiWalletProviders>
+          <Header />
+          <main>{children}</main>
+          <Toaster />
+        </SuiWalletProviders>
+      </body>
+    </html>
+  );
+}

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

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