Merge branch 'main' into stats-page

README.md

@@ -126,3 +126,5 @@ When adding/updating apps and/or packages, duplicate dependencies may be created
 The biggest culprit of the above is `@tanstack/react-query`, which sometimes is installed as two different versions and apps can no longer utilize hooks from the hooks package. This has been solved through the method described [here](https://github.com/TanStack/query/issues/3595#issuecomment-1248074333).
 
 If editing component themes in `ui`, having the `Tailwind CSS IntelliSense` plugin for VSCode is recommended. In order to enable it for custom Flowbite themes and string class names, add `theme` and `.*ClassName*` to the `Class Attributes` setting.
+
+Currently, `lottie-react` has some SSR issues in Node v22 as seen [here](https://github.com/Gamote/lottie-react/issues/101). Downgrading your node version to v18 resolves this issue.

apps/app/src/app/api/vault/[chainId]/[vaultAddress]/utils.ts

@@ -15,7 +15,6 @@ import {
   SECONDS_PER_YEAR,
   vaultABI
 } from '@shared/utilities'
-import defaultVaultList from '@vaultLists/default'
 import { NextRequest } from 'next/server'
 import {
   Address,
@@ -30,7 +29,12 @@ import {
   PublicClient,
   zeroAddress
 } from 'viem'
-import { RPC_URLS, TWAB_REWARDS_SETTINGS, WAGMI_CHAINS } from '@constants/config'
+import {
+  DEFAULT_VAULT_LISTS,
+  RPC_URLS,
+  TWAB_REWARDS_SETTINGS,
+  WAGMI_CHAINS
+} from '@constants/config'
 import { VaultApiParams } from './route'
 
 export const getChainIdFromParams = (params: VaultApiParams) => {
@@ -73,9 +77,10 @@ export const getVault = (
   address: Address,
   publicClient: PublicClient
 ) => {
-  const existingVaultInfo = defaultVaultList.tokens.find(
-    (t) => getVaultId(t) === getVaultId({ chainId, address })
-  )
+  const existingVaultInfo = Object.values(DEFAULT_VAULT_LISTS)
+    .map((list) => list.tokens)
+    .flat()
+    .find((t) => getVaultId(t) === getVaultId({ chainId, address }))
 
   const vault = new Vault(chainId, address, publicClient, {
     decimals: existingVaultInfo?.decimals,
@@ -230,7 +235,9 @@ export const getVaultData = async (vault: Vault, prizePool: PrizePool) => {
   const sharePrice =
     !!assetPrice && !!exchangeRate
       ? parseFloat(
-          formatEther(getAssetsFromShares(parseEther(`${assetPrice}`), exchangeRate, shareDecimals))
+          formatEther(
+            getAssetsFromShares(parseEther(assetPrice.toFixed(18)), exchangeRate, shareDecimals)
+          )
         )
       : undefined
   const prizeAssetPrice = prices[lower(prizeAssetAddress)]

apps/app/src/app/api/vaultList/meme/route.ts

@@ -0,0 +1,6 @@
+import memeVaultList from '@vaultLists/meme'
+import { NextResponse } from 'next/server'
+
+export function GET(): NextResponse {
+  return NextResponse.json(memeVaultList, { status: 200 })
+}

apps/app/src/app/api/vaultList/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server'
 
 export function GET(): NextResponse {
-  return NextResponse.json({ vaultLists: ['default'] }, { status: 200 })
+  return NextResponse.json({ vaultLists: ['default', 'meme'] }, { status: 200 })
 }

apps/app/src/components/AppContainer.tsx

@@ -6,6 +6,7 @@ import { ReactNode, useEffect, useState } from 'react'
 import { CustomAppProps } from '@pages/_app'
 import { AccountFrame } from './Frames/AccountFrame'
 import { DefaultFrame } from './Frames/DefaultFrame'
+import { VaultFrame } from './Frames/VaultFrame'
 import { Highlight } from './Highlight'
 
 export const AppContainer = (props: AppProps & CustomAppProps) => {
@@ -32,7 +33,13 @@ export const AppContainer = (props: AppProps & CustomAppProps) => {
   }, [])
 
   const pageFrames: { [href: string]: ReactNode } = {
-    account: <AccountFrame user={serverProps.params['user']} />
+    account: <AccountFrame user={serverProps.params['user']} />,
+    vault: (
+      <VaultFrame
+        chainId={serverProps.params['chainId']}
+        vaultAddress={serverProps.params['vaultAddress']}
+      />
+    )
   }
 
   const pageFrame = pageFrames[pathname.split('/')[1]]

apps/app/src/components/Frames/VaultFrame.tsx

@@ -0,0 +1,39 @@
+import { DOMAINS } from '@shared/utilities'
+import Head from 'next/head'
+import { DefaultFrame } from './DefaultFrame'
+
+export interface VaultFrameProps {
+  chainId?: string
+  vaultAddress?: string
+}
+
+// TODO: this is just a temporary vault frame to at least link to the vault page with a button
+export const VaultFrame = (props: VaultFrameProps) => {
+  const { chainId, vaultAddress } = props
+
+  if (!chainId || !vaultAddress) {
+    return <DefaultFrame />
+  }
+
+  return (
+    <Head>
+      <meta property='fc:frame' content='vNext' />
+      <meta
+        property='fc:frame:image'
+        content={`${DOMAINS.app}/facebook-share-image-1200-630.png`}
+      />
+      <meta name='fc:frame:button:1' content='Vault' />
+      <meta name='fc:frame:button:1:action' content='link' />
+      <meta
+        name='fc:frame:button:1:target'
+        content={`${DOMAINS.app}/vault/${chainId}/${vaultAddress}`}
+      />
+      <meta name='fc:frame:button:2' content='Account' />
+      <meta name='fc:frame:button:2:action' content='link' />
+      <meta name='fc:frame:button:2:target' content={`${DOMAINS.app}/account`} />
+      <meta name='fc:frame:button:3' content='Docs' />
+      <meta name='fc:frame:button:3:action' content='link' />
+      <meta name='fc:frame:button:3:target' content={DOMAINS.docs} />
+    </Head>
+  )
+}

apps/app/src/components/HomeHeader.tsx

@@ -1,10 +1,8 @@
-import {
-  useAllPrizeValue,
-  useCachedVaultLists
-} from '@generationsoftware/hyperstructure-react-hooks'
+import { useAllPrizeValue } from '@generationsoftware/hyperstructure-react-hooks'
 import { CurrencyValue, TokenIcon } from '@shared/react-components'
 import { Spinner } from '@shared/ui'
 import { isTestnet, lower, NETWORK, sToMs } from '@shared/utilities'
+import defaultVaultList from '@vaultLists/default'
 import classNames from 'classnames'
 import { useTranslations } from 'next-intl'
 import { useEffect, useMemo, useState } from 'react'
@@ -57,9 +55,6 @@ export const HomeHeader = () => {
 const TokenFlipper = (props: { className?: string }) => {
   const { className } = props
 
-  const { cachedVaultLists } = useCachedVaultLists()
-  const defaultVaultList = cachedVaultLists['default']
-
   const tokens = useMemo(() => {
     const vaultTokens: { chainId: number; address: Address }[] = []
     const ignoreList: { [chainId: number]: Lowercase<Address>[] } = {
@@ -69,22 +64,20 @@ const TokenFlipper = (props: { className?: string }) => {
       ]
     }
 
-    if (!!defaultVaultList) {
-      defaultVaultList.tokens.forEach((vaultInfo) => {
-        const tokenAddress = vaultInfo.extensions?.underlyingAsset?.address
-
-        if (
-          !isTestnet(vaultInfo.chainId) &&
-          !!tokenAddress &&
-          !ignoreList[vaultInfo.chainId]?.includes(lower(tokenAddress))
-        ) {
-          vaultTokens.push({
-            chainId: vaultInfo.chainId,
-            address: tokenAddress
-          })
-        }
-      })
-    }
+    defaultVaultList.tokens.forEach((vaultInfo) => {
+      const tokenAddress = vaultInfo.extensions?.underlyingAsset?.address
+
+      if (
+        !isTestnet(vaultInfo.chainId) &&
+        !!tokenAddress &&
+        !ignoreList[vaultInfo.chainId]?.includes(lower(tokenAddress))
+      ) {
+        vaultTokens.push({
+          chainId: vaultInfo.chainId,
+          address: tokenAddress
+        })
+      }
+    })
 
     return vaultTokens
   }, [defaultVaultList])

apps/app/src/components/Modals/DepositModal/DepositForm.tsx

@@ -1,6 +1,6 @@
 import { Vault } from '@generationsoftware/hyperstructure-client-js'
 import {
-  useCachedVaultLists,
+  useSelectedVaults,
   useToken,
   useTokenBalance,
   useTokenPrices,
@@ -31,8 +31,9 @@ import { atom, useAtom, useSetAtom } from 'jotai'
 import { useTranslations } from 'next-intl'
 import { useEffect, useMemo, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
+import { getRoundedDownFormattedTokenAmount } from 'src/utils'
 import { Address, formatUnits, parseUnits } from 'viem'
-import { useAccount, usePublicClient } from 'wagmi'
+import { useAccount } from 'wagmi'
 import { ZAP_SETTINGS } from '@constants/config'
 import { useSendDepositZapTransaction } from '@hooks/zaps/useSendDepositZapTransaction'
 import { useZapTokenOptions } from '@hooks/zaps/useZapTokenOptions'
@@ -58,8 +59,6 @@ export const DepositForm = (props: DepositFormProps) => {
 
   const { address: userAddress } = useAccount()
 
-  const publicClient = usePublicClient({ chainId: vault.chainId })
-
   const { data: vaultExchangeRate } = useVaultExchangeRate(vault)
   const { data: vaultToken } = useVaultTokenPrice(vault)
   const { data: vaultTokenWithAmount } = useTokenBalance(
@@ -75,31 +74,20 @@ export const DepositForm = (props: DepositFormProps) => {
 
   const tokenAddress = formTokenAddress ?? vaultToken?.address
 
-  const { cachedVaultLists } = useCachedVaultLists()
+  const { vaults } = useSelectedVaults()
 
   const inputVault = useMemo(() => {
-    if (!!vault && !!publicClient && !!tokenAddress) {
+    if (!!vault && !!tokenAddress) {
       const vaultId = getVaultId({ chainId: vault.chainId, address: tokenAddress })
-      const vaults = cachedVaultLists['default']?.tokens ?? []
-      const vaultInfo = vaults.find((v) => getVaultId(v) === vaultId)
-
-      if (!!vaultInfo) {
-        return new Vault(vaultInfo.chainId, vaultInfo.address, publicClient, {
-          decimals: vaultInfo.decimals,
-          name: vaultInfo.name,
-          logoURI: vaultInfo.logoURI
-        })
-      }
+      return Object.values(vaults.vaults).find((v) => getVaultId(v) === vaultId)
     }
-  }, [vault, publicClient, tokenAddress, cachedVaultLists])
+  }, [vault, tokenAddress, vaults])
 
   const shareLogoURI = useMemo(() => {
     if (!!vault) {
-      const defaultVaults = cachedVaultLists['default']?.tokens ?? []
-      const cachedLogoURI = defaultVaults.find((v) => getVaultId(v) === vault.id)?.logoURI
-      return vault.logoURI ?? cachedLogoURI
+      return vault.logoURI ?? vaults.allVaultInfo.find((v) => getVaultId(v) === vault.id)?.logoURI
     }
-  }, [vault, cachedVaultLists])
+  }, [vault, vaults])
 
   const { data: tokenData } = useToken(vault.chainId, tokenAddress!)
   const { data: tokenPrices } = useTokenPrices(vault.chainId, !!tokenAddress ? [tokenAddress] : [])
@@ -369,6 +357,9 @@ export const DepositForm = (props: DepositFormProps) => {
           showMaxButton={true}
           showTokenPicker={!!ZAP_SETTINGS[vault.chainId]}
           tokenPickerOptions={tokenPickerOptions}
+          fallbackLogoToken={
+            !!inputVault ? { ...inputVault.tokenData, logoURI: inputVault.tokenLogoURI } : undefined
+          }
           className='mb-0.5 z-20'
         />
         <TxFormInput
@@ -379,6 +370,7 @@ export const DepositForm = (props: DepositFormProps) => {
           priceImpact={priceImpact}
           disabled={isZapping}
           isLoading={isFetchingZapArgs}
+          fallbackLogoToken={vaultToken}
           className='my-0.5 z-10'
           inputClassName={classNames({ '!text-pt-purple-200': isZapping })}
           disabledCoverClassName={classNames({ '!backdrop-brightness-100': isZapping })}
@@ -425,14 +417,12 @@ interface TokenPickerOptionProps {
 const TokenPickerOption = (props: TokenPickerOptionProps) => {
   const { token, className } = props
 
-  const { cachedVaultLists } = useCachedVaultLists()
+  const { vaults } = useSelectedVaults()
 
-  const tokenInVaultList = useMemo(() => {
+  const vault = useMemo(() => {
     const vaultId = getVaultId(token)
-    const vaults = cachedVaultLists['default']?.tokens ?? []
-
-    return vaults.find((v) => getVaultId(v) === vaultId)
-  }, [token, cachedVaultLists])
+    return Object.values(vaults.vaults).find((v) => getVaultId(v) === vaultId)
+  }, [token, vaults])
 
   return (
     <div
@@ -445,13 +435,16 @@ const TokenPickerOption = (props: TokenPickerOptionProps) => {
       )}
     >
       <span className='flex items-center gap-1'>
-        <TokenIcon token={{ logoURI: tokenInVaultList?.logoURI, ...token }} />
+        <TokenIcon
+          token={{ ...token, logoURI: vault?.logoURI }}
+          fallbackToken={!!vault ? { ...vault.tokenData, logoURI: vault.tokenLogoURI } : undefined}
+        />
         <span className='text-lg text-pt-purple-50 md:text-2xl md:text-pt-purple-600'>
           {token.symbol}
         </span>
       </span>
       <span className='text-sm text-gray-300 md:text-lg md:text-gray-700'>
-        {formatBigIntForDisplay(token.amount, token.decimals)}
+        {getRoundedDownFormattedTokenAmount(token.amount, token.decimals)}
       </span>
     </div>
   )