@jadbox/iframe-provider

ethvault/iframe-provider

This is an EIP-1193 compliant Ethereum provider that communicates with a parent iframe using the Ethereum JSON RPC.

Purpose

Use the iframe provider to enable a dApp to communicate with an Ethereum provider in a different context.

This was built to serve the dApps that integrate with Ethvault.

Compatibility

While the protocol is designed for the Ethvault dApp browser, it is meant to be general and work for any iframe based dApp browser.

Contributions are welcome.

Usage

If you want an easy drop-in solution, consider the polyfill package which sets window.web3 and window.ethereum to an iframe provider when the dApp is embedded in an iframe.

Use this package if you want to give the user the option to connect to the iframe provider or another provider.

You can use this provider exactly how you use the MetaMask and other injected Ethereum/web3 providers. It supports both the legacy sendAsync method as well as the newer send method. It also has an enable method for compatibility with MetaMask which sends a JSON RPC with method enable and expects the parent to return a list of accounts in the result.

import { IFrameEthereumProvider } from '@ethvault/iframe-provider';

let ethereum;

function isIframe(): boolean {
  /// Do some logic...
  return true;
}

if (isIframe()) {
  ethereum = new IFrameEthereumProvider();
} else {
  // Use some other provider, e.g. window.ethereum from MetaMask or Infura
  // ...
}

// Anything from https://github.com/ethereum/wiki/wiki/JSON-RPC should be supported
function getNetwork(): Promise<string> {
  return ethereum.send('net_version');
}

You can also use this with the ethers.js library via the Web3Provider.

import { IFrameEthereumProvider } from '@ethvault/iframe-provider';
import { Web3Provider } from 'ethers';

let web3Provider = new Web3Provider(new IFrameEthereumProvider());

There are some options for the construction of the ethereum provider:

import { IFrameEthereumProvider } from '@ethvault/iframe-provider';

new IFrameEthereumProvider({
  // How long to wait for the response, default 1 minute
  timeoutMilliseconds: 60000,
  // The origins with which this provider is allowed to communicate, default '*'
  // See postMessage docs https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
  targetOrigin: 'https://myethvault.com',
});

Local Development

This project was bootstrapped with TSDX.

Below is a list of commands you will probably find useful.

npm start or yarn start

Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

Your library will be rebuilt if you make edits.

npm run build or yarn build

Bundles the package to the dist folder. The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

npm test or yarn test

Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.