add bridge component

This component provides a UI for the ethereum and avalanche
sides of the transaction.

frontend/config-overrides.js

@@ -0,0 +1,7 @@
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+
+module.exports = function override(config, env) {
+  config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
+
+  return config;
+};

frontend/constants/goerliAddress.ts

@@ -0,0 +1 @@
+export const SNT_ADDRESS = '0x86e5C5c884740894644dAD30021aAaAdE2B7bAbd';

frontend/package.json

@@ -12,13 +12,14 @@
     "@types/react-dom": "^16.9.0",
     "ethers": "^5.0.17",
     "react": "^16.14.0",
+    "react-app-rewired": "^2.1.8",
     "react-dom": "^16.14.0",
     "react-scripts": "3.4.3",
     "typescript": "^3.9.7",
     "web3modal": "^1.9.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+      "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import logo from './logo.svg';
 import './App.css';
 import { Symfoni } from "./hardhat/SymfoniContext";
 import { Greeter } from './components/Greeter';
+import { Bridge } from './components/Bridge'
 
 function App() {
 
@@ -10,19 +11,7 @@ function App() {
     <div className="App">
       <header className="App-header">
         <Symfoni autoInit={true} >
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-        </a>
-          <Greeter></Greeter>
+          <Bridge></Bridge>
         </Symfoni>
       </header>
     </div>

frontend/src/components/Bridge.tsx

@@ -0,0 +1,65 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { BridgeContext, SymfoniBridge } from "./../hardhat/SymfoniContext";
+import { Wallet, providers, Contract, VoidSigner } from "ethers";
+import { Bridge as IBridge } from "../types/Bridge"
+import { SNT_ETHEREUM } from "../constants/goerliAddress";
+
+const wallet = Wallet.createRandom();
+
+interface Props { }
+const FUJI_BRIDGE = '0xE57Eb49689bCAE4dE61D326F7E79Bd14aB527f0f';
+const GOERLI_BRIDGE = '0xD0E461b1Dc56503fC72565FA964C28E274146D44';
+const fujiProvider = new providers.JsonRpcProvider("https://api.avax-test.network/ext/bc/C/rpc");
+const goerliProvider = new providers.InfuraProvider("goerli");
+const fujiSigner = new Wallet(wallet.privateKey, fujiProvider);
+const fujiVoidSigner = new VoidSigner(wallet.address, fujiProvider);
+const goerliVoidsigner = new VoidSigner(wallet.address, goerliProvider);
+
+
+export const Bridge: React.FC<Props> = () => {
+  const bridge: SymfoniBridge = useContext(BridgeContext);
+  /* fujiBridge.factory?.connect(fujiSigner);
+   * fujiBridge.factory?.attach(FUJI_BRIDGE); */
+  const [message, setMessage] = useState("");
+  const [inputGreeting, setInputGreeting] = useState("");
+  const [goerliBridge, setGoerliBridge] = useState<IBridge>();
+  const [fujiBridge, setFujiBridge] = useState<IBridge>();
+  useEffect(() => {
+    const doAsync = async () => {
+      if (!bridge.instance) return
+      console.log("Bridge is deployed at ", bridge.instance.address)
+      let gBridge = new Contract(
+        GOERLI_BRIDGE,
+        bridge.instance.interface,
+        goerliVoidsigner
+      ) as IBridge;
+      setGoerliBridge(gBridge);
+      let fBridge = new Contract(
+        FUJI_BRIDGE,
+        bridge.instance.interface,
+        fujiVoidSigner
+      ) as IBridge;
+      setFujiBridge(fBridge);
+    };
+    doAsync();
+  }, [bridge])
+
+  const handleSetGreeting = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault()
+    if (!bridge.instance) throw Error("Bridge instance not ready")
+    if (bridge.instance) {
+      //const tx = await bridge.instance.setGreeting(inputGreeting)
+      const tx = await bridge.instance._expiry();
+      //const fuji = await fujiBridge.instance?._expiry();
+      const goerli = await goerliBridge?._expiry();
+      console.log("expiry", {tx, goerli}, goerliBridge?.address);
+    }
+  }
+  return (
+    <div>
+      <p>{message}</p>
+      <input onChange={(e) => setInputGreeting(e.target.value)}></input>
+      <button onClick={(e) => handleSetGreeting(e)}>Set greeting</button>
+    </div>
+  )
+}