Reskin the dapp to match the new design (#55)
* Reskin the dapp to match the new design * Update theme for button * Update auth package * Add transition for smoother darklight mode * Update styling to be more responsive * Match to design * Remove empty whitespace
This commit is contained in:
Celine Sarafa
@@ -0,0 +1,51 @@
|
||||
import { Box, Button, Flex, Heading, Image, position } from "@chakra-ui/react";
|
||||
|
||||
const DefaultView: React.FC<{ onClick: () => void }> = ({ onClick }) => {
|
||||
return (
|
||||
<Box>
|
||||
<Box position={{ position: "relative" }}>
|
||||
<Flex
|
||||
style={{ position: "relative", top: "1.5em" }}
|
||||
justifyContent="center"
|
||||
>
|
||||
<Flex
|
||||
style={{ position: "absolute", top: "5%" }}
|
||||
justifyContent="center"
|
||||
>
|
||||
<Image
|
||||
style={{ filter: "blur(10px)" }}
|
||||
src="/auth.png"
|
||||
alt="auth"
|
||||
/>
|
||||
</Flex>
|
||||
<Image style={{ filter: "blur(1px)" }} src="/auth.png" alt="auth" />
|
||||
</Flex>
|
||||
</Box>
|
||||
<Flex
|
||||
flexDir={"column"}
|
||||
gap="5"
|
||||
padding="2em 3em"
|
||||
borderRadius={"24px"}
|
||||
className="bg-secondary"
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Heading>Sign in</Heading>
|
||||
<Button
|
||||
minW="80%"
|
||||
paddingY="1.25em"
|
||||
fontSize={"1.25em"}
|
||||
onClick={onClick}
|
||||
borderRadius={"16px"}
|
||||
background="#3396FF"
|
||||
>
|
||||
<Flex gap="1em">
|
||||
<Image src="/wc.png" fit="scale-down" alt="WC" />
|
||||
<span style={{ color: "white" }}>WalletConnect</span>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default DefaultView;
|
||||
@@ -0,0 +1,83 @@
|
||||
import {
|
||||
Text,
|
||||
Box,
|
||||
Divider,
|
||||
Flex,
|
||||
Heading,
|
||||
useToast,
|
||||
Button,
|
||||
Grid,
|
||||
Image,
|
||||
} from "@chakra-ui/react";
|
||||
import Qrcode from "qrcode";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
const QrView: React.FC<{ uri: string }> = ({ uri }) => {
|
||||
const canvasRef = useRef(null);
|
||||
const toast = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
if (uri && canvasRef.current) Qrcode.toCanvas(canvasRef.current, uri);
|
||||
}, [uri, canvasRef]);
|
||||
|
||||
const onClick = async () => {
|
||||
await navigator.clipboard.writeText(uri);
|
||||
toast({
|
||||
title: "Copied URI",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Box width="100%" height="100%" padding="1em">
|
||||
<Flex
|
||||
className="bg-secondary"
|
||||
alignItems="center"
|
||||
borderRadius="24px"
|
||||
flexDir="column"
|
||||
>
|
||||
<Grid
|
||||
padding="2em"
|
||||
borderTopRadius="24px"
|
||||
placeItems="center"
|
||||
className="bg-qr"
|
||||
borderBottom="solid 1px white"
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
<canvas
|
||||
onClick={onClick}
|
||||
ref={canvasRef}
|
||||
height="20%"
|
||||
width="20%"
|
||||
style={{
|
||||
borderRadius: "24px",
|
||||
minWidth: "20%",
|
||||
minHeight: "20%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Flex gap="3" flexDir="column" alignItems="center" padding="2em">
|
||||
<Flex gap="1em">
|
||||
<Image src="/scan.svg" alt="scan" />
|
||||
<Text fontWeight={800} textAlign="center" fontSize="1.5em">
|
||||
Scan with your phone
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Text fontWeight={600} textAlign="center">
|
||||
Open your camera app or mobile wallet and scan the code to connect
|
||||
</Text>
|
||||
<Button onClick={onClick} borderRadius="20px" className="wc-button">
|
||||
<Flex gap="1em">
|
||||
<Image src="/copy.svg" alt="scan" />
|
||||
<Text>Copy to clipboard</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default QrView;
|
||||
@@ -0,0 +1,113 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Flex,
|
||||
Grid,
|
||||
Image,
|
||||
Spinner,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import truncate from "smart-truncate";
|
||||
import { BigNumber, providers } from "ethers";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
const SignedInView: React.FC<{ address: string }> = ({ address }) => {
|
||||
const [balance, setBalance] = useState<number>();
|
||||
const [avatar, setAvatar] = useState<string | null>();
|
||||
const [isLoading, setLoading] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const innerEffect = async (address: string) => {
|
||||
setLoading(true);
|
||||
const provider = providers.getDefaultProvider();
|
||||
const avatar = await provider.getAvatar(address);
|
||||
const balance = await provider.getBalance(address);
|
||||
setAvatar(avatar);
|
||||
setBalance(balance.toNumber());
|
||||
setLoading(false);
|
||||
};
|
||||
if (address) {
|
||||
innerEffect(address);
|
||||
}
|
||||
}, [setBalance, address]);
|
||||
|
||||
const onSignOut = useCallback(() => {
|
||||
window.location.reload();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box className="bg-secondary" borderRadius={"24px"} padding="2em">
|
||||
<Flex flexDir={"column"} gap="5">
|
||||
<Flex justifyContent="space-between" gap="10">
|
||||
<Grid
|
||||
borderRadius={"100%"}
|
||||
width="6em"
|
||||
height="6em"
|
||||
className="bg-qr"
|
||||
border="solid 1px #585F5F"
|
||||
placeItems="center"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
avatar && <Image src={avatar} alt="avatar" />
|
||||
)}
|
||||
</Grid>
|
||||
<Flex
|
||||
padding="0.5em"
|
||||
border="solid 1px #585F5F"
|
||||
borderRadius={"16px"}
|
||||
height={"min-content"}
|
||||
className="bg-qr"
|
||||
alignItems="center"
|
||||
gap="0.5em"
|
||||
>
|
||||
<Box
|
||||
width="0.75em"
|
||||
height="0.75em"
|
||||
backgroundColor="#2BEE6C"
|
||||
borderRadius={"100%"}
|
||||
style={{ filter: "blur(1px)" }}
|
||||
/>
|
||||
<span>Connected</span>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<Text fontWeight="800" fontSize={"1.5em"}>
|
||||
{truncate(address, 12, { position: 7 })}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Divider />
|
||||
<Flex
|
||||
justifyContent="space-between"
|
||||
fontSize={"1.5em"}
|
||||
alignItems="center"
|
||||
>
|
||||
<Text>Balance</Text>
|
||||
{isLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Flex alignItems="center" gap="2">
|
||||
<Image src="/eth.png" alt="ETH" width="1.5em" height="1.5em" />
|
||||
<Text>{balance} ETH</Text>
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
<Flex width={"100%"} justifyContent="center">
|
||||
<Button
|
||||
width={"100%"}
|
||||
className="wc-button"
|
||||
padding={"1.5em"}
|
||||
borderRadius={"16px"}
|
||||
onClick={onSignOut}
|
||||
>
|
||||
Sign Out
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignedInView;
|
||||
Reference in New Issue
Block a user