Add multi-chain vault browsing

app.vue

@@ -11,7 +11,7 @@ const batchAnnouncementSeen = useLocalStorage('batch-announcement-seen', false)
 const modal = useModal()
 let isBatchAnnouncementOpen = false
 
-const { loadEulerConfig, chainId } = useEulerAddresses()
+const { loadEulerConfig, selectedChainIds } = useEulerAddresses()
 const { loadVaults, isReady: isVaultsReady, resetVaultsState, refreshVaults, setShowAllLabelEntries } = useVaults()
 const { loadTokenList, isLoaded: isTokenListLoaded } = useTokenList()
 const { loadLabels } = useEulerLabels()
@@ -133,17 +133,18 @@ watch(() => route.name, () => {
   nextTick(checkBatchAnnouncement)
 })
 
-watch([chainId, showAllLabelEntries], () => {
+watch([selectedChainIds, showAllLabelEntries], () => {
   setShowAllLabelEntries(showAllLabelEntries.value)
   resetVaultsState()
   resetBalances()
-  const targetChainId = chainId.value
+  const targetChainIds = selectedChainIds.value.join(',')
   const targetShowAll = showAllLabelEntries.value
   const labelsPromise = loadLabels()
   void loadTokenList()
   void loadCountry()
-  void labelsPromise.then(() => {
-    if (chainId.value !== targetChainId) return
+  void labelsPromise.then((loaded) => {
+    if (loaded === false) return
+    if (selectedChainIds.value.join(',') !== targetChainIds) return
     if (showAllLabelEntries.value !== targetShowAll) return
     void loadVaults()
   })

components/entities/asset/AssetAvatar.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { getAssetLogoUrl } from '~/composables/useTokenList'
 
-const { asset, size, iconUrl } = defineProps<{
-  asset: { address: string, symbol: string } | { address: string, symbol: string }[]
+const { asset, size, iconUrl, chainId } = defineProps<{
+  asset: { address: string, symbol: string, chainId?: number } | { address: string, symbol: string, chainId?: number }[]
   size?: '16' | '20' | '36' | '38' | '40' | '46'
   iconUrl?: string
+  chainId?: number
 }>()
 
 const sizeClass = computed(() => size ? `icon--${size}` : undefined)
 
 const src = computed(() => {
   if (iconUrl) return iconUrl
   if (Array.isArray(asset)) {
-    return asset.map(a => getAssetLogoUrl(a.address, a.symbol))
+    return asset.map(a => getAssetLogoUrl(a.address, a.symbol, a.chainId ?? chainId))
   }
-  return getAssetLogoUrl(asset.address, asset.symbol)
+  return getAssetLogoUrl(asset.address, asset.symbol, asset.chainId ?? chainId)
 })
 
 const label = computed(() => {

components/entities/chains/ChainSelectorItem.vue

@@ -4,6 +4,7 @@ import { getChainLogoUrl } from '~/utils/chain-logo'
 const props = defineProps<{
   chainId: number
   name: string
+  selected?: boolean
   deprecated?: boolean
 }>()
 
@@ -16,6 +17,16 @@ const logoSrc = computed(() => getChainLogoUrl(props.chainId))
     class="flex items-center w-full py-12 font-semibold leading-20 text-[16px] cursor-pointer"
     :class="props.deprecated ? 'text-content-tertiary' : ''"
   >
+    <span
+      class="mr-10 flex h-18 w-18 items-center justify-center rounded-4 border transition-colors"
+      :class="props.selected ? 'border-accent-600 bg-accent-600 text-content-inverse' : 'border-line-emphasis text-transparent'"
+      aria-hidden="true"
+    >
+      <SvgIcon
+        name="check"
+        class="!h-12 !w-12"
+      />
+    </span>
     <BaseAvatar
       class="mr-8 w-32 h-32 shadow-[inset_0_0_0_1px_var(--border-subtle)] rounded-full"
       :class="props.deprecated ? 'opacity-40' : ''"

components/entities/chains/SelectChainModal.vue

@@ -18,22 +18,20 @@ const deprecatedChains = computed(() =>
 )
 
 const showDeprecated = ref(false)
-const { changeChain } = useWagmi()
+const { selectedChainIds, toggleSelectedChainId } = useEulerAddresses()
 
 const handleClose = () => {
   emits('close')
 }
+const isSelected = (chainId: number) => selectedChainIds.value.includes(chainId)
 const onClick = (chainId: number) => {
-  emits('close')
-  setTimeout(() => {
-    changeChain(chainId)
-  }, 400)
+  toggleSelectedChainId(chainId)
 }
 </script>
 
 <template>
   <BaseModalWrapper
-    title="Select chain"
+    title="Select chains"
     @close="handleClose"
   >
     <div class="mb-24">
@@ -42,6 +40,7 @@ const onClick = (chainId: number) => {
         :key="chain.id"
         :chain-id="chain.id"
         :name="chain.name"
+        :selected="isSelected(chain.id)"
         @click="onClick(chain.id)"
       />
 
@@ -66,6 +65,7 @@ const onClick = (chainId: number) => {
             :key="chain.id"
             :chain-id="chain.id"
             :name="chain.name"
+            :selected="isSelected(chain.id)"
             deprecated
             @click="onClick(chain.id)"
           />

components/entities/vault/SecuritizeVaultItem.vue

@@ -9,21 +9,24 @@ import { withVaultIntrinsicApy, getVaultIntrinsicApy, getVaultIntrinsicApyInfo }
 import { formatNumber, formatCompactUsdValue } from '~/utils/string-utils'
 import { VaultSupplyApyModal, UiModalPreviewTrigger } from '#components'
 import BaseLoadableContent from '~/components/base/BaseLoadableContent.vue'
+import { getChainLogoUrl } from '~/utils/chain-logo'
 
 const { isConnected } = useWagmi()
 const { vault } = defineProps<{ vault: SecuritizeCollateralVault }>()
+const chainLogoSrc = computed(() => getChainLogoUrl(vault.chainId))
 
 const vaultAddress = computed(() => vault.address)
-const product = useEulerProductOfVault(vaultAddress)
+const vaultChainId = computed(() => vault.chainId)
+const product = useEulerProductOfVault(vaultAddress, vaultChainId)
 const { enableEntityBranding } = useDeployConfig()
 const { isVaultGovernorVerified } = useVaults()
 const { isVerifiedVault } = useVaultRegistry()
 // SecuritizeCollateralVault has governorAdmin, safe to cast for entity lookup
 const entities = useEulerEntitiesOfVault(vault as unknown as EVault)
 
-const isUnverified = computed(() => !isVerifiedVault(vault.address))
+const isUnverified = computed(() => !isVerifiedVault(vault.address, vault.chainId))
 const isGovernorVerified = computed(() => isVaultGovernorVerified(vault as unknown as EVault))
-const isGovernanceLimited = computed(() => isVaultGovernanceLimited(vault.address) && isGovernorVerified.value)
+const isGovernanceLimited = computed(() => isVaultGovernanceLimited(vault.address, vault.chainId) && isGovernorVerified.value)
 const entityName = computed(() => {
   if (!isGovernorVerified.value || entities.length === 0) return ''
   if (entities.length === 1) return entities[0].name
@@ -43,10 +46,10 @@ const enableIntrinsicApy = computed(() => settings.value.enableIntrinsicApy)
 const { getSupplyRewardApy, hasSupplyRewards, getSupplyRewardCampaigns } = useRewardsApy()
 
 const balance = computed(() =>
-  getBalance(vault.asset.address as `0x${string}`),
+  getBalance(vault.asset.address as `0x${string}`, vault.chainId),
 )
-const totalRewardsAPY = computed(() => getSupplyRewardApy(vault.address))
-const hasRewards = computed(() => hasSupplyRewards(vault.address))
+const totalRewardsAPY = computed(() => getSupplyRewardApy(vault.address, vault.chainId))
+const hasRewards = computed(() => hasSupplyRewards(vault.address, vault.chainId))
 const lendingAPY = computed(() =>
   getVaultSupplyApy(vault),
 )
@@ -62,7 +65,7 @@ const supplyApyModalData = computed(() => ({
     lendingAPY: lendingAPY.value,
     intrinsicAPY: getVaultIntrinsicApy(vault, enableIntrinsicApy.value),
     intrinsicApyInfo: getVaultIntrinsicApyInfo(vault, enableIntrinsicApy.value),
-    campaigns: getSupplyRewardCampaigns(vault.address),
+    campaigns: getSupplyRewardCampaigns(vault.address, vault.chainId),
     rewardVaultAddress: vault.address,
   },
 }))
@@ -97,7 +100,7 @@ watchEffect(async () => {
   <NuxtLink
     class="block no-underline text-content-primary bg-surface rounded-12 border border-line-default shadow-card hover:shadow-card-hover hover:border-line-emphasis transition-all"
     :class="isGeoBlocked ? 'opacity-50' : ''"
-    :to="{ path: `/lend/${vault.address}`, query: { network: $route.query.network } }"
+    :to="{ path: `/lend/${vault.address}`, query: { network: vault.chainId } }"
     data-id="vault-list-item"
     data-list="lend"
     :data-key="vault.address.toLowerCase()"
@@ -106,6 +109,7 @@ watchEffect(async () => {
     <div class="flex pb-12 p-16 border-b border-line-subtle">
       <AssetAvatar
         :asset="vault.asset"
+        :chain-id="vault.chainId"
         size="40"
       />
       <div class="flex-grow ml-12">
@@ -131,6 +135,11 @@ watchEffect(async () => {
           :data-value="vault.asset.symbol"
         >
           {{ vault.asset.symbol }}
+          <BaseAvatar
+            class="ml-8 inline-flex h-18 w-18 align-[-3px] shadow-[inset_0_0_0_1px_var(--border-subtle)] rounded-full"
+            :src="chainLogoSrc"
+            :label="String(vault.chainId)"
+          />
         </div>
       </div>
       <div class="flex flex-col items-end">