fix: build

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package.json

@@ -4,7 +4,7 @@
   "version": "version-set-on-publish",
   "scripts": {
     "dev": "next dev",
-    "build": "npx vite build",
+    "build": "next build",
     "start": "next start"
   },
   "files": [
@@ -32,9 +32,9 @@
     "@rainbow-me/rainbowkit": "^2.1.3",
     "@tanstack/react-query": "^5.28.4",
     "@web3-name-sdk/core": "^0.2.0",
-    "@zetachain/protocol-contracts": "^9.0.0",
     "@zetachain/networks": "^10.0.0",
-    "@zetachain/toolkit": "^12.0.0",
+    "@zetachain/protocol-contracts": "^9.0.0",
+    "@zetachain/toolkit": "^15.0.2",
     "autoprefixer": "^10.4.19",
     "bech32": "^2.0.0",
     "class-variance-authority": "^0.7.0",

src/app/page.tsx

@@ -1,18 +1,81 @@
 "use client";
 
 import { ConnectButton } from "@rainbow-me/rainbowkit";
-import { Balances, ConnectBitcoin } from "@/index";
+import {
+  Balances,
+  ConnectBitcoin,
+  Profile,
+  StakingRewards,
+  Swap,
+} from "@/index";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import { useAccount } from "wagmi";
 
 const Page = () => {
+  const { address } = useAccount();
+
   return (
-    <div className="m-4">
-      <div className="flex justify-end gap-2 mb-10">
-        <ConnectBitcoin />
-        <ConnectButton label="Connect EVM" showBalance={false} />
-      </div>
-      <div className="flex justify-center">
-        <div className="w-[400px]">
-          <Balances />
+    <div className="min-h-screen p-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            UniversalKit Components
+          </h1>
+          <div className="flex items-center gap-3">
+            <ThemeToggle />
+            <ConnectBitcoin />
+            <ConnectButton label="Connect EVM" showBalance={false} />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <div>
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+              Balances
+            </h2>
+            <div>
+              <Balances />
+            </div>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+              Swap
+            </h2>
+            <div>
+              {address ? (
+                <Swap contract="0x0000000000000000000000000000000000000000" />
+              ) : (
+                <div className="text-center text-gray-500 dark:text-gray-400 py-8">
+                  Connect wallet to use Swap
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+              Profile
+            </h2>
+            <div>
+              {address ? (
+                <Profile address={address} />
+              ) : (
+                <div className="text-center text-gray-500 dark:text-gray-400 py-8">
+                  Connect wallet to view Profile
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+              Staking Rewards
+            </h2>
+            <div>
+              <StakingRewards />
+            </div>
+          </div>
         </div>
       </div>
     </div>

vercel.json

@@ -0,0 +1,6 @@
+{
+  "buildCommand": "next build",
+  "outputDirectory": ".next",
+  "framework": "nextjs",
+  "installCommand": "yarn install"
+}

vite.config.ts

@@ -31,7 +31,12 @@ export default defineConfig({
       fileName: (format) => `index.js`,
     },
     rollupOptions: {
-      external: ["react", "react-dom"],
+      external: [
+        "react",
+        "react-dom",
+        "@zetachain/toolkit",
+        "@zetachain/toolkit/client",
+      ],
       output: {
         globals: {
           react: "React",