Skip to main content

SDK Usage

This is a software development kit to integrate Decentralized Applications with W3Smart Wallet.

Preview​

You can test the sdk on: https://beta-w3w.smartosc.com/marketplace/

The SDK now support

Usage​

Environment variables:​

Env for staging

Env for production

  • W3Smart Wallet Domain:
  • API_URL:

Install smart-wallet-sdk package to your react app​

  yarn add smart-wallet-sdk
  # OR
  npm install smart-wallet-sdk

Add smart-wallet-sdk to your Dapp​

import {SmartWalletConnector} from "smart-wallet-sdk";

const [smartWallet, smartWalletHooks] =
  initializeConnector<SmartWalletConnector>((actions) => {
    return new SmartWalletConnector({
      actions, // from Web3React
      options: {debug: true}, // optional
      domainWallet: DOMAIN_WALLET || "https://beta-w3w.smartosc.com", // domain of W3Smart Wallet
      rpcUrls: {
        80001: "https://mumbai-url",
        97: "https://bsc-testet-url",
      },
    });
  });

// auto connect
await smartWallet.connectEagerly();

// connect on click
await smartWallet.activate();

// disconnect
await smartWallet.deactivate();

If you are developing locally, you can set options: { debug: true } to see messages sent between sites. To get more understand about communication method between W3Smart Wallet and the SDK on your Dapp, see postMessage - iframe to know.

The SDK is using Web3-react v8-beta to integrate, therefore you should follow some examples to understand how to use Web3-react to integrate W3Smart Wallet to your Dapp:

Due to using Web3-react, you can use useWeb3React hook to access all information relating to web3 in your react app:

import {
  useWeb3React,
  Web3ReactHooks,
  Web3ReactProvider,
} from "@web3-react/core";

const connectors: [Connector, Web3ReactHooks][] = [
  [smartWallet, smartWalletHooks],
];

const ConnectComponent = () => {
  const web3React = useWeb3React();

  return (
    <div>
      {web3React.isActive
        ? `Connected ${web3React.account} on chain ${web3React.chainId}`
        : "No connect"}
    </div>
  );
};

const App = () => {
  return (
    <Web3ReactProvider connectors={connectors}>
      <ConnectComponent />
    </Web3ReactProvider>
  );
};

Get balance​

Balance of wallet can be obtained by calling .getBalance() from web3React.provider.

import {ethers} from "ethers";

const getBalance = async () => {
  if (!web3React.isActive || !web3React.provider || !web3React.account) return;

  try {
    const bal = await web3React.provider.getBalance(
      web3React.account,
      undefined
    );
    const balance = ethers.utils.formatEther(bal);
  } catch (error) {
    console.log("GET BALANCE ERROR: ", error);
  }
};

Sign Message​

Sign message could be executed signMessage() by getting signer from web3React.provider.

const signMessage = async (msg: string) => {
  const signer = await web3React.provider?.getSigner();

  try {
    const signedMsg = await signer?.signMessage(msg);
    // signedMsg: 0x.....
  } catch (error) {
    console.log("ERROR SIGN MESSAGE: ", error);
  }
};

Verify Signature​

You can verify signature through our endpoint: /rest/api/v1/signature-validator

const handleVerifyMessage = async () => {
  const res = await axios.post(
    `${VERIFY_SIGN_DOMAIN}/rest/api/v1/signature-validator`,
    {
      message, // string
      signature, // string
      address, // string
    }
  );
  if (res?.data?.isValid) {
    alert("Verify successfully");
    return;
  }

  alert("Verify failed");
};

Sending transaction: native token​

Sending native tokens like BNB, MATIC, ETH, ... you can take it easily by getting signer from web3React.provider.

const sendNativeToken = async () => {
  const toAddress = "0x...";
  const value: "1000000000000000"; // 0.01

  const signer = await web3React.provider?.getSigner();
  try {
    const res = await signer?.sendTransaction({
      from: web3React.account,
      to: toAddress,
      data: "0x",
      value,
    });
    // res.hash = 0x....
  } catch (error) {
    handleTransactionError(error);
  }
};

const handleTransactionError = async (error: any) => {
  if (!(error instanceof Error)) {
    return;
  }

  try {
    const txnData = JSON.parse(error.message);
    if (txnData?.data?.txnId) {
      // Get Tx detail by txnId
    }

    //
    console.log("txnData.error: ", txnData.error);
  } catch (err) {
    console.log("ERROR Transaction error: ", error);
  }
};
when execute a transaction

When you are having at least 1 guardian protecting your wallet and then you execute a transaction from Dapp but you don't stand on the waiting page.

Although your transaction is waiting for approval from your guardians, you still will receive an error.

Like what I did above, the SDK thrown an error with an message which we can parse to object to get the data. From this one, we have txnId to check status of transaction.

Sending transaction: interact with Smart contract​

Sending ERC20, ERC1155 tokens or any action need to interact with a smart contract, you can follow the bellow code example:

import {BigNumber, ethers} from "ethers";
import ABI from "./abi.json";

const onSendToken = async () => {
  const toAddress = "0x...";

  // chainLinkAddress on BSC testnet
  const chainLinkAddress = "0x84b9B910527Ad5C03A9Ca831909E21e236EA7b06";

  const signer = await web3React.provider?.getSigner();
  if (!signer) return;

  try {
    const tokenContract = new ethers.Contract(chainLinkAddress, ABI, signer);
    const transferValue = BigNumber.from(1).mul(
      BigNumber.from(10).pow(BigNumber.from(16))
    ); // 0.01 LINK

    const tx = await tokenContract
      .connect(signer)
      .transfer(toAddress, transferValue.toHexString());
    const successTx = await tx.wait();

    getBalance();
  } catch (error) {
    handleTransactionError(error); // like send a native token
  }
};

In the code above, we use ethers library to interact with the smart contract.

info

Please be careful with version of ethers, we're using ethers:5.7.2, if you are using other version and get an error, you should consider change your ethers version.

Get transaction detail by TxnId​

const getTxnByTxnId = async (txnId: string) => {
  if (web3React?.connector instanceof SmartWalletConnector) {
    try {
      const data = await web3React.connector.provider?.getTxByTxId(txnId);
      if (data?.txStatus === TransactionStatus.SUCCEED) {
        // transaction is executed successfully
      }
    } catch (error) {
      console.log("ERROR get Tx by hash: ", error);
    }
  }
};