@axie-taxi/ethers-js

@axie-taxi/ethers-js

What is this?

These are the axie infinity contracts (slp, axies) that are bound to the AxieTaxiProvider and allow you to make write or read requests to the chain. They are made available to you through the useAxieTaxi hook.

Installation and usage

import { AxieTaxi } from "@axie-taxi/core";
import { instantiateContracts } from "@axie-taxi/ethers-js";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";

ReactDOM.render(
  <React.StrictMode>
    <AxieTaxi apiKey={"testAPIKey"} contracts={instantiateContracts}>
      <App />
    </AxieTaxi>
  </React.StrictMode>,
  document.getElementById("root")
);

In the app

export default function App() {
  const {
    account,
    connect,
    deactivate,
    linkSession,
    library,
    sessionKey,
    contracts,
    auth,
  } = useAxieTaxi<Contracts>();

  const axieContract = contracts?.axieContract;
  const [ownedAxies, setOwnedAxies] = useState<BigNumber>(BigNumber.from(0));

  const getOwnedAxies = useCallback(async () => {
    if (!account) {
      return BigNumber.from(0);
    } else if (!axieContract) {
      return BigNumber.from(0);
    }
    const owned = await axieContract.balanceOf(account);
    if (owned) {
      return owned;
    } else {
      return BigNumber.from(0);
    }
  }, [account, axieContract]);

  useEffect(() => {
    (async () => {
        setOwnedAxies(await getOwnedAxies());
    })();
  }, [account, axieContract, getOwnedAxies]);

  return <div>{ownedAxies.toString()}</div>;
}