@rango-dev/widget-embedded 0.49.0 → 0.49.1-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.49.0",
+  "version": "0.49.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.51.0",
+    "@rango-dev/provider-all": "^0.51.1-next.0",
     "@rango-dev/queue-manager-core": "^0.32.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.51.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.51.1-next.0",
     "@rango-dev/queue-manager-react": "^0.32.0",
     "@rango-dev/signer-solana": "^0.44.0",
-    "@rango-dev/ui": "^0.52.0",
-    "@rango-dev/wallets-core": "^0.48.0",
-    "@rango-dev/wallets-react": "^0.35.0",
-    "@rango-dev/wallets-shared": "^0.49.0",
+    "@rango-dev/ui": "^0.52.1-next.0",
+    "@rango-dev/wallets-core": "^0.48.1-next.0",
+    "@rango-dev/wallets-react": "^0.35.1-next.0",
+    "@rango-dev/wallets-shared": "^0.49.1-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -15,6 +15,7 @@ import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
 import { WIDGET_UI_ID } from '../../constants';
+import { useDeepLink } from '../../hooks/useDeepLink';
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
@@ -38,7 +39,7 @@ export function WalletList(props: PropTypes) {
   const { chain, quoteChains, isSelected, selectWallet, limit, onShowMore } =
     props;
   const isActiveTab = useUiStore.use.isActiveTab();
-
+  const { checkHasDeepLink, getWalletLink } = useDeepLink();
   const { blockchains, connectedWallets } = useAppStore();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
     useState<ExtendedModalWalletInfo>();
@@ -159,7 +160,9 @@ export function WalletList(props: PropTypes) {
           }
         };
 
-        const info = makeInfo(wallet.state);
+        const info = makeInfo(wallet.state, {
+          hasDeepLink: checkHasDeepLink(wallet.type),
+        });
 
         const getWalletDescription = () => {
           if (couldAddExperimentalChain) {
@@ -226,6 +229,7 @@ export function WalletList(props: PropTypes) {
               </WatermarkedModal>
             )}
             <SelectableWallet
+              hasDeepLink={checkHasDeepLink(wallet.type)}
               key={wallet.type}
               id="widget-wallets-list-selectable-wallet-btn"
               description={getWalletDescription()}
@@ -234,6 +238,7 @@ export function WalletList(props: PropTypes) {
               selected={isSelected(wallet.type, chain)}
               disabled={!isActiveTab}
               {...wallet}
+              link={getWalletLink(wallet.type)}
             />
           </React.Fragment>
         );

package/src/hooks/useDeepLink.ts

@@ -0,0 +1,48 @@
+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 };
+}

package/src/hooks/useWalletList.ts

@@ -20,6 +20,7 @@ import {
   sortWalletsBasedOnConnectionState,
 } from '../utils/wallets';
 
+import { useDeepLink } from './useDeepLink';
 import { useStatefulConnect } from './useStatefulConnect/useStatefulConnect';
 
 interface Params {
@@ -44,6 +45,7 @@ export function useWalletList(params?: Params): API {
   const { state, getWalletInfo } = useWallets();
   const blockchains = useAppStore().blockchains();
   const { handleDisconnect } = useStatefulConnect();
+  const { checkHasDeepLink } = useDeepLink();
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
   const listAvailableWalletTypes = configWalletsToWalletName(
@@ -60,7 +62,8 @@ export function useWalletList(params?: Params): API {
   wallets = detectMobileScreens()
     ? wallets.filter(
         (wallet) =>
-          wallet.showOnMobile !== false && state(wallet.type).installed
+          wallet.showOnMobile !== false &&
+          (state(wallet.type).installed || checkHasDeepLink(wallet.type))
       )
     : wallets;
 

package/src/pages/WalletsPage.tsx

@@ -15,6 +15,7 @@ import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
 import { StatefulConnectModal } from '../components/StatefulConnectModal';
+import { useDeepLink } from '../hooks/useDeepLink';
 import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
@@ -45,7 +46,7 @@ export function WalletsPage() {
   const blockchains = useAppStore().blockchains();
   const { config } = useAppStore();
   const { state } = useWallets();
-
+  const { checkHasDeepLink, getWalletLink } = useDeepLink();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
     useState<WalletInfoWithExtra>();
   const isActiveTab = useUiStore.use.isActiveTab();
@@ -95,6 +96,7 @@ export function WalletsPage() {
               wallet,
               namespacesState
             );
+
             return (
               <Wallet
                 key={key}
@@ -104,6 +106,8 @@ export function WalletsPage() {
                     ? WalletState.PARTIALLY_CONNECTED
                     : wallet.state
                 }
+                hasDeepLink={checkHasDeepLink(wallet.type)}
+                link={getWalletLink(wallet.type)}
                 container={getContainer()}
                 onClick={() => handleWalletItemClick(wallet)}
                 isLoading={fetchMetaStatus === 'loading'}

package/src/types/config.ts

@@ -175,7 +175,19 @@ 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.
@@ -223,6 +235,7 @@ 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
@@ -265,6 +278,7 @@ export type WidgetConfig = {
   defaultCustomDestinations?: { [blockchain: string]: string };
   language?: Language;
   theme?: WidgetTheme;
+  deepLinking?: DeepLinking;
   externalWallets?: boolean;
   excludeLiquiditySources?: boolean;
   features?: Features;

package/src/utils/wallets.ts

@@ -96,7 +96,6 @@ export function mapWalletTypesToWalletInfo(
       const blockchainTypes = removeDuplicateFrom(
         supportedChains.map((item) => item.type)
       );
-
       const state = mapStatusToWalletState(getState(type));
       return {
         title: name,
@@ -113,7 +112,6 @@ export function mapWalletTypesToWalletInfo(
       };
     });
 }
-
 export function walletAndSupportedChainsNames(
   supportedBlockchains: BlockchainMeta[]
 ): Network[] | null {