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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.41.2-next.1",
+  "version": "0.41.2-next.11",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,23 +25,23 @@
     "@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.6",
     "@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.5",
     "@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/signer-solana": "^0.38.1-next.1",
+    "@rango-dev/ui": "^0.45.1-next.8",
+    "@rango-dev/wallets-core": "^0.42.1-next.5",
+    "@rango-dev/wallets-react": "^0.29.1-next.6",
+    "@rango-dev/wallets-shared": "^0.43.1-next.5",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
     "ethers": "^6.13.2",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
-    "rango-sdk": "^0.1.64",
-    "rango-types": "^0.1.81",
+    "rango-sdk": "^0.1.66",
+    "rango-types": "^0.1.83",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "values.js": "2.1.1",
@@ -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/HistoryGroupedList/HistoryGroupedList.tsx

@@ -1,6 +1,7 @@
 import type { PropTypes } from './HistoryGroupedList.types';
 
 import { i18n } from '@lingui/core';
+import { getCurrentStep } from '@rango-dev/queue-manager-rango-preset';
 import {
   Divider,
   GroupedVirtualizedList,
@@ -102,6 +103,7 @@ export function HistoryGroupedList(props: PropTypes) {
       }}
       itemContent={(index, groupIndex) => {
         const swap = swaps[index];
+        const currentStep = getCurrentStep(swap);
         if (!swap) {
           return null;
         }
@@ -114,6 +116,7 @@ export function HistoryGroupedList(props: PropTypes) {
               creationTime={swap.creationTime}
               status={swap.status}
               onClick={onSwapClick}
+              currentStep={currentStep}
               tooltipContainer={getContainer()}
               onlyShowTime={groups[groupIndex] === i18n.t('Today')}
               swapTokenData={{

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

@@ -171,7 +171,7 @@ export function SwapDetails(props: SwapDetailsProps) {
       ])
     : undefined;
 
-  const stepMessage = getSwapMessages(swap, currentStep);
+  const stepMessage = getSwapMessages(swap, currentStep, getWalletInfo);
   const steps = getSteps({
     swap,
     switchNetwork,
@@ -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,62 @@
-import { styled } from '@rango-dev/ui';
+import { Image, styled } from '@rango-dev/ui';
 
 export const NamespaceList = styled('ul', {
   padding: 0,
-  paddingTop: '$4',
-  paddingBottom: '$4',
+  paddingTop: '$10',
+  paddingBottom: '$20',
+  margin: 0,
+});
+
+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',
+      },
+    },
+  },
 });