Until now, however, Ivy was only a developer sandbox that allowed you to create simulated contracts in memory. There was no way to create and send real contracts to the Bitcoin testnet or mainnet. Adding this functionality would have required building a wallet into the playground, as well as figuring out how to submit transactions to the network, and sync with it, which was difficult because the playground only existed as a client-side in-browser application.
The launch of bPanel filled in all these missing pieces, including a wallet, a built-in full or SPV node, tools for submitting and syncing transactions through that node, and the ability to easily run the playground locally rather than from a hosted web app.
What it does
The Ivy bPanel plugin adds two panels to your bPanel—one for drafting and creating Bitcoin smart contracts, and one for unlocking them.
The Lock panel lets you edit and save contract templates, and create new contracts from one of those templates. When you click Lock, it submits a transaction to the network from your wallet (which you can control with the Simple Wallet plugin).
The Unlock panel lets you spend contracts that you've created and published. It allows you to pass in and test parameters to unlock the contract. When you click Unlock, it submits a transaction withdrawing from that contract into your wallet.
How we built it
The process for building the Ivy bPanel plugin involved:
- refactoring the existing Ivy playground to allow it to be included in another application
- taking the logic that created simulated contracts and transactions, and added logic to create real transactions through bPanel's own
- developed and proposed changes to bPanel, including extending its plugin management system, adding optional state persistence, and adding Redux Router
ivy-bitcointo use the post-redesign version of bcoin, to be compatible with the version used in bPanel
Challenges we ran into
Styling the components of the Playground when they were embedded within bPanel was somewhat difficult, and involved a lot of both CSS and Vim jiujitsu.
There was a lot more distance than we expected between getting the plugin working with a full node on simnet, and getting it working with an SPV node on testnet.
Accomplishments that we're proud of
- Publishing the first-ever Ivy smart contract on the Bitcoin testnet.
- Accomplishing a significant refactor and update of the
ivy-bitcoinsource code without breaking it for existing users, and improving the architecture of the Ivy Playground app.
- Styling the plugin's components for useability and clarity, without disturbing the styling or organization of other plugins, and still being mostly consistent with bPanel's organization and style.
- Exposing the plugin's functionality in a way that should allow other plugins to easily make use of Ivy smart contracts.
What we learned
This project required us to learn (and upgrade our projects to) the newest interface for the bcoin project, and let us take advantage of its new modular organization (that, for example, exposes
bcrypto as a separate project).
There are significant pain points involved in refactoring an existing npm package into a plugin for another application. Plugin authors must be intentional about designing for modularity and interoperability. We think the bPanel plugin system encourages plugin designs that promote extensibility, modularity, and proper management of client-side state. These principles are useful not only for good bPanel plugins, but also for any effective npm package.
What's next for Ivy bPanel Plugin
We intend for bPanel to be the preferred method for using Ivy to create real contracts on the Bitcoin testnet (and eventually on the mainnet). We plan to post the package to npm so anyone can easily download and install it, once some of our proposed changes to bPanel have landed.
Most of our plans involve new ways to leverage and interact with other plugins. We plan to modularize some of the components so that other bPanel plugins (such as transaction builders, transaction explorers, or multisig wallets) can provide widgets to create and spend contracts as part of their own business logic.