Update wallet connection and navigation

src/app/components/navbar/NavBar.tsx

@@ -1,18 +1,23 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./navbar.module.css";
 import Image from "next/image";
 import { useAppContext } from "../../providers/AppProvider";
 import { usePathname, useRouter } from "next/navigation";
 
 const NavBar = () => {
   const [showItems, setshowItems] = useState<boolean>(true);
+  const [walletConnect, setWalletConnect] = useState<string>("Connect Your Wallet");
   const path = usePathname();
   const route = useRouter();
 
   console.log(path);
 
-  const { handleConnetWalletBtnClick, address } = useAppContext();
+  const { handleConnetWalletBtnClick, address, connection } = useAppContext();
+
+  console.log("Connection Log")
+  console.log(connection)
+  console.log("Connection Log")
 
   const connectFromNav = () => {
     handleConnetWalletBtnClick();
@@ -31,6 +36,15 @@ const NavBar = () => {
     route.push("/processing/offramp");
   };
 
+  useEffect(() => {
+    if (connection) {
+      setWalletConnect("Wallet Connected");
+    } else {
+      setWalletConnect("Connect Your Wallet");
+    }
+  }, [connection]);
+
+
   return (
     <div className={styles.container}>
       <div className={styles.logo}>
@@ -65,7 +79,7 @@ const NavBar = () => {
               fill
             ></Image>
           </span>
-          <p>Wallet Connected</p>
+          <p>{walletConnect}</p>
           <span className={styles.navOptions_arrow_drop_down}>
             <Image
               src={"/arrowdropdown.png"}

src/app/components/offRamp/OffRamp.tsx

@@ -1,11 +1,16 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./offramp.module.css";
+import { useAppContext } from "../../providers/AppProvider";
+import { useRouter } from "next/navigation";
 
 const OffRamp = () => {
   const [activeMethodNumber, setActiveMethodNumber] = useState(true);
   const [activeMethodPaybill, setActiveMethodPaybill] = useState(false);
   const [activeMethodTill, setActiveMethodTill] = useState(false);
+  const [connectionOffRamp, setConnectionOffRamp] = useState<boolean>(false)
+
+  const route = useRouter();
 
   const selectPaymentMethodNumber = () => {
     setActiveMethodNumber(true);
@@ -24,6 +29,23 @@ const OffRamp = () => {
     setActiveMethodPaybill(false);
     setActiveMethodTill(true);
   };
+
+  const { handleConnetWalletBtnClick, connection } = useAppContext();
+  const connectFromNav = () => {
+    handleConnetWalletBtnClick();
+    setConnectionOffRamp(true)
+  };
+
+
+  useEffect(() => {
+    if (connection && connectionOffRamp ) {
+      route.push("/");
+      setConnectionOffRamp(false)
+    } else {
+      return 
+    }
+  }, [connection, connectionOffRamp]);
+
   return (
     <div className={styles.page}>
       <main className={styles.main}>
@@ -164,7 +186,7 @@ const OffRamp = () => {
                 />
               </div> */}
 
-              <button type="submit" className={styles.submitButton}>
+              <button onClick={connectFromNav} type="submit" className={styles.submitButton}>
                 Connect Wallet
               </button>
             </form>

src/app/page.tsx

@@ -1,7 +1,35 @@
+"use client"
 import Image from "next/image";
 import styles from "./page.module.css";
+import { useAppContext } from "./providers/AppProvider";
+import { useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
 
 export default function Home() {
+
+  const [connectionOnRamp, setConnectionOnRamp] = useState<boolean>(false)
+
+  const { handleConnetWalletBtnClick, connection } = useAppContext();
+
+  const route = useRouter();
+  const path = usePathname()
+
+  const connectFromNav = () => {
+    handleConnetWalletBtnClick();
+    setTimeout(() => {
+      setConnectionOnRamp(true)
+    }, 3000);
+  };
+
+  useEffect(() => {
+    if (connection && connectionOnRamp ) {
+      route.push("/processing/offramp");
+      setConnectionOnRamp(false)
+    } else {
+      return 
+    }
+  }, [connection, connectionOnRamp]);
+
   return (
     <div className={styles.page}>
       <main className={styles.main}>
@@ -59,7 +87,8 @@ export default function Home() {
                 />
               </div>
 
-              <button type="submit" className={styles.submitButton}>
+
+            <button onClick={connectFromNav} type="submit" className={styles.submitButton}>
               Connect Wallet
               </button>
             </form>

src/app/providers/AppProvider.tsx

@@ -101,6 +101,10 @@ const connectWallet = async () => {
     }
   };
 
+  console.log("account")
+  console.log(account)
+  console.log("account")
+
   const handleConnetWalletBtnClick = () => {
     if (!account) {
       connectWallet();