From 3adcdfa39c3359fc9a56797d3e36b34011fea6d6 Mon Sep 17 00:00:00 2001
From: neerajvijay1997 <111040298+neerajvijay1997@users.noreply.github.com>
Date: Thu, 28 Mar 2024 09:14:06 +0530
Subject: [PATCH] UI Improvements (#9)

* Add loading spinners for buttons

* Add navigation to home page

* Add logo inside anchor tag
---
 package.json                         |  1 +
 src/context/WalletConnectContext.tsx |  2 +-
 src/layout/SignPageLayout.tsx        | 31 ++++++++++++++++------------
 src/pages/SignWithCosmos.tsx         | 12 ++++++++---
 src/pages/SignWithEthereum.tsx       | 16 ++++++++------
 yarn.lock                            | 13 ++++++++++++
 6 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 0981820..9dd7ce8 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.14",
+    "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.15.14",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
diff --git a/src/context/WalletConnectContext.tsx b/src/context/WalletConnectContext.tsx
index 0e7e8ab..027b95d 100644
--- a/src/context/WalletConnectContext.tsx
+++ b/src/context/WalletConnectContext.tsx
@@ -109,7 +109,7 @@ export const WalletConnectProvider = ({
       eip155: {
         methods: ["personal_sign"],
         chains: ["eip155:1"],
-        events: ["connect", "disconnect"],
+        events: [],
       },
       cosmos: {
         methods: ["cosmos_signDirect", "cosmos_signAmino"],
diff --git a/src/layout/SignPageLayout.tsx b/src/layout/SignPageLayout.tsx
index 0374892..3fe8744 100644
--- a/src/layout/SignPageLayout.tsx
+++ b/src/layout/SignPageLayout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useNavigate, Link } from "react-router-dom";
 
 import {
   Toolbar,
@@ -8,6 +8,7 @@ import {
   Button,
   Typography,
   Container,
+  Box
 } from "@mui/material";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
@@ -24,18 +25,22 @@ const SignPageLayout = () => {
   return (
     <>
       <Toolbar variant="dense">
-        <Avatar
-          alt="Urbit logo"
-          src="https://avatars.githubusercontent.com/u/5237680?s=200&v=4"
-        />
-        <IconButton
-          edge="start"
-          color="inherit"
-          aria-label="menu"
-          sx={{ mr: 2 }}
-        >
-          Urbit
-        </IconButton>
+        <Link to="/" style={{ color: 'inherit', textDecoration: 'none' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Avatar
+              alt="Urbit logo"
+              src="https://avatars.githubusercontent.com/u/5237680?s=200&v=4"
+            />
+            <IconButton
+              edge="start"
+              color="inherit"
+              aria-label="menu"
+              sx={{ mr: 2 }}
+            >
+            Urbit
+            </IconButton>
+          </Box>
+        </Link>
 
         <Button
           variant="outlined"
diff --git a/src/pages/SignWithCosmos.tsx b/src/pages/SignWithCosmos.tsx
index 9b2070c..3ce8b13 100644
--- a/src/pages/SignWithCosmos.tsx
+++ b/src/pages/SignWithCosmos.tsx
@@ -11,6 +11,7 @@ import {
   Box,
   Typography,
 } from "@mui/material";
+import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 
@@ -20,6 +21,7 @@ const SignWithCosmos = () => {
   const { ethAddress, ethSignature } = useParams();
 
   const [openModal, setOpenModal] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [cosmosSignature, setCosmosSignature] = useState("");
 
   const location = useLocation();
@@ -52,6 +54,7 @@ const SignWithCosmos = () => {
   const signCosmos = async () => {
     try {
       if (ethAddress) {
+        setIsLoading(true)
         const signDoc = {
           msgs: [],
           fee: { amount: [], gas: "23" },
@@ -71,11 +74,13 @@ const SignWithCosmos = () => {
             params,
           },
         });
+        setIsLoading(false)
         setOpenModal(true);
         setCosmosSignature(signedMessage.signature);
       }
     } catch (error) {
       console.log("err in signing ", error);
+      setIsLoading(false)
       setOpenModal(false);
       enqueueSnackbar("Error signing message", { variant: "error" });
     }
@@ -103,19 +108,20 @@ const SignWithCosmos = () => {
         }}
       >
         <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-          {JSON.stringify(message, null, 2)}{" "}
+          {canonicalStringify(message, null, 2)}{" "}
         </pre>
       </Box>
 
       <Box>
-        <Button
+        <LoadingButton
           variant="contained"
           onClick={() => {
             signCosmos();
           }}
+          loading={isLoading}
         >
           Sign with cosmos
-        </Button>
+        </LoadingButton>
       </Box>
       <Dialog
         open={openModal}
diff --git a/src/pages/SignWithEthereum.tsx b/src/pages/SignWithEthereum.tsx
index e3b6c11..1187d44 100644
--- a/src/pages/SignWithEthereum.tsx
+++ b/src/pages/SignWithEthereum.tsx
@@ -14,6 +14,7 @@ import {
   Box,
   Typography,
 } from "@mui/material";
+import LoadingButton from '@mui/lab/LoadingButton';
 import { utf8ToHex } from "@walletconnect/encoding";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
@@ -35,6 +36,7 @@ const SignWithEthereum = () => {
   const [cosmosAddress, setCosmosAddress] = useState("");
 
   const [openModal, setOpenModal] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const message = useMemo(() => {
     return {
@@ -46,6 +48,7 @@ const SignWithEthereum = () => {
   const signEth = async () => {
     if (session && signClient) {
       try {
+        setIsLoading(true)
         const jsonMessage = canonicalStringify(message);
         const hexMsg = utf8ToHex(jsonMessage, true);
         const ethSignature: string = await signClient!.request({
@@ -56,10 +59,12 @@ const SignWithEthereum = () => {
             params: [hexMsg, ethAddress],
           },
         });
+        setIsLoading(false)
         setEthSignature(ethSignature);
         setOpenModal(true);
       } catch (error) {
         console.log("err in signing ", error);
+        setIsLoading(false)
         setOpenModal(false);
         enqueueSnackbar("Error signing message", { variant: "error" });
       }
@@ -90,7 +95,6 @@ const SignWithEthereum = () => {
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={cosmosAddress}
-            label="Cosmos address"
             onChange={(e: any) => {
               setCosmosAddress(e.target.value);
             }}
@@ -107,7 +111,6 @@ const SignWithEthereum = () => {
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={ethAddress}
-            label="Ethereum address"
             onChange={(e: any) => {
               setEthAddress(e.target.value);
             }}
@@ -127,17 +130,18 @@ const SignWithEthereum = () => {
               wordWrap: "break-word",
             }}
           >
-            <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>{JSON.stringify(message, null, 2)} </pre>
+            <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>{canonicalStringify(message, null, 2)} </pre>
           </Box>)}
           <Box>
-            <Button
+            <LoadingButton
               variant="contained"
               onClick={signEth}
               disabled={!Boolean(ethAddress)}
               style={{ marginTop: "20px" }}
+              loading={isLoading}
             >
-              Sign using Ethereum key
-            </Button>
+               Sign using Ethereum key
+            </LoadingButton>
           </Box>
           <Dialog
             open={openModal}
diff --git a/yarn.lock b/yarn.lock
index c405ab9..34e33fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1894,6 +1894,19 @@
   dependencies:
     "@babel/runtime" "^7.23.9"
 
+"@mui/lab@^5.0.0-alpha.169":
+  version "5.0.0-alpha.169"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.169.tgz#85b88b2f06ad78c586cde2b47970653e5fd895eb"
+  integrity sha512-h6xe1K6ISKUbyxTDgdvql4qoDP6+q8ad5fg9nXQxGLUrIeT2jVrBuT/jRECSTufbnhzP+V5kulvYxaMfM8rEdA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/base" "5.0.0-beta.40"
+    "@mui/system" "^5.15.14"
+    "@mui/types" "^7.2.14"
+    "@mui/utils" "^5.15.14"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/material@^5.15.14":
   version "5.15.14"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.14.tgz#a40bd5eccfa9fc925535e1f4d70c6cef77fa3a75"