Feature/recreate frontend

bridge-frontend/package.json

@@ -5,6 +5,7 @@
     "homepage": ".",
     "dependencies": {
         "@cartesi/rollups": "1.0.0",
+        "@chakra-ui/icons": "^2.1.1",
         "@chakra-ui/react": "^2.8.2",
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",

bridge-frontend/src/App.tsx

@@ -12,24 +12,42 @@
 
 import { FC } from "react";
 import injectedModule from "@web3-onboard/injected-wallets";
-import { init } from "@web3-onboard/react";
+import { init, useConnectWallet } from "@web3-onboard/react";
 import { useState } from "react";
 
 import { GraphQLProvider } from "./GraphQL";
 import { Transfers } from "./Transfers";
 import { Network } from "./Network";
 import configFile from "./config.json";
 import "./App.css";
-import {Input, Box, InputGroup, InputLeftAddon, Stack, SimpleGrid} from "@chakra-ui/react"
+import {
+    Input,
+    Box,
+    InputGroup,
+    InputLeftAddon,
+    Stack,
+    SimpleGrid,
+    useColorMode,
+    Button,
+    Heading,
+    Text,
+    Image,
+    extendTheme,
+} from "@chakra-ui/react";
 import banner from "./banner.png";
-
+import Header from "./Header";
 
 const config: any = configFile;
 
 const injected: any = injectedModule();
 init({
     wallets: [injected],
-    chains: Object.entries(config).map(([k, v]: [string, any], i) => ({id: k, token: v.token, label: v.label, rpcUrl: v.rpcUrl})),
+    chains: Object.entries(config).map(([k, v]: [string, any], i) => ({
+        id: k,
+        token: v.token,
+        label: v.label,
+        rpcUrl: v.rpcUrl,
+    })),
     appMetadata: {
         name: "Cartesi Rollups Test DApp",
         icon: "<svg><svg/>",
@@ -43,37 +61,36 @@ init({
 const App: FC = () => {
     const [dappAddress, setDappAddress] = useState<string>("0x47432A4070539BeF308B24a7AAE2940b801d0681");
 
-    return (
-        <SimpleGrid columns={1} marginLeft={'25%'} marginRight={'25%'}>  
-        <img src={banner} alt="Banner" />
-        <Network />
-        <GraphQLProvider>
-            <Stack>
-                <Box alignItems='baseline' marginLeft='2' mt='0'>
-
-                <InputGroup size='xs'>
-                <InputLeftAddon>
-                    Dapp Address
-                </InputLeftAddon> 
-                <Input 
-                    width='auto'
-                    size='xs'
-                    className="address-textbox"
-                    type="text"
-                    value={dappAddress}
-                    onChange={(e) => setDappAddress(e.target.value)}
-                />
-                </ InputGroup >
-                <br /><br />
-                </Box>
-            </Stack>
+    const [{ wallet, connecting }, connect] = useConnectWallet();
 
-                <br />
-                    <br /> <br />
+    return (
+        <>
+            <Header dappAddress={dappAddress} setDappAddress={setDappAddress} />
+            <SimpleGrid columns={1} marginX={"30%"} alignContent={"center"}>
+                {!wallet && (
+                    <Box mt="28px" alignContent="center">
+                        <Stack>
+                            <Heading>CarteZcash Bridge</Heading>
+                            <Text>
+                                Connect a wallet to deposit or withdraw Eth from
+                                the rollup
+                            </Text>
+                            <Image src={banner} alt="Banner" />
+                            <Button
+                                onClick={() => connect()}
+                                marginY={"100px"}
+                                disabled={connecting}
+                            >
+                                {connecting ? "Connecting" : "Connect"}
+                            </Button>
+                        </Stack>
+                    </Box>
+                )}
+                <GraphQLProvider>
                     <Transfers dappAddress={dappAddress} />
-                    <br /> <br />
-            </GraphQLProvider>
-        </SimpleGrid>
+                </GraphQLProvider>
+            </SimpleGrid>
+        </>
     );
 };
 

bridge-frontend/src/GraphQL.tsx

@@ -26,10 +26,12 @@ const useGraphQL = () => {
         }
         let url = "";
 
-        if(config[connectedChain.id]?.graphqlAPIURL) {
+        if (config[connectedChain.id]?.graphqlAPIURL) {
             url = `${config[connectedChain.id].graphqlAPIURL}/graphql`;
         } else {
-            console.error(`No GraphQL interface defined for chain ${connectedChain.id}`);
+            console.error(
+                `No GraphQL interface defined for chain ${connectedChain.id}`
+            );
             return null;
         }
 
@@ -46,7 +48,6 @@ export const GraphQLProvider: any = (props: any) => {
     if (!client) {
         return <div />;
     }
-    
+
     return <Provider value={client}>{props.children}</Provider>;
 };
-

bridge-frontend/src/Header.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import {
+    Box,
+    Flex,
+    Text,
+    IconButton,
+    Button,
+    useColorModeValue,
+    useDisclosure,
+    useColorMode,
+    Select,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    Input,
+    FormLabel,
+    FormControl,
+} from "@chakra-ui/react";
+import { ChevronDownIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
+import { useConnectWallet, useSetChain } from "@web3-onboard/react";
+import configFile from "./config.json";
+
+const config: any = configFile;
+
+export default function Header(props: any) {
+    const { colorMode, toggleColorMode } = useColorMode();
+
+    const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();
+    const [{ chains, connectedChain, settingChain }, setChain] = useSetChain();
+
+    return (
+        <Box>
+            <Flex
+                minH={"60px"}
+                py={{ base: 2 }}
+                px={{ base: 4 }}
+                borderBottom={0.8}
+                borderStyle={"solid"}
+                borderColor={useColorModeValue("gray.200", "gray.900")}
+                align={"center"}
+            >
+                <Flex
+                    flex={{ base: wallet ? undefined : 1 }}
+                    justify={{ base: "center", md: "start" }}
+                >
+                    <Text fontSize="l" fontWeight="bold" marginRight={"0px"}>
+                        CarteZcash Bridge
+                    </Text>
+                </Flex>
+                {wallet && (
+                    <Flex
+                        flex={{ base: 1 }}
+                        justify={{ base: "center", md: "start" }}
+                        marginX={"40px"}
+                    >
+                        <FormControl
+                            variant="floating"
+                            id="dapp-address"
+                            isRequired={props.dappAddress === ""}
+                            isInvalid={
+                                !/^0x[a-fA-F0-9]{40}$/.test(props.dappAddress)
+                            }
+                        >
+                            <Input
+                                value={props.dappAddress}
+                                placeholder={" "}
+                                width={"auto"}
+                                onChange={(e) => {
+                                    props.setDappAddress(e.target.value);
+                                }}
+                                required
+                            />
+                            <FormLabel>Dapp Address</FormLabel>
+                        </FormControl>
+                    </Flex>
+                )}
+                <IconButton
+                    icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
+                    onClick={toggleColorMode}
+                    aria-label={"Toggle Color Mode"}
+                />
+
+                {wallet ? (
+                    <>
+                        <Select
+                            width={""}
+                            onChange={({ target: { value } }) => {
+                                if (config[value] !== undefined) {
+                                    setChain({ chainId: value });
+                                } else {
+                                    alert("No deploy on this chain");
+                                }
+                            }}
+                            value={connectedChain?.id}
+                        >
+                            {chains.map(({ id, label }) => {
+                                return (
+                                    <option key={id} value={id}>
+                                        {label}
+                                    </option>
+                                );
+                            })}
+                        </Select>
+                        <Menu closeOnBlur closeOnSelect>
+                            <MenuButton
+                                as={Button}
+                                rightIcon={<ChevronDownIcon />}
+                            >
+                                {wallet.accounts[0].address.slice(0, 6)}...
+                                {wallet.accounts[0].address.slice(-4)}
+                            </MenuButton>
+                            <MenuList>
+                                <MenuItem
+                                    onClick={() => {
+                                        disconnect(wallet);
+                                    }}
+                                    maxWidth={"205px"}
+                                >
+                                    Disconnect
+                                </MenuItem>
+                            </MenuList>
+                        </Menu>
+                    </>
+                ) : (
+                    <Button onClick={() => connect()}>Connect Wallet</Button>
+                )}
+            </Flex>
+        </Box>
+    );
+}