From 1561fe866b5a21b47a30bd742858fb0526c2ceed Mon Sep 17 00:00:00 2001 From: Victorien Gauch <85494462+VGau@users.noreply.github.com> Date: Wed, 18 Sep 2024 13:13:52 +0200 Subject: [PATCH 01/60] Fix(3102): feedback fixes (#40) * feat: add FAQ page * fix: update faq content and rephrase some faq titles * fix: add spacing between paragraph * fix: remove padding for list in collapse component * fix: update gasFees calculation and fix typos * fix: dollars prices display issue * fix: disable e2e tess * fix: change bridge ui e2e tests machine --- .github/workflows/bridge-ui-e2e-tests.yml | 2 +- bridge-ui/src/assets/icons/swap.svg | 2 +- bridge-ui/src/components/bridge/Amount.tsx | 17 ++-- bridge-ui/src/components/bridge/Bridge.tsx | 29 +++++-- .../src/components/bridge/BridgeLayout.tsx | 5 +- .../components/bridge/FromChainDropdown.tsx | 6 +- .../src/components/bridge/ReceivedAmount.tsx | 9 ++- bridge-ui/src/components/bridge/Recipient.tsx | 12 ++- .../src/components/bridge/ToChainDropdown.tsx | 8 +- .../src/components/bridge/TokenDetails.tsx | 6 +- bridge-ui/src/components/bridge/fees/Fees.tsx | 49 +++++++++--- .../modals/TransactionConfirmationModal.tsx | 2 +- .../layouts/header/dropdowns/Chains.tsx | 34 +++++--- .../modals/TransactionClaimButton.tsx | 4 +- .../modals/TransactionDetailsModal.tsx | 79 +++++++++++++------ bridge-ui/src/config/config.ts | 2 +- bridge-ui/src/hooks/index.ts | 5 +- ...onManagement.ts => useClaimTransaction.ts} | 4 +- bridge-ui/src/hooks/useMessageStatus.ts | 2 +- bridge-ui/src/hooks/useReceivedAmount.tsx | 15 ++-- bridge-ui/src/models/bridge.ts | 3 +- bridge-ui/test/e2e/bridge-l1-l2.spec.ts | 8 +- 22 files changed, 204 insertions(+), 99 deletions(-) rename bridge-ui/src/hooks/{useTransactionManagement.ts => useClaimTransaction.ts} (97%) diff --git a/.github/workflows/bridge-ui-e2e-tests.yml b/.github/workflows/bridge-ui-e2e-tests.yml index 16b61745a..7929f01c8 100644 --- a/.github/workflows/bridge-ui-e2e-tests.yml +++ b/.github/workflows/bridge-ui-e2e-tests.yml @@ -14,7 +14,7 @@ on: jobs: run-e2e-tests: - runs-on: ubuntu-22.04-16core + runs-on: ubuntu-22.04 steps: - name: Checkout uses: actions/checkout@v4 diff --git a/bridge-ui/src/assets/icons/swap.svg b/bridge-ui/src/assets/icons/swap.svg index f5a5136a0..0f1cf7c55 100644 --- a/bridge-ui/src/assets/icons/swap.svg +++ b/bridge-ui/src/assets/icons/swap.svg @@ -1,4 +1,4 @@ - + {networkType === NetworkType.MAINNET && ( - $ + {amount && tokenPrices?.[tokenAddress]?.usd ? `${(Number(amount) * tokenPrices?.[tokenAddress]?.usd).toLocaleString("en-US", { - minimumFractionDigits: 2, - maximumFractionDigits: 10, + style: "currency", + currency: "USD", + maximumFractionDigits: 4, })}` - : "0.00"} + : "$0.00"} )} diff --git a/bridge-ui/src/components/bridge/Bridge.tsx b/bridge-ui/src/components/bridge/Bridge.tsx index 56a25f2e7..797722457 100644 --- a/bridge-ui/src/components/bridge/Bridge.tsx +++ b/bridge-ui/src/components/bridge/Bridge.tsx @@ -18,7 +18,6 @@ import { BridgeForm, Transaction } from "@/models"; import { useChainStore } from "@/stores/chainStore"; import { NetworkLayer, TokenType } from "@/config"; import { useBridge, useSwitchNetwork, useFetchHistory } from "@/hooks"; -import { parseEther } from "viem"; import TokenList from "./TokenList"; import { toast } from "react-toastify"; import { ERC20Stepper } from "./ERC20Stepper"; @@ -31,13 +30,19 @@ import TransactionConfirmationModal from "./modals/TransactionConfirmationModal" const Bridge = () => { const [waitingTransaction, setWaitingTransaction] = useState(); const { handleShow, handleClose } = useContext(ModalContext); - const { fromChain, token, networkLayer } = useChainStore((state) => ({ + const { + fromChain, + token, + networkLayer, + switchChain: switchChainInStore, + } = useChainStore((state) => ({ fromChain: state.fromChain, token: state.token, networkLayer: state.networkLayer, + switchChain: state.switchChain, })); - const { handleSubmit, watch, reset } = useFormContext(); + const { handleSubmit, watch, reset, setValue } = useFormContext(); const [amount, bridgingAllowed, claim] = watch(["amount", "bridgingAllowed", "claim"]); @@ -76,6 +81,10 @@ const Bridge = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [hash]); + useEffect(() => { + setValue("gasFees", fees.transactionFeeInWei); + }, [fees.transactionFeeInWei, setValue]); + // Clear tx waiting when changing account useEffect(() => { setWaitingTransaction(undefined); @@ -123,7 +132,7 @@ const Bridge = () => { const onSubmit = async (data: BridgeForm) => { if (isLoading || isWaitingLoading) return; await switchChain(); - bridge(data.amount, parseEther(data.minFees), data.recipient); + bridge(data.amount, data.minFees, data.recipient); }; return ( @@ -150,7 +159,17 @@ const Bridge = () => {
- +
diff --git a/bridge-ui/src/components/bridge/BridgeLayout.tsx b/bridge-ui/src/components/bridge/BridgeLayout.tsx index fcb3e5cf0..dc1d19f35 100644 --- a/bridge-ui/src/components/bridge/BridgeLayout.tsx +++ b/bridge-ui/src/components/bridge/BridgeLayout.tsx @@ -20,7 +20,10 @@ export default function BridgeLayout() { token: configContextValue?.UNKNOWN[0], claim: token?.type === TokenType.ETH ? "auto" : "manual", amount: "", - minFees: "0", + minFees: 0n, + gasFees: 0n, + bridgingAllowed: false, + balance: "0", }, }); diff --git a/bridge-ui/src/components/bridge/FromChainDropdown.tsx b/bridge-ui/src/components/bridge/FromChainDropdown.tsx index a6aebb516..8149de7e8 100644 --- a/bridge-ui/src/components/bridge/FromChainDropdown.tsx +++ b/bridge-ui/src/components/bridge/FromChainDropdown.tsx @@ -49,7 +49,9 @@ export default function FromChainDropdown() { style={{ width: "18px", height: "auto" }} /> )} - {fromChain?.name} + + {fromChain?.name === "Linea Sepolia Testnet" ? "Linea Sepolia" : fromChain?.name} +