RFQ redesign

public/locales/en/translation.json

@@ -87,9 +87,9 @@
     "counterParty.specify.paragraph": "If you specify a counterparty wallet address, only that wallet will be able to take the swap. This protects against front-running and ensures only the intended counterparty can take it.",
     "counterParty.specify.title": "Specify",
     "counterParty.title": "Counterparty Wallets",
-    "gasFreeSwaps.paragraph": "You found a gasless swap!",
+    "gasFreeSwaps.paragraph": "You found a gas free swap!",
     "gasFreeSwaps.paragraph2": "Some swaps do not require you to pay gas because the transaction is handled by the maker. You'll still need to sign the swap using your wallet to proceed.",
-    "gasFreeSwaps.title": "Gasless swaps",
+    "gasFreeSwaps.title": "Gas free swap",
     "join.ambassador": "Ambassador",
     "join.author": "Author",
     "join.developer": "Developer",
@@ -103,8 +103,7 @@
   },
   "marketing": {
     "includesFee": "Includes 0.07% fee",
-    "welcomeHeading": "Secure and efficient P2P swaps",
-    "welcomeMessage": "Zero slippage atomic swaps"
+    "welcomeMessage": "Swap now with zero slippage."
   },
   "orders": {
     "actionCannotBeReversed": "This action cannot be reversed",
@@ -142,15 +141,15 @@
     "findingBestPrice": "Finding the best prices...",
     "from": "From",
     "gasCost": "Gas cost",
-    "gasFreeTrade": "Gasless swap",
+    "gasFreeTrade": "Gas free swap",
     "insufficientBalance": "Insufficient {{symbol}} balance",
     "listed": "Listed",
     "listingType": "Listing type",
     "makeNewOrder": "New order",
     "makeNewSwap": "New swap",
     "moreInformation": "More information",
     "nativeCurrencyMaxInfoText": "{{amount}}. This amount is calculated after subtracting a {{fee}} gas fee from your total balance.",
-    "newQuoteIn": "New Quote In",
+    "newQuoteIn": "New quote in",
     "noIndexerOrdersFound": "No orders found for this token pair",
     "noIndexersFound": "No indexer nodes found",
     "orderSuccessfullyCreated": "Order successfully created.",

public/locales/nl/translation.json

@@ -41,9 +41,9 @@
         "vote": "Stem"
     },
     "information": {
-        "gasFreeSwaps.paragraph": "Je hebt een gasless swap gevonden!",
+        "gasFreeSwaps.paragraph": "Je hebt een gas free swap gevonden!",
         "gasFreeSwaps.paragraph2": "Bij sommige swaps is het niet nodig om een gas fee te betalen omdat de transactie wordt afgehandeld door de maker. Je moet nog wel de swap ondertekenen met je wallet op verder te kunnen gaan.",
-        "gasFreeSwaps.title": "Gasless swaps",
+        "gasFreeSwaps.title": "Gas free swaps",
         "join.ambassador": "Ambassadeur",
         "join.author": "Auteur",
         "join.developer": "Ontwikkelaar",
@@ -81,7 +81,7 @@
         "findingBestPrice": "Zoeken naar de beste prijzen...",
         "from": "Van",
         "gasCost": "Gas kosten",
-        "gasFreeTrade": "Gasless swap",
+        "gasFreeTrade": "Gas free swap",
         "insufficientBalance": "Onvoldoende {{symbol}} balans",
         "moreInformation": "Meer informatie",
         "newQuoteIn": "Nieuwe prijsopgave in",

src/components/@widgets/SwapWidget/SwapWidget.styles.tsx

@@ -18,13 +18,14 @@ export const WelcomeMessage = styled.h2`
   font-size: 1.125rem;
 `;
 
-export const InfoContainer = styled.div`
+export const InfoContainer = styled.div<{ hasQuoteText: boolean }>`
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  justify-content: ${(props) =>
+    props.hasQuoteText ? "space-between" : "center"};
   align-items: center;
   gap: 0.25rem;
-  margin-block-start: 1rem;
+  margin-block-start: 2rem;
+  padding-inline: 1rem;
   text-align: center;
 `;
 
@@ -36,7 +37,7 @@ export const ButtonContainer = styled.div`
   display: flex;
   justify-content: center;
   gap: 1.25rem;
-  margin-top: 1.5rem;
+  margin-top: 2rem;
 `;
 
 export const StyledSwapWidget = styled.div`
@@ -49,7 +50,7 @@ export const StyledSwapWidget = styled.div`
 export const StyledWalletProviderList = styled(WalletProviderList)``;
 
 export const StyledDebugMenu = styled(DebugMenu)`
-  margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
 `;
 
 export default StyledSwapWidget;

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

@@ -105,6 +105,7 @@ import ActionButtons, {
   ButtonActions,
 } from "./subcomponents/ActionButtons/ActionButtons";
 import InfoSection from "./subcomponents/InfoSection/InfoSection";
+import QuoteText from "./subcomponents/QuoteText/QuoteText";
 
 export enum SwapWidgetState {
   overview = "overview",
@@ -559,15 +560,7 @@ const SwapWidget: FC = () => {
   return (
     <>
       <StyledSwapWidget>
-        <StyledHeader
-          isLastLook={quote.bestOrderType === ProtocolIds.LastLookERC20}
-          title={isApproving ? t("orders.approve") : t("common.rfq")}
-          isQuote={!hasSubmittedTransaction}
-          onGasFreeTradeButtonClick={() => setShowGasFeeInfo(true)}
-          expiry={quote.bestOrder?.expiry}
-        />
-
-        <WelcomeMessage>{t("marketing.welcomeMessage")}</WelcomeMessage>
+        <StyledHeader />
 
         {isDebugMode && <StyledDebugMenu />}
         {!isApproving && (
@@ -598,25 +591,28 @@ const SwapWidget: FC = () => {
             onSwitchTokensButtonClick={handleSwitchTokensButtonClick}
           />
         )}
-        <InfoContainer>
+        <InfoContainer hasQuoteText={!!quote.bestOrder}>
           <InfoSection
             failedToFetchAllowances={isAllowancesOrBalancesFailed}
             hasSelectedCustomServer={!!customServerUrl}
-            isApproving={isApproving}
             isConnected={isActive}
             isFetchingOrders={quote.isLoading}
             isNetworkUnsupported={!isNetworkSupported}
-            isWrapping={isWrapping}
-            showViewAllQuotes={indexerOrders.length > 0}
             bestQuote={quote.bestQuote}
             baseTokenInfo={baseTokenInfo}
             baseAmount={baseAmount}
             pricingError={quote.error}
             serverUrl={customServerUrl}
             quoteTokenInfo={quoteTokenInfo}
-            onClearServerUrlButtonClick={handleClearServerUrl}
-            onViewAllQuotesButtonClick={() => toggleShowViewAllQuotes()}
           />
+
+          {quote.bestOrder && (
+            <QuoteText
+              isGasFreeTrade={quote.bestOrderType === ProtocolIds.LastLookERC20}
+              expiry={quote.bestOrder?.expiry}
+              onGasFreeTradeButtonClick={() => setShowGasFeeInfo(true)}
+            />
+          )}
         </InfoContainer>
         <ButtonContainer>
           <ActionButtons

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

@@ -85,6 +85,7 @@ const ActionButtons: FC<{
   // be disabled. These disabled states never have a back button.
   let isDisabled =
     walletIsActive &&
+    !hasError &&
     !requiresReload &&
     !isNetworkUnsupported &&
     (!hasSufficientBalance || !baseTokenInfo || !quoteTokenInfo || !hasAmount);

src/components/@widgets/SwapWidget/subcomponents/DebugMenu/DebugMenu.styles.tsx

@@ -2,6 +2,7 @@ import styled from "styled-components/macro";
 
 import CloseButton from "../../../../../styled-components/CloseButton/CloseButton";
 import Checkbox from "../../../../Checkbox/Checkbox";
+import { StyledIcon } from "../../../../Icon/Icon.styles";
 
 export const Container = styled.div`
   position: relative;
@@ -17,4 +18,11 @@ export const StyledCloseButton = styled(CloseButton)`
   position: absolute;
   top: 0;
   right: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+
+  ${StyledIcon} svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 `;

src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.styles.tsx

@@ -7,11 +7,11 @@ import { LargePillButton } from "../../../../../styled-components/Pill/Pill";
 import IconButton from "../../../../IconButton/IconButton";
 import TransactionLink from "../../../../TransactionLink/TransactionLink";
 import { InfoHeading, InfoSubHeading } from "../../../../Typography/Typography";
-import { StyledParagraph } from "../../../../Typography/Typography.styles";
 
 export const StyledInfoHeading = styled(InfoHeading)`
   display: flex;
   align-items: center;
+  color: ${(props) => props.theme.colors.lightGrey};
 
   & + ${InfoSubHeading} {
     margin-top: 0.25rem;