@rango-dev/widget-embedded 0.45.1-next.0 → 0.45.1-next.10

package/src/components/SwapDetails/SwapDetails.tsx

@@ -9,16 +9,10 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 import {
   Button,
-  CopyIcon,
   Divider,
-  DoneIcon,
-  IconButton,
   QuoteCost,
-  RangoExplorerIcon,
   StepDetails,
-  Tooltip,
   Typography,
-  useCopyToClipboard,
 } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import BigNumber from 'bignumber.js';
@@ -26,7 +20,6 @@ import { PendingSwapNetworkStatus } from 'rango-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { SCANNER_BASE_URL } from '../../constants';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -40,7 +33,6 @@ import {
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
-import { useUiStore } from '../../store/ui';
 import { getContainer } from '../../utils/common';
 import {
   numberToString,
@@ -67,40 +59,33 @@ import {
   SwapDetailsModal,
 } from '../SwapDetailsModal';
 
-import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
+import { RequestIdRow } from './RequestIdRow';
+import { SwapDateRow } from './SwapDateRow';
+import { getSteps, getStepState } from './SwapDetails.helpers';
 import {
   Container,
   ErrorMessages,
   MessageText,
   outputStyles,
-  RequestIdContainer,
-  requestIdStyles,
-  rowStyles,
   StepsList,
-  StyledLink,
   titleStepsStyles,
 } from './SwapDetails.styles';
 
 export function SwapDetails(props: SwapDetailsProps) {
-  const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
+  const { swap, requestId, onDelete, onCancel } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
   const blockchains = useAppStore().blockchains();
   const swappers = useAppStore().swappers();
   const { findToken } = useAppStore();
   const retry = useQuoteStore.use.retry();
-  const isActiveTab = useUiStore.use.isActiveTab();
   const navigate = useNavigate();
-  const [isCopied, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalState, setModalState] = useState<ModalState>(null);
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
   >(null);
-
-  const onCancel = () => {
-    onCancelProps();
-    setModalState(null);
-  };
+  const showSwitchNetworkRef = useRef(false);
 
   const getNotifications = useNotificationStore.use.getNotifications();
   const removeNotification = useNotificationStore.use.removeNotification();
@@ -108,6 +93,15 @@ export function SwapDetails(props: SwapDetailsProps) {
   const currentStep = getCurrentStep(swap);
   const currentStepNetworkStatus = currentStep?.networkStatus;
 
+  const handleChangeModalState = (state: ModalState) => {
+    setIsModalOpen(true);
+    setModalState(state);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
   useEffect(() => {
     const existNotification = notifications.find(
       (n) => n.requestId === swap.requestId
@@ -116,6 +110,7 @@ export function SwapDetails(props: SwapDetailsProps) {
       if (swap.status === 'success' || swap.status === 'failed') {
         setShowCompletedModal(swap.status);
         removeNotification(swap.requestId);
+        handleCloseModal();
       } else if (showCompletedModal) {
         setShowCompletedModal(null);
       }
@@ -124,16 +119,24 @@ export function SwapDetails(props: SwapDetailsProps) {
 
   useEffect(() => {
     if (showSwitchNetwork) {
-      setModalState(PendingSwapNetworkStatus.WaitingForNetworkChange);
+      handleChangeModalState(PendingSwapNetworkStatus.WaitingForNetworkChange);
     } else if (
       currentStepNetworkStatus ===
-        PendingSwapNetworkStatus.WaitingForConnectingWallet ||
+      PendingSwapNetworkStatus.WaitingForConnectingWallet
+    ) {
+      handleChangeModalState(
+        PendingSwapNetworkStatus.WaitingForConnectingWallet
+      );
+    } else if (
       currentStepNetworkStatus === PendingSwapNetworkStatus.NetworkChanged
     ) {
-      setModalState(currentStepNetworkStatus);
-    } else {
-      setModalState(null);
+      handleChangeModalState(PendingSwapNetworkStatus.NetworkChanged);
     }
+
+    if (!showSwitchNetwork && showSwitchNetworkRef.current) {
+      handleCloseModal();
+    }
+    showSwitchNetworkRef.current = showSwitchNetwork;
   }, [currentStepNetworkStatus]);
 
   const lastConvertedTokenInFailedSwap =
@@ -177,7 +180,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     swap,
     switchNetwork,
     showNetworkModal: currentStepNetworkStatus,
-    setNetworkModal: setModalState,
+    setNetworkModal: handleChangeModalState,
     message: stepMessage,
     blockchains: blockchains,
     swappers,
@@ -277,7 +280,9 @@ export function SwapDetails(props: SwapDetailsProps) {
       header={{
         title: i18n.t('Swap Details'),
         onCancel:
-          swap.status === 'running' ? () => setModalState('cancel') : undefined,
+          swap.status === 'running'
+            ? () => handleChangeModalState('cancel')
+            : undefined,
         suffix: swap.status !== 'running' && (
           <SuffixContainer>
             <Button
@@ -285,7 +290,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               variant="ghost"
               type="error"
               size="xsmall"
-              onClick={() => setModalState('delete')}>
+              onClick={() => handleChangeModalState('delete')}>
               <Typography size="medium" variant="label" color="error">
                 {i18n.t('Delete')}
               </Typography>
@@ -314,58 +319,9 @@ export function SwapDetails(props: SwapDetailsProps) {
           </Button>
         )
       }>
-      <Container compact ref={containerRef} id="widget-swap-details-container">
-        <RequestIdContainer className={rowStyles()}>
-          <Typography variant="label" size="large" color="neutral700">
-            {`${i18n.t('Request ID')}`}
-          </Typography>
-          <div className={requestIdStyles()}>
-            <Typography variant="label" size="small" color="neutral700">
-              {requestId}
-            </Typography>
-            <Tooltip
-              container={getContainer()}
-              content={
-                isCopied
-                  ? i18n.t('Copied To Clipboard')
-                  : i18n.t('Copy Request ID')
-              }
-              open={isCopied || undefined}
-              side="bottom"
-              alignOffset={-16}
-              align="end">
-              <IconButton
-                id="widget-swap-details-done-copy-icon-btn"
-                variant="ghost"
-                onClick={handleCopy.bind(null, requestId || '')}>
-                {isCopied ? (
-                  <DoneIcon size={16} color="secondary" />
-                ) : (
-                  <CopyIcon size={16} color="gray" />
-                )}
-              </IconButton>
-            </Tooltip>
-
-            <StyledLink
-              target="_blank"
-              href={`${SCANNER_BASE_URL}/swap/${requestId}`}>
-              <Tooltip
-                container={getContainer()}
-                content={i18n.t('View on Rango Explorer')}
-                side="bottom">
-                <RangoExplorerIcon size={20} />
-              </Tooltip>
-            </StyledLink>
-          </div>
-        </RequestIdContainer>
-        <div className={rowStyles()}>
-          <Typography variant="label" size="large" color="neutral700">
-            {swap.finishTime ? i18n.t('Finished at') : i18n.t('Created at')}
-          </Typography>
-          <Typography variant="label" size="small" color="neutral700">
-            {swapDate}
-          </Typography>
-        </div>
+      <Container compact ref={containerRef}>
+        <RequestIdRow requestId={requestId} />
+        <SwapDateRow date={swapDate} isFinished={!!swap.finishTime} />
 
         <div className={outputStyles()}>
           <QuoteCost
@@ -460,13 +416,13 @@ export function SwapDetails(props: SwapDetailsProps) {
       </Container>
 
       <SwapDetailsModal
+        isOpen={isModalOpen}
         state={modalState}
-        onClose={() => setModalState(null)}
+        onClose={handleCloseModal}
         onCancel={onCancel}
         onDelete={onDelete}
         message={stepMessage.detailedMessage.content}
         swap={swap}
-        walletButtonDisabled={!isActiveTab}
       />
       <SwapDetailsCompleteModal
         open={!!showCompletedModal}

package/src/components/SwapDetails/SwapDetails.types.ts

@@ -6,6 +6,13 @@ export interface SwapDetailsProps {
   onDelete: () => void;
   onCancel: () => void;
 }
+export interface RequestIdProps {
+  requestId: string;
+}
+export interface SwapDateRowProps {
+  date: string;
+  isFinished: boolean;
+}
 export interface SwapDetailsPlaceholderPropTypes {
   requestId: string;
   showSkeleton: boolean;

package/src/components/SwapDetailsModal/SwapDetailsModal.ConnectWallet.tsx

@@ -0,0 +1,177 @@
+import type { ConnectWalletContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Divider,
+  Image,
+  MessageBox,
+  Spinner,
+  WarningIcon,
+} from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import React, { useState } from 'react';
+
+import { useWalletList } from '../../hooks/useWalletList';
+import { useUiStore } from '../../store/ui';
+import { getConciseAddress } from '../../utils/wallets';
+import { NamespaceItem } from '../NamespaceItem';
+
+import {
+  WalletIcon,
+  WalletIconBadgeContainer,
+} from './SwapDetailsModal.styles';
+
+export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
+  const { wallet: currentStepWallet, namespace, onClose } = props;
+
+  const [error, setError] = useState<Error | null>(null);
+  const { list } = useWalletList();
+  const isActiveTab = useUiStore.use.isActiveTab();
+  const { state, connect } = useWallets();
+
+  const wallet = list.find(
+    (wallet) => wallet.type === currentStepWallet.walletType
+  );
+  const namespaceData = wallet?.needsNamespace?.data.find(
+    (namespaceData) => namespaceData.value === namespace?.namespace
+  );
+
+  if (!wallet) {
+    return null;
+  }
+
+  const walletState = state(currentStepWallet.walletType);
+  const namespaceState =
+    wallet.isHub && namespace?.namespace
+      ? walletState.namespaces?.get(namespace.namespace)
+      : null;
+
+  const connecting = walletState.connecting || namespaceState?.connecting;
+  const connected = wallet.isHub
+    ? namespaceState?.connected
+    : walletState.connected;
+
+  const getButtonTitle = () => {
+    if (connected) {
+      return i18n.t('Done');
+    }
+    if (error) {
+      return i18n.t('Try again');
+    }
+    return i18n.t('Connect');
+  };
+
+  const getNamespaceSuffix = () => {
+    if (connecting) {
+      return <Spinner color="info" />;
+    } else if (error || connected) {
+      return null;
+    }
+    return <Checkbox checked disabled />;
+  };
+
+  const handleConnect = async () => {
+    try {
+      setError(null);
+      await connect(
+        wallet.type,
+        namespace?.namespace
+          ? [
+              {
+                namespace: namespace?.namespace,
+                network: undefined,
+                derivationPath: currentStepWallet.derivationPath,
+              },
+            ]
+          : undefined
+      );
+    } catch (error) {
+      setError(error as Error);
+    }
+  };
+
+  const handleClickButton = async () => {
+    if (connected) {
+      onClose();
+      return;
+    }
+
+    void handleConnect();
+  };
+
+  const getAddress = () => {
+    if (!connected) {
+      return null;
+    }
+    const firstAccountArray = wallet?.isHub
+      ? namespaceState?.accounts?.[0]?.split(':')
+      : walletState?.accounts?.[0]?.split(':');
+    const address = firstAccountArray?.[firstAccountArray?.length - 1];
+
+    if (!address) {
+      return null;
+    }
+
+    return getConciseAddress(address);
+  };
+
+  return (
+    <>
+      <MessageBox
+        type="warning"
+        title={i18n.t('Connect {wallet}', { wallet: wallet.title })}
+        description={i18n.t(
+          'The connection of your wallet or some networks has been disconnected. Connect to continue the swap'
+        )}
+        icon={
+          <WalletIcon>
+            <Image src={wallet.image} size={45} />
+            <WalletIconBadgeContainer>
+              <WarningIcon color="warning" size={10} />
+            </WalletIconBadgeContainer>
+          </WalletIcon>
+        }
+      />
+      {connected && !namespaceData && (
+        <>
+          <Divider size={10} />
+          <Alert
+            type="success"
+            variant="alarm"
+            title={i18n.t('Wallet connected successfully.')}
+          />
+        </>
+      )}
+      {error && !namespaceData && (
+        <>
+          <Divider size={10} />
+          <Alert type="error" title={error?.message} variant="alarm" />
+        </>
+      )}
+      {namespaceData && (
+        <>
+          <Divider size={30} />
+          <NamespaceItem
+            namespace={namespaceData}
+            suffix={getNamespaceSuffix()}
+            error={error?.message}
+            connected={connected}
+            address={getAddress()}
+          />
+        </>
+      )}
+      <Divider size="40" />
+      <Button
+        loading={connecting}
+        type="primary"
+        id="widget-connect-wallet-btn"
+        onClick={handleClickButton}
+        disabled={!isActiveTab}>
+        {getButtonTitle()}
+      </Button>
+    </>
+  );
+};

package/src/components/SwapDetailsModal/SwapDetailsModal.InstallWallet.tsx

@@ -0,0 +1,52 @@
+import type { InstallWalletContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, Image, MessageBox, WarningIcon } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import { detectInstallLink } from '@rango-dev/wallets-shared';
+import React from 'react';
+
+import {
+  WalletIcon,
+  WalletIconBadgeContainer,
+} from './SwapDetailsModal.styles';
+
+export const InstallWalletContent = (props: InstallWalletContentProps) => {
+  const { walletType } = props;
+
+  const { getWalletInfo } = useWallets();
+
+  const walletInfo = walletType ? getWalletInfo(walletType) : null;
+
+  if (!walletInfo) {
+    return null;
+  }
+
+  const handleButtonClick = () =>
+    window.open(detectInstallLink(walletInfo.installLink), '_blank');
+
+  return (
+    <>
+      <MessageBox
+        type="warning"
+        title={i18n.t('Install {wallet}', { wallet: walletInfo.name })}
+        description="Your wallet is not installed. Please install it to continue the swap.  "
+        icon={
+          <WalletIcon>
+            <Image src={walletInfo.img} size={45} />
+            <WalletIconBadgeContainer>
+              <WarningIcon color="warning" size={10} />
+            </WalletIconBadgeContainer>
+          </WalletIcon>
+        }
+      />
+      <Divider size="40" />
+      <Button
+        type="primary"
+        id="widget-install-wallet-btn"
+        onClick={handleButtonClick}>
+        {i18n.t('Install')}
+      </Button>
+    </>
+  );
+};

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

@@ -0,0 +1,17 @@
+import type { NetworkStateContentProps } from './SwapDetailsModal.types';
+
+import { i18n } from '@lingui/core';
+import { MessageBox } from '@rango-dev/ui';
+import React from 'react';
+
+export const NetworkStateContent = (props: NetworkStateContentProps) => {
+  const { status, message } = 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} />;
+};

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -1,89 +1,49 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
-import type { WalletInfoWithExtra } from '../../types';
 
-import { warn } from '@rango-dev/logging-core';
 import {
+  getCurrentNamespaceOfOrNull,
   getCurrentStep,
   getRelatedWalletOrNull,
 } from '@rango-dev/queue-manager-rango-preset';
-import { MessageBox, Wallet } from '@rango-dev/ui';
+import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
-import React, { useState } from 'react';
+import React from 'react';
 
-import { useWalletList } from '../../hooks/useWalletList';
-import { getContainer } from '../../utils/common';
 import { mapStatusToWalletState } from '../../utils/wallets';
-import { StatefulConnectModal } from '../StatefulConnectModal';
 
-import { WalletContainer } from './SwapDetailsModal.styles';
+import { ConnectWalletContent } from './SwapDetailsModal.ConnectWallet';
+import { InstallWalletContent } from './SwapDetailsModal.InstallWallet';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
-  const { type, title, swap, message, showWalletButton, walletButtonDisabled } =
-    props;
-  const [selectedWalletToConnect, setSelectedWalletToConnect] =
-    useState<WalletInfoWithExtra>();
-  const { getWalletInfo, state } = useWallets();
+  const { swap, onClose } = props;
+  const { state } = useWallets();
 
   const currentStep = getCurrentStep(swap);
   const currentStepWallet = currentStep
     ? getRelatedWalletOrNull(swap, currentStep)
     : null;
-  const currentStepFromBlockchain = currentStep?.fromBlockchain;
+
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
     ? mapStatusToWalletState(state(walletType))
     : null;
-  const walletInfo = walletType ? getWalletInfo(walletType) : null;
-  const shouldShowWallet =
-    showWalletButton && !!walletType && !!walletState && !!walletInfo;
-  const { list } = useWalletList();
+  const currentNamespace = currentStep
+    ? getCurrentNamespaceOfOrNull(swap, currentStep)
+    : null;
 
-  const handleWalletItemClick = () => {
-    if (!!walletType) {
-      const wallet = list.find((wallet) => wallet.type === walletType);
+  if (!walletType) {
+    return null;
+  }
 
-      if (wallet) {
-        setSelectedWalletToConnect(wallet);
-      } else {
-        warn(
-          new Error(
-            `It seems requested wallet to be connected is not available in the list. requested wallet: ${wallet}`
-          )
-        );
-      }
-    }
-  };
+  if (walletState === WalletState.NOT_INSTALLED) {
+    return <InstallWalletContent walletType={walletType} />;
+  }
 
   return (
-    <>
-      <MessageBox type={type} title={title} description={message} />
-      {shouldShowWallet && (
-        <WalletContainer>
-          <Wallet
-            container={getContainer()}
-            title={walletInfo.name}
-            image={walletInfo.img}
-            type={walletType}
-            state={walletState}
-            link={walletInfo.installLink}
-            disabled={walletButtonDisabled}
-            // TODO we need to show an error modal when user reject the connection
-            onClick={handleWalletItemClick}
-          />
-        </WalletContainer>
-      )}
-      <StatefulConnectModal
-        id="widget-swap-details-modal"
-        wallet={selectedWalletToConnect}
-        onClose={() => {
-          setSelectedWalletToConnect(undefined);
-        }}
-        options={{
-          defaultSelectedChains: currentStepFromBlockchain
-            ? [currentStepFromBlockchain]
-            : undefined,
-        }}
-      />
-    </>
+    <ConnectWalletContent
+      wallet={currentStepWallet}
+      namespace={currentNamespace}
+      onClose={onClose}
+    />
   );
 };

package/src/components/SwapDetailsModal/SwapDetailsModal.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const WalletContainer = styled('div', {
   display: 'flex',
@@ -16,3 +16,22 @@ export const TooltipErrorContent = styled('div', {
 export const ProfileBanner = styled('img', {
   width: '100%',
 });
+
+export const WalletIcon = styled('div', {
+  position: 'relative',
+});
+
+export const WalletIconBadgeContainer = styled('span', {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  borderRadius: '50%',
+  width: '14px',
+  height: '14px',
+  display: 'flex',
+  padding: '$2',
+  backgroundColor: '$warning300',
+  [`.${darkTheme} &`]: {
+    $$color: '$warning600',
+  },
+});