Pass first message using state (#6)

* Pass inner message using state

* Remove paranthesis

* Change disconnect button color

---------

Co-authored-by: Adw8 <adwait@deepstacksoft.com>

src/App.tsx

@@ -14,7 +14,7 @@ function App() {
         <Route path="/" element={<ConnectWallet />} />
         <Route element={<SignPageLayout />} >
           <Route path="/sign-with-ethereum" element={<SignWithEthereum />} />
-          <Route path="/sign-with-cosmos/:ethAddress/:cosmosAddress/:ethSignature" element={<SignWithCosmos />} />
+          <Route path="/sign-with-cosmos/:ethAddress/:ethSignature" element={<SignWithCosmos />} />
         </Route>
         <Route path="*" element={<PageNotFound />} />
       </Routes>

src/layout/SignPageLayout.tsx

@@ -42,6 +42,7 @@ const SignPageLayout = () => {
           style={{
             marginLeft: "auto",
           }}
+          color="error"
           onClick={disconnectHandler}
         >
           Disconnect

src/pages/SignWithCosmos.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useLocation } from "react-router-dom";
 import { SnackbarProvider, enqueueSnackbar } from "notistack";
 import canonicalStringify from "canonical-json";
 
@@ -17,43 +17,41 @@ import { useWalletConnectContext } from "../context/WalletConnectContext";
 const SignWithCosmos = () => {
   const { session, signClient } = useWalletConnectContext();
 
-  const { ethAddress, cosmosAddress, ethSignature } = useParams();
+  const { ethAddress, ethSignature } = useParams();
 
   const [openModal, setOpenModal] = useState(false);
   const [cosmosSignature, setCosmosSignature] = useState("");
 
+  const location = useLocation();
+  const innerMessage = location.state;
+  const cosmosAddress = innerMessage.address;
+
   const displayAttestation = useMemo(() => {
     return canonicalStringify(
       {
         payload: {
           msg: "Onboarding my Azimuth ID onto UrbitChain",
           address: ethAddress,
-          payload: {
-            msg: "Onboarding my cosmos validator onto UrbitChain",
-            address: cosmosAddress,
-          },
+          payload: innerMessage,
         },
         signatures: [cosmosSignature, ethSignature],
       },
       null,
       2
     );
-  }, [ethAddress, cosmosAddress, cosmosSignature, ethSignature]);
+  }, [ethAddress, cosmosSignature, ethSignature, innerMessage]);
 
   const message = useMemo(() => {
     return canonicalStringify(
       {
         msg: "Onboarding my Azimuth ID onto UrbitChain",
         address: ethAddress,
-        payload: {
-          msg: "Onboarding my cosmos validator onto UrbitChain",
-          address: cosmosAddress,
-        },
+        payload: innerMessage,
       },
       null,
       2
     );
-  }, [ethAddress, cosmosAddress]);
+  }, [ethAddress, innerMessage]);
 
   const signCosmos = async () => {
     try {

src/pages/SignWithEthereum.tsx

@@ -67,11 +67,11 @@ const SignWithEthereum = () => {
   };
 
   const submitHandler = useCallback(() => {
-    navigate(
-      `/sign-with-cosmos/${ethAddress}/${cosmosAddress}/${ethSignature}`
-    );
+    navigate(`/sign-with-cosmos/${ethAddress}/${ethSignature}`, {
+      state: message,
+    });
     setOpenModal(false);
-  }, [ethAddress, cosmosAddress, ethSignature, navigate]);
+  }, [ethAddress, ethSignature, navigate, message]);
 
   return (
     <div>