Aller au contenu principal

Getting Started

This guide walks through the steps needed to get started interacting with the Intuition contracts in a TypeScript/React setting. The guides following this page will assume that you’ve completed this scaffolding and configuration.

Contract Addresses​

Intuition is currently deployed on Base Mainnet and Base Sepolia Testnet. You can find the chain information and contract addresses here:

ChainChain IDContract AddressTypeExplorer
Base84530x430BbF52503Bd4801E51182f4cB9f8F534225DE5Mainnethttps://basescan.org/
Base Sepolia845320x1A6950807E33d5bC9975067e6D6b5Ea4cD661665Testnethttps://sepolia.basescan.org/

Multivault ABI​

In addition to the contract address you’ll need the EthMultivault ABI. The code block is too large to include in these docs, but we recommend the following approach:

  • Create a multivault.ts file in a path such as app/lib/abis
  • Export the ABI as a const array:
export const multivaultAbi = [
    {...},
    {...},
]
  • Note: The actual ABI values are included inside the {...} in the above example.

You’ll need to export with this structure to work with viem and wagmi and to have type inference and ABI support.

For a full example you can look at a reference implementation in our monorepo:

Scaffolding Contract Interactions​

Once you have the contract address and the ABI exported from a .ts file you’re ready to scaffold the contract interactions.

The following guide focuses on what you need to start interacting with the EthMultivault contract in a TypeScript context.

useMultivaultContract Hook​

If you’re working in a React app we have a hook that you can use to scaffold your contract interactions. This hook leverages getContract from viem and the usePublicClient from wagmi :

import { multivaultAbi } from '@lib/abis/multivault'
import { getContract } from 'viem'
import { usePublicClient } from 'wagmi'

export const getMultivaultContractConfig = (contract?: string) => ({
  address:
    (contract as `0x${string}`) ||
    (`0x1A6950807E33d5bC9975067e6D6b5Ea4cD661665` as `0x${string}`),
  abi: multivaultAbi,
})

export function useMultivaultContract(contract?: string, chainId?: number) {
  const publicClient = usePublicClient({ chainId })

  if (!publicClient) {
    console.error('No publicClient found.')
    return null
  }

  return getContract({
    ...getMultivaultContractConfig(
      contract ||
        (`0x1A6950807E33d5bC9975067e6D6b5Ea4cD661665` as `0x${string}`),
    ),
    client: {
      public: publicClient,
    },
  })
}

Once you’ve created this hook you’re then able to use it in both contract reads and writes. Here’s a snippet showing how you can use the hook:

import { useMultivaultContract } from './useMultivaultContract'

export const useCreateAtom = () => {
  const multivault = useMultivaultContract(
    baseSepolia.id
  ) as GetContractReturnType

  return useContractWriteAndWait({
    ...multivault,
    functionName: 'createAtom',
  })
}

The specific contract interactions are covered in more detail in each page, such as Create Atom.

Viem Scaffolding​

We recommend additional viem configuration in addition to the EthMultiVault contract scaffolding.

Environment Variables​

This guide and reference implementation include references to environment variables that you’ll need to set in your app’s .env. You can rename these to whatever name you prefer, but you’ll need to ensure that the name matches.

# .env

ALCHEMY_BASE_SEPOLIA_RPC_URL=
ALCHEMY_BASE_RPC_URL=

You can set the contract address into a constant as well, such as:

MULTIVAULT_CONTRACT_ADDRESS

We recommend taking this approach for reusability across your app. This example also includes a CURRENT_ENV variable that is set to your deployment environment (such as 'development') to set the proper RPC URL in the Public Client configuration.

Implementation​

import { multivaultAbi } from '@lib/abis/multivault'
import {
  CURRENT_ENV,
  MULTIVAULT_CONTRACT_ADDRESS,
} from 'app/consts'
import {
  createPublicClient,
  getContract,
  http,
  PublicClient,
  type Abi,
} from 'viem'
import { base, baseSepolia } from 'viem/chains'

export const publicClient: PublicClient = createPublicClient({
  batch: {
    multicall: true,
  },
  chain: CURRENT_ENV === 'development' ? baseSepolia : base,
  transport: http(
    CURRENT_ENV === 'development'
      ? process.env.ALCHEMY_BASE_SEPOLIA_RPC_URL
      : process.env.ALCHEMY_BASE_RPC_URL,
    },
  ),
}) as PublicClient

export const getMultivaultContract = getContract({
  address: MULTIVAULT_CONTRACT_ADDRESS as `0x${string}`,
  abi: multivaultAbi as Abi,
  client: {
    public: publicClient,
  },
})

export const createMultiVaultContract = (contractAddress: string) =>
  ({
    address: contractAddress as `0x${string}`,
    abi: multivaultAbi as Abi,
  }) as const

export const multiVaultContract = {
  address: MULTIVAULT_CONTRACT_ADDRESS as `0x${string}`,
  abi: multivaultAbi as Abi,
} as const

For a full example you can look at a reference implementation in our monorepo:

Next Steps​

Once you’ve added this scaffolding and configuration to your application you’ll have what you need to start interacting onchain Intuition primitives. Each contract interaction page guide assumes that you’ll have already completed this scaffolding and have the useMultivaultContract hook set up.

See also: