React interact with ink!

Tech Talk
,
1

I am trying to interact with a simple flipper contract written in rust ink! and deployed in local node in substrate chain. I am running the substrate local node as well.

The code in brief is:

import { web3Enable, web3Accounts } from “@polkadot/extension-dapp”;
import { ApiPromise, WsProvider } from “@polkadot/api”;
import { ContractPromise } from “@polkadot/api-contract”;
import contractAbi from “…/assets/contractAbi.json”;

const CONTRACT_ADDRESS = “…”;

const [modalOpen, setModalOpen] = useState(false);
const [account, setAccount] = useState(null);
const [api, setApi] = useState(null);
const [contract, setContract] = useState(null);

const handleWalletConnect = async (walletType) => {
if (walletType === “polkadot”) {
try {
// Enable the Polkadot extension
const extensions = await web3Enable(“BitCross.fi”);
if (extensions.length === 0) {
setAccount(-1);
setModalOpen(false);
}

  // Retrieve accounts from the Polkadot extension
  const accounts = await web3Accounts();

  if (accounts.length > 0) {
    // Use the first account
    const account = accounts[0];
    setAccount(account.address);
    sessionStorage.setItem("account_address", account.address);
    setModalOpen(false);

    // Initialize Polkadot API and contract
    const wsProvider = new WsProvider("ws://127.0.0.1:9944");
    const api = await ApiPromise.create({ provider: wsProvider });
    const contract = new ContractPromise(
      api,
      contractAbi,
      CONTRACT_ADDRESS
    );

    setApi(api);
    setContract(contract);
  } else {
    setAccount(-1);
    setModalOpen(false);
  }
} catch (error) {
  setAccount(-1);
  setModalOpen(false);
}

}
};

const handleGet = async () => {
if (!contract || !api || !account) return;

try {
const { result, output } = await contract.query.get(account, {});
console.log(result, output);

if (result.isOk) {
  console.log("Get operation result:", output?.toHuman());
} else {
  console.error("Error querying get function:", result.asError);
}

} catch (error) {
console.error(“Get operation failed:”, error);
}
};

When calling the handleGet, I am getting:

Type {registry: TypeRegistry, createdAtHash: undefined, initialU8aLength: 7, isStorageFallback: undefined, __internal__def: {…}, …} null

So output is returning 'null`.

I think I am missing something.

2

Hi @zubayr1,

Interacting with ink! smart contracts using Polkadot.js might be challenging, especially if you’re new to ink!.

From what you describe, it’s a bit hard to see & debug what went wrong, can you host the script somewhere e.g on https://stackblitz.com/, so it’s easier for us to go there and help you check the issue.

Alternatively, I suggest you trying out Dedot, a new JavaScript Client for Polkadot & Substrate which supports fully-typed APIs to interact with ink! contracts. There is an example (e2e test) to deploy & interact with a flipper contract in the source code, so you could go there and check it out.

If you need more help, you can reach out to me directly on Telegram (@realsinzii) or ask your question on Telegram group of Dedot, I’m happy to help you out with the issue.

2 Likes
5

Hi @zubayr1

Unfortunately I can’t help you with this question, but I will suggest you take your technical questions to the StackExchange site:

Thanks!

1 Like