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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.41.2-next.1",
+  "version": "0.41.2-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.8.0",
-    "@rango-dev/provider-all": "^0.44.1-next.1",
+    "@rango-dev/provider-all": "^0.44.1-next.2",
     "@rango-dev/queue-manager-core": "^0.29.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.44.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.44.1-next.1",
     "@rango-dev/queue-manager-react": "^0.29.0",
     "@rango-dev/signer-solana": "^0.38.0",
-    "@rango-dev/ui": "^0.45.1-next.0",
-    "@rango-dev/wallets-core": "^0.42.1-next.0",
-    "@rango-dev/wallets-react": "^0.29.1-next.1",
-    "@rango-dev/wallets-shared": "^0.43.1-next.0",
+    "@rango-dev/ui": "^0.45.1-next.1",
+    "@rango-dev/wallets-core": "^0.42.1-next.1",
+    "@rango-dev/wallets-react": "^0.29.1-next.2",
+    "@rango-dev/wallets-shared": "^0.43.1-next.1",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -21,7 +21,7 @@ import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { getBlockchainShortNameFor } from '../../utils/meta';
 import { isConfirmSwapDisabled } from '../../utils/swap';
-import { getQuoteWallets } from '../../utils/wallets';
+import { getQuoteChains } from '../../utils/wallets';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import { CustomDestination } from '../CustomDestination/CustomDestination';
 
@@ -62,16 +62,16 @@ export function ConfirmWalletsModal(props: PropTypes) {
     !!customDestination
   );
 
-  const quoteWallets = useMemo(
+  const quoteChains = useMemo(
     () =>
-      getQuoteWallets({
+      getQuoteChains({
         filter: 'all',
         quote: selectedQuote,
       }),
     [selectedQuote]
   );
 
-  const requiredWallets = getQuoteWallets({
+  const requiredChains = getQuoteChains({
     filter: 'required',
     quote: selectedQuote,
   });
@@ -82,17 +82,17 @@ export function ConfirmWalletsModal(props: PropTypes) {
       selectedQuote?.swaps[selectedQuote?.swaps.length - 1].to.blockchain
   );
   const isWalletRequiredFor = (blockchain: string) =>
-    requiredWallets.includes(blockchain);
+    requiredChains.includes(blockchain);
 
   const getInitialSelectableWallets = useCallback(
     () =>
       connectedWallets.filter((connectedWallet) => {
         return (
           connectedWallet.selected &&
-          quoteWallets.includes(connectedWallet.chain)
+          quoteChains.includes(connectedWallet.chain)
         );
       }),
-    [connectedWallets, quoteWallets]
+    [connectedWallets, quoteChains]
   );
 
   const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
@@ -273,13 +273,13 @@ export function ConfirmWalletsModal(props: PropTypes) {
           return (
             !anyWalletSelected &&
             connectedWallet.selected &&
-            quoteWallets.includes(connectedWallet.chain)
+            quoteChains.includes(connectedWallet.chain)
           );
         })
       );
       return nextState;
     });
-  }, [connectedWallets, quoteWallets]);
+  }, [connectedWallets, quoteChains]);
 
   useEffect(() => {
     const nextState: typeof nextSelectedWallets = [];
@@ -391,6 +391,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
           <div className={walletsListStyles()}>
             <WalletList
               chain={showMoreWalletFor}
+              quoteChains={quoteChains}
               isSelected={isSelected}
               selectWallet={onChange}
               onShowMore={() => setShowMoreWalletFor(showMoreWalletFor)}
@@ -410,13 +411,13 @@ export function ConfirmWalletsModal(props: PropTypes) {
             </>
           )}
           <Wallets>
-            {quoteWallets.map((requiredWallet, index) => {
+            {quoteChains.map((requiredWallet, index) => {
               const blockchain = blockchains.find(
                 (blockchain) => blockchain.name === requiredWallet
               );
 
               const key = `wallet-${index}`;
-              const isLastWallet = index === quoteWallets.length - 1;
+              const isLastWallet = index === quoteChains.length - 1;
               const showCustomDestination =
                 isLastWallet &&
                 lastStepToBlockchain &&
@@ -444,6 +445,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                   <ListContainer>
                     <WalletList
                       chain={requiredWallet}
+                      quoteChains={quoteChains}
                       isSelected={isSelected}
                       selectWallet={onChange}
                       limit={NUMBER_OF_WALLETS_TO_DISPLAY}

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -35,7 +35,8 @@ const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
 const TIME_TO_CLOSE_MODAL = 3_000;
 
 export function WalletList(props: PropTypes) {
-  const { chain, isSelected, selectWallet, limit, onShowMore } = props;
+  const { chain, quoteChains, isSelected, selectWallet, limit, onShowMore } =
+    props;
   const isActiveTab = useUiStore.use.isActiveTab();
 
   const { blockchains, connectedWallets } = useAppStore();
@@ -221,6 +222,7 @@ export function WalletList(props: PropTypes) {
       })}
       <StatefulConnectModal
         wallet={selectedWalletToConnect}
+        options={{ defaultSelectedChains: quoteChains || [chain] }}
         onClose={() => {
           setSelectedWalletToConnect(undefined);
         }}

package/src/components/ConfirmWalletsModal/WalletList.type.ts

@@ -2,6 +2,7 @@ import type { Wallet } from '../../types';
 
 export type PropTypes = {
   chain: string;
+  quoteChains?: string[];
   isSelected: (walletType: string, chain: string) => boolean;
   selectWallet: (wallet: Wallet) => void;
   limit?: number;

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -28,6 +28,9 @@ interface PropTypes {
   onClose: () => void;
   // When connecting wallet is executed **successfully**, this will be called afterwards.
   onConnect?: () => void;
+  options?: {
+    defaultSelectedChains?: string[];
+  };
 }
 
 export function StatefulConnectModal(props: PropTypes) {
@@ -122,6 +125,7 @@ export function StatefulConnectModal(props: PropTypes) {
       beforeConnecting();
       handleConnect(props.wallet, {
         disconnectIfConnected: true,
+        defaultSelectedChains: props.options?.defaultSelectedChains,
       })
         .then((result) => {
           const resultIsNeedMoreStepsToConnect = [

package/src/components/SwapDetails/SwapDetails.tsx

@@ -465,7 +465,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         onCancel={onCancel}
         onDelete={onDelete}
         message={stepMessage.detailedMessage.content}
-        currentStepWallet={currentStepWallet}
+        swap={swap}
         walletButtonDisabled={!isActiveTab}
       />
       <SwapDetailsCompleteModal

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -2,6 +2,10 @@ import type { WalletStateContentProps } from './SwapDetailsModal.types';
 import type { WalletInfoWithExtra } from '../../types';
 
 import { warn } from '@rango-dev/logging-core';
+import {
+  getCurrentStep,
+  getRelatedWalletOrNull,
+} from '@rango-dev/queue-manager-rango-preset';
 import { MessageBox, Wallet } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React, { useState } from 'react';
@@ -14,17 +18,17 @@ import { StatefulConnectModal } from '../StatefulConnectModal';
 import { WalletContainer } from './SwapDetailsModal.styles';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
-  const {
-    type,
-    title,
-    currentStepWallet,
-    message,
-    showWalletButton,
-    walletButtonDisabled,
-  } = props;
+  const { type, title, swap, message, showWalletButton, walletButtonDisabled } =
+    props;
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
     useState<WalletInfoWithExtra>();
   const { getWalletInfo, state } = useWallets();
+
+  const currentStep = getCurrentStep(swap);
+  const currentStepWallet = currentStep
+    ? getRelatedWalletOrNull(swap, currentStep)
+    : null;
+  const currentStepFromBlockchain = currentStep?.fromBlockchain;
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
     ? mapStatusToWalletState(state(walletType))
@@ -73,6 +77,11 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
         onClose={() => {
           setSelectedWalletToConnect(undefined);
         }}
+        options={{
+          defaultSelectedChains: currentStepFromBlockchain
+            ? [currentStepFromBlockchain]
+            : undefined,
+        }}
       />
     </>
   );

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -17,7 +17,7 @@ export function SwapDetailsModal(props: ModalPropTypes) {
     onClose,
     onDelete,
     onCancel,
-    currentStepWallet,
+    swap,
     message,
     walletButtonDisabled,
   } = props;
@@ -38,7 +38,7 @@ export function SwapDetailsModal(props: ModalPropTypes) {
         <WalletStateContent
           type={modalNetworkValues[state].type}
           title={modalNetworkValues[state].title}
-          currentStepWallet={currentStepWallet}
+          swap={swap}
           message={message}
           walletButtonDisabled={walletButtonDisabled}
           showWalletButton={

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

@@ -1,21 +1,16 @@
-import type { WalletType } from '@rango-dev/wallets-shared';
-import type { PendingSwapNetworkStatus } from 'rango-types';
+import type { PendingSwap, PendingSwapNetworkStatus } from 'rango-types';
 
 export type ModalState =
   | Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>
   | 'delete'
   | 'cancel'
   | null;
-type WalletTypeAndAddress = {
-  walletType: WalletType;
-  address: string;
-};
 export interface ModalPropTypes {
   onClose: () => void;
   onCancel: () => void;
   onDelete: () => void;
   state: ModalState;
-  currentStepWallet: WalletTypeAndAddress | null;
+  swap: PendingSwap;
   message: string;
   walletButtonDisabled: boolean;
 }
@@ -47,7 +42,7 @@ export interface ModalNetworkValueTypes {
 }
 
 export interface WalletStateContentProps extends ModalNetworkValueTypes {
-  currentStepWallet: WalletTypeAndAddress | null;
+  swap: PendingSwap;
   message: string;
   showWalletButton: boolean;
   walletButtonDisabled: boolean;

package/src/components/WalletStatefulConnect/DerivationPath.tsx

@@ -12,11 +12,6 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 
-import {
-  LogoContainer,
-  Spinner,
-  WalletImageContainer,
-} from './ConnectStatus.styles';
 import {
   CUSTOM_DERIVATION_PATH,
   getDerivationPaths,
@@ -103,14 +98,7 @@ export function DerivationPath(props: PropTypes) {
             type,
           },
         })}
-        icon={
-          <LogoContainer>
-            <WalletImageContainer>
-              <Image src={image} size={45} />
-            </WalletImageContainer>
-            <Spinner />
-          </LogoContainer>
-        }
+        icon={<Image src={image} size={45} />}
       />
 
       <InputsContainer>

package/src/components/WalletStatefulConnect/NamespaceListItem.tsx

@@ -0,0 +1,64 @@
+import type { NamespaceItemPropTypes } from './Namespaces.types';
+
+import { i18n } from '@lingui/core';
+import { Checkbox, Radio, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+
+import { getBlockchainLogo } from './Namespaces.helpers';
+import {
+  NamespaceItemContainer,
+  NamespaceItemContent,
+  NamespaceLogo,
+  NotSupportedNamespaceItemContent,
+} from './Namespaces.styles';
+import { SupportedChainsList } from './SupportedChainsList';
+
+export function NamespaceListItem(props: NamespaceItemPropTypes) {
+  const { onClick, type, namespace } = props;
+  const blockchains = useAppStore().blockchains();
+
+  if (namespace.unsupported) {
+    return (
+      <NamespaceItemContainer unsupported>
+        <NamespaceLogo
+          src={getBlockchainLogo(blockchains, namespace.id)}
+          size={40}
+          disabled
+        />
+        <NotSupportedNamespaceItemContent>
+          <Typography variant="label" size="large">
+            {namespace.label}
+          </Typography>
+          <Typography variant="body" size="xsmall">
+            {i18n.t('(Currently not supported)')}
+          </Typography>
+        </NotSupportedNamespaceItemContent>
+      </NamespaceItemContainer>
+    );
+  }
+
+  const showSupportedChains = namespace.chains.length > 1;
+  return (
+    <NamespaceItemContainer onClick={onClick}>
+      <NamespaceLogo
+        src={getBlockchainLogo(blockchains, namespace.id)}
+        size={40}
+      />
+      <NamespaceItemContent showSupportedChains={showSupportedChains}>
+        <Typography variant="label" size="large">
+          {namespace.label}
+        </Typography>
+        {showSupportedChains && (
+          <SupportedChainsList chains={namespace.chains} />
+        )}
+      </NamespaceItemContent>
+      {type === 'radio' ? (
+        <Radio value={namespace.value} />
+      ) : (
+        <Checkbox checked={props.value} />
+      )}
+    </NamespaceItemContainer>
+  );
+}

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

@@ -1,7 +1,59 @@
-import { styled } from '@rango-dev/ui';
+import { Image, styled } from '@rango-dev/ui';
 
 export const NamespaceList = styled('ul', {
   padding: 0,
-  paddingTop: '$4',
-  paddingBottom: '$4',
+});
+
+export const NamespaceItemContainer = styled('li', {
+  backgroundColor: '$neutral200',
+  padding: '$16',
+  display: 'flex',
+  gap: '$8',
+  cursor: 'pointer',
+  borderRadius: '$sm',
+  alignItems: 'center',
+  variants: {
+    unsupported: {
+      true: {
+        cursor: 'not-allowed',
+        paddingTop: '$8',
+        paddingBottom: '$8',
+      },
+    },
+  },
+});
+
+export const NamespaceItemContent = styled('div', {
+  flex: '1',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '$40',
+  variants: {
+    showSupportedChains: {
+      true: {
+        justifyContent: 'space-between',
+      },
+      false: {
+        justifyContent: 'center',
+      },
+    },
+  },
+});
+
+export const NotSupportedNamespaceItemContent = styled('div', {
+  flex: '1',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$4',
+  opacity: '0.5',
+});
+
+export const NamespaceLogo = styled(Image, {
+  variants: {
+    disabled: {
+      true: {
+        opacity: '0.5',
+      },
+    },
+  },
 });

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;