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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.20",
+  "version": "0.29.1-next.22",
   "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.12",
+    "@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/Quote/Quote.tsx

@@ -155,16 +155,15 @@ export function Quote(props: QuoteProps) {
 
       return {
         swapper: {
-          displayName: getSwapperDisplayName(swap.swapperId, swappers),
+          displayName: getSwapperDisplayName(swap.swapperId, swappers) ?? '',
           image: swap.swapperLogo,
         },
         from: {
           token: { displayName: swap.from.symbol, image: swap.from.logo },
           chain: {
-            displayName: getBlockchainShortNameFor(
-              swap.from.blockchain,
-              blockchains
-            ),
+            displayName:
+              getBlockchainShortNameFor(swap.from.blockchain, blockchains) ??
+              '',
             image: swap.from.blockchainLogo,
           },
           price: {
@@ -194,10 +193,8 @@ export function Quote(props: QuoteProps) {
         to: {
           token: { displayName: swap.to.symbol, image: swap.to.logo },
           chain: {
-            displayName: getBlockchainShortNameFor(
-              swap.to.blockchain,
-              blockchains
-            ),
+            displayName:
+              getBlockchainShortNameFor(swap.to.blockchain, blockchains) || '',
             image: swap.to.blockchainLogo,
           },
           price: {

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/SwapDetails/SwapDetails.helpers.tsx

@@ -1,6 +1,6 @@
 import type { GetStep } from '../SwapDetailsAlerts';
 import type { Step, StepDetailsProps } from '@rango-dev/ui';
-import type { PendingSwapStep } from 'rango-types';
+import type { PendingSwapStep, SwapperType } from 'rango-types';
 
 import React from 'react';
 
@@ -46,7 +46,7 @@ export const getSteps = ({
             TOKEN_AMOUNT_MIN_DECIMALS,
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
-          realValue: amountToConvert,
+          realValue: amountToConvert ?? '',
         },
       },
       to: {
@@ -63,13 +63,13 @@ export const getSteps = ({
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
           realValue:
-            step.outputAmount || step.expectedOutputAmountHumanReadable,
+            step.outputAmount || step.expectedOutputAmountHumanReadable || '',
         },
       },
       swapper: {
-        displayName: getSwapperDisplayName(step.swapperId, swappers),
+        displayName: getSwapperDisplayName(step.swapperId, swappers) ?? '',
         image: step.swapperLogo ?? '',
-        type: step.swapperType,
+        type: step.swapperType as SwapperType,
       },
       internalSwaps: step.internalSwaps
         ? step.internalSwaps.map((internalSwap) => {
@@ -95,12 +95,10 @@ export const getSteps = ({
                 },
               },
               swapper: {
-                displayName: getSwapperDisplayName(
-                  internalSwap.swapperId,
-                  swappers
-                ),
+                displayName:
+                  getSwapperDisplayName(internalSwap.swapperId, swappers) ?? '',
                 image: internalSwap.swapperLogo ?? '',
-                type: internalSwap.swapperType,
+                type: internalSwap.swapperType as SwapperType,
               },
             };
           })

package/src/components/SwapDetails/SwapDetails.tsx

@@ -385,7 +385,7 @@ export function SwapDetails(props: SwapDetailsProps) {
                 ),
                 usdValue: outputUsdValue,
                 realUsdValue: realOutputUsdValue,
-                realValue: outputAmount,
+                realValue: outputAmount || '',
               },
               token: {
                 displayName: steps[numberOfSteps - 1].to.token.displayName,

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;
 }