feat: don't include asset data in bundle

packages/chain-adapters/src/evm/base/BaseChainAdapter.test.ts

@@ -15,6 +15,10 @@ import { toAddressNList } from '../../utils'
 import type { ChainAdapterArgs } from '../EvmBaseAdapter'
 import * as base from './BaseChainAdapter'
 
+vi.mock('../../utils/validateAddress', () => ({
+  assertAddressNotSanctioned: vi.fn(),
+}))
+
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 const EOA_ADDRESS = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'
 

packages/chain-adapters/src/evm/optimism/OptimismChainAdapter.test.ts

@@ -15,6 +15,10 @@ import { toAddressNList } from '../../utils'
 import type { ChainAdapterArgs } from '../EvmBaseAdapter'
 import * as optimism from './OptimismChainAdapter'
 
+vi.mock('../../utils/validateAddress', () => ({
+  assertAddressNotSanctioned: vi.fn(),
+}))
+
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 const EOA_ADDRESS = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'
 

public/generated/asset-manifest.json

@@ -0,0 +1,4 @@
+{
+  "assetData": "0d99b638",
+  "relatedAssetIndex": "94703324"
+}

scripts/generateAssetData/constants.ts

@@ -1,11 +1,7 @@
 import path from 'path'
 
-export const ASSET_DATA_PATH = path.join(
-  __dirname,
-  '../../src/lib/asset-service/service/encodedAssetData.json',
-)
+export const GENERATED_DIR = path.join(__dirname, '../../public/generated')
 
-export const RELATED_ASSET_INDEX_PATH = path.join(
-  __dirname,
-  '../../src/lib/asset-service/service/encodedRelatedAssetIndex.json',
-)
+export const ASSET_DATA_PATH = path.join(GENERATED_DIR, 'generatedAssetData.json')
+
+export const RELATED_ASSET_INDEX_PATH = path.join(GENERATED_DIR, 'relatedAssetIndex.json')

scripts/generateAssetData/generateAssetData.ts

@@ -7,11 +7,7 @@ import {
   atom,
   bitcoin,
   bitcoincash,
-  decodeAssetData,
-  decodeRelatedAssetIndex,
   dogecoin,
-  encodeAssetData,
-  encodeRelatedAssetIndex,
   litecoin,
   maya,
   mayachain,
@@ -21,16 +17,18 @@ import {
   unfreeze,
   zcash,
 } from '@shapeshiftoss/utils'
+import crypto from 'crypto'
 import fs from 'fs'
 import merge from 'lodash/merge'
 import orderBy from 'lodash/orderBy'
+import path from 'path'
 
 import * as arbitrum from './arbitrum'
 import * as arbitrumNova from './arbitrumNova'
 import * as avalanche from './avalanche'
 import * as base from './base'
 import * as bnbsmartchain from './bnbsmartchain'
-import { ASSET_DATA_PATH, RELATED_ASSET_INDEX_PATH } from './constants'
+import { ASSET_DATA_PATH, GENERATED_DIR, RELATED_ASSET_INDEX_PATH } from './constants'
 import * as ethereum from './ethereum'
 import { generateRelatedAssetIndex } from './generateRelatedAssetIndex/generateRelatedAssetIndex'
 import * as gnosis from './gnosis'
@@ -45,10 +43,18 @@ import * as sui from './sui'
 import * as tronModule from './tron'
 import { filterOutBlacklistedAssets, getSortedAssetIds } from './utils'
 
+import { getAssetService } from '@/lib/asset-service'
+
 // To regenerate all relatedAssetKey values, run: REGEN_ALL=true yarn generate:asset-data
 const REGEN_ALL = process.env.REGEN_ALL === 'true'
 
 const generateAssetData = async () => {
+  // Ensure the generated directory exists
+  await fs.promises.mkdir(GENERATED_DIR, { recursive: true })
+
+  // Initialize AssetService with existing data (needed by portals and other asset generators)
+  await getAssetService()
+
   const ethAssets = await ethereum.getAssets()
   const avalancheAssets = await avalanche.getAssets()
   const optimismAssets = await optimism.getAssets()
@@ -101,8 +107,15 @@ const generateAssetData = async () => {
   // deterministic order so diffs are readable
   const orderedAssetList = orderBy(filteredAssetData, 'assetId')
 
-  const encodedAssetData = JSON.parse(await fs.promises.readFile(ASSET_DATA_PATH, 'utf8'))
-  const { assetData: currentGeneratedAssetData } = decodeAssetData(encodedAssetData)
+  let currentGeneratedAssetData: AssetsById = {}
+  if (!REGEN_ALL) {
+    try {
+      const existingAssetDataJson = JSON.parse(await fs.promises.readFile(ASSET_DATA_PATH, 'utf8'))
+      currentGeneratedAssetData = existingAssetDataJson.byId || {}
+    } catch (err) {
+      console.warn('No existing asset data found, doing full regeneration')
+    }
+  }
 
   const generatedAssetData = orderedAssetList.reduce<AssetsById>((acc, asset) => {
     const currentGeneratedAssetId = currentGeneratedAssetData[asset.assetId]
@@ -148,44 +161,47 @@ const generateAssetData = async () => {
 
   const sortedAssetIds = await getSortedAssetIds(assetsWithOverridesApplied)
 
-  // Encode the assets for minimal size while preserving ordering
-  const reEncodedAssetData = encodeAssetData(sortedAssetIds, assetsWithOverridesApplied)
-  await fs.promises.writeFile(ASSET_DATA_PATH, JSON.stringify(reEncodedAssetData))
+  const outputData = { byId: assetsWithOverridesApplied, ids: sortedAssetIds }
+  await fs.promises.writeFile(ASSET_DATA_PATH, JSON.stringify(outputData, null, 2))
 
   return { sortedAssetIds, assetData: assetsWithOverridesApplied }
 }
 
 const readRelatedAssetIndex = () => {
-  const encodedAssetData = JSON.parse(fs.readFileSync(ASSET_DATA_PATH, 'utf8'))
-  const encodedRelatedAssetIndex = JSON.parse(fs.readFileSync(RELATED_ASSET_INDEX_PATH, 'utf8'))
+  const relatedAssetIndexJson = JSON.parse(fs.readFileSync(RELATED_ASSET_INDEX_PATH, 'utf8'))
+  return relatedAssetIndexJson
+}
 
-  const { sortedAssetIds: originalSortedAssetIds } = decodeAssetData(encodedAssetData)
-  const relatedAssetIndex = decodeRelatedAssetIndex(
-    encodedRelatedAssetIndex,
-    originalSortedAssetIds,
+const writeRelatedAssetIndex = (relatedAssetIndex: Record<AssetId, AssetId[]>) => {
+  const filteredOutputData = Object.fromEntries(
+    Object.entries(relatedAssetIndex).filter(([_, value]) => value !== undefined),
   )
 
-  return relatedAssetIndex
+  fs.writeFileSync(RELATED_ASSET_INDEX_PATH, JSON.stringify(filteredOutputData, null, 2))
 }
 
-const reEncodeAndWriteRelatedAssetIndex = (
-  originalRelatedAssetIndex: Record<AssetId, AssetId[]>,
-  updatedSortedAssetIds: AssetId[],
-) => {
-  const updatedEncodedRelatedAssetIndex = encodeRelatedAssetIndex(
-    originalRelatedAssetIndex,
-    updatedSortedAssetIds,
-  )
+const generateManifest = async () => {
+  const assetDataHash = crypto
+    .createHash('sha256')
+    .update(await fs.promises.readFile(ASSET_DATA_PATH, 'utf8'))
+    .digest('hex')
+    .slice(0, 8)
+
+  const relatedAssetIndexHash = crypto
+    .createHash('sha256')
+    .update(await fs.promises.readFile(RELATED_ASSET_INDEX_PATH, 'utf8'))
+    .digest('hex')
+    .slice(0, 8)
+
+  const manifest = {
+    assetData: assetDataHash,
+    relatedAssetIndex: relatedAssetIndexHash,
+  }
 
-  // Remove any undefined values from the updated encoded related asset index
-  const filteredUpdatedEncodedRelatedAssetIndex = Object.fromEntries(
-    Object.entries(updatedEncodedRelatedAssetIndex).filter(([_, value]) => value !== undefined),
-  )
+  const manifestPath = path.join(GENERATED_DIR, 'asset-manifest.json')
+  await fs.promises.writeFile(manifestPath, JSON.stringify(manifest, null, 2))
 
-  fs.writeFileSync(
-    RELATED_ASSET_INDEX_PATH,
-    JSON.stringify(filteredUpdatedEncodedRelatedAssetIndex),
-  )
+  console.info('Generated asset-manifest.json with content hashes')
 }
 
 const main = async () => {
@@ -194,22 +210,17 @@ const main = async () => {
     const originalRelatedAssetIndex = readRelatedAssetIndex()
 
     // Generate the new assetData and sortedAssetIds
-    const { sortedAssetIds: updatedSortedAssetIds } = await generateAssetData()
-
-    // We need to update the relatedAssetIndex to match the new asset ordering:
-    // - The original relatedAssetIndex references assets by their index in the original
-    //   sortedAssetIds array
-    // - After regenerating assetData, the positions in the sortedAssetIds may have changed, which
-    //   means a given index in the relatedAssetIndex will point to a different asset in the new
-    //   sortedAssetIds
-    // - To prevent corruption, we rewrite the relatedAssetIndex using the new positions, resulting
-    //   in a new relatedAssetIndex that references assets by their index in the updated
-    //   sortedAssetIds
-    reEncodeAndWriteRelatedAssetIndex(originalRelatedAssetIndex, updatedSortedAssetIds)
+    await generateAssetData()
+
+    // Write the related asset index
+    writeRelatedAssetIndex(originalRelatedAssetIndex)
 
     // Generate the new related asset index
     await generateRelatedAssetIndex()
 
+    // Generate manifest with content hashes for cache busting
+    await generateManifest()
+
     console.info('Assets and related assets data generated.')
 
     process.exit(0)

scripts/generateAssetData/generateRelatedAssetIndex/generateRelatedAssetIndex.ts

@@ -12,14 +12,7 @@ import {
   optimismAssetId,
 } from '@shapeshiftoss/caip'
 import type { Asset } from '@shapeshiftoss/types'
-import {
-  createThrottle,
-  decodeAssetData,
-  decodeRelatedAssetIndex,
-  encodeAssetData,
-  encodeRelatedAssetIndex,
-  isToken,
-} from '@shapeshiftoss/utils'
+import { createThrottle, isToken } from '@shapeshiftoss/utils'
 import axios from 'axios'
 import axiosRetry from 'axios-retry'
 import fs from 'fs'
@@ -424,15 +417,22 @@ const processRelatedAssetIds = async (
 export const generateRelatedAssetIndex = async () => {
   console.log('generateRelatedAssetIndex() starting')
 
-  const encodedAssetData = JSON.parse(await fs.promises.readFile(ASSET_DATA_PATH, 'utf8'))
-  const encodedRelatedAssetIndex = JSON.parse(
+  const assetDataJson = JSON.parse(await fs.promises.readFile(ASSET_DATA_PATH, 'utf8'))
+  const relatedAssetIndexJson = JSON.parse(
     await fs.promises.readFile(RELATED_ASSET_INDEX_PATH, 'utf8'),
   )
 
-  const { assetData: generatedAssetData, sortedAssetIds } = decodeAssetData(encodedAssetData)
-  const relatedAssetIndex = REGEN_ALL
-    ? {}
-    : decodeRelatedAssetIndex(encodedRelatedAssetIndex, sortedAssetIds)
+  if (!assetDataJson.byId || !assetDataJson.ids) {
+    throw new Error(
+      `Invalid asset data structure: expected { byId, ids } but got ${JSON.stringify(
+        Object.keys(assetDataJson),
+      )}`,
+    )
+  }
+
+  const generatedAssetData: Record<AssetId, Asset> = assetDataJson.byId
+  const sortedAssetIds: AssetId[] = assetDataJson.ids
+  const relatedAssetIndex: Record<AssetId, AssetId[]> = REGEN_ALL ? {} : relatedAssetIndexJson
 
   // Remove stale related asset data from the assetData where the primary related asset no longer exists
   Object.values(generatedAssetData).forEach(asset => {
@@ -485,11 +485,11 @@ export const generateRelatedAssetIndex = async () => {
 
   clearThrottleInterval()
 
-  const reEncodedRelatedAssetIndex = encodeRelatedAssetIndex(relatedAssetIndex, sortedAssetIds)
-  const reEncodedAssetData = encodeAssetData(sortedAssetIds, generatedAssetData)
-
-  await fs.promises.writeFile(ASSET_DATA_PATH, JSON.stringify(reEncodedAssetData))
-  await fs.promises.writeFile(RELATED_ASSET_INDEX_PATH, JSON.stringify(reEncodedRelatedAssetIndex))
+  await fs.promises.writeFile(
+    ASSET_DATA_PATH,
+    JSON.stringify({ byId: generatedAssetData, ids: sortedAssetIds }, null, 2),
+  )
+  await fs.promises.writeFile(RELATED_ASSET_INDEX_PATH, JSON.stringify(relatedAssetIndex, null, 2))
 
   console.info(`generateRelatedAssetIndex() done. Successes: ${happyCount}, Failures: ${sadCount}`)
   return

src/components/AssetSelection/components/AssetChainDropdown/AssetChainDropdown.tsx

@@ -20,6 +20,7 @@ import { AssetChainRow } from './AssetChainRow'
 
 import { getStyledMenuButtonProps } from '@/components/AssetSelection/helpers'
 import { useModalChildZIndex } from '@/context/ModalStackProvider'
+import { usePlugins } from '@/context/PluginProvider/PluginProvider'
 import { useWallet } from '@/hooks/useWallet/useWallet'
 import { assertGetChainAdapter } from '@/lib/utils'
 import { portfolio } from '@/state/slices/portfolioSlice/portfolioSlice'
@@ -64,6 +65,7 @@ export const AssetChainDropdown: React.FC<AssetChainDropdownProps> = memo(
     const {
       state: { wallet },
     } = useWallet()
+    const { supportedChains } = usePlugins()
     const translate = useTranslate()
     const modalChildZIndex = useModalChildZIndex()
     const chainDisplayName = useAppSelector(state =>
@@ -190,7 +192,10 @@ export const AssetChainDropdown: React.FC<AssetChainDropdownProps> = memo(
       return translate('trade.tooltip.noRelatedAssets', { chainDisplayName })
     }, [chainDisplayName, translate])
 
-    if (!assetId || isLoading) return <AssetRowLoading {...buttonProps} />
+    const assetChainId = assetId ? fromAssetId(assetId).chainId : undefined
+    if (!assetId || isLoading || (assetChainId && !supportedChains.includes(assetChainId))) {
+      return <AssetRowLoading {...buttonProps} />
+    }
 
     return (
       <Menu isLazy>

src/context/AppProvider/AppContext.tsx

@@ -1,8 +1,9 @@
 import { usePrevious, useToast } from '@chakra-ui/react'
 import type { AssetId } from '@shapeshiftoss/caip'
+import { btcAssetId, ethAssetId, foxAssetId, usdcAssetId } from '@shapeshiftoss/caip'
 import type { LedgerOpenAppEventArgs } from '@shapeshiftoss/chain-adapters'
 import { emitter } from '@shapeshiftoss/chain-adapters'
-import { useQueries } from '@tanstack/react-query'
+import { useQueries, useQuery } from '@tanstack/react-query'
 import difference from 'lodash/difference'
 import React, { useEffect, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
@@ -24,7 +25,10 @@ import { useTransactionsSubscriber } from '@/hooks/useTransactionsSubscriber'
 import { useUser } from '@/hooks/useUser/useUser'
 import { useWallet } from '@/hooks/useWallet/useWallet'
 import { walletSupportsChain } from '@/hooks/useWalletSupportsChain/useWalletSupportsChain'
+import { getAssetService, initAssetService } from '@/lib/asset-service'
 import { useGetFiatRampsQuery } from '@/state/apis/fiatRamps/fiatRamps'
+import { assets } from '@/state/slices/assetsSlice/assetsSlice'
+import { limitOrderInput } from '@/state/slices/limitOrderInputSlice/limitOrderInputSlice'
 import {
   marketApi,
   useFindAllMarketDataQuery,
@@ -39,6 +43,7 @@ import {
   selectWalletId,
 } from '@/state/slices/selectors'
 import { tradeInput } from '@/state/slices/tradeInputSlice/tradeInputSlice'
+import { tradeRampInput } from '@/state/slices/tradeRampInputSlice/tradeRampInputSlice'
 import { useAppDispatch, useAppSelector } from '@/state/store'
 
 const MARKET_DATA_POLLING_INTERVAL_MS = 60 * 1000 // refetch market-data every minute
@@ -78,6 +83,57 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   // Initialize user system
   useUser()
 
+  // Initialize asset service and populate Redux with assets
+  const { isError: isAssetServiceError } = useQuery({
+    queryKey: ['assetService'],
+    queryFn: async () => {
+      await initAssetService()
+      const service = getAssetService()
+
+      dispatch(
+        assets.actions.upsertAssets({
+          byId: service.assetsById,
+          ids: service.assetIds,
+        }),
+      )
+      dispatch(assets.actions.setRelatedAssetIndex(service.relatedAssetIndex))
+
+      const btcAsset = service.assetsById[btcAssetId]
+      const ethAsset = service.assetsById[ethAssetId]
+      if (btcAsset && ethAsset) {
+        dispatch(tradeInput.actions.setBuyAsset(btcAsset))
+        dispatch(tradeInput.actions.setSellAsset(ethAsset))
+        dispatch(tradeRampInput.actions.setBuyAsset(btcAsset))
+        dispatch(tradeRampInput.actions.setSellAsset(ethAsset))
+      }
+
+      const foxAsset = service.assetsById[foxAssetId]
+      const usdcAsset = service.assetsById[usdcAssetId]
+      if (foxAsset && usdcAsset) {
+        dispatch(limitOrderInput.actions.setBuyAsset(foxAsset))
+        dispatch(limitOrderInput.actions.setSellAsset(usdcAsset))
+      }
+
+      return null
+    },
+    staleTime: Infinity,
+    gcTime: Infinity,
+  })
+
+  // Show error toast if asset loading fails
+  useEffect(() => {
+    if (isAssetServiceError) {
+      toast({
+        position: 'top-right',
+        title: translate('common.somethingWentWrong'),
+        description: translate('common.somethingWentWrongBody'),
+        status: 'error',
+        duration: null,
+        isClosable: true,
+      })
+    }
+  }, [isAssetServiceError, toast, translate])
+
   useEffect(() => {
     const handleLedgerOpenApp = ({ chainId, reject }: LedgerOpenAppEventArgs) => {
       const onCancel = () => {