RFQ Review

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",

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) {

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 {

src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.tsx

@@ -28,7 +28,7 @@ const QuoteText: FC<QuoteTextProps> = ({
     return (
       <Container className={className}>
         <GasFreeButton onClick={onGasFreeTradeButtonClick}>
-          {t("orders.gasFreeTrade")}
+          {t("orders.gasFreeTrade")} ♻️
         </GasFreeButton>
       </Container>
     );

src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx

@@ -46,24 +46,27 @@ const ApprovalSubmittedScreen: FC<ApprovalSubmittedScreenProps> = ({
         transform: isAnimatedToCenter ? "translateY(5rem)" : "translateY(0)",
       }}
     >
-      <IconWrapper>
-        {isSucceeded ? <StyledIcon name="check-circle" /> : <OverlayLoader />}
-      </IconWrapper>
+      {isSucceeded ? (
+        <IconWrapper>
+          <StyledIcon name="check-circle" />
+        </IconWrapper>
+      ) : (
+        <OverlayLoader />
+      )}
       <OverlayTitle type="h2">
         {isSucceeded
           ? t("orders.approvalComplete")
           : t("orders.approvalProcessing")}
       </OverlayTitle>
       <OverlaySubHeading isHidden={isSucceeded}>
-        {t("orders.trackTransaction")}
+        {transaction?.hash && chainId && (
+          <OverlayTransactionLink
+            isHidden={isSucceeded}
+            chainId={chainId}
+            hash={transaction.hash}
+          />
+        )}
       </OverlaySubHeading>
-      {transaction?.hash && chainId && (
-        <OverlayTransactionLink
-          isHidden={isSucceeded}
-          chainId={chainId}
-          hash={transaction.hash}
-        />
-      )}
     </OverlayContainer>
   );
 };

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`

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<OrderSubmittedInfoProps> = ({
 }) => {
   const { t } = useTranslation();
 
+  const isSucceeded = transaction?.status === TransactionStatusType.succeeded;
+
   return (
-    <Container className={className}>
-      <InfoContainer>
-        <StyledIcon name="check-circle" />
-        {isSendingOrder && (
-          <>
-            <StyledOverlayTitle type="h2">
-              {t("orders.transactionSent")}
-            </StyledOverlayTitle>
-            <OverlaySubHeading>
-              {t("orders.transactionSentToMaker")}
-            </OverlaySubHeading>
-          </>
-        )}
-        {transaction?.status === TransactionStatusType.processing && (
-          <>
-            <StyledOverlayTitle type="h2">
-              {t("orders.transactionSubmitted")}
-            </StyledOverlayTitle>
-            <OverlaySubHeading>
-              {t("orders.trackTransaction")}
-            </OverlaySubHeading>
-          </>
-        )}
-        {transaction?.status === TransactionStatusType.succeeded && (
-          <OverlayTitle type="h2">
-            {t("orders.transactionCompleted")}
-          </OverlayTitle>
-        )}
-        {transaction?.hash && chainId && (
-          <StyledTransactionLink chainId={chainId} hash={transaction.hash} />
-        )}
-      </InfoContainer>
-      <ButtonsContainer>
-        <MakeNewOrderButton
-          intent="primary"
-          onClick={onMakeNewOrderButtonClick}
-        >
-          {t("orders.makeNewSwap")}
-        </MakeNewOrderButton>
+    <OverlayContainer className={className}>
+      {isSucceeded ? (
+        <IconWrapper>
+          <StyledIcon name="check-circle" />
+        </IconWrapper>
+      ) : (
+        <OverlayLoader />
+      )}
+      {isSendingOrder && (
+        <>
+          <OverlayTitle type="h2">{t("orders.orderSent")}</OverlayTitle>
+          <OverlaySubHeading>{t("orders.orderSentToMaker")}</OverlaySubHeading>
+        </>
+      )}
+      {transaction?.status === TransactionStatusType.processing && (
+        <>
+          <OverlayTitle type="h2">{t("orders.orderSubmitted")}</OverlayTitle>
+          <OverlaySubHeading>
+            {(transaction?.hash && chainId && (
+              <OverlayTransactionLink
+                chainId={chainId}
+                hash={transaction.hash}
+              />
+            )) ||
+              t("orders.orderSubmittedByMaker")}
+          </OverlaySubHeading>
+        </>
+      )}
+      {isSucceeded && (
+        <OverlayTitle type="h2">
+          {t("orders.transactionCompleted")}
+        </OverlayTitle>
+      )}
 
-        {showTrackTransactionButton && (
-          <TrackTransactionButton
-            intent="neutral"
-            onClick={onTrackTransactionButtonClick}
+      {isSucceeded && (
+        <ButtonsContainer>
+          <MakeNewOrderButton
+            intent="primary"
+            onClick={onMakeNewOrderButtonClick}
           >
-            {t("orders.track")}
-          </TrackTransactionButton>
-        )}
-      </ButtonsContainer>
-    </Container>
+            {t("orders.makeNewSwap")}
+          </MakeNewOrderButton>
+
+          {showTrackTransactionButton && (
+            <TrackTransactionButton
+              intent="neutral"
+              onClick={onTrackTransactionButtonClick}
+            >
+              {t("orders.track")}
+            </TrackTransactionButton>
+          )}
+        </ButtonsContainer>
+      )}
+    </OverlayContainer>
   );
 };
 

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 {

src/components/TransactionLink/TransactionLink.tsx

@@ -32,8 +32,8 @@ const TransactionLink = ({
       aria-label={t("wallet.transactionLink")}
       href={receiptUrl}
     >
-      {!hideLabel && <Label>{t("wallet.transactionLink")}</Label>}
       <StyledIcon iconSize={1} name="transaction-link" />
+      {!hideLabel && <Label>{t("wallet.transactionLink")}</Label>}
     </Link>
   );
 };

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<StyledTradeContainerProps>`
   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} {

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",
 };

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;