OrangeKit React

Overview

Purpose

The React package wraps RainbowKit to provide an alternate or complementary set of wallet connection options that represent supported Bitcoin wallets. It also handles masquerading those wallets as EVM wallets and managing a backing provider for EVM operations while channeling signing operations to the Bitcoin wallet and transaction execution to the backing smart account.

Key Features

• Wallet Management: The React package provides a set of components that allow users to connect their Bitcoin wallets to your dApp. Outside of connection and disconnection, OrangeKit also supports displaying balance, switching chains, and more.
• Interoperability: The React package provides integrations with the popular viem and wagmi libraries.

Publishing npm package

We publish the npm package manually. In the future we want to release and publish npm package using GitHub Actions.

Make sure you have an npm account and you are in the orangekit organization to publish npm package.

Publishing the package from the main branch

To publish OrangeKit React package follow these steps:

1. Checkout to main branch.
2. Make sure the version in the package.json file is correct. The version on the main branch should point to the next version. For example, if the version under latest tag is 1.0.0-beta.10, the version on main branch should be 1.0.0-beta.11.
3. Update version of the @orangekit/sdk dependency to the latest version.
4. Remove dist and node_modules directories.
5. Run pnpm install.
6. Run pnpm build.
7. If you need to log in to npm - run npm adduser
8. Run npm publish --access public and follow the steps in terminal. The new version will be available under latest tag.
9. Create a tag with the latest version number and push it:

git tag -a react/1.0.0-beta.<version> -m "react/1.0.0-beta.<version>"
git push origin --tags

After the successful release bump the beta version in package.json file to one point higher than the one you just released and add -dev.0 suffix to it. Then, set the @orangekit/sdk dependency back to workspace:* and open a PR.

Additional steps in GitHub:

1. Create release notes. Use previous releases as an example. Remember to choose correct tag and paste link to closed issues in this version milestone. Optionally you can also briefly describe what changes were made in this release.
2. Close the current milestone and open a new one in https://github.com/thesis/orangekit/milestones with one version higher than the one you just released. If there are any open issues/PRs in this milestone that did not make it to the current version, just move them to the next milestone.

Publishing the package from the feature branch

To test out the package in the dApp we still have to publish it manually, but with -dev.x suffix added to the version, where x is the next available version (started from 0). This should indicate that such package is not released from the main branch.

1. Checkout to the correct branch related to a given PR

2. Make sure the version in the package.json file is correct. The version on the feature branch should have -dev.x suffix bumped to the next version. For example, if the newest version is 1.0.0-beta.29-dev.0, the version on the branch should be 1.0.0-beta.29-dev.1. If the beta version is already released without dev suffix we should bump the beta version and start from -dev.0 again.

   For example:

   If the newest version is 1.0.0-beta.29-dev.0, the version on the branch should be 1.0.0-beta.29-dev.1.

   If the newest version is 1.0.0-beta.29 the version on the branch should be 1.0.0-beta.30-dev.0

3. Update version of the @orangekit/sdk dependency to the latest version.

4. Remove dist and node_modules directories.

5. Run pnpm install.

6. Run pnpm build.

7. If you need to log in to npm - run npm adduser

8. Run npm publish --access public --tag development and follow the steps in terminal. The new version will be available under development tag.

Note: You don't have to create a tag for dev version.