Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature]: Either provide an option to expose window object or support Web3 functionalities directly as a feature #18351

Open
1 task done
davidliudev opened this issue Nov 22, 2022 · 38 comments
Assignees
Labels
Enhancement New feature or request Javascript Product Issues related to users writing javascript in appsmith JS Evaluation Issues related to JS evaluation on the platform Query & JS Pod Issues related to the query & JS Pod

Comments

@davidliudev
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Summary

In order to access Web3 functionalities provided by popular wallet extensions, such as Metamask, we need to have the capability to access window object to access the extension features.

Why should this be worked on?

We found many good use cases that Appsmith could be used for quick internal tools for blockchain related functionalities, such as Airdrop, Wallet operations, calling smart contract functionalities in EVM etc.

However, in order to use many of these functionalities, for example, call wallet extension to transfer Eth to another wallet, we need to be able to call functions that is injected by the Metamask extension in window object.

@davidliudev davidliudev added the Enhancement New feature or request label Nov 22, 2022
@dilippitchika
Copy link
Contributor

Hey @davidliudev can you add a few documentation links for us to understand how these functionalities are dependent on window objects?

@davidliudev
Copy link
Author

davidliudev commented Nov 22, 2022

@davidliudev
Copy link
Author

davidliudev commented Nov 22, 2022

Note that not only Metamask injects the ethereum this way, but also other wallets as well.
This is currently already drafted here as the standard
https://eips.ethereum.org/EIPS/eip-1193

And we assume many Web3 project and startups will benefit from Appsmith if we could do these Web3 operations easily.
Currently we have to write our own tools via traditional FE development which is slow and tedious

@davidliudev davidliudev changed the title [Feature]: Either provide an option to expose window object or support Web3 functionalities [Feature]: Either provide an option to expose window object or support Web3 functionalities directly as a feature Nov 22, 2022
@cripsisxyz
Copy link

cripsisxyz commented Dec 1, 2022

+1 , I'm in love with appsmith, but my use case is also working with web3 wallets. This time with a Chia Wallet that work exactly in the same way:
image

I link another request in which access to the window object had already been requested: #9978

appsmith would be perfect with this functionality

@Nikhil-Nandagopal
Copy link
Contributor

@davidliudev would an option to simply whitelist the functions you would like to inject solve this problem?

@Nikhil-Nandagopal Nikhil-Nandagopal added the JS Evaluation Issues related to JS evaluation on the platform label Dec 10, 2022
@github-actions github-actions bot added the Javascript Product Issues related to users writing javascript in appsmith label Dec 10, 2022
@cripsisxyz
Copy link

Answering for my use case, I think is a good approach to have the ability to choose which window objects to interact with to keep others safe

@davidliudev
Copy link
Author

davidliudev commented Dec 13, 2022

Yes. That should work for my usecase. Better to make it configurable on which function to whitelist as there might be smaller differences depending on the wallet implementation

@roo-oliv
Copy link

roo-oliv commented Jan 2, 2023

Hi there! Any news on this issue? I really need this whitelist feature.

@bharath31
Copy link

@allrod5 we're working on a POC to allow whitelisting of window objects. I can share more updates by the end of next week.

@filipesmedeiros
Copy link

filipesmedeiros commented Jan 6, 2023

Hey! Dropping by just to let you know that we're investigating using Appsmith for internal tooling and we also hit this barrier. We have no way of accessing Metamask since it's hidden by Appsmith. We'd love to do it, since otherwise I have found very few drawbacks with the app <3

@bharath31
Copy link

bharath31 commented Jan 17, 2023

Update: Our POC to expose the window object is successful and here's a deploy preview- https://ce-21160.dp.appsmith.com/

Please take the deploy preview out for a spin and share your feedback. This will help us fine-tune the product experience.

Note:

  • You can install any compatible web3 JS library by using the Library section on the left pane (eg: Metamask- https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/cdn/metamask-sdk.js)
  • Please note that autocomplete results will not show up for the window object
  • Logging window objects on the console might not work as expected
  • Please use the following credentials to sign in: Email: web3demo@appsmith.com Password: web3demo@appsmith
  • Please create a new workspace to make sure all your testing is sandboxed

@filipesmedeiros
Copy link

@bharath31 I can't login with Google on that preview, says the redirect URL is mismatching?

@cripsisxyz
Copy link

@bharath31 same problem than @filipesmedeiros, cannot directly signup or login with google SSO

@filipesmedeiros
Copy link

Ah and trying to sign up with email/pass gives a Captcha error for some reason ahah

@bharath31
Copy link

@filipesmedeiros @cripsisxyz added sign-in instructions to my previous comment. Please use web3demo@appsmith.com web3demo@appsmith

@cripsisxyz
Copy link

Done basic tests:

  • Connect Wallet (Chia Goby Wallet)
  • Read Wallet Metadata
  • Transfer an amount of XCH to another wallet

I'll be playing a while longer to test more advanced features.

image

It works like a charm!
So there is no concept of whitelist? Can all window objects be accessed?

Thank you for the effort appsmith team <3

@bharath31
Copy link

@cripsisxyz thanks for the feedback! The ability to whitelist window objects will be available on the main release.

@filipesmedeiros
Copy link

I see an apparent bug. When trying to do the basic "connect to Metamask flow" (window.ethereum.request({ method: 'eth_requestAccounts' })), I get this error: Error occurred while evaluating trigger onClick, SyntaxError: "undefined" is not valid JSON.

Screenshot 2023-01-20 at 10 34 51

@bharath31
Copy link

@filipesmedeiros could you share a link to your app? I was able to connect to my Metamask wallet using the following code snippet:

myFun1: () => {
	const MMSDK = new MetaMaskSDK()
	const ethereum = MMSDK.getProvider()
	let accounts = ethereum.request({method: 'eth_requestAccounts'})
}

Loom demo: https://www.loom.com/share/8ab0808633364b4a9a6a283bbe715c6e

@filipesmedeiros
Copy link

Ok, I think it was an error on my side, thanks!

@cripsisxyz
Copy link

@bharath31 it seems this feature is not working in https://release.app.appsmith.com/ . Do we know when this functionality will be merged?

@bharath31
Copy link

@cripsisxyz this feature is still on our backlog as we are finalizing the product specs. I'd like to get your thoughts on the whitelisting scope:

Would you prefer whitelisting window objects at an app level or at a workspace level?

cc: @filipesmedeiros @allrod5 @davidliudev

@cripsisxyz
Copy link

@bharath31 In my opinion at app level to don't loose the connection with wallet across the diferrent views on the app, ty

@roo-oliv
Copy link

App level seems more flexible to me. I'm not aware of other implications but I understand that it would be better if each developer can whitelist the window object for their app rather than having the workspace manager to whitelist it or not and the only option being to whitelist it to all the apps in the workspace or none.

@5hanth
Copy link

5hanth commented Feb 26, 2023

hope this whitelist option also allows Nostr to work. Are we expecting a release preview with a concluded spec anytime soon? I can help test the preview with these web3 libs.

@filipesmedeiros
Copy link

@bharath31 I'd say page makes more sense for us also!

@cripsisxyz
Copy link

hello, any update for this? thank you

@bharath31
Copy link

hello, any update for this? thank you

@cripsisxyz We've commenced working on this after a brief pause. I'll be able to share release timelines by the first week of August.

here's the link to the new DP we're testing- https://appsmith-1ajnxvy1d-get-appsmith.vercel.app/

@cripsisxyz
Copy link

hello, any update for this? thank you

@bharath31
Copy link

@cripsisxyz unfortunately, we hit some roadblocks with the production implementation and had to pause our efforts. You can fork our deploy preview branch to use window operations for apps that need to access the window object.

@cripsisxyz
Copy link

hello @bharath31, Do you have any instructions to build docker on that poc/window-access branch? I have tried many ways since my fork but I have not succeeded. Thank youu

@bharath31
Copy link

hello @bharath31, Do you have any instructions to build docker on that poc/window-access branch? I have tried many ways since my fork but I have not succeeded. Thank youu

tagging @arunvjn from our team to help you with this

@cripsisxyz
Copy link

hello @arunvjn Can you give me some advice? tyy

@arunvjn
Copy link
Contributor

arunvjn commented Oct 12, 2023

@cripsisxyz Can you try forking the changes from this PR ?

@cripsisxyz
Copy link

cripsisxyz commented Oct 13, 2023

I haven't achieved it because the process after forking the repository is not clear to me. Once forked, do I have to trigger the 'Build Deploy Preview' action? Or should I create a release and initiate the Docker build? Or simply 'Test, build, and push Docker Image'? @arunvjn ty for the efforts <3

These are my attempts: https://github.com/cripsisxyz/appsmith/actions

@cripsisxyz
Copy link

hello! any prevision of when this would be released? :) ty

@dorinburcea
Copy link

hello! any prevision of when this would be released? :) ty

Hello, tried even latest release but seems does not support the use of window object

@Nikhil-Nandagopal Nikhil-Nandagopal added the Query & JS Pod Issues related to the query & JS Pod label Aug 5, 2024
@z-one
Copy link

z-one commented Aug 10, 2024

come on!The main release does not support the window object! some window PC deploy can not access either!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Enhancement New feature or request Javascript Product Issues related to users writing javascript in appsmith JS Evaluation Issues related to JS evaluation on the platform Query & JS Pod Issues related to the query & JS Pod
Projects
None yet
Development

No branches or pull requests