@rango-dev/widget-embedded 0.43.1-next.0 → 0.43.1-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.43.1-next.0",
+  "version": "0.43.1-next.1",
   "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.46.1-next.0",
+    "@rango-dev/provider-all": "^0.46.1-next.1",
     "@rango-dev/queue-manager-core": "^0.29.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.45.2-next.7",
+    "@rango-dev/queue-manager-rango-preset": "^0.45.2-next.8",
     "@rango-dev/queue-manager-react": "^0.29.0",
     "@rango-dev/signer-solana": "^0.39.1-next.3",
-    "@rango-dev/ui": "^0.46.2-next.9",
-    "@rango-dev/wallets-core": "^0.43.1-next.6",
-    "@rango-dev/wallets-react": "^0.30.2-next.8",
-    "@rango-dev/wallets-shared": "^0.44.2-next.7",
+    "@rango-dev/ui": "^0.46.2-next.10",
+    "@rango-dev/wallets-core": "^0.43.1-next.7",
+    "@rango-dev/wallets-react": "^0.30.2-next.9",
+    "@rango-dev/wallets-shared": "^0.44.2-next.8",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -44,6 +44,8 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
   const namespaceState = walletState.namespaces?.get(namespace.value);
   const firstAccountArray = namespaceState.accounts?.[0]?.split(':');
 
+  const supportedChains = namespace.getSupportedChains(blockchains);
+
   useEffect(() => setErrorIsExpanded(false), [error]);
 
   useLayoutEffect(() => {
@@ -145,8 +147,8 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
           )}
           {!namespaceState.connected &&
             !error &&
-            namespace.chains.length > 1 && (
-              <SupportedChainsList chains={namespace.chains} />
+            supportedChains.length > 1 && (
+              <SupportedChainsList chains={supportedChains} />
             )}
         </NamespaceItemInnerContent>
         {namespaceState.connecting ? (

package/src/components/WalletStatefulConnect/NamespaceListItem.tsx

@@ -18,7 +18,8 @@ export function NamespaceListItem(props: NamespaceItemPropTypes) {
   const { onClick, type, namespace } = props;
   const blockchains = useAppStore().blockchains();
 
-  const showSupportedChains = namespace.chains.length > 1;
+  const supportedChains = namespace.getSupportedChains(blockchains);
+  const showSupportedChains = supportedChains.length > 1;
   return (
     <NamespaceItemContainer onClick={onClick} clickable>
       <NamespaceItemContent>
@@ -31,7 +32,7 @@ export function NamespaceListItem(props: NamespaceItemPropTypes) {
             {namespace.label}
           </Typography>
           {showSupportedChains && (
-            <SupportedChainsList chains={namespace.chains} />
+            <SupportedChainsList chains={supportedChains} />
           )}
         </NamespaceItemInnerContent>
         {type === 'radio' ? (

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -12,21 +12,30 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { useAppStore } from '../../store/AppStore';
+
 import { NamespaceListItem } from './NamespaceListItem';
 import { NamespaceList, StyledButton } from './Namespaces.styles';
 import { NamespaceUnsupportedItem } from './NamespaceUnsupportedItem';
 
 export function Namespaces(props: PropTypes) {
   const { targetWallet } = props.value;
-  const singleNamespace = targetWallet.needsNamespace?.selection === 'single';
+  const namespacesProperty = targetWallet.properties?.find(
+    (property) => property.name === 'namespaces'
+  );
+  const isHub = targetWallet.isHub;
+  const singleNamespace = targetWallet.isHub
+    ? namespacesProperty?.value.selection === 'single'
+    : targetWallet.needsNamespace?.selection === 'single';
+  const needsNamespace = isHub
+    ? namespacesProperty?.value
+    : targetWallet.needsNamespace;
   const providerImage = targetWallet.image;
 
+  const blockchains = useAppStore().blockchains();
   const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
   const supportedNamespaces = useMemo(
-    () =>
-      targetWallet.needsNamespace?.data.filter(
-        (namespace) => !namespace.unsupported
-      ),
+    () => needsNamespace?.data.filter((namespace) => !namespace.unsupported),
     [targetWallet?.type]
   );
 
@@ -73,9 +82,11 @@ export function Namespaces(props: PropTypes) {
       if (!!props.value.defaultSelectedChains?.length) {
         const namespacesContainingDefaultSelectedChains =
           supportedNamespaces.filter((namespace) =>
-            namespace.chains.some((chain) =>
-              props.value.defaultSelectedChains?.includes(chain.name)
-            )
+            namespace
+              .getSupportedChains(blockchains)
+              .some((chain) =>
+                props.value.defaultSelectedChains?.includes(chain.name)
+              )
           );
         setSelectedNamespaces(
           namespacesContainingDefaultSelectedChains.map(
@@ -132,23 +143,21 @@ export function Namespaces(props: PropTypes) {
       <NamespaceList>
         {wrapRadioRoot(
           <>
-            {targetWallet.needsNamespace?.data.map(
-              (namespace, index, array) => (
-                <React.Fragment key={namespace.id}>
-                  {namespace.unsupported ? (
-                    <NamespaceUnsupportedItem namespace={namespace} />
-                  ) : (
-                    <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>
-              )
-            )}
+            {needsNamespace?.data.map((namespace, index, array) => (
+              <React.Fragment key={namespace.id}>
+                {namespace.unsupported ? (
+                  <NamespaceUnsupportedItem namespace={namespace} />
+                ) : (
+                  <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>

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

@@ -1,5 +1,5 @@
-import type { Chain } from '@rango-dev/wallets-core/dist/namespaces/common/types';
+import type { BlockchainMeta } from 'rango-types';
 
 export type PropTypes = {
-  chains: Chain[];
+  chains: BlockchainMeta[];
 };

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -97,25 +97,22 @@ export function useStatefulConnect(): UseStatefulConnect {
 
       // Legacy and hub have different structure to handle each situation.
       const isHub = !!wallet.isHub;
-      const detachedInstances = wallet.properties?.find(
-        (item) => item.name === 'detached'
-      )?.value;
+      const needsNamespace = isHub
+        ? wallet.properties?.find((item) => item.name === 'namespaces')?.value
+        : wallet.needsNamespace;
+
+      const needsDerivationPath = isHub
+        ? wallet.properties?.find((item) => item.name === 'derivationPath')
+            ?.value
+        : wallet.needsDerivationPath;
 
       // 1. Target wallet does not contain any namespaces
-      if (
-        (isHub && !detachedInstances?.length) ||
-        (!isHub && !wallet.needsNamespace)
-      ) {
+      if (!needsNamespace?.data?.length) {
         return await runConnect(wallet.type, undefined, options);
       }
 
       // 2. Target wallet contains more than one namespace
-      if (
-        (isHub && detachedInstances?.length && detachedInstances.length > 1) ||
-        (!isHub &&
-          wallet.needsNamespace?.data.length &&
-          wallet.needsNamespace.data.length > 1)
-      ) {
+      if (needsNamespace?.data.length && needsNamespace.data.length > 1) {
         dispatch({
           type: 'needsNamespace',
           payload: {
@@ -127,12 +124,9 @@ export function useStatefulConnect(): UseStatefulConnect {
       }
 
       // 3. Target wallet contains only one namespace
-      if (
-        (isHub && detachedInstances?.length === 1) ||
-        (!isHub && wallet.needsNamespace?.data.length === 1)
-      ) {
-        if (wallet.needsNamespace && wallet.needsDerivationPath) {
-          const namespace = wallet.needsNamespace.data[0];
+      if (needsNamespace?.data.length === 1) {
+        if (needsDerivationPath) {
+          const namespace = needsNamespace.data[0];
 
           dispatch({
             type: 'needsDerivationPath',
@@ -146,7 +140,7 @@ export function useStatefulConnect(): UseStatefulConnect {
         }
         return await runConnect(
           wallet.type,
-          wallet.needsNamespace?.data.map((namespace) => ({
+          needsNamespace?.data?.map((namespace) => ({
             namespace: namespace.value,
           })),
           options
@@ -182,11 +176,19 @@ export function useStatefulConnect(): UseStatefulConnect {
   };
 
   const handleNamespace = async (
-    wallet: WalletInfoWithExtra,
+    wallet: ExtendedModalWalletInfo,
     selectedNamespaces: Namespace[]
   ): Promise<Result> => {
-    const isSingleNamespace = wallet.needsNamespace?.selection === 'single';
-    const needsDerivationPath = wallet.needsDerivationPath;
+    const isHub = !!wallet.isHub;
+    const needsNamespace = isHub
+      ? wallet.properties?.find((item) => item.name === 'namespaces')?.value
+      : wallet.needsNamespace;
+
+    const needsDerivationPath = isHub
+      ? wallet.properties?.find((item) => item.name === 'derivationPath')?.value
+      : wallet.needsDerivationPath;
+
+    const isSingleNamespace = needsNamespace?.selection === 'single';
     const firstSelectedNamespace = selectedNamespaces[0];
 
     if (!firstSelectedNamespace) {