UI Improvements (#9)

* Add loading spinners for buttons

* Add navigation to home page

* Add logo inside anchor tag

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",

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"],

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,6 +25,8 @@ const SignPageLayout = () => {
   return (
     <>
       <Toolbar variant="dense">
+        <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"
@@ -36,6 +39,8 @@ const SignPageLayout = () => {
             >
             Urbit
             </IconButton>
+          </Box>
+        </Link>
 
         <Button
           variant="outlined"

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}

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>
+            </LoadingButton>
           </Box>
           <Dialog
             open={openModal}

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"