Documentation
👨‍💻 ZkNoid for developers
SDK
Frontend Hooks

Hooks

useNetworkStore

Returns common network and wallet state info

Usage
import { useNetworkStore } from '@zknoid/hooks';
 
const network = useNetworkStore();
Returns
export interface NetworkState {
  minaNetwork: Network | undefined;
  setNetwork: (chainId: string) => Promise<void>;
  address: string | undefined;
  connected: boolean;
  protokitClientStarted: boolean;
  onConnect: (address: string | undefined) => Promise<void>;
  onProtokitClientStarted: () => void;
  connectWallet: () => Promise<void>;
  walletInstalled: () => boolean;
  pendingL2Transactions: PendingTransaction[];
  addPendingL2Transaction: (pendingTransaction: PendingTransaction) => void;
  removePendingL2Transaction: (pendingTransaction: PendingTransaction) => void;
}

useProtokitChainStore

Can be use to fetch protokit app-chain block height.

Usage
import { useProtokitChainStore } from '@zknoid/hooks';
 
const chain = useProtokitChainStore();
Returns
interface ChainState {
  loading: boolean;
  block?: {
    height: string;
  } & ComputedBlockJSON;
  loadBlock: () => Promise<void>;
}

useChainStore

Can be used to access L1 network info

Usage
import { useChainStore } from '@zknoid/hooks';
 
const chain = useChainStore();
Returns
interface ChainState {
  loading: boolean;
  block?: {
    height: string;
  } & ComputedBlockJSON;
  loadBlock: (chainId: string) => Promise<void>;
}

useProtokitBalancesStore

Allows to fetch tokens on-ramped to the app network for the current user

Usage
import { useProtokitBalancesStore } from "@zknoid/hooks";
 
const balancesStore = useProtokitBalancesStore();
Returns
interface BalancesState {
  loading: boolean;
  balances: {
    // address - balance
    [key: string]: bigint;
  };
  loadBalance: (client: ClientAppChain<typeof DefaultRuntimeModules>, address: string) => Promise<void>;
}

useMinaBridge

Allows to on-ramp and off-ramp funds to/from protokit app chain.

Usage
import { useMinaBridge } from "@zknoid/hooks";
 
const bridge = useMinaBridge();
  ...
const createCompetition = async () => {
  const gameHub = client.runtime.resolve('ArkanoidGameHub');
  if (await bridge(BigInt(funding) * 10n ** 9n))
    throw Error('Not enough funds');
  ...
}

NewArkanoidCompetitionPage.tsx#L181

Returns
(amount: number) => Promise<void>

useSessionKeyStore

Can be used to create sessions for gasless transactions

Usage
import { useSessionKeyStore } from "@zknoid/hooks";
 
const sessionPublicKey = useStore(useSessionKeyStore, (state) => state.getSessionKey()).toPublicKey();
const sessionPrivateKey = useStore(useSessionKeyStore, (state) => state.getSessionKey());
Returns
interface MatchQueueState {
    sessionKeyBase58: any;
    getSessionKey: () => PrivateKey;
    newSessionKey: () => PrivateKey;
}
 
UseBoundStore<Write<StoreApi<MatchQueueState>, StorePersist<MatchQueueState, never>>>
Example
const sessionPrivateKey = useStore(useSessionKeyStore, (state) =>
  state.getSessionKey()
);
...
  const createNewLobby = async (
    name: string,
    participationFee: number,
    privateLobby: boolean,
    accessKey: number
  ) => {
    const lobbyManager = await client.runtime.resolve(params.contractName);
 
    const tx = await client.transaction(
      PublicKey.fromBase58(networkStore.address!),
      async () => {
        lobbyManager.createLobby(
          CircuitString.fromString(name),
          ProtoUInt64.from(participationFee).mul(10 ** 9),
          Bool(privateLobby),
          sessionPrivateKey.toPublicKey(),
          Field.from(accessKey)
        );
      }
    );
  }

LobbyPage.tsx#L189