EscrowNet · wheval · Jul 12, 2025
diff --git a/components/AddressBar.tsx b/components/AddressBar.tsx
@@ -1,19 +1,30 @@
 "use client";
-import { useDisconnect } from "@starknet-react/core";
+import { useDisconnect, useNetwork } from "@starknet-react/core";
 import React, { useMemo, useState } from "react";
 import ClickOutsideWrapper from "./outsideClick";
 import { Copy, LogOut, SquareArrowUpRight, Check } from "lucide-react";
+import { useTokenBalance } from "@/hooks/useTokenBalance";
+import { getNetworkInfo } from "@/utils/networkUtils";
 
 function AddressBar({ address }: { address: string }) {
   const { disconnect } = useDisconnect();
+  const { chain } = useNetwork();
   const [showDisconnect, setShowDisconnect] = useState(false);
   const [copied, setCopied] = useState(false);
 
+  const { formattedBalance, isLoading: balanceLoading, isError: balanceError, isAccountDeployed } = useTokenBalance();
+
   const shortenedAddress = useMemo(
     () => (address ? `${address.slice(0, 6)}...${address.slice(-4)}` : ""),
     [address]
   );
 
+
+  const { isMainnet, isTestnet, networkName: currentNetworkName, explorerUrl } = useMemo(
+    () => getNetworkInfo(chain?.id, address),
+    [chain?.id, address]
+  );
+
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(address);
@@ -27,58 +38,87 @@ function AddressBar({ address }: { address: string }) {
   return (
     <>
       <button
-        className="bg-primaryColor text-[#ffffff] font-bold py-2 px-4 rounded-[4px]"
+        className="bg-primaryColor dark:bg-dark-accent text-[#ffffff] dark:text-dark-bg font-bold py-2 px-4 rounded-[4px] flex flex-col items-center gap-1 hover:bg-primaryColor/90 dark:hover:bg-dark-accent/90 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primaryColor dark:focus:ring-dark-accent dark:focus:ring-offset-dark-bg"
         onClick={() => setShowDisconnect((prev) => !prev)}
       >
-        {shortenedAddress}
+        <span className="text-sm">{shortenedAddress}</span>
+        <span className="text-xs opacity-90">
+          {balanceLoading ? "Loading..." : 
+           balanceError && isAccountDeployed === false ? `Deploy on ${currentNetworkName.toLowerCase()}` : 
+           balanceError ? "Error" : `${formattedBalance} ETH`}
+        </span>
       </button>
       {showDisconnect && (
         <ClickOutsideWrapper
           onClickOutside={() => setShowDisconnect(false)}
-          className="absolute top-[100%] right-[1rem] pl-4 pr-4 pt-4 pb-2 rounded bg-white w-[40%] z-10 shadow-lg"
+          className="absolute top-[100%] right-[1rem] pl-4 pr-4 pt-4 pb-2 rounded bg-white dark:bg-dark-surface w-[40%] z-10 shadow-lg dark:shadow-dark-border/20 border border-gray-200 dark:border-dark-border transition-colors duration-300"
         >
-          <div className="flex items-center justify-between pb-2 border-b-2 border-[#C4C4C4]">
-            <p className="text-center font-sans text-[0.875rem] font-medium leading-[1.5625rem] text-[rgba(58,58,58,0.70)]">
+          <div className="flex items-center justify-between pb-2 border-b-2 border-[#C4C4C4] dark:border-dark-border">
+            <p className="text-center font-sans text-[0.875rem] font-medium leading-[1.5625rem] text-[rgba(58,58,58,0.70)] dark:text-dark-text-secondary">
               Wallet
             </p>
             <button
               type="button"
-              className="inline-flex justify-center items-center gap-[0.625rem] shrink-0 rounded border border-[#D9D9D9]
-              text-center font-sans text-[0.75rem] font-normal leading-[1.5625rem] text-[rgba(58,58,58,0.70)]
-              w-[2.3125rem] h-[2.1875rem] p-[0.625rem]"
+              className="inline-flex justify-center items-center gap-[0.625rem] shrink-0 rounded border border-[#D9D9D9] dark:border-dark-border
+              text-center font-sans text-[0.75rem] font-normal leading-[1.5625rem] text-[rgba(58,58,58,0.70)] dark:text-dark-text-secondary
+              w-[2.3125rem] h-[2.1875rem] p-[0.625rem] hover:bg-gray-100 dark:hover:bg-dark-card transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primaryColor dark:focus:ring-dark-accent"
               onClick={() => setShowDisconnect(false)}
             >
               X
             </button>
           </div>
-          <div className="flex flex-col gap-[1rem] p-4 relative h-fit overflow-y-auto bg-[#F7F5F9] rounded-lg mt-[14px]">
-            <div className="flex justify-between items-center mb-[11px] text-xs text-black leading-6">
+          <div className="flex flex-col gap-[1rem] p-4 relative h-fit overflow-y-auto bg-[#F7F5F9] dark:bg-dark-card rounded-lg mt-[14px] transition-colors duration-300">
+            <div className="flex justify-between items-center mb-[11px] text-xs text-black dark:text-dark-text-primary leading-6">
               <h3 className=" font-semibold">Connected</h3>
               <button
                 onClick={() => disconnect()}
-                className="flex items-center gap-x-1"
+                className="flex items-center gap-x-1 hover:text-primaryColor dark:hover:text-dark-accent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primaryColor dark:focus:ring-dark-accent rounded px-1"
               >
                 Disconnect <LogOut size={12} />
               </button>
             </div>
+
+            {/* Network section */}
+            <div className="flex items-center gap-2 mb-2 p-2 bg-gray-100 dark:bg-dark-surface rounded-lg">
+              <div className={`w-2 h-2 rounded-full ${isMainnet ? 'bg-green-500' : 'bg-blue-500'}`}></div>
+              <span className="text-sm font-medium text-black dark:text-dark-text-primary">
+                {currentNetworkName}
+              </span>
+            </div>
             <div className="flex items-center gap-x-2 mb-3">
-              <div className="w-[40px] h-[40px] flex justify-center items-center bg-white rounded-full">
+              <div className="w-[40px] h-[40px] flex justify-center items-center bg-white dark:bg-dark-surface rounded-full transition-colors duration-300">
                 <img src="/argent.svg" className="w-4" alt="" />
               </div>
-              <span className="font-bold text-base">{shortenedAddress}</span>
+              <div className="flex flex-col">
+                <span className="font-bold text-base text-black dark:text-dark-text-primary">{shortenedAddress}</span>
+                <span className="text-sm text-gray-600 dark:text-dark-text-secondary">
+                  {balanceLoading ? "Loading balance..." : 
+                   balanceError && isAccountDeployed === false ? `Not deployed on ${currentNetworkName.toLowerCase()}` : 
+                   balanceError ? "Balance unavailable" : `${formattedBalance} ETH`}
+                </span>
+              </div>
             </div>
-            <div className="flex items-center gap-4 text-sm leading-6">
+
+            {/* Account deployment info */}
+            {balanceError && isAccountDeployed === false && (
+              <div className="mb-3 p-3 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700/50 rounded-md transition-colors duration-300">
+                <p className="text-sm text-yellow-800 dark:text-yellow-200">
+                  <strong>{currentNetworkName} Deployment Required:</strong> Your account needs to be deployed on {isMainnet ? 'Starknet mainnet' : 'Sepolia testnet'}. Make your first transaction on {currentNetworkName.toLowerCase()} to deploy the account here.
+                </p>
+              </div>
+            )}
+            <div className="flex items-center gap-4 text-sm leading-6 text-black dark:text-dark-text-primary">
               <a
-                href={`https://sepolia.voyager.online/contract/${address}`}
+                href={explorerUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-x-1"
+                className="flex items-center gap-x-1 hover:text-primaryColor dark:hover:text-dark-accent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primaryColor dark:focus:ring-dark-accent rounded px-1"
               >
                 View on explorer <SquareArrowUpRight size={12} />
               </a>
               <button
                 onClick={handleCopy}
-                className="flex items-center gap-x-1"
+                className="flex items-center gap-x-1 hover:text-primaryColor dark:hover:text-dark-accent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primaryColor dark:focus:ring-dark-accent rounded px-1"
               >
                 {copied ? (
                   <>

diff --git a/components/StarknetProvider.tsx b/components/StarknetProvider.tsx
@@ -7,8 +7,11 @@ import {
 } from "@starknet-react/core";
 import ControllerConnector from "@cartridge/connector/controller";
 
+
+export const NETWORK: "sepolia" | "mainnet" = "sepolia"; // "sepolia" or "mainnet" 
+
 // Define your contract addresses
-const ETH_TOKEN_ADDRESS: `0x${string}` =
+export const ETH_TOKEN_ADDRESS: `0x${string}` =
   "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7";
 
 // Define session policies type inline
@@ -29,6 +32,7 @@ const policies = {
 
 // Define custom chain objects with rpcUrl and rpcUrls properties
 
+// Chains
 const mainnet = {
   id: BigInt(1), 
   network: "mainnet",
@@ -79,12 +83,11 @@ const sepolia = {
   },
 };
 
-// Initialize the connector outside of any React component
-const connector = new ControllerConnector({
-  policies,
-  chains: [mainnet, sepolia],
-  defaultChainId: sepolia.id.toString(), 
-});
+// Chains for Cartridge Controller 
+const controllerChains = [
+  { ...mainnet, id: "0x534e5f4d41494e" }, // SN_MAIN in hex
+  { ...sepolia, id: "0x534e5f5345504f4c4941" } // SN_SEPOLIA in hex
+];
 
 // Configure RPC provider
 const provider = jsonRpcProvider({
@@ -99,14 +102,32 @@ const provider = jsonRpcProvider({
   },
 });
 
+// Lazy connector initialization to avoid SSR issues
+let connector: ControllerConnector | null = null;
+
+function getConnector() {
+  if (!connector && typeof window !== 'undefined') {
+    connector = new ControllerConnector({
+      policies,
+      chains: controllerChains,
+      defaultChainId: NETWORK === "mainnet" ? "0x534e5f4d41494e" : "0x534e5f5345504f4c4941",
+    });
+  }
+  return connector;
+}
+
 export function StarknetProvider({ children }: { children: React.ReactNode }) {
+  const defaultChainId = NETWORK === "mainnet" ? mainnet.id : sepolia.id;
+  const connectorInstance = getConnector();
+
   return (
     <StarknetConfig
       autoConnect
       chains={[mainnet, sepolia]}
       provider={provider}
-      connectors={[connector]}
+      connectors={connectorInstance ? [connectorInstance] : []}
       explorer={starkscan}
+      defaultChainId={defaultChainId}
     >
       {children}
     </StarknetConfig>

diff --git a/components/TotalTransactionChart.tsx b/components/TotalTransactionChart.tsx
@@ -9,6 +9,7 @@ import {
   Legend,
 } from "recharts";
 import { useTheme } from "next-themes";
+import { useState, useEffect } from "react";
 
 const data = [
   { name: "JAN", transactions: 1000 },
@@ -22,6 +23,21 @@ const data = [
 const TotalTransactionChart = () => {
   const { theme } = useTheme();
   const isDark = theme === "dark";
+  const [windowWidth, setWindowWidth] = useState(1024); // Default to desktop size
+
+  useEffect(() => {
+    // Only access window on client side
+    if (typeof window !== 'undefined') {
+      setWindowWidth(window.innerWidth);
+
+      const handleResize = () => {
+        setWindowWidth(window.innerWidth);
+      };
+
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }
+  }, []);
 
   return (
     <div className="w-full h-[250px] sm:h-[300px] lg:h-[400px] xl:h-[80%]">
@@ -40,7 +56,7 @@ const TotalTransactionChart = () => {
             axisLine={false}
             tick={{
               fill: isDark ? "#B8A8CC" : "#666666",
-              fontSize: window.innerWidth < 640 ? 10 : 12,
+              fontSize: windowWidth < 640 ? 10 : 12,
             }}
             interval={0}
           />
@@ -49,9 +65,9 @@ const TotalTransactionChart = () => {
             tickLine={false}
             tick={{
               fill: isDark ? "#B8A8CC" : "#666666",
-              fontSize: window.innerWidth < 640 ? 10 : 12,
+              fontSize: windowWidth < 640 ? 10 : 12,
             }}
-            width={window.innerWidth < 640 ? 40 : 60}
+            width={windowWidth < 640 ? 40 : 60}
           />
           <Tooltip
             contentStyle={{
@@ -65,7 +81,7 @@ const TotalTransactionChart = () => {
           <Legend
             verticalAlign="bottom"
             wrapperStyle={{
-              fontSize: window.innerWidth < 640 ? "0.75rem" : "0.8rem",
+              fontSize: windowWidth < 640 ? "0.75rem" : "0.8rem",
               marginTop: "10px",
               color: isDark ? "#B8A8CC" : "#666666",
             }}
@@ -74,7 +90,7 @@ const TotalTransactionChart = () => {
             dataKey="transactions"
             fill={isDark ? "#9D7BEA" : "#2D0561"}
             barSize={
-              window.innerWidth < 640 ? 20 : window.innerWidth < 1024 ? 25 : 30
+              windowWidth < 640 ? 20 : windowWidth < 1024 ? 25 : 30
             }
             name="2022"
             radius={[2, 2, 0, 0]}

diff --git a/components/modal-component/PaymentModal.tsx b/components/modal-component/PaymentModal.tsx
@@ -70,12 +70,12 @@ const PaymentModal: React.FC<ModalProps> = ({ onNext, onPrevious, closeModal })
   const salt = BigInt(Math.floor(Math.random() * Number.MAX_SAFE_INTEGER));
 
   const calls = useMemo(() => {
-    const isInputValid = user && localPaymentAmount !== "" || false && localSelectedPaymentStructure !== "" && paymentAmount !== "" || undefined;
+    const isInputValid = user && localPaymentAmount !== "" && localSelectedPaymentStructure !== "" && paymentAmount !== "";
 
-    if (!isInputValid || !contract ) return
+    if (!isInputValid || !contract || !user) return;
 
-    return [contract?.populate("deploy_escrow", [user, beneficiary2, arbiter, salt])]
-  }, [localPaymentAmount, localSelectedPaymentStructure, paymentAmount])
+    return [contract.populate("deploy_escrow", [user, beneficiary2, arbiter, salt])]
+  }, [user, localPaymentAmount, localSelectedPaymentStructure, paymentAmount, contract, beneficiary2, arbiter, salt])
 
   console.log(calls)