Smart Wallet Sdk

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

Preview

You can test the sdk on: https://sm-wallet-uat.hn.smartosc.com/marketplace/

The SDK now support

• Web3-react v8
• React app

Usage

Environment variables:

Env for staging

• Smart Wallet Domain: https://sm-wallet-uat.hn.smartosc.com/
• Verify sign uri: https://be-sc-wallet_uat.hn.smartosc.com/rest/api/v1/signature-validator

Env for production

• Smart 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://sm-wallet-uat.hn.smartosc.com", // domain of Smart 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 Smart 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 Smart Wallet to your Dapp:

• smart-wallet-sdk/example
• web3-react/example

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);
  }
};

Note: 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.

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);
    }
  }
};