@rango-dev/widget-embedded 0.45.1-next.3 → 0.45.1-next.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.45.1-next.3",
+  "version": "0.45.1-next.4",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -27,7 +27,7 @@
     "@rango-dev/logging-core": "^0.9.1-next.0",
     "@rango-dev/provider-all": "^0.48.1-next.2",
     "@rango-dev/queue-manager-core": "^0.30.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.47.1-next.2",
+    "@rango-dev/queue-manager-rango-preset": "^0.47.1-next.3",
     "@rango-dev/queue-manager-react": "^0.30.1-next.0",
     "@rango-dev/signer-solana": "^0.41.1-next.0",
     "@rango-dev/ui": "^0.48.1-next.3",

package/src/components/{WalletStatefulConnect/Namespaces.helpers.ts → NamespaceItem/NamespaceItem.helpers.ts}

@@ -3,7 +3,7 @@ import type { BlockchainMeta } from 'rango-types';
 export function getBlockchainLogo(
   blockchains: BlockchainMeta[],
   blockchainName: string
-) {
+): string | undefined {
   return blockchains.find((blockchain) => blockchain.name === blockchainName)
     ?.logo;
 }

package/src/components/NamespaceItem/NamespaceItem.styles.ts

@@ -0,0 +1,93 @@
+import { darkTheme, Image, styled, Typography } from '@rango-dev/ui';
+
+export const NamespaceItemContainer = styled('li', {
+  backgroundColor: '$neutral200',
+  padding: '$16',
+  borderRadius: '$sm',
+  variants: {
+    clickable: {
+      true: {
+        cursor: 'pointer',
+      },
+    },
+    hasError: {
+      true: {
+        background: '$error100',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$error700',
+        },
+      },
+    },
+    unsupported: {
+      true: {
+        cursor: 'not-allowed',
+        paddingTop: '$8',
+        paddingBottom: '$8',
+      },
+    },
+  },
+});
+
+export const NamespaceItemContent = styled('div', {
+  display: 'flex',
+  gap: '$8',
+  alignItems: 'center',
+});
+
+export const NamespaceItemInnerContent = styled('div', {
+  flex: '1',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  height: '$40',
+  variants: {
+    showSupportedChains: {
+      true: {
+        justifyContent: 'space-between',
+      },
+      false: {
+        justifyContent: 'center',
+      },
+    },
+  },
+});
+
+export const UnsupportedNamespaceItemInnerContent = styled('div', {
+  flex: '1',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$4',
+  opacity: '0.5',
+});
+
+export const NamespaceItemInfo = styled('div', {
+  display: 'flex',
+  gap: '$6',
+  alignItems: 'center',
+});
+
+export const NamespaceItemError = styled('div', {
+  paddingLeft: '48px',
+});
+
+export const NamespaceItemErrorDropdownToggle = styled('div', {
+  display: 'flex',
+  gap: '$2',
+  cursor: 'pointer',
+  alignItems: 'center',
+  width: 'fit-content',
+});
+
+export const NamespaceAccountAddress = styled(Typography, {
+  maxWidth: '100px',
+});
+
+export const NamespaceLogo = styled(Image, {
+  variants: {
+    disabled: {
+      true: {
+        opacity: '0.5',
+      },
+    },
+  },
+});

package/src/components/NamespaceItem/NamespaceItem.tsx

@@ -0,0 +1,117 @@
+import type { PropTypes } from './NamespaceItem.types';
+
+import { i18n } from '@lingui/core';
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  Divider,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+
+import { getBlockchainLogo } from './NamespaceItem.helpers';
+import {
+  NamespaceAccountAddress,
+  NamespaceItemContainer,
+  NamespaceItemContent,
+  NamespaceItemError,
+  NamespaceItemErrorDropdownToggle,
+  NamespaceItemInfo,
+  NamespaceItemInnerContent,
+  NamespaceLogo,
+} from './NamespaceItem.styles';
+import { SupportedChainsList } from './SupportedChainsList';
+
+export function NamespaceItem(props: PropTypes) {
+  const { namespace, error, suffix, connected, address, onClick } = props;
+
+  const [errorIsExpanded, setErrorIsExpanded] = useState(false);
+  const blockchains = useAppStore().blockchains();
+
+  useEffect(() => setErrorIsExpanded(false), [error]);
+
+  const supportedChains = namespace.getSupportedChains(blockchains);
+  const isSupportedChainsDisplayed =
+    !error && !connected && supportedChains.length > 1;
+
+  return (
+    <NamespaceItemContainer
+      hasError={!!error}
+      clickable={!!onClick}
+      onClick={onClick}>
+      <NamespaceItemContent>
+        <NamespaceLogo
+          src={getBlockchainLogo(blockchains, namespace.id)}
+          size={40}
+        />
+        <NamespaceItemInnerContent
+          showSupportedChains={
+            isSupportedChainsDisplayed || connected || !!error
+          }>
+          <NamespaceItemInfo>
+            <Typography variant="label" size="large">
+              {namespace.label}
+            </Typography>
+            {connected && (
+              <Typography variant="body" size="small" color="success500">
+                {i18n.t('Connected')}
+              </Typography>
+            )}
+            {!!error && (
+              <Typography variant="body" size="small" color="error500">
+                {i18n.t('Connection failed')}
+              </Typography>
+            )}
+          </NamespaceItemInfo>
+          {isSupportedChainsDisplayed && (
+            <SupportedChainsList chains={supportedChains} />
+          )}
+          {connected && (
+            <NamespaceAccountAddress
+              variant="body"
+              size="small"
+              color="neutral700">
+              {address}
+            </NamespaceAccountAddress>
+          )}
+          {error && (
+            <NamespaceItemErrorDropdownToggle
+              onClick={() =>
+                setErrorIsExpanded((errorIsExpanded) => !errorIsExpanded)
+              }>
+              <Typography
+                variant="body"
+                size="small"
+                color="neutral700"
+                style={{
+                  textDecoration: 'underline',
+                  userSelect: 'none',
+                  textDecorationSkipInk: 'none',
+                }}>
+                {i18n.t('See why')}
+              </Typography>
+              {errorIsExpanded ? (
+                <ChevronUpIcon size={12} color="gray" />
+              ) : (
+                <ChevronDownIcon size={12} color="gray" />
+              )}
+            </NamespaceItemErrorDropdownToggle>
+          )}
+        </NamespaceItemInnerContent>
+        {suffix}
+      </NamespaceItemContent>
+      {!!error && errorIsExpanded && (
+        <>
+          <Divider size={4} />
+          <NamespaceItemError>
+            <Typography variant="body" size="small" color="neutral700">
+              {error}
+            </Typography>
+          </NamespaceItemError>
+        </>
+      )}
+    </NamespaceItemContainer>
+  );
+}

package/src/components/NamespaceItem/NamespaceItem.types.ts

@@ -0,0 +1,14 @@
+import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
+
+export type PropTypes = {
+  namespace: LegacyNamespaceMeta;
+  error?: string;
+  suffix?: React.ReactNode;
+  connected?: boolean;
+  address?: string | null;
+  onClick?: () => void;
+};
+
+export type NamespaceUnsupportedItemPropTypes = {
+  namespace: LegacyNamespaceMeta;
+};

package/src/components/{WalletStatefulConnect → NamespaceItem}/NamespaceUnsupportedItem.tsx

@@ -1,4 +1,4 @@
-import type { NamespaceUnsupportedItemPropTypes } from './Namespaces.types';
+import type { NamespaceUnsupportedItemPropTypes } from './NamespaceItem.types';
 
 import { i18n } from '@lingui/core';
 import { Typography } from '@rango-dev/ui';
@@ -6,13 +6,13 @@ import React from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 
-import { getBlockchainLogo } from './Namespaces.helpers';
+import { getBlockchainLogo } from './NamespaceItem.helpers';
 import {
   NamespaceItemContainer,
   NamespaceItemContent,
   NamespaceLogo,
   UnsupportedNamespaceItemInnerContent,
-} from './Namespaces.styles';
+} from './NamespaceItem.styles';
 
 export function NamespaceUnsupportedItem(
   props: NamespaceUnsupportedItemPropTypes

package/src/components/NamespaceItem/index.ts

@@ -0,0 +1 @@
+export { NamespaceItem } from './NamespaceItem';

package/src/components/SwapDetails/RequestIdRow.tsx

@@ -0,0 +1,73 @@
+import type { RequestIdProps } from './SwapDetails.types';
+
+import { i18n } from '@lingui/core';
+import {
+  CopyIcon,
+  DoneIcon,
+  IconButton,
+  RangoExplorerIcon,
+  Tooltip,
+  Typography,
+  useCopyToClipboard,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { SCANNER_BASE_URL } from '../../constants';
+import { getContainer } from '../../utils/common';
+
+import { RESET_INTERVAL } from './SwapDetails.helpers';
+import {
+  RequestIdContainer,
+  requestIdStyles,
+  rowStyles,
+  StyledLink,
+} from './SwapDetails.styles';
+
+export function RequestIdRow(props: RequestIdProps) {
+  const { requestId } = props;
+  const [isCopied, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
+
+  return (
+    <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>
+  );
+}

package/src/components/SwapDetails/SwapDateRow.tsx

@@ -0,0 +1,21 @@
+import type { SwapDateRowProps } from './SwapDetails.types';
+
+import { i18n } from '@lingui/core';
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { rowStyles } from './SwapDetails.styles';
+
+export function SwapDateRow(props: SwapDateRowProps) {
+  const { date, isFinished } = props;
+  return (
+    <div className={rowStyles()}>
+      <Typography variant="label" size="large" color="neutral700">
+        {isFinished ? i18n.t('Finished at') : i18n.t('Created at')}
+      </Typography>
+      <Typography variant="label" size="small" color="neutral700">
+        {date}
+      </Typography>
+    </div>
+  );
+}

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;