ethvault
Library for host
Hello there,
I came here because I need a way to pass a web3 wallet through an iframe. I really liked what you did here, but you only answered one part of my problem here, i.e the guest dapp.
Your host app (ethvault) have specific mechanics for managing wallet actions. I need to be able to pass a generic web3 wallet from host.
Could you help me figuring out how I can implement the hosting counterparty of this package ? Something like this https://github.com/ethvault/site/blob/master/src/components/BrowseIFrameComponent.tsx But where we just pass our web3 provider.
The host's work is relatively simple since it just uses the ethereum specification json rpc over the wire (postMessage in this case) so you just forward that call to whatever provider you're using, e.g. via fetch. In https://github.com/ethvault/site/blob/master/src/actions/ethereum-provider-actions.ts#L458 you can see how messages are handled by the parent window
Yes, it was pretty straightforward to integrate a web3wallet in the host, here my code:
private forwardWeb3Message(rawmessage: string, callback: any) {
const message = JSON.parse(JSON.stringify(rawmessage));
this.web3Provider.sendAsync(message, callback);
}
private listenWeb3Messages() {
const appOrigin = new UrlParse(this.appUrl).origin;
const web3MessageListener = async (e: any) => {
if (e.data && e.data.jsonrpc === '2.0') {
this.forwardWeb3Message(e.data, (error: any, result: any) => {
if(this.iframeElement!.contentWindow) {
if(error) {
this.iframeElement!.contentWindow.postMessage({
...result,
error,
},
appOrigin
);
} else {
this.iframeElement!.contentWindow.postMessage(
result,
appOrigin
);
}
}
});
}
};
window.addEventListener('message', web3MessageListener);
}
I think it could be a great idea to add such example of hosting application in this guide.
I second this. An official example of the parent frame would be great.
