Hooks & State

The frontend uses custom React hooks to interact with the blockchain and Zustand stores for global UI state.

Custom Hooks

Hooks are located in frontend/src/hooks/.

Hook	Purpose
useBribeActions	Deposit and claim bribe rewards.
useContracts	Contract instance helpers and read/write wrappers.
useFaucet	Testnet faucet interactions.
useGaugeRewards	Gauge reward claiming and APR data.
usePairs	Pair/pool data and token reserve helpers.
useProtocolStats	Protocol-level TVL, volume, fee, and APR statistics.
useSafeApp	Gnosis Safe wallet integration helpers.
useSwap	Swap execution and token approval flow.
useSwapQuote	Swap amount-out and price-impact quotes.
useTokenBalance	Token balance fetching and formatting.
useTokenLogo	Token logo image resolution.
useVestNFTs	Voting-escrow NFT data and lock actions.
useVotingStats	Voting power and gauge-vote statistics.
useWhitelistedTokens	Whitelisted token list and metadata.

State Stores

Stores are located in frontend/src/store/.

Store	Purpose
appStore	Global app settings such as slippage tolerance and transaction deadlines.
tokenStore	Selected tokens, token lists, and user favorites.
txStore	Pending transaction state and recent history.

Data Flow

1. The user connects their wallet via the RainbowKit provider.
2. Hooks read on-chain data through viem/wagmi contract calls.
3. Stores hold global UI state and coordinate between components.
4. Transaction status is tracked in txStore and reflected in the UI.

ABIs

Contract ABIs used by the hooks are in frontend/src/lib/abi/ as JSON files. The hooks import these ABIs along with deployed addresses from frontend/src/lib/contracts.ts.