Integrating with Plaid’s Wallet Onboard product

At Franklin, we care about offering a seamless web2 and web3 user experience for both employers and workers. Easier said than done. When we launched Franklin in September 2022, we initially released a simple integration using MetaMask’s provider. But web3 companies use tons of different wallet clients, and we were looking for a simple way to guarantee support for all of them.

When we read about Plaid’s Wallet Onboard tool it looked like the perfect solution for us to be able to deftly increase our connectivity by many multiples.

We started by reviewing their documentation in mid December which was very straightforward. Over the holidays we spun up a quick proof of concept in their sandbox environment. Initializing the wallet provider was as easy as getting a token for Plaid’s Link SDK and:

const plaidWeb3 = await Plaid.web3();

const handler = plaidWeb3.createEthereumOnboarding({
  token: '', // Link SDK token from Plaid
  chain: {
    rpcUrl: '', // RPC gateway URL to use for non-wallet methods
    chainId: '0x1', // EVM chain ID in hexadecimal format
  },
  onSuccess: async (provider) => {
    // do something with the provider, like requesting accounts or storing it
    // for future use
    const accounts = await provider.request({ method: 'eth_accounts' });
  },
  onExit: (error, metadata) => {
    // Optional callback for error handling or alerting
  },
});

handler.open();

What we liked about Plaid’s provider was its simplicity. It didn’t try to add a a whole new custom API and instead stuck to following the EIP-1193 specification. If you wanted the extra functionality provided by more mature packages like ethers or web3.js (which we did at times), you could use Plaid’s base provider to initialize a provider for those libraries.

// Taken from Plaid WalletOnboard docs

// Example: Web3.js https://web3js.readthedocs.io/en/v1.8.2/
const web3 = new Web3(provider);
const address = (await web3.eth.getAccounts())[0];
const balance = await web3.eth.getBalance(address);

// Example: Ethers.js https://docs.ethers.io/v6/
const web3Provider = new providers.Web3Provider(provider);
const signer = web3Provider.getSigner();
const address = await signer.getAddress();
const balance = await web3Provider.getBalance(address);

For us, the real value proposition of the product was access to all wallet clients by providing a consistent API through a single provider following EIP-1993.

Overall, Plaid’s Wallet Onboard lived up to the quality they offer in their other core products and APIs, both in terms of documentation and developer experience. Their team was quick to reply to our questions and seemed genuinely interested in how we were applying their tech to our use case. We’re excited about our newfound ability to support a whole new host of wallet clients and look forward to seeing how the Wallet Onboard product develops.