Typed periphery contract ABIs and wagmi hooks for Flare Network

Auto-generated TypeScript helpers for seamless React, wagmi, and viem integration.


Overview
·
Installation
·
Usage
·
Contributing
·
Security
·
Changelog

Flare Periphery Wagmi Types

TypeScript contract types and React hooks for Flare periphery contracts, generated using the wagmi CLI.

This package is maintained as part of the official Flare developer tooling.
It provides a safe, typed, and ergonomic way to interact with Flare smart contracts from modern TypeScript and React applications.

Overview

This package provides:

- Typed contract ABIs
Use directly with viem or wagmi’s generic hooks such as useReadContract.

- Generated wagmi React hooks
Contract-specific hooks (for example, useReadIAssetManager) generated via the wagmi CLI.

- Network-scoped modules
Contracts are grouped by Flare networks:
- flare – Flare Mainnet
- songbird – Songbird Canary Network
- coston2 – Flare Testnet
- coston – Songbird Testnet

This enables strong typing, IDE autocompletion, and safer refactors across Flare-based dApps.

Installation

``bash
npm install @flarenetwork/flare-wagmi-periphery-package
`

(Or yarn add, pnpm add, bun add.)

> ⚠️ This package is ESM-only ("type": "module").
> Ensure your tooling supports package exports.

Package Structure

Generated files are published under dist/contracts/** and exposed via package.json#exports.

`
@flarenetwork/flare-wagmi-periphery-package/ # Root npm package directory
└── dist/ # Compiled output (ES modules)
└── contracts/ # Generated contract modules
├── index.(js|d.ts) # Root entry: re-exports all chains
├── flare/ # Flare Mainnet contracts
│ ├── index.(js|d.ts) # Re-exports all Flare contracts
│ └── *.(js|d.ts) # Individual contract ABIs & types
├── songbird/ # Songbird Canary Network contracts
│ ├── index.(js|d.ts) # Re-exports all Songbird contracts
│ └── *.(js|d.ts) # Individual contract ABIs & types
├── coston/ # Songbird Testnet (Coston) contracts
│ ├── index.(js|d.ts) # Re-exports all Coston contracts
│ └── *.(js|d.ts) # Individual contract ABIs & types
└── coston2/ # Flare Testnet (Coston2) contracts
├── index.(js|d.ts) # Re-exports all Coston2 contracts
└── *.(js|d.ts) # Individual contract ABIs & types
`

Usage

$3

Each contract module typically exports at least a contract-specific ABI constant (e.g. ) plus derived TypeScript types.

`ts
import { } from '@flarenetwork/flare-wagmi-periphery-package/contracts//'
`

Replace with a supported network (e.g. flare, songbird, coston, coston2), with the generated filename (e.g. IFtsoRegistry), and with the ABI export from that module (e.g. IFtsoRegistryAbi).

For example, if you want to import the FTSOV2 contract:

`ts
import { iFtsoV2Abi } from '@flarenetwork/flare-wagmi-periphery-package/contracts/coston2/IFtsoV2';
`

$3

You can import one of the Flare chains and get the contract ABI using it:

`ts
import { } from '@flarenetwork/flare-wagmi-periphery-package';

console.log(.);
`

For example, if you want to import the FTSO contract interface ABI:

`ts
import { coston2 } from '@flarenetwork/flare-wagmi-periphery-package';

console.log(coston2.iFtsoAbi);
`

$3

This example illustrates how to use the Wagmi React hook to read the contract.
Similarly, you can interact with write functions.
Change the , , , and to the appropriate values.

`tsx
import { useReadContract } from 'wagmi'
import { } from '@flarenetwork/flare-wagmi-periphery-package/contracts//'

function MyComponent() {
const { data, isLoading, isError } = useReadContract({
address: ,
abi: ,
functionName: '',
args: [],
})

if (isLoading) return

For instance, here is an example reading lot size from the AssetManagerFXRP:

`tsx
import { useReadContract } from 'wagmi'
import { iAssetManagerAbi } from '@flarenetwork/flare-wagmi-periphery-package/contracts/coston2/IAssetManager'

function LotSizeReader() {
const { data, isLoading, isError } = useReadContract({
address: "0xc1Ca88b937d0b528842F95d5731ffB586f4fbDFA",
abi: iAssetManagerAbi,
functionName: 'lotSize',
args: [],
})

if (isLoading) return

`ts
// viem-client.ts
import { createPublicClient, http } from 'viem'
import { } from 'viem/chains'

export const publicClient = createPublicClient({
chain: ,
transport: http(),
})
`

Note that viem/chains includes Flare network exports like this:

- flare: Flare Mainnet
- flareTestnet: Flare Testnet Coston2
- songbird: Songbird Canary Network
- songbirdTestnet: Songbird Testnet Coston

`ts
import { flare, flareTestnet, songbird, songbirdTestnet } from 'viem/chains'
`

2. Use the client to read contract data:

`ts
// read-contract.ts
import { publicClient } from '@/lib/viem-client'
import { } from '@flarenetwork/flare-wagmi-periphery-package/contracts//'

const CONTRACT_ADDRESS = ''

const data = await publicClient.readContract({
address: CONTRACT_ADDRESS,
abi: ,
functionName: '',
args: [],
})

console.log('Contract data:', data)
`

For example, here is an example reading lot size from the AssetManagerFXRP:

`ts
// read-lot-size.ts
import { createPublicClient, http } from 'viem'
import { flareTestnet } from 'viem/chains'
import { iAssetManagerAbi } from '@flarenetwork/flare-wagmi-periphery-package/contracts/coston2/IAssetManager'

const client = createPublicClient({
chain: flareTestnet,
transport: http(),
})

const lotSize = await client.readContract({
address: '0xc1Ca88b937d0b528842F95d5731ffB586f4fbDFA',
abi: iAssetManagerAbi,
functionName: 'lotSize',
args: [],
})

console.log('Lot size:', lotSize.toString())
`

$3

This example shows how to set up wagmi config and use contract-specific hooks generated by the Wagmi CLI.

1. Create the wagmi configuration file:

`ts
// wagmi.ts
import { createConfig, http } from 'wagmi'
import { } from 'viem/chains'

export const config = createConfig({
chains: [],
transports: {
[.id]: http(),
},
})
`

2. Set up the React providers:

`tsx
// providers.tsx
'use client'

import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from '@/lib/wagmi'
import { ReactNode, useState } from 'react'

export function Providers({ children }: { children: ReactNode }) {
const [queryClient] = useState(() => new QueryClient())

return (


{children}


)
}
`

3. Use the generated contract-specific hook in a component:

`tsx
// LotSizeComponent.tsx
'use client'

import { useReadIAssetManager } from '@flarenetwork/flare-wagmi-periphery-package/contracts/coston2/IAssetManager'

const CONTRACT_ADDRESS = '0xc1Ca88b937d0b528842F95d5731ffB586f4fbDFA'

export default function LotSizeComponent() {
const { data, isError, isLoading, error } = useReadIAssetManager({
address: CONTRACT_ADDRESS,
functionName: 'lotSize',
})

if (isLoading) {
return

`ts
import { createPublicClient, http } from 'viem'
import { flare } from 'viem/chains'
import { flareContractRegistryAbi } from '@flarenetwork/flare-wagmi-periphery-package/contracts/flare/FlareContractRegistry'

// Flare Contracts Registry https://dev.flare.network/network/guides/flare-contracts-registry/
const FLARE_CONTRACT_REGISTRY_ADDRESS = '0xaD67FE66660Fb8dFE9d6b1b4240d8650e30F6019';

const client = createPublicClient({
chain: flare,
transport: http(),
});

const ftsov2Address = await client.readContract({
address: FLARE_CONTRACT_REGISTRY_ADDRESS,
abi: flareContractRegistryAbi,
functionName: 'getContractAddressByName',
args: ['FtsoV2'],
});

console.log('FTSOV2 address:', ftsov2Address);
``

Contributing / Security

- See CONTRIBUTING.md
- See SECURITY.md
- See CHANGELOG.md