Merge pull request #31 from willemolding/willem/better-ui-inputs

Willem/better UI inputs
willemolding · May 9, 2024 · d7c7e12 · d7c7e12
2 parents 8e6a772 + b8c9c5e
commit d7c7e12
Show file tree

Hide file tree

Showing 9 changed files with 424 additions and 297 deletions.
diff --git a/bridge-frontend/.yarn/install-state.gz b/bridge-frontend/.yarn/install-state.gz
diff --git a/bridge-frontend/package.json b/bridge-frontend/package.json
@@ -21,6 +21,7 @@
         "@web3-onboard/core": "^2.2.6",
         "@web3-onboard/injected-wallets": "^2.0.5",
         "@web3-onboard/react": "^2.1.5",
+        "bs58": "^5.0.0",
         "buffer": "^6.0.3",
         "cacheable-request": "^10.2.7",
         "ethers": "5.7.2",

diff --git a/bridge-frontend/src/App.tsx b/bridge-frontend/src/App.tsx
@@ -10,23 +10,23 @@
 // License for the specific language governing permissions and limitations
 // under the License.
 
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import injectedModule from "@web3-onboard/injected-wallets";
-import { init, useConnectWallet } from "@web3-onboard/react";
+import { init, useConnectWallet, useSetChain } from "@web3-onboard/react";
 import { useState } from "react";
 
 import { GraphQLProvider } from "./GraphQL";
 import { Transfers } from "./Transfers";
 import configFile from "./config.json";
 import "./App.css";
 import {
-    Box,
-    Stack,
-    SimpleGrid,
-    Button,
-    Heading,
-    Text,
-    Image,
+  Box,
+  Stack,
+  SimpleGrid,
+  Button,
+  Heading,
+  Text,
+  Image,
 } from "@chakra-ui/react";
 import banner from "./banner.png";
 import Header from "./Header";
@@ -35,57 +35,63 @@ 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,
-    })),
-    appMetadata: {
-        name: "Cartesi Rollups Test DApp",
-        icon: "<svg><svg/>",
-        description: "Demo app for Cartesi Rollups",
-        recommendedInjectedWallets: [
-            { name: "MetaMask", url: "https://metamask.io" },
-        ],
-    },
+  wallets: [injected],
+  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/>",
+    description: "Demo app for Cartesi Rollups",
+    recommendedInjectedWallets: [
+      { name: "MetaMask", url: "https://metamask.io" },
+    ],
+  },
 });
 
 const App: FC = () => {
-    const [dappAddress, setDappAddress] = useState<string>("0x47432A4070539BeF308B24a7AAE2940b801d0681");
+  const [{ connectedChain }] = useSetChain();
+  const [dappAddress, setDappAddress] = useState<string>("unknown");
 
-    const [{ wallet, connecting }, connect] = useConnectWallet();
+  const [{ wallet, connecting }, connect] = useConnectWallet();
 
-    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} />
-                </GraphQLProvider>
-            </SimpleGrid>
-        </>
-    );
+  useEffect(() => {
+    if (connectedChain) {
+      setDappAddress(config[connectedChain.id].DAppAddress);
+    }
+  }, [connectedChain]);
+
+  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} />
+        </GraphQLProvider>
+      </SimpleGrid>
+    </>
+  );
 };
 
 export default App;