Netwalls · Akshola00 · Apr 27, 2025 · Apr 26, 2025 · Apr 26, 2025
diff --git a/app/components/WalletConnector.tsx b/app/components/WalletConnector.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  Connector,
+  useAccount,
+  useConnect,
+  useDisconnect,
+} from "@starknet-react/core";
+import { StarknetkitConnector, useStarknetkitConnectModal } from "starknetkit";
+
+export function WalletConnectorModal() {
+  const { disconnect } = useDisconnect();
+
+  const { connect, connectors } = useConnect();
+  const { starknetkitConnectModal } = useStarknetkitConnectModal({
+    connectors: connectors as StarknetkitConnector[],
+  });
+
+  async function connectWallet() {
+    const { connector } = await starknetkitConnectModal();
+    if (!connector) {
+      return;
+    }
+    await connect({ connector: connector as Connector });
+  }
+
+  const { address } = useAccount();
+
+  if (!address) {
+    return (
+      <button
+        onClick={connectWallet}
+        className="relative bg-white transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]"
+      >
+        <span className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
+          CONNECT WALLET
+        </span>
+      </button>
+    );
+  }
+  return (
+    <div
+      onClick={() => disconnect()}
+      className="flex items-center gap-2 relative bg-white transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]"
+    >
+      <div className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
+        Connected: {address?.slice(0, 6)}...{address?.slice(-4)}
+      </div>
+      <button className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
+        Disconnect
+      </button>
+    </div>
+  );
+}
diff --git a/app/components/starknet-provider.tsx b/app/components/starknet-provider.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import { InjectedConnector } from "starknetkit/injected";
+import { WebWalletConnector } from "starknetkit/webwallet";
+import { StarknetConfig } from "@starknet-react/core";
+import { publicProvider } from "@starknet-react/core";
+import { Connector, voyager } from "@starknet-react/core";
+import { mainnet, sepolia } from "@starknet-react/chains";
+import { ArgentMobileConnector } from "starknetkit/argentMobile";
+
+interface StarknetProviderProps {
+  children: React.ReactNode;
+}
+
+const StarknetProvider: React.FC<StarknetProviderProps> = ({ children }) => {
+  const connectors = [
+    new InjectedConnector({
+      options: { id: "argentX", name: "Argent X" },
+    }),
+    new InjectedConnector({
+      options: { id: "braavos", name: "Braavos" },
+    }),
+    new InjectedConnector({
+      options: { id: "metamask", name: "MetaMask" },
+    }),
+    new InjectedConnector({
+      options: { id: "keplr", name: "Keplr" },
+    }),
+    new InjectedConnector({
+      options: { id: "okxwallet", name: "OKX" },
+    }),
+    new WebWalletConnector({ url: "https://web.argent.xyz" }),
+    ArgentMobileConnector.init({
+      options: {
+        dappName: "Snooknet",
+        url: "https://web.argent.xyz",
+      },
+    }),
+  ];
+
+  return (
+    <StarknetConfig
+      chains={[mainnet, sepolia]}
+      provider={publicProvider()}
+      connectors={connectors as Connector[]}
+      explorer={voyager}
+      autoConnect={true}
+    >
+      {children}
+    </StarknetConfig>
+  );
+};
+
+export default StarknetProvider;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import StarknetProvider from "./components/starknet-provider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -27,7 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <StarknetProvider>{children}</StarknetProvider>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,20 +1,15 @@
+"use client";
 
 import Image from "next/image";
 import Link from "next/link";
-
-// import WalletConnectButton from './components/WalletConnectButton';
-
+import { WalletConnectorModal } from "./components/WalletConnector";
 
 export default function Home() {
   return (
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)] bg-[url('/background.svg')] bg-no-repeat bg-cover">
       <div className="absolute top-4 right-4 sm:top-8 sm:right-8 flex items-center gap-4">
         <div className="h-[40px] sm:h-[62px] w-[50px] sm:w-[72px] bg-[#222C38] transform -skew-x-12"></div>
-        <button className="relative bg-white transform -skew-x-12 px-4 sm:px-8 h-[40px] sm:h-[62px]">
-          <span className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
-            CONNECT WALET
-          </span>
-        </button>
+        <WalletConnectorModal />
       </div>
 
       <main className="flex flex-col gap-4 row-start-2 items-center w-full mt-12 sm:mt-20">
@@ -94,10 +89,7 @@ export default function Home() {
                       PLAY GAMES
                     </h3>
                     <p className="text-xs sm:text-sm max-w-[250px]">
-
-
-                      Choose variety of ways SnookNet 
-
+                      Choose variety of ways SnookNet
                     </p>
                   </div>
                 </div>

diff --git a/app/profile/page.tsx b/app/profile/page.tsx
@@ -1,48 +1,47 @@
-import { Bowlby_One_SC } from 'next/font/google';
+import { Bowlby_One_SC } from "next/font/google";
 
 const bowlby = Bowlby_One_SC({
-  weight: '400',
-  subsets: ['latin'],
-  variable: '--font-bowlby-one-sc',
+  weight: "400",
+  subsets: ["latin"],
+  variable: "--font-bowlby-one-sc",
 });
 
 export default function Profile() {
   return (
-    <div className={`${bowlby.variable} flex flex-col items-center justify-center min-h-screen p-8 pb-20 sm:p-20 bg-[url('/background.svg')] bg-no-repeat bg-cover`}>
-
+    <div
+      className={`${bowlby.variable} flex flex-col items-center justify-center min-h-screen p-8 pb-20 sm:p-20 bg-[url('/background.svg')] bg-no-repeat bg-cover`}
+    >
       <div className="absolute top-4 right-4 sm:top-8 sm:right-8 flex items-center gap-4">
         <button className="relative bg-[#222C38] transform -skew-x-12 px-4 sm:px-8 h-[40px] sm:h-[62px]">
           <span className="text-[#F3F5FF] text-sm sm:text-base font-bold transform skew-x-12">
             CONNECT WALLET
           </span>
         </button>
       </div>
-  
+
       <main className="w-full max-w-4xl flex flex-col mx-auto">
-
         <h1 className="text-[32px] font-bold self-start ml-6">PROFILE</h1>
-  
+
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
           <div className="bg-gradient-to-b from-[rgba(34,44,56,0.7)] to-[rgba(0,0,0,0.7)] border-2 border-[#4B4B4B] w-full max-w-[292px] h-[292px] flex flex-col justify-end items-center transform -skew-x-6 mx-auto">
             <div className="text-[#F3F5FF] text-[18px] font-bold tracking-wide transform skew-x-6">
               LEVELS
             </div>
           </div>
-  
+
           <div className="bg-gradient-to-b from-[rgba(34,44,56,0.7)] to-[rgba(0,0,0,0.7)] border-2 border-[#4B4B4B] w-full max-w-[292px] h-[292px] flex flex-col justify-end items-center transform -skew-x-6 mx-auto">
             <div className="text-[#F3F5FF] text-[18px] font-bold tracking-wide transform skew-x-6">
               NFTS
             </div>
           </div>
-  
+
           <div className="bg-gradient-to-b from-[rgba(34,44,56,0.7)] to-[rgba(0,0,0,0.7)] border-2 border-[#4B4B4B] w-full max-w-[292px] h-[292px] flex flex-col justify-end items-center transform -skew-x-6 mx-auto">
             <div className="text-[#F3F5FF] text-[18px] font-bold tracking-wide transform skew-x-6">
               STATS
             </div>
           </div>
         </div>
       </main>
-
     </div>
   );
 }