====Extension is not in browser====

[Dan-Druff]

Thanks for this REPO! I've been looking for something like this to get me started using Hashpack.

My issue here is the same as when I start a fresh hashconnect project following the NPM instructions...

I can't get hashconnect to see the hashpack browser extension. I feel like I'm missing a big obvious puzzle piece to get them talking?

The code executes but doesn't recognize the browser extension, and in this case shows the error: ====Extension is not in browser====.

What do you think I'm missing? Any tips you could help me with?

Again, thanks for this

[rajatK012]

Thanks for appreciation. I am very glad to have you here , I am not implemented a call back , But if you want you can implement a call back function through the Provider connect function.

 const connect = () => {
    if (installedExtensions) {
      if (debug) console.log("Pairing String::", saveData.pairingString);
      hashConnect.connectToLocalWallet(saveData?.pairingString);
    } else {
      if (debug) console.log("====No Extension is not in browser====");
      return "wallet not installed";
    }
  };

if you look at above snippet i am returning a string , so you could modify this according to your use case

[rajatK012]

Hey please check here https://rajatk012.github.io/hashconnectWalletConnect/ , useHashConnect() hook also provide you a simplest way to dedect wallet extension see latest changes .

import React from "react";
import { useHashConnect } from "./HashConnectAPIProvider";

function App() {
  const { connect, walletData, installedExtensions } = useHashConnect();
  const { accountIds, netWork, id } = walletData;

  const conCatAccounts = (lastAccs: string, Acc: string) => {
    return lastAccs + " " + Acc;
  };

  const handleCopy = () => {
    navigator.clipboard.writeText(walletData.pairingString);
  };

  const handleClick = () => {
    if (installedExtensions) connect();
    else
      alert(
        "Please install hashconnect wallet extension first. from chrome web store."
      );
  };

  return (
    <div className="App">
      <header className="App-header">
        {accountIds && accountIds?.length > 0 && (
          <div>
            <h3>Connected Accounts Details:</h3>
            <p>Network:{netWork}</p>
            <p>Accounts: [{accountIds.reduce(conCatAccounts)}]</p>
          </div>
        )}

        {!installedExtensions && <p>Wallet is not installed in your browser</p>}

        <p>Paring key : {walletData.pairingString.substring(0, 15)}...</p>

        <p>
          <button onClick={handleCopy}>Copy Paring String</button>
        </p>

        <button onClick={handleClick}>Connect TO Wallet</button>
      </header>
    </div>
  );
}

export default App;

I am closing this issue

[Dan-Druff]

Thanks for the reply @rajatK012 ! The link to the app you provided above definitely works, and gets HashPack to pop up with the prompt just like I expect.

BUT, when I try the exact same code, it doesn't see the browser extension at all! EVEN when I clone this repo and run it...

I just can't seem to get the HashPack prompt It's obviously on my end...What do you think I'm missing?

[rajatK012]

Nothing problem with your code , hashconenct is working on websocket connection , and it will work on only https , so test your code on https. it will work , same thing was happening with me

in other word test your code on server not in local machine

[Dan-Druff]

Nothing problem with your code , hashconenct is working on websocket connection , and it will work on only https , so test your code on https. it will work , same thing was happening with me

in other word test your code on server not in local machine

THIS WAS IT!

I was able to get it going on local host by running it like: HTTPS=true yarn start I got warnings, but at least I got the Hashpack prompt. THANK YOU!

Now, looking to work with NFT's, and more tips for me @rajatK012 ?

[woodwardmatt]

Thanks for the example code :)

I had the same experience too, where the code wouldn't see that the hashpack extension was installed. The localhost must run under HTTPS - https://create-react-app.dev/docs/using-https-in-development/