Merge pull request #1020 from airswap/develop

Dev -> Main

package.json

@@ -13,7 +13,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@airswap/libraries": "5.0.3",
+    "@airswap/libraries": "5.0.9",
     "@akkafinance/web3-react-bitkeep": "^1.0.0",
     "@coinbase/wallet-sdk": "^3.7.2",
     "@craco/craco": "^6.2.0",

src/app/store.ts

@@ -1,4 +1,12 @@
-import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
+import {
+  configureStore,
+  ThunkAction,
+  Action,
+  ThunkDispatch,
+  AnyAction,
+  Store,
+  combineReducers,
+} from "@reduxjs/toolkit";
 
 import {
   balancesReducer,
@@ -18,31 +26,38 @@ import transactionsReducer from "../features/transactions/transactionsSlice";
 import userSettingsReducer from "../features/userSettings/userSettingsSlice";
 import web3Reducer from "../features/web3/web3Slice";
 
-export const store = configureStore({
-  reducer: {
-    allowances: allowancesReducer,
-    transactions: transactionsReducer,
-    balances: balancesReducer,
-    metadata: metadataReducer,
-    tradeTerms: tradeTermsReducer,
-    indexer: indexerReducer,
-    orders: ordersReducer,
-    gasCost: gasCostReducer,
-    registry: registryReducer,
-    userSettings: userSettingsReducer,
-    makeOtc: makeOtcReducer,
-    myOrders: myOrdersReducer,
-    takeOtc: takeOtcReducer,
-    web3: web3Reducer,
-    quotes: quotesReducer,
-  },
-});
+const reducers = {
+  allowances: allowancesReducer,
+  transactions: transactionsReducer,
+  balances: balancesReducer,
+  metadata: metadataReducer,
+  tradeTerms: tradeTermsReducer,
+  indexer: indexerReducer,
+  orders: ordersReducer,
+  gasCost: gasCostReducer,
+  registry: registryReducer,
+  userSettings: userSettingsReducer,
+  makeOtc: makeOtcReducer,
+  myOrders: myOrdersReducer,
+  takeOtc: takeOtcReducer,
+  web3: web3Reducer,
+  quotes: quotesReducer,
+};
+
+const rootReducer = combineReducers(reducers);
+
+// 1. Get the root state's type from reducers
+export type RootState = ReturnType<typeof rootReducer>;
 
-export type AppDispatch = typeof store.dispatch;
-export type RootState = ReturnType<typeof store.getState>;
-export type AppThunk<ReturnType = void> = ThunkAction<
-  ReturnType,
-  RootState,
-  unknown,
-  Action<string>
->;
+// 2. Create a type for thunk dispatch
+export type AppDispatch = ThunkDispatch<RootState, any, AnyAction>;
+
+// 3. Create a type for store using RootState and Thunk enabled dispatch
+export type AppStore = Omit<Store<RootState, AnyAction>, "dispatch"> & {
+  dispatch: AppDispatch;
+};
+
+//4. create the store with your custom AppStore
+export const store: AppStore = configureStore({
+  reducer: rootReducer,
+});

src/components/@widgets/CancelWidget/CancelWidget.tsx

@@ -13,6 +13,7 @@ import useCancellationSuccess from "../../../hooks/useCancellationSuccess";
 import { AppRoutes } from "../../../routes";
 import { OrderStatus } from "../../../types/orderStatus";
 import Icon from "../../Icon/Icon";
+import SubmittedCancellationScreen from "../../SubmittedCancellationScreen";
 import TransactionOverlay from "../../TransactionOverlay/TransactionOverlay";
 import { Title } from "../../Typography/Typography";
 import { InfoSubHeading } from "../../Typography/Typography";
@@ -27,7 +28,6 @@ import {
   BackButton,
   CancelButton,
 } from "./CancelWidget.styles";
-import SubmittedCancellationScreen from "./subcomponentss/SubmittedCancellationScreen/SubmittedCancellationScreen";
 
 interface CancelWidgetProps {
   library: Web3Provider;

src/components/@widgets/MyOrdersWidget/MyOrdersWidget.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext, useMemo } from "react";
+import React, { FC, useContext, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 
@@ -17,8 +17,14 @@ import {
 } from "../../../features/myOrders/myOrdersSlice";
 import { getNonceUsed } from "../../../features/orders/ordersHelpers";
 import { cancelOrder } from "../../../features/takeOtc/takeOtcActions";
+import { selectTakeOtcStatus } from "../../../features/takeOtc/takeOtcSlice";
+import { selectPendingCancellations } from "../../../features/transactions/transactionsSlice";
 import switchToDefaultChain from "../../../helpers/switchToDefaultChain";
+import useCancellationPending from "../../../hooks/useCancellationPending";
 import { AppRoutes } from "../../../routes";
+import SubmittedCancellationScreen from "../../SubmittedCancellationScreen";
+import TransactionOverlay from "../../TransactionOverlay/TransactionOverlay";
+import WalletSignScreen from "../../WalletSignScreen/WalletSignScreen";
 import { Container, InfoSectionContainer } from "./MyOrdersWidget.styles";
 import { getSortedOrders } from "./helpers";
 import ActionButtons, {
@@ -40,6 +46,14 @@ const MyOrdersWidget: FC = () => {
     selectMyOrdersReducer
   );
 
+  const status = useAppSelector(selectTakeOtcStatus);
+  const [activeCancellationNonce, setActiveCancellationNonce] =
+    useState<string>();
+  const pendingCancelTranssaction = useCancellationPending(
+    activeCancellationNonce || null,
+    true
+  );
+
   // Modal states
   const { setShowWalletList } = useContext(InterfaceContext);
 
@@ -61,6 +75,7 @@ const MyOrdersWidget: FC = () => {
     const nonceUsed = await getNonceUsed(order, library!);
 
     if (!isExpired && !nonceUsed) {
+      setActiveCancellationNonce(order.nonce);
       await dispatch(
         cancelOrder({ order: order, chainId: chainId!, library: library! })
       );
@@ -93,6 +108,22 @@ const MyOrdersWidget: FC = () => {
   return (
     <Container>
       <MyOrdersWidgetHeader title={t("common.myOrders")} />
+
+      <TransactionOverlay isHidden={status !== "signing"}>
+        <WalletSignScreen type="signature" />
+      </TransactionOverlay>
+
+      <TransactionOverlay
+        isHidden={status === "signing" || !pendingCancelTranssaction}
+      >
+        {pendingCancelTranssaction && (
+          <SubmittedCancellationScreen
+            chainId={chainId}
+            transaction={pendingCancelTranssaction}
+          />
+        )}
+      </TransactionOverlay>
+
       {!!sortedUserOrders.length && (
         <>
           <MyOrdersList

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

@@ -99,15 +99,15 @@ export const ActionButton = styled(IconButton)`
   }
 `;
 
-export const StyledNavLink = styled(NavLink)<{ isHovered: boolean }>`
+export const StyledNavLink = styled(NavLink)<{ $isHovered?: boolean }>`
   position: absolute;
   top: -1px;
   left: 0;
   border-radius: 0.5rem;
   width: 100%;
   height: calc(100% + 1px);
   background: ${({ theme }) => theme.colors.darkBlue};
-  opacity: ${({ isHovered }) => (isHovered ? 1 : 0)};
+  opacity: ${({ $isHovered }) => ($isHovered ? 1 : 0)};
   z-index: 1;
 
   &:hover,

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

@@ -120,7 +120,7 @@ const Order: FC<PropsWithChildren<OrderProps>> = ({
         {orderStatus === OrderStatus.open ? timeLeft : orderStatusTranslation}
       </Text>
       <StyledNavLink
-        isHovered={isHoveredActionButton}
+        $isHovered={isHoveredActionButton}
         to={`/${AppRoutes.order}/${orderString}`}
       />
 

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

@@ -645,19 +645,6 @@ const SwapWidget: FC = () => {
             onCloseButtonClick={() => setProtocolFeeInfo(false)}
           />
         </ModalOverlay>
-        {baseTokenInfo && quoteTokenInfo && (
-          <ModalOverlay
-            title={t("orders.availableOrders")}
-            isHidden={!showViewAllQuotes}
-            onClose={() => toggleShowViewAllQuotes()}
-          >
-            <AvailableOrdersWidget
-              senderToken={baseTokenInfo}
-              signerToken={quoteTokenInfo}
-              onSwapLinkClick={() => toggleShowViewAllQuotes()}
-            />
-          </ModalOverlay>
-        )}
 
         <TransactionOverlay isHidden={ordersStatus !== "signing"}>
           <WalletSignScreen type="approve" />

src/components/@widgets/CancelWidget/subcomponentss/SubmittedCancellationScreen/SubmittedCancellationScreen.tsx → src/components/SubmittedCancellationScreen.tsx

@@ -1,16 +1,16 @@
 import { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { SubmittedCancellation } from "../../../../../entities/SubmittedTransaction/SubmittedTransaction";
-import useDebounce from "../../../../../hooks/useDebounce";
+import { SubmittedCancellation } from "../entities/SubmittedTransaction/SubmittedTransaction";
+import useDebounce from "../hooks/useDebounce";
 import {
   OverlayContainer,
   OverlaySubHeading,
   OverlayTitle,
   OverlayTransactionLink,
-} from "../../../../../styled-components/Overlay/Overlay";
-import { TransactionStatusType } from "../../../../../types/transactionTypes";
-import OverlayLoader from "../../../../OverlayLoader/OverlayLoader";
+} from "../styled-components/Overlay/Overlay";
+import { TransactionStatusType } from "../types/transactionTypes";
+import OverlayLoader from "./OverlayLoader/OverlayLoader";
 
 interface SubmittedCancellationScreenProps {
   chainId?: number;

src/components/Toasts/Toast.styles.tsx

@@ -66,5 +66,7 @@ export const HiXContainer = styled.button`
 `;
 
 export const TextContainer = styled.div`
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 `;