feat: Fail to load quote modal

packages/canonical-bridge-widget/src/modules/transfer/action.ts

@@ -51,3 +51,10 @@ export const setIsRoutesModalOpen = createAction<ITransferState['isRoutesModalOp
 export const setIsManuallyReload = createAction<ITransferState['isManuallyReload']>(
   'transfer/setIsManuallyReload',
 );
+
+export const setIsFailedGetQuoteModalOpen = createAction<
+  ITransferState['isFailedGetQuoteModalOpen']
+>('transfer/setIsFailedGetQuoteModalOpen');
+export const setIsSummaryModalOpen = createAction<ITransferState['isSummaryModalOpen']>(
+  'transfer/setIsSummaryModalOpen',
+);

packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx

@@ -10,12 +10,21 @@ import { WalletButtonWrapper } from '@/modules/transfer/components/Button/Wallet
 import { TransactionSummaryModal } from '@/modules/transfer/components/Modal/TransactionSummaryModal';
 import { TransferWarningMessage } from '@/modules/transfer/components/TransferWarningMessage';
 import { MIN_SOL_TO_ENABLED_TX } from '@/core/constants';
+import { FailedToGetQuoteModal } from '@/modules/transfer/components/Modal/FailedToGetQuoteModal';
+import { useFailGetQuoteModal } from '@/modules/transfer/hooks/modal/useFailGetQuoteModal';
+import { useAppSelector } from '@/modules/store/StoreProvider';
+import { useSummaryModal } from '@/modules/transfer/hooks/modal/useSummaryModal';
 
 export const TransferButtonGroup = () => {
   const [hash, setHash] = useState<string | null>(null);
   const [chosenBridge, setChosenBridge] = useState<string | null>(null);
   const { formatMessage } = useIntl();
 
+  const isFailedGetQuoteModalOpen = useAppSelector(
+    (state) => state.transfer.isFailedGetQuoteModalOpen,
+  );
+  const isSummaryModalOpen = useAppSelector((state) => state.transfer.isSummaryModalOpen);
+
   const {
     isOpen: isSubmittedModalOpen,
     onOpen: onOpenSubmittedModal,
@@ -36,12 +45,8 @@ export const TransferButtonGroup = () => {
     onOpen: onOpenConfirmingModal,
     onClose: onCloseConfirmingModal,
   } = useDisclosure();
-  const {
-    isOpen: isSummaryModalOpen,
-    onOpen: onOpenSummaryModal,
-    onClose: onCloseSummaryModal,
-  } = useDisclosure();
-
+  const { onCloseFailedGetQuoteModal } = useFailGetQuoteModal();
+  const { onCloseSummaryModal, onOpenSummaryModal } = useSummaryModal();
   return (
     <>
       <Flex
@@ -90,6 +95,10 @@ export const TransferButtonGroup = () => {
         setHash={setHash}
         setChosenBridge={setChosenBridge}
       />
+      <FailedToGetQuoteModal
+        isOpen={isFailedGetQuoteModalOpen}
+        onClose={onCloseFailedGetQuoteModal}
+      />
     </>
   );
 };

packages/canonical-bridge-widget/src/modules/transfer/hooks/modal/useFailGetQuoteModal.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+
+import { useAppDispatch } from '@/modules/store/StoreProvider';
+import { setIsFailedGetQuoteModalOpen } from '@/modules/transfer/action';
+
+export const useFailGetQuoteModal = () => {
+  const dispatch = useAppDispatch();
+
+  const onOpenFailedGetQuoteModal = useCallback(() => {
+    dispatch(setIsFailedGetQuoteModalOpen(true));
+  }, [dispatch]);
+
+  const onCloseFailedGetQuoteModal = useCallback(() => {
+    dispatch(setIsFailedGetQuoteModalOpen(false));
+  }, [dispatch]);
+  return {
+    onOpenFailedGetQuoteModal,
+    onCloseFailedGetQuoteModal,
+  };
+};

packages/canonical-bridge-widget/src/modules/transfer/hooks/modal/useSummaryModal.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+
+import { useAppDispatch } from '@/modules/store/StoreProvider';
+import { setIsSummaryModalOpen } from '@/modules/transfer/action';
+
+export const useSummaryModal = () => {
+  const dispatch = useAppDispatch();
+
+  const onOpenSummaryModal = useCallback(() => {
+    dispatch(setIsSummaryModalOpen(true));
+  }, [dispatch]);
+
+  const onCloseSummaryModal = useCallback(() => {
+    dispatch(setIsSummaryModalOpen(false));
+  }, [dispatch]);
+  return {
+    onOpenSummaryModal,
+    onCloseSummaryModal,
+  };
+};

packages/canonical-bridge-widget/src/modules/transfer/hooks/usePreSelectRoute.ts

@@ -4,11 +4,12 @@ import { useCallback } from 'react';
 import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider';
 import { setTransferActionInfo } from '@/modules/transfer/action';
 import { useCBridgeTransferParams } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeTransferParams';
+import { useFailGetQuoteModal } from '@/modules/transfer/hooks/modal/useFailGetQuoteModal';
 
 export const usePreSelectRoute = () => {
   const dispatch = useAppDispatch();
   const { bridgeAddress: cBridgeAddress } = useCBridgeTransferParams();
-
+  const { onOpenFailedGetQuoteModal } = useFailGetQuoteModal();
   const selectedToken = useAppSelector((state) => state.transfer.selectedToken);
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
 
@@ -63,6 +64,9 @@ export const usePreSelectRoute = () => {
             bridgeAddress: fromChain?.meson?.raw?.address as `0x${string}`,
           }),
         );
+      } else {
+        // Can not find the route
+        onOpenFailedGetQuoteModal();
       }
     },
     [
@@ -71,6 +75,7 @@ export const usePreSelectRoute = () => {
       selectedToken?.stargate?.raw?.address,
       cBridgeAddress,
       fromChain,
+      onOpenFailedGetQuoteModal,
     ],
   );
 

packages/canonical-bridge-widget/src/modules/transfer/reducer.ts

@@ -29,6 +29,8 @@ export interface ITransferState {
     address?: string;
   };
   isRoutesModalOpen: boolean;
+  isFailedGetQuoteModalOpen: boolean;
+  isSummaryModalOpen: boolean;
 }
 
 const initStates: ITransferState = {
@@ -54,6 +56,8 @@ const initStates: ITransferState = {
   },
   isRoutesModalOpen: false,
   isManuallyReload: false,
+  isFailedGetQuoteModalOpen: false,
+  isSummaryModalOpen: false,
 };
 
 export default createReducer(initStates, (builder) => {
@@ -143,4 +147,13 @@ export default createReducer(initStates, (builder) => {
     ...state,
     isManuallyReload: payload,
   }));
+
+  builder.addCase(actions.setIsFailedGetQuoteModalOpen, (state, { payload }) => ({
+    ...state,
+    isFailedGetQuoteModalOpen: payload,
+  }));
+  builder.addCase(actions.setIsSummaryModalOpen, (state, { payload }) => ({
+    ...state,
+    isSummaryModalOpen: payload,
+  }));
 });