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

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -1,57 +1,46 @@
 import type { ModalPropTypes } from './SwapDetailsModal.types';
 
-import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
-import { WIDGET_UI_ID } from '../../constants';
+import { getContainer } from '../../utils/common';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { CancelContent } from './SwapDetailsModal.Cancel';
 import { DeleteContent } from './SwapDetailsModal.Delete';
-import { modalNetworkValues } from './SwapDetailsModal.helpers';
+import { NetworkStateContent } from './SwapDetailsModal.NetworkState';
 import { WalletStateContent } from './SwapDetailsModal.WalletState';
 
 export function SwapDetailsModal(props: ModalPropTypes) {
-  const {
-    state,
-    onClose,
-    onDelete,
-    onCancel,
-    swap,
-    message,
-    walletButtonDisabled,
-  } = props;
-
-  const showWalletStateContent =
-    state === PendingSwapNetworkStatus.WaitingForNetworkChange ||
-    state === PendingSwapNetworkStatus.WaitingForConnectingWallet ||
-    state === PendingSwapNetworkStatus.NetworkChanged;
+  const { isOpen, state, onClose, onDelete, onCancel, swap, message } = props;
 
   return (
     <WatermarkedModal
-      id="widget-swap-details-modal"
-      open={!!state}
+      open={isOpen}
       onClose={onClose}
-      container={
-        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
-      }>
-      {showWalletStateContent && (
-        <WalletStateContent
-          type={modalNetworkValues[state].type}
-          title={modalNetworkValues[state].title}
-          swap={swap}
-          message={message}
-          walletButtonDisabled={walletButtonDisabled}
-          showWalletButton={
-            state !== PendingSwapNetworkStatus.WaitingForNetworkChange
-          }
-        />
+      container={getContainer()}>
+      {state === 'waitingForConnectingWallet' && (
+        <WalletStateContent swap={swap} message={message} onClose={onClose} />
+      )}
+      {(state === 'waitingForNetworkChange' || state === 'networkChanged') && (
+        <NetworkStateContent message={message} status={state} />
       )}
       {state === 'delete' && (
-        <DeleteContent onClose={onClose} onDelete={onDelete} />
+        <DeleteContent
+          onClose={onClose}
+          onDelete={() => {
+            onClose();
+            onDelete();
+          }}
+        />
       )}
       {state === 'cancel' && (
-        <CancelContent onClose={onClose} onCancel={onCancel} />
+        <CancelContent
+          onClose={onClose}
+          onCancel={() => {
+            onClose();
+            onCancel();
+          }}
+        />
       )}
     </WatermarkedModal>
   );

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

@@ -1,3 +1,5 @@
+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';
 
 export type ModalState =
@@ -6,13 +8,13 @@ export type ModalState =
   | 'cancel'
   | null;
 export interface ModalPropTypes {
+  isOpen: boolean;
   onClose: () => void;
   onCancel: () => void;
   onDelete: () => void;
   state: ModalState;
   swap: PendingSwap;
   message: string;
-  walletButtonDisabled: boolean;
 }
 
 export interface CompleteModalPropTypes {
@@ -36,18 +38,37 @@ export interface CompleteModalPropTypes {
   diagnosisUrl?: string | null;
 }
 
-export interface ModalNetworkValueTypes {
-  type: 'loading' | 'warning' | 'success';
-  title: string;
+export interface WalletStateContentProps {
+  swap: PendingSwap;
+  message: string;
+  onClose: () => void;
 }
 
-export interface WalletStateContentProps extends ModalNetworkValueTypes {
-  swap: PendingSwap;
+export interface NetworkStateContentProps {
   message: string;
-  showWalletButton: boolean;
-  walletButtonDisabled: boolean;
+  status: 'networkChanged' | 'waitingForNetworkChange';
+}
+
+export interface InstallWalletContentProps {
+  walletType: LegacyWalletType;
+}
+
+export interface ConnectWalletContentProps {
+  wallet: {
+    walletType: LegacyWalletType;
+    address: string;
+    derivationPath?: string;
+  };
+  namespace: TargetNamespace | null;
+  onClose: () => void;
 }
 
-export type CancelContentProps = Pick<ModalPropTypes, 'onClose' | 'onCancel'>;
+export interface CancelContentProps {
+  onCancel: () => void;
+  onClose: () => void;
+}
 
-export type DeleteContentProps = Pick<ModalPropTypes, 'onClose' | 'onDelete'>;
+export interface DeleteContentProps {
+  onDelete: () => void;
+  onClose: () => void;
+}

package/src/components/WalletStatefulConnect/Detached.styles.ts

@@ -0,0 +1,6 @@
+import { styled } from '@rango-dev/ui';
+
+export const NamespacesHeader = styled('div', {
+  display: 'flex',
+  justifyContent: 'end',
+});

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -1,17 +1,23 @@
 import type { PropTypes } from './Detached.types';
 
 import { i18n } from '@lingui/core';
-import { Divider, Image, MessageBox } from '@rango-dev/ui';
+import { Button, Divider, Image, MessageBox } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
+import { NamespaceUnsupportedItem } from '../NamespaceItem/NamespaceUnsupportedItem';
+
+import { NamespacesHeader } from './Detached.styles';
 import { NamespaceDetachedItem } from './NamespaceDetachedItem';
 import { NamespaceList, StyledButton } from './Namespaces.styles';
-import { NamespaceUnsupportedItem } from './NamespaceUnsupportedItem';
 
 export function Detached(props: PropTypes) {
-  const { selectedNamespaces, value } = props;
+  const { selectedNamespaces, value, onDisconnectWallet } = props;
   const { targetWallet } = value;
 
+  const { state } = useWallets();
+  const walletState = state(targetWallet.type);
+
   return (
     <>
       <MessageBox
@@ -24,7 +30,18 @@ export function Detached(props: PropTypes) {
         )}
         icon={<Image src={targetWallet.image} size={45} />}
       />
-      <Divider size={20} />
+      <Divider size={30} />
+      <NamespacesHeader>
+        <Button
+          id="widget-detached-disconnect-wallet-btn"
+          variant="ghost"
+          type="error"
+          size="xsmall"
+          disabled={walletState.connecting || !walletState.connected}
+          onClick={onDisconnectWallet}>
+          {i18n.t('Disconnect wallet')}
+        </Button>
+      </NamespacesHeader>
       <NamespaceList id="widget-detached-namespace-list" as={'ul'}>
         {targetWallet.needsNamespace?.data.map((namespace, index, array) => (
           <React.Fragment key={namespace.id}>

package/src/components/WalletStatefulConnect/Detached.types.ts

@@ -4,5 +4,6 @@ import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 export interface PropTypes {
   value: NeedsNamespacesState;
   onConfirm: () => void;
+  onDisconnectWallet: () => void;
   selectedNamespaces: Namespace[] | null;
 }

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -3,49 +3,25 @@ import type { NamespaceData } from '@rango-dev/wallets-core/dist/hub/store/names
 import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 import { i18n } from '@lingui/core';
-import {
-  Button,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  Divider,
-  Spinner,
-  Typography,
-} from '@rango-dev/ui';
+import { Button, Spinner } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
-import { useAppStore } from '../../store/AppStore';
 import { getConciseAddress } from '../../utils/wallets';
-
-import { getBlockchainLogo } from './Namespaces.helpers';
-import {
-  NamespaceAccountAddress,
-  NamespaceDetachedItemInfo,
-  NamespaceItemContainer,
-  NamespaceItemContent,
-  NamespaceItemError,
-  NamespaceItemErrorDropdownToggle,
-  NamespaceItemInnerContent,
-  NamespaceLogo,
-} from './Namespaces.styles';
-import { SupportedChainsList } from './SupportedChainsList';
+import { NamespaceItem } from '../NamespaceItem';
 
 export const NamespaceDetachedItem = function NamespaceDetachedItem(
   props: NamespaceDetachedItemPropTypes
 ) {
   const { walletType, namespace, initialConnect } = props;
-  const blockchains = useAppStore().blockchains();
   const { connect, disconnect, state } = useWallets();
   const [error, setError] = useState<Error | null>(null);
-  const [errorIsExpanded, setErrorIsExpanded] = useState(false);
 
   const walletState = state(walletType);
 
   const namespaceState = walletState.namespaces?.get(namespace.value);
   const firstAccountArray = namespaceState.accounts?.[0]?.split(':');
 
-  const supportedChains = namespace.getSupportedChains(blockchains);
-
   /*
    * Ref to track ongoing connection attempts.
    * In React Strict Mode, effects run twice for safety checks.
@@ -53,8 +29,6 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
    */
   const processingConnectAttempt = useRef(false);
 
-  useEffect(() => setErrorIsExpanded(false), [error]);
-
   useLayoutEffect(() => {
     if (initialConnect && !processingConnectAttempt.current) {
       void handleConnectNamespace(walletType, namespace.value);
@@ -100,91 +74,31 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
   };
 
   return (
-    <NamespaceItemContainer hasError={!!error}>
-      <NamespaceItemContent>
-        <NamespaceLogo
-          src={getBlockchainLogo(blockchains, namespace.id)}
-          size={40}
-        />
-        <NamespaceItemInnerContent>
-          <NamespaceDetachedItemInfo className="widget-namespace-detached-item-info-div">
-            <Typography variant="label" size="large">
-              {namespace.label}
-            </Typography>
-            {namespaceState.connected && (
-              <Typography variant="body" size="small" color="success500">
-                {i18n.t('Connected')}
-              </Typography>
-            )}
-            {!namespaceState.connected && !!error && (
-              <Typography variant="body" size="small" color="error500">
-                {i18n.t('Connection failed')}
-              </Typography>
-            )}
-          </NamespaceDetachedItemInfo>
-          {namespaceState.connected && (
-            <NamespaceAccountAddress
-              variant="body"
-              size="small"
-              color="neutral700">
-              {getConciseAddress(
-                firstAccountArray?.[firstAccountArray?.length - 1]
-              )}
-            </NamespaceAccountAddress>
-          )}
-          {!namespaceState.connected && error && (
-            <NamespaceItemErrorDropdownToggle
-              className="widget-namespace-detached-item-error-toggle-btn"
-              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>
-          )}
-          {!namespaceState.connected &&
-            !error &&
-            supportedChains.length > 1 && (
-              <SupportedChainsList chains={supportedChains} />
-            )}
-        </NamespaceItemInnerContent>
-        {namespaceState.connecting ? (
+    <NamespaceItem
+      namespace={namespace}
+      connected={namespaceState.connected}
+      error={error?.message}
+      address={
+        namespaceState.connected
+          ? getConciseAddress(
+              firstAccountArray?.[firstAccountArray?.length - 1]
+            )
+          : ''
+      }
+      suffix={
+        namespaceState.connecting ? (
           <Spinner color="info" />
         ) : (
           <Button
             id="widget-name-space-connect-btn"
             variant="ghost"
             type={namespaceState.connected ? 'error' : 'primary'}
-            size="small"
+            size="xsmall"
             onClick={async () => handleButtonClick(namespaceState)}>
             {getButtonText()}
           </Button>
-        )}
-      </NamespaceItemContent>
-      {!namespaceState.connected && !!error && errorIsExpanded && (
-        <>
-          <Divider size={4} />
-          <NamespaceItemError id="widget-namespace-item-error-div">
-            <Typography variant="body" size="small" color="neutral700">
-              {(error.cause as Error)?.message || error.message}
-            </Typography>
-          </NamespaceItemError>
-        </>
-      )}
-    </NamespaceItemContainer>
+        )
+      }
+    />
   );
 };

package/src/components/WalletStatefulConnect/NamespaceListItem.tsx

@@ -1,49 +1,24 @@
 import type { NamespaceItemPropTypes } from './Namespaces.types';
 
-import { Checkbox, Radio, Typography } from '@rango-dev/ui';
+import { Checkbox, Radio } from '@rango-dev/ui';
 import React from 'react';
 
-import { useAppStore } from '../../store/AppStore';
-
-import { getBlockchainLogo } from './Namespaces.helpers';
-import {
-  NamespaceItemContainer,
-  NamespaceItemContent,
-  NamespaceItemInnerContent,
-  NamespaceLogo,
-} from './Namespaces.styles';
-import { SupportedChainsList } from './SupportedChainsList';
+import { NamespaceItem } from '../NamespaceItem';
 
 export function NamespaceListItem(props: NamespaceItemPropTypes) {
   const { onClick, type, namespace } = props;
-  const blockchains = useAppStore().blockchains();
 
-  const supportedChains = namespace.getSupportedChains(blockchains);
-  const showSupportedChains = supportedChains.length > 1;
   return (
-    <NamespaceItemContainer
+    <NamespaceItem
+      namespace={namespace}
       onClick={onClick}
-      clickable
-      className="widget-namespace-list-item">
-      <NamespaceItemContent>
-        <NamespaceLogo
-          src={getBlockchainLogo(blockchains, namespace.id)}
-          size={40}
-        />
-        <NamespaceItemInnerContent showSupportedChains={showSupportedChains}>
-          <Typography variant="label" size="large">
-            {namespace.label}
-          </Typography>
-          {showSupportedChains && (
-            <SupportedChainsList chains={supportedChains} />
-          )}
-        </NamespaceItemInnerContent>
-        {type === 'radio' ? (
+      suffix={
+        type === 'radio' ? (
           <Radio value={namespace.value} />
         ) : (
           <Checkbox checked={props.value} />
-        )}
-      </NamespaceItemContent>
-    </NamespaceItemContainer>
+        )
+      }
+    />
   );
 }

package/src/components/WalletStatefulConnect/Namespaces.styles.ts

@@ -1,104 +1,12 @@
-import { Button, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
+import { Button, styled } from '@rango-dev/ui';
 
 export const NamespaceList = styled('ul', {
   padding: 0,
-  paddingTop: '$10',
+  paddingTop: '$16',
   paddingBottom: '$20',
   margin: 0,
 });
 
-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 NamespaceLogo = styled(Image, {
-  variants: {
-    disabled: {
-      true: {
-        opacity: '0.5',
-      },
-    },
-  },
-});
-
 export const StyledButton = styled(Button, {
   minHeight: '$40',
 });
-
-export const NamespaceAccountAddress = styled(Typography, {
-  maxWidth: '100px',
-});
-
-export const NamespaceItemError = styled('div', {
-  paddingLeft: '48px',
-});
-
-export const NamespaceItemErrorDropdownToggle = styled('div', {
-  display: 'flex',
-  gap: '2px',
-  cursor: 'pointer',
-  alignItems: 'center',
-  width: 'fit-content',
-});
-
-export const NamespaceDetachedItemInfo = styled('div', {
-  display: 'flex',
-  gap: '6px',
-  alignItems: 'center',
-});

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -13,10 +13,10 @@ import {
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
+import { NamespaceUnsupportedItem } from '../NamespaceItem/NamespaceUnsupportedItem';
 
 import { NamespaceListItem } from './NamespaceListItem';
 import { NamespaceList, StyledButton } from './Namespaces.styles';
-import { NamespaceUnsupportedItem } from './NamespaceUnsupportedItem';
 
 export function Namespaces(props: PropTypes) {
   const { targetWallet } = props.value;

package/src/components/WalletStatefulConnect/Namespaces.types.tsx

@@ -31,7 +31,3 @@ export type NamespaceDetachedItemPropTypes = {
   initialConnect?: boolean;
   namespace: LegacyNamespaceMeta;
 };
-
-export type NamespaceUnsupportedItemPropTypes = {
-  namespace: LegacyNamespaceMeta;
-};

package/src/containers/Wallets/useUpdates.ts

@@ -77,7 +77,7 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     );
 
     if (data.length) {
-      void newWalletConnected(data, info.namespace);
+      void newWalletConnected(data, info.namespace, state.derivationPath);
     }
   };
 

package/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts

@@ -124,42 +124,29 @@ export function generateWarnings(params: {
   return output;
 }
 
-export function handleQuoteErrors(error: any): ConfirmSwapFetchResult {
+export function handleQuoteErrors(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  error: any
+): NonNullable<ConfirmSwapFetchResult['error']> {
   if (error?.code === 'ERR_CANCELED') {
     return {
-      swap: null,
-      error: {
-        type: QuoteErrorType.REQUEST_CANCELED,
-      },
-      warnings: null,
+      type: QuoteErrorType.REQUEST_CANCELED,
     };
   }
 
   if (error.cause) {
-    return {
-      swap: null,
-      error: error.cause,
-      warnings: null,
-    };
+    return error.cause;
   }
 
   if (error?.code === 'ERR_BAD_REQUEST') {
     return {
-      swap: null,
-      error: {
-        type: QuoteErrorType.NO_RESULT,
-        diagnosisMessage: error.response.data.error,
-      },
-      warnings: null,
+      type: QuoteErrorType.NO_RESULT,
+      diagnosisMessage: error.response.data.error,
     };
   }
 
   return {
-    swap: null,
-    error: {
-      type: QuoteErrorType.REQUEST_FAILED,
-      diagnosisMessage: error.message,
-    },
-    warnings: null,
+    type: QuoteErrorType.REQUEST_FAILED,
+    diagnosisMessage: error.message,
   };
 }

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -1,12 +1,17 @@
 import type { ConfirmSwap } from './useConfirmSwap.types';
-import type { PendingSwapSettings, SelectedQuote } from '../../types';
 import type { ConfirmRouteRequest } from 'rango-sdk';
 
+import { warn } from '@rango-dev/logging-core';
 import { calculatePendingSwap } from '@rango-dev/queue-manager-rango-preset';
 import { useEffect } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
+import {
+  type PendingSwapSettings,
+  QuoteErrorType,
+  type SelectedQuote,
+} from '../../types';
 import { getWalletsForNewSwap } from '../../utils/swap';
 import { useFetchConfirmQuote } from '../useFetchConfirmQuote';
 
@@ -125,9 +130,19 @@ export function useConfirmSwap(): ConfirmSwap {
           warnings: confirmSwapWarnings,
         };
       });
-    } catch (error: any) {
-      const confirmSwapResult = handleQuoteErrors(error);
-      return confirmSwapResult;
+    } catch (error: unknown) {
+      const quoteError = handleQuoteErrors(error);
+      if (quoteError.type !== QuoteErrorType.REQUEST_CANCELED) {
+        warn(new Error('confirm swap error'), {
+          tags: {
+            ...quoteError,
+            type: QuoteErrorType[quoteError.type],
+            initialQuote,
+            requestBody,
+          },
+        });
+      }
+      return { swap: null, error: quoteError, warnings: null };
     }
   };