Add confirming state to the Bridge (#151)

* Reduce the space between `value` and `symbol`

* Add `selectMap`

* Update progress title during deposit confirming state

* Update progress status for withdraw confirming state

* Allow mix casing in Progress title

components/BridgeForm.tsx

@@ -75,7 +75,8 @@ const BridgeForm: FC<IntrinsicElements["form"] & BridgeFormProps> = ({
 				metaMaskWallet.getSigner()
 			);
 
-			if (tx !== "cancelled") await ensureRelayerDepositDone(tx.hash);
+			if (tx !== "cancelled")
+				await ensureRelayerDepositDone(tx.hash, 600000, setProgressStatus);
 		} catch (error) {
 			console.info(error);
 			return setFailStatus(error?.code);
@@ -114,6 +115,7 @@ const BridgeForm: FC<IntrinsicElements["form"] & BridgeFormProps> = ({
 		try {
 			await ensureEthereumChain(extension);
 			await ensureBridgeWithdrawActive(api, metaMaskWallet);
+			setProgressStatus("CennznetConfirming");
 			eventProof = await sendWithdrawCENNZRequest(
 				api,
 				transferAmount,
@@ -131,6 +133,7 @@ const BridgeForm: FC<IntrinsicElements["form"] & BridgeFormProps> = ({
 
 		let tx: Awaited<ReturnType<typeof sendWithdrawEthereumRequest>>;
 		try {
+			setProgressStatus("EthereumConfirming");
 			tx = await sendWithdrawEthereumRequest(
 				api,
 				eventProof,
@@ -182,6 +185,7 @@ const BridgeForm: FC<IntrinsicElements["form"] & BridgeFormProps> = ({
 
 		let tx: Awaited<ReturnType<typeof sendWithdrawEthereumRequest>>;
 		try {
+			setProgressStatus("EthereumConfirming");
 			tx = await sendWithdrawEthereumRequest(
 				api,
 				eventProof,

components/BridgeProgress.tsx

@@ -97,6 +97,10 @@ const styles = {
 		text-align: center;
 		text-transform: uppercase;
 		color: ${palette.primary.main};
+
+		span {
+			text-transform: none !important;
+		}
 	`,
 
 	message: ({ palette }: Theme) => css`
@@ -114,6 +118,11 @@ const styles = {
 			font-weight: bold;
 			font-style: normal;
 			color: ${palette.primary.main};
+			font-size: 0.5em;
+			span {
+				font-size: 2em;
+				letter-spacing: -0.025em;
+			}
 		}
 	`,
 

providers/BridgeProvider.tsx

@@ -5,9 +5,10 @@ import {
 	BridgeAction,
 	BridgedEthereumToken,
 	EthereumToken,
+	RelayerConfirmingStatus,
 	TxStatus,
 } from "@/types";
-import { Balance } from "@/utils";
+import { Balance, selectMap } from "@/utils";
 import {
 	createContext,
 	Dispatch,
@@ -42,7 +43,7 @@ interface BridgeContextType {
 	txStatus: TxStatus;
 	setTxStatus: Dispatch<SetStateAction<TxStatus>>;
 
-	setProgressStatus: () => void;
+	setProgressStatus: (status?: RelayerConfirmingStatus) => void;
 	setSuccessStatus: () => void;
 	setFailStatus: (errorCode?: string) => void;
 
@@ -91,10 +92,24 @@ const BridgeProvider: FC<BridgeProviderProps> = ({
 
 	const [txStatus, setTxStatus] = useState<TxStatus>(null);
 
-	const setProgressStatus = useCallback(() => {
+	const setProgressStatus = useCallback((status?: RelayerConfirmingStatus) => {
+		const title = selectMap<RelayerConfirmingStatus, TxStatus["title"]>(
+			status,
+			new Map([
+				["EthereumConfirming", <>Confirming on Ethereum</>],
+				[
+					"CennznetConfirming",
+					<>
+						Confirming on CENNZ<span>net</span>
+					</>,
+				],
+			]),
+			"Transaction In Progress"
+		);
+
 		setTxStatus({
 			status: "in-progress",
-			title: "Transaction In Progress",
+			title,
 			message: (
 				<div>
 					Please sign the transaction when prompted and wait until it&apos;s
@@ -137,7 +152,7 @@ const BridgeProvider: FC<BridgeProviderProps> = ({
 						You successfully withdrew{" "}
 						<pre>
 							<em>
-								{trValue} {trSymbol}
+								<span>{trValue}</span> <span>{trSymbol}</span>
 							</em>
 						</pre>{" "}
 						from CENNZnet.
@@ -151,7 +166,7 @@ const BridgeProvider: FC<BridgeProviderProps> = ({
 						You successfully deposited{" "}
 						<pre>
 							<em>
-								{trValue} {trSymbol}
+								<span>{trValue}</span> <span>{trSymbol}</span>
 							</em>
 						</pre>{" "}
 						to CENNZnet.

types/index.d.ts

@@ -74,6 +74,18 @@ export interface MetaMaskAccount {
 
 export interface TxStatus {
 	status: "in-progress" | "success" | "fail";
-	title: string;
+	title: string | ReactElement;
 	message: string | ReactElement;
 }
+
+export type RelayerStatus =
+	| "Successful"
+	| "Failed"
+	| "Confirming"
+	| "EthereumConfirming"
+	| "CennznetConfirming";
+
+export type RelayerConfirmingStatus = Extract<
+	RelayerStatus,
+	"EthereumConfirming" | "CennznetConfirming"
+>;

utils/ensureRelayerDepositDone.ts

@@ -1,16 +1,19 @@
 import { fetchDepositRelayerStatus, waitUntil } from "@/utils";
+import { RelayerStatus, RelayerConfirmingStatus } from "@/types";
 
-type RelayerStatusReturn = Awaited<
-	ReturnType<typeof fetchDepositRelayerStatus>
->;
 type TimoutReturn = Awaited<ReturnType<typeof waitUntil>>;
 
 // TODO: Needs test
 export default async function ensureRelayerDepositDone(
 	txHash: string,
-	timeout: number = 60000
-): Promise<RelayerStatusReturn> {
-	const status = await waitUntilDepositDone(txHash, timeout);
+	timeout: number = 60000,
+	confirmingCallback?: (status: RelayerConfirmingStatus) => void
+): Promise<RelayerStatus> {
+	const status = await waitUntilDepositDone(
+		txHash,
+		timeout,
+		confirmingCallback
+	);
 
 	if (status === "timeout") throw { code: "RELAYER_TIMEOUT" };
 	if (status === "Failed") throw { code: "RELAYER_STATUS_FAILED" };
@@ -20,16 +23,22 @@ export default async function ensureRelayerDepositDone(
 
 export async function waitUntilDepositDone(
 	txHash: string,
-	timeout: number = 60000
-): Promise<RelayerStatusReturn | TimoutReturn> {
+	timeout: number = 60000,
+	confirmingCallback?: (status: RelayerConfirmingStatus) => void
+): Promise<RelayerStatus | TimoutReturn> {
 	let timedOut = false;
 
 	const pollDepositRelayerStatus = () => {
-		return new Promise<RelayerStatusReturn>((resolve, reject) => {
+		return new Promise<RelayerStatus>((resolve, reject) => {
 			const intervalId = setInterval(() => {
 				fetchDepositRelayerStatus(txHash)
 					.then((status) => {
-						if (!timedOut && status === "Confirming") return;
+						if (
+							!timedOut &&
+							(status === "EthereumConfirming" ||
+								status === "CennznetConfirming")
+						)
+							return confirmingCallback?.(status);
 						clearInterval(intervalId);
 						resolve(status);
 					})

utils/fetchDepositRelayerStatus.ts

@@ -1,20 +1,16 @@
 import { BRIDGE_RELAYER_URL } from "@/constants";
-
-type RelayerStatus = "Successful" | "Failed" | "Confirming";
+import { RelayerStatus } from "@/types";
 
 // TODO: Needs test
 export default async function fetchDepositRelayerStatus(
 	txHash: string
 ): Promise<RelayerStatus> {
-	const response = await fetch(
+	const relayerResponse = await fetch(
 		`${BRIDGE_RELAYER_URL}/transactions/${txHash}`
 	).then((response) => {
 		if (response.status !== 200) throw { code: `RELAYER_${response.status}` };
 		return response.json();
 	});
 
-	if (response.status === "Successful" || response.status === "Failed")
-		return response.status;
-
-	return "Confirming";
+	return relayerResponse.status;
 }

utils/index.ts

@@ -37,3 +37,4 @@ export { default as ensureRelayerDepositDone } from "@/utils/ensureRelayerDeposi
 export { default as sendWithdrawEthereumRequest } from "@/utils/sendWithdrawEthereumRequest";
 export { default as trackPageView } from "@/utils/trackPageView";
 export { default as getSellAssetExtrinsic } from "@/utils/getSellAssetExtrinsic";
+export { default as selectMap } from "@/utils/selectMap";

utils/selectMap.ts

@@ -0,0 +1,16 @@
+/**
+ * A utility that return value by key from a map
+ *
+ * @param {K} key
+ * @param {Map<K, V>} map
+ * @param {V} defaultValue
+ * @return {V}
+ */
+export default function selectMap<K, V>(
+	key: K,
+	map: Map<K, V>,
+	defaultValue?: V
+): V {
+	if (!map.has(key)) return defaultValue;
+	return map.get(key);
+}