Code Monkey home page Code Monkey logo

soroban-react's Introduction

@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 npm version
@soroban-react/connect-button npm version
@soroban-react/contracts npm version
@soroban-react/core npm version
@soroban-react/freighter npm version
@soroban-react/types npm version
@soroban-react/utils npm version
@soroban-react/wallet-data npm version
@soroban-react/events npm version

you can set the default rpc with:

  <SorobanReactProvider
    chains={chains}
    appName={'Soroswap'}
    connectors={connectors}
    activeChain={{
      ...activeChain,
      sorobanRpcUrl:
        'https://testnet.stellar.validationcloud.io/v1/Mewk7YPYiUy3wAlDNlQsIhwxbdumICRYrz2tXS2vOck',
    }}
  >
    {children}
  </SorobanReactProvider>

or if you are not sending an default activeChain:

   <SorobanReactProvider
      chains={chains}
      appName={'Soroswap'}
      connectors={connectors}
      server={fromURLToServer('https://testnet.stellar.validationcloud.io/v1/Mewk7YPYiUy3wAlDNlQsIhwxbdumICRYrz2tXS2vOck')}
    >
      {children}
    </SorobanReactProvider>

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

Format Code with Prettier

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

yarn prettier-format

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

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

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

npm login

Then, commit your changes with conventional commits with

commit -m "feat(SUB_PACKAGE_NAME): change"

And finally

yarn build
yarn lerna-publish

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

This should save it.

Upgrade in your project:

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

Implementations

Projects using @soroban-react include:

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

Step 2: Merge the changes and update on GitHub.

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

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

Thanks

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

soroban-react's People

Contributors

esteblock avatar benjaminsalon avatar mauroepce avatar paulbellamy avatar joaquinsoza avatar abstract829 avatar rdevperu avatar chopan123 avatar sreuland avatar sisuresh avatar leighmcculloch avatar tamirms avatar lucasmagnus avatar willemneal avatar dependabot[bot] avatar stellar-terraform avatar tsachiherman avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.