From 48f283fa835f7703dad5a993bc8f38ddd3df6032 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 19 Mar 2024 15:25:43 +0100 Subject: [PATCH 1/6] Replace fxdx logo with Curve logo --- .../Landing/components/LandingPagePartnersSection.tsx | 10 +++++----- src/static/images/curve-logo.svg | 1 + src/static/images/fxdx-logo.svg | 1 - 3 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 src/static/images/curve-logo.svg delete mode 100644 src/static/images/fxdx-logo.svg diff --git a/src/pages/Landing/components/LandingPagePartnersSection.tsx b/src/pages/Landing/components/LandingPagePartnersSection.tsx index 639f5e36..1de7a666 100644 --- a/src/pages/Landing/components/LandingPagePartnersSection.tsx +++ b/src/pages/Landing/components/LandingPagePartnersSection.tsx @@ -1,7 +1,7 @@ import { ComponentProps, FC } from "react" import { Flex, Text, Image } from "@chakra-ui/react" import aerodromeLogoSrc from "../../../static/images/aerodrome-logo.svg" -import fxdxLogoSrc from "../../../static/images/fxdx-logo.svg" +import curveLogoSrc from "../../../static/images/curve-logo.svg" import balancerLogoSrc from "../../../static/images/balancer-logo.svg" import LandingPageContentWrapper from "./LandingPageContentWrapper" @@ -10,14 +10,14 @@ const partnersData = [ name: "Aerodrome", imageSrc: aerodromeLogoSrc, }, - { - name: "fxdx", - imageSrc: fxdxLogoSrc, - }, { name: "Balancer", imageSrc: balancerLogoSrc, }, + { + name: "Curve", + imageSrc: curveLogoSrc, + }, ] const LandingPagePartnersSection: FC< diff --git a/src/static/images/curve-logo.svg b/src/static/images/curve-logo.svg new file mode 100644 index 00000000..14704de5 --- /dev/null +++ b/src/static/images/curve-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/static/images/fxdx-logo.svg b/src/static/images/fxdx-logo.svg deleted file mode 100644 index eea4c184..00000000 --- a/src/static/images/fxdx-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 4e0199e1edc6383593ca305e100b0964fb474803 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 19 Mar 2024 15:59:24 +0100 Subject: [PATCH 2/6] Add missing `Toast` component at MakeDeposit step Modified `Toast` component: adjusted max-width and description word wrap conditions. Renamed toast width theme value. Added hourglass icon. Fixed DepositDetails 'safe-to-close' toast render condition. --- src/components/Toast/Toast.tsx | 13 +- src/pages/tBTC/Bridge/DepositDetails.tsx | 2 +- src/pages/tBTC/Bridge/Minting/MakeDeposit.tsx | 115 ++++++++++-------- src/static/icons/Hourglass.tsx | 18 +++ src/theme/index.ts | 2 +- 5 files changed, 92 insertions(+), 58 deletions(-) create mode 100644 src/static/icons/Hourglass.tsx diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx index 8e59c58a..82aa0674 100644 --- a/src/components/Toast/Toast.tsx +++ b/src/components/Toast/Toast.tsx @@ -11,6 +11,7 @@ import { Flex, Icon, Box, + ComponentWithAs, } from "@chakra-ui/react" import { FC, useEffect, useState } from "react" import { setTimeout, clearTimeout } from "../../utils/setTimeout" @@ -34,7 +35,7 @@ export interface ToastProps { isDismissable?: boolean orientation?: "horizontal" | "vertical" position?: PositionType - icon?: IconType + icon?: IconType | ComponentWithAs<"svg"> } type AlertProps = ToastProps & Omit & @@ -56,8 +57,8 @@ const getPositioningProps = (position: PositionType) => { } const getMaxWidth = (position: PositionType, isDismissable: boolean) => { - if (position === "center" && isDismissable) { - return "toast-width" + if (isDismissable && position === "center") { + return "toast-width-dismissable" } if (position !== "center") { return "toast-width-aside" @@ -133,7 +134,11 @@ const Toast: FC = ({ {description ?? title} diff --git a/src/pages/tBTC/Bridge/DepositDetails.tsx b/src/pages/tBTC/Bridge/DepositDetails.tsx index a14859ae..debc49b4 100644 --- a/src/pages/tBTC/Bridge/DepositDetails.tsx +++ b/src/pages/tBTC/Bridge/DepositDetails.tsx @@ -31,7 +31,7 @@ export const DepositDetails: PageComponent = () => { depositDetails: { isFetching, data, error }, } = useTbtcState() const [isSafelyCloseInfoToastVisible, setIsSafelyCloseInfoToastVisible] = - useState(depositDetailsStep !== "bitcoin-confirmations") + useState(!!depositDetailsStep) useSubscribeToOptimisticMintingRequestedEvent(depositKey) useSubscribeToOptimisticMintingFinalizedEvent(depositKey) diff --git a/src/pages/tBTC/Bridge/Minting/MakeDeposit.tsx b/src/pages/tBTC/Bridge/Minting/MakeDeposit.tsx index 455e25cb..8af08a20 100644 --- a/src/pages/tBTC/Bridge/Minting/MakeDeposit.tsx +++ b/src/pages/tBTC/Bridge/Minting/MakeDeposit.tsx @@ -23,6 +23,8 @@ import withOnlyConnectedWallet from "../../../../components/withOnlyConnectedWal import { ViewInBlockExplorerProps } from "../../../../components/ViewInBlockExplorer" import { Copy as CopyIcon } from "../../../../static/icons/Copy" import { MintDurationTiers } from "../../../../components/MintDurationTiers" +import { Toast } from "../../../../components/Toast" +import { Hourglass as HourglassIcon } from "../../../../static/icons/Hourglass" const AddressRow: FC< { address: string; text: string } & Pick @@ -116,60 +118,69 @@ const MakeDepositComponent: FC<{ useTbtcState() return ( - - - Use this generated address to send minimum{" "} - - 0.01 BTC - - , to mint as tBTC. This address is a uniquely generated address - based on the data you provided. - - } - afterDescription={ - - Action on Bitcoin - - } + <> + - - - - - Provided Addresses Recap - - - + + Use this generated address to send minimum{" "} + + 0.01 BTC + + , to mint as tBTC. This address is a uniquely generated address + based on the data you provided. + + } + afterDescription={ + + Action on Bitcoin + + } /> - - + + + + + Provided Addresses Recap + + + + + + ) } diff --git a/src/static/icons/Hourglass.tsx b/src/static/icons/Hourglass.tsx new file mode 100644 index 00000000..a89c81b7 --- /dev/null +++ b/src/static/icons/Hourglass.tsx @@ -0,0 +1,18 @@ +import { createIcon } from "@chakra-ui/icons" + +export const Hourglass = createIcon({ + displayName: "Hourglass", + defaultProps: { color: "white" }, + viewBox: "0 0 12 16", + path: ( + + + + ), +}) diff --git a/src/theme/index.ts b/src/theme/index.ts index 00abdedc..97af0be8 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -21,7 +21,7 @@ export const customBreakpoints = { export const customSizes = { "content-max-width": "89.25rem", // 1428px - "toast-width": "34.375rem", // 550px + "toast-width-dismissable": "34.375rem", // 550px "toast-width-aside": "25rem", // 400px } From a9cbb1e7749f565fbaa8c4d1f5ad6611514d388e Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 19 Mar 2024 16:22:47 +0100 Subject: [PATCH 3/6] Add option to hide modal close button Hid `TransactionIsWaitingForConfirmation` modal close button --- .../TransactionIsWaitingForConfirmation.tsx | 3 ++- src/components/Modal/withBaseModal.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Modal/TransactionModal/TransactionIsWaitingForConfirmation.tsx b/src/components/Modal/TransactionModal/TransactionIsWaitingForConfirmation.tsx index b8c283d0..d4031bf7 100644 --- a/src/components/Modal/TransactionModal/TransactionIsWaitingForConfirmation.tsx +++ b/src/components/Modal/TransactionModal/TransactionIsWaitingForConfirmation.tsx @@ -25,5 +25,6 @@ const TransactionIsWaitingForConfirmation: FC = ({ export default withBaseModal( TransactionIsWaitingForConfirmation, - "Waiting for confirmations" + "Waiting for confirmations", + true ) diff --git a/src/components/Modal/withBaseModal.tsx b/src/components/Modal/withBaseModal.tsx index 775739d1..300817f9 100644 --- a/src/components/Modal/withBaseModal.tsx +++ b/src/components/Modal/withBaseModal.tsx @@ -12,7 +12,8 @@ import { BaseModalProps } from "../../types" function withBaseModal( WrappedModalContent: ComponentType, - label?: string + label?: string, + removeCloseButton?: boolean ) { return (props: T) => { return ( @@ -42,7 +43,9 @@ function withBaseModal( {label} ) : null} - + {removeCloseButton ? null : ( + + )} From 56aee78b7193bb6fc0977bd16b17a10e0f401f91 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 19 Mar 2024 19:31:20 +0100 Subject: [PATCH 4/6] Fix minting success step UI Fixed container spacing, remove redundant mint value, slowed down the speed of confetti animation --- src/pages/tBTC/Bridge/DepositDetails.tsx | 32 ++++++++----------- .../Bridge/components/DepositDetailsStep.tsx | 1 + 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/pages/tBTC/Bridge/DepositDetails.tsx b/src/pages/tBTC/Bridge/DepositDetails.tsx index debc49b4..08a4b1d6 100644 --- a/src/pages/tBTC/Bridge/DepositDetails.tsx +++ b/src/pages/tBTC/Bridge/DepositDetails.tsx @@ -115,7 +115,7 @@ export const DepositDetails: PageComponent = () => { position="right" /> )} - + {depositDetailsStep !== "completed" && ( { tBTC - - + )} + )} diff --git a/src/pages/tBTC/Bridge/components/DepositDetailsStep.tsx b/src/pages/tBTC/Bridge/components/DepositDetailsStep.tsx index 4eaeb149..6ae5a6a4 100644 --- a/src/pages/tBTC/Bridge/components/DepositDetailsStep.tsx +++ b/src/pages/tBTC/Bridge/components/DepositDetailsStep.tsx @@ -216,6 +216,7 @@ export const SuccessStep: FC = ({ width={dimensions?.borderBox.width} height={dimensions?.borderBox.height} numberOfPieces={150} + gravity={0.05} drawShape={(ctx) => { // draw custom rectangular shapes with random sizes and opacity const width = randomRange(5, 20) From 9563a8e1e61eeafaaa901fd260099e285b53b5a1 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 19 Mar 2024 19:33:06 +0100 Subject: [PATCH 5/6] Fix `KnowledgeBaseLinks` component width --- src/pages/tBTC/Bridge/Minting/KnowledgeBaseLinks.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/tBTC/Bridge/Minting/KnowledgeBaseLinks.tsx b/src/pages/tBTC/Bridge/Minting/KnowledgeBaseLinks.tsx index 226faecb..35c7952d 100644 --- a/src/pages/tBTC/Bridge/Minting/KnowledgeBaseLinks.tsx +++ b/src/pages/tBTC/Bridge/Minting/KnowledgeBaseLinks.tsx @@ -99,7 +99,12 @@ export const KnowledgeBaseLinks: FC = ({ ].filter(Boolean) as BridgeProcessResourcesItemProps[] return ( - + {depositKey ? : null} From 34cf5723bccf83ffad66ea52bda3482429959951 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 19 Mar 2024 19:35:01 +0100 Subject: [PATCH 6/6] Update input component placeholder color --- src/components/Forms/FormikInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Forms/FormikInput.tsx b/src/components/Forms/FormikInput.tsx index c9a3c5ce..b76b8241 100644 --- a/src/components/Forms/FormikInput.tsx +++ b/src/components/Forms/FormikInput.tsx @@ -66,7 +66,7 @@ export const FormikInput: FC< isInvalid={isError} errorBorderColor="red.300" placeholder={placeholder} - _placeholder={{ color: "hsla(0, 0%, 100%, 30%)" }} + _placeholder={{ color: "hsla(0, 0%, 100%, 40%)" }} _readOnly={{ bg: "hsla(0, 0%, 20%, 30%)", borderColor: "hsl(0, 0%, 20%)",