@soroban-react

@soroban-react is a simple, powerful framework for building modern Soroban dApps using React.

Check the technical docs in https://soroban-react.paltalabs.io/

Made by ❤️ by the PaltaLabs 🥑 team.

Packages

Package	Version
@soroban-react/chains
@soroban-react/connect-button
@soroban-react/contracts
@soroban-react/core
@soroban-react/freighter
@soroban-react/types
@soroban-react/utils
@soroban-react/wallet-data
@soroban-react/events

Introduction

@soroban-react is a simple, powerful framework for building modern Soroban dApps using React. Its marquee features are:

• Full support for Freighter

• A dev-friendly context containing the current account and chain, and more, available globally throughout your dApp via a React Context.

• The ability to write custom, fully featured Connectors that manage every aspect of your dApp's connectivity with the Soroban blockchain and user accounts.

Usage:

See the official gitbook: https://soroban-react.gitbook.io/index/ You can also contribute to the Gitbook by editing the docs folder in this repo

Install:

First open the node container, this will help all devs to build the project with the same environment: bash run.sh Install all sub-packages with just yarn

Run tests

Currently tests are only working when installing with npm i. Why? Currently tests are supporting the chains, core, events & contracts packages

rm -R node_modules
npm i
npm run test
Copy

Format Code with Prettier

To format the code using Prettier, you can run the following script:

yarn prettier-format
Copy

This will

• Automatically search for all the TypeScript (.ts) and TypeScript JSX (.tsx) files under the packages folder and apply the formatting rules specified in the Prettier configuration .prettierc.
• Make sure to run this script before committing your changes to ensure consistent code formatting across the project.

Generate Documentation

To generate the documentation for @soroban-react, run the following command:

yarn doc
Copy

This will

• The command will use Typedoc to analyze the .tsx files within the packages directory and generate Markdown documentation.
• The generated documentation will be available in the docs directory as a README.md file.
• Make sure to run this command whenever there are code changes or new packages added to keep the documentation up to date.

Build and publish using lerna

First, be sure to be logged in with an authorized npmjs account for publishing, you can verify this with

npm whoami
Copy

If you are not logged in you have to login before continuing, using

npm login
Copy

Then, commit your changes with conventional commits with

commit -m "feat(SUB_PACKAGE_NAME): change"
Copy

And finally

yarn build
yarn lerna-publish
Copy

This will

• build the three projects in the right order
• determine the current version of the packages
• detect which packages have changed since the last publishing & then update its version in package.json accordingly
• create a commit of the changed package.json files, tag the commit and push the tag & commit to the remote
• publish the packages to NPM
• add commit changes in CHANGELOG

If you forgot to login and lerna-publish stopped early, the risk is that it will consider that packages are published even if they are not really and not be able to finish to publish them. If this is the case, discard the possible uncommitted changes made by lerna-publish and run

yarn run lerna publish --no-private --conventional-commits from-git
Copy

This should save it.

Upgrade in your project:

yarn upgrade --latest --patern @soroban-react
Copy

Implementations

Projects using @soroban-react include:

• Stellar's Soroban Example Dapp
• @soroban-react example CRA
• Pet Adopt Soroban

Open a PR to add your project to the list! If you're interested in contributing .

Analize, test and approve a PR

git remote add REMOTE_USERNAME http://github.com/REMOTE_USERNAME/soroban-react.git
git checkout -b REMOTE_USERNAME-name_of_pull_request main
git pull REMOTE_USERNAME-name_of_pull_request pull_request_branch

Copy

Step 2: Merge the changes and update on GitHub.

git checkout main
git merge --no-ff branch_name
git push origin main
Copy

Publish one version for all

Sometimes you want all the packages to carry the same version.

yarn exec lerna version --force-publish

yarn exec lerna publish from-package

Copy

Thanks

Library created based on the code written by https://github.com/paulbellamy.