@rango-dev/widget-embedded 0.50.0 → 0.50.1-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.50.0",
+  "version": "0.50.1-next.0",
   "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.11.0",
-    "@rango-dev/provider-all": "^0.52.0",
+    "@rango-dev/provider-all": "^0.52.1-next.0",
     "@rango-dev/queue-manager-core": "^0.32.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.52.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.52.1-next.0",
     "@rango-dev/queue-manager-react": "^0.32.0",
     "@rango-dev/signer-solana": "^0.44.0",
-    "@rango-dev/ui": "^0.53.0",
-    "@rango-dev/wallets-core": "^0.49.0",
-    "@rango-dev/wallets-react": "^0.36.0",
-    "@rango-dev/wallets-shared": "^0.50.0",
+    "@rango-dev/ui": "^0.53.1-next.0",
+    "@rango-dev/wallets-core": "^0.49.1-next.0",
+    "@rango-dev/wallets-react": "^0.36.1-next.0",
+    "@rango-dev/wallets-shared": "^0.50.1-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -75,7 +75,7 @@ export function StatefulConnectModal(props: PropTypes) {
       );
     }
 
-    handleDerivationPath(derivationPath)
+    handleDerivationPath(props.wallet!, derivationPath)
       .then(afterConnected)
       .catch(catchErrorOnHandle);
   };
@@ -114,6 +114,13 @@ export function StatefulConnectModal(props: PropTypes) {
     }
   };
 
+  const handleNavigateToDerivationPath = (selectedNamespace: Namespace) => {
+    if (!props.wallet?.needsDerivationPath) {
+      return;
+    }
+    void handleNamespace(props.wallet, [selectedNamespace]);
+  };
+
   useEffect(() => {
     if (props.wallet) {
       resetModalState();
@@ -200,6 +207,7 @@ export function StatefulConnectModal(props: PropTypes) {
           }
           value={getState().namespace}
           selectedNamespaces={getState().selectedNamespaces}
+          navigateToDerivationPath={handleNavigateToDerivationPath}
         />
       )}
     </WatermarkedModal>

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -1,7 +1,9 @@
 import type { PropTypes } from './Detached.types';
+import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, Image, MessageBox } from '@rango-dev/ui';
+import { Alert, Button, Divider, Image, MessageBox } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
@@ -12,11 +14,127 @@ import { NamespaceDetachedItem } from './NamespaceDetachedItem';
 import { NamespaceList, StyledButton } from './Namespaces.styles';
 
 export function Detached(props: PropTypes) {
-  const { selectedNamespaces, value, onDisconnectWallet } = props;
+  const {
+    value,
+    selectedNamespaces,
+    onConfirm,
+    onDisconnectWallet,
+    navigateToDerivationPath,
+  } = props;
   const { targetWallet } = value;
 
-  const { state } = useWallets();
-  const walletState = state(targetWallet.type);
+  const { connect, disconnect, state } = useWallets();
+  const walletType = targetWallet.type;
+  const walletState = state(walletType);
+  const namespacesProperty = targetWallet.properties?.find(
+    (property) => property.name === 'namespaces'
+  );
+  const derivationPathProperty = targetWallet.properties?.find(
+    (property) => property.name === 'derivationPath'
+  );
+
+  const singleSelection = namespacesProperty?.value.selection === 'single';
+
+  const handleConnectNamespace = async (
+    namespace: Namespace,
+    options?: {
+      derivationPath?: string;
+      shouldAskForDerivationPath?: boolean;
+    }
+  ) => {
+    if (singleSelection) {
+      // For single-selection wallets, disconnect all namespaces before connecting a new namespace
+      await disconnect(walletType);
+    }
+    if (derivationPathProperty && options?.shouldAskForDerivationPath) {
+      navigateToDerivationPath(namespace);
+    } else {
+      await connect(walletType, [
+        {
+          namespace: namespace,
+          network: '',
+          derivationPath: options?.derivationPath ?? undefined,
+        },
+      ]);
+    }
+  };
+
+  const handleDisconnectNamespace = async (namespace: Namespace) => {
+    await disconnect(walletType, [namespace]);
+  };
+
+  const renderNamespaceListHeader = () => {
+    if (!!singleSelection) {
+      return (
+        <>
+          <Divider size={20} />
+          <Alert
+            id="widget-wallet-stateful-connect-alert"
+            variant="alarm"
+            type="info"
+            title={i18n.t(
+              'This wallet can only connect to one chain at a time.'
+            )}
+          />
+          <Divider size={30} />
+        </>
+      );
+    }
+    return (
+      <>
+        <Divider size={30} />
+        <NamespacesHeader>
+          <Button
+            id="widget-detached-disconnect-wallet-btn"
+            variant="ghost"
+            type="error"
+            size="xsmall"
+            disabled={walletState.connecting || !walletState.connected}
+            onClick={onDisconnectWallet}>
+            {i18n.t('Disconnect wallet')}
+          </Button>
+        </NamespacesHeader>
+        <Divider size={16} />
+      </>
+    );
+  };
+
+  const renderNamespaceItem = (namespace: LegacyNamespaceMeta) => {
+    if (namespace.unsupported) {
+      return <NamespaceUnsupportedItem namespace={namespace} />;
+    }
+
+    const selectedNamespace = selectedNamespaces?.find(
+      (selectedNamespaceItem) =>
+        selectedNamespaceItem.namespace === namespace.value
+    );
+
+    const namespaceState = walletState.namespaces?.get(namespace.value);
+
+    if (!namespaceState) {
+      throw new Error(`State for ${namespace.value} was not found!`);
+    }
+
+    const disabled = singleSelection && walletState.connecting; // If wallet is configured as single selection, button should be disabled while a namespace is already in connecting state
+
+    return (
+      <NamespaceDetachedItem
+        namespace={namespace}
+        initialConnect={!!selectedNamespace}
+        disabled={disabled}
+        state={namespaceState}
+        handleConnect={async (options) =>
+          handleConnectNamespace(namespace.value, {
+            derivationPath: selectedNamespace?.derivationPath,
+            shouldAskForDerivationPath: options?.shouldAskForDerivationPath,
+          })
+        }
+        handleDisconnect={async () =>
+          handleDisconnectNamespace(namespace.value)
+        }
+      />
+    );
+  };
 
   return (
     <>
@@ -30,30 +148,11 @@ export function Detached(props: PropTypes) {
         )}
         icon={<Image src={targetWallet.image} size={45} />}
       />
-      <Divider size={30} />
-      <NamespacesHeader>
-        <Button
-          id="widget-detached-disconnect-wallet-btn"
-          variant="ghost"
-          type="error"
-          size="xsmall"
-          disabled={walletState.connecting || !walletState.connected}
-          onClick={onDisconnectWallet}>
-          {i18n.t('Disconnect wallet')}
-        </Button>
-      </NamespacesHeader>
-      <NamespaceList id="widget-detached-namespace-list" as={'ul'}>
+      {renderNamespaceListHeader()}
+      <NamespaceList id="widget-detached-namespace-list">
         {targetWallet.needsNamespace?.data.map((namespace, index, array) => (
           <React.Fragment key={namespace.id}>
-            {namespace.unsupported ? (
-              <NamespaceUnsupportedItem namespace={namespace} />
-            ) : (
-              <NamespaceDetachedItem
-                walletType={targetWallet.type}
-                namespace={namespace}
-                initialConnect={selectedNamespaces?.includes(namespace.value)}
-              />
-            )}
+            {renderNamespaceItem(namespace)}
             {index !== array.length - 1 && <Divider size={10} />}
           </React.Fragment>
         ))}
@@ -62,7 +161,7 @@ export function Detached(props: PropTypes) {
       <StyledButton
         id="widget-name-space-confirm-btn"
         type="primary"
-        onClick={props.onConfirm}>
+        onClick={onConfirm}>
         {i18n.t('Done')}
       </StyledButton>
     </>

package/src/components/WalletStatefulConnect/Detached.types.ts

@@ -5,5 +5,8 @@ export interface PropTypes {
   value: NeedsNamespacesState;
   onConfirm: () => void;
   onDisconnectWallet: () => void;
-  selectedNamespaces: Namespace[] | null;
+  selectedNamespaces:
+    | { namespace: Namespace; derivationPath?: string }[]
+    | null;
+  navigateToDerivationPath: (selectedNamespace: Namespace) => void;
 }

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -1,26 +1,23 @@
 import type { NamespaceDetachedItemPropTypes } from './Namespaces.types';
-import type { NamespaceData } from '@rango-dev/wallets-core/dist/hub/store/namespaces';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 import { i18n } from '@lingui/core';
 import { Button, Spinner } from '@rango-dev/ui';
-import { useWallets } from '@rango-dev/wallets-react';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 
 import { getConciseAddress } from '../../utils/wallets';
 import { NamespaceItem } from '../NamespaceItem';
 
-export const NamespaceDetachedItem = function NamespaceDetachedItem(
-  props: NamespaceDetachedItemPropTypes
-) {
-  const { walletType, namespace, initialConnect } = props;
-  const { connect, disconnect, state } = useWallets();
-  const [error, setError] = useState<Error | null>(null);
-
-  const walletState = state(walletType);
+export function NamespaceDetachedItem(props: NamespaceDetachedItemPropTypes) {
+  const {
+    namespace,
+    initialConnect,
+    disabled,
+    state,
+    handleConnect,
+    handleDisconnect,
+  } = props;
 
-  const namespaceState = walletState.namespaces?.get(namespace.value);
-  const firstAccountArray = namespaceState.accounts?.[0]?.split(':');
+  const [error, setError] = useState<Error | null>(null);
 
   /*
    * Ref to track ongoing connection attempts.
@@ -31,22 +28,16 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
 
   useLayoutEffect(() => {
     if (initialConnect && !processingConnectAttempt.current) {
-      void handleConnectNamespace(walletType, namespace.value);
+      void handleConnectNamespace(); // If we attempt to connect the namespace as the initial connect, we should not ask for derivation path
     }
   }, []);
 
-  const handleConnectNamespace = async (
-    walletType: string,
-    namespace: Namespace
-  ) => {
+  const handleConnectNamespace = async (options?: {
+    shouldAskForDerivationPath?: boolean;
+  }) => {
     try {
       processingConnectAttempt.current = true;
-      await connect(walletType, [
-        {
-          namespace: namespace,
-          network: '',
-        },
-      ]);
+      await handleConnect(options);
     } catch (error) {
       setError(error as Error);
     } finally {
@@ -54,17 +45,27 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
     }
   };
 
-  const handleButtonClick = async (namespaceState: NamespaceData) => {
+  const handleButtonClick = async () => {
     setError(null);
-    if (namespaceState.connected) {
-      await disconnect(walletType, [namespace.value]);
+    if (state.connected) {
+      await handleDisconnect();
     } else {
-      void handleConnectNamespace(walletType, namespace.value);
+      void handleConnectNamespace({ shouldAskForDerivationPath: true }); // If we attempt to connect the namespace in result of button click, we should ask for derivation path
+    }
+  };
+
+  const getConnectedAddress = () => {
+    const firstAccountArray = state.accounts?.[0]?.split(':');
+    const address = firstAccountArray?.[firstAccountArray.length - 1]; // Considering that account = [namespace, chain, address], we only need to get the address
+    if (!state.connected || !address) {
+      return null;
     }
+
+    return getConciseAddress(address);
   };
 
   const getButtonText = () => {
-    if (namespaceState.connected) {
+    if (state.connected) {
       return i18n.t('Disconnect');
     }
     if (!!error) {
@@ -76,29 +77,24 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
   return (
     <NamespaceItem
       namespace={namespace}
-      connected={namespaceState.connected}
+      connected={state.connected}
       error={error?.message}
-      address={
-        namespaceState.connected
-          ? getConciseAddress(
-              firstAccountArray?.[firstAccountArray?.length - 1]
-            )
-          : ''
-      }
+      address={getConnectedAddress()}
       suffix={
-        namespaceState.connecting ? (
+        state.connecting ? (
           <Spinner color="info" />
         ) : (
           <Button
             id="widget-name-space-connect-btn"
             variant="ghost"
-            type={namespaceState.connected ? 'error' : 'primary'}
+            type={state.connected ? 'error' : 'primary'}
             size="xsmall"
-            onClick={async () => handleButtonClick(namespaceState)}>
+            onClick={async () => handleButtonClick()}
+            disabled={disabled}>
             {getButtonText()}
           </Button>
         )
       }
     />
   );
-};
+}

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

@@ -2,7 +2,6 @@ import { Button, styled } from '@rango-dev/ui';
 
 export const NamespaceList = styled('ul', {
   padding: 0,
-  paddingTop: '$16',
   paddingBottom: '$20',
   margin: 0,
 });

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -124,6 +124,7 @@ export function Namespaces(props: PropTypes) {
               'This wallet can only connect to one chain at a time. '
             )}
           />
+          <Divider size={30} />
         </>
       ) : (
         <>
@@ -139,6 +140,7 @@ export function Namespaces(props: PropTypes) {
               ? i18n.t('Deselect all')
               : i18n.t('Select all')}
           </Button>
+          <Divider size={10} />
         </>
       )}
       <NamespaceList>

package/src/components/WalletStatefulConnect/Namespaces.types.tsx

@@ -1,6 +1,7 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
 import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
 import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { NamespaceData } from '@rango-dev/wallets-core/store';
 
 export interface PropTypes {
   onConfirm: (namespaces: Namespace[]) => void;
@@ -27,7 +28,12 @@ export type NamespaceItemPropTypes =
   | CheckboxNamespaceItemPropTypes;
 
 export type NamespaceDetachedItemPropTypes = {
-  walletType: string;
-  initialConnect?: boolean;
   namespace: LegacyNamespaceMeta;
+  state: NamespaceData;
+  initialConnect?: boolean;
+  disabled?: boolean;
+  handleConnect: (options?: {
+    shouldAskForDerivationPath?: boolean;
+  }) => Promise<void>;
+  handleDisconnect: () => Promise<void>;
 };

package/src/hooks/useStatefulConnect/useStatefulConnect.state.ts

@@ -9,7 +9,9 @@ export interface State {
   status: 'init' | 'namespace' | 'derivationPath' | 'detached';
   namespace: NeedsNamespacesState | null;
   derivationPath: NeedsDerivationPathState | null;
-  selectedNamespaces: Namespace[] | null;
+  selectedNamespaces:
+    | { namespace: Namespace; derivationPath?: string }[]
+    | null;
 }
 
 export const initState: State = {

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -26,8 +26,11 @@ interface UseStatefulConnect {
     wallet: WalletInfoWithExtra,
     selectedNamespaces: Namespace[]
   ) => Promise<Result>;
-  handleDerivationPath: (path: string) => Promise<Result>;
   handleDisconnect: (wallet: WalletInfoWithExtra) => Promise<Result>;
+  handleDerivationPath: (
+    wallet: ExtendedModalWalletInfo,
+    path: string
+  ) => Promise<Result>;
   getState(): State;
   resetState(section?: 'derivation'): void;
 }
@@ -231,14 +234,14 @@ export function useStatefulConnect(): UseStatefulConnect {
       type: 'detached',
       payload: {
         targetWallet: wallet,
-        selectedNamespaces:
-          namespaces?.map((namespace) => namespace.namespace) || null,
+        selectedNamespaces: namespaces ?? null,
       },
     });
     return { status: ResultStatus.Detached };
   };
 
   const handleDerivationPath = async (
+    wallet: ExtendedModalWalletInfo,
     derivationPath: string
   ): Promise<Result> => {
     if (!derivationPath) {
@@ -256,6 +259,22 @@ export function useStatefulConnect(): UseStatefulConnect {
     const selectedNamespace = connectState.derivationPath.namespace;
     const namespaces = [{ namespace: selectedNamespace, derivationPath }];
 
+    const isHub = !!wallet.isHub;
+    const needsNamespace = isHub
+      ? wallet.properties?.find((item) => item.name === 'namespaces')?.value
+      : wallet.needsNamespace;
+    if (!!needsNamespace?.data && needsNamespace.data.length > 1) {
+      dispatch({
+        type: 'detached',
+        payload: {
+          targetWallet: wallet,
+          selectedNamespaces: namespaces ?? null,
+          derivationPath,
+        },
+      });
+      return { status: ResultStatus.Detached };
+    }
+
     return await runConnect(type, namespaces);
   };
 

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -14,7 +14,10 @@ export interface NeedsNamespacesState {
 
 export interface DetachedPayload {
   targetWallet: ExtendedModalWalletInfo;
-  selectedNamespaces: Namespace[] | null;
+  selectedNamespaces:
+    | { namespace: Namespace; derivationPath?: string }[]
+    | null;
+  derivationPath?: string;
 }
 
 export interface NeedsDerivationPathState {

package/src/pages/WalletsPage.tsx

@@ -89,23 +89,23 @@ export function WalletsPage() {
         </Typography>
         <ListContainer>
           {filteredWallets.map((wallet, index) => {
-            const walletState = state(wallet.type);
-            const namespacesState = walletState.namespaces;
+            const namespacesState = state(wallet.type).namespaces;
             const key = `wallet-${index}-${wallet.type}`;
             const isWalletPartiallyConnected = checkIsWalletPartiallyConnected(
               wallet,
               namespacesState
             );
 
+            let walletState = wallet.state;
+            if (isWalletPartiallyConnected) {
+              // If the wallet is connected to only a subset of namespaces, and the user has the option to connect to additional ones, we label the wallet as `Partially Connected`
+              walletState = WalletState.PARTIALLY_CONNECTED;
+            }
             return (
               <Wallet
                 key={key}
                 {...wallet}
-                state={
-                  isWalletPartiallyConnected
-                    ? WalletState.PARTIALLY_CONNECTED
-                    : wallet.state
-                }
+                state={walletState}
                 hasDeepLink={checkHasDeepLink(wallet.type)}
                 link={getWalletLink(wallet.type)}
                 container={getContainer()}

package/src/utils/wallets.ts

@@ -551,7 +551,11 @@ export function checkIsWalletPartiallyConnected(
     (namespace) => !namespace.unsupported
   );
 
-  return supportedNamespaces.some(
-    (namespace) => !namespacesState?.get(namespace.value)?.connected
+  // If the wallet is connected to only a subset of namespaces, and the user has the option to connect to additional ones, we label the wallet as `Partially Connected`
+  return (
+    wallet.needsNamespace.selection === 'multiple' &&
+    supportedNamespaces.some(
+      (namespace) => !namespacesState?.get(namespace.value)?.connected
+    )
   );
 }