@rango-dev/widget-embedded 0.46.2-next.2 → 0.46.2-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.46.2-next.2",
+  "version": "0.46.2-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.10.1-next.0",
-    "@rango-dev/provider-all": "^0.49.1-next.2",
+    "@rango-dev/provider-all": "^0.49.1-next.3",
     "@rango-dev/queue-manager-core": "^0.31.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.48.2-next.2",
+    "@rango-dev/queue-manager-rango-preset": "^0.48.2-next.3",
     "@rango-dev/queue-manager-react": "^0.31.1-next.0",
     "@rango-dev/signer-solana": "^0.42.1-next.0",
-    "@rango-dev/ui": "^0.49.1-next.2",
+    "@rango-dev/ui": "^0.49.1-next.3",
     "@rango-dev/wallets-core": "^0.46.1-next.2",
-    "@rango-dev/wallets-react": "^0.33.1-next.2",
-    "@rango-dev/wallets-shared": "^0.47.1-next.2",
+    "@rango-dev/wallets-react": "^0.33.1-next.3",
+    "@rango-dev/wallets-shared": "^0.47.1-next.3",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/SwapDetails/SwapDetails.tsx

@@ -1,5 +1,6 @@
 import type { SwapDetailsProps } from './SwapDetails.types';
 import type { ModalState } from '../SwapDetailsModal';
+import type { SwitchNetworkModalState } from '../SwapDetailsModal/SwapDetailsModal.types';
 
 import { i18n } from '@lingui/core';
 import {
@@ -71,6 +72,8 @@ import {
   titleStepsStyles,
 } from './SwapDetails.styles';
 
+const SUCCESS_SWITCH_NETWORK_MODAL_CLOSE_DELAY = 3000;
+
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
@@ -82,10 +85,14 @@ export function SwapDetails(props: SwapDetailsProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalState, setModalState] = useState<ModalState>(null);
+  const [switchNetworkModalState, setSwitchNetworkModalState] =
+    useState<SwitchNetworkModalState | null>(null);
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
   >(null);
-  const showSwitchNetworkRef = useRef(false);
+
+  const modalStateRef = useRef(modalState);
+  const switchNetworkModalStateRef = useRef(switchNetworkModalState);
 
   const getNotifications = useNotificationStore.use.getNotifications();
   const removeNotification = useNotificationStore.use.removeNotification();
@@ -102,42 +109,27 @@ export function SwapDetails(props: SwapDetailsProps) {
     setIsModalOpen(false);
   };
 
-  useEffect(() => {
-    const existNotification = notifications.find(
-      (n) => n.requestId === swap.requestId
-    );
-    if (existNotification) {
-      if (swap.status === 'success' || swap.status === 'failed') {
-        setShowCompletedModal(swap.status);
-        removeNotification(swap.requestId);
-        handleCloseModal();
-      } else if (showCompletedModal) {
-        setShowCompletedModal(null);
-      }
-    }
-  }, [swap.status, swap.requestId]);
-
-  useEffect(() => {
-    if (showSwitchNetwork) {
-      handleChangeModalState(PendingSwapNetworkStatus.WaitingForNetworkChange);
-    } else if (
-      currentStepNetworkStatus ===
-      PendingSwapNetworkStatus.WaitingForConnectingWallet
-    ) {
-      handleChangeModalState(
-        PendingSwapNetworkStatus.WaitingForConnectingWallet
-      );
-    } else if (
-      currentStepNetworkStatus === PendingSwapNetworkStatus.NetworkChanged
-    ) {
-      handleChangeModalState(PendingSwapNetworkStatus.NetworkChanged);
-    }
-
-    if (!showSwitchNetwork && showSwitchNetworkRef.current) {
-      handleCloseModal();
-    }
-    showSwitchNetworkRef.current = showSwitchNetwork;
-  }, [currentStepNetworkStatus]);
+  const handleShowSwitchNetworkLoading = () => {
+    setSwitchNetworkModalState({
+      type: 'loading',
+      title: i18n.t('Change Network'),
+      description: `We’re switching the connected network to ${currentStepNamespace?.network}. Please check your wallet.`,
+    });
+  };
+  const handleShowSwitchNetworkSucceeded = () => {
+    setSwitchNetworkModalState({
+      type: 'success',
+      title: i18n.t('Network Changed'),
+      description: 'The network has been successfully changed.',
+    });
+  };
+  const handleShowSwitchNetworkFailed = (error?: Error) => {
+    setSwitchNetworkModalState({
+      type: 'error',
+      title: i18n.t('Network Switch Failed'),
+      description: error?.message || stepMessage.detailedMessage.content,
+    });
+  };
 
   const lastConvertedTokenInFailedSwap =
     getLastConvertedTokenInFailedSwap(swap);
@@ -152,34 +144,60 @@ export function SwapDetails(props: SwapDetailsProps) {
   const swapDate = getSwapDate(swap);
   const shouldRetry = shouldRetrySwap(swap);
 
-  const isMobileWallet = (walletType: string): boolean =>
+  const checkIsMobileWallet = (walletType: string): boolean =>
     !!getWalletInfo(walletType)?.mobileWallet;
 
-  const showSwitchNetwork =
-    currentStepNetworkStatus ===
-      PendingSwapNetworkStatus.WaitingForNetworkChange &&
-    !!currentStepNamespace &&
+  const stepIsBlockedForSwitchNetwork =
+    !!currentStepNetworkStatus &&
+    [
+      PendingSwapNetworkStatus.WaitingForNetworkChange,
+      PendingSwapNetworkStatus.NetworkChangeFailed,
+    ].includes(currentStepNetworkStatus);
+  const isMobileWallet =
     !!currentStepWallet?.walletType &&
-    (isMobileWallet(currentStepWallet.walletType) ||
-      canSwitchNetworkTo(
-        currentStepWallet.walletType,
-        currentStepNamespace.network,
-        currentStepNamespace
-      ));
-
-  const switchNetwork = showSwitchNetwork
-    ? connect.bind(null, currentStepWallet.walletType, [
+    checkIsMobileWallet(currentStepWallet.walletType);
+  const canSwitchNetworkToRequiredNetwork =
+    !!currentStepWallet &&
+    !!currentStepNamespace &&
+    canSwitchNetworkTo(
+      currentStepWallet.walletType,
+      currentStepNamespace.network,
+      currentStepNamespace
+    );
+
+  const switchNetworkIsAvailable =
+    !!currentStepNamespace &&
+    stepIsBlockedForSwitchNetwork &&
+    (isMobileWallet || canSwitchNetworkToRequiredNetwork);
+
+  const handleSwitchNetwork = () => {
+    if (switchNetworkIsAvailable) {
+      handleShowSwitchNetworkLoading();
+      connect(currentStepWallet.walletType, [
         {
           namespace: currentStepNamespace.namespace,
           network: currentStepNamespace.network,
         },
       ])
-    : undefined;
+        .then(() => {
+          handleShowSwitchNetworkSucceeded();
+        })
+        .catch((error: unknown) => {
+          handleShowSwitchNetworkFailed(error as Error);
+        });
+    }
+  };
+
+  const handleSwitchNetworkClick = () => {
+    handleChangeModalState('switchNetwork');
+    handleSwitchNetwork();
+  };
 
   const stepMessage = getSwapMessages(swap, currentStep, getWalletInfo);
   const steps = getSteps({
     swap,
-    switchNetwork,
+    switchNetworkIsAvailable,
+    handleSwitchNetworkClick,
     showNetworkModal: currentStepNetworkStatus,
     setNetworkModal: handleChangeModalState,
     message: stepMessage,
@@ -276,6 +294,83 @@ export function SwapDetails(props: SwapDetailsProps) {
       </ErrorMessages>
     );
 
+  useEffect(() => {
+    const existNotification = notifications.find(
+      (n) => n.requestId === swap.requestId
+    );
+    if (existNotification) {
+      if (swap.status === 'success' || swap.status === 'failed') {
+        setShowCompletedModal(swap.status);
+        removeNotification(swap.requestId);
+        handleCloseModal();
+      } else if (showCompletedModal) {
+        setShowCompletedModal(null);
+      }
+    }
+  }, [swap.status, swap.requestId]);
+
+  useEffect(() => {
+    if (switchNetworkIsAvailable) {
+      handleChangeModalState('switchNetwork');
+      if (
+        currentStepNetworkStatus ===
+        PendingSwapNetworkStatus.WaitingForNetworkChange
+      ) {
+        handleShowSwitchNetworkLoading();
+        return;
+      }
+      if (
+        currentStepNetworkStatus ===
+        PendingSwapNetworkStatus.NetworkChangeFailed
+      ) {
+        handleShowSwitchNetworkFailed();
+        return;
+      }
+      return;
+    }
+
+    if (
+      currentStepNetworkStatus ===
+      PendingSwapNetworkStatus.WaitingForConnectingWallet
+    ) {
+      handleChangeModalState('connectWallet');
+      return;
+    }
+
+    if (currentStepNetworkStatus === PendingSwapNetworkStatus.NetworkChanged) {
+      handleChangeModalState('switchNetwork');
+      handleShowSwitchNetworkSucceeded();
+      return;
+    }
+
+    if (modalState && ['connectWallet', 'switchNetwork'].includes(modalState)) {
+      handleCloseModal();
+    }
+  }, [currentStepNetworkStatus]);
+
+  useEffect(() => {
+    modalStateRef.current = modalState;
+    switchNetworkModalStateRef.current = switchNetworkModalState;
+
+    // Close switch network success modal with a delay
+    if (
+      modalState === 'switchNetwork' &&
+      switchNetworkModalState?.type === 'success'
+    ) {
+      const timeout = setTimeout(() => {
+        if (
+          modalStateRef.current === 'switchNetwork' &&
+          switchNetworkModalStateRef.current?.type === 'success'
+        ) {
+          handleCloseModal();
+        }
+      }, SUCCESS_SWITCH_NETWORK_MODAL_CLOSE_DELAY);
+
+      return () => clearTimeout(timeout);
+    }
+    return;
+  }, [modalState, switchNetworkModalState]);
+
   return (
     <Layout
       header={{
@@ -419,11 +514,13 @@ export function SwapDetails(props: SwapDetailsProps) {
       <SwapDetailsModal
         isOpen={isModalOpen}
         state={modalState}
+        switchNetworkModalState={switchNetworkModalState}
         onClose={handleCloseModal}
         onCancel={onCancel}
         onDelete={onDelete}
         message={stepMessage.detailedMessage.content}
         swap={swap}
+        handleSwitchNetwork={handleSwitchNetworkClick}
       />
       <SwapDetailsCompleteModal
         open={!!showCompletedModal}

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Warning.tsx

@@ -6,8 +6,14 @@ import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
 export function WarningAlert(props: WaningAlertsProps) {
-  const { switchNetwork, setNetworkModal, message, showNetworkModal } = props;
-  if (!!switchNetwork) {
+  const {
+    switchNetworkIsAvailable,
+    handleSwitchNetworkClick,
+    setNetworkModal,
+    message,
+    showNetworkModal,
+  } = props;
+  if (!!switchNetworkIsAvailable) {
     return (
       <Alert
         type="warning"
@@ -19,10 +25,8 @@ export function WarningAlert(props: WaningAlertsProps) {
             size="xxsmall"
             type="warning"
             onClick={() => {
-              setNetworkModal(PendingSwapNetworkStatus.WaitingForNetworkChange);
-              switchNetwork().catch((e) => {
-                console.log(e);
-              });
+              setNetworkModal('switchNetwork');
+              handleSwitchNetworkClick();
             }}>
             {i18n.t('Change')}
           </Button>
@@ -44,9 +48,7 @@ export function WarningAlert(props: WaningAlertsProps) {
             size="xxsmall"
             type="warning"
             onClick={() => {
-              setNetworkModal(
-                PendingSwapNetworkStatus.WaitingForConnectingWallet
-              );
+              setNetworkModal('connectWallet');
             }}>
             {i18n.t('Connect')}
           </Button>

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx

@@ -12,7 +12,8 @@ import { WarningAlert } from './SwapDetailsAlerts.Warning';
 
 export function SwapDetailsAlerts(props: SwapAlertsProps) {
   const {
-    switchNetwork,
+    switchNetworkIsAvailable,
+    handleSwitchNetworkClick,
     showNetworkModal,
     setNetworkModal,
     message,
@@ -75,7 +76,8 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
       )}
       {step.status !== 'failed' && hasWarning && (
         <WarningAlert
-          switchNetwork={switchNetwork}
+          switchNetworkIsAvailable={switchNetworkIsAvailable}
+          handleSwitchNetworkClick={handleSwitchNetworkClick}
           showNetworkModal={showNetworkModal}
           setNetworkModal={setNetworkModal}
           message={message}

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.types.ts

@@ -1,6 +1,5 @@
 import type { getSwapMessages } from '../../utils/swap';
 import type { ModalState } from '../SwapDetailsModal';
-import type { ConnectResult } from '@rango-dev/wallets-react';
 import type { SwapperMeta } from 'rango-sdk';
 import type {
   BlockchainMeta,
@@ -15,7 +14,8 @@ export interface SwapAlertsProps extends WaningAlertsProps {
 }
 
 export interface WaningAlertsProps extends FailedAlertsProps {
-  switchNetwork: (() => Promise<ConnectResult[]>) | undefined;
+  switchNetworkIsAvailable: boolean;
+  handleSwitchNetworkClick: () => void;
   showNetworkModal: PendingSwapNetworkStatus | null | undefined;
   setNetworkModal: (network: ModalState) => void;
 }

package/src/components/SwapDetailsModal/SwapDetailsModal.NetworkState.tsx

@@ -1,17 +1,31 @@
 import type { NetworkStateContentProps } from './SwapDetailsModal.types';
 
 import { i18n } from '@lingui/core';
-import { MessageBox } from '@rango-dev/ui';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
 import React from 'react';
 
 export const NetworkStateContent = (props: NetworkStateContentProps) => {
-  const { status, message } = props;
+  const { switchNetworkModalState, handleSwitchNetwork } = props;
 
-  const type = status === 'waitingForNetworkChange' ? 'loading' : 'success';
-  const title =
-    status === 'waitingForNetworkChange'
-      ? i18n.t('Change Network')
-      : i18n.t('Network Changed');
-
-  return <MessageBox type={type} title={title} description={message} />;
+  return (
+    <>
+      <MessageBox
+        type={switchNetworkModalState.type}
+        title={switchNetworkModalState.title}
+        description={switchNetworkModalState.description}
+      />
+      {switchNetworkModalState.type === 'error' && (
+        <>
+          <Divider size="30" />
+          <Button
+            id="widget-switch-network-try-again"
+            type="primary"
+            size="large"
+            onClick={handleSwitchNetwork}>
+            {i18n.t('Try Again')}
+          </Button>
+        </>
+      )}
+    </>
+  );
 };

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -11,18 +11,32 @@ import { NetworkStateContent } from './SwapDetailsModal.NetworkState';
 import { WalletStateContent } from './SwapDetailsModal.WalletState';
 
 export function SwapDetailsModal(props: ModalPropTypes) {
-  const { isOpen, state, onClose, onDelete, onCancel, swap, message } = props;
+  const {
+    isOpen,
+    state,
+    switchNetworkModalState,
+    onClose,
+    onDelete,
+    onCancel,
+    swap,
+    message,
+    handleSwitchNetwork,
+  } = props;
 
   return (
     <WatermarkedModal
       open={isOpen}
       onClose={onClose}
       container={getContainer()}>
-      {state === 'waitingForConnectingWallet' && (
+      {state === 'connectWallet' && (
         <WalletStateContent swap={swap} message={message} onClose={onClose} />
       )}
-      {(state === 'waitingForNetworkChange' || state === 'networkChanged') && (
-        <NetworkStateContent message={message} status={state} />
+      {state === 'switchNetwork' && switchNetworkModalState && (
+        <NetworkStateContent
+          message={message}
+          switchNetworkModalState={switchNetworkModalState}
+          handleSwitchNetwork={handleSwitchNetwork}
+        />
       )}
       {state === 'delete' && (
         <DeleteContent

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -1,20 +1,29 @@
 import type { TargetNamespace } from '@rango-dev/queue-manager-rango-preset';
 import type { LegacyWalletType } from '@rango-dev/wallets-core/legacy';
-import type { PendingSwap, PendingSwapNetworkStatus } from 'rango-types';
+import type { PendingSwap } from 'rango-types';
 
 export type ModalState =
-  | Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>
+  | 'connectWallet'
+  | 'switchNetwork'
   | 'delete'
   | 'cancel'
   | null;
+
+export type SwitchNetworkModalState = {
+  type: 'success' | 'loading' | 'error';
+  title: string;
+  description: string;
+};
 export interface ModalPropTypes {
   isOpen: boolean;
   onClose: () => void;
   onCancel: () => void;
   onDelete: () => void;
   state: ModalState;
+  switchNetworkModalState: SwitchNetworkModalState | null;
   swap: PendingSwap;
   message: string;
+  handleSwitchNetwork: () => void;
 }
 
 export interface CompleteModalPropTypes {
@@ -46,7 +55,8 @@ export interface WalletStateContentProps {
 
 export interface NetworkStateContentProps {
   message: string;
-  status: 'networkChanged' | 'waitingForNetworkChange';
+  switchNetworkModalState: SwitchNetworkModalState;
+  handleSwitchNetwork: () => void;
 }
 
 export interface InstallWalletContentProps {

package/src/utils/swap.ts

@@ -716,6 +716,13 @@ export function getSwapMessages(
       case PendingSwapNetworkStatus.WaitingForNetworkChange:
         message = message || i18n.t('Waiting for changing wallet network');
         break;
+      case PendingSwapNetworkStatus.NetworkChangeFailed:
+        message =
+          message ||
+          i18n.t(
+            'The network switch could not be completed. Please try again, or switch the network manually in your wallet.'
+          );
+        break;
       default:
         message = message || '';
         break;