Is Phantom Deeplink Supported in Webapp?

[teodorus-nathaniel]

I would like my app to be like the one in this deeplink guide
but for the demo, it was using Expo and in webapp, I don't have access to Linking.createURL, or can I just use https url for the redirect?

[adamdelphantom]

@teodorus-nathaniel Yes, you can just use the same deeplink url in your web app if it is opened by the user outside of the phantom dapp browser.

[teodorus-nathaniel]

Thanks for confirming, yeah I tried again and found something wrong with my reproduction, so I can connect properly now 🙏

[TopGuru777]

I'm trying to implement phantom deeplink on react app for developing t2e telegram mini app game. But when I click connect, it redirects to download page. @teodorus-nathaniel Can you help me with that?
Here's the code I used for implementing wallet connection.

import {
  // clusterApiUrl,
  // Connection,
  // Keypair,
  PublicKey,
  // SystemProgram,
  // Transaction
} from "@solana/web3.js"
import bs58 from "bs58"
import { useEffect, useState } from "react";

// const connection = new Connection(clusterApiUrl("mainnet-beta"));

const openURL = (url: string) => {
  window.open(url, "_blank", "noopener,noreferrer");
}

const createURL = (path: string, queryParams: any = {}) => {
  // Define the base URL for your application
  const baseURL = window.location.origin; // Use current origin for base

  // Construct the full URL
  const url = new URL(path, baseURL);

  // Append query parameters if any are provided
  Object.keys(queryParams).forEach(key =>
    url.searchParams.append(key, queryParams[key])
  );

  return url.toString();
}

export const decryptPayload = (
  data: string,
  nonce: string,
  sharedSecret?: Uint8Array
) => {
  if (!sharedSecret) throw new Error("missing shared secret");

  const decryptedData = nacl.box.open.after(
    bs58.decode(data),
    bs58.decode(nonce),
    sharedSecret
  );
  if (!decryptedData) {
    throw new Error("Unable to decrypt data");
  }
  return JSON.parse(Buffer.from(decryptedData).toString("utf8"));
};

export default () => {
  const [ phantomWalletPublicKey , setPhantomWalletPublicKey] = useState<PublicKey | null>(null);
  const [dappKeyPair] = useState(nacl.box.keyPair());
  const [sharedSecret, setSharedSecret] = useState<Uint8Array>();
  const [session, setSession] = useState<string>();
  const onConnectRedirectLink = createURL("onConnect");
  const [deepLink, setDeepLink] = useState<string>('');

  useEffect(() => {
    // Handle initial URL
    const initialUrl = window.location.href;
    if (initialUrl) {
      setDeepLink(initialUrl);
    }

    // Function to handle URL change event
    const handleDeepLink = () => {
      const newUrl = window.location.href;
      setDeepLink(newUrl);
    };

    // Listen to URL changes using the popstate event
    window.addEventListener('popstate', handleDeepLink);

    // Cleanup listener on component unmount
    return () => {
      window.removeEventListener('popstate', handleDeepLink);
    };
  }, []);

  useEffect(() => {
    if (!deepLink) return;

    const url = new URL(deepLink);
    const params = url.searchParams;

    // Handle an error response from Phantom
    if (params.get("errorCode")) {
      const error = Object.fromEntries([...params]);
      const message =
        error?.errorMessage ??
        JSON.stringify(Object.fromEntries([...params]), null, 2);
      console.log("error: ", message);
      return;
    }

    // Handle a `connect` response from Phantom
    if (/onConnect/.test(url.pathname)) {
      const sharedSecretDapp = nacl.box.before(
        bs58.decode(params.get("phantom_encryption_public_key")!),
        dappKeyPair.secretKey
      );
      const connectData = decryptPayload(
        params.get("data")!,
        params.get("nonce")!,
        sharedSecretDapp
      );
      setSharedSecret(sharedSecretDapp);
      setSession(connectData.session);
      setPhantomWalletPublicKey(new PublicKey(connectData.public_key));
      console.log(`connected to ${connectData.public_key.toString()}`);
    }
  }, [deepLink]);

  const connect = async () => {
    const params = new URLSearchParams({
      dapp_encryption_public_key: bs58.encode(dappKeyPair.publicKey),
      cluster: "mainnet-beta",
      app_url: "https://p2e-game.vercel.app/",
      redirect_link: onConnectRedirectLink,
    });
    const url = `https://phantom.app/ul/v1/connect?${params.toString()}`;
    openURL(url);
    
  }

  return (
    <>
      {
        phantomWalletPublicKey ? 
          <div className="rounded-md bg-gray-800 text-white font-semibold text-lg">Connected to: ${phantomWalletPublicKey.toString()}</div>
          : <button className="rounded-md bg-gray-800 text-white font-semibold text-lg" onClick={connect}>Connect Wallet</button>
      }
    </>
  )
};```