Skip to content

Commit

Permalink
Merge branch 'develop' of github.com:0xPolygonHermez/zkevm-bridge-ui …
Browse files Browse the repository at this point in the history 
…into develop
  • Loading branch information
@elias-garcia
elias-garcia committed Apr 19, 2023
2 parents 8b0499a + 6dae6f9 commit 7c84791
Show file tree
Hide file tree
Showing 7 changed files with 235 additions and 88 deletions.
14 changes: 11 additions & 3 deletions src/utils/labels.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
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";
}
case "initiated": {
return "Initiated";
if (from.key === "ethereum") {
return "Processing";
} else {
return "Initiated";
}
}
case "on-hold": {
return "On Hold";
if (from.key === "ethereum") {
return "Processing";
} else {
return "On Hold";
}
}
case "completed": {
return "Completed";
Expand Down
269 changes: 193 additions & 76 deletions src/views/activity/components/bridge-card/bridge-card.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -69,13 +69,17 @@ export const BridgeCard: FC<BridgeCardProps> = ({
}
}, [blockNumber, env, fromKey, status]);

const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
const onClaimButtonClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
if (onClaim) {
onClaim();
}
};

const onCardClick = (bridge: Exclude<Bridge, PendingBridge>) => {
navigate(`${routes.bridgeDetails.path.split(":")[0]}${bridge.id}`);
};

const preferredCurrencySymbol = getCurrencySymbol(getCurrency());

const tokenAmountString = `${formatTokenAmount(amount, token)} ${token.symbol}`;
Expand All @@ -84,13 +88,6 @@ export const BridgeCard: FC<BridgeCardProps> = ({
? `${preferredCurrencySymbol}${fiatAmount ? formatFiatAmount(fiatAmount) : "--"}`
: undefined;

const bridgeAmount = (
<div className={classes.token}>
<Icon className={classes.tokenIcon} isRounded size={20} url={token.logoURI} />
<Typography type="body1">{tokenAmountString}</Typography>
</div>
);

const remainingBatchesMsg: string = (() => {
if (
isAsyncTaskDataAvailable(lastVerifiedBatch) &&
Expand All @@ -107,77 +104,197 @@ export const BridgeCard: FC<BridgeCardProps> = ({
}
})();

return (
<Card
className={classes.card}
onClick={() => {
if (status !== "pending") {
navigate(`${routes.bridgeDetails.path.split(":")[0]}${bridge.id}`);
}
}}
const BridgeAmount = (
<div className={classes.token}>
<Icon className={classes.tokenIcon} isRounded size={20} url={token.logoURI} />
<Typography type="body1">{tokenAmountString}</Typography>
</div>
);

const BridgeIcon = to.key === "ethereum" ? <BridgeL1Icon /> : <BridgeL2Icon />;

const BridgeLabel = (
<Typography className={classes.label} type="body1">
{to.key === "ethereum" ? "Bridge to L1" : "Bridge to L2"}
</Typography>
);

const BridgeStatus = (
<span
className={`${classes.statusBox} ${
status === "completed" ? classes.greenStatus : classes.pendingStatus
}`}
>
<div className={classes.top}>
<div className={classes.row}>
{status === "initiated" && <p className={classes.steps}>STEP 1/2</p>}
{status === "on-hold" && <p className={classes.steps}>STEP 2/2</p>}
</div>
<div className={classes.infoContainer}>
<div className={classes.circle}>
{to.key === "ethereum" ? <BridgeL1Icon /> : <BridgeL2Icon />}
{getBridgeStatus(status, from)}
</span>
);

const FiatAmount = (
<Typography className={classes.fiat} type="body1">
{fiatAmountString}
</Typography>
);

switch (bridge.status) {
case "pending": {
return (
<Card className={classes.card}>
<div className={classes.top}>
<div className={classes.infoContainer}>
<div className={classes.circle}>{BridgeIcon}</div>
<div className={classes.info}>
<div className={classes.row}>
{BridgeLabel}
{fiatAmountString && BridgeAmount}
</div>
<div className={classes.row}>
{BridgeStatus}
{fiatAmountString && FiatAmount}
</div>
</div>
{!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
</div>
</div>
<div className={classes.info}>
<div className={classes.row}>
<Typography className={classes.label} type="body1">
{to.key === "ethereum" ? "Bridge to L1" : "Bridge to L2"}
</Typography>
{fiatAmountString && bridgeAmount}
</Card>
);
}
case "initiated": {
if (bridge.from.key === "ethereum") {
return (
<Card className={classes.card} onClick={() => onCardClick(bridge)}>
<div className={classes.top}>
<div className={classes.infoContainer}>
<div className={classes.circle}>{BridgeIcon}</div>
<div className={classes.info}>
<div className={classes.row}>
{BridgeLabel}
{fiatAmountString && BridgeAmount}
</div>
<div className={classes.row}>
{BridgeStatus}
{fiatAmountString && FiatAmount}
</div>
</div>
{!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
</div>
</div>
<div className={classes.row}>
<span
className={`${classes.statusBox} ${
status === "completed" ? classes.greenStatus : classes.pendingStatus
}`}
>
{getBridgeStatus(status)}
</span>
{fiatAmountString && (
<Typography className={classes.fiat} type="body1">
{fiatAmountString}
</Typography>
</Card>
);
} else {
return (
<Card className={classes.card} onClick={() => onCardClick(bridge)}>
<div className={classes.top}>
<div className={classes.row}>
<p className={classes.steps}>STEP 1/2</p>
</div>
<div className={classes.infoContainer}>
<div className={classes.circle}>{BridgeIcon}</div>
<div className={classes.info}>
<div className={classes.row}>
{BridgeLabel}
{fiatAmountString && BridgeAmount}
</div>
<div className={classes.row}>
{BridgeStatus}
{fiatAmountString && FiatAmount}
</div>
</div>
{!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
</div>
</div>
<div className={classes.bottom}>
<Typography type="body2">{remainingBatchesMsg}</Typography>
<button className={classes.finaliseButton} disabled>
Finalise
</button>
</div>
</Card>
);
}
}
case "on-hold": {
if (bridge.from.key === "ethereum") {
return (
<Card className={classes.card} onClick={() => onCardClick(bridge)}>
<div className={classes.top}>
<div className={classes.infoContainer}>
<div className={classes.circle}>{BridgeIcon}</div>
<div className={classes.info}>
<div className={classes.row}>
{BridgeLabel}
{fiatAmountString && BridgeAmount}
</div>
<div className={classes.row}>
{BridgeStatus}
{fiatAmountString && FiatAmount}
</div>
</div>
{!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
</div>
</div>
</Card>
);
} else {
return (
<Card className={classes.card} onClick={() => onCardClick(bridge)}>
<div className={classes.top}>
<div className={classes.row}>
<p className={classes.steps}>STEP 2/2</p>
</div>
<div className={classes.infoContainer}>
<div className={classes.circle}>{BridgeIcon}</div>
<div className={classes.info}>
<div className={classes.row}>
{BridgeLabel}
{fiatAmountString && BridgeAmount}
</div>
<div className={classes.row}>
{BridgeStatus}
{fiatAmountString && FiatAmount}
</div>
</div>
{!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
</div>
</div>
<div className={classes.bottom}>
{networkError ? (
<ErrorMessage error={`Switch to ${to.name} to continue`} type="body2" />
) : (
<Typography type="body2">Signature required to finalise the bridge</Typography>
)}
<button
className={classes.finaliseButton}
disabled={isFinaliseDisabled}
onClick={onClaimButtonClick}
>
Finalise
</button>
</div>
</Card>
);
}
}
case "completed": {
return (
<Card className={classes.card} onClick={() => onCardClick(bridge)}>
<div className={classes.top}>
<div className={classes.infoContainer}>
<div className={classes.circle}>{BridgeIcon}</div>
<div className={classes.info}>
<div className={classes.row}>
{BridgeLabel}
{fiatAmountString && BridgeAmount}
</div>
<div className={classes.row}>
{BridgeStatus}
{fiatAmountString && FiatAmount}
</div>
</div>
{!fiatAmountString && <div className={classes.amount}>{BridgeAmount}</div>}
</div>
</div>
{!fiatAmountString && <div className={classes.amount}>{bridgeAmount}</div>}
</div>
</div>
{status === "initiated" && (
<div className={classes.bottom}>
{from.key === "ethereum" ? (
<Typography type="body2">Step 2 will require signature</Typography>
) : (
<Typography type="body2">{remainingBatchesMsg}</Typography>
)}
<button className={classes.finaliseButton} disabled>
Finalise
</button>
</div>
)}
{status === "on-hold" && (
<div className={classes.bottom}>
{networkError ? (
<ErrorMessage error={`Switch to ${to.name} to continue`} type="body2" />
) : (
<Typography type="body2">Signature required to finalise the bridge</Typography>
)}
<button
className={classes.finaliseButton}
disabled={isFinaliseDisabled}
onClick={onClick}
>
Finalise
</button>
</div>
)}
</Card>
);
</Card>
);
}
}
};
4 changes: 2 additions & 2 deletions src/views/bridge-details/bridge-details.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ export const BridgeDetails: FC = () => {
</Typography>
<Typography className={classes.alignRow} type="body1">
<span className={dotClass} />
{getBridgeStatus(status)}
{getBridgeStatus(status, from)}
</Typography>
</div>
<div className={classes.row}>
Expand Down Expand Up @@ -388,7 +388,7 @@ export const BridgeDetails: FC = () => {
</div>
)}
</Card>
{(status === "initiated" || status === "on-hold") && (
{(status === "initiated" || (status === "on-hold" && from.key === "polygon-zkevm")) && (
<div className={classes.finaliseRow}>
<Button
disabled={status === "initiated" || isFinaliseButtonDisabled}
Expand Down
14 changes: 11 additions & 3 deletions src/views/home/components/deposit-warning-modal/deposit-warning-modal.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,15 @@ import { Theme } from "src/styles/theme";

export const useDepositWarningModalStyles = createUseStyles((theme: Theme) => ({
background: {
alignItems: "flex-start",
alignItems: "center",
background: theme.palette.transparency,
display: "flex",
height: "100vh",
justifyContent: "center",
width: "100%",
[theme.breakpoints.upSm]: {
alignItems: "flex-start",
},
},
cancelButton: {
"&:hover": {
Expand All @@ -26,10 +29,15 @@ export const useDepositWarningModalStyles = createUseStyles((theme: Theme) => ({
card: {
display: "flex",
flexDirection: "column",
marginTop: theme.spacing(30),
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
maxWidth: 510,
padding: theme.spacing(4),
padding: theme.spacing(3),
width: "100%",
[theme.breakpoints.upSm]: {
marginTop: theme.spacing(30),
padding: theme.spacing(4),
},
},
exampleText: {
userSelect: "none",
Expand Down
Loading

0 comments on commit 7c84791

Please sign in to comment.