feat: hasta la vista identicons generated icons (#7409)

package.json

@@ -152,7 +152,6 @@
     "html-react-parser": "^1.4.14",
     "html5-qrcode": "^2.3.8",
     "https-browserify": "^1.0.0",
-    "identicon.js": "^2.3.3",
     "js-file-download": "^0.4.12",
     "js-pixel-fonts": "^1.6.0",
     "lightweight-charts": "^4.1.3",

packages/types/src/base.ts

@@ -51,7 +51,7 @@ export type Asset = {
   precision: number
   color: string
   networkColor?: string
-  icon: string
+  icon: string | undefined
   icons?: string[]
   networkIcon?: string
   explorer: string

scripts/generateAssetData/arbitrum/index.ts

@@ -4,7 +4,6 @@ import uniqBy from 'lodash/uniqBy'
 
 import { arbitrum } from '../baseAssets'
 import * as coingecko from '../coingecko'
-import { getRenderedIdenticonBase64 } from '../generateAssetIcon/generateAssetIcon'
 import { getPortalTokens } from '../utils/portals'
 
 export const getAssets = async (): Promise<Asset[]> => {
@@ -18,13 +17,6 @@ export const getAssets = async (): Promise<Asset[]> => {
     return []
   })
   const allAssets = uniqBy(assets.concat(portalsAssets).concat([arbitrum]), 'assetId')
-  return allAssets.map(asset => ({
-    ...asset,
-    icon:
-      asset.icon ||
-      getRenderedIdenticonBase64(asset.assetId, asset.symbol, {
-        identiconImage: { size: 128, background: [45, 55, 72, 255] },
-        identiconText: { symbolScale: 7, enableShadow: true },
-      }),
-  }))
+
+  return allAssets
 }

scripts/generateAssetData/arbitrumNova/index.ts

@@ -3,17 +3,9 @@ import type { Asset } from '@shapeshiftoss/types'
 
 import { arbitrumNova } from '../baseAssets'
 import * as coingecko from '../coingecko'
-import { getRenderedIdenticonBase64 } from '../generateAssetIcon/generateAssetIcon'
 
 export const getAssets = async (): Promise<Asset[]> => {
   const assets = await coingecko.getAssets(arbitrumNovaChainId)
-  return [...assets, arbitrumNova].map(asset => ({
-    ...asset,
-    icon:
-      asset.icon ||
-      getRenderedIdenticonBase64(asset.assetId, asset.symbol, {
-        identiconImage: { size: 128, background: [45, 55, 72, 255] },
-        identiconText: { symbolScale: 7, enableShadow: true },
-      }),
-  }))
+
+  return assets.concat([arbitrumNova])
 }

scripts/generateAssetData/avalanche/index.ts

@@ -4,7 +4,6 @@ import uniqBy from 'lodash/uniqBy'
 
 import { avax } from '../baseAssets'
 import * as coingecko from '../coingecko'
-import { getRenderedIdenticonBase64 } from '../generateAssetIcon/generateAssetIcon'
 import { getPortalTokens } from '../utils/portals'
 
 export const getAssets = async (): Promise<Asset[]> => {
@@ -21,13 +20,5 @@ export const getAssets = async (): Promise<Asset[]> => {
 
   const allAssets = uniqBy(assets.concat(portalsAssets).concat([avax]), 'assetId')
 
-  return allAssets.map(asset => ({
-    ...asset,
-    icon:
-      asset.icon ||
-      getRenderedIdenticonBase64(asset.assetId, asset.symbol, {
-        identiconImage: { size: 128, background: [45, 55, 72, 255] },
-        identiconText: { symbolScale: 7, enableShadow: true },
-      }),
-  }))
+  return allAssets
 }

scripts/generateAssetData/base/index.ts

@@ -4,7 +4,6 @@ import uniqBy from 'lodash/uniqBy'
 
 import { base } from '../baseAssets'
 import * as coingecko from '../coingecko'
-import { getRenderedIdenticonBase64 } from '../generateAssetIcon/generateAssetIcon'
 import { getPortalTokens } from '../utils/portals'
 
 export const getAssets = async (): Promise<Asset[]> => {
@@ -21,13 +20,5 @@ export const getAssets = async (): Promise<Asset[]> => {
 
   const allAssets = uniqBy(assets.concat(portalsAssets).concat([base]), 'assetId')
 
-  return allAssets.map(asset => ({
-    ...asset,
-    icon:
-      asset.icon ||
-      getRenderedIdenticonBase64(asset.assetId, asset.symbol, {
-        identiconImage: { size: 128, background: [45, 55, 72, 255] },
-        identiconText: { symbolScale: 7, enableShadow: true },
-      }),
-  }))
+  return allAssets
 }

scripts/generateAssetData/bnbsmartchain/index.ts

@@ -4,7 +4,6 @@ import uniqBy from 'lodash/uniqBy'
 
 import { bnbsmartchain } from '../baseAssets'
 import * as coingecko from '../coingecko'
-import { getRenderedIdenticonBase64 } from '../generateAssetIcon/generateAssetIcon'
 // import { getPortalTokens } from '../utils/portals'
 
 export const getAssets = async (): Promise<Asset[]> => {
@@ -22,13 +21,5 @@ export const getAssets = async (): Promise<Asset[]> => {
 
   const allAssets = uniqBy(assets.concat(portalsAssets).concat([bnbsmartchain]), 'assetId')
 
-  return allAssets.map(asset => ({
-    ...asset,
-    icon:
-      asset.icon ||
-      getRenderedIdenticonBase64(asset.assetId, asset.symbol, {
-        identiconImage: { size: 128, background: [45, 55, 72, 255] },
-        identiconText: { symbolScale: 7, enableShadow: true },
-      }),
-  }))
+  return allAssets
 }

scripts/generateAssetData/cosmos/index.ts

@@ -4,8 +4,6 @@ import axios from 'axios'
 
 import { atom } from '../baseAssets'
 import { colorMap } from '../colorMap'
-import type { IdenticonOptions } from '../generateAssetIcon/generateAssetIcon'
-import { getRenderedIdenticonBase64 } from '../generateAssetIcon/generateAssetIcon'
 
 type CosmosAsset = {
   denom: string
@@ -71,23 +69,6 @@ export const getAssets = async (): Promise<Asset[]> => {
       relatedAssetKey: null,
     }
 
-    if (!assetDatum.icon) {
-      const options: IdenticonOptions = {
-        identiconImage: {
-          size: 128,
-          background: [45, 55, 72, 255],
-        },
-        identiconText: {
-          symbolScale: 7,
-          enableShadow: true,
-        },
-      }
-      assetDatum.icon = getRenderedIdenticonBase64(
-        assetDatum.assetId,
-        assetDatum.symbol.substring(0, 3),
-        options,
-      )
-    }
     acc.push(assetDatum)
 
     return acc

scripts/generateAssetData/ethereum/index.ts

@@ -7,8 +7,6 @@ import uniqBy from 'lodash/uniqBy'
 
 import { ethereum } from '../baseAssets'
 import * as coingecko from '../coingecko'
-import type { IdenticonOptions } from '../generateAssetIcon/generateAssetIcon'
-import { getRenderedIdenticonBase64 } from '../generateAssetIcon/generateAssetIcon'
 import { generateTrustWalletUrl } from '../generateTrustWalletUrl/generateTrustWalletUrl'
 // import { getPortalTokens } from '../utils/portals'
 import { getIdleTokens } from './idleVaults'
@@ -77,24 +75,7 @@ export const getAssets = async (): Promise<Asset[]> => {
     const newModifiedTokens = result.map((res, idx) => {
       const key = i * batchSize + idx
       if (res.status === 'rejected') {
-        if (!uniqueAssets[key].icon) {
-          const options: IdenticonOptions = {
-            identiconImage: {
-              size: 128,
-              background: [45, 55, 72, 255],
-            },
-            identiconText: {
-              symbolScale: 7,
-              enableShadow: true,
-            },
-          }
-          uniqueAssets[key].icon = getRenderedIdenticonBase64(
-            uniqueAssets[key].assetId,
-            uniqueAssets[key].symbol.substring(0, 3),
-            options,
-          )
-        }
-        return uniqueAssets[key] // token without modified icon
+        return uniqueAssets[key]
       } else {
         const { icon } = generateTrustWalletUrl(uniqueAssets[key].assetId)
         return { ...uniqueAssets[key], icon }

scripts/generateAssetData/ethereum/uniswapV2Pools.ts

@@ -1,6 +1,6 @@
 import { type AssetId, ethAssetId, ethChainId } from '@shapeshiftoss/caip'
 import { toAssetId } from '@shapeshiftoss/caip/src/assetId/assetId'
-import type { Asset, AssetsByIdPartial, PartialRecord } from '@shapeshiftoss/types'
+import type { Asset, AssetsById, AssetsByIdPartial, PartialRecord } from '@shapeshiftoss/types'
 import { makeAsset } from '@shapeshiftoss/utils'
 import type { AxiosRequestConfig } from 'axios'
 import axios from 'axios'
@@ -46,7 +46,7 @@ const headers = {
   authorization,
 }
 
-const assets = generatedAssetData as Record<AssetId, Asset>
+const assets = generatedAssetData as unknown as AssetsById
 
 export const getUniswapV2Pools = async () => {
   const evmNetworks = [chainIdToZapperNetwork(ethChainId)]

scripts/generateAssetData/gnosis/index.ts

@@ -4,7 +4,6 @@ import uniqBy from 'lodash/uniqBy'
 
 import { gnosis } from '../baseAssets'
 import * as coingecko from '../coingecko'
-import { getRenderedIdenticonBase64 } from '../generateAssetIcon/generateAssetIcon'
 import { getPortalTokens } from '../utils/portals'
 
 export const getAssets = async (): Promise<Asset[]> => {
@@ -15,13 +14,5 @@ export const getAssets = async (): Promise<Asset[]> => {
 
   const allAssets = uniqBy(assets.concat(portalsAssets).concat([gnosis]), 'assetId')
 
-  return allAssets.map(asset => ({
-    ...asset,
-    icon:
-      asset.icon ||
-      getRenderedIdenticonBase64(asset.assetId, asset.symbol, {
-        identiconImage: { size: 128, background: [45, 55, 72, 255] },
-        identiconText: { symbolScale: 7, enableShadow: true },
-      }),
-  }))
+  return allAssets
 }

scripts/generateAssetData/optimism/index.ts

@@ -4,7 +4,6 @@ import uniqBy from 'lodash/uniqBy'
 
 import { optimism } from '../baseAssets'
 import * as coingecko from '../coingecko'
-import { getRenderedIdenticonBase64 } from '../generateAssetIcon/generateAssetIcon'
 import { getPortalTokens } from '../utils/portals'
 
 export const getAssets = async (): Promise<Asset[]> => {
@@ -21,13 +20,5 @@ export const getAssets = async (): Promise<Asset[]> => {
 
   const allAssets = uniqBy(assets.concat(portalsAssets).concat([optimism]), 'assetId')
 
-  return allAssets.map(asset => ({
-    ...asset,
-    icon:
-      asset.icon ||
-      getRenderedIdenticonBase64(asset.assetId, asset.symbol, {
-        identiconImage: { size: 128, background: [45, 55, 72, 255] },
-        identiconText: { symbolScale: 7, enableShadow: true },
-      }),
-  }))
+  return allAssets
 }