Skip to main content

Getting Started

Install​

npx i --save @kiroboio/web3-react-native-safe-transfer
# or
yarn add @kiroboio/web3-react-native-safe-transfer

Context​

Kirobo Provider​

KiroboProvider wrap all children with AccountContext and implement all actions related to web3 like deposit ,retrieve, collect, swap transaction after invoking appropriate action from AccountProvider

Use Account​

Account Store Interface

To use account store wrap application components with KiroboProvider context

KiroboProvider Application Wrapper

import { KiroboProvider } from "./kirobo";
import { Connect } from "./Connect";
import { INFURA_KEY, API_KEY, API_SECRET } from "react-native-dotenv";

export const App = () => {
  return (
    <KiroboProvider
      infuraKey={INFURA_KEY}
      apiKey={API_KEY}
      apiSecret={API_SECRET}
    >
      <Connect />
    </KiroboProvider>
  );
};

Account store use mobx-state-tree lib for reactive state management . To re-render react component on account state change use observer

Each observer declaration will enable the React component to only re-render if any of it's observed data changes.

Connect with metamask

export const App = observer(() => {
  const { connect } = useAccount();

  const handleLogin = ({ chainId, privateKey }) => {
    connect.run({ chainId, key: privateKey });
  };

  return <Wallet onLogin={handleLogin} />;
});

Account Store States

import React from "react";
import { Wallet } from "./Wallet";
import {
  useAccount,
  observer,
} from "@kiroboio/web3-react-native-safe-transfer";

export const Wallet = observer(() => {
  const { address, balance } = useAccount();

  return (
    <div className="wallet">
      address: {address}
      balance: {balance}
    </div>
  );
});

Account Store States & Deposit Action

import React from "react";
import { Button } from "./Button";
import {
  useAccount,
  observer,
  Connectors,
  currencyValueToWei,
} from "@kiroboio/web3-react-native-safe-transfer";

export const DepositButton = observer(() => {
  const { address, deposit, currency } = useAccount();

  const handleDeposit = ({ to, value, passcode, message }: DepositParams) => {
    deposit.run({
      to,
      value: currencyValueToWei(value, currency.decimals),
      passcode,
      message,
    });
  };

  return <Button title="Send" onClick={handleDeposit} />;
});

Main concepts​

State​

Account States

Get Safe Transfer current state with useAccount hook

const {
    address,
    balance,
  } = useAccount()

Methods​

Account Methods

const {
    address,
    deposit,
    currency,
} = useAccount()
  
const setDeposit = ({
        to,
        value,
        passcode,
        message,
    }: DepositParams) => {
    
    deposit({
        from: address,
        to,
        value: currencyValueToWei(value, currency.decimals),
        passcode,
        message,
    })
}

Commands​

Account Commands Interface

Views​

mobx-state-tree views concept

Account Views Interface

Lists​

Account Lists Interface

Get all Safe Transfers related to current address (limit 40)

const { transfers } = useAccount()

Get next limit transfers

const limit = 100

transfers.fetch(limit)

Get list values

transfers.list

Get outgoing, incoming and swap Transfers

const { incoming, outgoing, swaps } = useAccount()

Observer​

Use observer for enabling the React component to re-render if any of it's observed data changes.

import { observer } from '@kiroboio/web3-react-native-safe-transfer'

export const Address = observer(() => {
    const {
        address,
    } = useAccount()
    
    return address
})

Transactions​

Deposit​

Deposit

To create a retrievable transfer that can be collected use:

const { deposit } = useAccount()

import { useAccount, currencyValueToWei } from '@kiroboio/web3-react-native-safe-transfer

const {
    address,
    deposit,
    currency,
} = useAccount()

const setDeposit = ({
        to,
        value,
        passcode,
        message,
    }: DepositParams) => {
    
    deposit.set({
        from: address,
        to,
        value: currencyValueToWei(value, currency.decimals),
        passcode,
        message,
    })
}
Status​
const {
    deposit,
  } = useAccount()
deposit.is

Retrieve​

Retrieve

To retrieve transfer use:

const { retrieve } = useAccount()

import { useAccount } from '@kiroboio/web3-react-native-safe-transfer

const {
    retrieve,
} = useAccount()

const { transfer } = props;

const setCollect = ({
        id,
    }: RetrieveParams) => {
    
   retrieve({ id: transfer.id })
}
Status​
const {
    retrieve,
  } = useAccount()
retrieve.is

Collect​

Collect

To collect transfer use:

const { collect } = useAccount()

import { useAccount } from '@kiroboio/web3-react-native-safe-transfer'

const {
    collect,
} = useAccount()

const { transfer } = props;

const setCollect = ({
        id,
        passcode,
    }: CollectParams) => {
    
   collect({ id: transfer.id, passcode })
}
Status​
const {
    collect,
  } = useAccount()
collect.is

Utils

Web3 Methods​

Helpers for convert & format currency values