@rango-dev/widget-embedded 0.51.1-next.0 → 0.51.1-next.10

package/src/types/config.ts

@@ -1,5 +1,6 @@
 import type { Language, theme } from '@rango-dev/ui';
-import type { LegacyProviderInterface } from '@rango-dev/wallets-core/dist/legacy/mod';
+import type { Provider } from '@rango-dev/wallets-core';
+import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
 import type { ReactElement } from 'react';
@@ -175,19 +176,7 @@ export type TrezorManifest = {
   appUrl: string;
   email: string;
 };
-/**
- * `DeepLinking`
- *
- * @property {string} [targetUrl]
- * - The URL to be opened in the provider's in-app browser.
- *
- * @property {string} [appHost]
- * - The full domain of the app, excluding the protocol (https://), path, and query parameters.
- */
-export type DeepLinking = {
-  targetUrl: string;
-  appHost: string;
-};
+
 /**
  *
  * @property {string} manifestUrl - The URL of the TON Connect [manifest]{@link https://github.com/ton-connect/docs/blob/main/requests-responses.md#app-manifest}, containing the Dapp metadata to be displayed in the user’s wallet.
@@ -235,7 +224,6 @@ export type TonConnectConfig = {
  * @property {WidgetTheme} theme - The `theme` property is a part of the `WidgetConfig` type and is
  * used to specify the visual theme of the widget. It is of type `WidgetTheme`, which is an interface
  * that defines the various properties of the theme, such as colors, fonts, and others.
- * @property {DeepLinking} deepLinking - Configures deep linking parameters for providers that support it.
  * @property {boolean} externalWallets
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
  * @property {boolean} excludeLiquiditySources - The `excludeLiquiditySources` property is a boolean value that when you
@@ -272,13 +260,12 @@ export type WidgetConfig = {
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
   liquiditySources?: string[];
-  wallets?: (WalletType | LegacyProviderInterface)[];
+  wallets?: (WalletType | LegacyProviderInterface | Provider)[];
   multiWallets?: boolean;
   customDestination?: boolean;
   defaultCustomDestinations?: { [blockchain: string]: string };
   language?: Language;
   theme?: WidgetTheme;
-  deepLinking?: DeepLinking;
   externalWallets?: boolean;
   excludeLiquiditySources?: boolean;
   features?: Features;

package/src/utils/common.ts

@@ -1,5 +1,5 @@
 import type { WalletInfoWithExtra } from '../types';
-import type { Token } from 'rango-sdk';
+import type { BlockchainMeta, Token } from 'rango-sdk';
 
 import { BlockchainCategories, WalletState } from '@rango-dev/ui';
 import { TransactionType } from 'rango-sdk';
@@ -280,3 +280,18 @@ export function memoizedResult(): <R>(fn: () => R, key: number | string) => R {
     return result;
   };
 }
+
+export function filterBlockchainsWithAtLeastOneToken(
+  blockchains: BlockchainMeta[],
+  tokens: Token[]
+) {
+  const blockchainsWithAtLeastOneToken = new Set<string>();
+
+  tokens.forEach((token) => {
+    blockchainsWithAtLeastOneToken.add(token.blockchain);
+  });
+
+  return blockchains.filter((blockchain) =>
+    blockchainsWithAtLeastOneToken.has(blockchain.name)
+  );
+}

package/src/utils/providers.ts

@@ -95,7 +95,7 @@ export function matchAndGenerateProviders({
   return allProviders;
 }
 
-function pickProviderVersionWithFallbackToLegacy(
+export function pickProviderVersionWithFallbackToLegacy(
   provider: VersionedProviders
 ): BothProvidersInterface {
   try {

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,
@@ -112,6 +125,7 @@ export function mapWalletTypesToWalletInfo(
       };
     });
 }
+
 export function walletAndSupportedChainsNames(
   supportedBlockchains: BlockchainMeta[]
 ): Network[] | null {
@@ -418,42 +432,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 +530,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 +545,7 @@ export function checkIsWalletPartiallyConnected(
   return (
     wallet.needsNamespace.selection === 'multiple' &&
     supportedNamespaces.some(
-      (namespace) => !namespacesState?.get(namespace.value)?.connected
+      (namespace) => !walletState.namespaces?.get(namespace.value)?.connected
     )
   );
 }

package/dist/hooks/useDeepLink.d.ts

@@ -1,7 +0,0 @@
-import type { InstallObjects } from '@rango-dev/wallets-shared';
-export declare function useDeepLink(): {
-    getWalletDeepLink: (walletType: string) => string | undefined;
-    getWalletLink: (walletType: string) => string | InstallObjects;
-    checkHasDeepLink: (walletType: string) => boolean;
-};
-//# sourceMappingURL=useDeepLink.d.ts.map

package/dist/hooks/useDeepLink.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDeepLink.d.ts","sourceRoot":"","sources":["../../src/hooks/useDeepLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAOhE,wBAAgB,WAAW;oCAKc,MAAM,KAAG,MAAM,GAAG,SAAS;gCAsB/B,MAAM,KAAG,MAAM,GAAG,cAAc;mCAS7B,MAAM,KAAG,OAAO;EAIvD"}

package/src/hooks/useDeepLink.ts

@@ -1,48 +0,0 @@
-import type { InstallObjects } from '@rango-dev/wallets-shared';
-
-import { useWallets } from '@rango-dev/wallets-react';
-import { detectMobileScreens } from '@rango-dev/wallets-shared';
-
-import { useAppStore } from '../store/AppStore';
-
-export function useDeepLink() {
-  const { getWalletInfo } = useWallets();
-  const { config } = useAppStore();
-  const isMobileScreen = detectMobileScreens();
-
-  function getWalletDeepLink(walletType: string): string | undefined {
-    const wallet = getWalletInfo(walletType);
-    const appHost = config.deepLinking?.appHost;
-    const targetUrl = config.deepLinking?.targetUrl;
-    if (!appHost || !targetUrl) {
-      return;
-    }
-    return wallet.generateDeepLink?.({
-      appHost,
-      targetUrl,
-    });
-  }
-
-  /**
-   * Returns the appropriate wallet link based on the given wallet type.
-   *
-   * If a deep link is available and the user is on a mobile screen, the deep link is returned.
-   * Otherwise, it falls back to returning the wallet's install link.
-   *
-   * @param {string} walletType - The type of the wallet (e.g., 'metamask', 'trust-wallet').
-   * @returns {string | InstallObjects} - A deep link string if available on mobile, or an install link object otherwise.
-   */
-  function getWalletLink(walletType: string): string | InstallObjects {
-    const deepLink = getWalletDeepLink(walletType);
-    if (deepLink && isMobileScreen) {
-      return deepLink;
-    }
-    const wallet = getWalletInfo(walletType);
-    return wallet.installLink;
-  }
-
-  function checkHasDeepLink(walletType: string): boolean {
-    return !!getWalletDeepLink(walletType) && isMobileScreen;
-  }
-  return { getWalletDeepLink, getWalletLink, checkHasDeepLink };
-}