@rango-dev/widget-embedded 0.41.2-next.1 → 0.41.2-next.11

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -3,22 +3,16 @@ import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 import { i18n } from '@lingui/core';
 import {
+  Alert,
   Button,
-  Checkbox,
   Divider,
   Image,
-  ListItemButton,
   MessageBox,
-  Radio,
   RadioRoot,
 } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
-import { useAppStore } from '../../store/AppStore';
-import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
-
-import { LogoContainer, Spinner } from './ConnectStatus.styles';
-import { getBlockchainLogo } from './Namespaces.helpers';
+import { NamespaceListItem } from './NamespaceListItem';
 import { NamespaceList } from './Namespaces.styles';
 
 export function Namespaces(props: PropTypes) {
@@ -27,8 +21,13 @@ export function Namespaces(props: PropTypes) {
   const providerImage = targetWallet.image;
 
   const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
-
-  const blockchains = useAppStore().blockchains();
+  const supportedNamespaces = useMemo(
+    () =>
+      targetWallet.needsNamespace?.data.filter(
+        (namespace) => !namespace.unsupported
+      ),
+    [targetWallet?.type]
+  );
 
   const onSelect = (namespace: Namespace) => {
     if (singleNamespace) {
@@ -42,6 +41,23 @@ export function Namespaces(props: PropTypes) {
     }
   };
 
+  const allSupportedNamespacesSelected =
+    supportedNamespaces?.length === selectedNamespaces.length;
+
+  const onSelectAll = () => {
+    if (singleNamespace) {
+      throw new Error(
+        'onSelectAll should not be called on single selection mode.'
+      );
+    } else if (allSupportedNamespacesSelected) {
+      setSelectedNamespaces([]);
+    } else if (supportedNamespaces) {
+      setSelectedNamespaces(
+        supportedNamespaces.map((namespace) => namespace.value)
+      );
+    }
+  };
+
   const wrapRadioRoot = (children: React.ReactNode) => {
     if (singleNamespace) {
       return <RadioRoot value={selectedNamespaces?.[0]}>{children}</RadioRoot>;
@@ -50,63 +66,94 @@ export function Namespaces(props: PropTypes) {
     return <>{children}</>;
   };
 
+  useEffect(() => {
+    // Initially select supported and required namespaces
+    if (!singleNamespace && supportedNamespaces) {
+      if (!!props.value.defaultSelectedChains?.length) {
+        const namespacesContainingDefaultSelectedChains =
+          supportedNamespaces.filter((namespace) =>
+            namespace.chains.some((chain) =>
+              props.value.defaultSelectedChains?.includes(chain.name)
+            )
+          );
+        setSelectedNamespaces(
+          namespacesContainingDefaultSelectedChains.map(
+            (namespace) => namespace.value
+          )
+        );
+      } else {
+        setSelectedNamespaces(
+          supportedNamespaces.map((namespace) => namespace.value)
+        );
+      }
+    }
+  }, []);
+
   return (
     <>
-      <Divider size={20} />
       <MessageBox
         type="info"
-        title={i18n.t('Select chain types')}
+        title={i18n.t(`Connect {wallet}`, {
+          wallet: targetWallet.title,
+        })}
         description={i18n.t(
-          `This wallet supports multiple chains. Select which chain you'd like to connect to.`
+          "This wallet supports multiple chains. Choose which chains you'd like to connect to."
         )}
-        icon={
-          <LogoContainer>
-            <WalletImageContainer>
-              <Image src={providerImage} size={45} />
-            </WalletImageContainer>
-            <Spinner />
-          </LogoContainer>
-        }
+        icon={<Image src={providerImage} size={45} />}
       />
+      {singleNamespace ? (
+        <>
+          <Divider size={20} />
+          <Alert
+            variant="alarm"
+            type="info"
+            title={i18n.t(
+              'This wallet can only connect to one chain at a time. '
+            )}
+          />
+        </>
+      ) : (
+        <>
+          <Divider size={30} />
+          <Button
+            style={{ marginLeft: 'auto' }}
+            id="widget-name-space-select-all-btn"
+            size="xsmall"
+            variant="ghost"
+            type="primary"
+            onClick={onSelectAll}>
+            {allSupportedNamespacesSelected
+              ? i18n.t('Deselect all')
+              : i18n.t('Select all')}
+          </Button>
+        </>
+      )}
       <NamespaceList>
         {wrapRadioRoot(
           <>
-            {targetWallet.needsNamespace?.data.map((ns) => {
-              return (
-                <ListItemButton
-                  key={ns.id}
-                  id={ns.id}
-                  title={ns.label}
-                  hasDivider
-                  style={{ height: 60 }}
-                  onClick={() => onSelect(ns.value)}
-                  start={
-                    <Image
-                      src={getBlockchainLogo(blockchains, ns.id)}
-                      size={22}
-                    />
-                  }
-                  end={
-                    singleNamespace ? (
-                      <Radio value={ns.value} />
-                    ) : (
-                      <Checkbox
-                        checked={selectedNamespaces.includes(ns.value)}
-                      />
-                    )
-                  }
-                />
-              );
-            })}
+            {targetWallet.needsNamespace?.data.map(
+              (namespace, index, array) => (
+                <React.Fragment key={namespace.id}>
+                  <NamespaceListItem
+                    value={selectedNamespaces.includes(namespace.value)}
+                    namespace={namespace}
+                    type={singleNamespace ? 'radio' : 'checkbox'}
+                    onClick={() => onSelect(namespace.value)}
+                  />
+                  {index !== array.length - 1 && <Divider size={10} />}
+                </React.Fragment>
+              )
+            )}
           </>
         )}
       </NamespaceList>
+      <Divider size={20} />
       <Button
         id="widget-name-space-confirm-btn"
         type="primary"
         disabled={!selectedNamespaces.length}
         onClick={() => props.onConfirm(selectedNamespaces)}>
-        {i18n.t('Confirm')}
+        {i18n.t('Connect')}
       </Button>
     </>
   );

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

@@ -1,7 +1,35 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type {
+  Chain,
+  Namespace,
+} from '@rango-dev/wallets-core/namespaces/common';
 
 export interface PropTypes {
   onConfirm: (namespaces: Namespace[]) => void;
   value: NeedsNamespacesState;
 }
+
+interface NamespaceItemSharedPropTypes {
+  onClick: () => void;
+  type: 'radio' | 'checkbox';
+  namespace: {
+    label: string;
+    id: string;
+    value: Namespace;
+    chains: Chain[];
+    unsupported?: boolean;
+  };
+}
+
+interface RadioNamespaceItemPropTypes extends NamespaceItemSharedPropTypes {
+  type: 'radio';
+}
+
+interface CheckboxNamespaceItemPropTypes extends NamespaceItemSharedPropTypes {
+  type: 'checkbox';
+  value: boolean;
+}
+
+export type NamespaceItemPropTypes =
+  | RadioNamespaceItemPropTypes
+  | CheckboxNamespaceItemPropTypes;

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

@@ -0,0 +1,25 @@
+import { styled } from '@rango-dev/ui';
+
+export const SupportedChainsContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  padding: 0,
+  margin: 0,
+});
+
+export const SupportedChainItem = styled('div', {
+  marginLeft: '-5px',
+  listStyleType: 'none',
+  backgroundColor: '$background',
+  borderRadius: '$lg',
+  minWidth: '15px',
+  height: '15px',
+  variants: {
+    firstItem: {
+      true: { marginLeft: 0 },
+    },
+  },
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});

package/src/components/WalletStatefulConnect/SupportedChainsList.tsx

@@ -0,0 +1,58 @@
+import type { PropTypes } from './SupportedChainsList.types';
+
+import { Image, Tooltip, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+
+import {
+  SupportedChainItem,
+  SupportedChainsContainer,
+} from './SupportedChainsList.styles';
+
+const SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER = 3;
+
+export function SupportedChainsList(props: PropTypes) {
+  const { chains } = props;
+  return (
+    <SupportedChainsContainer>
+      {chains
+        .slice(0, SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER)
+        .map((chain, index) => (
+          <Tooltip
+            key={chain.name}
+            container={getContainer()}
+            side="bottom"
+            align="start"
+            content={chain.name}
+            sideOffset={4}>
+            <SupportedChainItem firstItem={index === 0}>
+              <Image src={chain.logo} size={15} />
+            </SupportedChainItem>
+          </Tooltip>
+        ))}
+      {chains.length > SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER && (
+        <Tooltip
+          container={getContainer()}
+          side="bottom"
+          align="start"
+          sideOffset={4}
+          content={
+            <SupportedChainsContainer>
+              {chains.map((chain, index) => (
+                <SupportedChainItem key={chain.name} firstItem={index === 0}>
+                  <Image src={chain.logo} size={15} />
+                </SupportedChainItem>
+              ))}
+            </SupportedChainsContainer>
+          }>
+          <SupportedChainItem>
+            <Typography variant="body" size="xsmall">
+              +{chains.length - SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER}
+            </Typography>
+          </SupportedChainItem>
+        </Tooltip>
+      )}
+    </SupportedChainsContainer>
+  );
+}

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

@@ -0,0 +1,5 @@
+import type { Chain } from '@rango-dev/wallets-core/dist/namespaces/common/types';
+
+export type PropTypes = {
+  chains: Chain[];
+};

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -85,72 +85,70 @@ export function useStatefulConnect(): UseStatefulConnect {
     const isDisconnected = wallet.state === WalletState.DISCONNECTED;
 
     if (isDisconnected) {
-      // Legacy and hub have different structure to check wether we need to show namespace or not.
-
-      // Hub
-      const isHub = !!wallet.isHub;
-      if (isHub) {
-        const detachedInstances = wallet.properties?.find(
-          (item) => item.name === 'detached'
-        );
-        const needsNamespace =
-          detachedInstances && wallet.state !== 'connected';
-
-        if (needsNamespace) {
-          dispatch({
-            type: 'needsNamespace',
-            payload: {
-              targetWallet: wallet,
-            },
-          });
-          return { status: ResultStatus.Namespace };
-        }
-      }
-
       /*
-       * Legacy
-       *
-       * For legacy there are 3 states:
-       * 1. a wallet doesn't have any namespace defined, we call the connect.
-       * 2. a wallet has more than two namespaces, we should show namepsace modal, and in that place user will be checked to needs derivation path or not.
-       * 3. a wallet has exactly one namespacesape, in this case we check if that needs derivation or not, if it needs we will do it here by dispatching the action accordingly.
+       * Currently, handling connect should be covered for 3 different types of target wallet:
+       * 1. Target wallet does not contain any namespaces, in this situation we should just try to connect to the related provider.
+       * 2. Target wallet contains more than one namespace, in this situation we should display namespaces modal to allow the user to choose from available namespaces.
+       * 3. Target wallet contains only one namespace, in this situation we should check if that namespace needs derivation path and based on that, try to connect to the related provider or display derivation path modal.
        */
-      if (!wallet.needsNamespace) {
+
+      // Legacy and hub have different structure to handle each situation.
+      const isHub = !!wallet.isHub;
+      const detachedInstances = wallet.properties?.find(
+        (item) => item.name === 'detached'
+      )?.value;
+
+      // 1. Target wallet does not contain any namespaces
+      if (
+        (isHub && !detachedInstances?.length) ||
+        (!isHub && !wallet.needsNamespace)
+      ) {
         return await runConnect(wallet.type, undefined, options);
       }
 
-      const needsNamespace = wallet.needsNamespace.data.length > 1;
-      const needsDerivationPath = wallet.needsDerivationPath;
-
-      if (needsNamespace) {
+      // 2. Target wallet contains more than one namespace
+      if (
+        (isHub && detachedInstances?.length && detachedInstances.length > 1) ||
+        (!isHub &&
+          wallet.needsNamespace?.data.length &&
+          wallet.needsNamespace.data.length > 1)
+      ) {
         dispatch({
           type: 'needsNamespace',
           payload: {
             targetWallet: wallet,
+            defaultSelectedChains: options?.defaultSelectedChains,
           },
         });
         return { status: ResultStatus.Namespace };
-      } else if (needsDerivationPath) {
-        const namespace = wallet.needsNamespace.data[0];
+      }
 
-        dispatch({
-          type: 'needsDerivationPath',
-          payload: {
-            providerType: wallet.type,
-            providerImage: wallet.image,
+      // 3. Target wallet contains only one namespace
+      if (
+        (isHub && detachedInstances?.length === 1) ||
+        (!isHub && wallet.needsNamespace?.data.length === 1)
+      ) {
+        if (wallet.needsNamespace && wallet.needsDerivationPath) {
+          const namespace = wallet.needsNamespace.data[0];
+
+          dispatch({
+            type: 'needsDerivationPath',
+            payload: {
+              providerType: wallet.type,
+              providerImage: wallet.image,
+              namespace: namespace.value,
+            },
+          });
+          return { status: ResultStatus.DerivationPath };
+        }
+        return await runConnect(
+          wallet.type,
+          wallet.needsNamespace?.data.map((namespace) => ({
             namespace: namespace.value,
-          },
-        });
-        return { status: ResultStatus.DerivationPath };
+          })),
+          options
+        );
       }
-
-      return await runConnect(
-        wallet.type,
-        wallet.needsNamespace?.data.map((namespace) => ({
-          namespace: namespace.value,
-        })),
-        options
-      );
     }
 
     if (options?.disconnectIfConnected) {

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -4,10 +4,12 @@ import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 export interface HandleConnectOptions {
   // To have a switch between connect and disconnect when user is clicking on a button, this option can be helpful.
   disconnectIfConnected?: boolean;
+  defaultSelectedChains?: string[];
 }
 
 export interface NeedsNamespacesState {
   targetWallet: ExtendedModalWalletInfo;
+  defaultSelectedChains?: string[];
 }
 
 export interface NeedsDerivationPathState {

package/src/utils/swap.ts

@@ -9,6 +9,7 @@ import type {
   SwapButtonState,
   Wallet,
 } from '../types';
+import type { ExtendedWalletInfo } from '@rango-dev/wallets-react';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type {
   BestRouteRequest,
@@ -22,6 +23,7 @@ import type { PendingSwap, PendingSwapStep } from 'rango-types';
 
 import { i18n } from '@lingui/core';
 import {
+  getRelatedWalletOrNull,
   type RouteEvent,
   RouteEventType,
   type StepEvent,
@@ -50,7 +52,7 @@ import {
 import { getBlockchainShortNameFor, isValidTokenAddress } from './meta';
 import { numberToString } from './numbers';
 import { getRequiredBalanceOfWallet } from './quote';
-import { getQuoteWallets } from './wallets';
+import { getQuoteChains } from './wallets';
 
 export function getOutputRatio(
   inputUsdValue: BigNumber | null,
@@ -601,7 +603,7 @@ export function generateBalanceWarnings(
   blockchains: BlockchainMeta[]
 ) {
   const fee = quote.validationStatus;
-  const requiredWallets = getQuoteWallets({ filter: 'required', quote });
+  const requiredWallets = getQuoteChains({ filter: 'required', quote });
   const walletsSortedByRequiredWallets = selectedWallets.sort(
     (selectedWallet1, selectedWallet2) =>
       requiredWallets.indexOf(selectedWallet1.chain) -
@@ -666,7 +668,8 @@ export function isNetworkStatusInWarningState(
 
 export function getSwapMessages(
   pendingSwap: PendingSwap,
-  currentStep: PendingSwapStep | null
+  currentStep: PendingSwapStep | null,
+  getWalletInfo?: (type: WalletType) => ExtendedWalletInfo
 ): {
   shortMessage: string;
   detailedMessage: { content: string; long: boolean };
@@ -685,10 +688,20 @@ export function getSwapMessages(
   if (networkWarningState) {
     message = pendingSwap.networkStatusExtraMessage || '';
     detailedMessage = pendingSwap.networkStatusExtraMessageDetail || '';
+
+    const currentStepWallet = currentStep
+      ? getRelatedWalletOrNull(pendingSwap, currentStep)
+      : null;
+    const walletType = currentStepWallet?.walletType;
+    const walletName = walletType ? getWalletInfo?.(walletType)?.name : null;
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (currentStep?.networkStatus) {
       case PendingSwapNetworkStatus.WaitingForConnectingWallet:
-        message = message || i18n.t('Waiting for connecting wallet');
+        message = walletName
+          ? i18n.t('Connect {wallet}', {
+              wallet: walletName,
+            })
+          : message;
         break;
       case PendingSwapNetworkStatus.WaitingForQueue:
         message =
@@ -751,18 +764,16 @@ export function isConfirmSwapDisabled(
     return true;
   }
 
-  const allWallets = getQuoteWallets({ filter: 'all', quote });
+  const allChains = getQuoteChains({ filter: 'all', quote });
 
-  const requiredWallets = getQuoteWallets({ filter: 'required', quote });
+  const requiredChains = getQuoteChains({ filter: 'required', quote });
 
-  const everyWalletSelected = allWallets.every((blockchain) =>
-    selectedWallets.some(
-      (selectedWallet) => selectedWallet.chain === blockchain
-    )
+  const everyWalletSelected = allChains.every((chain) =>
+    selectedWallets.some((selectedWallet) => selectedWallet.chain === chain)
   );
 
-  const everyRequiredWalletSelected = requiredWallets.every((wallet) =>
-    selectedWallets.some((selectedWallet) => selectedWallet.chain === wallet)
+  const everyRequiredWalletSelected = requiredChains.every((chain) =>
+    selectedWallets.some((selectedWallet) => selectedWallet.chain === chain)
   );
 
   const customDestinationIsValid =

package/src/utils/wallets.ts

@@ -45,18 +45,14 @@ export type ExtendedModalWalletInfo = WalletInfoWithExtra &
   Pick<ExtendedWalletInfo, 'properties' | 'isHub'>;
 
 export function mapStatusToWalletState(state: WalletState): WalletStatus {
-  // TODO: refactor
-  // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
-  switch (true) {
-    case state.connected:
-      return WalletStatus.CONNECTED;
-    case state.connecting:
-      return WalletStatus.CONNECTING;
-    case !state.installed:
-      return WalletStatus.NOT_INSTALLED;
-    default:
-      return WalletStatus.DISCONNECTED;
+  if (state.connected) {
+    return WalletStatus.CONNECTED;
+  } else if (state.connecting) {
+    return WalletStatus.CONNECTING;
+  } else if (!state.installed) {
+    return WalletStatus.NOT_INSTALLED;
   }
+  return WalletStatus.DISCONNECTED;
 }
 
 export function mapWalletTypesToWalletInfo(
@@ -225,7 +221,7 @@ export function prepareAccountsForWalletStore(
   return result;
 }
 
-export function getQuoteWallets(params: {
+export function getQuoteChains(params: {
   filter: 'all' | 'required';
   quote: SelectedQuote | null;
 }): string[] {