Skip to main content

Add Wallet Network

React Library​

In this example, the 'Add Network' function is used to add a new network to the wallet.

1. Generate Project​

Create the project in the terminal as follows.

npx create-react-app locuschain-example-addnetwork --template typescript

2. Edit App.tsx​

Update the App.tsx file with the following content.

// @ts-nocheck
import React, { useEffect, useState } from 'react';

function App() {
  const [result, setResult] = useState<boolean>();

  const addNetwork = () => {
    if (!window.locus) {
      alert('Locus wallet is not installed on this device.');
      return;
    }

    const network = {
      name: 'localhost1',
      rpcUrl: 'http://localhost:9595',
      currencySymbol: 'LOCUS',
      explorerUrl: 'http://gamechain.locuschain.com:8003/#/accounts/${addr}',      
    }

    const result = window.locus.request('addNetwork', network).catch((err) => {
      console.error(err);
    });
    setResult(result)
  }

  return <>
    <button onClick={addNetwork}>Add network to wallet</button>
    <div>result: {`${result}`}</div>
  </>
}

export default App;

Execute the 'addNetwork' function of the wallet with the network information as a parameter. The success of the network addition operation is returned as a 'boolean'.

info

You can view the list of available functions here

3. Execute​

Run the project in the terminal as follows.

npm run start