3

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>
  );
}

1 Answer 1

3

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://.

1
  • 1
    Nice it works with ngrok so which means it should work when I am in production mode Thanks Celium Dec 19, 2022 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.