Skip to main content

Getting Started

Installation​

To install the OKcontract SDK, run the following command:

npm i --save @okcontract/sdk-react

Initialization​

Initialize the SDK in your project by importing OKContract, OKInstance and OKInteraction into your app.

import { OKContract, OKInstance, OKInteraction } from "@okcontract/sdk-react";

Create Smart Contract Interaction​

To create a smart contract interaction, head to OKcontract Interactions Hub. You can browse smart contracts, view their ABIs, and choose methods and parameters to create your interactions on the hub. For testing purposes, you can use one of the existing interactions.

Use Interactions​

Declare interactionID and pass it as a parameter of OKInteraction.

const interactionID = "AbX2IbtBDbgJdkAXucGu";
...
<OKContract>
    <OKInstance>
        <OKInteraction id={interactionID}>
            <App />
        </OKInteraction>
    </OKInstance>
</OKContract>

Methods & Properties​

The SDK comes with lots of methods and properties. For example, you can use btnLabel in the button component:

const buttonLabel = useCell(current?.btnLabel, "Send Transaction");
...
<button
  onClick={() => (chainOK ? current?.sendTX() : current?.switchChain())}
  type="button"
  disabled={
    !current || !canSendTX || isSending || receipt !== undefined
  }
>
  {chain && !chainOK
    ? `Switch to ${chain?.name}`
    : isSending
      ? "Please wait..."
      : buttonLabel}
</button>

Reference​

The exhaustive list of methods and properties can be found here: reference.

Customization​

The OKcontract Hub allows additional customization of interactions:

  • Add a title and information text
  • Set allowances, pre-conditions, and slippage
  • Customize the action button text, and more.

Demo​

See the demo app to learn how to get started with basic features:

  • Wallet connection
  • Interaction (Uniswap v3)
  • Information display
  • Waiting for block mining