OTC Review

public/locales/en/translation.json

@@ -45,7 +45,7 @@
     "max": "Max",
     "minutes": "minutes",
     "minutesShort": "Min",
-    "myOrders": "My orders",
+    "myOrders": "OTC",
     "networks": "Networks",
     "no": "No",
     "noResultsFound": "No results found",
@@ -89,29 +89,33 @@
     "gasFreeSwaps.paragraph": "You found a gasless 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 swap",
-    "protocolFee.paragraph": "AirSwap protocol fees are distributed to active contributor community members. By using AirSwap you're supporting the development and stewardship of decentralized trading protocols.",
+    "protocolFee.paragraph": "A protocol fee is processed on each swap and distributed to AirSwap contributors and active participants in the decentralized governance process. Using AirSwap supports the development and stewardship of decentralized protocols.",
     "protocolFee.title": "Protocol Fee"
   },
   "marketing": {
     "welcomeMessage": "Swap tokens with zero slippage"
   },
   "orders": {
-    "actionCannotBeReversed": "This action cannot be reversed",
+    "actionCannotBeReversed": "This will cancel the order on-chain",
     "afterFee": "After {{fee}} fee",
     "amount": "Amount",
     "anyone": "Anyone",
     "approve": "Approve",
+    "orderAmount": "Order amount",
+    "feeAmount": "Protocol fee",
+    "currentApprovalAmount": "Current approval",
+    "requiredApprovalAmount": "Required approval",
     "approveTokenInYourWallet": "Approve token in your wallet",
     "approvalComplete": "Approved",
     "approvalProcessing": "Approval processing...",
     "areYouSureYouWantToCancel": "Are you sure you want to cancel?",
     "availableOrders": "Available orders",
     "bestQuote": "Best quote",
-    "cancelOrder": "Cancel order",
+    "cancelOrder": "Cancel",
     "chooseToken": "Select token",
     "clearCustomServer": "Clear custom server",
-    "confirmCancel": "Confirm cancel",
-    "connectWallet": "Connect your wallet to view your swaps",
+    "confirmCancel": "Cancel",
+    "connectWallet": "Connect your wallet to proceed",
     "continue": "Continue",
     "copyLink": "Copy link",
     "counterPartyAddress": "Counterparty address",
@@ -136,7 +140,8 @@
     "insufficientBalance": "Insufficient {{symbol}} balance",
     "listed": "Listed",
     "listingType": "Listing type",
-    "makeNewOrder": "New order",
+    "makeAnOrder": "Make an order",
+    "makeNewOrder": "Make new order",
     "makeNewSwap": "New swap",
     "moreInformation": "More information",
     "nativeCurrencyMaxInfoText": "{{amount}}. This amount is calculated after subtracting a {{fee}} gas fee from your total balance.",
@@ -145,11 +150,7 @@
     "noIndexersFound": "No indexer nodes found",
     "orderSuccessfullyCreated": "Order successfully created.",
     "pendingWallet": "Waiting for wallet",
-    "pendingConfirmation": "Confirm the swap to proceed",
-    "pendingCancellation": "Confirm the cancellation to proceed",
-    "pendingApproval": "Confirm the approval to proceed",
-    "pendingDeposit": "Confirm the deposit to proceed",
-    "pendingSignature": "Confirm the order to proceed",
+    "pendingConfirmation": "Confirm to proceed",
     "price": "Price",
     "priceDifference": "Price difference",
     "protocolFee": "Fee",
@@ -166,7 +167,7 @@
     "selectedServer": "Selected {{serverUrl}} as custom server",
     "settings": "Settings",
     "specificTaker": "Specific Taker",
-    "startByCreatingANewOrder": "Start by creating a new order.",
+    "startByCreatingANewOrder": "Start by making an order.",
     "swapExpired": "Swap expired",
     "swapExpiredCallToAction": "Please try again",
     "swapFailed": "Error submitting swap",
@@ -181,22 +182,22 @@
     "thisOrderIsForADifferentTaker": "This order is for a different taker",
     "thisOrderIsForAnotherChain": "This order is for {{chainName}}",
     "thisOrderWasForADifferentTaker": "This order was for a different taker",
-    "takeSwap": "Take swap",
+    "takeSwap": "Take",
     "to": "To",
     "tokenInfoNotFound": "Token info not found",
     "tokenPairUnavailable": "No quotes available",
     "noValidResponses": "No servers currently available",
     "total": "Total",
     "track": "Track",
-    "trackTransaction": "Available in transaction history",
+    "trackTransaction": "View in transaction history",
     "transactionCompleted": "Swap complete",
     "transactionSent": "Sending order...",
     "transactionSentToMaker": "Sending order to the maker",
     "transactionSubmitted": "Swap processing...",
     "unableTake": "Unable to take",
     "viewAllQuotes": "View all quotes",
     "wrapMessage": "No protocol fee for ETH/WETH swaps",
-    "youHaveNoOpenOTCOrders": "You have no open OTC orders."
+    "youHaveNoOpenOTCOrders": "You have no orders."
   },
   "toast": {
     "approvalComplete": "Approval Complete",

public/locales/th/translation.json

@@ -154,9 +154,7 @@
     "noIndexerOrdersFound": "ไม่พบคำสั่งซื้อสำหรับคู่โทเค็นนี้",
     "noIndexersFound": "ไม่พบโหนดดัชนี",
     "orderSuccessfullyCreated": "สร้างคำสั่งซื้อสำเร็จ",
-    "pendingApproval": "รอการอนุมัติ",
-    "pendingDeposit": "รอการฝาก",
-    "pendingSignature": "รอลายเซ็น",
+    "pendingConfirmation": "รอการอนุมัติ",
     "price": "ราคา",
     "priceDifference": "ความแตกต่างของราคา",
     "protocolFee": "ค่าธรรมเนียม",

src/components/@reviewScreens/ApproveReview/ApproveReview.tsx

@@ -93,7 +93,7 @@ const ApproveReview: FC<ApproveReviewProps> = ({
     <Container className={className}>
       <StyledWidgetHeader>
         <Title type="h2" as="h1">
-          {t("orders.approve")} {tokenSymbol}
+          {t("orders.approve")}
         </Title>
       </StyledWidgetHeader>
       <OrderReviewToken
@@ -103,41 +103,40 @@ const ApproveReview: FC<ApproveReviewProps> = ({
         tokenUri={justifiedToken?.logoURI}
       />
       <ReviewList>
-        {readableAllowance !== "0" && (
-          <ReviewListItem>
-            <ReviewListItemLabel>Current approve amount</ReviewListItemLabel>
-            <ReviewListItemValue>
-              {readableAllowance} {tokenSymbol}
-            </ReviewListItemValue>
-          </ReviewListItem>
-        )}
         {roundedFeeAmount && (
           <>
             <ReviewListItem>
-              <ReviewListItemLabel>Order amount</ReviewListItemLabel>
-              <ReviewListItemValue>
-                {amount} {tokenSymbol}
-              </ReviewListItemValue>
+              <ReviewListItemLabel>
+                {t("orders.orderAmount")}
+              </ReviewListItemLabel>
+              <ReviewListItemValue>{amount}</ReviewListItemValue>
             </ReviewListItem>
             <ReviewListItem>
               <ReviewListItemLabel>
-                {t("orders.protocolFee")}
+                {t("orders.feeAmount")}
                 <StyledIconButton
                   icon="information-circle-outline"
                   onClick={toggleShowFeeInfo}
                 />
               </ReviewListItemLabel>
-              <ReviewListItemValue>
-                {roundedFeeAmount} {tokenSymbol}
-              </ReviewListItemValue>
+              <ReviewListItemValue>{roundedFeeAmount}</ReviewListItemValue>
             </ReviewListItem>
           </>
         )}
-
+        {readableAllowance !== "0" && (
+          <ReviewListItem>
+            <ReviewListItemLabel>
+              {t("orders.currentApprovalAmount")}
+            </ReviewListItemLabel>
+            <ReviewListItemValue>{readableAllowance}</ReviewListItemValue>
+          </ReviewListItem>
+        )}
         <ReviewListItem>
-          <ReviewListItemLabel>Total approve amount</ReviewListItemLabel>
+          <ReviewListItemLabel>
+            {t("orders.requiredApprovalAmount")}
+          </ReviewListItemLabel>
           <ReviewListItemValue>
-            {roundedAmountPlusFee || amount} {tokenSymbol}
+            {roundedAmountPlusFee || amount}
           </ReviewListItemValue>
         </ReviewListItem>
       </ReviewList>

src/components/@widgets/MakeWidget/helpers/index.ts

@@ -60,7 +60,7 @@ export const getActionButtonTranslation = (
   }
 
   if (hasInsufficientAllowance) {
-    return `${i18n.t("orders.approve")} ${makerTokenSymbol}`;
+    return `${i18n.t("orders.continue")}`;
   }
 
   return i18n.t("common.review");

src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/helpers/index.ts

@@ -7,5 +7,5 @@ export const getActionButtonTranslation = (
     return i18n.t("wallet.connectWallet");
   }
 
-  return i18n.t("orders.makeNewOrder");
+  return i18n.t("orders.makeAnOrder");
 };

src/components/@widgets/MyOrdersWidget/subcomponents/Order/Order.styles.tsx

@@ -36,7 +36,7 @@ export const Container = styled.div<{ orderStatus: OrderStatus }>`
 
   position: relative;
   align-items: center;
-  height: 3.5rem;
+  height: 3rem;
 
   ${Circle} {
     background: ${({ theme, orderStatus }) =>
@@ -60,7 +60,7 @@ export const Text = styled.div`
   -webkit-box-orient: vertical;
   position: relative;
   font-family: ${fontMono};
-  font-size: 1rem;
+  font-size: 0.75rem;
   font-weight: 500;
   text-overflow: ellipsis;
   text-transform: uppercase;
@@ -71,7 +71,7 @@ export const Text = styled.div`
   pointer-events: none;
 
   @media ${breakPoints.tabletPortraitUp} {
-    font-size: 1.25rem;
+    font-size: 1rem;
   }
 `;
 

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

@@ -151,7 +151,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
   if (hasInsufficientBalance) {
     return (
       <Container center className={className}>
-        <SignButton disabled intent="neutral">
+        <SignButton disabled intent="neutral" isFilled={true}>
           {t("orders.insufficientBalance")}
         </SignButton>
       </Container>

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

@@ -100,7 +100,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
   if (shouldEnterAmount) {
     return (
       <Container center className={className}>
-        <SignButton disabled intent="primary">
+        <SignButton disabled intent="primary" isFilled={true}>
           {t("orders.enterAmount")}
         </SignButton>
       </Container>
@@ -110,7 +110,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
   if (hasInsufficientBalance) {
     return (
       <Container center className={className}>
-        <SignButton disabled intent="neutral">
+        <SignButton disabled intent="neutral" isFilled={true}>
           {t("orders.insufficientBalance")}
         </SignButton>
       </Container>

src/components/AvailableOrdersWidget/AvailableOrdersWidget.tsx

@@ -128,7 +128,7 @@ const AvailableOrdersWidget = ({
         onFullOrderLinkClick={onFullOrderLinkClick}
       />
       <ActionButton
-        title={t("orders.makeNewOrder")}
+        title={t("orders.makeAnOrder")}
         onClick={handleCreateSwapClick}
       />
     </Container>

src/components/Page/Page.styles.tsx

@@ -43,7 +43,7 @@ export const StyledPage = styled.div`
   position: relative;
   min-width: 18rem;
   height: 100vh;
-  min-height: 37.5rem;
+  min-height: 34.5rem;
 
   @media (min-height: 29rem) and (max-width: ${breakpointSizes.phone}) {
     display: flex;

src/components/TokenSelect/TokenSelect.styles.tsx

@@ -93,6 +93,7 @@ export const MaxButtonStyle = css`
   bottom: 1px;
   align-self: center;
   border-radius: 0.25rem;
+  text-transform: uppercase;
   font-family: ${fontWide};
   font-weight: 500;
   font-size: 0.75rem;
@@ -117,6 +118,7 @@ export const MaxButton = styled.button`
 
   width: ${() => (isActiveLanguageLogographic() ? "1.75rem" : "auto")};
   font-size: ${() => (isActiveLanguageLogographic() ? "0.75rem" : "0.6875rem")};
+  font-weight: 700;
 `;
 
 export const InfoLabel = styled.div`

src/components/Toolbar/Toolbar.tsx

@@ -1,8 +1,6 @@
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useAppSelector } from "../../app/hooks";
-import { selectMyOrdersReducer } from "../../features/myOrders/myOrdersSlice";
 import useMediaQuery from "../../hooks/useMediaQuery";
 import useWindowSize from "../../hooks/useWindowSize";
 import { AppRoutes } from "../../routes";
@@ -31,7 +29,6 @@ const Toolbar: FC<ToolbarProps> = ({
 }) => {
   const { t } = useTranslation();
   const { width, height } = useWindowSize();
-  const { userOrders } = useAppSelector(selectMyOrdersReducer);
   const isTabletPortraitUp = useMediaQuery(breakPoints.tabletPortraitUp);
   const containerRef = useRef<HTMLDivElement>(null);
   const mobileTopBarRef = useRef<HTMLDivElement>(null);
@@ -78,7 +75,7 @@ const Toolbar: FC<ToolbarProps> = ({
           iconName="plus"
           iconSize={0.875}
           text={t("common.otc")}
-          link={`/${userOrders.length ? AppRoutes.myOrders : AppRoutes.make}`}
+          link={`/${AppRoutes.myOrders}`}
         />
         <ToolbarButton
           iconName="bars"

src/components/WalletSignScreen/WalletSignScreen.tsx

@@ -29,25 +29,11 @@ const WalletSignScreen: FC<WalletConfirmScreenProps> = ({
     <OverlayContainer className={className}>
       <OverlayLoader />
       <OverlayTitle type="h2">{i18n.t("orders.pendingWallet")}</OverlayTitle>
-      <OverlaySubHeading>{getDescription(type)}</OverlaySubHeading>
+      <OverlaySubHeading>
+        {i18n.t("orders.pendingConfirmation")}
+      </OverlaySubHeading>
     </OverlayContainer>
   );
 };
 
-const getDescription = (type: WalletSignScreenType) => {
-  if (type === "approve") {
-    return i18n.t("orders.pendingApproval");
-  }
-  if (type === "deposit") {
-    return i18n.t("orders.pendingDeposit");
-  }
-  if (type === "swap") {
-    return i18n.t("orders.pendingConfirmation");
-  }
-  if (type === "cancel") {
-    return i18n.t("orders.pendingCancellation");
-  }
-  return i18n.t("orders.pendingSignature");
-};
-
 export default WalletSignScreen;

src/features/metadata/metadataApi.ts

@@ -42,7 +42,12 @@ export const getActiveTokensFromLocalStorage = (
     getActiveTokensLocalStorageKey(account, chainId)
   );
 
-  return savedTokenString ? JSON.parse(savedTokenString) : undefined;
+  try {
+    return savedTokenString ? JSON.parse(savedTokenString) : undefined;
+  } catch (e) {
+    console.error(e);
+    return undefined;
+  }
 };
 
 export const getUnknownTokensFromLocalStorage = (

src/features/wallet/subcomponents/SiteNavigation.tsx

@@ -1,9 +1,7 @@
 import { FC, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useAppSelector } from "../../../app/hooks";
 import { AppRoutes } from "../../../routes";
-import { selectMyOrdersReducer } from "../../myOrders/myOrdersSlice";
 import {
   Container,
   NavigationLink,
@@ -17,8 +15,6 @@ interface NavigationProps {
 const SiteNavigation: FC<NavigationProps> = ({ className }): ReactElement => {
   const { t } = useTranslation();
 
-  const { userOrders } = useAppSelector(selectMyOrdersReducer);
-
   return (
     <Container className={className}>
       <NavigationNavLink
@@ -33,7 +29,7 @@ const SiteNavigation: FC<NavigationProps> = ({ className }): ReactElement => {
         {t("common.rfq")}
       </NavigationNavLink>
       <NavigationNavLink
-        to={`/${userOrders.length ? AppRoutes.myOrders : AppRoutes.make}`}
+        to={`/${AppRoutes.myOrders}`}
         isActive={(match, location) => {
           return (
             location.pathname.includes(AppRoutes.myOrders) ||

src/style/sizes.ts

@@ -5,6 +5,6 @@ export const sizes = {
   tradeContainerPadding: "3.75rem",
   tradeContainerMobilePadding: "1.25rem",
   widgetGutter: "1rem",
-  widgetSize: "37.5rem",
+  widgetSize: "34.5rem",
   widgetMobileSize: "27.75rem",
 };