How to initiate connect wallet on phantom mobile app

Question

This is a video of how it currently behaves

import { useMemo } from "react";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { PhantomWalletAdapter } from "@solana/wallet-adapter-wallets";
import { clusterApiUrl } from "@solana/web3.js";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";

export default function MyApp({ Component, pageProps }) {
  const network = WalletAdapterNetwork.Devnet;
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);

  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter({ network })
    ],
    [network]
  );

  return (
       <ConnectionProvider endpoint={endpoint}>
         <WalletProvider wallets={wallets}>
           <WalletModalProvider>
             <Component {...pageProps} />
           </WalletModalProvider>
         </WalletProvider>
       </ConnectionProvider>
  );
}

Answer 1

The problem here seems to be caused by the URL you're using, the http://192.168... address

As a workaround you can use ngrok to get a public https URL to your localhost:3000 and use that instead. Once you install it you'd just run ngrok http 3000 and it'll give you an https ngrok URL to use.

See Phantom docs:

Phantom's browser extension and mobile in-app browser will both inject a phantom object into the window of any web application the user visits, provided that site is using https://, on localhost, or is 127.0.0.1. Phantom will not inject the provider into iframes or sites use http://.