Incorporating algosigner chrome extension to React project

user_14633559 0
Viewed 179

I'm trying to connect to the AlgoSigner chrome extension ( github here ) in my react project, but whenever I try to use the AlgoSigner methods, it always says that 'AlgoSigner' is not defined. How do I import it into my project? Following their instructions and cloning the repository into the root of my project doesn't work, unless I'm not doing it right. What should I include in my code?

reactjs google-chrome-extension javascript
3 Answers

Two things to keep in mind : -

  1. Algosigner extension should be installed on the browser.
  2. Once Algosigner is installed on the browser it gets injected into every page so you can use it like a global var.

Your case might be that either the extension is not installed or if the extension is already installed then you are not using that global var correctly.

user_96237890

I have more complicated setup. My project is typescript using remix.run. I applied what Babita said above but I needed to do this:

declare global {
  interface Window {
    AlgoSigner: any
  }
}

You may need to define the properties of AlgoSigner to help you with IntelliSense. I will update this if I do.

Hint: There is another solution in a React project using eslint no-undef but it didn't work for me in a typescript project

user_2395540

You can just use the window.AlgoSigner function. The error will disappear.

user_105774590
Related