SmartPkg

Client to get Smart Contract ABI.

Why use SmartPkg?

We aim to improve developer experience in starting smart contract apps. Some problems we aim to solve:

• Multi-chain smart contract development
• Exploring smart contract ABI
• Decoupling smart contract development from front/back-end development

Installation

npm install smartpkg

Usage

Here is an example of using smartpkg to get ABI.

import { ethers } from "ethers";
import smartpkg from "smartpkg";

const chainId = 1;
const address = "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984";

const abi = await smartpkg.getAbi(chainId, address);

// Use Smart Contract
const provider = new ethers.providers.Web3Provider(window.ethereum);
await provider.send("eth_requestAccounts", []);
const signer = provider.getSigner();
const contract = new ethers.Contract(address, abi, signer);
const symbol = await contract.symbol();
console.log(symbol);

For getting Smart Contract ABI,

const abi = await smartpkg.getAbi(chainId, address);

For directly calling a smart contract (deployed) function without ABI,

const contract = await smartpkg.contract(chainId, address, { signer });
const symbol = await contract.symbol();

For directly calling a smart contract function with ABI only,

const contract = await smartpkg.contract(chainId, address, { abi, signer });
const symbol = await contract.symbol();

SmartPkg Options

| Options | Type | Default | Description | |----------------|--------------------|-----------|------------------------------------| | debug | boolean | true | Debug mode | | signer | Signer or Provider | undefined | Signer or provider from ethers.js | | abi | ABI | undefined | Debug mode | | enableDevtools | boolean | true | Enable devtools or not. Install @smartpkg/devtools | | enableLogging | boolean | true | Enable logging or not. |

SmartPkg devtools

Devtools help improve understanding smart contract function calls in your DApp.

npm install @smartpkg/devtools

In main.tsx, import devtool and add the component.

// main.tsx
import SmartpkgDevtool from '@smartpkg/devtools';

ReactDOM
  .createRoot(document.getElementById('root') as HTMLElement)
  .render(
    <React.StrictMode>
      <App />
      <SmartpkgDevtool />
    </React.StrictMode>
  );

Devtools

Devtools Details