@rango-dev/widget-embedded 0.29.1-next.20 → 0.29.1-next.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.20",
+  "version": "0.29.1-next.21",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,14 +25,14 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.4.0",
-    "@rango-dev/provider-all": "^0.34.1-next.7",
+    "@rango-dev/provider-all": "^0.34.1-next.8",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.34.1-next.7",
+    "@rango-dev/queue-manager-rango-preset": "^0.34.1-next.8",
     "@rango-dev/queue-manager-react": "^0.26.0",
     "@rango-dev/signer-solana": "^0.29.1-next.1",
-    "@rango-dev/ui": "^0.35.1-next.10",
-    "@rango-dev/wallets-react": "^0.20.1-next.5",
-    "@rango-dev/wallets-shared": "^0.34.1-next.5",
+    "@rango-dev/ui": "^0.35.1-next.11",
+    "@rango-dev/wallets-react": "^0.20.1-next.6",
+    "@rango-dev/wallets-shared": "^0.34.1-next.6",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,5 +1,5 @@
 import type { PropTypes } from './WalletList.type';
-import type { Wallet, WalletInfoWithNamespaces } from '../../types';
+import type { Wallet, WalletInfoWithExtra } from '../../types';
 import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
@@ -31,6 +31,7 @@ import {
   isExperimentalChain,
 } from '../../utils/wallets';
 import { WatermarkedModal } from '../common/WatermarkedModal';
+import { WalletDerivationPathModal } from '../WalletDerivationPathModal';
 import { WalletModal } from '../WalletModal';
 import { WalletNamespacesModal } from '../WalletNamespacesModal';
 
@@ -42,12 +43,20 @@ import {
 } from './WalletList.styles';
 
 interface WalletNamespacesModalState {
+  open: boolean;
   providerType: string;
   providerImage: string;
   availableNamespaces?: Namespace[];
   singleNamespace?: boolean;
 }
 
+interface DerivationPathModalState {
+  open: boolean;
+  providerType: string;
+  providerImage: string;
+  namespace: Namespace;
+}
+
 const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
 export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore, onConnect } =
@@ -66,6 +75,8 @@ export function WalletList(props: PropTypes) {
     useState<'in-progress' | 'completed' | 'rejected' | null>(null);
   const [namespacesModalState, setNamespacesModalState] =
     useState<WalletNamespacesModalState | null>(null);
+  const [derivationPathModalState, setDerivationPathModalState] =
+    useState<DerivationPathModalState | null>(null);
   const { suggestAndConnect } = useWallets();
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const {
@@ -91,8 +102,7 @@ export function WalletList(props: PropTypes) {
       }, TIME_TO_CLOSE_MODAL);
     },
   });
-  const [sortedList, setSortedList] =
-    useState<WalletInfoWithNamespaces[]>(list);
+  const [sortedList, setSortedList] = useState<WalletInfoWithExtra[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
 
@@ -107,8 +117,27 @@ export function WalletList(props: PropTypes) {
     }
   };
 
-  const handleOpenNamespacesModal = (wallet: WalletInfoWithNamespaces) => {
+  const handleCloseNamespaceModal = () => {
+    if (namespacesModalState) {
+      setNamespacesModalState({
+        ...namespacesModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleCloseDerivationPathModal = () => {
+    if (derivationPathModalState) {
+      setDerivationPathModalState({
+        ...derivationPathModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleOpenNamespacesModal = (wallet: WalletInfoWithExtra) => {
     setNamespacesModalState({
+      open: true,
       providerType: wallet.type,
       providerImage: wallet.image,
       availableNamespaces: wallet.namespaces,
@@ -116,6 +145,42 @@ export function WalletList(props: PropTypes) {
     });
   };
 
+  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
+    const wallet = sortedList.find(
+      (wallet) => wallet.type === namespacesModalState?.providerType
+    );
+    if (
+      wallet?.singleNamespace && // Currently we support derivation path only for single namespace wallets
+      wallet?.needsDerivationPath &&
+      selectedNamespaces[0]
+    ) {
+      setDerivationPathModalState({
+        open: true,
+        providerType: wallet.type,
+        providerImage: wallet.image,
+        namespace: selectedNamespaces[0],
+      });
+    } else {
+      void handleClick(
+        namespacesModalState?.providerType as string,
+        selectedNamespaces.map((namespace) => ({
+          namespace,
+        }))
+      );
+    }
+    handleCloseNamespaceModal();
+  };
+
+  const handleDerivationPathConfirm = (derivationPath: string) => {
+    if (derivationPath && derivationPathModalState?.namespace) {
+      void handleClick(derivationPathModalState.providerType, [
+        { namespace: derivationPathModalState.namespace, derivationPath },
+      ]);
+    }
+
+    handleCloseDerivationPathModal();
+  };
+
   useEffect(() => {
     setSortedList((sortedList) => {
       const selectedWalletIndex = list.findIndex((wallet) =>
@@ -238,19 +303,21 @@ export function WalletList(props: PropTypes) {
               error={error}
             />
             <WalletNamespacesModal
-              open={!!namespacesModalState}
-              onClose={() => setNamespacesModalState(null)}
-              onConfirm={(namespaces) => {
-                void handleClick(
-                  namespacesModalState?.providerType as string,
-                  namespaces
-                );
-                setNamespacesModalState(null);
-              }}
+              open={!!namespacesModalState?.open}
+              onClose={handleCloseNamespaceModal}
+              onConfirm={handleConfirmNamespaces}
               image={namespacesModalState?.providerImage}
-              namespaces={namespacesModalState?.availableNamespaces}
+              availableNamespaces={namespacesModalState?.availableNamespaces}
               singleNamespace={namespacesModalState?.singleNamespace}
             />
+            <WalletDerivationPathModal
+              open={!!derivationPathModalState?.open}
+              selectedNamespace={derivationPathModalState?.namespace}
+              type={derivationPathModalState?.providerType}
+              image={derivationPathModalState?.providerImage}
+              onClose={handleCloseDerivationPathModal}
+              onConfirm={handleDerivationPathConfirm}
+            />
             {!!experimentalChainWallet && (
               <WatermarkedModal
                 open={!!experimentalChainWallet && showExperimentalChainModal}

package/src/components/SearchInput/SearchInput.types.ts

@@ -1,3 +1,4 @@
+import type * as Stitches from '@stitches/react';
 import type React from 'react';
 
 export type PropTypes = {
@@ -7,4 +8,5 @@ export type PropTypes = {
   size?: 'small' | 'large';
   value: string;
   setValue?: (value: string) => void;
+  style?: Stitches.CSS;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'>;

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

@@ -8,17 +8,26 @@ import React, { useState } from 'react';
 
 import { getContainer } from '../../utils/common';
 import { mapStatusToWalletState } from '../../utils/wallets';
+import { WalletDerivationPathModal } from '../WalletDerivationPathModal';
 import { WalletNamespacesModal } from '../WalletNamespacesModal';
 
 import { WalletContainer } from './SwapDetailsModal.styles';
 
 interface NamespacesModalState {
+  open: boolean;
   providerType: string;
   providerImage: string;
   availableNamespaces?: Namespace[];
   singleNamespace?: boolean;
 }
 
+interface DerivationPathModalState {
+  open: boolean;
+  providerType: string;
+  providerImage: string;
+  namespace: Namespace;
+}
+
 export const WalletStateContent = (props: WalletStateContentProps) => {
   const {
     type,
@@ -31,6 +40,8 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
   const { connect, getWalletInfo, state } = useWallets();
   const [namespacesModalState, setNamespacesModalState] =
     useState<NamespacesModalState | null>(null);
+  const [derivationPathModalState, setDerivationPathModalState] =
+    useState<DerivationPathModalState | null>(null);
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
     ? mapStatusToWalletState(state(walletType))
@@ -39,6 +50,59 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
   const shouldShowWallet =
     showWalletButton && !!walletType && !!walletState && !!walletInfo;
 
+  const handleCloseNamespaceModal = () => {
+    if (namespacesModalState) {
+      setNamespacesModalState({
+        ...namespacesModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleCloseDerivationPathModal = () => {
+    if (derivationPathModalState) {
+      setDerivationPathModalState({
+        ...derivationPathModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
+    if (
+      !!walletInfo?.needsDerivationPath &&
+      walletInfo?.singleNamespace &&
+      selectedNamespaces[0] &&
+      walletType
+    ) {
+      setDerivationPathModalState({
+        open: true,
+        providerType: walletType,
+        providerImage: walletInfo.img,
+        namespace: selectedNamespaces[0],
+      });
+    } else {
+      connect(
+        namespacesModalState?.providerType as string,
+        undefined,
+        selectedNamespaces.map((namespace) => ({
+          namespace,
+        }))
+      ).catch((error) => debug(error));
+    }
+    handleCloseNamespaceModal();
+  };
+
+  const handleDerivationPathConfirm = (derivationPath: string) => {
+    if (derivationPath && derivationPathModalState?.namespace) {
+      connect(derivationPathModalState?.providerType, undefined, [
+        { namespace: derivationPathModalState.namespace, derivationPath },
+      ]).catch((error) => debug(error));
+    }
+
+    handleCloseDerivationPathModal();
+  };
+
   return (
     <>
       <MessageBox type={type} title={title} description={message} />
@@ -56,6 +120,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
             onClick={async () => {
               if (walletInfo.namespaces) {
                 setNamespacesModalState({
+                  open: true,
                   providerType: walletType,
                   providerImage: walletInfo.img,
                   availableNamespaces: walletInfo.namespaces,
@@ -69,20 +134,21 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
         </WalletContainer>
       )}
       <WalletNamespacesModal
-        open={!!namespacesModalState}
-        onClose={() => setNamespacesModalState(null)}
-        onConfirm={(namespaces) => {
-          connect(
-            namespacesModalState?.providerType as string,
-            undefined,
-            namespaces
-          ).catch((error) => debug(error));
-          setNamespacesModalState(null);
-        }}
+        open={!!namespacesModalState?.open}
+        onClose={handleCloseNamespaceModal}
+        onConfirm={handleConfirmNamespaces}
         image={namespacesModalState?.providerImage}
-        namespaces={namespacesModalState?.availableNamespaces}
+        availableNamespaces={namespacesModalState?.availableNamespaces}
         singleNamespace={namespacesModalState?.singleNamespace}
       />
+      <WalletDerivationPathModal
+        open={!!derivationPathModalState?.open}
+        selectedNamespace={derivationPathModalState?.namespace}
+        type={derivationPathModalState?.providerType}
+        image={derivationPathModalState?.providerImage}
+        onClose={handleCloseDerivationPathModal}
+        onConfirm={handleDerivationPathConfirm}
+      />
     </>
   );
 };

package/src/components/WalletDerivationPathModal/WalletDerivationPathModal.styles.ts

@@ -0,0 +1,17 @@
+import { styled, Typography } from '@rango-dev/ui';
+
+export const InputsContainer = styled('div', {
+  paddingTop: '$30',
+  paddingBottom: '$30',
+  zIndex: 10, // This property is added to solve inconsistency between Select child of this component and subsequent button
+});
+
+export const InputLabel = styled(Typography, {
+  paddingLeft: '$10',
+});
+
+export const derivationPathInputStyles = {
+  height: '$40',
+  backgroundColor: '$neutral200',
+  borderRadius: '$sm',
+};

package/src/components/WalletDerivationPathModal/WalletDerivationPathModal.tsx

@@ -0,0 +1,154 @@
+import type { PropTypes } from './WalletDerivationPathModal.types';
+import type { DerivationPath, Namespace } from '@rango-dev/wallets-shared';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  Image,
+  MessageBox,
+  Select,
+  TextField,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { WIDGET_UI_ID } from '../../constants';
+import { namespaces } from '../../constants/namespaces';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+import {
+  LogoContainer,
+  Spinner,
+  WalletImageContainer,
+} from '../WalletModal/WalletModalContent.styles';
+
+import {
+  derivationPathInputStyles,
+  InputLabel,
+  InputsContainer,
+} from './WalletDerivationPathModal.styles';
+
+const customDerivationPath: DerivationPath = {
+  id: 'custom',
+  label: 'Custom',
+  generateDerivationPath: (index: string) => index,
+};
+
+function getDerivationPaths(selectedNamespace?: Namespace) {
+  const selectedNamespaceDerivationPaths = selectedNamespace
+    ? namespaces[selectedNamespace].derivationPaths
+    : null;
+
+  const derivationPaths: DerivationPath[] = !!selectedNamespaceDerivationPaths
+    ? [...selectedNamespaceDerivationPaths, customDerivationPath]
+    : [];
+
+  return derivationPaths;
+}
+
+export function WalletDerivationPathModal(props: PropTypes) {
+  const { onClose, onConfirm, selectedNamespace, image, type, open } = props;
+
+  const [selectedDerivationPathId, setSelectedDerivationPathId] = useState<
+    string | null
+  >(null);
+  const [derivationPathIndex, setDerivationPathIndex] = useState('0');
+
+  const isCustomOptionSelected =
+    selectedDerivationPathId === customDerivationPath.id;
+
+  const derivationPaths = getDerivationPaths(selectedNamespace);
+
+  const handleDerivationPathItemClick = ({ value }: { value: string }) => {
+    const selectedDerivationPath = derivationPaths?.find(
+      (derivationPath) => derivationPath.id === value
+    );
+
+    if (selectedDerivationPath) {
+      setSelectedDerivationPathId(selectedDerivationPath.id);
+    }
+  };
+
+  const handleConfirm = () => {
+    const selectedDerivationPath = derivationPaths.find(
+      (derivationPath) => derivationPath.id === selectedDerivationPathId
+    );
+    if (selectedDerivationPath) {
+      onConfirm(
+        selectedDerivationPath.generateDerivationPath(derivationPathIndex)
+      );
+    } else {
+      // Unreachable code
+      throw new Error('selectedDerivationPath can not be undefined');
+    }
+  };
+
+  useEffect(() => {
+    setSelectedDerivationPathId(
+      getDerivationPaths(selectedNamespace)[0]?.id || null
+    );
+  }, [selectedNamespace]);
+
+  return (
+    <WatermarkedModal
+      open={open}
+      onClose={onClose}
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
+      <Divider size={20} />
+      <MessageBox
+        type="info"
+        title={i18n.t('Select Derivation Path')}
+        description={i18n.t(
+          `In order to connect to ${type}, you must first select a Derivation Path`
+        )}
+        icon={
+          <LogoContainer>
+            <WalletImageContainer>
+              <Image src={image} size={45} />
+            </WalletImageContainer>
+            <Spinner />
+          </LogoContainer>
+        }
+      />
+
+      <InputsContainer>
+        <InputLabel variant="body" size="xsmall" color="$neutral600">
+          {i18n.t('Choose Derivation Path Template')}
+        </InputLabel>
+        <Select
+          value={selectedDerivationPathId || ''}
+          options={derivationPaths.map((derivationPath) => ({
+            value: derivationPath.id,
+            label: derivationPath.label,
+          }))}
+          variant="filled"
+          handleItemClick={handleDerivationPathItemClick}
+          styles={{ trigger: derivationPathInputStyles }}
+        />
+        <Divider size={20} />
+        <InputLabel variant="body" size="xsmall" color="$neutral600">
+          {isCustomOptionSelected
+            ? i18n.t('Enter Path')
+            : i18n.t('Enter Index')}
+        </InputLabel>
+        <TextField
+          type={isCustomOptionSelected ? 'text' : 'number'}
+          variant="contained"
+          value={derivationPathIndex}
+          onChange={(event) => setDerivationPathIndex(event.target.value)}
+          style={derivationPathInputStyles}
+        />
+      </InputsContainer>
+
+      <Button
+        type="primary"
+        onClick={handleConfirm}
+        disabled={
+          !derivationPaths || !selectedDerivationPathId || !derivationPathIndex
+        }>
+        {i18n.t('Confirm')}
+      </Button>
+    </WatermarkedModal>
+  );
+}

package/src/components/WalletDerivationPathModal/WalletDerivationPathModal.types.tsx

@@ -0,0 +1,10 @@
+import type { Namespace } from '@rango-dev/wallets-shared';
+
+export interface PropTypes {
+  open: boolean;
+  selectedNamespace?: Namespace;
+  type?: string;
+  image?: string;
+  onClose: () => void;
+  onConfirm: (path: string) => void;
+}

package/src/components/WalletDerivationPathModal/index.ts

@@ -0,0 +1 @@
+export { WalletDerivationPathModal } from './WalletDerivationPathModal';

package/src/components/WalletNamespacesModal/WalletNamespacesModal.tsx

@@ -6,16 +6,17 @@ import { i18n } from '@lingui/core';
 import {
   Button,
   Checkbox,
+  Divider,
   Image,
   ListItemButton,
   MessageBox,
   Radio,
   RadioRoot,
 } from '@rango-dev/ui';
-import { namespaceMainBlockchain } from '@rango-dev/wallets-shared';
 import React, { useMemo, useState } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
+import { namespaces } from '../../constants/namespaces';
 import { useAppStore } from '../../store/AppStore';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
@@ -35,7 +36,7 @@ const getBlockchainLogo = (
 };
 
 export function WalletNamespacesModal(props: PropTypes) {
-  const { singleNamespace, namespaces } = props;
+  const { singleNamespace, availableNamespaces } = props;
 
   const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
 
@@ -43,14 +44,15 @@ export function WalletNamespacesModal(props: PropTypes) {
 
   const namespacesInfo = useMemo(
     () =>
-      namespaces?.map((namespace) => ({
+      availableNamespaces?.map((namespace) => ({
         name: namespace,
         logo: getBlockchainLogo(
           blockchains,
-          namespaceMainBlockchain[namespace]
+          namespaces[namespace].mainBlockchain
         ),
+        title: namespaces[namespace].title,
       })),
-    [namespaces]
+    [availableNamespaces]
   );
 
   const onSelect = (namespace: Namespace) => {
@@ -80,6 +82,7 @@ export function WalletNamespacesModal(props: PropTypes) {
       container={
         document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
       }>
+      <Divider size={20} />
       <MessageBox
         type="info"
         title={i18n.t('Select chain types')}
@@ -102,7 +105,7 @@ export function WalletNamespacesModal(props: PropTypes) {
               <ListItemButton
                 key={namespaceInfoItem.name}
                 id={namespaceInfoItem.name}
-                title={namespaceInfoItem.name}
+                title={namespaceInfoItem.title}
                 hasDivider
                 style={{ height: 60 }}
                 onClick={() => onSelect(namespaceInfoItem.name)}

package/src/components/WalletNamespacesModal/WalletNamespacesModal.types.tsx

@@ -5,6 +5,6 @@ export interface PropTypes {
   image?: string;
   onClose: () => void;
   onConfirm: (namespaces: Namespace[]) => void;
-  namespaces?: Namespace[];
+  availableNamespaces?: Namespace[];
   singleNamespace?: boolean;
 }

package/src/constants/namespaces.ts

@@ -0,0 +1,62 @@
+import type { DerivationPath } from '@rango-dev/wallets-shared';
+
+import { Namespace } from '@rango-dev/wallets-shared';
+
+export const namespaces: Record<
+  Namespace,
+  { mainBlockchain: string; title: string; derivationPaths?: DerivationPath[] }
+> = {
+  [Namespace.Evm]: {
+    mainBlockchain: 'ETH',
+    title: 'Ethereum',
+    derivationPaths: [
+      {
+        id: 'metamask',
+        label: `Metamask (m/44'/60'/0'/0/index)`,
+        generateDerivationPath: (index: string) => `44'/60'/0'/0/${index}`,
+      },
+      {
+        id: 'ledgerLive',
+        label: `LedgerLive (m/44'/60'/index'/0/0)`,
+        generateDerivationPath: (index: string) => `44'/60'/${index}'/0/0`,
+      },
+      {
+        id: 'legacy',
+        label: `Legacy (m/44'/60'/0'/index)`,
+        generateDerivationPath: (index: string) => `44'/60'/0'/${index}`,
+      },
+    ],
+  },
+  [Namespace.Solana]: {
+    mainBlockchain: 'SOLANA',
+    title: 'Solana',
+    derivationPaths: [
+      {
+        id: `(m/44'/501'/index')`,
+        label: `(m/44'/501'/index')`,
+        generateDerivationPath: (index: string) => `44'/501'/${index}'`,
+      },
+      {
+        id: `(m/44'/501'/0'/index)`,
+        label: `(m/44'/501'/0'/index)`,
+        generateDerivationPath: (index: string) => `44'/501'/0'/${index}`,
+      },
+    ],
+  },
+  [Namespace.Cosmos]: {
+    mainBlockchain: 'COSMOS',
+    title: 'Cosmos',
+  },
+  [Namespace.Utxo]: {
+    mainBlockchain: 'BTC',
+    title: 'Utxo',
+  },
+  [Namespace.Starknet]: {
+    title: 'Starknet',
+    mainBlockchain: 'STARKNET',
+  },
+  [Namespace.Tron]: {
+    title: 'Tron',
+    mainBlockchain: 'TRON',
+  },
+};

package/src/hooks/useWalletList.ts

@@ -1,5 +1,5 @@
 import type { WalletInfo } from '@rango-dev/ui';
-import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
+import type { NamespaceData, WalletType } from '@rango-dev/wallets-shared';
 import type { BlockchainMeta } from 'rango-sdk';
 
 import { WalletState } from '@rango-dev/ui';
@@ -76,7 +76,10 @@ export function useWalletList(params: Params) {
         connectedWallet.chain === chain
     );
 
-  const handleClick = async (type: WalletType, namespaces?: Namespace[]) => {
+  const handleClick = async (
+    type: WalletType,
+    namespaces?: NamespaceData[]
+  ) => {
     const wallet = state(type);
     try {
       if (error) {