Getting Started With Cargo JS

Search…
Cargo JS
Cargo JS can be used as a module within your app, or can be added directly to the browser using a script tag. 
​View the source on GitHub.
Supported wallets
Cargo JS works with any Ethereum wallet. You can also provider a custom provider to authenticate using third party platforms like Fortmatic. If you have issues please file an issue on github or email [email protected] 
Testing
You can find the test version of Cargo at https://rinkeby.cargo.build. 
ES6
Cargo JS requires you to install [email protected] as a peer dependency. 
1
yarn add [email protected]
Copied!
1
yarn add @cargo-eth/js
Copied!
After installing the required npm packages you can import Cargo JS into your project by doing the following:
1
import { Cargo } from '@cargo-eth/js';
Copied!
Script Tag
When used in the browser Cargo JS will be added to the window and will be available at window.cargoJs . This version of Cargo JS is bundled with [email protected].
1
<script src="https://assets.cargo.build/cargo.7.1.3.js"></script>
2
​
3
<script>
4
  const cargo = new window.cargoJs.Cargo();
5
</script>
Copied!
The Cargo Class
1
new Cargo(options);
Copied!
Use the Cargo class to create a class instance. 
Arguments:
This method takes one argument which is an object with the following keys and values:
Key
Value
network
Optional. String. Valid values: development, production
​
Defaults to development. Development connects to the Rinkeby network and production will connect to the main Ethereum network.
provider
Optional. Provider. You can supply Cargo JS with a custom provider that will be used the support Web3 methods. 
​
Returns:
​An instance of the Cargo class.​
Example:
See below
Initializing and Enabling Cargo
After installing Cargo you will need to create a new instance and initialize it. This will get the required information required for the library to interact with the Cargo smart contracts.Here is an example of initialization:
1
import Cargo from '@cargo-eth/js';
2
​
3
// Create a new instance of the Cargo class
4
const cargo = new Cargo({ network: 'development' });
5
​
6
async function enable() {
7
    // Check if user has a web3 provider available
8
    if (cargo.hasProvider) {
9
        // Enable Cargo
10
        const enabled = await cargo.enable();
11
        
12
        if(enabled) {
13
            // You can now interact directly with the 
14
            // blockchain using the Cargo API
15
        }
16
    }
17
}
18
​
19
enable();
20
​
Copied!
After Cargo JS has been initialized you can call the enable function. If the user is using MetaMask they will be prompted to connect to Cargo. The enable function allows for an opt in authentication flow. MetaMask already supports this. Essentially you need to ask the user to enable their wallet to interact with your application. You can do this when the user takes an action rather than showing a pop up as soon as the user lands on your page.
Events
Cargo JS also provides an event interface if that will better suit your needs.
1
// Event stating that Cargo JS is enabled
2
cargo.on('enabled', () => {});
3
​
4
// Event stating that enabling was rejected. Either an
5
// error was thrown, or the user rejected
6
cargo.on('enable-required', () => {});
7
​
8
// MetaMask supported event. Emitted when accounts change
9
// First argument of callback function is an array of accounts.
10
cargo.on('accounts-changed', (accounts/*: Array<Account>*/) => {});
11
​
12
// Fired if cargo.enable is called without a web3 provider 
13
// available.
14
cargo.on('provider-required', () => {});
15
​
16
​
17
​
Copied!
After enabling Cargo an instance of PollTx will be created. You can use the events on that instance to watch for completed transactions when using the API methods that make transactions on the blockchain.
Interacting with the APIs
After Cargo JS has been enabled you can access the API methods. Methods that do not require MetaMask can be called before enabling Cargo JS. You can learn about all the API methods here.
1
cargo.api.getBeneficiaryBalance(beneficiaryId).then((response) => {
2
    if(!response.err){
3
      // Do something.
4
    }
5
});
Copied!
Cargo GEMs - Previous
Cargo Gem Staking
Next - Cargo JS
Using Cargo With Fortmatic
Last modified 28d ago
Copy link
Contents
Initializing and Enabling Cargo
Events
Interacting with the APIs