@rango-dev/widget-embedded 0.51.1-next.4 → 0.51.1-next.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.51.1-next.4",
+  "version": "0.51.1-next.6",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.53.1-next.1",
     "@rango-dev/queue-manager-react": "^0.32.1-next.0",
     "@rango-dev/signer-solana": "^0.44.0",
-    "@rango-dev/ui": "^0.54.1-next.1",
+    "@rango-dev/ui": "^0.54.1-next.2",
     "@rango-dev/wallets-core": "^0.50.1-next.0",
     "@rango-dev/wallets-react": "^0.37.1-next.1",
     "@rango-dev/wallets-shared": "^0.51.1-next.0",

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -119,7 +119,9 @@ export function WalletList(props: PropTypes) {
           walletType: wallet.type,
           chain,
         });
-        const isConnected = wallet.state === WalletState.CONNECTED;
+        const isConnected =
+          wallet.state === WalletState.CONNECTED ||
+          wallet.state === WalletState.PARTIALLY_CONNECTED;
         const conciseAddress = address
           ? getConciseAddress(address, ACCOUNT_ADDRESS_MAX_CHARACTERS)
           : '';
@@ -179,12 +181,16 @@ export function WalletList(props: PropTypes) {
         };
 
         const getWalletDescriptionColor = () => {
-          if (wallet.state === WalletState.CONNECTED) {
+          if (
+            wallet.state === WalletState.CONNECTED ||
+            wallet.state === WalletState.PARTIALLY_CONNECTED
+          ) {
             if (isConnectedButDifferentThanTargetNamespace) {
               return 'neutral600';
             }
             return 'neutral700';
           }
+
           return info.color;
         };
 

package/src/components/HeaderButtons/WalletButton.tsx

@@ -1,7 +1,7 @@
 import type { PropTypes } from './HeaderButtons.types';
 
 import { i18n } from '@lingui/core';
-import { Image, Tooltip, WalletIcon } from '@rango-dev/ui';
+import { Image, Tooltip, WalletIcon, WalletState } from '@rango-dev/ui';
 import React from 'react';
 
 import { useWalletList } from '../../hooks/useWalletList';
@@ -16,7 +16,9 @@ import {
 function WalletButton(props: PropTypes) {
   const { list } = useWalletList();
   const connectedWallets = list.filter(
-    (wallet) => wallet.state === 'connected'
+    (wallet) =>
+      wallet.state === WalletState.CONNECTED ||
+      wallet.state === WalletState.PARTIALLY_CONNECTED
   );
   const content = !connectedWallets.length ? (
     i18n.t('Connect Wallet')

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

@@ -9,14 +9,14 @@ import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
-import { mapStatusToWalletState } from '../../utils/wallets';
+import { getWalletConnectionStatus } from '../../utils/wallets';
 
 import { ConnectWalletContent } from './SwapDetailsModal.ConnectWallet';
 import { InstallWalletContent } from './SwapDetailsModal.InstallWallet';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
   const { swap, onClose } = props;
-  const { state } = useWallets();
+  const { state, getWalletInfo } = useWallets();
 
   const currentStep = getCurrentStep(swap);
   const currentStepWallet = currentStep
@@ -25,7 +25,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
 
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
-    ? mapStatusToWalletState(state(walletType))
+    ? getWalletConnectionStatus(getWalletInfo(walletType), state(walletType))
     : null;
   const currentNamespace = currentStep
     ? getCurrentNamespaceOfOrNull(swap, currentStep)

package/src/components/WalletStatefulConnect/ConnectStatus.tsx

@@ -10,7 +10,7 @@ import {
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
-import { mapStatusToWalletState } from '../../utils/wallets';
+import { getWalletConnectionStatus } from '../../utils/wallets';
 
 import { LogoContainer, Spinner } from './ConnectStatus.styles';
 
@@ -18,8 +18,11 @@ export function ConnectStatus(props: ConnectStatusProps) {
   // See `wallet` notes on its type definition
   const { wallet, error } = props;
   const { type, image } = wallet;
-  const { state } = useWallets();
-  const walletState = mapStatusToWalletState(state(type));
+  const { state, getWalletInfo } = useWallets();
+  const walletState = getWalletConnectionStatus(
+    getWalletInfo(type),
+    state(type)
+  );
 
   if (walletState === WalletState.CONNECTED) {
     return (

package/src/hooks/useWalletList.ts

@@ -67,7 +67,7 @@ export function useWalletList(params?: Params): API {
       )
     : wallets;
 
-  const sortedWallets = sortWalletsBasedOnConnectionState(wallets, state);
+  const sortedWallets = sortWalletsBasedOnConnectionState(wallets);
 
   const isExperimentalChainNotAdded = (walletType: string) =>
     !connectedWallets.find(

package/src/pages/WalletsPage.tsx

@@ -8,9 +8,7 @@ import {
   styled,
   Typography,
   Wallet,
-  WalletState,
 } from '@rango-dev/ui';
-import { useWallets } from '@rango-dev/wallets-react';
 import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
@@ -21,7 +19,6 @@ import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
 import { getContainer, isSingleWalletActive } from '../utils/common';
 import {
-  checkIsWalletPartiallyConnected,
   filterBlockchainsByWalletTypes,
   filterWalletsByCategory,
 } from '../utils/wallets';
@@ -45,7 +42,6 @@ export function WalletsPage() {
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const blockchains = useAppStore().blockchains();
   const { config } = useAppStore();
-  const { state } = useWallets();
   const { checkHasDeepLink, getWalletLink } = useDeepLink();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
     useState<WalletInfoWithExtra>();
@@ -89,25 +85,14 @@ export function WalletsPage() {
         </Typography>
         <ListContainer>
           {filteredWallets.map((wallet, index) => {
-            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={walletState}
                 hasDeepLink={checkHasDeepLink(wallet.type)}
                 link={getWalletLink(wallet.type)}
+                state={wallet.state}
                 container={getContainer()}
                 onClick={() => handleWalletItemClick(wallet)}
                 isLoading={fetchMetaStatus === 'loading'}

package/src/utils/wallets.ts

@@ -5,11 +5,12 @@ import type {
   Wallet,
   WalletInfoWithExtra,
 } from '../types';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-import type { ExtendedWalletInfo } from '@rango-dev/wallets-react';
+import type {
+  ExtendedWalletInfo,
+  ProviderContext,
+} from '@rango-dev/wallets-react';
 import type {
   Network,
-  WalletState,
   WalletType,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
@@ -46,19 +47,27 @@ import { formatThousandsWithCommas } from './sanitizers';
 export type ExtendedModalWalletInfo = WalletInfoWithExtra &
   Pick<ExtendedWalletInfo, 'properties' | 'isHub'>;
 
-export function mapStatusToWalletState(state: WalletState): WalletStatus {
-  if (state.connected) {
+export function getWalletConnectionStatus(
+  wallet: ExtendedWalletInfo,
+  walletState: ReturnType<ProviderContext['state']>
+): WalletStatus {
+  if (checkIsWalletPartiallyConnected(wallet, walletState)) {
+    return WalletStatus.PARTIALLY_CONNECTED;
+  }
+  if (walletState.connected) {
     return WalletStatus.CONNECTED;
-  } else if (state.connecting) {
+  }
+  if (walletState.connecting) {
     return WalletStatus.CONNECTING;
-  } else if (!state.installed) {
+  }
+  if (!walletState.installed) {
     return WalletStatus.NOT_INSTALLED;
   }
   return WalletStatus.DISCONNECTED;
 }
 
 export function mapWalletTypesToWalletInfo(
-  getState: (type: WalletType) => WalletState,
+  getState: ProviderContext['state'],
   getWalletInfo: (type: WalletType) => ExtendedWalletInfo,
   list: WalletType[],
   chain?: string
@@ -96,7 +105,11 @@ export function mapWalletTypesToWalletInfo(
       const blockchainTypes = removeDuplicateFrom(
         supportedChains.map((item) => item.type)
       );
-      const state = mapStatusToWalletState(getState(type));
+
+      const state = getWalletConnectionStatus(
+        getWalletInfo(type),
+        getState(type)
+      );
       return {
         title: name,
         image,
@@ -418,42 +431,22 @@ export function areTokensEqual(
 }
 
 export function sortWalletsBasedOnConnectionState(
-  wallets: ExtendedModalWalletInfo[],
-  state: (type: WalletType) => {
-    namespaces?: Map<Namespace, { connected: boolean }>;
-  }
+  wallets: ExtendedModalWalletInfo[]
 ): ExtendedModalWalletInfo[] {
-  return (
-    wallets
-      .map((wallet) => ({
-        // add isPartiallyConnected to wallet items
-        isPartiallyConnected: checkIsWalletPartiallyConnected(
-          wallet,
-          state(wallet.type).namespaces
-        ),
-        ...wallet,
-      }))
-      .sort(
-        (a, b) =>
-          Number(
-            b.state === WalletStatus.CONNECTED && !b.isPartiallyConnected
-          ) -
-            Number(
-              a.state === WalletStatus.CONNECTED && !a.isPartiallyConnected
-            ) ||
-          Number(b.state === WalletStatus.CONNECTED) -
-            Number(a.state === WalletStatus.CONNECTED) ||
-          Number(
-            b.state === WalletStatus.DISCONNECTED ||
-              b.state === WalletStatus.CONNECTING
-          ) -
-            Number(
-              a.state === WalletStatus.DISCONNECTED ||
-                a.state === WalletStatus.CONNECTING
-            )
-      )
-      // remove isPartiallyConnected from wallet items
-      .map(({ isPartiallyConnected, ...wallet }) => wallet)
+  return wallets.sort(
+    (a, b) =>
+      Number(b.state === WalletStatus.CONNECTED) -
+        Number(a.state === WalletStatus.CONNECTED) ||
+      Number(b.state === WalletStatus.PARTIALLY_CONNECTED) -
+        Number(a.state === WalletStatus.PARTIALLY_CONNECTED) ||
+      Number(
+        b.state === WalletStatus.DISCONNECTED ||
+          b.state === WalletStatus.CONNECTING
+      ) -
+        Number(
+          a.state === WalletStatus.DISCONNECTED ||
+            a.state === WalletStatus.CONNECTING
+        )
   );
 }
 
@@ -536,14 +529,10 @@ export function filterWalletsByCategory(
 }
 
 export function checkIsWalletPartiallyConnected(
-  wallet: ExtendedModalWalletInfo,
-  namespacesState?: Map<Namespace, { connected: boolean }>
+  wallet: ExtendedWalletInfo,
+  walletState: ReturnType<ProviderContext['state']>
 ) {
-  if (
-    !wallet.isHub ||
-    !wallet.needsNamespace ||
-    wallet.state !== WalletStatus.CONNECTED
-  ) {
+  if (!wallet.isHub || !wallet.needsNamespace || !walletState.connected) {
     return false;
   }
   const namespaces = wallet.needsNamespace.data;
@@ -555,7 +544,7 @@ export function checkIsWalletPartiallyConnected(
   return (
     wallet.needsNamespace.selection === 'multiple' &&
     supportedNamespaces.some(
-      (namespace) => !namespacesState?.get(namespace.value)?.connected
+      (namespace) => !walletState.namespaces?.get(namespace.value)?.connected
     )
   );
 }