From d970eb2e8e21da6105e29678ffb13f272255cacf Mon Sep 17 00:00:00 2001
From: mrtmeeseeks <tao.disha@gmail.com>
Date: Mon, 13 Jan 2025 15:13:27 +0200
Subject: [PATCH] added connect button

---
 package-lock.json | 10 +++---
 package.json      |  2 +-
 src/App.tsx       | 88 +++++++++++++++++++++++++++++++++++++++--------
 3 files changed, 80 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index faad1b8..8cf095f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@aut-labs/abi-types": "^0.0.88-dev",
-        "@aut-labs/connector": "^0.0.205",
+        "@aut-labs/connector": "^0.0.219",
         "@aut-labs/sdk": "^0.0.230-dev",
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
@@ -99,9 +99,9 @@
       "license": "ISC"
     },
     "node_modules/@aut-labs/connector": {
-      "version": "0.0.205",
-      "resolved": "https://registry.npmjs.org/@aut-labs/connector/-/connector-0.0.205.tgz",
-      "integrity": "sha512-TcbRTjHst2mM9SxZRRo0uKoY/dJ5xBuXpeDC8fc9R419nJxLm5cLLAleoNdXMrrSvSHjk7jJ27WEj3VpHGDqmA==",
+      "version": "0.0.219",
+      "resolved": "https://registry.npmjs.org/@aut-labs/connector/-/connector-0.0.219.tgz",
+      "integrity": "sha512-TzktCBAuEr9k1cd5RwNIyEhaTZ9KjTc5C9yHTqEfDIO4XmiNGZ6A7G4Eytho1TMtI50XXjYHM9qWR3OYmbRFPQ==",
       "license": "MIT",
       "dependencies": {
         "@web3auth/base": "^8.0.0",
@@ -4788,6 +4788,8 @@
     },
     "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": {
       "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/napi-wasm/-/napi-wasm-1.1.0.tgz",
+      "integrity": "sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==",
       "inBundle": true,
       "license": "MIT"
     },
diff --git a/package.json b/package.json
index 486b358..d3a1678 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@aut-labs/abi-types": "^0.0.88-dev",
-    "@aut-labs/connector": "^0.0.205",
+    "@aut-labs/connector": "^0.0.219",
     "@aut-labs/sdk": "^0.0.230-dev",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
diff --git a/src/App.tsx b/src/App.tsx
index cbabc79..68e5a5f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,9 @@
 import { Route, Routes, useLocation } from "react-router-dom";
-import { Box } from "@mui/material";
+import { Badge, Box, Button, Tooltip } from "@mui/material";
 import Web3DautConnect from "@api/ProviderFactory/Web3NetworkProvider";
 import { environment, EnvMode } from "@api/environment";
 import AutSDK from "@aut-labs/sdk";
-import { Suspense, lazy, useEffect, useRef, useState } from "react";
+import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
 import { useAppDispatch } from "@store/store.model";
 import AutLoading from "@components/AutLoading";
 import SWSnackbar from "./components/snackbar";
@@ -13,16 +13,43 @@ import PerfectScrollbar from "react-perfect-scrollbar";
 import { useSelector } from "react-redux";
 import { ScrollRestorationState, updateScrollState } from "@store/ui-reducer";
 import { updateWalletProviderState } from "@store/WalletProvider/WalletProvider";
+import ErrorIcon from '@mui/icons-material/Error';
+import { useWalletConnector } from "@aut-labs/connector";
+import { useDisconnect } from "wagmi";
+
 import "./App.scss";
 
 const Integrate = lazy(() => import("./pages/Integrate"));
 
 function App() {
   const dispatch = useAppDispatch();
+  const { open, state } = useWalletConnector();
+  const { disconnect } = useDisconnect();
   const [loading, setLoading] = useState(true);
   const location = useLocation();
   const ps = useRef<HTMLElement>();
   const scrollRestorationState = useSelector(ScrollRestorationState);
+  // const isAllowListed = useSelector(IsAllowListed);
+  const isConnected = useMemo(() => {
+    return state.status === "connected";
+  }, [state.status]);
+
+  const wrongNetwork = useMemo(() => {
+    return (
+      (state.address && state.chainId !== +environment.defaultChainId) ||
+      state.isReadOnly
+    );
+  }, [state]);
+
+  console.log(isConnected, wrongNetwork);
+
+  const connectDisconnectToggle = async () => {
+    if (isConnected) {
+      disconnect();
+    } else {
+      open();
+    }
+  };
 
   useEffect(() => {
     getAppConfig()
@@ -85,25 +112,56 @@ function App() {
               // marginTop: "50px"
             }}
           >
-            {/* <AppBar
+            <Box
               sx={{
-                boxShadow: 2
+                position: "absolute",
+                display: "flex",
+                zIndex: 9999,
+                justifyContent: "flex-end",
+                right: "30px",
+                top: "20px"
               }}
-              toolbarHeight="50"
-              drawerWidth="50"
-              position="fixed"
-              open={open}
             >
-              <Toolbar
+              <Badge
+                color="error"
+                invisible={!wrongNetwork || !isConnected}
+                anchorOrigin={{
+                  vertical: "bottom",
+                  horizontal: "right"
+                }}
                 sx={{
-                  minHeight: "50px",
-                  backgroundColor: "transparent",
-                  border: 0
+                  ".MuiBadge-badge": {
+                    borderRadius: "12px",
+                    width: "30px",
+                    height: "30px"
+                  }
                 }}
+                badgeContent={
+                  <Tooltip
+                    title="Wrong Network"
+                    placement="bottom"
+                    sx={{
+                      width: "25px",
+                      height: "25px"
+                    }}
+                  >
+                    <ErrorIcon />
+                  </Tooltip>
+                }
               >
-                Test
-              </Toolbar>
-            </AppBar> */}
+                <Button
+                  onClick={connectDisconnectToggle}
+                  sx={{
+                    width: "200px",
+                    height: "50px"
+                  }}
+                  color="offWhite"
+                  variant="outlined"
+                >
+                  {isConnected ? "Disconnect" : "Connect"}
+                </Button>
+              </Badge>
+            </Box>
             <Suspense fallback={<AutLoading width="130px" height="130px" />}>
               <Routes>
                 <Route path="/" element={<GetStarted />} />