)
9 |
10 | export const DataRow = ({children, pb=8}) => (
{children}
)
11 | export const DataCol = ({children, pb=8}) => (
{children}
)
12 |
13 | export function NeedsApprovalCol(args: {token, needsApproval}) {
14 | const {token, needsApproval} = args;
15 |
16 | const [text, setText] = useState
(LOADING);
17 | const [textColor, setTextColor] = useState(LOADING_COLOR);
18 |
19 | useEffect(() => {
20 | if (needsApproval !== null && text === LOADING) {
21 | setText(`${needsApproval ? "Yes" : "No"}`);
22 | if (needsApproval) {
23 | setTextColor("text-amber-500");
24 | } else {
25 | setTextColor("text-emerald-600");
26 | }
27 | }
28 | }, [needsApproval])
29 |
30 | return (
31 |
32 | {token.symbol} approval required
33 | {text}
34 |
35 | )
36 | }
37 |
38 | export function ApproveButton(args: {execApprove, token, approveStatus}) {
39 | const {execApprove, token, approveStatus} = args;
40 |
41 | return (
42 |
43 |
48 |
49 | )
50 | }
51 |
52 | export function ExecuteButton(args: {text, execFn}) {
53 | const {text, execFn} = args;
54 |
55 | return (
56 |
57 |
61 |
62 | )
63 | }
--------------------------------------------------------------------------------
/examples/frontend/src/pages/bridge/hooks/useActionButtonOnClick.tsx:
--------------------------------------------------------------------------------
1 | import {ethers} from "ethers";
2 | import {SetStateFunction} from "@utils";
3 | import {ButtonProps} from "@components/Button";
4 |
5 |
6 | export function useActionButtonOnClick(
7 | setDisabled: SetStateFunction,
8 | setButtonProps: SetStateFunction
9 | ) {
10 | const fn = (executeTxnFn: () => Promise) => {
11 | return async () => {
12 | setButtonProps({
13 | text: "Waiting for transaction to send...",
14 | });
15 | setDisabled(true);
16 |
17 | try {
18 | const txn = await executeTxnFn();
19 |
20 | setButtonProps({
21 | text: "waiting for transaction to confirm..."
22 | });
23 | setDisabled(true);
24 |
25 | await txn.wait(1);
26 |
27 | setButtonProps({
28 | text: "Success!"
29 | });
30 | } catch (e) {
31 | const err = e instanceof Error ? e : new Error(e);
32 | console.error(err);
33 | setButtonProps({
34 | text: `Error: ${err.message}`,
35 | });
36 | setDisabled(true);
37 | }
38 |
39 | return
40 | }
41 | }
42 |
43 | return [fn] as const
44 | }
45 |
--------------------------------------------------------------------------------
/examples/frontend/src/pages/bridge/index.tsx:
--------------------------------------------------------------------------------
1 | import {useMetaMask, useConnectedMetaMask} from "metamask-react";
2 | import {MetamaskStatus} from "@utils";
3 |
4 | import BridgeSwap from "./components/BridgeSwap";
5 | import AddLiquiditySingleToken from "./components/AddLiquidity";
6 | import RemoveLiquidity from "./components/RemoveLiquidity";
7 |
8 | function BridgePageContent(props) {
9 | const {status} = useMetaMask();
10 |
11 | if (status !== MetamaskStatus.CONNECTED) {
12 | return (
13 |
14 | Loading...
15 |
16 | )
17 | }
18 |
19 | return(
20 |
21 | {/*
*/}
22 |
23 | {/*
*/}
24 |