From dbf1044aff5ca49777c7f8725987165b7fdc14f6 Mon Sep 17 00:00:00 2001 From: Don Mosites Date: Wed, 11 Dec 2024 10:30:24 +0100 Subject: [PATCH 1/2] flow and language review for rfq wip --- public/locales/en/translation.json | 13 ++- .../@widgets/MakeWidget/helpers/index.ts | 2 +- .../QuoteText/QuoteText.styles.tsx | 1 + .../subcomponents/QuoteText/QuoteText.tsx | 2 +- .../ApprovalSubmittedScreen.tsx | 25 ++-- .../OrderSubmittedScreen.styles.tsx | 16 ++- .../OrderSubmittedScreen.tsx | 110 +++++++++--------- .../TransactionLink/TransactionLink.style.tsx | 2 +- .../TransactionLink/TransactionLink.tsx | 2 +- src/styled-components/Overlay/Overlay.tsx | 8 +- 10 files changed, 98 insertions(+), 83 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 2acd045a..c77b1229 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -107,7 +107,7 @@ "requiredApprovalAmount": "Required approval", "approveTokenInYourWallet": "Approve token in your wallet", "approvalComplete": "Approved", - "approvalProcessing": "Approval processing...", + "approvalProcessing": "Approving swap...", "areYouSureYouWantToCancel": "Are you sure you want to cancel?", "availableOrders": "Available orders", "bestQuote": "Best quote", @@ -135,9 +135,9 @@ "findingBestPrice": "Fetching available prices...", "from": "From", "gasCost": "Gas cost", - "gasFreeTrade": "Gasless swap", + "gasFreeTrade": "Gasless", "getAPrice": "Get prices from online servers", - "insufficientBalance": "Insufficient {{symbol}} balance", + "insufficientBalance": "Insufficient balance", "listed": "Listed", "listingType": "Listing type", "makeAnOrder": "Make an order", @@ -191,9 +191,10 @@ "track": "Track", "trackTransaction": "View in transaction history", "transactionCompleted": "Swap complete", - "transactionSent": "Sending order...", - "transactionSentToMaker": "Sending order to the maker", - "transactionSubmitted": "Swap processing...", + "orderSent": "Sending order...", + "orderSentToMaker": "Sending order to the maker", + "orderSubmitted": "Order submitted...", + "orderSubmittedByMaker": "Maker has submitted order", "unableTake": "Unable to take", "viewAllQuotes": "View all quotes", "wrapMessage": "No protocol fee for ETH/WETH swaps", diff --git a/src/components/@widgets/MakeWidget/helpers/index.ts b/src/components/@widgets/MakeWidget/helpers/index.ts index 7ec44038..1cd3807c 100644 --- a/src/components/@widgets/MakeWidget/helpers/index.ts +++ b/src/components/@widgets/MakeWidget/helpers/index.ts @@ -52,7 +52,7 @@ export const getActionButtonTranslation = ( } if (hasInsufficientBalance) { - return i18n.t("orders.insufficientBalance", { symbol: makerTokenSymbol }); + return i18n.t("orders.insufficientBalance"); } if (shouldDepositNativeToken) { diff --git a/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.styles.tsx b/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.styles.tsx index 45e4bcbd..3b00f7f2 100644 --- a/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.styles.tsx +++ b/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.styles.tsx @@ -12,6 +12,7 @@ export const Container = styled.div` export const GasFreeButton = styled.button` color: ${(props) => props.theme.colors.lightGrey}; + text-transform: uppercase; &:hover, &:focus { diff --git a/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.tsx b/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.tsx index c52b37ed..05df269e 100644 --- a/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.tsx +++ b/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.tsx @@ -28,7 +28,7 @@ const QuoteText: FC = ({ return ( - {t("orders.gasFreeTrade")} + {t("orders.gasFreeTrade")} ♻️ ); diff --git a/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx b/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx index 80d4e337..10b2e761 100644 --- a/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx +++ b/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx @@ -46,24 +46,27 @@ const ApprovalSubmittedScreen: FC = ({ transform: isAnimatedToCenter ? "translateY(5rem)" : "translateY(0)", }} > - - {isSucceeded ? : } - + {isSucceeded ? ( + + + + ) : ( + + )} {isSucceeded ? t("orders.approvalComplete") : t("orders.approvalProcessing")} - {t("orders.trackTransaction")} + {transaction?.hash && chainId && ( + + )} - {transaction?.hash && chainId && ( - - )} ); }; diff --git a/src/components/OrderSubmittedScreen/OrderSubmittedScreen.styles.tsx b/src/components/OrderSubmittedScreen/OrderSubmittedScreen.styles.tsx index 29ba0fce..c7e16470 100644 --- a/src/components/OrderSubmittedScreen/OrderSubmittedScreen.styles.tsx +++ b/src/components/OrderSubmittedScreen/OrderSubmittedScreen.styles.tsx @@ -6,8 +6,6 @@ import { } from "../../styled-components/Overlay/Overlay"; import Button from "../Button/Button"; import Icon from "../Icon/Icon"; -import TransactionLink from "../TransactionLink/TransactionLink"; -import { InfoHeading, InfoSubHeading } from "../Typography/Typography"; export const Container = styled.div` display: flex; @@ -33,13 +31,18 @@ export const StyledOverlayTitle = styled(OverlayTitle)` } `; -export const StyledTransactionLink = styled(TransactionLink)` - margin-top: 2.5rem; +export const IconWrapper = styled.div` + display: flex; + align-items: flex-end; + justify-content: center; + position: relative; + width: 3.6875rem; + height: 3.6875rem; `; export const StyledIcon = styled(Icon)` - width: 3.6875rem; - height: 3.6875rem; + width: 100%; + height: 100%; color: ${({ theme }) => theme.name === "dark" ? theme.colors.white : theme.colors.primary}; @@ -53,6 +56,7 @@ export const ButtonsContainer = styled.div` display: flex; justify-content: center; gap: 1rem; + padding-top: 2rem; `; const ButtonStyle = css` diff --git a/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx b/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx index 6852cd02..e4805914 100644 --- a/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx +++ b/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx @@ -3,18 +3,18 @@ import { useTranslation } from "react-i18next"; import { SubmittedTransaction } from "../../entities/SubmittedTransaction/SubmittedTransaction"; import { + OverlayContainer, + OverlayLoader, OverlaySubHeading, OverlayTitle, + OverlayTransactionLink, } from "../../styled-components/Overlay/Overlay"; import { TransactionStatusType } from "../../types/transactionTypes"; import { ButtonsContainer, - Container, - InfoContainer, + IconWrapper, MakeNewOrderButton, StyledIcon, - StyledOverlayTitle, - StyledTransactionLink, TrackTransactionButton, } from "./OrderSubmittedScreen.styles"; @@ -39,57 +39,63 @@ const OrderSubmittedScreen: FC = ({ }) => { const { t } = useTranslation(); + const isSucceeded = transaction?.status === TransactionStatusType.succeeded; + return ( - - - - {isSendingOrder && ( - <> - - {t("orders.transactionSent")} - - - {t("orders.transactionSentToMaker")} - - - )} - {transaction?.status === TransactionStatusType.processing && ( - <> - - {t("orders.transactionSubmitted")} - - - {t("orders.trackTransaction")} - - - )} - {transaction?.status === TransactionStatusType.succeeded && ( - - {t("orders.transactionCompleted")} - - )} - {transaction?.hash && chainId && ( - - )} - - - - {t("orders.makeNewSwap")} - + + {isSucceeded ? ( + + + + ) : ( + + )} + {isSendingOrder && ( + <> + {t("orders.orderSent")} + {t("orders.orderSentToMaker")} + + )} + {transaction?.status === TransactionStatusType.processing && ( + <> + {t("orders.orderSubmitted")} + + {(transaction?.hash && chainId && ( + + )) || + t("orders.orderSubmittedByMaker")} + + + )} + {isSucceeded && ( + + {t("orders.transactionCompleted")} + + )} - {showTrackTransactionButton && ( - + - {t("orders.track")} - - )} - - + {t("orders.makeNewSwap")} + + + {showTrackTransactionButton && ( + + {t("orders.track")} + + )} + + )} + ); }; diff --git a/src/components/TransactionLink/TransactionLink.style.tsx b/src/components/TransactionLink/TransactionLink.style.tsx index 181b9d96..18199144 100644 --- a/src/components/TransactionLink/TransactionLink.style.tsx +++ b/src/components/TransactionLink/TransactionLink.style.tsx @@ -8,7 +8,7 @@ export const Link = styled.a` flex-direction: row-reverse; align-items: center; gap: 0.5rem; - padding: 0.25rem; + padding: 0 0.25rem; color: ${(props) => props.theme.colors.lightGrey}; &:hover { diff --git a/src/components/TransactionLink/TransactionLink.tsx b/src/components/TransactionLink/TransactionLink.tsx index 74807175..b37ecae4 100644 --- a/src/components/TransactionLink/TransactionLink.tsx +++ b/src/components/TransactionLink/TransactionLink.tsx @@ -32,8 +32,8 @@ const TransactionLink = ({ aria-label={t("wallet.transactionLink")} href={receiptUrl} > - {!hideLabel && } + {!hideLabel && } ); }; diff --git a/src/styled-components/Overlay/Overlay.tsx b/src/styled-components/Overlay/Overlay.tsx index 11a634fe..a780c7c3 100644 --- a/src/styled-components/Overlay/Overlay.tsx +++ b/src/styled-components/Overlay/Overlay.tsx @@ -14,7 +14,7 @@ export const OverlayContainer = styled.div` `; export const OverlayTitle = styled(Title)<{ isFocused?: boolean }>` - margin-block-start: 1rem; + margin-block-start: 1.75rem; font-size: 1.875rem; color: ${({ theme }) => theme.colors.carteBlanche}; @@ -39,7 +39,7 @@ export const OverlaySubHeading = styled(InfoSubHeading)<{ isHidden?: boolean }>` export const OverlayTransactionLink = styled(TransactionLink)<{ isHidden?: boolean; }>` - margin-top: 2.5rem; + margin-top: 0rem; transition: opacity 0.3s ease-in; ${({ isHidden }) => isHidden && "opacity: 0; pointer-events: none;"} @@ -52,8 +52,8 @@ const spin = keyframes` `; export const OverlayLoader = styled.div` - width: 2.375rem; - height: 2.375rem; + width: 3.6875rem; + height: 3.6875rem; border-radius: 50%; border: 4px solid; border-color: #475777; From f15d196c27b72d54123dcfb4cd34bd7881f1dfac Mon Sep 17 00:00:00 2001 From: Don Mosites Date: Wed, 11 Dec 2024 22:25:38 +0100 Subject: [PATCH 2/2] bump widget width to fit content --- src/components/WidgetFrame/WidgetFrame.styles.tsx | 6 +++--- src/style/sizes.ts | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/WidgetFrame/WidgetFrame.styles.tsx b/src/components/WidgetFrame/WidgetFrame.styles.tsx index 30bd901c..87b8d350 100644 --- a/src/components/WidgetFrame/WidgetFrame.styles.tsx +++ b/src/components/WidgetFrame/WidgetFrame.styles.tsx @@ -8,9 +8,9 @@ export const WidgetFrameWrapper = styled.div` flex-direction: column; border-radius: 0.25rem; margin: 0 ${sizes.pageMobilePadding}; - width: ${sizes.widgetSize}; + width: ${sizes.widgetWidth}; height: fit-content; - min-height: ${sizes.widgetSize}; + min-height: ${sizes.widgetHeight}; padding: ${sizes.tradeContainerPadding}; @media ${breakPoints.phoneOnly} { @@ -32,7 +32,7 @@ export const StyledWidgetFrame = styled.div` justify-content: center; width: 100%; height: 100%; - min-height: ${sizes.widgetSize}; + min-height: ${sizes.widgetHeight}; overflow-y: ${(props) => (props.$isOverlayOpen ? "auto" : "hidden")}; @media ${breakPoints.phoneOnly}, ${breakPoints.shallowScreenOnly} { diff --git a/src/style/sizes.ts b/src/style/sizes.ts index 075d1e63..79ef288f 100644 --- a/src/style/sizes.ts +++ b/src/style/sizes.ts @@ -5,6 +5,7 @@ export const sizes = { tradeContainerPadding: "3.75rem", tradeContainerMobilePadding: "1.25rem", widgetGutter: "1rem", - widgetSize: "34.5rem", + widgetHeight: "34.5rem", + widgetWidth: "37.5rem", widgetMobileSize: "27.75rem", };