[SDK] fix: Force redirect to phantom app on mobile (#6507)

Author: joaquim-verges

.changeset/orange-rockets-reply.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Force redirect to phantom app on mobile

apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx

@@ -158,7 +158,6 @@ export function RightSection(props: {
       <div
         className={cn(
           "relative flex min-h-[300px] grow justify-center rounded-lg",
-          previewTab === "modal" && "scale-75 lg:scale-100",
           previewTab !== "code" && "items-center",
         )}
       >

packages/thirdweb/scripts/wallets/generate.ts

@@ -38,6 +38,9 @@ const deepLinkSupportedWalletsRecord: Record<
   "io.metamask": {
     mobile: "https://metamask.app.link/dapp/",
   },
+  "app.phantom": {
+    mobile: "https://phantom.app/ul/browse/",
+  },
 };
 
 type Wallet = {

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx

@@ -156,13 +156,15 @@ export function AnyWalletConnectUI(props: {
     );
   }
 
-  if (
+  const shouldDeeplink =
     walletInfo.data.deepLink &&
     !isInstalled &&
-    (wallet as Wallet<DeepLinkSupportedWalletIds>).getConfig()
-      ?.preferDeepLink &&
-    isMobile()
-  ) {
+    isMobile() &&
+    ((wallet as Wallet<DeepLinkSupportedWalletIds>).getConfig()
+      ?.preferDeepLink ||
+      wallet.id === "app.phantom"); // always deeplink phantom on mobile, does not support remote connection
+
+  if (walletInfo.data.deepLink?.mobile && shouldDeeplink) {
     return (
       <DeepLinkConnectUI
         wallet={props.wallet as Wallet<InjectedSupportedWalletIds>}

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/DeepLinkConnectUI.tsx

@@ -25,6 +25,8 @@ export const DeepLinkConnectUI = (props: {
   onBack?: () => void;
   client: ThirdwebClient;
 }) => {
+  const link = encodeURIComponent(window.location.toString());
+  const deeplink = `${props.deepLinkPrefix}${link}?ref=${link}`;
   return (
     <Container animate="fadein">
       <Container p="lg">
@@ -38,14 +40,7 @@ export const DeepLinkConnectUI = (props: {
       </Container>
 
       <Container p="lg">
-        <ButtonLink
-          fullWidth
-          variant="accent"
-          href={`${props.deepLinkPrefix}${window.location
-            .toString()
-            .replace("https://", "")}`}
-          gap="xs"
-        >
+        <ButtonLink fullWidth variant="accent" href={deeplink} gap="xs">
           Continue in {props.walletInfo.name}
           <ExternalLinkIcon width={iconSize.sm} height={iconSize.sm} />
         </ButtonLink>