feat: allow llamalend use while connected to any dex network

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

@@ -6,9 +6,8 @@ import { ROUTE } from '@/dex/constants'
 import { useNetworks } from '@/dex/entities/networks'
 import useStore from '@/dex/store/useStore'
 import type { FormValues } from '@/dex/types/integrations.types'
-import { ChainId, NetworkEnum, type NetworkUrlParams } from '@/dex/types/main.types'
+import { ChainId, type NetworkUrlParams } from '@/dex/types/main.types'
 import { getPath } from '@/dex/utils/utilsRouter'
-import { fromEntries, recordEntries } from '@curvefi/prices-api/objects.util'
 import { useFocusRing } from '@react-aria/focus'
 import Box from '@ui/Box'
 import IntegrationAppComp from '@ui/Integration/IntegrationApp'
@@ -40,10 +39,6 @@ const IntegrationsComp = ({
 
   const { data: networks } = useNetworks()
   const visibleNetworksList = useMemo(() => Object.values(networks).filter((n) => n.showInSelectNetwork), [networks])
-  const networksIdMapper = useMemo(
-    () => fromEntries(recordEntries(networks).map(([chainId, { networkId }]) => [networkId, Number(chainId)])),
-    [networks],
-  )
 
   const { filterKey, filterNetworkId } = parseSearchParams(
     searchParams,
@@ -150,14 +145,16 @@ const IntegrationsComp = ({
               integrationsAppNetworks={
                 !rChainId && (
                   <Box margin="0.25rem 0 0 0">
-                    {Object.keys(app.networks).map((networkId) => {
-                      if (networkId in networksIdMapper) {
-                        const chainId = networksIdMapper[networkId as NetworkEnum]
-                        const { name, logoSrc } = networks[chainId]
-                        return <img key={chainId} alt={name} src={logoSrc} loading="lazy" width="18" height="18" />
-                      }
-                      return null
-                    })}
+                    {Object.keys(app.networks).map((networkId) => (
+                      <img
+                        key={networkId}
+                        alt={`${networkId} logo`}
+                        src={networkId}
+                        loading="lazy"
+                        width="18"
+                        height="18"
+                      />
+                    ))}
                   </Box>
                 )
               }

apps/main/src/lend/components/PageIntegrations/index.tsx

@@ -2,9 +2,8 @@ import { useCallback, useEffect, useMemo } from 'react'
 import { styled } from 'styled-components'
 import type { FilterKey, FormValues } from '@/lend/components/PageIntegrations/types'
 import { ROUTE } from '@/lend/constants'
-import networks, { networksIdMapper } from '@/lend/networks'
 import useStore from '@/lend/store/useStore'
-import { ChainId, NetworkEnum, type NetworkUrlParams } from '@/lend/types/lend.types'
+import { ChainId, type NetworkUrlParams } from '@/lend/types/lend.types'
 import { getPath } from '@/lend/utils/utilsRouter'
 import { useFocusRing } from '@react-aria/focus'
 import Box from '@ui/Box'
@@ -124,14 +123,16 @@ const IntegrationsComp = ({
               integrationsAppNetworks={
                 !rChainId && (
                   <Box margin="0.25rem 0 0 0">
-                    {Object.keys(app.networks).map((networkId) => {
-                      if (networkId in networksIdMapper) {
-                        const chainId = networksIdMapper[networkId as NetworkEnum]
-                        const { name, logoSrc } = networks[chainId]
-                        return <img key={chainId} alt={name} src={logoSrc} loading="lazy" width="18" height="18" />
-                      }
-                      return null
-                    })}
+                    {Object.keys(app.networks).map((networkId) => (
+                      <img
+                        key={networkId}
+                        alt={`${networkId} logo`}
+                        src={networkId}
+                        loading="lazy"
+                        width="18"
+                        height="18"
+                      />
+                    ))}
                   </Box>
                 )
               }

apps/main/src/llamalend/entities/llama-market-stats.ts

@@ -1,10 +1,10 @@
-import { useAccount, useChainId } from 'wagmi'
+import { useAccount } from 'wagmi'
 import { useUserLendingVaultEarnings, useUserLendingVaultStats } from '@/llamalend/entities/lending-vaults'
 import { type LlamaMarket } from '@/llamalend/entities/llama-markets'
 import { useUserMintMarketStats } from '@/llamalend/entities/mint-markets'
+import { useTokenUsdPrice } from '@/llamalend/entities/usd-prices'
 import { LlamaMarketColumnId } from '@/llamalend/features/market-list/columns.enum'
 import { calculateLtv } from '@/llamalend/llama.utils'
-import { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { LlamaMarketType } from '@ui-kit/types/market'
 
 const statsColumns = [
@@ -30,14 +30,13 @@ const earningsColumns = [
 export function useUserMarketStats(market: LlamaMarket, column?: LlamaMarketColumnId) {
   const { type, userHasPositions, address: marketAddress, controllerAddress, chain } = market
   const { address: userAddress } = useAccount()
-  const chainId = useChainId()
-  const { data: collateralUsdRate, isLoading: collateralUsdRateLoading } = useTokenUsdRate({
-    chainId,
-    tokenAddress: market?.assets?.collateral?.address,
+  const { data: collateralUsdRate, isLoading: collateralUsdRateLoading } = useTokenUsdPrice({
+    blockchainId: market.chain,
+    contractAddress: market.assets.collateral.address,
   })
-  const { data: borrowedUsdRate, isLoading: borrowedUsdRateLoading } = useTokenUsdRate({
-    chainId,
-    tokenAddress: market?.assets?.borrowed?.address,
+  const { data: borrowedUsdRate, isLoading: borrowedUsdRateLoading } = useTokenUsdPrice({
+    blockchainId: market.chain,
+    contractAddress: market.assets.borrowed.address,
   })
 
   const enableStats = !!userHasPositions?.Borrow && (!column || statsColumns.includes(column))

apps/main/src/llamalend/features/manage-soft-liquidation/ui/ButtonGetCrvUsd.tsx

@@ -14,14 +14,12 @@ const { IconSize } = SizesAndSpaces
  */
 export const ButtonGetCrvUsd = () => {
   const pathname = usePathname()
-  const networkId = getCurrentNetwork(pathname)
-  const href = `${getInternalUrl('dex', networkId, DEX_ROUTES.PAGE_SWAP)}?to=${CRVUSD_ADDRESS}`
-
+  const networkId = getCurrentNetwork(pathname) ?? 'ethereum'
   return (
     <Button
       component={Link}
       color="ghost"
-      href={href}
+      href={`${getInternalUrl('dex', networkId, DEX_ROUTES.PAGE_SWAP)}?to=${CRVUSD_ADDRESS}`}
       target="_blank"
       size="extraSmall"
       endIcon={<CallMade sx={{ width: IconSize.md, height: IconSize.md }} />}

apps/main/src/loan/components/PageIntegrations/index.tsx

@@ -2,9 +2,8 @@ import { useCallback, useEffect, useMemo } from 'react'
 import { styled } from 'styled-components'
 import type { FilterKey, FormValues } from '@/loan/components/PageIntegrations/types'
 import { ROUTE } from '@/loan/constants'
-import networks, { networksIdMapper } from '@/loan/networks'
 import useStore from '@/loan/store/useStore'
-import { ChainId, NetworkEnum, type NetworkUrlParams } from '@/loan/types/loan.types'
+import { ChainId, type NetworkUrlParams } from '@/loan/types/loan.types'
 import { getPath } from '@/loan/utils/utilsRouter'
 import { useFocusRing } from '@react-aria/focus'
 import Box from '@ui/Box'
@@ -124,14 +123,16 @@ const IntegrationsComp = ({
               integrationsAppNetworks={
                 !rChainId && (
                   <Box margin="0.25rem 0 0 0">
-                    {Object.keys(app.networks).map((networkId) => {
-                      if (networkId in networksIdMapper) {
-                        const chainId = networksIdMapper[networkId as NetworkEnum]
-                        const { name, logoSrc } = networks[chainId]
-                        return <img key={chainId} alt={name} src={logoSrc} loading="lazy" width="18" height="18" />
-                      }
-                      return null
-                    })}
+                    {Object.keys(app.networks).map((networkId) => (
+                      <img
+                        key={networkId}
+                        alt={`${networkId} logo`}
+                        src={networkId}
+                        loading="lazy"
+                        width="18"
+                        height="18"
+                      />
+                    ))}
                   </Box>
                 )
               }

apps/main/src/loan/hooks/useLoanAppStats.tsx

@@ -47,7 +47,7 @@ function useTvl(chainId: ChainId | undefined) {
 
 export function useLoanAppStats(chainId: ChainId | undefined) {
   const { data: crvusdPrice } = useTokenUsdRate({ chainId, tokenAddress: CRVUSD_ADDRESS })
-  const { data: dailyVolume } = useAppStatsDailyVolume({})
+  const { data: dailyVolume } = useAppStatsDailyVolume({}, !!chainId)
   const { data: crvusdTotalSupply } = useAppStatsTotalCrvusdSupply({ chainId })
   return [
     {

packages/curve-ui-kit/src/features/connect-wallet/lib/ConnectionProvider.tsx

@@ -54,6 +54,7 @@ export const ConnectionProvider = <App extends AppName>({
       if (networkChainId !== walletChainId) {
         setConnectState(LOADING)
         if (isFocused && !(await switchChainAsync({ chainId: networkChainId as WagmiChainId }))) {
+          console.warn(`Failed to switch wallet to chain ${networkChainId}, current chain is ${walletChainId}`)
           setConnectState(FAILURE)
           onChainUnavailable([networkChainId, walletChainId as AppChainId<App>])
         }
@@ -98,14 +99,16 @@ export const ConnectionProvider = <App extends AppName>({
 
         if (signal.aborted) return
         setConnectState(LOADING)
-        console.info(
-          `Initializing ${libKey} for ${network.name} (${network.chainId})`,
-          wallet ? `Wallet ${wallet?.account?.address} with chain ${walletChainId}` : 'without wallet',
-          prevLib
-            ? `Old library had ${prevLib.signerAddress ? `signer ${prevLib.signerAddress}` : 'no signer'} with chain ${prevLib.chainId}`
-            : `First initialization`,
-        )
         const newLib = await globalLibs.init(libKey, network, wallet?.provider)
+        if (newLib) {
+          console.info(
+            `Initialized ${libKey} for ${network.name} (${network.chainId})`,
+            wallet ? `Wallet ${wallet?.account?.address} with chain ${walletChainId}` : 'without wallet',
+            prevLib
+              ? `Old library had ${prevLib.signerAddress ? `signer ${prevLib.signerAddress}` : 'no signer'} with chain ${prevLib.chainId}`
+              : `First initialization`,
+          )
+        }
 
         if (signal.aborted) return
         globalLibs.set(libKey, newLib)

packages/curve-ui-kit/src/features/connect-wallet/lib/utils.ts

@@ -1,20 +1,10 @@
 import type { Eip1193Provider } from 'ethers'
 import { createCurve } from '@curvefi/api'
 import { createLlamalend } from '@curvefi/llamalend-api'
+import { NETWORK_CONSTANTS as LLAMA_NETWORKS } from '@curvefi/llamalend-api/lib/llamalend'
 import type { NetworkDef } from '@ui/utils'
 import type { LlamaApi, Wallet } from '@ui-kit/features/connect-wallet'
-import {
-  AppLib,
-  CurveApi,
-  CurveChainId,
-  CurveNetworkId,
-  LibChainId,
-  LibKey,
-  LibNetworkId,
-  Libs,
-  LlamaChainId,
-  LlamaNetworkId,
-} from '@ui-kit/features/connect-wallet/lib/types'
+import { AppLib, CurveApi, LibChainId, LibKey, LibNetworkId, Libs } from '@ui-kit/features/connect-wallet/lib/types'
 import { AppName } from '@ui-kit/shared/routes'
 
 /**
@@ -35,21 +25,15 @@ const initLib: {
     externalProvider?: Eip1193Provider,
   ) => Promise<Libs[K]>
 } = {
-  llamaApi: async (
-    network: NetworkDef<LlamaNetworkId, LlamaChainId>,
-    externalProvider: Eip1193Provider | undefined,
-  ) => {
-    if (!externalProvider) {
+  llamaApi: async (network, externalProvider) => {
+    if (!externalProvider || !(network.chainId in LLAMA_NETWORKS)) {
       return
     }
     const api = createLlamalend()
     await api.init('Web3', { network, externalProvider }, { chainId: network.chainId })
     return api as LlamaApi
   },
-  curveApi: async (
-    network: NetworkDef<CurveNetworkId, CurveChainId>,
-    externalProvider: Eip1193Provider | undefined,
-  ) => {
+  curveApi: async (network, externalProvider) => {
     const { chainId } = network
     const curveApi = createCurve()
     if (externalProvider) {

packages/curve-ui-kit/src/features/switch-chain/ui/ChainList.tsx

@@ -33,11 +33,11 @@ function getNetworkPathname(pathname: string, networkId: string) {
 export function ChainList({
   options,
   showTestnets,
-  selectedNetwork,
+  selectedNetworkId,
 }: {
   options: NetworkDef[]
   showTestnets: boolean
-  selectedNetwork: NetworkDef | undefined
+  selectedNetworkId: string | undefined
 }) {
   const pathname = usePathname() || ''
   const [searchValue, setSearchValue] = useState('')
@@ -73,14 +73,14 @@ export function ChainList({
                 {showTestnets && <MenuSectionHeader>{chainTypeNames[key as ChainType]}</MenuSectionHeader>}
                 <MenuList>
                   {networks.map((network) => (
-                    <MenuItem<number, typeof Link>
-                      data-testid={`menu-item-chain-${network.chainId}`}
-                      key={network.chainId}
-                      value={network.chainId}
+                    <MenuItem<string, typeof Link>
+                      data-testid={`menu-item-chain-${network.id}`}
+                      key={network.id}
+                      value={network.id}
                       component={Link}
                       href={getNetworkPathname(pathname, network.id)}
-                      isSelected={network.chainId == selectedNetwork?.chainId}
-                      icon={<ChainSwitcherIcon network={network} size={36} />}
+                      isSelected={network.id == selectedNetworkId}
+                      icon={<ChainSwitcherIcon networkId={network.id} size={36} />}
                       label={network.name}
                     />
                   ))}

packages/curve-ui-kit/src/features/switch-chain/ui/ChainSwitcher.tsx

@@ -7,11 +7,13 @@ import AlertTitle from '@mui/material/AlertTitle'
 import Container from '@mui/material/Container'
 import IconButton from '@mui/material/IconButton'
 import Snackbar from '@mui/material/Snackbar'
-import type { NetworkDef, NetworkMapping } from '@ui/utils'
+import { NetworkMapping } from '@ui/utils'
 import { useLayoutStore } from '@ui-kit/features/layout'
+import { usePathname } from '@ui-kit/hooks/router'
 import { useShowTestNets } from '@ui-kit/hooks/useLocalStorage'
 import { useSwitch } from '@ui-kit/hooks/useSwitch'
 import { t } from '@ui-kit/lib/i18n'
+import { getCurrentNetwork } from '@ui-kit/shared/routes'
 import { ModalDialog } from '@ui-kit/shared/ui/ModalDialog'
 import { ModalSettingsButton } from '@ui-kit/shared/ui/ModalSettingsButton'
 import { Duration } from '@ui-kit/themes/design/0_primitives'
@@ -20,16 +22,17 @@ import { ChainSettings } from './ChainSettings'
 import { ChainSwitcherIcon } from './ChainSwitcherIcon'
 
 export type ChainSwitcherProps = {
-  chainId: number
   networks: NetworkMapping
 }
 
-export const ChainSwitcher = ({ networks, chainId }: ChainSwitcherProps) => {
+export const ChainSwitcher = ({ networks }: ChainSwitcherProps) => {
+  const pathname = usePathname()
+  const networkId = getCurrentNetwork(pathname)
   const [isOpen, , close, toggle] = useSwitch()
   const [isSnackbarOpen, openSnackbar, hideSnackbar] = useSwitch()
   const [isSettingsOpen, openSettings, closeSettings] = useSwitch()
   const [showTestnets, setShowTestnets] = useShowTestNets()
-  useEffect(() => () => close(), [chainId, close]) // close on chain change
+  useEffect(() => () => close(), [networkId, close]) // close on chain change
 
   const options = useMemo(
     () =>
@@ -42,11 +45,10 @@ export const ChainSwitcher = ({ networks, chainId }: ChainSwitcherProps) => {
 
   const onClick = options.length > 1 ? toggle : openSnackbar
   const top = useLayoutStore((state) => state.navHeight)
-  const network: NetworkDef | undefined = networks[chainId] // the network may not be defined when switching apps
   return (
     <>
       <IconButton size="small" onClick={onClick} data-testid="btn-change-chain">
-        {network && <ChainSwitcherIcon network={network} />}
+        {networkId && <ChainSwitcherIcon networkId={networkId} />}
         {Object.values(options).length > 1 && <KeyboardArrowDownIcon />}
       </IconButton>
 
@@ -81,7 +83,7 @@ export const ChainSwitcher = ({ networks, chainId }: ChainSwitcherProps) => {
           {isSettingsOpen ? (
             <ChainSettings showTestnets={showTestnets} setShowTestnets={setShowTestnets} />
           ) : (
-            <ChainList showTestnets={showTestnets} options={options} selectedNetwork={network} />
+            <ChainList showTestnets={showTestnets} options={options} selectedNetworkId={networkId} />
           )}
         </ModalDialog>
       )}

packages/curve-ui-kit/src/features/switch-chain/ui/ChainSwitcherIcon.tsx

@@ -1,21 +1,21 @@
 import Box from '@mui/material/Box'
-import type { NetworkDef } from '@ui/utils'
+import { getBlockchainIconUrl } from '@ui/utils'
 
 type ChainIconProps = {
-  network: NetworkDef
+  networkId: string
   size?: number
 }
 
 /**
  * Display a chain icon for the chain switcher.
  * This is different from icons/ChainIcon because it requires a fixed size, some padding and no responsive design.
  */
-export const ChainSwitcherIcon = ({ network: { chainId, name, logoSrc }, size = 28 }: ChainIconProps) => (
-  <Box component="span" alignItems="center" display="flex" data-testid={`chain-icon-${chainId}`}>
+export const ChainSwitcherIcon = ({ networkId, size = 28 }: ChainIconProps) => (
+  <Box component="span" alignItems="center" display="flex" data-testid={`chain-icon-${networkId}`}>
     <img
-      alt={name}
+      alt={`${networkId} logo`}
       // onError={(evt) => (evt.target as HTMLImageElement).src = src}
-      src={logoSrc}
+      src={getBlockchainIconUrl(networkId)}
       loading="lazy"
       width={size}
       height={size}