add bridge component
This component provides a UI for the ethereum and avalanche sides of the transaction.
This commit is contained in:
parent
f3708dc308
commit
b729834de4
|
@ -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;
|
||||||
|
};
|
|
@ -0,0 +1 @@
|
||||||
|
export const SNT_ADDRESS = '0x86e5C5c884740894644dAD30021aAaAdE2B7bAbd';
|
|
@ -12,6 +12,7 @@
|
||||||
"@types/react-dom": "^16.9.0",
|
"@types/react-dom": "^16.9.0",
|
||||||
"ethers": "^5.0.17",
|
"ethers": "^5.0.17",
|
||||||
"react": "^16.14.0",
|
"react": "^16.14.0",
|
||||||
|
"react-app-rewired": "^2.1.8",
|
||||||
"react-dom": "^16.14.0",
|
"react-dom": "^16.14.0",
|
||||||
"react-scripts": "3.4.3",
|
"react-scripts": "3.4.3",
|
||||||
"typescript": "^3.9.7",
|
"typescript": "^3.9.7",
|
||||||
|
|
|
@ -3,6 +3,7 @@ import logo from './logo.svg';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import { Symfoni } from "./hardhat/SymfoniContext";
|
import { Symfoni } from "./hardhat/SymfoniContext";
|
||||||
import { Greeter } from './components/Greeter';
|
import { Greeter } from './components/Greeter';
|
||||||
|
import { Bridge } from './components/Bridge'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
|
@ -10,19 +11,7 @@ function App() {
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<header className="App-header">
|
<header className="App-header">
|
||||||
<Symfoni autoInit={true} >
|
<Symfoni autoInit={true} >
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
<Bridge></Bridge>
|
||||||
<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>
|
|
||||||
</Symfoni>
|
</Symfoni>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue