Flare Network periphery artifacts wagmi types
npm install @flarenetwork/flare-wagmi-periphery-packageTypeScript 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.
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.
``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.
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
Each contract module typically exports at least a contract-specific ABI constant (e.g. ) plus derived TypeScript types.
`ts`
import {
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';
You can import one of the Flare chains and get the contract ABI using it:
`ts
import {
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);
`
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 {
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
Loading...
if (isError) return Error reading contract
return {data?.toString()}
}
`$3
This example shows how to set up a Viem client and use it to read data from a smart contract.
Similarly, you can interact with write functions.
1. Create the Viem client configuration:
`ts
// viem-client.ts
import { createPublicClient, http } from 'viem'
import { } from 'viem/chains'export const publicClient = createPublicClient({
chain: ,
transport: http(),
})
`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
Loading lotSize...
} if (isError) {
return (
Error reading lotSize: {error?.message || 'Unknown error'}
)
} return (
Address: {CONTRACT_ADDRESS}
lotSize: {data?.toString() || 'N/A'}
)
}
`$3
`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);
``- See CONTRIBUTING.md
- See SECURITY.md
- See CHANGELOG.md