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

[davidliudev]

Is there an existing issue for this?

• [X] 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.

[dilippitchika]

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

[davidliudev]

Hi @dilippitchika here is the link to Metamask docs:

https://docs.metamask.io/guide/getting-started.html#basic-considerations

Details can be found here: https://docs.metamask.io/guide/ethereum-provider.html#table-of-contents

[davidliudev]

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

[cripsisxyz]

+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:

I link another request in which access to the window object had already been requested: https://github.com/appsmithorg/appsmith/issues/9978

appsmith would be perfect with this functionality

[Nikhil-Nandagopal]

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

[cripsisxyz]

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]

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]

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

[bharath31]

@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]

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]

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: [email protected] Password: web3demo@appsmith
• Please create a new workspace to make sure all your testing is sandboxed

[filipesmedeiros]

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

[cripsisxyz]

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

[filipesmedeiros]

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

[bharath31]

@filipesmedeiros @cripsisxyz added sign-in instructions to my previous comment. Please use [email protected] web3demo@appsmith

[cripsisxyz]

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.

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]

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

[filipesmedeiros]

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.

[bharath31]

@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]

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

[cripsisxyz]

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

[bharath31]

@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]

@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]

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]

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]

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

[cripsisxyz]

hello, any update for this? thank you

[bharath31]

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]

hello, any update for this? thank you

[bharath31]

@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.