resolve conflicts

Author: tpSpace

.gitignore

@@ -42,3 +42,5 @@ next-env.d.ts
 
 package-lock.json
 bun.lock
+opencode.json
+ENOKI_INTEGRATION.md

app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Anton, Inter } from "next/font/google";
-import { SuiProviders } from "@/components/SuiProviders";
+import { EnokiProviders } from "@/components/providers/EnokiProviders";
 import "./globals.css";
 import "@mysten/dapp-kit/dist/index.css";
 
@@ -57,7 +57,7 @@ export default function RootLayout({
         className={`${anton.variable} ${inter.variable} antialiased`}
         suppressHydrationWarning
       >
-        <SuiProviders>{children}</SuiProviders>
+        <EnokiProviders>{children}</EnokiProviders>
       </body>
     </html>
   );

bun.lock

@@ -1,26 +1,61 @@
 "use client";
 
-import { ConnectButton, useCurrentAccount } from "@mysten/dapp-kit";
+import { ConnectButton, useCurrentAccount, useDisconnectWallet } from "@mysten/dapp-kit";
+import { useState, useCallback } from "react";
 
 export function WalletConnectButton() {
   const account = useCurrentAccount();
+  const { mutate: disconnect } = useDisconnectWallet();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-  // Format địa chỉ: 0x1234...5678
   const formatAddress = (address: string) => {
     return `${address.slice(0, 6)}...${address.slice(-4)}`;
   };
 
+  const handleDisconnect = useCallback(() => {
+    // Clear session storage to fix redirect_uri mismatch on re-login
+    sessionStorage.clear();
+    disconnect();
+    setIsMenuOpen(false);
+  }, [disconnect]);
+
   return (
-    <ConnectButton
-      connectText="Launch App"
-      className="sui-wallet-button"
-    >
-      {account && (
-        <div className="bg-black dark:bg-white text-white dark:text-black px-5 py-2 rounded-full font-bold text-sm uppercase hover:scale-105 transition-transform flex items-center gap-2">
-          <span className="material-icons text-base">account_balance_wallet</span>
-          <span>{formatAddress(account.address)}</span>
+    <div className="relative">
+      <ConnectButton connectText="Launch App" className="sui-wallet-button">
+        {account && (
+          <button
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            className="bg-black dark:bg-white text-white dark:text-black px-5 py-2 rounded-full font-bold text-sm uppercase hover:scale-105 transition-transform flex items-center gap-2"
+          >
+            <span className="material-icons text-base">account_balance_wallet</span>
+            <span>{formatAddress(account.address)}</span>
+            <span className="material-icons text-sm">
+              {isMenuOpen ? "expand_less" : "expand_more"}
+            </span>
+          </button>
+        )}
+      </ConnectButton>
+
+      {/* Dropdown menu */}
+      {isMenuOpen && account && (
+        <div className="absolute right-0 top-full mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 min-w-[150px] z-50">
+          <button
+            onClick={handleDisconnect}
+            className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+          >
+            <span className="material-icons text-sm">logout</span>
+            Disconnect
+          </button>
         </div>
       )}
-    </ConnectButton>
+
+      {/* Click outside to close */}
+      {isMenuOpen && (
+        <div
+          className="fixed inset-0 z-40"
+          onClick={() => setIsMenuOpen(false)}
+        />
+      )}
+    </div>
   );
 }

components/SuiProviders.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { ReactNode, useEffect } from "react";
+import {
+  createNetworkConfig,
+  SuiClientProvider,
+  WalletProvider,
+  useSuiClientContext,
+} from "@mysten/dapp-kit";
+import { getFullnodeUrl } from "@mysten/sui/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { isEnokiNetwork, registerEnokiWallets } from "@mysten/enoki";
+import { enokiConfig } from "@/config/enoki";
+import "@mysten/dapp-kit/dist/index.css";
+
+const { networkConfig } = createNetworkConfig({
+  testnet: { url: getFullnodeUrl("testnet") },
+  mainnet: { url: getFullnodeUrl("mainnet") },
+});
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
+
+function RegisterEnokiWallets() {
+  const { client, network } = useSuiClientContext();
+
+  useEffect(() => {
+    if (!isEnokiNetwork(network)) return;
+
+    const redirectUrl =
+      typeof window !== "undefined"
+        ? `${window.location.origin}`
+        : "http://localhost:3000";
+
+    const { unregister } = registerEnokiWallets({
+      apiKey: enokiConfig.apiKey,
+      providers: {
+        google: {
+          clientId: enokiConfig.googleClientId,
+          redirectUrl,
+        },
+      },
+      client,
+      network,
+    });
+
+    return unregister;
+  }, [client, network]);
+
+  return null;
+}
+
+export function EnokiProviders({ children }: { children: ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SuiClientProvider networks={networkConfig} defaultNetwork="testnet">
+        <RegisterEnokiWallets />
+        <WalletProvider autoConnect={true}>{children}</WalletProvider>
+      </SuiClientProvider>
+    </QueryClientProvider>
+  );
+}

components/WalletConnectButton.tsx

@@ -0,0 +1,6 @@
+export const enokiConfig = {
+  apiKey: process.env.NEXT_PUBLIC_ENOKI_API_KEY!,
+  googleClientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!,
+  network: (process.env.NEXT_PUBLIC_SUI_NETWORK || "testnet") as "mainnet" | "testnet",
+  rpcUrl: process.env.NEXT_PUBLIC_SUI_RPC_URL!,
+};

components/providers/EnokiProviders.tsx

@@ -9,13 +9,21 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@mysten/bcs": "^1.9.2",
     "@mysten/dapp-kit": "^0.20.0",
+    "@mysten/enoki": "^0.13.0",
+    "@mysten/kiosk": "^0.14.6",
+    "@mysten/payment-kit": "^0.0.20",
     "@mysten/sui": "^1.45.2",
+    "@mysten/walrus": "^0.9.0",
+    "@mysten/zksend": "^0.14.12",
     "@tanstack/react-query": "^5.90.18",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "gsap": "^3.13.0",
     "lucide-react": "^0.562.0",
+    "gsap": "^3.14.2",
+    "jwt-decode": "^4.0.0",
+    "motion": "^12.26.2",
     "next": "16.1.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
@@ -41,4 +49,4 @@
     "sharp",
     "unrs-resolver"
   ]
-}
+}