From 75b2fe74b151e4a76568f6171446b9d949ea5fbf Mon Sep 17 00:00:00 2001 From: Elias Garcia Date: Wed, 29 Mar 2023 10:51:43 +0200 Subject: [PATCH 1/3] Refactor the BridgeCard component --- .../bridge-card/bridge-card.view.tsx | 235 ++++++++++++------ 1 file changed, 162 insertions(+), 73 deletions(-) diff --git a/src/views/activity/components/bridge-card/bridge-card.view.tsx b/src/views/activity/components/bridge-card/bridge-card.view.tsx index bed6501e..3ea0656b 100644 --- a/src/views/activity/components/bridge-card/bridge-card.view.tsx +++ b/src/views/activity/components/bridge-card/bridge-card.view.tsx @@ -6,7 +6,7 @@ import { getBatchNumberOfL2Block } from "src/adapters/ethereum"; import { getCurrency } from "src/adapters/storage"; import { ReactComponent as BridgeL1Icon } from "src/assets/icons/l1-bridge.svg"; import { ReactComponent as BridgeL2Icon } from "src/assets/icons/l2-bridge.svg"; -import { AsyncTask, Bridge, Env } from "src/domain"; +import { AsyncTask, Bridge, Env, PendingBridge } from "src/domain"; import { routes } from "src/routes"; import { formatFiatAmount, formatTokenAmount } from "src/utils/amounts"; import { getBridgeStatus, getCurrencySymbol } from "src/utils/labels"; @@ -69,13 +69,17 @@ export const BridgeCard: FC = ({ } }, [blockNumber, env, fromKey, status]); - const onClick = (e: React.MouseEvent) => { + const onClaimButtonClick = (e: React.MouseEvent) => { e.stopPropagation(); if (onClaim) { onClaim(); } }; + const onCardClick = (bridge: Exclude) => { + navigate(`${routes.bridgeDetails.path.split(":")[0]}${bridge.id}`); + }; + const preferredCurrencySymbol = getCurrencySymbol(getCurrency()); const tokenAmountString = `${formatTokenAmount(amount, token)} ${token.symbol}`; @@ -84,13 +88,6 @@ export const BridgeCard: FC = ({ ? `${preferredCurrencySymbol}${fiatAmount ? formatFiatAmount(fiatAmount) : "--"}` : undefined; - const bridgeAmount = ( -
- - {tokenAmountString} -
- ); - const remainingBatchesMsg: string = (() => { if ( isAsyncTaskDataAvailable(lastVerifiedBatch) && @@ -107,77 +104,169 @@ export const BridgeCard: FC = ({ } })(); - return ( - { - if (status !== "pending") { - navigate(`${routes.bridgeDetails.path.split(":")[0]}${bridge.id}`); - } - }} + const BridgeAmount = ( +
+ + {tokenAmountString} +
+ ); + + const BridgeIcon = to.key === "ethereum" ? : ; + + const BridgeLabel = ( + + {to.key === "ethereum" ? "Bridge to L1" : "Bridge to L2"} + + ); + + const BridgeStatus = ( + -
-
- {status === "initiated" &&

STEP 1/2

} - {status === "on-hold" &&

STEP 2/2

} -
-
-
- {to.key === "ethereum" ? : } + {getBridgeStatus(status)} + + ); + + const FiatAmount = ( + + {fiatAmountString} + + ); + + switch (bridge.status) { + case "pending": { + return ( + +
+
+
{BridgeIcon}
+
+
+ {BridgeLabel} + {fiatAmountString && BridgeAmount} +
+
+ {BridgeStatus} + {fiatAmountString && FiatAmount} +
+
+ {!fiatAmountString &&
{BridgeAmount}
} +
-
+ + ); + } + case "initiated": { + return ( + onCardClick(bridge)}> +
- - {to.key === "ethereum" ? "Bridge to L1" : "Bridge to L2"} - - {fiatAmountString && bridgeAmount} +

STEP 1/2

+
+
+
{BridgeIcon}
+
+
+ {BridgeLabel} + {fiatAmountString && BridgeAmount} +
+
+ {BridgeStatus} + {fiatAmountString && FiatAmount} +
+
+ {!fiatAmountString &&
{BridgeAmount}
}
+
+
+ {from.key === "ethereum" ? ( + Step 2 will require signature + ) : ( + {remainingBatchesMsg} + )} + +
+ + ); + } + case "on-hold": { + return ( + onCardClick(bridge)}> +
- - {getBridgeStatus(status)} - - {fiatAmountString && ( - - {fiatAmountString} - - )} +

STEP 2/2

+
+
+
{BridgeIcon}
+
+
+ {BridgeLabel} + {fiatAmountString && BridgeAmount} +
+
+ {BridgeStatus} + {fiatAmountString && FiatAmount} +
+
+ {!fiatAmountString &&
{BridgeAmount}
}
- {!fiatAmountString &&
{bridgeAmount}
} -
-
- {status === "initiated" && ( -
- {from.key === "ethereum" ? ( - Step 2 will require signature - ) : ( - {remainingBatchesMsg} + {status === "initiated" && ( +
+ {from.key === "ethereum" ? ( + Step 2 will require signature + ) : ( + {remainingBatchesMsg} + )} + +
)} - -
- )} - {status === "on-hold" && ( -
- {networkError ? ( - - ) : ( - Signature required to finalise the bridge + {status === "on-hold" && ( +
+ {networkError ? ( + + ) : ( + Signature required to finalise the bridge + )} + +
)} - -
- )} - - ); + + ); + } + case "completed": { + return ( + onCardClick(bridge)}> +
+
+
{BridgeIcon}
+
+
+ {BridgeLabel} + {fiatAmountString && BridgeAmount} +
+
+ {BridgeStatus} + {fiatAmountString && FiatAmount} +
+
+ {!fiatAmountString &&
{BridgeAmount}
} +
+
+ + ); + } + } }; From 399b4c20fb9ee30cbae65003b7fac901cebdd69f Mon Sep 17 00:00:00 2001 From: Elias Garcia Date: Wed, 29 Mar 2023 11:19:33 +0200 Subject: [PATCH 2/3] Display On Hold bridges from L1 to L2 as processing --- src/utils/labels.ts | 8 +- .../bridge-card/bridge-card.view.tsx | 119 +++++++++++------- .../bridge-details/bridge-details.view.tsx | 4 +- 3 files changed, 79 insertions(+), 52 deletions(-) diff --git a/src/utils/labels.ts b/src/utils/labels.ts index b446f846..bf533efc 100644 --- a/src/utils/labels.ts +++ b/src/utils/labels.ts @@ -1,6 +1,6 @@ import { Bridge, Chain, Currency, EthereumChainId } from "src/domain"; -export function getBridgeStatus(status: Bridge["status"]): string { +export function getBridgeStatus(status: Bridge["status"], from: Bridge["from"]): string { switch (status) { case "pending": { return "Processing"; @@ -9,7 +9,11 @@ export function getBridgeStatus(status: Bridge["status"]): string { return "Initiated"; } case "on-hold": { - return "On Hold"; + if (from.key === "ethereum") { + return "Processing"; + } else { + return "On Hold"; + } } case "completed": { return "Completed"; diff --git a/src/views/activity/components/bridge-card/bridge-card.view.tsx b/src/views/activity/components/bridge-card/bridge-card.view.tsx index 3ea0656b..6b00b293 100644 --- a/src/views/activity/components/bridge-card/bridge-card.view.tsx +++ b/src/views/activity/components/bridge-card/bridge-card.view.tsx @@ -125,7 +125,7 @@ export const BridgeCard: FC = ({ status === "completed" ? classes.greenStatus : classes.pendingStatus }`} > - {getBridgeStatus(status)} + {getBridgeStatus(status, from)} ); @@ -194,57 +194,80 @@ export const BridgeCard: FC = ({ ); } case "on-hold": { - return ( - onCardClick(bridge)}> -
-
-

STEP 2/2

-
-
-
{BridgeIcon}
-
-
- {BridgeLabel} - {fiatAmountString && BridgeAmount} -
-
- {BridgeStatus} - {fiatAmountString && FiatAmount} + if (bridge.from.key === "ethereum") { + return ( + onCardClick(bridge)}> +
+
+
{BridgeIcon}
+
+
+ {BridgeLabel} + {fiatAmountString && BridgeAmount} +
+
+ {BridgeStatus} + {fiatAmountString && FiatAmount} +
+ {!fiatAmountString &&
{BridgeAmount}
}
- {!fiatAmountString &&
{BridgeAmount}
} -
-
- {status === "initiated" && ( -
- {from.key === "ethereum" ? ( - Step 2 will require signature - ) : ( - {remainingBatchesMsg} - )} -
- )} - {status === "on-hold" && ( -
- {networkError ? ( - - ) : ( - Signature required to finalise the bridge - )} - + + ); + } else { + return ( + onCardClick(bridge)}> +
+
+

STEP 2/2

+
+
+
{BridgeIcon}
+
+
+ {BridgeLabel} + {fiatAmountString && BridgeAmount} +
+
+ {BridgeStatus} + {fiatAmountString && FiatAmount} +
+
+ {!fiatAmountString &&
{BridgeAmount}
} +
- )} - - ); + {status === "initiated" && ( +
+ {from.key === "ethereum" ? ( + Step 2 will require signature + ) : ( + {remainingBatchesMsg} + )} + +
+ )} + {status === "on-hold" && ( +
+ {networkError ? ( + + ) : ( + Signature required to finalise the bridge + )} + +
+ )} + + ); + } } case "completed": { return ( diff --git a/src/views/bridge-details/bridge-details.view.tsx b/src/views/bridge-details/bridge-details.view.tsx index 67d09673..a88b9577 100644 --- a/src/views/bridge-details/bridge-details.view.tsx +++ b/src/views/bridge-details/bridge-details.view.tsx @@ -324,7 +324,7 @@ export const BridgeDetails: FC = () => { - {getBridgeStatus(status)} + {getBridgeStatus(status, from)}
@@ -388,7 +388,7 @@ export const BridgeDetails: FC = () => {
)} - {(status === "initiated" || status === "on-hold") && ( + {(status === "initiated" || (status === "on-hold" && from.key === "polygon-zkevm")) && (
-
- - ); + +
+ + ); + } } case "on-hold": { if (bridge.from.key === "ethereum") { @@ -237,34 +256,20 @@ export const BridgeCard: FC = ({ {!fiatAmountString &&
{BridgeAmount}
}
- {status === "initiated" && ( -
- {from.key === "ethereum" ? ( - Step 2 will require signature - ) : ( - {remainingBatchesMsg} - )} - -
- )} - {status === "on-hold" && ( -
- {networkError ? ( - - ) : ( - Signature required to finalise the bridge - )} - -
- )} +
+ {networkError ? ( + + ) : ( + Signature required to finalise the bridge + )} + +
); }