Skip to content

Commit

Permalink
Use new ProgressOverlay (#156)
Browse files Browse the repository at this point in the history 
* Add `Link` component

* Add `CENNZTransaction` class and utilise it in `signAndSendTx2`

* Update SwapProgress with improved layout, transaction link

* Update Pool section to use new ProgressOverlay system

* Update Bridge section to use new ProgressOverlay system

* Re-add `Dismiss` button back

* Deprecate the old `signAndSend` function

* Add `Dismiss` button into Pool and Bridge sections

* Append `?network=Nikau` for Nikau transaction
  • Loading branch information
@ken-futureverse
ken-futureverse authored Apr 5, 2022
1 parent 8222015 commit c65cc1a
Show file tree
Hide file tree
Showing 34 changed files with 1,365 additions and 925 deletions.
2 changes: 2 additions & 0 deletions .env.development
View file
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
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
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

0 comments on commit c65cc1a

Please sign in to comment.