diff --git a/packages/canonical-bridge-widget/src/modules/transfer/action.ts b/packages/canonical-bridge-widget/src/modules/transfer/action.ts index 8209f0fd..c502f17f 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/action.ts +++ b/packages/canonical-bridge-widget/src/modules/transfer/action.ts @@ -51,3 +51,10 @@ export const setIsRoutesModalOpen = createAction( 'transfer/setIsManuallyReload', ); + +export const setIsFailedGetQuoteModalOpen = createAction< + ITransferState['isFailedGetQuoteModalOpen'] +>('transfer/setIsFailedGetQuoteModalOpen'); +export const setIsSummaryModalOpen = createAction( + 'transfer/setIsSummaryModalOpen', +); diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx index 5f1e06db..694daab6 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx +++ b/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(null); const [chosenBridge, setChosenBridge] = useState(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 ( <> { setHash={setHash} setChosenBridge={setChosenBridge} /> + ); }; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/hooks/modal/useFailGetQuoteModal.ts b/packages/canonical-bridge-widget/src/modules/transfer/hooks/modal/useFailGetQuoteModal.ts new file mode 100644 index 00000000..824f664d --- /dev/null +++ b/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, + }; +}; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/hooks/modal/useSummaryModal.ts b/packages/canonical-bridge-widget/src/modules/transfer/hooks/modal/useSummaryModal.ts new file mode 100644 index 00000000..fdfad764 --- /dev/null +++ b/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, + }; +}; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/hooks/usePreSelectRoute.ts b/packages/canonical-bridge-widget/src/modules/transfer/hooks/usePreSelectRoute.ts index b29678cb..6fa22b93 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/hooks/usePreSelectRoute.ts +++ b/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, ], ); diff --git a/packages/canonical-bridge-widget/src/modules/transfer/reducer.ts b/packages/canonical-bridge-widget/src/modules/transfer/reducer.ts index 65f4aeaf..cc36ffab 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/reducer.ts +++ b/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, + })); });