UI Improvements (#9)
* Add loading spinners for buttons * Add navigation to home page * Add logo inside anchor tag
This commit is contained in:
neerajvijay1997
GitHub
parent
401ca279bf
commit
3adcdfa39c
@ -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",
|
||||
|
||||
@ -109,7 +109,7 @@ export const WalletConnectProvider = ({
|
||||
eip155: {
|
||||
methods: ["personal_sign"],
|
||||
chains: ["eip155:1"],
|
||||
events: ["connect", "disconnect"],
|
||||
events: [],
|
||||
},
|
||||
cosmos: {
|
||||
methods: ["cosmos_signDirect", "cosmos_signAmino"],
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
13
yarn.lock
13
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user