diff --git a/next.config.js b/next.config.js
index 2431ee9..8a35c52 100644
--- a/next.config.js
+++ b/next.config.js
@@ -9,4 +9,12 @@ const nextConfig = {
},
};
-export default nextConfig;
\ No newline at end of file
+// export default nextConfig;
+
+
+// /** @type {import('next').NextConfig} */
+// const nextConfig = {};
+
+// module.exports = nextConfig;
+
+
diff --git a/public/Avater.svg b/public/Avater.svg
new file mode 100644
index 0000000..91ecb50
--- /dev/null
+++ b/public/Avater.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fb17e01..1cfd19d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,8 +1,9 @@
import type { Metadata } from "next";
import "./globals.css";
import NavBar from "@/components/landingpage/NavBar";
-import { Providers } from "@/components/blockchain/Providers";
import Footer from "@/components/landingpage/Footer";
+import { WalletProvider } from "../components/blockchain/WalletProvider";
+import { StarknetProvider } from "../components/blockchain/Providers";
export const metadata: Metadata = {
title: "ChainLib",
@@ -18,7 +19,9 @@ export default function RootLayout({
- {children}
+
+ {children}
+
diff --git a/src/components/blockchain/Providers.tsx b/src/components/blockchain/Providers.tsx
index 6701ac3..aa42c70 100644
--- a/src/components/blockchain/Providers.tsx
+++ b/src/components/blockchain/Providers.tsx
@@ -1,32 +1,70 @@
+// "use client";
+// import { ReactNode } from "react";
+
+// import { sepolia } from "@starknet-react/chains";
+// import {
+// StarknetConfig,
+// argent,
+// braavos,
+// useInjectedConnectors,
+// jsonRpcProvider,
+// voyager,
+// } from "@starknet-react/core";
+
+// export function Providers({ children }: { children: ReactNode }) {
+// const { connectors } = useInjectedConnectors({
+// // Show these connectors if the user has no connector installed.
+// recommended: [argent(), braavos()],
+// // Hide recommended connectors if the user has any connector installed.
+// includeRecommended: "onlyIfNoConnectors",
+// // Randomize the order of the connectors.
+// order: "random",
+// });
+// return (
+// ({ nodeUrl: process.env.NEXT_PUBLIC_RPC_URL }) })}
+// provider={jsonRpcProvider({ rpc: () => ({ nodeUrl: process.env.NEXT_PUBLIC_RPC_URL }) })}
+// connectors={connectors}
+// explorer={voyager}
+// >
+// {children}
+//
+// );
+// }
+
"use client";
-import { ReactNode } from "react";
+import React from "react";
-import { sepolia } from "@starknet-react/chains";
+import { sepolia, mainnet } from "@starknet-react/chains";
import {
StarknetConfig,
+ publicProvider,
argent,
braavos,
useInjectedConnectors,
- jsonRpcProvider,
- voyager,
+ voyager
} from "@starknet-react/core";
-export function Providers({ children }: { children: ReactNode }) {
+export function StarknetProvider({ children }: { children: React.ReactNode }) {
const { connectors } = useInjectedConnectors({
// Show these connectors if the user has no connector installed.
- recommended: [argent(), braavos()],
+ recommended: [
+ argent(),
+ braavos(),
+ ],
// Hide recommended connectors if the user has any connector installed.
includeRecommended: "onlyIfNoConnectors",
// Randomize the order of the connectors.
- order: "random",
+ order: "random"
});
+
return (
({ nodeUrl: process.env.NEXT_PUBLIC_RPC_URL }) })}
- provider={jsonRpcProvider({ rpc: () => ({ nodeUrl: process.env.NEXT_PUBLIC_RPC_URL }) })}
+ chains={[mainnet, sepolia]}
+ provider={publicProvider()}
connectors={connectors}
explorer={voyager}
>
diff --git a/src/components/blockchain/Wallet-connect-modal.tsx b/src/components/blockchain/Wallet-connect-modal.tsx
new file mode 100644
index 0000000..06f7aca
--- /dev/null
+++ b/src/components/blockchain/Wallet-connect-modal.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X } from "lucide-react";
+import Image from "next/image";
+import AnimationWrapper from "../motion/Animation-wrapper";
+import { useWalletContext } from "./WalletProvider";
+import { useRouter } from "next/navigation";
+
+// interface WalletOption {
+// id: string;
+// name: string;
+// icon: string;
+// }
+
+interface WalletConnectModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onSelect: (wallet: string) => void;
+}
+
+export default function WalletConnectModal({
+ isOpen,
+ onClose,
+}: WalletConnectModalProps) {
+ const [selectedWallet, setSelectedWallet] = useState(null);
+ const { connectors, connectAsync} = useWalletContext();
+ const router = useRouter();
+
+
+
+ const handleSelect = (walletId: string) => {
+ setSelectedWallet(walletId);
+ };
+
+ // ② On confirm, look up the connector object and call connectWallet
+ const handleConfirm = async () => {
+ if (!selectedWallet) return;
+
+ const connector = connectors.find((c) => c.id === selectedWallet);
+ if (!connector) {
+ console.error("Connector not found:", selectedWallet);
+ return;
+ }
+
+ try {
+ await connectAsync({ connector }); // ■ await the wallet prompt
+ router.push("/sign-in"); // ■ now safe to navigate
+ onClose();
+ } catch (err) {
+ console.error("Wallet connection failed:", err); // ■ handle rejections
+ }
+ };
+
+ const modalVariants = {
+ hidden: { opacity: 0, scale: 0.9 },
+ visible: {
+ opacity: 1,
+ scale: 1,
+ transition: {
+ duration: 0.2,
+ ease: "easeOut",
+ },
+ },
+ exit: {
+ opacity: 0,
+ scale: 0.9,
+ transition: {
+ duration: 0.2,
+ ease: "easeIn",
+ },
+ },
+ };
+
+ const backdropVariants = {
+ hidden: { opacity: 0 },
+ visible: { opacity: 1 },
+ exit: { opacity: 0 },
+ };
+
+ // helper to get icon source
+ function getIconSource(
+ icon: string | { dark: string; light: string }
+ ): string {
+ if (typeof icon === "string") {
+ // If it's a string, use it directly
+ return icon;
+ } else {
+ // If it's an object, use the dark variant (or light, as needed)
+ return icon.dark; // Or icon.light, depending on your theme
+ }
+ }
+
+ return (
+
+ {isOpen && (
+
+
+
+
+
+
+ Connect Wallet
+
+
+
+
+
+ Choose a wallet you want to connect to Chain Lib
+
+
+
+ {connectors.map((wallet, index) => (
+
+
+
+ ))}
+
+
+ {/* ③ Confirmation button */}
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/blockchain/Wallet-disconnect-modal.tsx b/src/components/blockchain/Wallet-disconnect-modal.tsx
new file mode 100644
index 0000000..5f468c1
--- /dev/null
+++ b/src/components/blockchain/Wallet-disconnect-modal.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import AnimationWrapper from "../motion/Animation-wrapper";
+import { motion, AnimatePresence } from "framer-motion";
+import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
+import { X } from "lucide-react";
+
+interface WalletDisconnectModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onDisconnect: () => void;
+}
+
+export default function WalletDisconnectModal({
+ isOpen,
+ onClose,
+ onDisconnect,
+}: WalletDisconnectModalProps) {
+
+
+ //pathname check
+ const pathName = usePathname();
+ const signInPath = "/sign-in";
+
+
+ //router
+ const router = useRouter();
+
+ const handleDisconnect = () => {
+ if (
+ signInPath === pathName
+ ) {
+ router.push("/"); // ■ now safe to navigate
+ }
+ onDisconnect();
+ };
+
+ const modalVariants = {
+ hidden: { opacity: 0, scale: 0.9 },
+ visible: {
+ opacity: 1,
+ scale: 1,
+ transition: {
+ duration: 0.2,
+ ease: "easeOut",
+ },
+ },
+ exit: {
+ opacity: 0,
+ scale: 0.9,
+ transition: {
+ duration: 0.2,
+ ease: "easeIn",
+ },
+ },
+ };
+
+ const backdropVariants = {
+ hidden: { opacity: 0 },
+ visible: { opacity: 1 },
+ exit: { opacity: 0 },
+ };
+
+ return (
+
+ {isOpen && (
+
+
+
+
+
+
+ Disconnect Wallet
+
+
+
+
+
+
+ Are you sure you want to disconnect your wallet?
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/blockchain/WalletConnector.tsx b/src/components/blockchain/WalletConnector.tsx
deleted file mode 100644
index 29044dd..0000000
--- a/src/components/blockchain/WalletConnector.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-
-function Page(){
- return(
- Blockchain Component
- )
-}
-
-
-export default Page;
\ No newline at end of file
diff --git a/src/components/blockchain/WalletProvider.tsx b/src/components/blockchain/WalletProvider.tsx
new file mode 100644
index 0000000..8cd8996
--- /dev/null
+++ b/src/components/blockchain/WalletProvider.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import React, {
+ createContext,
+ useContext,
+ ReactNode,
+ useCallback,
+ useEffect,
+} from "react";
+import {
+ useConnect,
+ useAccount,
+ useDisconnect,
+ Connector,
+ ConnectVariables
+} from "@starknet-react/core";
+
+interface WalletContextProps {
+ account: string | null;
+ connectors: Connector[]; // ← Exposed connectors
+ connectWallet: (connector: Connector) => void; // ← Takes connector arg
+ disconnectWallet: () => void;
+ connectAsync: (args?: ConnectVariables) => Promise;
+}
+
+const WalletContext = createContext({
+ account: null,
+ connectors: [], // ← Default empty
+ connectWallet: () => {},
+ disconnectWallet: () => {},
+ connectAsync: () => Promise.resolve(),
+});
+
+export const WalletProvider: React.FC<{ children: ReactNode }> = ({
+ children,
+}) => {
+ const { connect, connectors, connectAsync } = useConnect();
+ const { address } = useAccount();
+ const { disconnect } = useDisconnect();
+
+ // Accept a specific connector when connecting
+ const connectWallet = useCallback(
+ (connector: Connector) => {
+ connect({ connector });
+ },
+ [connect]
+ );
+
+ // Save wallet address to localStorage when connected
+ useEffect(() => {
+ if (address) {
+ localStorage.setItem("walletAddress", address);
+ } else {
+ localStorage.removeItem("walletAddress");
+ }
+ }, [address]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+
+export const useWalletContext = () => {
+ const ctx = useContext(WalletContext);
+ if (!ctx) {
+ throw new Error("useWalletContext must be inside WalletProvider");
+ }
+ return ctx;
+};
\ No newline at end of file
diff --git a/src/components/landingpage/NavBar.tsx b/src/components/landingpage/NavBar.tsx
index 24444f8..9e1e14f 100644
--- a/src/components/landingpage/NavBar.tsx
+++ b/src/components/landingpage/NavBar.tsx
@@ -1,56 +1,201 @@
-import React from 'react'
+"use client";
+
+import React from "react";
import Image from "next/image";
import Link from "next/link";
import Image4 from "@/assets/Images/ImageLogo.png";
+import { useState, useRef, useEffect } from "react";
+import { MoreVertical } from "lucide-react";
+import AnimationWrapper from "@/components/motion/Animation-wrapper";
+import WalletConnectModal from "../blockchain/Wallet-connect-modal";
+import WalletDisconnectModal from "../blockchain/Wallet-disconnect-modal";
+
+// starknet imports
+import { useWalletContext } from "../blockchain/WalletProvider";
const NavBar = () => {
- return (
-
-
-
-
-
-
- ChainLib
-
-
-
-
-
-