Merge branch 'main' of github.com:curvefi/curve-frontend into refacto…

…r/wallet

apps/main/package.json

@@ -26,7 +26,7 @@
     "typescript": "*"
   },
   "dependencies": {
-    "@curvefi/api": "^2.65.29",
+    "@curvefi/api": "^2.66.1",
     "@curvefi/lending-api": "^2.4.1",
     "@curvefi/stablecoin-api": "^1.5.8",
     "@hookform/error-message": "^2.0.1",

apps/main/src/dex/components/PagePoolList/index.tsx

@@ -1,5 +1,4 @@
 import type { ColumnKeys, PagePoolList, SearchParams } from '@main/components/PagePoolList/types'
-import { t } from '@lingui/macro'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
 import { COLUMN_KEYS } from '@main/components/PagePoolList/utils'
@@ -16,8 +15,6 @@ import TableHeadMobile from '@main/components/PagePoolList/components/TableHeadM
 import TableSettings from '@main/components/PagePoolList/components/TableSettings/TableSettings'
 import TableRowNoResult from '@main/components/PagePoolList/components/TableRowNoResult'
 import { PoolRow } from '@main/components/PagePoolList/components/PoolRow'
-import { ConnectWalletPrompt, useWalletStore } from '@ui-kit/features/connect-wallet'
-import { isLoading } from '@ui/utils'
 
 const PoolList = ({
   rChainId,
@@ -49,10 +46,7 @@ const PoolList = ({
   const fetchPoolsRewardsApy = useStore((state) => state.pools.fetchPoolsRewardsApy)
   const setFormValues = useStore((state) => state.poolList.setFormValues)
   const { initCampaignRewards, initiated } = useStore((state) => state.campaigns)
-  const provider = useWalletStore((s) => s.provider)
   const network = useStore((state) => state.networks.networks[rChainId])
-  const connectWallet = useStore((s) => s.updateConnectState)
-  const connectState = useStore((s) => s.connectState)
 
   const [showDetail, setShowDetail] = useState('')
 
@@ -183,73 +177,61 @@ const PoolList = ({
         updatePath={updatePath}
       />
 
-      {!provider ? (
-        <ConnectWalletWrapper>
-          <ConnectWalletPrompt
-            description={t`Connect wallet to view pool list`}
-            connectText={t`Connect Wallet`}
-            loadingText={t`Connecting`}
-            connectWallet={() => connectWallet()}
-            isLoading={isLoading(connectState)}
+      <Table cellPadding={0} cellSpacing={0}>
+        {isXSmDown ? (
+          <TableHeadMobile showInPoolColumn={showInPoolColumn} />
+        ) : (
+          <TableHead
+            columnKeys={columnKeys}
+            isLite={isLite}
+            isReadyRewardsApy={!!rewardsApyMapper}
+            isReadyTvl={!!tvlMapper}
+            isReadyVolume={!!volumeMapper}
+            searchParams={searchParams}
+            tableLabels={tableLabels}
+            updatePath={updatePath}
           />
-        </ConnectWalletWrapper>
-      ) : (
-        <Table cellPadding={0} cellSpacing={0}>
-          {isXSmDown ? (
-            <TableHeadMobile showInPoolColumn={showInPoolColumn} />
-          ) : (
-            <TableHead
-              columnKeys={columnKeys}
-              isLite={isLite}
-              isReadyRewardsApy={!!rewardsApyMapper}
-              isReadyTvl={!!tvlMapper}
-              isReadyVolume={!!volumeMapper}
+        )}
+        <Tbody $borderBottom>
+          {isReadyWithApiData && formStatus.noResult ? (
+            <TableRowNoResult
+              colSpan={colSpan}
               searchParams={searchParams}
-              tableLabels={tableLabels}
+              signerAddress={signerAddress}
               updatePath={updatePath}
             />
+          ) : isReady && Array.isArray(result) ? (
+            <>
+              {result.map((poolId: string, index: number) => (
+                <PoolRow
+                  key={poolId}
+                  index={index}
+                  columnKeys={columnKeys}
+                  isLite={isLite}
+                  poolId={poolId}
+                  rChainId={rChainId}
+                  searchParams={searchParams}
+                  imageBaseUrl={network?.imageBaseUrl ?? ''}
+                  showInPoolColumn={showInPoolColumn}
+                  tableLabels={tableLabels}
+                  searchTermMapper={searchTermMapper}
+                  showDetail={showDetail}
+                  setShowDetail={setShowDetail}
+                  curve={curve}
+                />
+              ))}
+            </>
+          ) : (
+            <tr>
+              <td colSpan={colSpan}>
+                <SpinnerWrapper>
+                  <Spinner />
+                </SpinnerWrapper>
+              </td>
+            </tr>
           )}
-          <Tbody $borderBottom>
-            {isReadyWithApiData && formStatus.noResult ? (
-              <TableRowNoResult
-                colSpan={colSpan}
-                searchParams={searchParams}
-                signerAddress={signerAddress}
-                updatePath={updatePath}
-              />
-            ) : isReady && Array.isArray(result) ? (
-              <>
-                {result.map((poolId: string, index: number) => (
-                  <PoolRow
-                    key={poolId}
-                    index={index}
-                    columnKeys={columnKeys}
-                    isLite={isLite}
-                    poolId={poolId}
-                    rChainId={rChainId}
-                    searchParams={searchParams}
-                    imageBaseUrl={network?.imageBaseUrl ?? ''}
-                    showInPoolColumn={showInPoolColumn}
-                    tableLabels={tableLabels}
-                    searchTermMapper={searchTermMapper}
-                    showDetail={showDetail}
-                    setShowDetail={setShowDetail}
-                    curve={curve}
-                  />
-                ))}
-              </>
-            ) : (
-              <tr>
-                <td colSpan={colSpan}>
-                  <SpinnerWrapper>
-                    <Spinner />
-                  </SpinnerWrapper>
-                </td>
-              </tr>
-            )}
-          </Tbody>
-        </Table>
-      )}
+        </Tbody>
+      </Table>
     </>
   )
 }

apps/main/src/dex/hooks/usePageOnMount.ts

@@ -1,17 +1,17 @@
 import type { Location, NavigateFunction, Params } from 'react-router'
 import type { ConnectState } from '@ui/utils'
+import { isFailure, isLoading, isSuccess } from '@ui/utils'
 import type { INetworkName } from '@curvefi/api/lib/interfaces'
 
 import { ethers } from 'ethers'
 import { useCallback, useEffect } from 'react'
-import { useConnectWallet, useSetChain, useSetLocale, getWalletSignerAddress } from '@ui-kit/features/connect-wallet'
+import { getWalletSignerAddress, useConnectWallet, useSetChain, useSetLocale } from '@ui-kit/features/connect-wallet'
 
 import { CONNECT_STAGE, REFRESH_INTERVAL, ROUTE } from '@main/constants'
 import { dynamicActivate, updateAppLocale } from '@ui-kit/lib/i18n'
 import { useNetworkFromUrl, useParsedParams } from '@main/utils/utilsRouter'
 import { getWalletChainId } from '@ui-kit/features/connect-wallet'
 import { initCurveJs } from '@main/utils/utilsCurvejs'
-import { isFailure, isLoading, isSuccess } from '@ui/utils'
 import useStore from '@main/store/useStore'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
 import { ChainId, PageProps, Wallet } from '@main/types/main.types'
@@ -48,8 +48,8 @@ function usePageOnMount(params: Params, location: Location, navigate: NavigateFu
           updateGlobalStoreByKey('isLoadingApi', true)
           updateGlobalStoreByKey('isLoadingCurve', true) // remove -> use connectState
 
-          if (useWallet && wallet && chainId) {
-            const api = await initCurveJs(chainId, wallet)
+          if (chainId) {
+            const api = await initCurveJs(chainId, (useWallet && wallet) || undefined)
             setNetworkConfigs(api)
             updateCurveJs(api, prevCurveApi, wallet)
             updateConnectState('success', '')

apps/main/src/dex/store/createPoolsSlice.ts

@@ -329,6 +329,7 @@ const createPoolsSlice = (set: SetState<State>, get: GetState<State>): PoolsSlic
     },
     fetchBasePools: async (curve: CurveApi) => {
       const chainId = curve.chainId
+      if (curve.isNoRPC) return
       set(
         produce((state: State) => {
           state.pools.basePoolsLoading = true

apps/main/src/dex/utils/utilsCurvejs.ts

@@ -2,9 +2,13 @@ import cloneDeep from 'lodash/cloneDeep'
 import { FORMAT_OPTIONS, formatNumber } from '@ui/utils'
 import { CurveApi, ChainId, Pool, RewardsApy, Wallet } from '@main/types/main.types'
 
-export async function initCurveJs(chainId: ChainId, wallet: Wallet) {
+export async function initCurveJs(chainId: ChainId, wallet?: Wallet) {
   const curveApi = cloneDeep((await import('@curvefi/api')).default) as CurveApi
-  await curveApi.init('Web3', { network: { chainId }, externalProvider: getWalletProvider(wallet) }, { chainId })
+  if (wallet) {
+    await curveApi.init('Web3', { network: { chainId }, externalProvider: getWalletProvider(wallet) }, { chainId })
+  } else {
+    await curveApi.init('NoRPC', 'NoRPC', { chainId })
+  }
   return curveApi
 }
 

packages/curve-ui-kit/src/shared/ui/Metric.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import Alert from '@mui/material/Alert'
 import Stack from '@mui/material/Stack'
@@ -13,6 +13,7 @@ import { TypographyVariantKey } from '@ui-kit/themes/typography'
 import { abbreviateNumber, scaleSuffix } from '@ui-kit/utils'
 import { Duration } from '../../themes/design/0_primitives'
 import AlertTitle from '@mui/material/AlertTitle'
+import { MAX_USD_VALUE } from 'ui'
 
 const { Spacing, IconSize } = SizesAndSpaces
 
@@ -94,6 +95,14 @@ type MetricValueProps = Required<Pick<Props, 'value' | 'formatter' | 'abbreviate
   copyValue: () => void
 }
 
+function runFormatter(value: number, formatter: (value: number) => string, abbreviate: boolean, symbol?: string) {
+  if (symbol === '$' && value > MAX_USD_VALUE) {
+    console.warn(`USD value is too large: ${value}`)
+    return `?`
+  }
+  return formatter(abbreviate ? abbreviateNumber(value) : value)
+}
+
 const MetricValue = ({
   value,
   formatter,
@@ -114,7 +123,10 @@ const MetricValue = ({
         )}
 
         <Typography variant={fontVariant} color="textPrimary">
-          {formatter(abbreviate ? abbreviateNumber(value) : value)}
+          {useMemo(
+            () => runFormatter(value, formatter, abbreviate, unit?.symbol),
+            [formatter, abbreviate, value, unit?.symbol],
+          )}
         </Typography>
 
         {abbreviate && (

packages/curve-ui-kit/src/themes/design/2_theme.ts

@@ -1,4 +1,4 @@
-import { Blues, Grays, Greens, Reds, Violet, TransitionFunction } from './0_primitives'
+import { Blues, Grays, Greens, Reds, TransitionFunction, Violet } from './0_primitives'
 import { SurfacesAndText } from './1_surfaces_text'
 
 const { plain, inverted } = SurfacesAndText
@@ -148,13 +148,6 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
     },
   } as const
 
-  const Feedback = {
-    Success: Greens[300],
-    Info: Layer[3].Fill,
-    Warning: Reds[400],
-    Error: Reds[500],
-  } as const
-
   const Tabs = {
     Transition,
     UnderLined: {
@@ -246,7 +239,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
           Default: Grays[400],
           Active: Light.Text.highlight,
           Filled: Grays[850],
-          Error: Feedback.Error,
+          Error: Reds[500],
         },
       },
       Nested: {
@@ -256,7 +249,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
           Default: Grays[400],
           Active: Light.Text.highlight,
           Filled: Grays[850],
-          Error: Feedback.Error,
+          Error: Reds[500],
         },
       },
     },
@@ -285,7 +278,6 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
     Color,
     Text,
     Button,
-    Feedback,
     Layer,
     Tabs,
     Chips,
@@ -493,13 +485,6 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
     },
   } as const
 
-  const Feedback = {
-    Success: Greens[400],
-    Info: Layer[3].Fill,
-    Warning: Reds[300],
-    Error: Reds[500],
-  } as const
-
   const Tabs = {
     Transition,
     UnderLined: {
@@ -589,7 +574,7 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
           Default: color[600],
           Active: Dark.Text.highlight,
           Filled: color[75],
-          Error: Feedback.Error,
+          Error: Reds[500],
         },
       },
       Nested: {
@@ -599,7 +584,7 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
           Default: color[600],
           Active: Dark.Text.highlight,
           Filled: color[75],
-          Error: Feedback.Error,
+          Error: Reds[500],
         },
       },
     },
@@ -628,7 +613,6 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
     Color,
     Text,
     Button,
-    Feedback,
     Layer,
     Tabs,
     Chips,
@@ -779,13 +763,6 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
     },
   } as const
 
-  const Feedback = {
-    Success: Greens[400],
-    Info: Layer[3].Fill,
-    Warning: Reds[400],
-    Error: Reds[500],
-  } as const
-
   const Tabs = {
     Transition,
     UnderLined: {
@@ -877,7 +854,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
           Default: Violet[200],
           Active: Chad.Text.highlight,
           Filled: Violet[400],
-          Error: Feedback.Error,
+          Error: Reds[500],
         },
       },
       Nested: {
@@ -887,7 +864,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
           Default: Violet[200],
           Active: Chad.Text.highlight,
           Filled: Violet[400],
-          Error: Feedback.Error,
+          Error: Reds[500],
         },
       },
     },
@@ -916,7 +893,6 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
     Color,
     Text,
     Button,
-    Feedback,
     Layer,
     Tabs,
     Chips,

packages/curve-ui-kit/src/themes/palette/palette.ts

@@ -3,7 +3,7 @@ import { PaletteOptions } from '@mui/material'
 
 export const createPalette = (
   mode: 'light' | 'dark',
-  { Layer, Color, Feedback, Text: { TextColors } }: DesignSystem,
+  { Layer, Color, Text: { TextColors } }: DesignSystem,
 ): PaletteOptions => ({
   mode,
   primary: { main: Color.Primary[500] },

packages/ui/src/utils/utilsConstants.ts

@@ -6,6 +6,9 @@ export const CURVE_ASSETS_URL = `${CURVE_CDN_URL}/curve-assets`
 export const CURVE_LOGO_URL = `${CURVE_ASSETS_URL}/branding/logo.png`
 export const NOT_FOUND_IMAGE_URL = `${CURVE_ASSETS_URL}/branding/four-oh-llama.jpg`
 
+// Sometimes API returns overflowed USD values. Don't show them!
+export const MAX_USD_VALUE = 100_000_000_000_000 // $ 100T 🤑
+
 export const getImageBaseUrl = (blockchainId: string) =>
   `${CURVE_ASSETS_URL}/images/assets${blockchainId == 'ethereum' ? '' : `-${blockchainId}`}/`