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

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

@@ -101,6 +101,7 @@ export function useStatefulConnect(): UseStatefulConnect {
             type: 'needsNamespace',
             payload: {
               targetWallet: wallet,
+              defaultSelectedChains: options?.defaultSelectedChains,
             },
           });
           return { status: ResultStatus.Namespace };
@@ -127,6 +128,7 @@ export function useStatefulConnect(): UseStatefulConnect {
           type: 'needsNamespace',
           payload: {
             targetWallet: wallet,
+            defaultSelectedChains: options?.defaultSelectedChains,
           },
         });
         return { status: ResultStatus.Namespace };

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[] {