anza-xyz / wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.
https://anza-xyz.github.io/wallet-adapter/
Apache License 2.0
1.55k stars 944 forks source link

wallet-standard:app-ready is missing object #926

Closed saberistic closed 3 weeks ago

saberistic commented 6 months ago

Describe the bug I have created following adapter repo and created an extension here with it while loading the extension, on wallet-standard:app-ready event it attempts to decunstruct a variable which is null so it throws this error:

content.js:2 Uncaught TypeError: Cannot destructure property 'register' of 'undefined' as it is undefined.
    at e (content.js:2:451609)
    at content.js:2:451866

https://github.com/Spiral-Safe/wallet-adapter/blob/main/src/register.ts#L21

To Reproduce Steps to reproduce the behavior:

  1. build wallet adapter
  2. build extension
  3. run a site with solana wallet adapter
  4. See the extension attempt on registering and failing

Expected behavior shows wallet as a detected wallet in the list

Screenshots

image

Desktop (please complete the following information):

Smartphone (please complete the following information):

jordaaash commented 3 weeks ago

Sorry, didn't see this before.

Your issue here is that the registration of the Standard Wallet, and indeed all of the Wallet API, doesn't go in the contentScript. It needs to go in an asset .js file that is injected onto the page via insertion of a script tag, and listed in the manifest.json of the extension.

The contentScript does not have direct access to the JS environment of the page, and that's why even though it can receive events on the window, it cannot access a JS object (like the api on the event).

It's generally a thin bridge between your extension and the page. To get access to JS on the page, the contentScript has to inject JS, and then communicate from the JS on the page to itself via events, postMessage, or other mechanisms.

Here's (at a high level) how a wallet extension (Backpack) does this:

https://github.com/coral-xyz/backpack/blob/5a538a41d060d2c48507007f96c766483115aecc/packages/app-extension/src/contentScript/index.ts#L28

https://github.com/coral-xyz/backpack/blob/5a538a41d060d2c48507007f96c766483115aecc/packages/app-extension/webpack.config.js#L355-L359