isabella232 / iframe-provider

A web3 ethereum provider implementation that communicates with a another window via postMessage

ledgerhq/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 initially built to serve the dApps that integrate with Ethvault. Ledger forked it to update it and use it for integration of DAPPS in Ledger Live

Compatibility

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

Contributions are welcome.

Usage

import { IFrameEthereumProvider } from '@ledgerhq/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 '@ledgerhq/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 '@ledgerhq/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://my-dapp-browser-exemple.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.