Telegram Mini App

[TopGuru777]

Summary

I'm trying to connect Solana wallet on telegram miniapp but not working. I tried phantom deeplink but it finally redirects me to download link. https://phantom.app/download.
I have installed browser extension for phantom wallet.

Example

No response

Steps to Reproduce

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. Can anyone help me with that?
Here's the code I used for implementing wallet connection.

import nacl from "tweetnacl"
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>
      }
    </>
  )
};

Phantom Version

No response

Is there an existing discussion for this?

• I have searched the existing discussions

[adamdelphantom]

Hi @TopGuru777,

It sounds like you are attempting to connect to phantom extension via deeplink. Currently deeplinks are only supported on mobile platforms. I'm not aware of a way to connect telegram to phantom extension for the time being, unfortunately.

[TopGuru777]

So there's no way to connect on both mobile and web?

[adamdelphantom]

We don't currently offer a unified connection scheme. Both extensions and mobile apps are sandboxed in different ways, unfortunately. Maybe in the future we will be able to support this but nothing releasing in the immediate future.