5ire Wallet Extension - Generic Web3 Injection

Overview

This guide will show you how to use the 5ireChain wallet extension to interact with your decentralized application (dApp) that is deployed on 5ireChain - both the native and EVM chains.

Usage 1: Native chain dApp interaction (WASM-based)

The 5ire Wallet extension provides an injected provider to every dApp running on Chrome and Mozilla Firefox.

Steps to connect your dApp with 5ire Wallet Extension:

1. The first step is to install the latest version of the 5ire Wallet extension from the Chrome Store.

2. Check for window.fire object, it will be available in your application context.

3. Call window.fire.connect() method, which is promise based and returns the object with the following values:

• EVM Address: 0xB231a3CFd95ACDDDC92d8c60c405E66A3575d5cc
• Native Address: 5FUv2eCn2VG6tG4WGptP644kHmjWFXXUe9Rnsfv8ss426Y9Z

4. You are now successfully connected to the 5ire Wallet extension.

5. To verify the connection, cross-check the radio icon on the top bar of the extension - the green colour indicates Connected status.

Events

You can subscribe to the following events after connecting the 5ire Wallet extension.

window.fire.on(EVENT_NAME, CALLBACK_FUNCTION);

1. accountChanged

• This event triggers when a user tries to change an account and create a new account in wallet extension, and provides the latest address to the connected dApp.

2. networkChanged

• This event provides the current selected RPC endpoint (e.g. Testnet, Mainnet)

3. connect

• This event is triggered when the user is successfully connected to the 5ire Wallet extension.

4. disconnect

• This event is triggered when the user is successfully disconnected from the 5ire Wallet extension.

Signing Method

The 5ire Wallet extension provides a native signer, which works with every polka.js library or SDK.

const { HttpProvider, WsProvider } = require("@polkadot/rpc-provider");
const { ApiPromise } = require("@polkadot/api");
const network='https://rpc-testnet.5ire.network';
const api = await ApiPromise.create({ provider:  new HttpProvider(network) });

api.tx.balances
  .transfer('5C5555yEXUcmEJ5kkcCMvdZjUo7NGJiQJMS7vZXEeoMhj3VQ', 123456)
  .signAndSend(SENDER, { signer: window.fire }, (status) => { ... });

• Sign Payload

const signPayload = window?.fire?.signPayload;

if (!!signPayload) {
   const { signature } = await signPayload({
       address: account.address,
       data: stringToHex('message to sign'),
       type: 'bytes'
   });
}

• signRaw

const signRaw = window?.fire?.signRaw;

if (!!signRaw) {
   const { signature } = await signRaw({
       address: account.address,
       data: stringToHex('message to sign'),
       type: 'bytes'
   });
}

Usage 2: EVM chain dApp interaction (EVM-based)

The 5ire Wallet extension provides an injected provider to every dApp running on Chrome and Mozilla Firefox browser.

Steps to connect your dApp with 5ire Wallet Extension:

1. Check if you have installed the latest version of the 5ire Wallet extension from the Chrome Store.

2. Check for window.fire object, it will be available in your application context.

3. Call window.fire.request({method:”eth_requestAccounts”}) method, which is promise-based and returns an array with the following values:

• EVM Address: 0xB231a3CFd95ACDDDC92d8c60c405E66A3575d5cc

4. You are now successfully connected to the 5ire Wallet extension.

5. To verify the connection, cross-check the radio icon on the top bar of the extension - the green colour indicates “connected” status.

Methods

• window.ethereum.isfire
  • This property is true if the user has the 5ire Wallet Extension installed. You can also use the 5ire provider with the web3 library.
  • Example: const web3 = new Web3(window.fire);

Properties

• window.fire.request(args)

    interface RequestArguments {
    method: string;
    params?: unknown[] | object;
}

window.ethereum.request(args: RequestArguments): Promise<unknown>;

• Use this method to submit RPC API requests to 5ireChain using the 5ire Wallet extension. It returns a promise that resolves to the result of the RPC method call.

• The parameters and return value vary by RPC method. In practice, if a method has parameters, they're almost always of type Array{any}.

• If the request fails, the promise is rejected with an error. The following is an example of using window.fire.request(args) to call eth_sendTransaction:

params: [
  {
    from: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',
    to: '0xd46e8dd67c5d32be8058bb8eb970870f07244567',
    gas: '0x76c0', // 30400
    gasPrice: '0x9184e72a000', // 10000000000000
    value: '0x9184e72a', // 2441406250
    data:
      '0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675',
  },
];

window.fire
  .request({
    method: 'eth_sendTransaction',
    params,
  })
  .then((result) => {
    // The result varies by RPC method.
    // For example, this method returns a transaction hash hexadecimal string upon success.
  })
  .catch((error) => {
    // If the request fails, the Promise rejects with an error.
  });

Events

The 5ire Wallet extension emits events using the Node.js EventEmitter API. The following is an example of listening to the accountChanged event.

caution

Remember to remove event listeners once you have finished listening to them, such as when the component unmounts in React.

function handleAccountsChanged(accounts) {
  // Handle new accounts, or lack thereof.
}

window.fire.on('accountChanged', handleAccountChanged);

// Later

window.fire.removeListener('accountChanged', handleAccountChanged);

The first argument of window.fire.removeListener is the event name, and the second argument is a reference to the function passed to window.fire.on for the event.

1. accountChanged

   window.fire.on('accountChanged', handler: (accounts: object)      => void);

   • The provider emits this event when the return value of the {evmAddress,nativeAddress} RPC method changes. Callers are identified by their URL origin, which means that all sites with the same origin share the same permissions.

2. connect

   interface ConnectInfo {
       chainId: string;
       }
   
   window.fire.on('connect', handler: (connectInfo: ConnectInfo) => void);

   • The provider emits this event when it's first able to submit RPC requests to a chain.

3. disconnect

   window.fire.on('disconnect', handler: (error: ProviderRpcError) => void);

   • The provider emits this event if it becomes unable to submit RPC requests to a chain. In general, this only happens due to network connectivity issues or some unforeseen error.

   • When the provider emits this event, it doesn't accept new requests until the connection to the chain is re-established, which requires reloading the page.