109 | {display}
110 | {modalButtons}
111 |
112 | );
113 | }
114 |
--------------------------------------------------------------------------------
/src/components/Address.jsx:
--------------------------------------------------------------------------------
1 | import { Skeleton, Typography } from "antd";
2 | import React from "react";
3 | import Blockies from "react-blockies";
4 | import { useThemeSwitcher } from "react-css-theme-switcher";
5 | import { useLookupAddress } from "eth-hooks/dapps/ens";
6 |
7 | // changed value={address} to address={address}
8 |
9 | /*
10 | ~ What it does? ~
11 |
12 | Displays an address with a blockie image and option to copy address
13 |
14 | ~ How can I use? ~
15 |
16 |
22 |
23 | ~ Features ~
24 |
25 | - Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
26 | (ex. "0xa870" => "user.eth")
27 | - Provide blockExplorer={blockExplorer}, click on address and get the link
28 | (ex. by default "https://etherscan.io/" or for xdai "https://blockscout.com/poa/xdai/")
29 | - Provide fontSize={fontSize} to change the size of address text
30 | */
31 |
32 | const { Text } = Typography;
33 |
34 | const blockExplorerLink = (address, blockExplorer) =>
35 | `${blockExplorer || "https://etherscan.io/"}${"address/"}${address}`;
36 |
37 | export default function Address(props) {
38 | const address = props.value || props.address;
39 |
40 | const ens = useLookupAddress(props.ensProvider, address);
41 |
42 | const { currentTheme } = useThemeSwitcher();
43 |
44 | if (!address) {
45 | return (
46 |
47 | {
46 | setScan(!scan);
47 | }}
48 | >
49 |
54 | );
55 |
56 | const { ensProvider, onChange } = props;
57 | const updateAddress = useCallback(
58 | async newValue => {
59 | if (typeof newValue !== "undefined") {
60 | let address = newValue;
61 | if (address.indexOf(".eth") > 0 || address.indexOf(".xyz") > 0) {
62 | try {
63 | const possibleAddress = await ensProvider.resolveName(address);
64 | if (possibleAddress) {
65 | address = possibleAddress;
66 | }
67 | // eslint-disable-next-line no-empty
68 | } catch (e) {}
69 | }
70 | setValue(address);
71 | if (typeof onChange === "function") {
72 | onChange(address);
73 | }
74 | }
75 | },
76 | [ensProvider, onChange],
77 | );
78 |
79 | const scanner = scan ? (
80 | {
89 | setScan(false);
90 | }}
91 | >
92 | {
96 | console.log("SCAN ERROR", e);
97 | setScan(false);
98 | }}
99 | onScan={newValue => {
100 | if (newValue) {
101 | console.log("SCAN VALUE", newValue);
102 | let possibleNewValue = newValue;
103 | if (possibleNewValue.indexOf("/") >= 0) {
104 | possibleNewValue = possibleNewValue.substr(possibleNewValue.lastIndexOf("0x"));
105 | console.log("CLEANED VALUE", possibleNewValue);
106 | }
107 | setScan(false);
108 | updateAddress(possibleNewValue);
109 | }
110 | }}
111 | style={{ width: "100%" }}
112 | />
113 |
114 | ) : (
115 | ""
116 | );
117 |
118 | return (
119 |
120 | {scanner}
121 | }
128 | value={ens || currentValue}
129 | addonAfter={scannerButton}
130 | onChange={e => {
131 | updateAddress(e.target.value);
132 | }}
133 | />
134 |
135 | );
136 | }
137 |
--------------------------------------------------------------------------------
/src/components/Balance.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useBalance } from "eth-hooks";
3 |
4 | const { utils } = require("ethers");
5 |
6 | /*
7 | ~ What it does? ~
8 |
9 | Displays a balance of given address in ether & dollar
10 |
11 | ~ How can I use? ~
12 |
13 | {
43 | if (mode === "STRING") {
44 | setMode("BYTES32");
45 | if (!utils.isHexString(currentValue)) {
46 | /* in case user enters invalid bytes32 number,
47 | it considers it as string and converts to bytes32 */
48 | const changedValue = utils.formatBytes32String(currentValue);
49 | setDisplay(changedValue);
50 | } else {
51 | setDisplay(currentValue);
52 | }
53 | } else {
54 | setMode("STRING");
55 | if (currentValue && utils.isHexString(currentValue)) {
56 | setDisplay(utils.parseBytes32String(currentValue));
57 | } else {
58 | setDisplay(currentValue);
59 | }
60 | }
61 | }}
62 | >
63 | {title}
64 |
65 | );
66 | };
67 |
68 | let addonAfter;
69 | if (mode === "STRING") {
70 | addonAfter = option("STRING 🔀");
71 | } else {
72 | addonAfter = option("BYTES32 🔀");
73 | }
74 |
75 | useEffect(() => {
76 | if (!currentValue) {
77 | setDisplay("");
78 | }
79 | }, [currentValue]);
80 |
81 | return (
82 | {
88 | const newValue = e.target.value;
89 | if (mode === "STRING") {
90 | // const ethValue = parseFloat(newValue) / props.price;
91 | // setValue(ethValue);
92 | if (typeof props.onChange === "function") {
93 | props.onChange(utils.formatBytes32String(newValue));
94 | }
95 | setValue(utils.formatBytes32String(newValue));
96 | setDisplay(newValue);
97 | } else {
98 | if (typeof props.onChange === "function") {
99 | props.onChange(newValue);
100 | }
101 | setValue(newValue);
102 | setDisplay(newValue);
103 | }
104 | }}
105 | />
106 | );
107 | }
108 |
--------------------------------------------------------------------------------
/src/components/Contract/DisplayVariable.jsx:
--------------------------------------------------------------------------------
1 | import { Col, Divider, Row } from "antd";
2 | import React, { useCallback, useEffect, useState } from "react";
3 | import tryToDisplay from "./utils";
4 |
5 | const DisplayVariable = ({ contractFunction, functionInfo, refreshRequired, triggerRefresh }) => {
6 | const [variable, setVariable] = useState("");
7 |
8 | const refresh = useCallback(async () => {
9 | try {
10 | const funcResponse = await contractFunction();
11 | setVariable(funcResponse);
12 | triggerRefresh(false);
13 | } catch (e) {
14 | console.log(e);
15 | }
16 | }, [setVariable, contractFunction, triggerRefresh]);
17 |
18 | useEffect(() => {
19 | refresh();
20 | }, [refresh, refreshRequired, contractFunction]);
21 |
22 | return (
23 |
24 |
25 |
47 |
49 | );
50 | };
51 |
52 | export default DisplayVariable;
53 |
--------------------------------------------------------------------------------
/src/components/Contract/FunctionForm.jsx:
--------------------------------------------------------------------------------
1 | import { Button, Col, Divider, Input, Row, Tooltip } from "antd";
2 | import React, { useState } from "react";
3 | import Blockies from "react-blockies";
4 | import { Transactor } from "../../helpers";
5 | import tryToDisplay from "./utils";
6 |
7 | const { utils, BigNumber } = require("ethers");
8 |
9 | const getFunctionInputKey = (functionInfo, input, inputIndex) => {
10 | const name = input?.name ? input.name : "input_" + inputIndex + "_";
11 | return functionInfo.name + "_" + name + "_" + input.type;
12 | };
13 |
14 | export default function FunctionForm({ contractFunction, functionInfo, provider, gasPrice, triggerRefresh }) {
15 | const [form, setForm] = useState({});
16 | const [txValue, setTxValue] = useState();
17 | const [returnValue, setReturnValue] = useState();
18 |
19 | const tx = Transactor(provider, gasPrice);
20 |
21 | const inputs = functionInfo.inputs.map((input, inputIndex) => {
22 | const key = getFunctionInputKey(functionInfo, input, inputIndex);
23 |
24 | let buttons = "";
25 | if (input.type === "bytes32") {
26 | buttons = (
27 | {tryToDisplay(variable)}
38 | 39 |41 | 42 | 🔄 43 | 44 |
45 | 46 | {
32 | if (utils.isHexString(form[key])) {
33 | const formUpdate = { ...form };
34 | formUpdate[key] = utils.parseBytes32String(form[key]);
35 | setForm(formUpdate);
36 | } else {
37 | const formUpdate = { ...form };
38 | formUpdate[key] = utils.formatBytes32String(form[key]);
39 | setForm(formUpdate);
40 | }
41 | }}
42 | >
43 | #️⃣
44 |
45 | {
54 | if (utils.isHexString(form[key])) {
55 | const formUpdate = { ...form };
56 | formUpdate[key] = utils.toUtf8String(form[key]);
57 | setForm(formUpdate);
58 | } else {
59 | const formUpdate = { ...form };
60 | formUpdate[key] = utils.hexlify(utils.toUtf8Bytes(form[key]));
61 | setForm(formUpdate);
62 | }
63 | }}
64 | >
65 | #️⃣
66 |
67 | {
76 | const formUpdate = { ...form };
77 | formUpdate[key] = utils.parseEther(form[key]);
78 | setForm(formUpdate);
79 | }}
80 | >
81 | ✴️
82 |
83 |
98 | {
105 | const formUpdate = { ...form };
106 | formUpdate[event.target.name] = event.target.value;
107 | setForm(formUpdate);
108 | }}
109 | suffix={buttons}
110 | />
111 |
112 | );
113 | });
114 |
115 | const txValueInput = (
116 |
117 | setTxValue(e.target.value)}
120 | value={txValue}
121 | addonAfter={
122 |
156 | );
157 |
158 | if (functionInfo.payable) {
159 | inputs.push(txValueInput);
160 | }
161 |
162 | const buttonIcon =
163 | functionInfo.type === "call" ? (
164 |
165 | ) : (
166 |
167 | );
168 | inputs.push(
169 |
123 |
124 |
126 |
137 |
138 |
140 |
150 |
151 |
152 |
153 | }
154 | />
155 | {
130 | const floatValue = parseFloat(txValue);
131 | if (floatValue) setTxValue("" + floatValue * 10 ** 18);
132 | }}
133 | >
134 | ✳️
135 |
136 | {
144 | setTxValue(BigNumber.from(txValue).toHexString());
145 | }}
146 | >
147 | #️⃣
148 |
149 |
170 | setReturnValue(e.target.value)}
172 | defaultValue=""
173 | bordered={false}
174 | disabled
175 | value={returnValue}
176 | suffix={
177 |
,
230 | );
231 |
232 | return (
233 | {
181 | const args = functionInfo.inputs.map((input, inputIndex) => {
182 | const key = getFunctionInputKey(functionInfo, input, inputIndex);
183 | let value = form[key];
184 | if (input.baseType === "array") {
185 | value = JSON.parse(value);
186 | } else if (input.type === "bool") {
187 | if (value === "true" || value === "1" || value === "0x1" || value === "0x01" || value === "0x0001") {
188 | value = 1;
189 | } else {
190 | value = 0;
191 | }
192 | }
193 | return value;
194 | });
195 |
196 | let result;
197 | if (functionInfo.stateMutability === "view" || functionInfo.stateMutability === "pure") {
198 | try {
199 | const returned = await contractFunction(...args);
200 | result = tryToDisplay(returned);
201 | } catch (err) {
202 | console.error(err);
203 | }
204 | } else {
205 | const overrides = {};
206 | if (txValue) {
207 | overrides.value = txValue; // ethers.utils.parseEther()
208 | }
209 | if (gasPrice) {
210 | overrides.gasPrice = gasPrice;
211 | }
212 | // Uncomment this if you want to skip the gas estimation for each transaction
213 | // overrides.gasLimit = hexlify(1200000);
214 |
215 | // console.log("Running with extras",extras)
216 | const returned = await tx(contractFunction(...args, overrides));
217 | result = tryToDisplay(returned);
218 | }
219 |
220 | console.log("SETTING RESULT:", result);
221 | setReturnValue(result);
222 | triggerRefresh(true);
223 | }}
224 | >
225 | {buttonIcon}
226 |
227 | }
228 | />
229 |
234 |
235 |
248 |
250 | );
251 | }
252 |
--------------------------------------------------------------------------------
/src/components/Contract/index.jsx:
--------------------------------------------------------------------------------
1 | import { Card } from "antd";
2 | import React, { useMemo, useState } from "react";
3 | import { useContractExistsAtAddress, useContractLoader } from "eth-hooks";
4 | import { useEventListener } from "eth-hooks/events/useEventListener";
5 | import Account from "../Account";
6 | import Address from "../Address";
7 | import DisplayVariable from "./DisplayVariable";
8 | import FunctionForm from "./FunctionForm";
9 | import { useContractEvents } from "../../hooks";
10 |
11 | const noContractDisplay = (
12 |
13 | Loading...{" "}
14 |
45 | );
46 |
47 | const noEventsDisplay =
15 | You need to run{" "}
16 |
20 | yarn run chain
21 | {" "}
22 | and{" "}
23 |
27 | yarn run deploy
28 | {" "}
29 | to see your contract here.
30 |
31 |
32 |
33 | ☢️
34 |
35 | Warning: You might need to run
36 |
40 | yarn run deploy
41 | {" "}
42 | again after the frontend comes up!
43 |
44 | No Events found!!
;
48 |
49 | const isQueryable = fn => (fn.stateMutability === "view" || fn.stateMutability === "pure") && fn.inputs.length === 0;
50 |
51 | export default function Contract({
52 | customContract,
53 | account,
54 | gasPrice,
55 | signer,
56 | provider,
57 | name,
58 | show,
59 | price,
60 | blockExplorer,
61 | chainId,
62 | contractConfig,
63 | }) {
64 | const contracts = useContractLoader(provider, contractConfig, chainId);
65 | let contract;
66 | if (!customContract) {
67 | contract = contracts ? contracts[name] : "";
68 | } else {
69 | contract = customContract;
70 | }
71 |
72 | const address = contract ? contract.address : "";
73 | const contractIsDeployed = useContractExistsAtAddress(provider, address);
74 |
75 | const displayedContractFunctions = useMemo(() => {
76 | const results = contract
77 | ? Object.entries(contract.interface.functions).filter(
78 | fn => fn[1]["type"] === "function" && !(show && show.indexOf(fn[1]["name"]) < 0),
79 | )
80 | : [];
81 | return results;
82 | }, [contract, show]);
83 |
84 | const [refreshRequired, triggerRefresh] = useState(false);
85 | const contractEventsDisplay = useContractEvents(contract, "");
86 |
87 | const contractDisplay = displayedContractFunctions.map(contractFuncInfo => {
88 | const contractFunc =
89 | contractFuncInfo[1].stateMutability === "view" || contractFuncInfo[1].stateMutability === "pure"
90 | ? contract[contractFuncInfo[0]]
91 | : contract.connect(signer)[contractFuncInfo[0]];
92 |
93 | if (typeof contractFunc === "function") {
94 | if (isQueryable(contractFuncInfo[1])) {
95 | // If there are no inputs, just display return value
96 | return (
97 |
124 |
127 | {name}
128 |
140 | }
141 | size="large"
142 | style={{ marginTop: 25, width: "100%" }}
143 | loading={contractDisplay && contractDisplay.length <= 0}
144 | >
145 | {contractIsDeployed ? contractDisplay : noContractDisplay}
146 |
147 |
129 |
139 | {
44 | if (mode === "USD") {
45 | setMode("ETH");
46 | setDisplay(currentValue);
47 | } else {
48 | setMode("USD");
49 | if (currentValue) {
50 | const usdValue = "" + (parseFloat(currentValue) * props.price).toFixed(2);
51 | setDisplay(usdValue);
52 | } else {
53 | setDisplay(currentValue);
54 | }
55 | }
56 | }}
57 | >
58 | {title}
59 |
60 | );
61 | };
62 |
63 | let prefix;
64 | let addonAfter;
65 | if (mode === "USD") {
66 | prefix = "$";
67 | addonAfter = option("USD 🔀");
68 | } else {
69 | prefix = "Ξ";
70 | addonAfter = option("ETH 🔀");
71 | }
72 |
73 | useEffect(() => {
74 | if (!currentValue) {
75 | setDisplay("");
76 | }
77 | }, [currentValue]);
78 |
79 | return (
80 | {
87 | const newValue = e.target.value;
88 | if (mode === "USD") {
89 | const possibleNewValue = parseFloat(newValue);
90 | if (possibleNewValue) {
91 | const ethValue = possibleNewValue / props.price;
92 | setValue(ethValue);
93 | if (typeof props.onChange === "function") {
94 | props.onChange(ethValue);
95 | }
96 | setDisplay(newValue);
97 | } else {
98 | setDisplay(newValue);
99 | }
100 | } else {
101 | setValue(newValue);
102 | if (typeof props.onChange === "function") {
103 | props.onChange(newValue);
104 | }
105 | setDisplay(newValue);
106 | }
107 | }}
108 | />
109 | );
110 | }
111 |
--------------------------------------------------------------------------------
/src/components/Faucet.jsx:
--------------------------------------------------------------------------------
1 | import { SendOutlined } from "@ant-design/icons";
2 | import { Button, Input, Tooltip } from "antd";
3 | // import { useLookupAddress } from "eth-hooks/dapps/ens";
4 | import React, { useCallback, useState, useEffect } from "react";
5 | import Blockies from "react-blockies";
6 | import { Transactor } from "../helpers";
7 | import Wallet from "./Wallet";
8 |
9 | const { utils } = require("ethers");
10 |
11 | // improved a bit by converting address to ens if it exists
12 | // added option to directly input ens name
13 | // added placeholder option
14 |
15 | /*
16 | ~ What it does? ~
17 |
18 | Displays a local faucet to send ETH to given address, also wallet is provided
19 |
20 | ~ How can I use? ~
21 |
22 |
167 |
227 | );
228 | }
229 |
230 | // Arbitrum Inbox https://rinkeby.etherscan.io/address/0xa157dc79ca26d69c3b1282d03ec42bdee2790a8f#code
231 | const ArbitrumInboxABI = [
232 | {
233 | anonymous: false,
234 | inputs: [
235 | { indexed: true, internalType: "uint256", name: "messageNum", type: "uint256" },
236 | { indexed: false, internalType: "bytes", name: "data", type: "bytes" },
237 | ],
238 | name: "InboxMessageDelivered",
239 | type: "event",
240 | },
241 | {
242 | anonymous: false,
243 | inputs: [{ indexed: true, internalType: "uint256", name: "messageNum", type: "uint256" }],
244 | name: "InboxMessageDeliveredFromOrigin",
245 | type: "event",
246 | },
247 | {
248 | anonymous: false,
249 | inputs: [{ indexed: false, internalType: "address", name: "newSource", type: "address" }],
250 | name: "WhitelistSourceUpdated",
251 | type: "event",
252 | },
253 | {
254 | inputs: [],
255 | name: "bridge",
256 | outputs: [{ internalType: "contract IBridge", name: "", type: "address" }],
257 | stateMutability: "view",
258 | type: "function",
259 | },
260 | {
261 | inputs: [
262 | { internalType: "address", name: "destAddr", type: "address" },
263 | { internalType: "uint256", name: "l2CallValue", type: "uint256" },
264 | { internalType: "uint256", name: "maxSubmissionCost", type: "uint256" },
265 | { internalType: "address", name: "excessFeeRefundAddress", type: "address" },
266 | { internalType: "address", name: "callValueRefundAddress", type: "address" },
267 | { internalType: "uint256", name: "maxGas", type: "uint256" },
268 | { internalType: "uint256", name: "gasPriceBid", type: "uint256" },
269 | { internalType: "bytes", name: "data", type: "bytes" },
270 | ],
271 | name: "createRetryableTicket",
272 | outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
273 | stateMutability: "payable",
274 | type: "function",
275 | },
276 | {
277 | inputs: [{ internalType: "uint256", name: "maxSubmissionCost", type: "uint256" }],
278 | name: "depositEth",
279 | outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
280 | stateMutability: "payable",
281 | type: "function",
282 | },
283 | {
284 | inputs: [
285 | { internalType: "contract IBridge", name: "_bridge", type: "address" },
286 | { internalType: "address", name: "_whitelist", type: "address" },
287 | ],
288 | name: "initialize",
289 | outputs: [],
290 | stateMutability: "nonpayable",
291 | type: "function",
292 | },
293 | {
294 | inputs: [],
295 | name: "isMaster",
296 | outputs: [{ internalType: "bool", name: "", type: "bool" }],
297 | stateMutability: "view",
298 | type: "function",
299 | },
300 | {
301 | inputs: [
302 | { internalType: "uint256", name: "maxGas", type: "uint256" },
303 | { internalType: "uint256", name: "gasPriceBid", type: "uint256" },
304 | { internalType: "address", name: "destAddr", type: "address" },
305 | { internalType: "uint256", name: "amount", type: "uint256" },
306 | { internalType: "bytes", name: "data", type: "bytes" },
307 | ],
308 | name: "sendContractTransaction",
309 | outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
310 | stateMutability: "nonpayable",
311 | type: "function",
312 | },
313 | {
314 | inputs: [
315 | { internalType: "uint256", name: "maxGas", type: "uint256" },
316 | { internalType: "uint256", name: "gasPriceBid", type: "uint256" },
317 | { internalType: "address", name: "destAddr", type: "address" },
318 | { internalType: "bytes", name: "data", type: "bytes" },
319 | ],
320 | name: "sendL1FundedContractTransaction",
321 | outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
322 | stateMutability: "payable",
323 | type: "function",
324 | },
325 | {
326 | inputs: [
327 | { internalType: "uint256", name: "maxGas", type: "uint256" },
328 | { internalType: "uint256", name: "gasPriceBid", type: "uint256" },
329 | { internalType: "uint256", name: "nonce", type: "uint256" },
330 | { internalType: "address", name: "destAddr", type: "address" },
331 | { internalType: "bytes", name: "data", type: "bytes" },
332 | ],
333 | name: "sendL1FundedUnsignedTransaction",
334 | outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
335 | stateMutability: "payable",
336 | type: "function",
337 | },
338 | {
339 | inputs: [{ internalType: "bytes", name: "messageData", type: "bytes" }],
340 | name: "sendL2Message",
341 | outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
342 | stateMutability: "nonpayable",
343 | type: "function",
344 | },
345 | {
346 | inputs: [{ internalType: "bytes", name: "messageData", type: "bytes" }],
347 | name: "sendL2MessageFromOrigin",
348 | outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
349 | stateMutability: "nonpayable",
350 | type: "function",
351 | },
352 | {
353 | inputs: [
354 | { internalType: "uint256", name: "maxGas", type: "uint256" },
355 | { internalType: "uint256", name: "gasPriceBid", type: "uint256" },
356 | { internalType: "uint256", name: "nonce", type: "uint256" },
357 | { internalType: "address", name: "destAddr", type: "address" },
358 | { internalType: "uint256", name: "amount", type: "uint256" },
359 | { internalType: "bytes", name: "data", type: "bytes" },
360 | ],
361 | name: "sendUnsignedTransaction",
362 | outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
363 | stateMutability: "nonpayable",
364 | type: "function",
365 | },
366 | {
367 | inputs: [{ internalType: "address", name: "newSource", type: "address" }],
368 | name: "updateWhitelistSource",
369 | outputs: [],
370 | stateMutability: "nonpayable",
371 | type: "function",
372 | },
373 | {
374 | inputs: [],
375 | name: "whitelist",
376 | outputs: [{ internalType: "address", name: "", type: "address" }],
377 | stateMutability: "view",
378 | type: "function",
379 | },
380 | ];
381 |
382 | // https://github.com/ethereum-optimism/optimism/blob/2bd49730fa8d2c10953873f0ccc792198a49d5c9/packages/contracts/contracts/optimistic-ethereum/iOVM/bridge/tokens/iOVM_L1StandardBridge.sol
383 | const OVM_L1StandardBridgeABI = [
384 | "function depositETH(uint32 _l2Gas,bytes calldata _data) external payable",
385 | "function depositETHTo(address _to,uint32 _l2Gas,bytes calldata _data) external payable",
386 | "function finalizeETHWithdrawal (address _from,address _to,uint _amount,bytes calldata _data) external",
387 | ];
388 |
389 | const L1BridgeMetadata = {
390 | // Arbitrium Contract's
391 | 44010: {
392 | contracts: {
393 | Inbox: {
394 | address: "0xA4d796Ad4e79aFB703340a596AEd88f8a5924183",
395 | abi: ArbitrumInboxABI,
396 | },
397 | },
398 | },
399 | 4: {
400 | contracts: {
401 | Inbox: {
402 | address: "0x578bade599406a8fe3d24fd7f7211c0911f5b29e",
403 | abi: ArbitrumInboxABI,
404 | },
405 | },
406 | },
407 | // Optimism Contract's
408 | 31337: {
409 | contracts: {
410 | OVM_L1StandardBridge: {
411 | address: "0x998abeb3E57409262aE5b751f60747921B33613E",
412 | abi: OVM_L1StandardBridgeABI,
413 | },
414 | },
415 | },
416 | 42: {
417 | contracts: {
418 | OVM_L1StandardBridge: {
419 | address: "0x22F24361D548e5FaAfb36d1437839f080363982B",
420 | abi: OVM_L1StandardBridgeABI,
421 | },
422 | },
423 | },
424 | };
425 |
--------------------------------------------------------------------------------
/src/components/NewRpc.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Button } from "antd";
3 |
4 | let counter = 0;
5 |
6 | export default function AddRPC({ chainName, rpcUrl }) {
7 | return (
8 |
168 | {
172 | setRollup(e.target.value);
173 | }}
174 | style={{ marginBottom: 10 }}
175 | >
176 | Arbitrum
177 | Optimism
178 |
179 |
180 |
181 |
182 |
225 |
226 | Welcome to the L2 Deposit Bridge!
169 |
9 |
11 | );
12 | }
13 |
14 | // make exportable //
15 | const AddCustomRPCButton = ({ chainName, rpcUrl }) => {
16 | const handleAddCustomRPC = async () => {
17 | if (!window.ethereum || !window.ethereum.request) {
18 | console.error("MetaMask Ethereum provider is not available");
19 | return;
20 | }
21 |
22 | try {
23 | await window.ethereum.request({
24 | method: "wallet_addEthereumChain",
25 | params: [
26 | {
27 | chainId: "0x1", // Replace with the desired Chain ID
28 | chainName: chainName + " " + counter, // Replace with the desired network name
29 | nativeCurrency: {
30 | name: "ETH",
31 | symbol: "ETH",
32 | decimals: 18,
33 | },
34 | rpcUrls: [rpcUrl.toString()], // Replace with the desired RPC URL
35 | blockExplorerUrls: ["https://etherscan.io"], // Replace with the desired block explorer URL
36 | },
37 | ],
38 | });
39 | console.log("Custom RPC network added to MetaMask");
40 | } catch (error) {
41 | console.error("Failed to add custom RPC network to MetaMask:", error);
42 | }
43 | };
44 |
45 | return (
46 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/components/Provider.jsx:
--------------------------------------------------------------------------------
1 | import { Badge, Button } from "antd";
2 | import { useBlockNumber, usePoller } from "eth-hooks";
3 | import React, { useState } from "react";
4 | // import { WalletOutlined } from '@ant-design/icons';
5 | import Address from "./Address";
6 |
7 | export default function Provider(props) {
8 | const [showMore, setShowMore] = useState(false);
9 | const [status, setStatus] = useState("processing");
10 | const [network, setNetwork] = useState();
11 | const [signer, setSigner] = useState();
12 | const [address, setAddress] = useState();
13 |
14 | const blockNumber = useBlockNumber(props.provider);
15 |
16 | usePoller(async () => {
17 | if (props.provider && typeof props.provider.getNetwork === "function") {
18 | try {
19 | const newNetwork = await props.provider.getNetwork();
20 | setNetwork(newNetwork);
21 | if (newNetwork.chainId > 0) {
22 | setStatus("success");
23 | } else {
24 | setStatus("warning");
25 | }
26 | } catch (e) {
27 | console.log(e);
28 | setStatus("processing");
29 | }
30 | try {
31 | const newSigner = await props.provider.getSigner();
32 | setSigner(newSigner);
33 | const newAddress = await newSigner.getAddress();
34 | setAddress(newAddress);
35 | // eslint-disable-next-line no-empty
36 | } catch (e) {}
37 | }
38 | }, 1377);
39 |
40 | if (
41 | typeof props.provider === "undefined" ||
42 | typeof props.provider.getNetwork !== "function" ||
43 | !network ||
44 | !network.chainId
45 | ) {
46 | return (
47 |
56 | );
57 | }
58 |
59 | let showExtra = "";
60 | if (showMore) {
61 | showExtra = (
62 |
63 |
64 | id:
65 | {network ? network.chainId : ""}
66 |
67 |
68 | name:
69 | {network ? network.name : ""}
70 |
71 |
72 | );
73 | }
74 |
75 | let showWallet = "";
76 | if (typeof signer !== "undefined" && address) {
77 | showWallet = (
78 |
79 |
80 |
81 |
82 |
83 | );
84 | }
85 |
86 | return (
87 |
96 | );
97 | }
98 |
--------------------------------------------------------------------------------
/src/components/Ramp.jsx:
--------------------------------------------------------------------------------
1 | import { DollarCircleOutlined } from "@ant-design/icons";
2 | import { RampInstantSDK } from "@ramp-network/ramp-instant-sdk";
3 | import { Button, Divider, Modal } from "antd";
4 | import React, { useState } from "react";
5 |
6 | // added display of 0 if price={price} is not provided
7 |
8 | /*
9 | ~ What it does? ~
10 |
11 | Displays current ETH price and gives options to buy ETH through Wyre/Ramp/Coinbase
12 | or get through Rinkeby/Ropsten/Kovan/Goerli
13 |
14 | ~ How can I use? ~
15 |
16 | 38 | 49 |
, 50 | ); 51 | } 52 | } 53 | 54 | return ( 55 |
56 |
66 | {
70 | setModalUp("down");
71 | }}
72 | footer={[
73 | ,
81 | ]}
82 | >
83 |
149 |
150 | );
151 | }
152 |
--------------------------------------------------------------------------------
/src/components/Swap.jsx:
--------------------------------------------------------------------------------
1 | import { RetweetOutlined, SettingOutlined } from "@ant-design/icons";
2 | import { ChainId, Fetcher, Percent, Token, TokenAmount, Trade, WETH } from "@uniswap/sdk";
3 | import { abi as IUniswapV2Router02ABI } from "@uniswap/v2-periphery/build/IUniswapV2Router02.json";
4 | import {
5 | Button,
6 | Card,
7 | Descriptions,
8 | Divider,
9 | Drawer,
10 | InputNumber,
11 | Modal,
12 | notification,
13 | Row,
14 | Select,
15 | Space,
16 | Tooltip,
17 | Typography,
18 | } from "antd";
19 | import { useBlockNumber, usePoller } from "eth-hooks";
20 | import { ethers } from "ethers";
21 | import React, { useEffect, useState } from "react";
22 | import { useDebounce } from "../hooks";
23 |
24 | const { Option } = Select;
25 | const { Text } = Typography;
26 |
27 | export const ROUTER_ADDRESS = "0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D";
28 |
29 | export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
30 |
31 | const erc20Abi = [
32 | "function balanceOf(address owner) view returns (uint256)",
33 | "function approve(address _spender, uint256 _value) public returns (bool success)",
34 | "function allowance(address _owner, address _spender) public view returns (uint256 remaining)",
35 | ];
36 |
37 | const makeCall = async (callName, contract, args, metadata = {}) => {
38 | if (contract[callName]) {
39 | let result;
40 | if (args) {
41 | result = await contract[callName](...args, metadata);
42 | } else {
43 | result = await contract[callName]();
44 | }
45 | return result;
46 | }
47 | return undefined;
48 | console.log("no call of that name!");
49 | };
50 |
51 | const defaultToken = "ETH";
52 | const defaultTokenOut = "DAI";
53 | const defaultSlippage = "0.5";
54 | const defaultTimeLimit = 60 * 10;
55 |
56 | const tokenListToObject = array =>
57 | array.reduce((obj, item) => {
58 | obj[item.symbol] = new Token(item.chainId, item.address, item.decimals, item.symbol, item.name);
59 | return obj;
60 | }, {});
61 |
62 | function Swap({ selectedProvider, tokenListURI }) {
63 | const [tokenIn, setTokenIn] = useState(defaultToken);
64 | const [tokenOut, setTokenOut] = useState(defaultTokenOut);
65 | const [exact, setExact] = useState();
66 | const [amountIn, setAmountIn] = useState();
67 | const [amountInMax, setAmountInMax] = useState();
68 | const [amountOut, setAmountOut] = useState();
69 | const [amountOutMin, setAmountOutMin] = useState();
70 | const [trades, setTrades] = useState();
71 | const [routerAllowance, setRouterAllowance] = useState();
72 | const [balanceIn, setBalanceIn] = useState();
73 | const [balanceOut, setBalanceOut] = useState();
74 | const [slippageTolerance, setSlippageTolerance] = useState(
75 | new Percent(Math.round(defaultSlippage * 100).toString(), "10000"),
76 | );
77 | const [timeLimit, setTimeLimit] = useState(defaultTimeLimit);
78 | const [swapping, setSwapping] = useState(false);
79 | const [approving, setApproving] = useState(false);
80 | const [settingsVisible, setSettingsVisible] = useState(false);
81 | const [swapModalVisible, setSwapModalVisible] = useState(false);
82 |
83 | const [tokenList, setTokenList] = useState([]);
84 |
85 | const [tokens, setTokens] = useState();
86 |
87 | const [invertPrice, setInvertPrice] = useState(false);
88 |
89 | const blockNumber = useBlockNumber(selectedProvider, 3000);
90 |
91 | const signer = selectedProvider.getSigner();
92 | const routerContract = new ethers.Contract(ROUTER_ADDRESS, IUniswapV2Router02ABI, signer);
93 |
94 | const _tokenListUri = tokenListURI || "https://gateway.ipfs.io/ipns/tokens.uniswap.org";
95 |
96 | const debouncedAmountIn = useDebounce(amountIn, 500);
97 | const debouncedAmountOut = useDebounce(amountOut, 500);
98 |
99 | const activeChainId = process.env.REACT_APP_NETWORK === "kovan" ? ChainId.KOVAN : ChainId.MAINNET;
100 |
101 | useEffect(() => {
102 | const getTokenList = async () => {
103 | console.log(_tokenListUri);
104 | try {
105 | const tokenListResponse = await fetch(_tokenListUri);
106 | const tokenListJson = await tokenListResponse.json();
107 | const filteredTokens = tokenListJson.tokens.filter(function (t) {
108 | return t.chainId === activeChainId;
109 | });
110 | const ethToken = WETH[activeChainId];
111 | ethToken.name = "Ethereum";
112 | ethToken.symbol = "ETH";
113 | ethToken.logoURI =
114 | "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png";
115 | const _tokenList = [ethToken, ...filteredTokens];
116 | setTokenList(_tokenList);
117 | const _tokens = tokenListToObject(_tokenList);
118 | setTokens(_tokens);
119 | } catch (e) {
120 | console.log(e);
121 | }
122 | };
123 | getTokenList();
124 | }, [tokenListURI]);
125 |
126 | const getTrades = async () => {
127 | if (tokenIn && tokenOut && (amountIn || amountOut)) {
128 | const pairs = arr => arr.map((v, i) => arr.slice(i + 1).map(w => [v, w])).flat();
129 |
130 | const baseTokens = tokenList
131 | .filter(function (t) {
132 | return ["DAI", "USDC", "USDT", "COMP", "ETH", "MKR", "LINK", tokenIn, tokenOut].includes(t.symbol);
133 | })
134 | .map(el => {
135 | return new Token(el.chainId, el.address, el.decimals, el.symbol, el.name);
136 | });
137 |
138 | const listOfPairwiseTokens = pairs(baseTokens);
139 |
140 | const getPairs = async list => {
141 | const listOfPromises = list.map(item => Fetcher.fetchPairData(item[0], item[1], selectedProvider));
142 | return Promise.all(listOfPromises.map(p => p.catch(() => undefined)));
143 | };
144 |
145 | const listOfPairs = await getPairs(listOfPairwiseTokens);
146 |
147 | let bestTrade;
148 |
149 | if (exact === "in") {
150 | setAmountInMax();
151 | bestTrade = Trade.bestTradeExactIn(
152 | listOfPairs.filter(item => item),
153 | new TokenAmount(tokens[tokenIn], ethers.utils.parseUnits(amountIn.toString(), tokens[tokenIn].decimals)),
154 | tokens[tokenOut],
155 | { maxNumResults: 3, maxHops: 1 },
156 | );
157 | if (bestTrade[0]) {
158 | setAmountOut(bestTrade[0].outputAmount.toSignificant(6));
159 | } else {
160 | setAmountOut();
161 | }
162 | } else if (exact === "out") {
163 | setAmountOutMin();
164 | bestTrade = Trade.bestTradeExactOut(
165 | listOfPairs.filter(item => item),
166 | tokens[tokenIn],
167 | new TokenAmount(tokens[tokenOut], ethers.utils.parseUnits(amountOut.toString(), tokens[tokenOut].decimals)),
168 | { maxNumResults: 3, maxHops: 1 },
169 | );
170 | if (bestTrade[0]) {
171 | setAmountIn(bestTrade[0].inputAmount.toSignificant(6));
172 | } else {
173 | setAmountIn();
174 | }
175 | }
176 |
177 | setTrades(bestTrade);
178 |
179 | console.log(bestTrade);
180 | }
181 | };
182 |
183 | useEffect(() => {
184 | getTrades();
185 | }, [tokenIn, tokenOut, debouncedAmountIn, debouncedAmountOut, slippageTolerance, selectedProvider]);
186 |
187 | useEffect(() => {
188 | if (trades && trades[0]) {
189 | if (exact === "in") {
190 | setAmountOutMin(trades[0].minimumAmountOut(slippageTolerance));
191 | } else if (exact === "out") {
192 | setAmountInMax(trades[0].maximumAmountIn(slippageTolerance));
193 | }
194 | }
195 | }, [slippageTolerance, amountIn, amountOut, trades]);
196 |
197 | const getBalance = async (_token, _account, _contract) => {
198 | let newBalance;
199 | if (_token === "ETH") {
200 | newBalance = await selectedProvider.getBalance(_account);
201 | } else {
202 | newBalance = await makeCall("balanceOf", _contract, [_account]);
203 | }
204 | return newBalance;
205 | };
206 |
207 | const getAccountInfo = async () => {
208 | if (tokens) {
209 | const accountList = await selectedProvider.listAccounts();
210 |
211 | if (tokenIn) {
212 | const tempContractIn = new ethers.Contract(tokens[tokenIn].address, erc20Abi, selectedProvider);
213 | const newBalanceIn = await getBalance(tokenIn, accountList[0], tempContractIn);
214 | setBalanceIn(newBalanceIn);
215 |
216 | let allowance;
217 |
218 | if (tokenIn === "ETH") {
219 | setRouterAllowance();
220 | } else {
221 | allowance = await makeCall("allowance", tempContractIn, [accountList[0], ROUTER_ADDRESS]);
222 | setRouterAllowance(allowance);
223 | }
224 | }
225 |
226 | if (tokenOut) {
227 | const tempContractOut = new ethers.Contract(tokens[tokenOut].address, erc20Abi, selectedProvider);
228 | const newBalanceOut = await getBalance(tokenOut, accountList[0], tempContractOut);
229 | setBalanceOut(newBalanceOut);
230 | }
231 | }
232 | };
233 |
234 | usePoller(getAccountInfo, 6000);
235 |
236 | const route = trades
237 | ? trades.length > 0
238 | ? trades[0].route.path.map(function (item) {
239 | return item.symbol;
240 | })
241 | : []
242 | : [];
243 |
244 | const updateRouterAllowance = async newAllowance => {
245 | setApproving(true);
246 | try {
247 | const tempContract = new ethers.Contract(tokens[tokenIn].address, erc20Abi, signer);
248 | const result = await makeCall("approve", tempContract, [ROUTER_ADDRESS, newAllowance]);
249 | console.log(result);
250 | setApproving(false);
251 | return true;
252 | } catch (e) {
253 | notification.open({
254 | message: "Approval unsuccessful",
255 | description: `Error: ${e.message}`,
256 | });
257 | }
258 | };
259 |
260 | const approveRouter = async () => {
261 | const approvalAmount =
262 | exact === "in"
263 | ? ethers.utils.hexlify(ethers.utils.parseUnits(amountIn.toString(), tokens[tokenIn].decimals))
264 | : amountInMax.raw.toString();
265 | console.log(approvalAmount);
266 | const approval = updateRouterAllowance(approvalAmount);
267 | if (approval) {
268 | notification.open({
269 | message: "Token transfer approved",
270 | description: `You can now swap up to ${amountIn} ${tokenIn}`,
271 | });
272 | }
273 | };
274 |
275 | const removeRouterAllowance = async () => {
276 | const approvalAmount = ethers.utils.hexlify(0);
277 | console.log(approvalAmount);
278 | const removal = updateRouterAllowance(approvalAmount);
279 | if (removal) {
280 | notification.open({
281 | message: "Token approval removed",
282 | description: `The router is no longer approved for ${tokenIn}`,
283 | });
284 | }
285 | };
286 |
287 | const executeSwap = async () => {
288 | setSwapping(true);
289 | try {
290 | let args;
291 | const metadata = {};
292 |
293 | let call;
294 | const deadline = Math.floor(Date.now() / 1000) + timeLimit;
295 | const path = trades[0].route.path.map(function (item) {
296 | return item.address;
297 | });
298 | console.log(path);
299 | const accountList = await selectedProvider.listAccounts();
300 | const address = accountList[0];
301 |
302 | if (exact === "in") {
303 | const _amountIn = ethers.utils.hexlify(ethers.utils.parseUnits(amountIn.toString(), tokens[tokenIn].decimals));
304 | const _amountOutMin = ethers.utils.hexlify(ethers.BigNumber.from(amountOutMin.raw.toString()));
305 | if (tokenIn === "ETH") {
306 | call = "swapExactETHForTokens";
307 | args = [_amountOutMin, path, address, deadline];
308 | metadata.value = _amountIn;
309 | } else {
310 | call = tokenOut === "ETH" ? "swapExactTokensForETH" : "swapExactTokensForTokens";
311 | args = [_amountIn, _amountOutMin, path, address, deadline];
312 | }
313 | } else if (exact === "out") {
314 | const _amountOut = ethers.utils.hexlify(
315 | ethers.utils.parseUnits(amountOut.toString(), tokens[tokenOut].decimals),
316 | );
317 | const _amountInMax = ethers.utils.hexlify(ethers.BigNumber.from(amountInMax.raw.toString()));
318 | if (tokenIn === "ETH") {
319 | call = "swapETHForExactTokens";
320 | args = [_amountOut, path, address, deadline];
321 | metadata.value = _amountInMax;
322 | } else {
323 | call = tokenOut === "ETH" ? "swapTokensForExactETH" : "swapTokensForExactTokens";
324 | args = [_amountOut, _amountInMax, path, address, deadline];
325 | }
326 | }
327 | console.log(call, args, metadata);
328 | const result = await makeCall(call, routerContract, args, metadata);
329 | console.log(result);
330 | notification.open({
331 | message: "Swap complete 🦄",
332 | description: (
333 | <>
334 | 84 | 99 |
100 |101 | {" "} 102 | 125 |
126 | 127 |128 | 141 |
142 | 143 |Testnet ETH
146 | 147 | {allFaucets} 148 |
26 | {currentTheme === "light" ? "☀️" : "🌜"}
27 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/Timeline.jsx:
--------------------------------------------------------------------------------
1 | import { DownloadOutlined, EditOutlined, SendOutlined } from "@ant-design/icons";
2 | import { Timeline, Typography } from "antd";
3 | import React from "react";
4 | import Blockies from "react-blockies";
5 |
6 | const { Text } = Typography;
7 |
8 | // displays a timeline for scaffold-eth usage
9 |
10 | export default function TimelineDisplay(props) {
11 | return (
12 |
88 |
100 | );
101 | receiveButton = (
102 |
110 | );
111 | privateKeyButton = (
112 |
121 | );
122 | } else if (pk) {
123 | const pk = localStorage.getItem("metaPrivateKey");
124 | const wallet = new ethers.Wallet(pk);
125 |
126 | if (wallet.address !== selectedAddress) {
127 | display = (
128 |
89 | {selectedAddress}
90 |
91 |
129 | *injected account*, private key unknown
130 |
131 | );
132 | } else {
133 | const extraPkDisplayAdded = {};
134 | const extraPkDisplay = [];
135 | extraPkDisplayAdded[wallet.address] = true;
136 | extraPkDisplay.push(
137 |
138 |
139 | {wallet.address.substr(0, 6)}
140 |
141 |
,
142 | );
143 | for (const key in localStorage) {
144 | if (key.indexOf("metaPrivateKey_backup") >= 0) {
145 | console.log(key);
146 | const pastpk = localStorage.getItem(key);
147 | const pastwallet = new ethers.Wallet(pastpk);
148 | if (!extraPkDisplayAdded[pastwallet.address] /* && selectedAddress!=pastwallet.address */) {
149 | extraPkDisplayAdded[pastwallet.address] = true;
150 | extraPkDisplay.push(
151 | ,
157 | );
158 | }
159 | }
160 | }
161 |
162 | display = (
163 |
164 | Private Key:
165 |
166 |
171 | 172 | 173 | Point your camera phone at qr code to open in 174 | 175 | burner wallet 176 | 177 | : 178 | 179 |
189 | {"https://xdai.io/" + pk}
190 |
191 |
192 | {extraPkDisplay ? (
193 |
215 | );
216 | }
217 |
218 | receiveButton = (
219 |
228 | );
229 | privateKeyButton = (
230 |
239 | );
240 | } else {
241 | const inputStyle = {
242 | padding: 10,
243 | };
244 |
245 | display = (
246 |
167 | {pk}
168 |
169 |
170 | 171 | 172 | 173 | Point your camera phone at qr code to open in 174 | 175 | burner wallet 176 | 177 | : 178 | 179 |
194 |
211 | ) : (
212 | ""
213 | )}
214 | Known Private Keys:
195 | {extraPkDisplay} 196 | 210 |
247 |
266 | );
267 | receiveButton = (
268 |
277 | );
278 | privateKeyButton = (
279 |
288 | );
289 | }
290 |
291 | return (
292 |
293 | {providerSend}
294 |
248 |
256 |
257 | {
261 | setAmount(value);
262 | }}
263 | />
264 |
265 |
300 |
302 |
303 | }
304 | onOk={() => {
305 | setQr();
306 | setPK();
307 | setOpen(!open);
308 | }}
309 | onCancel={() => {
310 | setQr();
311 | setPK();
312 | setOpen(!open);
313 | }}
314 | footer={[
315 | privateKeyButton,
316 | receiveButton,
317 | ,
343 | ]}
344 | >
345 | {display}
346 |
19 |
42 | );
43 | }
--------------------------------------------------------------------------------
/src/hooks/Debounce.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export default function useDebounce(value, delay) {
4 | const [debouncedValue, setDebouncedValue] = useState(value);
5 |
6 | useEffect(() => {
7 | const handler = setTimeout(() => {
8 | setDebouncedValue(value);
9 | }, delay);
10 |
11 | return () => {
12 | clearTimeout(handler);
13 | };
14 | }, [value]);
15 |
16 | return debouncedValue;
17 | }
18 |
--------------------------------------------------------------------------------
/src/hooks/ExternalContractLoader.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable global-require */
2 | import { Contract } from "@ethersproject/contracts";
3 | import { useState, useEffect } from "react";
4 |
5 | /*
6 | when you want to load an existing contract using just the provider, address, and ABI
7 | */
8 |
9 | /*
10 | ~ What it does? ~
11 |
12 | Enables you to load an existing mainnet DAI contract using the provider, address and abi
13 |
14 | ~ How can I use? ~
15 |
16 | const mainnetDAIContract = useExternalContractLoader(mainnetProvider, DAI_ADDRESS, DAI_ABI)
17 |
18 | ~ Features ~
19 |
20 | - Specify mainnetProvider
21 | - Specify DAI_ADDRESS and DAI_ABI, you can load/write them using constants.js
22 | */
23 | export default function useExternalContractLoader(provider, address, ABI, optionalBytecode) {
24 | const [contract, setContract] = useState();
25 | useEffect(() => {
26 | async function loadContract() {
27 | if (typeof provider !== "undefined" && address && ABI) {
28 | try {
29 | // we need to check to see if this provider has a signer or not
30 | let signer;
31 | const accounts = await provider.listAccounts();
32 | if (accounts && accounts.length > 0) {
33 | signer = provider.getSigner();
34 | } else {
35 | signer = provider;
36 | }
37 |
38 | const customContract = new Contract(address, ABI, signer);
39 | if (optionalBytecode) customContract.bytecode = optionalBytecode;
40 |
41 | setContract(customContract);
42 | } catch (e) {
43 | console.log("ERROR LOADING EXTERNAL CONTRACT AT " + address + " (check provider, address, and ABI)!!", e);
44 | }
45 | }
46 | }
47 | loadContract();
48 | }, [provider, address, ABI, optionalBytecode]);
49 | return contract;
50 | }
51 |
--------------------------------------------------------------------------------
/src/hooks/GasPrice.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | import { usePoller } from "eth-hooks";
3 | import { useState } from "react";
4 |
5 | export default function useGasPrice(targetNetwork, speed) {
6 | const [gasPrice, setGasPrice] = useState();
7 | const loadGasPrice = async () => {
8 | if (targetNetwork.hasOwnProperty("gasPrice")) {
9 | setGasPrice(targetNetwork.gasPrice);
10 | } else {
11 | axios
12 | .get("https://ethgasstation.info/json/ethgasAPI.json")
13 | .then(response => {
14 | const newGasPrice = response.data[speed || "fast"] * 100000000;
15 | if (newGasPrice !== gasPrice) {
16 | setGasPrice(newGasPrice);
17 | }
18 | })
19 | .catch(error => console.log(error));
20 | }
21 | };
22 |
23 | usePoller(loadGasPrice, 39999);
24 | return gasPrice;
25 | }
26 |
--------------------------------------------------------------------------------
/src/hooks/LocalStorage.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | // Hook from useHooks! (https://usehooks.com/useLocalStorage/)
3 | export default function useLocalStorage(key, initialValue) {
4 | // State to store our value
5 | // Pass initial state function to useState so logic is only executed once
6 | const [storedValue, setStoredValue] = useState(() => {
7 | try {
8 | // Get from local storage by key
9 | const item = window.localStorage.getItem(key);
10 | const parsedItem = item ? JSON.parse(item) : initialValue;
11 |
12 | if (typeof parsedItem === "object" && parsedItem !== null && "value" in parsedItem) {
13 | // const now = new Date();
14 | // if (ttl && now.getTime() > parsedItem.expiry) {
15 | // If the item is expired, delete the item from storage
16 | // and return null
17 | // window.localStorage.removeItem(key);
18 | // return initialValue;
19 | // }
20 | return parsedItem.value;
21 | }
22 | // Parse stored json or if none return initialValue
23 | return parsedItem;
24 | } catch (error) {
25 | // If error also return initialValue
26 | console.log(error);
27 | return initialValue;
28 | }
29 | });
30 |
31 | // Return a wrapped version of useState's setter function that ...
32 | // ... persists the new value to localStorage.
33 | const setValue = value => {
34 | try {
35 | // Allow value to be a function so we have same API as useState
36 | const valueToStore = value instanceof Function ? value(storedValue) : value;
37 | // Save state
38 | setStoredValue(valueToStore);
39 | // Save to local storage
40 | window.localStorage.setItem(key, JSON.stringify(valueToStore));
41 | } catch (error) {
42 | // A more advanced implementation would handle the error case
43 | console.log(error);
44 | }
45 | };
46 |
47 | return [storedValue, setValue];
48 | }
49 |
--------------------------------------------------------------------------------
/src/hooks/TokenList.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | /*
4 | ~ What it does? ~
5 |
6 | Gets a tokenlist (see more at https://tokenlists.org/), returning the .tokens only
7 |
8 | ~ How can I use? ~
9 |
10 | const tokenList = useTokenList(); <- default returns the Unsiwap tokens
11 | const tokenList = useTokenList("https://gateway.ipfs.io/ipns/tokens.uniswap.org");
12 |
13 | ~ Features ~
14 |
15 | - Optional - specify chainId to filter by chainId
16 | */
17 |
18 | const useTokenList = (tokenListUri, chainId) => {
19 | const [tokenList, setTokenList] = useState([]);
20 |
21 | const _tokenListUri = tokenListUri || "https://gateway.ipfs.io/ipns/tokens.uniswap.org";
22 |
23 | useEffect(() => {
24 | const getTokenList = async () => {
25 | try {
26 | const tokenList = await fetch(_tokenListUri);
27 | const tokenListJson = await tokenList.json();
28 | let _tokenList;
29 |
30 | if (chainId) {
31 | _tokenList = tokenListJson.tokens.filter(function (t) {
32 | return t.chainId === chainId;
33 | });
34 | } else {
35 | _tokenList = tokenListJson;
36 | }
37 |
38 | setTokenList(_tokenList.tokens);
39 | } catch (e) {
40 | console.log(e);
41 | }
42 | };
43 | getTokenList();
44 | }, [tokenListUri]);
45 |
46 | return tokenList;
47 | };
48 |
49 | export default useTokenList;
50 |
--------------------------------------------------------------------------------
/src/hooks/index.js:
--------------------------------------------------------------------------------
1 | export { default as useDebounce } from "./Debounce";
2 | export { default as useLocalStorage } from "./LocalStorage";
3 | export * from "./useContractConfig";
4 | export { default as useExternalContractLoader } from "./ExternalContractLoader";
5 | export { default as useContractEvents } from "./ContractEvents";
6 |
--------------------------------------------------------------------------------
/src/hooks/useContractConfig.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { loadAppContracts } from "../helpers/loadAppContracts";
3 |
4 | export const useContractConfig = () => {
5 | const [contractsConfig, setContractsConfig] = useState({});
6 |
7 | useEffect(() => {
8 | const loadFunc = async () => {
9 | const result = await loadAppContracts();
10 | setContractsConfig(result);
11 | };
12 | void loadFunc();
13 | }, []);
14 | return contractsConfig;
15 | };
16 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | }
4 |
5 | code {
6 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
7 | }
8 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
2 | import React from "react";
3 | import { ThemeSwitcherProvider } from "react-css-theme-switcher";
4 | import ReactDOM from "react-dom";
5 | import App from "./App";
6 | import "./index.css";
7 |
8 | const themes = {
9 | dark: `${process.env.PUBLIC_URL}/dark-theme.css`,
10 | light: `${process.env.PUBLIC_URL}/light-theme.css`,
11 | };
12 |
13 | const prevTheme = window.localStorage.getItem("theme");
14 |
15 | const subgraphUri = "http://localhost:8000/subgraphs/name/scaffold-eth/your-contract";
16 |
17 | const client = new ApolloClient({
18 | uri: subgraphUri,
19 | cache: new InMemoryCache(),
20 | });
21 |
22 | ReactDOM.render(
23 | Events:
20 |- {
24 | return (
25 |
- {
30 | return (
31 |
23 | {/*
24 | ⚙️ Here is an example UI that displays and sets the purpose in your smart contract:
25 | */}
26 |
227 | );
228 | }
229 |
--------------------------------------------------------------------------------
/src/views/Hints.jsx:
--------------------------------------------------------------------------------
1 | import { utils } from "ethers";
2 | import { Select } from "antd";
3 | import React, { useState } from "react";
4 | import { Address, AddressInput } from "../components";
5 | import { useTokenList } from "eth-hooks/dapps/dex";
6 |
7 | const { Option } = Select;
8 |
9 | export default function Hints({ yourLocalBalance, mainnetProvider, price, address }) {
10 | // Get a list of tokens from a tokenlist -> see tokenlists.org!
11 | const [selectedToken, setSelectedToken] = useState("Pick a token!");
12 | const listOfTokens = useTokenList(
13 | "https://raw.githubusercontent.com/SetProtocol/uniswap-tokenlist/main/set.tokenlist.json",
14 | );
15 |
16 | return (
17 |
27 |
152 |
153 | {/*
154 | 📑 Maybe display a list of events?
155 | (uncomment the event and emit line in YourContract.sol! )
156 | */}
157 | Example UI:
28 |purpose: {purpose}
29 |
31 | {
33 | setNewPurpose(e.target.value);
34 | }}
35 | />
36 |
62 |
63 | Your Balance: {yourLocalBalance ? utils.formatEther(yourLocalBalance) : "..."}
76 |OR
77 | 🐳 Example Whale Balance:
80 | Your Balance: {yourLocalBalance ? utils.formatEther(yourLocalBalance) : "..."}
84 |
93 |
101 |
102 |
103 |
118 |
119 |
120 |
133 |
134 |
135 |
150 |
151 |
158 |
172 |
173 | Events:
159 |- {
163 | return (
164 |
174 |
175 | Check out all the{" "}
176 |
181 | 📦 components
182 |
183 |
184 |
185 |
186 |
225 |
226 |
187 | There are tons of generic components included from{" "}
188 |
189 | 🐜 ant.design
190 | {" "}
191 | too!
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
201 |
202 |
203 | Date Pickers?
204 |
208 |
209 |
205 | {}} />
206 |
207 |
210 | {}} />
211 |
212 |
213 |
214 | {}} />
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
224 |
18 |
269 | );
270 | }
271 |
--------------------------------------------------------------------------------
/src/views/Subgraph.jsx:
--------------------------------------------------------------------------------
1 | import { gql, useQuery } from "@apollo/client";
2 | import { Button, Input, Table, Typography } from "antd";
3 | import "antd/dist/antd.css";
4 | import GraphiQL from "graphiql";
5 | import "graphiql/graphiql.min.css";
6 | import fetch from "isomorphic-fetch";
7 | import React, { useState } from "react";
8 | import { Address } from "../components";
9 |
10 | const highlight = {
11 | marginLeft: 4,
12 | marginRight: 8,
13 | /* backgroundColor: "#f9f9f9", */ padding: 4,
14 | borderRadius: 4,
15 | fontWeight: "bolder",
16 | };
17 |
18 | function Subgraph(props) {
19 | function graphQLFetcher(graphQLParams) {
20 | return fetch(props.subgraphUri, {
21 | method: "post",
22 | headers: { "Content-Type": "application/json" },
23 | body: JSON.stringify(graphQLParams),
24 | }).then(response => response.json());
25 | }
26 |
27 | const EXAMPLE_GRAPHQL = `
28 | {
29 | purposes(first: 25, orderBy: createdAt, orderDirection: desc) {
30 | id
31 | purpose
32 | createdAt
33 | sender {
34 | id
35 | }
36 | }
37 | senders {
38 | id
39 | address
40 | purposeCount
41 | }
42 | }
43 | `;
44 | const EXAMPLE_GQL = gql(EXAMPLE_GRAPHQL);
45 | const { loading, data } = useQuery(EXAMPLE_GQL, { pollInterval: 2500 });
46 |
47 | const purposeColumns = [
48 | {
49 | title: "Purpose",
50 | dataIndex: "purpose",
51 | key: "purpose",
52 | },
53 | {
54 | title: "Sender",
55 | key: "id",
56 | render: record => ,
57 | },
58 | {
59 | title: "createdAt",
60 | key: "createdAt",
61 | dataIndex: "createdAt",
62 | render: d => new Date(d * 1000).toISOString(),
63 | },
64 | ];
65 |
66 | const [newPurpose, setNewPurpose] = useState("loading...");
67 |
68 | const deployWarning = (
69 |
19 | 👷
20 | Edit your contract in
21 |
25 | packages/hardhat/contracts
26 |
27 |
28 |
29 |
30 | 🛰
31 | compile/deploy with
32 |
36 | yarn run deploy
37 |
38 |
39 |
40 |
41 | 🚀
42 | Your contract artifacts are automatically injected into your frontend at
43 |
47 | packages/react-app/src/contracts/
48 |
49 |
50 |
51 |
52 | 🎛
53 | Edit your frontend in
54 |
58 | packages/reactapp/src/App.js
59 |
60 |
61 |
62 |
63 | 🔭
64 | explore the
65 |
76 | 🖇 hooks
77 |
78 | and
79 |
83 | 📦 components
84 |
85 |
86 |
87 |
88 | for example, the
89 |
93 | useBalance()
94 | {" "}
95 | hook keeps track of your balance: {utils.formatEther(yourLocalBalance || 0)}
96 |
97 |
98 |
99 |
122 |
123 |
100 | useTokenList() can get you an array of tokens from{" "}
101 |
102 | tokenlists.org!
103 |
104 |
105 |
121 |
124 | as you build your app you'll need web3 specific components like an
125 |
129 | {"
137 |
138 |
133 |
135 | (try putting in your address, an ens address, or scanning a QR code)
136 |
139 | this balance could be multiplied by
140 |
144 | price
145 | {" "}
146 | that is loaded with the
147 |
151 | usePrice
152 | {" "}
153 | hook with the current value: ${price}
154 |
155 |
156 |
157 | 💧
158 | use the faucet to send funds to
159 |
163 | {address}
164 |
165 |
166 |
167 |
168 | 📡
169 | deploy to a testnet or mainnet by editing
170 |
174 | packages/hardhat/hardhat.config.js
175 |
176 | and running
177 |
181 | yarn run deploy
182 |
183 |
184 |
185 |
186 | 🔑
187 |
191 | yarn run generate
192 |
193 | will create a deployer account in
194 |
198 | packages/hardhat
199 |
200 |
216 |
217 |
201 | (use{" "}
202 |
211 | yarn run account
212 | {" "}
213 | to display deployer address and balance)
214 |
215 |
218 | ⚙️
219 | build your app with
220 |
224 | yarn run build
225 |
226 |
227 |
228 |
229 | 🚢
230 | ship it!
231 |
235 | yarn run surge
236 |
237 | or
238 |
242 | yarn run s3
243 |
244 | or
245 |
249 | yarn run ipfs
250 |
251 |
252 |
253 |
254 | 💬
255 | for support, join this
256 |
260 |
261 | Telegram Chat
262 |
263 |
264 |
265 |
266 | 🛠 Check out your browser's developer console for more... (inspect console) 🚀
267 |
268 | Warning: 🤔 Have you deployed your subgraph yet?
70 | );
71 |
72 | return (
73 | <>
74 |
75 | You will find that parsing/tracking events with the{" "}
76 |
77 | useEventListener
78 | {" "}
79 | hook becomes a chore for every new project.
80 |
81 |
82 | Instead, you can use{" "}
83 |
84 | The Graph
85 | {" "}
86 | with 🏗 scaffold-eth (
87 |
88 | learn more
89 |
90 | ):
91 |
92 |
93 |
94 | 🚮
95 | Clean up previous data:
96 |
97 | yarn clean-graph-node
98 |
99 |
100 |
101 |
102 | 📡
103 | Spin up a local graph node by running
104 |
105 | yarn run-graph-node
106 |
107 |
108 | {" "}
109 | (requires{" "}
110 |
111 | {" "}
112 | Docker
113 |
114 | ){" "}
115 |
116 |
117 |
118 |
119 | 📝
120 | Create your local subgraph by running
121 |
122 | yarn graph-create-local
123 |
124 | (only required once!)
125 |
126 |
127 |
128 | 🚢
129 | Deploy your local subgraph by running
130 |
131 | yarn graph-ship-local
132 |
133 |
134 |
135 |
136 | 🖍️
137 | Edit your local subgraph in
138 |
139 | packages/subgraph/src
140 |
141 | (learn more about subgraph definition{" "}
142 |
143 | here
144 |
145 | )
146 |
147 |
148 |
149 | 🤩
150 | Deploy your contracts and your subgraph in one go by running
151 |
152 | yarn deploy-and-graph
153 |
154 |
155 |
156 |
157 |
176 | ) : (
177 | {loading ? "Loading..." : deployWarning}
178 | )}
179 |
180 |
184 |
185 |
158 | {
160 | setNewPurpose(e.target.value);
161 | }}
162 | />
163 |
172 |
173 |
174 | {data ? (
175 |
181 |
183 | ...
186 |
187 | );
188 | }
189 |
190 | export default Subgraph;
191 |
--------------------------------------------------------------------------------
/src/views/index.js:
--------------------------------------------------------------------------------
1 | export { default as ExampleUI } from "./ExampleUI";
2 | export { default as Hints } from "./Hints";
3 | export { default as Subgraph } from "./Subgraph";
4 |
--------------------------------------------------------------------------------