三

Sorosan

Build your Soroban Web3 app in JavaScript or Typescript!

Web3 made easy

Documentation

Your go-to resource for integrating our Soroban and Stellar into your applications. Access all available methods and instructions for a seamless development experience.

Learn more

React

Available as a React Component for easy integration into your React application. Simply import the SorosanProvider and useSorosanSDK()

Learn more

Tutorial

View the sample create-sorosan-app to see how to integrate Sorosan into your application.

Learn more

Getting Started

Javascript

npm install @sorosan-sdk/core

React

npm install @sorosan-sdk/react

Set Up SoroSan SDK

Get the SDK for React and start building your app.

// Root.tsx, Layout.tsx, or any component
import { SorosanProvider } from '@sorosan-sdk/react'

export default function Component() {
    const { sdk } = useSorosan();

    return (
        <SorosanProvider>
            {children}
        </SorosanProvider>
    )
}
Try Out

See code samples to of gas calculation and token information

// For Javascript
import { SorosanSDK } from '@sorosan-sdk/core';
const sdk = new SorosanSDK();

// For React (hook)
import { useSorosanSDK } from '@sorosan-sdk/react';
const { sdk } = useSorosanSDK();

// Main script
let estimatedGas: number = 0;

// Use sdk to convert contract type, i.e CQJ......
const contractHash = "32d6700......c71b5b5";
const contractAddress = await sdk
    .util
    .toContractAddress(contractHash);

// Use sdk to convert native TS/JS type to ScVal
const args = [
    sdk.nativeToScVal("GCZIJ6I......E274SZFILR76", "address"),
    sdk.nativeToScVal(100, "i128"),
];

// Use sdk to estimate gas
const estimatedGas = await sdk
    .estimateGas(
        contractAddress,
        "mint",
        args
    )

// Use sdk to convert unit
const gasBigNumber = sdk.toXLM(parseInt(estimatedGas));
console.log(gasBigNumber.toNumber());

Estimated Gas: XLM

Token Name:

Token Symbol: 

// Component.tsx
import { useSorosanSDK } from '@sorosan-sdk/react';

export const Component = () => {
    const { sdk } = useSorosanSDK();
    const [contract, setContract] = useState<string>("");

    const handleTokenInfo = async () => {
        const name: string = await sdk.token.name(contract);
        const symbol: string = await sdk.token.symbol(contract);
    
        console.log(name, symbol);
    }

    return (
        <>
            <Input onChange={(e) => setContract(e.target.value)} />
            <Button disabled={!sdk.util.isContractAddress(contract)}
                onClick={handleTokenInfo}>
                Try it out
            </Button>
        </>
    )
}