Merge pull request #1771 from curvefi/feat/add-oracle-function-check-to-pool-creation

feat: add oracle function check to pool creation

Author: OnlyJousting

apps/main/src/dex/components/PageCreatePool/Summary/OracleSummary.tsx

@@ -1,6 +1,16 @@
 import { styled } from 'styled-components'
 import { isAddress } from 'viem'
-import { NG_ASSET_TYPE } from '@/dex/components/PageCreatePool/constants'
+import {
+  NG_ASSET_TYPE,
+  TOKEN_A,
+  TOKEN_B,
+  TOKEN_C,
+  TOKEN_D,
+  TOKEN_E,
+  TOKEN_F,
+  TOKEN_G,
+  TOKEN_H,
+} from '@/dex/components/PageCreatePool/constants'
 import {
   CategoryDataRow,
   SummaryDataTitle,
@@ -29,41 +39,24 @@ type OracleTokenSummaryProps = {
 }
 
 const OracleSummary = ({ chainId }: Props) => {
-  const tokenA = useStore((state) => state.createPool.tokensInPool.tokenA)
-  const tokenB = useStore((state) => state.createPool.tokensInPool.tokenB)
-  const tokenC = useStore((state) => state.createPool.tokensInPool.tokenC)
-  const tokenD = useStore((state) => state.createPool.tokensInPool.tokenD)
-  const tokenE = useStore((state) => state.createPool.tokensInPool.tokenE)
-  const tokenF = useStore((state) => state.createPool.tokensInPool.tokenF)
-  const tokenG = useStore((state) => state.createPool.tokensInPool.tokenG)
-  const tokenH = useStore((state) => state.createPool.tokensInPool.tokenH)
+  const tokens = useStore((state) => state.createPool.tokensInPool)
+
+  const oracleTokens = [
+    { token: tokens.tokenA, title: t`Token A`, tokenId: TOKEN_A },
+    { token: tokens.tokenB, title: t`Token B`, tokenId: TOKEN_B },
+    { token: tokens.tokenC, title: t`Token C`, tokenId: TOKEN_C },
+    { token: tokens.tokenD, title: t`Token D`, tokenId: TOKEN_D },
+    { token: tokens.tokenE, title: t`Token E`, tokenId: TOKEN_E },
+    { token: tokens.tokenF, title: t`Token F`, tokenId: TOKEN_F },
+    { token: tokens.tokenG, title: t`Token G`, tokenId: TOKEN_G },
+    { token: tokens.tokenH, title: t`Token H`, tokenId: TOKEN_H },
+  ].filter(({ token }) => token.ngAssetType === NG_ASSET_TYPE.ORACLE && token.address !== '')
 
   return (
     <OraclesWrapper>
-      {tokenA.ngAssetType === NG_ASSET_TYPE.ORACLE && tokenA.address !== '' && (
-        <OracleTokenSummary chainId={chainId} token={tokenA} title={t`Token A`} />
-      )}
-      {tokenB.ngAssetType === NG_ASSET_TYPE.ORACLE && tokenB.address !== '' && (
-        <OracleTokenSummary chainId={chainId} token={tokenB} title={t`Token B`} />
-      )}
-      {tokenC.ngAssetType === NG_ASSET_TYPE.ORACLE && tokenC.address !== '' && (
-        <OracleTokenSummary chainId={chainId} token={tokenC} title={t`Token C`} />
-      )}
-      {tokenD.ngAssetType === NG_ASSET_TYPE.ORACLE && tokenD.address !== '' && (
-        <OracleTokenSummary chainId={chainId} token={tokenD} title={t`Token D`} />
-      )}
-      {tokenD.ngAssetType === NG_ASSET_TYPE.ORACLE && tokenE.address !== '' && (
-        <OracleTokenSummary chainId={chainId} token={tokenE} title={t`Token E`} />
-      )}
-      {tokenD.ngAssetType === NG_ASSET_TYPE.ORACLE && tokenF.address !== '' && (
-        <OracleTokenSummary chainId={chainId} token={tokenF} title={t`Token F`} />
-      )}
-      {tokenD.ngAssetType === NG_ASSET_TYPE.ORACLE && tokenG.address !== '' && (
-        <OracleTokenSummary chainId={chainId} token={tokenG} title={t`Token G`} />
-      )}
-      {tokenD.ngAssetType === NG_ASSET_TYPE.ORACLE && tokenH.address !== '' && (
-        <OracleTokenSummary chainId={chainId} token={tokenH} title={t`Token H`} />
-      )}
+      {oracleTokens.map(({ token, title, tokenId }) => (
+        <OracleTokenSummary key={tokenId} chainId={chainId} token={token} title={title} />
+      ))}
     </OraclesWrapper>
   )
 }
@@ -77,12 +70,12 @@ const OracleTokenSummary = ({ chainId, token, title }: OracleTokenSummaryProps)
       </CategoryDataRow>
       <CategoryDataRow>
         <SummaryDataTitle>{t`Address:`}</SummaryDataTitle>
-        {token.oracleAddress === '' ? (
+        {token.oracle.address === '' ? (
           <SummaryDataPlaceholder>{t`No address set`}</SummaryDataPlaceholder>
-        ) : isAddress(token.oracleAddress) ? (
+        ) : isAddress(token.oracle.address) ? (
           <SummaryData>
-            <AddressLink href={scanAddressPath(network, token.oracleAddress)}>
-              {shortenAddress(token.oracleAddress)}
+            <AddressLink href={scanAddressPath(network, token.oracle.address)}>
+              {shortenAddress(token.oracle.address)}
               <Icon name={'Launch'} size={16} aria-label={t`Link to address`} />
             </AddressLink>
           </SummaryData>
@@ -92,10 +85,10 @@ const OracleTokenSummary = ({ chainId, token, title }: OracleTokenSummaryProps)
       </CategoryDataRow>
       <CategoryDataRow>
         <SummaryDataTitle>{t`Function:`}</SummaryDataTitle>
-        {token.oracleFunction === '' ? (
+        {token.oracle.functionName === '' ? (
           <SummaryDataPlaceholder>{t`No function set`}</SummaryDataPlaceholder>
         ) : (
-          <SummaryData>{token.oracleFunction}</SummaryData>
+          <SummaryData>{token.oracle.functionName}</SummaryData>
         )}
       </CategoryDataRow>
     </OracleTokenWrapper>

apps/main/src/dex/components/PageCreatePool/TokensInPool/SetOracle.tsx

@@ -1,6 +1,7 @@
 import lodash from 'lodash'
+import { useMemo } from 'react'
 import { styled } from 'styled-components'
-import { isAddress } from 'viem'
+import { isAddress, formatEther } from 'viem'
 import TextInput from '@/dex/components/PageCreatePool/components/TextInput'
 import WarningBox from '@/dex/components/PageCreatePool/components/WarningBox'
 import {
@@ -13,12 +14,21 @@ import {
   TOKEN_G,
   TOKEN_H,
   NG_ASSET_TYPE,
+  ORACLE_DECIMALS,
 } from '@/dex/components/PageCreatePool/constants'
+import { useOracleValidation } from '@/dex/components/PageCreatePool/hooks/useOracleValidation'
 import type { TokenState, TokenId } from '@/dex/components/PageCreatePool/types'
 import { validateOracleFunction } from '@/dex/components/PageCreatePool/utils'
 import useStore from '@/dex/store/useStore'
+import Alert from '@mui/material/Alert'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
 import Box from '@ui/Box'
 import { t } from '@ui-kit/lib/i18n'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { formatNumber } from '@ui-kit/utils'
+
+const { Spacing } = SizesAndSpaces
 
 type OracleInputProps = {
   token: TokenState
@@ -53,36 +63,61 @@ const OracleInputs = ({ token, tokenId, title }: OracleInputProps) => {
   const updateOracleAddress = useStore((state) => state.createPool.updateOracleAddress)
   const updateOracleFunction = useStore((state) => state.createPool.updateOracleFunction)
 
+  const oracleFunction = token.oracle.functionName
+  const oracleAddress = token.oracle.address
+
+  const { isLoading, isSuccess, error, rate, decimals } = useOracleValidation({ token, tokenId })
+
+  const formattedRate = useMemo(() => {
+    if (!isSuccess || !rate || decimals === undefined) return null
+    return formatNumber(Number(formatEther(BigInt(rate))), {
+      abbreviate: false,
+    })
+  }, [decimals, rate, isSuccess])
+
   return (
     <InputContainer>
       <TokenTitle>{t`${title} ${token.symbol !== '' ? `(${token.symbol})` : ''} Oracle`}</TokenTitle>
       <TextInput
         row
-        defaultValue={token.oracleAddress}
+        defaultValue={oracleAddress}
         onChange={lodash.debounce((value) => updateOracleAddress(tokenId, value), 300)}
         maxLength={42}
         label={t`Address (e.g 0x123...)`}
       />
-      {token.oracleAddress.length !== 0 && !token.oracleAddress.startsWith('0x') && (
-        <WarningBox message={t`Oracle address needs to start with '0x'.`} />
-      )}
-      {token.oracleAddress.length !== 0 && token.oracleAddress.length < 42 && (
-        <WarningBox message={t`Oracle address needs to be 42 characters long.`} />
-      )}
-      {token.oracleAddress.length === 42 && !isAddress(token.oracleAddress) && (
-        <WarningBox message={t`Invalid EVM address.`} />
+      {!isAddress(oracleAddress) && oracleAddress.length > 0 && (
+        <WarningBox message={t`Invalid EVM address. Needs to start with '0x', needs to be 42 characters long.`} />
       )}
       <TextInput
         row
-        defaultValue={token.oracleFunction}
+        defaultValue={oracleFunction}
         onChange={lodash.debounce((value) => updateOracleFunction(tokenId, value), 300)}
         maxLength={42}
         label={t`Function (e.g exchangeRate())`}
       />
-      {token.oracleFunction !== '' && !validateOracleFunction(token.oracleFunction) && (
+      {oracleFunction !== '' && !validateOracleFunction(oracleFunction) && (
         <WarningBox message={t`Oracle function name needs to end with '()'.`} />
       )}
-      <WarningBox message={t`Oracle must have a precision of 18 decimals.`} informational />
+      {decimals !== ORACLE_DECIMALS && oracleFunction !== '' && !isLoading && !error && (
+        <WarningBox message={t`Oracle must have a precision of ${ORACLE_DECIMALS} decimals.`} informational />
+      )}
+      {isLoading && <WarningBox message={t`Validating oracle...`} informational />}
+      {error && <WarningBox message={t`Unable to validate oracle.`} />}
+      {isSuccess && formattedRate !== null && (
+        <Alert severity="info" variant="standard" sx={{ marginTop: Spacing.sm }}>
+          <Stack gap={Spacing.xs}>
+            <Typography variant="bodySRegular">
+              {t`Oracle rate:`} {formattedRate}
+            </Typography>
+            <Typography variant="bodySRegular">
+              {t`Decimals:`} {decimals}
+            </Typography>
+            <Typography variant="bodySRegular">
+              {t`Raw rate:`} {rate}
+            </Typography>
+          </Stack>
+        </Alert>
+      )}
     </InputContainer>
   )
 }

apps/main/src/dex/components/PageCreatePool/TokensInPool/index.tsx

@@ -23,7 +23,11 @@ import { CreateToken, TokenId, TokensInPoolState } from '@/dex/components/PageCr
 import { checkMetaPool, containsOracle, getBasepoolCoins } from '@/dex/components/PageCreatePool/utils'
 import { useNetworkByChain } from '@/dex/entities/networks'
 import useTokensMapper from '@/dex/hooks/useTokensMapper'
-import { DEFAULT_CREATE_POOL_STATE, DEFAULT_ERC4626_STATUS } from '@/dex/store/createCreatePoolSlice'
+import {
+  DEFAULT_CREATE_POOL_STATE,
+  DEFAULT_ERC4626_STATUS,
+  DEFAULT_ORACLE_STATUS,
+} from '@/dex/store/createCreatePoolSlice'
 import useStore from '@/dex/store/useStore'
 import { CurveApi, ChainId, BasePool } from '@/dex/types/main.types'
 import Box from '@ui/Box'
@@ -548,8 +552,7 @@ const TokensInPool = ({ curve, chainId, haveSigner }: Props) => {
         address: tokenId === token ? '' : tokensInPoolState[token].address,
         symbol: tokenId === token ? '' : tokensInPoolState[token].symbol,
         ngAssetType: tokenId === token ? NG_ASSET_TYPE.STANDARD : tokensInPoolState[token].ngAssetType,
-        oracleAddress: tokenId === token ? '' : tokensInPoolState[token].oracleAddress,
-        oracleFunction: tokenId === token ? '' : tokensInPoolState[token].oracleFunction,
+        oracle: tokenId === token ? { ...DEFAULT_ORACLE_STATUS } : tokensInPoolState[token].oracle,
         erc4626: tokenId === token ? { ...DEFAULT_ERC4626_STATUS } : tokensInPoolState[token].erc4626,
       })
 
@@ -569,7 +572,7 @@ const TokensInPool = ({ curve, chainId, haveSigner }: Props) => {
   )
 
   // check if the tokens are withing 0.95 and 1.05 threshold
-  const checkThreshold = useMemo(() => {
+  const checkStableswapThreshold = useMemo(() => {
     // Array of token IDs you want to check
     const tokenIds: TokenId[] = [TOKEN_A, TOKEN_B, TOKEN_C, TOKEN_D, TOKEN_E, TOKEN_F, TOKEN_G, TOKEN_H]
 
@@ -578,6 +581,17 @@ const TokensInPool = ({ curve, chainId, haveSigner }: Props) => {
       (tokenId) => tokensInPool[tokenId].address !== '' && initialPrice[tokenId] !== 0,
     )
 
+    // Skip threshold check for tokens with special asset types (they have their own rate mechanisms)
+    const hasSpecialAssetType = tokenIds.some((tokenId) => {
+      const assetType = tokensInPool[tokenId].ngAssetType
+      return (
+        assetType === NG_ASSET_TYPE.ERC4626 ||
+        assetType === NG_ASSET_TYPE.ORACLE ||
+        assetType === NG_ASSET_TYPE.REBASING
+      )
+    })
+    if (hasSpecialAssetType) return false
+
     if (validTokens.length <= 1) {
       // Not enough tokens for comparison
       return false
@@ -760,7 +774,7 @@ const TokensInPool = ({ curve, chainId, haveSigner }: Props) => {
       {!chainId && <WarningBox message={t`Please connect a wallet to select tokens`} />}
       {swapType === STABLESWAP ? (
         <>
-          {checkThreshold && twocryptoFactory && (
+          {checkStableswapThreshold && twocryptoFactory && (
             <>
               <WarningBox
                 message={t`Tokens appear to be unpegged (above 5% deviation from 1:1).

apps/main/src/dex/components/PageCreatePool/constants.ts

@@ -36,6 +36,8 @@ export type PRESETS = {
   }
 }
 
+export const ORACLE_DECIMALS = 18
+
 export const NG_ASSET_TYPE: Record<string, NgAssetType> = {
   STANDARD: 0,
   ORACLE: 1,

apps/main/src/dex/components/PageCreatePool/hooks/useAutoDetectErc4626.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useEffect } from 'react'
 import { type Address } from 'viem'
 import { NG_ASSET_TYPE } from '@/dex/components/PageCreatePool/constants'
 import { useIsErc4626 } from '@/dex/components/PageCreatePool/hooks/useIsErc4626'
@@ -20,7 +20,7 @@ export const useAutoDetectErc4626 = ({ tokenId, address }: UseAutoDetectErc4626P
   const statusAlreadySet = useStore((state) => state.createPool.tokensInPool[tokenId].erc4626.isSuccess)
   const { isErc4626, isLoading, error, isSuccess } = useIsErc4626({ address })
 
-  useMemo(() => {
+  useEffect(() => {
     if (isLoading || error || isSuccess) {
       updateTokenErc4626Status(tokenId, { isErc4626, isLoading, error, isSuccess })
     }

apps/main/src/dex/components/PageCreatePool/hooks/useOracleRate.ts

@@ -0,0 +1,51 @@
+import { type Address, erc20Abi } from 'viem'
+import { useReadContract } from 'wagmi'
+import { decimal } from '@ui-kit/utils'
+
+const buildOracleAbi = (fnName: string) =>
+  [
+    {
+      name: fnName,
+      type: 'function',
+      stateMutability: 'view',
+      inputs: [],
+      outputs: [{ name: 'rate', type: 'uint256' }],
+    },
+  ] as const
+
+type UseOracleRateParams = {
+  address?: Address
+  functionName?: string
+  enabled?: boolean
+}
+
+export function useOracleRate({ address, functionName, enabled = true }: UseOracleRateParams) {
+  const cleanFunctionName = functionName?.replace('()', '') ?? ''
+
+  const {
+    data: rate,
+    isFetching: isLoading,
+    isSuccess,
+    error,
+  } = useReadContract({
+    address,
+    abi: buildOracleAbi(cleanFunctionName),
+    functionName: cleanFunctionName,
+    query: { enabled: enabled && !!address && !!cleanFunctionName, retry: false },
+  })
+
+  const { data: decimals } = useReadContract({
+    address,
+    abi: erc20Abi,
+    functionName: 'decimals',
+    query: { enabled: enabled && !!address && isSuccess, retry: false },
+  })
+
+  return {
+    rate: decimal(rate?.toString()),
+    decimals,
+    isLoading,
+    isSuccess,
+    error,
+  }
+}

apps/main/src/dex/components/PageCreatePool/hooks/useOracleValidation.ts

@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+import { isAddress, type Address } from 'viem'
+import { useOracleRate } from '@/dex/components/PageCreatePool/hooks/useOracleRate'
+import { TokenId, TokenState } from '@/dex/components/PageCreatePool/types'
+import { validateOracleFunction } from '@/dex/components/PageCreatePool/utils'
+import useStore from '@/dex/store/useStore'
+
+type UseOracleValidationParams = {
+  token: TokenState
+  tokenId: TokenId
+}
+
+/**
+ * This hook validates oracle configuration, syncs results to store, and returns them
+ */
+export const useOracleValidation = ({ token, tokenId }: UseOracleValidationParams) => {
+  const updateOracleState = useStore((state) => state.createPool.updateOracleState)
+
+  const oracleAddress = token.oracle.address
+  const oracleFunction = token.oracle.functionName
+
+  const enabled = isAddress(oracleAddress) && validateOracleFunction(oracleFunction)
+
+  const { rate, decimals, isLoading, isSuccess, error } = useOracleRate({
+    address: oracleAddress as Address,
+    functionName: oracleFunction,
+    enabled,
+  })
+
+  // Sync to store when query results change
+  useEffect(() => {
+    updateOracleState(tokenId, {
+      address: oracleAddress,
+      functionName: oracleFunction,
+      isLoading,
+      isSuccess,
+      error,
+      rate,
+      decimals,
+    })
+  }, [tokenId, oracleAddress, oracleFunction, isLoading, isSuccess, error, rate, decimals, updateOracleState])
+
+  return { isLoading, isSuccess, error, rate, decimals }
+}