add zklogin

Author: tuanhqv123

.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>
   );

components/SuiProviders.tsx

@@ -5,19 +5,18 @@ import { ConnectButton, useCurrentAccount } from "@mysten/dapp-kit";
 export function WalletConnectButton() {
   const account = useCurrentAccount();
 
-  // Format địa chỉ: 0x1234...5678
+  // Format address: 0x1234...5678
   const formatAddress = (address: string) => {
     return `${address.slice(0, 6)}...${address.slice(-4)}`;
   };
 
   return (
-    <ConnectButton
-      connectText="Launch App"
-      className="sui-wallet-button"
-    >
+    <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>
+        <div className="bg-black dark:bg-white text-white dark:text-black px-5 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>
       )}

components/WalletConnectButton.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/providers/EnokiProviders.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!,
+};

config/enoki.ts

@@ -10,8 +10,10 @@
   },
   "dependencies": {
     "@mysten/dapp-kit": "^0.20.0",
+    "@mysten/enoki": "^0.13.0",
     "@mysten/sui": "^1.45.2",
     "@tanstack/react-query": "^5.90.18",
+    "jwt-decode": "^4.0.0",
     "next": "16.1.3",
     "react": "19.2.3",
     "react-dom": "19.2.3"