Skip to main content

5. Dapp on Starknet

Estimated Time:
Score:

WTF Starknet 5: Starknet dApp

You will learn how to use get-starknet and starknet-react to build a simple dApp for minting NFTs on Starknet.

You can find a demo here.

get-starknet​

get-starknet provides a JavaScript library that provides a set of APIs for interacting with the Starknet network. Developers can install the get-starknet library using npm, and then use it in their JavaScript code to deploy and manage contracts on the network, as well as call functions and query data from existing contracts. The library provides a set of functions and classes for tasks such as compiling contracts, deploying contracts, and interacting with the network.

1. Install​

To install the get-starknet library, you will need to have Node.js installed on your system, then follow these steps:

To initialize an npm project:

  1. Open a terminal window or command prompt.
  2. Navigate to an empty directory where you want to initialize an npm project.
  3. run the following command: npm init -y

This will start a command-line interface that will guide you through the process of creating a package.json file. You will be prompted to enter various settings for your project, such as its name, version, description, and entry point.

To install get-starknet:

  1. Navigate to the project directory where you want to install the library.
  2. Run the following command to install the get-starknet library:
npm install get-starknet starknet

That's it! You should now be able to use the get-starknet library in your project.

2. Basic Usage​

You can use the built-in UI to connect to any Starknet wallet as fast as possible like this:

import { connect, disconnect } from "get-starknet"

return <button onClick={() => connect()}>Connect wallet</button>

Here's an advanced example of react with get-starknet: 

function App() {
  const [walletName, setWalletName] = useState("")

  function handleConnect(options?: ConnectOptions) {
    return async () => {
      const res = await connect(options)
      console.log(res)
      setWalletName(res?.name || "")
    }
  }

  function handleDisconnect(options?: DisconnectOptions) {
    return async () => {
      await disconnect(options)
      setWalletName("")
    }
  }

  return (
    <div className="App">
      <h1>get-starknet</h1>
      <div className="card">
        <button onClick={handleConnect()}>Default</button>
        <button onClick={handleConnect({ modalMode: "alwaysAsk" })}>
          Always ask
        </button>
        <button onClick={handleConnect({ modalMode: "neverAsk" })}>
          Never ask
        </button>
        <button
          onClick={handleConnect({
            modalMode: "alwaysAsk",
            modalTheme: "dark",
          })}>
          Always ask with dark theme
        </button>
        <button
          onClick={handleConnect({
            modalMode: "alwaysAsk",
            modalTheme: "light",
          })}>
          Always ask with light theme
        </button>
        <button onClick={handleDisconnect()}>Disconnect</button>
        <button onClick={handleDisconnect({ clearLastWallet: true })}>
          Disconnect and reset
        </button>
      </div>
      {walletName && (
        <div>
          <h2>
            Selected Wallet: <pre>{walletName}</pre>
          </h2>
        </div>
      )}
    </div>
  )
}

In contrast to starknet-react, which is a higher-level library that provides a set of React Hooks for working with Starknet, get-starknet is a lower-level library that provides direct access to the Starknet APIs. This makes it a more flexible and customizable solution, but also requires more knowledge of the Starknet platform and its APIs.

get-starknet is a useful library for developers who are familiar with the Starknet platform and want more control over their development process. However, for those who are new to Starknet or want a simpler development experience in React ecosystem, starknet-react may be a better option.

starknet-react​

The starknet-react library includes a set of pre-built hooks for common tasks such as loading contract data, submitting transactions, and managing the user's wallet connection state, which is built on top of the get-starknet library. These hooks abstract away some of the lower-level details of interacting with Starknet, and allow you to focus on building your user interface.

starknet-react provides a set of React Hooks that make it easier to interact with the Starknet network in a React application.

1. Install​

Install starknet-react and its dependencies using the following command: 

npm install @starknet-react/core starknet

2. Usage​

Before using hooks of starknet-react, You need to configure the Provider.jsx file like the following.

Provider.jsx
import React from "react";

import { sepolia, mainnet, goerli } from "@starknet-react/chains";
import {
  StarknetConfig,
  publicProvider,
  argent,
  braavos,
  useInjectedConnectors,
  voyager
} from "@starknet-react/core";

export function StarknetProvider({ children }) {
  const { connectors } = useInjectedConnectors({
    // Show these connectors if the user has no connector installed.
    recommended: [
      argent(),
      braavos(),
    ],
    // Hide recommended connectors if the user has any connector installed.
    includeRecommended: "onlyIfNoConnectors",
    // Randomize the order of the connectors.
    order: "random"
  });

  return (
    <StarknetConfig
      chains={[mainnet, sepolia, goerli]}
      provider={publicProvider()}
      connectors={connectors}
      explorer={voyager}
    >
      {children}
    </StarknetConfig>
  );
}

Then edit the application component to include the Starknet provider.

main.jsx or other name
import React from "react";
import ReactDOM from "react-dom/client";
import { StarknetProvider } from "./Provider";
import App from "./App";

ReactDOM.createRoot(
  document.getElementById("root")
).render(
  <StarknetProvider>
    <App />
  </StarknetProvider>
)

3.Hooks​

useAccount​

useAccount allows you to access the AccountInterface object provided by current wallet like Argent X or Braavos.

Examples:

import { useAccount } from "@starknet-react/core";

export default function Component() {
  const { account, address, status } = useAccount();

  if (status === "disconnected") return <p>Disconnected</p>;
  return <p>Account: {address}</p>;
}

useConnect and useDisconnect​

useConnect and useDisconnect provide ways to interact with the connectors.

Example:

// useConnect
import { useConnect } from "@starknet-react/core";

export default function Component() {
  const { connect, connectors } = useConnect();
  return (
    <ul>
      {connectors.map((connector) => (
        <li key={connector.id}>
          <button onClick={() => connect({ connector })}>
            {connector.name}
          </button>
        </li>
      ))}
    </ul>
  );
}

// useDisconnect
import { useDisconnect} from "@starknet-react/core"

export default function Component() {
    const { disconnect } = useDisconnect();

  return <button onClick={() => disconnect()}>Disconnect</button>
}

useContractWrite​

useStarknetExecute is used to interact with contracts on Starknet and send multicall transactions.

Example:

import { useContractWrite } from "@starknet-react/core";
import { erc20ABI } from "./erc20";
import { useMemo } from "react";

export function App() {
  const { address } = useAccount();
    const { chain } = useNetwork();

    const { contract } = useContract({
        abi: erc20ABI,
        address: chain.nativeCurrency.address,
    });

    const calls = useMemo(() => {
        if (!address || !contract) return [];
        return contract.populateTransaction["transfer"]!(address, { low: 1, high: 0 });
    }, [contract, address]);

    const {
        writeAsync,
        data,
        isPending,
    } = useContractWrite({
        calls,
    });

    return (
        <>
            <button onClick={() => writeAsync()}>Transfer</button>
            <p>status: {isPending && <div>Submitting...</div>}</p>
            <p>hash: {data?.transaction_hash}</p>
        </>
    );
}

useWaitForTransaction​

Fetches a single transaction receipt. This hook keeps a cache of receipts by chain and transaction hash so that you can use the hook freely in your application without worrying about sending duplicate network requests.

import { useWaitForTransaction } from "@starknet-react/core";

export default function Component() {
    const transaction = "0x1059391b8c4fba9743b531ba371908195ccb5dcf2a9532fac247256fb48912f"
    const { isLoading, isError, error, data } = useWaitForTransaction({hash: transaction, watch: true})

    if (isLoading) return <div>Loading ...</div>;
    if (isError || !data) return <div>{error?.message}</div>;
    return <div>{data.status?.length}</div>
}

Summary​

In this tutorial, we introduced how to use get-starknet and starknet-react to build dApps on Starknet.

Start Quiz