restructure (#345)

* restructure * udpate readme links
2023-12-13 15:36:25 -03:00
parent 599743deb1
commit deb123f283
573 changed files with 578 additions and 578 deletions
@@ -0,0 +1,57 @@
+import { Box, Button, Flex, Heading, Image, position } from "@chakra-ui/react";
+
+const DefaultView: React.FC<{
+  onClick: () => void;
+  hasInitialized: boolean;
+}> = ({ onClick, hasInitialized }) => {
+  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"
+          disabled={!hasInitialized}
+        >
+          <Flex gap="1em">
+            <Image src="/wc.png" fit="scale-down" alt="WC" />
+            <span style={{ color: "white" }}>
+              {hasInitialized ? "WalletConnect" : "Initializing..."}
+            </span>
+          </Flex>
+        </Button>
+      </Flex>
+    </Box>
+  );
+};
+
+export default DefaultView;
@@ -0,0 +1,116 @@
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Grid,
+  Image,
+  Spinner,
+  Text,
+} from "@chakra-ui/react";
+import truncate from "smart-truncate";
+import { providers } from "ethers";
+
+import { useCallback, useEffect, useState } from "react";
+
+const SignedInView: React.FC<{ address: string }> = ({ address }) => {
+  const [balance, setBalance] = useState<string>();
+  const [avatar, setAvatar] = useState<string | null>();
+  const [isLoading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const innerEffect = async (address: string) => {
+      setLoading(true);
+      const provider = new providers.JsonRpcProvider(
+        `https://rpc.walletconnect.com/v1/?chainId=eip155:1&projectId=${process.env.NEXT_PUBLIC_PROJECT_ID}`
+      );
+      const avatar = await provider.getAvatar(address);
+      const bigNumBalance = await provider.getBalance(address);
+      setAvatar(avatar);
+      setBalance(bigNumBalance.toString());
+      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;