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

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

@@ -50,7 +50,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 +601,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) -
@@ -751,18 +751,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[] {