### Start App in Development Mode Source: https://github.com/beefyfinance/beefy-v2/blob/main/README.md Use this command to start the application in development mode. You might need to disable adblock for 127.0.0.1 if you encounter a white screen due to ADX.png. ```bash npm run start ``` -------------------------------- ### Preview Production Build Source: https://github.com/beefyfinance/beefy-v2/blob/main/README.md Starts the application in production mode after it has been built. This is useful for testing the production build locally. ```bash npm run preview ``` -------------------------------- ### Vault Configuration Interface and Example Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Defines the TypeScript interface for vault configurations, including details like token addresses, risk assessments, and zap strategies. An example JSON object illustrates a typical vault configuration. ```typescript interface VaultConfig { id: string; // Unique vault identifier name: string; // Display name type: 'standard' | 'erc4626' | 'gov' | 'cowcentrated'; token: string; // Deposit token symbol tokenAddress?: string; // Deposit token contract address tokenDecimals: number; earnedToken: string; // Receipt token symbol (mooToken) earnedTokenAddress: string; // Receipt token contract address earnContractAddress: string; // Vault contract address oracle: string; // Price oracle type ('lps' | 'tokens') oracleId: string; // Oracle price feed ID status: string; // 'active' | 'eol' | 'paused' platformId: string; // Underlying platform (curve, uniswap, etc.) assets?: string[]; // Asset token IDs for LP vaults strategyTypeId: string; // Strategy categorization network: string; // Chain ID createdAt: number; // Unix timestamp risks: VaultRisksConfig; // Risk assessment flags zaps?: ZapStrategyConfig[]; // Zap configurations addLiquidityUrl?: string; // External LP creation URL removeLiquidityUrl?: string; // External LP removal URL } // Example vault configuration from src/config/vault/ethereum.json const exampleVault = { "id": "stakedao-musd-2pool", "name": "MUSD/USDC/USDT", "type": "standard", "token": "MUSD/2pool", "tokenAddress": "0xB5571E76693ba60110B5811DD650FFefce1C955f", "tokenDecimals": 18, "earnContractAddress": "0xD41863B37a584f964C0c9B2309e08fDd4c303130", "earnedToken": "mooStakeDao-MUSD-2Pool", "earnedTokenAddress": "0xD41863B37a584f964C0c9B2309e08fDd4c303130", "oracle": "lps", "oracleId": "curve-musd-2pool", "status": "active", "platformId": "stakedao", "assets": ["MUSD", "USDC", "USDT"], "strategyTypeId": "multi-lp", "network": "ethereum", "createdAt": 1776162709, "risks": { "complex": false, "curated": false, "notAudited": false, "notBattleTested": false, "notCorrelated": false, "notTimelocked": false, "notVerified": false, "synthAsset": false }, "zaps": [{ "strategyId": "curve", "poolAddress": "0xB5571E76693ba60110B5811DD650FFefce1C955f", "methods": [{ "type": "dynamic-deposit", "target": "0xFFd3b4D343A8964a5C3c1caAc20f319C41A97BFF", "coins": ["0xtoken1...", "0xtoken2..."] }] }] }; ``` -------------------------------- ### React Component Using Vault Selectors Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Example of a React component that utilizes the custom Redux hooks (`useAppSelector`) and vault selectors (`selectVaultById`, `selectIsVaultPausedOrRetired`) to fetch and display vault information, including its status and whether it's accepting deposits. ```typescript // Usage in React component function VaultComponent({ vaultId }: { vaultId: string }) { const vault = useAppSelector(state => selectVaultById(state, vaultId)); const isPausedOrRetired = useAppSelector(state => selectIsVaultPausedOrRetired(state, vaultId) ); return (

{vault.name}

Status: {vault.status}

{isPausedOrRetired && Vault is no longer accepting deposits}
); } ``` -------------------------------- ### Update Local Fork Source: https://github.com/beefyfinance/beefy-v2/blob/main/CONTRIBUTING.md Ensure your local fork is synchronized with the main repository before starting new work. This command fetches changes from the upstream repository and rebases your local branch onto the latest main branch. ```bash cd beefy-v2 git remote add upstream https://github.com/beefyfinance/beefy-v2.git git fetch upstream git pull --rebase upstream main ``` -------------------------------- ### Vault Selectors for Redux State Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Collection of selectors for accessing vault data from the Redux store. Includes functions to get all vault IDs, retrieve a vault by its ID or contract address, and check if a vault is paused or retired using cached results. ```typescript // src/features/data/selectors/vaults.ts - Vault selectors import { createCachedSelector } from 're-reselect'; // Get all visible vault IDs export const selectAllVisibleVaultIds = (state: BeefyState) => state.entities.vaults.allVisibleIds; // Get vault by ID (throws if not found) export const selectVaultById = (state: BeefyState, vaultId: string) => valueOrThrow( state.entities.vaults.byId[vaultId], `selectVaultById: Unknown vault id ${vaultId}` ); // Get vault by contract address export const selectVaultByAddressOrUndefined = ( state: BeefyState, chainId: string, vaultAddress: string ): VaultEntity | undefined => { const id = state.entities.vaults.byChainId[chainId] ?.byAddress[vaultAddress.toLowerCase()]; return id ? selectVaultById(state, id) : undefined; }; // Check if vault is paused or retired (cached) export const selectIsVaultPausedOrRetired = createCachedSelector( (state: BeefyState, vaultId: string) => selectVaultById(state, vaultId), vault => isVaultPausedOrRetired(vault) )((_state, vaultId) => vaultId); ``` -------------------------------- ### Build Application Source: https://github.com/beefyfinance/beefy-v2/blob/main/README.md Performs validation of vault configuration files and then builds the application for production. Ensure this command completes successfully before submitting a Pull Request. ```bash npm run build ``` -------------------------------- ### Run ESLint Checks Source: https://github.com/beefyfinance/beefy-v2/blob/main/README.md Executes ESLint to check for code style and potential issues. ```bash npm run lint ``` -------------------------------- ### Stage, Commit, and Push Changes Source: https://github.com/beefyfinance/beefy-v2/blob/main/CONTRIBUTING.md After making changes, add the modified files to the staging area, commit them with a descriptive message, and push the changes to your fork's remote branch. ```bash git add SomeFile.js git commit "Fix some bug #123" git push origin fix/some-bug-#123 ``` -------------------------------- ### CLI Commands for Vault Management Source: https://context7.com/beefyfinance/beefy-v2/llms.txt A collection of npm scripts for managing Beefy V2 vaults and related tasks. These commands cover development, vault operations, maintenance, and analysis. ```bash # CLI Commands (package.json scripts) # Development npm run start # Start dev server with hot reload npm run build # Validate configs and build production bundle npm run preview # Preview production build locally # Vault Management npm run vault ethereum 0xVaultAddress vault-id # Add new vault npm run clm base 0xCLMAddress # Add Cowcentrated Liquidity Manager npm run validate # Validate all vault configurations npm run setVaultStatus # Update vault status (active/paused/eol) npm run setVaultRisks # Update risk assessments # Maintenance npm run pause platform-name chain # Pause all vaults for a platform npm run checkVaultTokenDecimals # Verify token decimal configs npm run checkZapAddresses # Verify zap contract addresses # Analysis npm run analyze:bundle # Generate bundle size visualization npm run lint # ESLint code checks npm run prettier # Prettier formatting checks ``` -------------------------------- ### Run Prettier Checks Source: https://github.com/beefyfinance/beefy-v2/blob/main/README.md Executes Prettier to check code formatting. ```bash npm run prettier ``` -------------------------------- ### Define Main Application Routes with React Router Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Sets up the main navigation structure for the Beefy V2 application using react-router. It defines routes for the home page, vault details (with and without network specified), bridge, dashboard (for wallet or URL mode), and treasury. ```tsx // src/App.tsx - Main application routes import { lazy, memo } from 'react'; import { Route, Routes } from 'react-router'; const HomePage = lazy(() => import('./features/home/HomePage.tsx')); const VaultPage = lazy(() => import('./features/vault/VaultPage.tsx')); const BridgePage = lazy(() => import('./features/bridge/BridgePage.tsx')); const DashboardPage = lazy(() => import('./features/dashboard/DashboardPage.tsx')); const TreasuryPage = lazy(() => import('./features/treasury/TreasuryPage.tsx')); export const App = memo(function App() { return ( } /> } /> } /> } /> } /> } /> } /> ); }); ``` -------------------------------- ### Initialize Transact for Vault Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Use this action to initialize the transact feature for a specific vault. It sets up the necessary state for deposit or withdrawal operations. ```typescript import { createAction } from '@reduxjs/toolkit'; // Initialize transact for a vault export const transactInit = createAction<{ vaultId: string }>('transact/init'); ``` -------------------------------- ### Fix Prettier Formatting Source: https://github.com/beefyfinance/beefy-v2/blob/main/README.md Runs Prettier and automatically formats the code according to the defined style. ```bash npm run prettier:fix ``` -------------------------------- ### Vite Build Configuration Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Configures Vite for development and production builds, including custom plugins for version tracking and mini-app generation. Ensure tsconfig paths are correctly set up for project references. ```typescript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import tsconfigPaths from 'vite-tsconfig-paths'; import versionPlugin from './tools/bundle/version-plugin.ts'; import miniAppPlugin from './tools/bundle/miniapp-plugin.ts'; export default defineConfig({ server: { open: true }, plugins: [ tsconfigPaths({ projects: ['./tsconfig.app.json', './tsconfig.scripts.json'], }), react(), miniAppPlugin({ name: 'Beefy', subtitle: 'Yield Optimizer', description: 'Earn the highest APYs on your crypto', category: 'finance', tags: ['yield', 'rewards', 'crypto', 'earn'], capabilities: ['wallet.getEthereumProvider'], }), versionPlugin(), ], build: { outDir: 'build', sourcemap: false, rollupOptions: { output: { entryFileNames: 'assets/js/entry-[name]-[hash].js', chunkFileNames: 'assets/js/[name]-[hash].js', }, treeshake: { manualPureFunctions: [ 'memo', 'lazy', 'createAsyncThunk', 'createSlice', 'createSelector', 'createCachedSelector', 'styled', 'css' ], }, }, }, }); ``` -------------------------------- ### Add New Vault to Configuration Source: https://context7.com/beefyfinance/beefy-v2/llms.txt This script adds a new vault to the configuration files. It requires the chain, vault address, and a unique vault ID as arguments. Ensure the necessary Viem client and file utilities are imported. ```typescript // scripts/addVault.ts - Add new vault to configuration // Usage: npm run vault ethereum 0xVaultAddress vault-id import { getViemClient } from './common/viem.ts'; import { loadJson, saveJson } from './common/files.ts'; async function generateVault() { const chain = addressBookToAppId(process.argv[2]); const vaultAddress = getAddress(process.argv[3]); const id = process.argv[4]; const viemClient = getViemClient(chain); const vaultContract = getContract({ address: vaultAddress, abi: StandardVaultAbi, client: viemClient }); // Fetch vault data from blockchain const [want, mooToken] = await Promise.all([ vaultContract.read.want(), vaultContract.read.symbol(), ]); const tokenContract = getContract({ address: want, abi: ERC20Abi, client: viemClient }); const [tokenSymbol, tokenDecimals] = await Promise.all([ tokenContract.read.symbol(), tokenContract.read.decimals(), ]); // Create vault configuration const vault: VaultConfig = { id: id, name: tokenSymbol, type: 'standard', token: tokenSymbol, tokenAddress: want, tokenDecimals: Number(tokenDecimals), earnedToken: mooToken, earnedTokenAddress: vaultAddress, earnContractAddress: vaultAddress, oracle: 'lps', oracleId: id, status: 'active', platformId: 'curve', // determined from mooToken prefix strategyTypeId: 'multi-lp', network: chain, createdAt: Math.floor(Date.now() / 1000), risks: { complex: false, curated: false, notAudited: false, notBattleTested: false, notCorrelated: false, notTimelocked: false, notVerified: false, synthAsset: false, }, }; // Load existing vaults and prepend new one const vaultsFile = `./src/config/vault/${chain}.json`; const vaults = await loadJson(vaultsFile); await saveJson(vaultsFile, [vault, ...vaults], 'prettier'); } ``` -------------------------------- ### Ethereum Chain Configuration Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Configuration object for the Ethereum network, including RPC endpoints, chain ID, contract addresses, and gas settings. ```typescript export const config = { ethereum: { name: 'Ethereum', chainId: 1, rpc: [ 'https://ethereum-rpc.publicnode.com', 'https://0xrpc.io/eth', 'https://1rpc.io/eth' ], explorerUrl: 'https://etherscan.io', multicall3Address: '0xcA11bde05977b3631167028862bE2a173976CA11', appMulticallContractAddress: '0x47bec05dC291e61cd4360322eA44882cA468dD54', native: { symbol: 'ETH', oracleId: 'WETH', decimals: 18 }, gas: { type: 'eip1559', blocks: 100, percentile: 0.6, priorityMinimum: '1000000000', baseSafetyMargin: 0.1, }, }, // ... 30+ more chains supported }; ``` -------------------------------- ### Fix ESLint Issues Source: https://github.com/beefyfinance/beefy-v2/blob/main/README.md Runs ESLint and automatically attempts to fix any detected code style issues. ```bash npm run lint:fix ``` -------------------------------- ### AMM Pool Interface and Uniswap V2 Implementation Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Defines the interface for Automated Market Maker (AMM) pools and provides a specific implementation for Uniswap V2, including methods for liquidity management and price quoting. ```typescript // src/features/data/apis/amm/types.ts - AMM interface interface IPool { getAddLiquidityRatio( amountsIn: BigNumber[] ): Promise<{ isOneSided: boolean; addAmounts: BigNumber[] }>; getOptimalAddLiquidity( amountsIn: BigNumber[], amountsInPerSwap: BigNumber[] ): Promise<{ liquidity: BigNumber; usedAmounts: BigNumber[]; unusedAmounts: BigNumber[]; }>; quoteRemoveLiquidity( lpAmount: BigNumber ): Promise; } // src/features/data/apis/amm/uniswap-v2/UniswapV2Pool.ts - Uniswap V2 implementation class UniswapV2Pool implements IPool { async getAddLiquidityRatio(amountsIn: BigNumber[]): Promise { const [reserve0, reserve1] = await this.getReserves(); const ratio = reserve0.dividedBy(reserve1); // Calculate optimal amounts maintaining pool ratio const amount0Optimal = amountsIn[1].multipliedBy(ratio); if (amount0Optimal.lte(amountsIn[0])) { return { isOneSided: false, addAmounts: [amount0Optimal, amountsIn[1]] }; } const amount1Optimal = amountsIn[0].dividedBy(ratio); return { isOneSided: false, addAmounts: [amountsIn[0], amount1Optimal] }; } async quoteRemoveLiquidity(lpAmount: BigNumber): Promise { const [reserve0, reserve1] = await this.getReserves(); const totalSupply = await this.getTotalSupply(); const share = lpAmount.dividedBy(totalSupply); return [ reserve0.multipliedBy(share), reserve1.multipliedBy(share) ]; } } ``` -------------------------------- ### BNB Chain Configuration Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Configuration object for the BNB Chain network, specifying RPC endpoints, chain ID, contract addresses, and gas settings. ```typescript bsc: { name: 'BNB Chain', chainId: 56, rpc: [ 'https://bsc-dataseed.binance.org', 'https://bsc-dataseed1.defibit.io', ], explorerUrl: 'https://bscscan.com', multicall3Address: '0xcA11bde05977b3631167028862bE2a173976CA11', appMulticallContractAddress: '0x073d1752efe671AAE0E609a8f61663e3660673d3', native: { symbol: 'BNB', oracleId: 'WBNB', decimals: 18 }, gas: { type: 'standard', minimum: '3000000000', }, }, ``` -------------------------------- ### Switch Transact Mode Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Use this action to switch between different transaction modes like Deposit, Withdraw, Claim, or Boost. Ensure the TransactMode enum is imported. ```typescript import { createAction } from '@reduxjs/toolkit'; // Switch between deposit/withdraw modes export const transactSwitchMode = createAction('transact/switchMode'); ``` -------------------------------- ### Validate Vault Configuration Source: https://github.com/beefyfinance/beefy-v2/blob/main/README.md This command validates the configuration files for vaults before building the application. ```bash npm run validate ``` -------------------------------- ### Watch for Type Changes Source: https://github.com/beefyfinance/beefy-v2/blob/main/README.md This command continuously checks for type errors as you develop. Your IDE might provide similar functionality. ```bash npm run tsc:watch ``` -------------------------------- ### Deposit Form Component Source: https://context7.com/beefyfinance/beefy-v2/llms.txt A React component for handling deposit forms. It dispatches actions to initialize the transact feature and set the input amount. ```typescript import { useAppDispatch } from '../store/hooks.ts'; function DepositForm({ vaultId }: { vaultId: string }) { const dispatch = useAppDispatch(); // Initialize deposit mode for vault useEffect(() => { dispatch(transactInit({ vaultId })); dispatch(transactSwitchMode(TransactMode.Deposit)); }, [vaultId]); const handleAmountChange = (amount: BigNumber) => { dispatch(transactSetInputAmount({ index: 0, amount, max: false })); }; const handleMaxClick = () => { dispatch(transactSetInputAmount({ index: 0, amount: maxBalance, max: true })); }; } ``` -------------------------------- ### Arbitrum Chain Configuration Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Configuration object for the Arbitrum network, detailing RPC endpoints, chain ID, contract addresses, and gas settings. ```typescript arbitrum: { name: 'Arbitrum', chainId: 42161, rpc: ['https://arb1.arbitrum.io/rpc'], explorerUrl: 'https://arbiscan.io', multicall3Address: '0xcA11bde05977b3631167028862bE2a173976CA11', appMulticallContractAddress: '0x050b4081e41aB8474a24Dc8C5c50144c65F1b108', native: { symbol: 'ETH', oracleId: 'WETH', decimals: 18 }, gas: { type: 'eip1559', blocks: 100, percentile: 0.6, }, }, ``` -------------------------------- ### Fetch Token Allowances in Balance Check Source: https://github.com/beefyfinance/beefy-v2/blob/main/src/features/data/README.md This code iterates through a list of token allowances to check how much each vault contract is permitted to spend. It's used in the balance checking mechanism for normal vaults and tokens. ```javascript for (let spender in token.allowance) { calls[net].push({ allowance: tokenContract.methods.allowance(address, spender), ``` -------------------------------- ### Set Transact Input Amount Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Use this action to set the input amount for a transaction. It accepts the index of the input field, the BigNumber amount, and a boolean indicating if it's the maximum amount. ```typescript import { createAction } from '@reduxjs/toolkit'; // Set input amount for transaction export const transactSetInputAmount = createAction<{ index: number; amount: BigNumber; max: boolean; }>('transact/setInputAmount'); ``` -------------------------------- ### Create a New Feature Branch Source: https://github.com/beefyfinance/beefy-v2/blob/main/CONTRIBUTING.md Branch out from the main branch to work on a specific fix or feature. Appending the issue number to the branch name helps associate your work with a particular issue. ```bash git checkout -b fix/some-bug-#123 ``` -------------------------------- ### Transact Step Enum Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Defines the different steps involved in a transaction process: Loading, Form, ChainSelect, TokenSelect, or QuoteSelect. ```typescript export enum TransactStep { Loading, Form, ChainSelect, TokenSelect, QuoteSelect, } ``` -------------------------------- ### Select Transact Quote Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Use this action to select a specific quote from the available options for a transaction. Requires the quoteId to identify the chosen quote. ```typescript import { createAction } from '@reduxjs/toolkit'; // Select a specific quote from available options export const transactSelectQuote = createAction<{ quoteId: string }>('transact/selectQuote'); ``` -------------------------------- ### Set Transact Slippage Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Use this action to set the slippage tolerance for a transaction. The slippage is provided as a number. ```typescript import { createAction } from '@reduxjs/toolkit'; // Set slippage tolerance export const transactSetSlippage = createAction<{ slippage: number }>('transact/setSlippage'); ``` -------------------------------- ### Typed Redux Hooks for Beefy State Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Provides typed versions of `useDispatch` and `useSelector` from React-Redux, ensuring type safety when interacting with the Beefy application state. These hooks require `BeefyDispatchFn` and `BeefyState` types to be defined. ```typescript // src/features/data/store/hooks.ts - Typed Redux hooks import { useDispatch, useSelector } from 'react-redux'; import type { BeefyDispatchFn, BeefyState } from './types.ts'; export const useAppDispatch = useDispatch.withTypes(); export const useAppSelector = useSelector.withTypes(); ``` -------------------------------- ### Transact Mode Enum Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Defines the possible modes for a transaction, including Deposit, Withdraw, Claim, and Boost. ```typescript export enum TransactMode { Deposit, Withdraw, Claim, Boost, } ``` -------------------------------- ### Vault Entity Types and Type Guards Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Defines the various vault types and provides utility functions to check the status and type of a vault entity. ```typescript export type VaultType = 'standard' | 'gov' | 'cowcentrated' | 'erc4626'; export type VaultBase = { id: string; name: string; names: VaultNames; version: number; chainId: string; assetIds: string[]; createdAt: number; updatedAt: number; zaps: ZapStrategyConfig[]; contractAddress: string; assetType: 'single' | 'lps' | 'clm'; platformId: string; strategyTypeId: string; risks: VaultRisks; depositFee: number; migrationIds: string[]; hidden: boolean; }; export type VaultActive = { status: 'active' }; export type VaultRetired = { status: 'eol'; retireReason: string; retiredAt: number; }; export type VaultPaused = { status: 'paused'; pauseReason: string; pausedAt: number; }; // Type guards for vault status checks export function isVaultActive(vault: VaultEntity): vault is VaultEntity & VaultActive { return vault.status === 'active'; } export function isVaultRetired(vault: VaultEntity): vault is VaultEntity & VaultRetired { return vault.status === 'eol'; } export function isVaultPaused(vault: VaultEntity): vault is VaultEntity & VaultPaused { return vault.status === 'paused'; } export function isVaultPausedOrRetired(vault: VaultEntity): boolean { return vault.status === 'eol' || vault.status === 'paused'; } export function isCowcentratedVault(vault: VaultEntity): vault is VaultCowcentrated { return vault.type === 'cowcentrated'; } export function isGovVault(vault: VaultEntity): vault is VaultGov { return vault.type === 'gov'; } export function isStandardVault(vault: VaultEntity): vault is VaultStandard { return vault.type === 'standard'; } ``` -------------------------------- ### Transact Status Enum Source: https://context7.com/beefyfinance/beefy-v2/llms.txt Defines the possible statuses of a transaction: Idle, Pending, Rejected, or Fulfilled. ```typescript export enum TransactStatus { Idle, Pending, Rejected, Fulfilled, } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.