Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use new ProgressOverlay #156

Merged
merged 9 commits into from
Apr 5, 2022
Merged

Use new ProgressOverlay #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bd8b108
Add `Link` component
Apr 1, 2022
3f9bdfc
Add `CENNZTransaction` class and utilise it in `signAndSendTx2`
Apr 2, 2022
11c7227
Update SwapProgress with improved layout, transaction link
Apr 3, 2022
51dc648
Update Pool section to use new ProgressOverlay system
Apr 4, 2022
56aca64
Update Bridge section to use new ProgressOverlay system
Apr 5, 2022
ccc38e2
Re-add `Dismiss` button back
Apr 5, 2022
7c9ceed
Deprecate the old `signAndSend` function
Apr 5, 2022
a8eae2b
Add `Dismiss` button into Pool and Bridge sections
Apr 5, 2022
acb79de
Append `?network=Nikau` for Nikau transaction
Apr 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,5 @@ NEXT_PUBLIC_API_URL="wss://nikau.centrality.me/public/ws"
NEXT_PUBLIC_ETH_CHAIN_ID=42
NEXT_PUBLIC_BRIDGE_RELAYER_URL="https://bridge-contracts.nikau.centrality.me"
NEXT_PUBLIC_GA_ID="G-8YJT9T1YTT"
NEXT_PUBLIC_CENNZ_EXPLORER_URL="https://nikau.uncoverexplorer.com"
NEXT_PUBLIC_ETH_EXPLORER_URL="https://kovan.etherscan.io"
2 changes: 2 additions & 0 deletions .env.production
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,5 @@ NEXT_PUBLIC_API_URL="wss://cennznet.unfrastructure.io/public/ws"
NEXT_PUBLIC_ETH_CHAIN_ID=1
NEXT_PUBLIC_BRIDGE_RELAYER_URL="https://bridge-contracts.centralityapp.com"
NEXT_PUBLIC_GA_ID="G-8YJT9T1YTT"
NEXT_PUBLIC_CENNZ_EXPLORER_URL="https://uncoverexplorer.com"
NEXT_PUBLIC_ETH_EXPLORER_URL="https://etherscan.io"
216 changes: 10 additions & 206 deletions components/BridgeForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,228 +1,32 @@
import { BridgedEthereumToken, IntrinsicElements } from "@/types";
import { IntrinsicElements } from "@/types";
import { FC, useCallback, useEffect, useState } from "react";
import SubmitButton from "@/components/shared/SubmitButton";
import { css } from "@emotion/react";
import { Theme } from "@mui/material";
import { useBridge } from "@/providers/BridgeProvider";
import useBridgeStatus from "@/hooks/useBridgeStatus";
import { useCENNZApi } from "@/providers/CENNZApiProvider";
import { useMetaMaskWallet } from "@/providers/MetaMaskWalletProvider";
import {
Balance,
ensureBridgeDepositActive,
ensureBridgeWithdrawActive,
ensureEthereumChain,
ensureRelayerDepositDone,
sendDepositRequest,
sendWithdrawCENNZRequest,
sendWithdrawEthereumRequest,
} from "@/utils";
import { useCENNZWallet } from "@/providers/CENNZWalletProvider";
import { useMetaMaskExtension } from "@/providers/MetaMaskExtensionProvider";
import HistoricalWithdrawal from "@/components/HistoricalWithdrawal";
import { EthyEventId } from "@cennznet/types";
import { EthEventProof } from "@cennznet/api/derives/ethBridge/types";
import {
useDepositRequest,
useHistoricalWithdrawRequest,
useWithdrawRequest,
} from "@/hooks";

interface BridgeFormProps {}

const BridgeForm: FC<IntrinsicElements["form"] & BridgeFormProps> = ({
children,
...props
}) => {
const { api } = useCENNZApi();
const { wallet: metaMaskWallet } = useMetaMaskWallet();
const {
bridgeAction,
transferInput,
transferAsset,
transferCENNZAddress,
setProgressStatus,
setSuccessStatus,
setFailStatus,
setTxStatus,
updateMetaMaskBalances,
transferMetaMaskAddress,
historicalBlockHash,
historicalEventProofId,
} = useBridge();
const { bridgeAction } = useBridge();
const [buttonLabel, setButtonLabel] = useState<string>("Deposit");
const [advancedExpanded, setAdvancedExpanded] = useState<boolean>(false);

const {
updateBalances: updateCENNZBalances,
selectedAccount: cennzAccount,
wallet: cennzWallet,
} = useCENNZWallet();
const { extension } = useMetaMaskExtension();

const processDepositRequest = useCallback(async () => {
const setTrValue = transferInput.setValue;
const transferAmount = Balance.fromInput(
transferInput.value,
transferAsset
);
setProgressStatus();

let tx: Awaited<ReturnType<typeof sendDepositRequest>>;

try {
await ensureEthereumChain(extension);
await ensureBridgeDepositActive(api, metaMaskWallet);
tx = await sendDepositRequest(
transferAmount,
transferAsset,
transferCENNZAddress,
metaMaskWallet.getSigner()
);

if (tx !== "cancelled")
await ensureRelayerDepositDone(tx.hash, 600000, setProgressStatus);
} catch (error) {
console.info(error);
return setFailStatus(error?.code);
}

if (tx === "cancelled") return setTxStatus(null);

setSuccessStatus();
setTrValue("");
updateMetaMaskBalances();
updateCENNZBalances();
}, [
api,
transferInput,
transferAsset,
transferCENNZAddress,
metaMaskWallet,
setProgressStatus,
setSuccessStatus,
setFailStatus,
setTxStatus,
updateMetaMaskBalances,
updateCENNZBalances,
extension,
]);

const processWithdrawRequest = useCallback(async () => {
const setTrValue = transferInput.setValue;
const transferAmount = Balance.fromInput(
transferInput.value,
transferAsset
);
setProgressStatus();

let eventProof: Awaited<ReturnType<typeof sendWithdrawCENNZRequest>>;
try {
await ensureEthereumChain(extension);
await ensureBridgeWithdrawActive(api, metaMaskWallet);
setProgressStatus("CennznetConfirming");
eventProof = await sendWithdrawCENNZRequest(
api,
transferAmount,
transferAsset as BridgedEthereumToken,
cennzAccount.address,
transferMetaMaskAddress,
cennzWallet.signer
);
} catch (error) {
console.info(error);
return setFailStatus(error?.code);
}

if (eventProof === "cancelled") return setTxStatus(null);

let tx: Awaited<ReturnType<typeof sendWithdrawEthereumRequest>>;
try {
setProgressStatus("EthereumConfirming");
tx = await sendWithdrawEthereumRequest(
api,
eventProof,
transferAmount,
transferAsset as BridgedEthereumToken,
transferMetaMaskAddress,
metaMaskWallet.getSigner()
);
} catch (error) {
console.info(error);
return setFailStatus(error?.code);
}

if (tx === "cancelled") return setTxStatus(null);

setSuccessStatus();
setTrValue("");
updateMetaMaskBalances();
updateCENNZBalances();
}, [
api,
transferAsset,
cennzAccount?.address,
cennzWallet?.signer,
setProgressStatus,
setSuccessStatus,
setFailStatus,
setTxStatus,
transferInput,
transferMetaMaskAddress,
updateMetaMaskBalances,
updateCENNZBalances,
metaMaskWallet,
extension,
]);

const processHistoricalWithdrawRequest = useCallback(async () => {
const setTrValue = transferInput.setValue;
const transferAmount = Balance.fromInput(
transferInput.value,
transferAsset
);
setProgressStatus();

const eventProof: Awaited<EthEventProof> =
await api.derive.ethBridge.eventProof(
historicalEventProofId as unknown as EthyEventId
);

let tx: Awaited<ReturnType<typeof sendWithdrawEthereumRequest>>;
try {
setProgressStatus("EthereumConfirming");
tx = await sendWithdrawEthereumRequest(
api,
eventProof,
transferAmount,
transferAsset as BridgedEthereumToken,
transferMetaMaskAddress,
metaMaskWallet.getSigner(),
historicalBlockHash
);
} catch (error) {
console.info(error);
return setFailStatus(error?.code);
}
const processDepositRequest = useDepositRequest();

if (tx === "cancelled") return setTxStatus(null);
const processWithdrawRequest = useWithdrawRequest();

setSuccessStatus();
setTrValue("");
updateMetaMaskBalances();
updateCENNZBalances();
setAdvancedExpanded(false);
}, [
api,
transferAsset,
setProgressStatus,
setSuccessStatus,
setFailStatus,
setTxStatus,
transferInput,
transferMetaMaskAddress,
updateMetaMaskBalances,
updateCENNZBalances,
metaMaskWallet,
historicalBlockHash,
historicalEventProofId,
setAdvancedExpanded,
]);
const processHistoricalWithdrawRequest = useHistoricalWithdrawRequest();

const onFormSubmit = useCallback(
async (event) => {
Expand Down
Loading