Pyke 210 use new cats api from jarvan in hoogii (#170)

config/defaultCATs.json

@@ -2,7 +2,7 @@
     "Mainnet": [
         {
             "assetId": "6d95dae356e32a71db5ddcb42224754a02524c615c5fc35f568c2af04774e589",
-            "code": "USDS",
+            "code": "USDSC",
             "iconUrl": "https://image.hashgreen.net/image/uat/1675738259_LtSFI.png"
         }
     ],
@@ -14,4 +14,4 @@
         }
     ],
     "Develop": []
-}
+}

src/api/api.ts

@@ -3,15 +3,11 @@ import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
 import { registerMessageHandler } from 'axios-chrome-messaging-adapter'
 import { toast } from 'react-toastify'
 
-import {
-    IMarket,
-    IResponseData,
-    ITransaction,
-    RequestConfig,
-} from '~/types/api'
+import { IAsset, IResponseData, ITransaction, RequestConfig } from '~/types/api'
 import { ChainEnum } from '~/types/chia'
+import { Asset } from '~/types/entities'
 import { apiEndpointSets } from '~/utils/constants'
-import { getErrorMessage, ToastOption } from '~/utils/errorMessage'
+import { getErrorMessage, toastOption } from '~/utils/errorMessage'
 import { getStorage } from '~/utils/extension/storage'
 
 /** -------------------------- Full Node API -------------------------- */
@@ -38,7 +34,7 @@ export async function apiHandler<T = any>(
         if (config.isShowToast) {
             const message = getErrorMessage(resError)
             toast.error(message, {
-                ...ToastOption,
+                ...toastOption,
                 toastId: resError?.response?.data?.code?.toString() ?? 'none',
             })
         }
@@ -88,6 +84,15 @@ export const getFeesEstimate = (
 /** -----------------------
  * --- Jarvan addon API -------------------------- */
 
+export const callGetCATs = async () => {
+    const res = await apiHandler<IResponseData<IAsset[]>>({
+        url:
+            apiEndpointSets[await getStorage<string>('chainId')]?.newJarvan +
+            '/cats?catType=2&size=0',
+    })
+    return res.data.data?.map((item) => new Asset(item))
+}
+
 export const sendTx = (
     params: AxiosRequestConfig,
     config: RequestConfig = { isShowToast: false }
@@ -165,17 +170,6 @@ export const callGetAblyAccessToken = (formData) =>
         data: formData,
     })
 /** -------------------------- Jarvan addon API END -------------------------- */
-/** -------------------------- Zed API -------------------------- */
-export const callGetMarkets = async () =>
-    apiHandler<AxiosResponse<IMarket[]>>({
-        url:
-            apiEndpointSets[await getStorage<string>('chainId')]?.zed +
-            '/markets',
-
-        method: 'get',
-    })
-
-/** -------------------------- Zed API END -------------------------- */
 
 /** -------------------------- Spacescan API -------------------------- */
 export const callGetExchangeRate = (assetId: string) =>

src/components/List.tsx

@@ -1,8 +1,8 @@
 // src/SelectedAssetList.tsx
 
-import { ICryptocurrency } from '~/types/api'
+import { Asset } from '~/types/entities'
 interface ISelectedAssetList {
-    assets: ICryptocurrency[]
+    assets: Asset[]
     onRemove: (id: string) => void
 }
 
@@ -11,13 +11,13 @@ export const SelectedAssetList = ({ assets, onRemove }: ISelectedAssetList) => {
         <div className=" p-4 w-full bg-primary-100 flex flex-col    h-[300px] rounded-lg overflow-y-scroll ">
             {assets.map((asset) => (
                 <div
-                    key={asset.asset_id}
-                    id={asset.asset_id}
+                    key={asset.assetId}
+                    id={asset.assetId}
                     className="flex items-center justify-between w-full h-10 py-2"
                 >
                     <div className="flex flex-row w-full gap-2">
                         <img
-                            src={asset.icon_url}
+                            src={asset.icon}
                             alt={asset.code}
                             className="w-6 h-6"
                         />
@@ -28,7 +28,7 @@ export const SelectedAssetList = ({ assets, onRemove }: ISelectedAssetList) => {
                     <img
                         className="cursor-pointer"
                         src="/images/icons/close-rounded.svg"
-                        onClick={() => onRemove(asset.asset_id)}
+                        onClick={() => onRemove(asset.assetId)}
                     />
                 </div>
             ))}

src/components/Transaction/AssetDisplay.tsx

@@ -30,7 +30,7 @@ const AssetDisplay = ({
 
                 const finsAsset = availableAssets?.data?.find(
                     (availableAsset) =>
-                        add0x(availableAsset.asset_id) === assetId
+                        add0x(availableAsset.assetId) === assetId
                 )
 
                 const name = existAsset?.code || finsAsset?.name
@@ -42,7 +42,7 @@ const AssetDisplay = ({
                     >
                         <div className="flex items-center  leading-0">
                             <AssetIcon
-                                src={finsAsset?.icon_url}
+                                src={finsAsset?.icon || existAsset?.iconUrl}
                                 assetId={assetId}
                                 className="w-6 h-6 mr-1"
                             />

src/components/Transaction/Transaction.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import { format } from 'date-fns'
+import { toJS } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -56,16 +57,17 @@ const Transaction = ({
         assetsStore: { availableAssets, XCH, existedAssets },
     } = rootStore
     const existAsset = existedAssets.find(
-        (asset) => add0x(asset.assetId) === assetId
+        (asset) => add0x(asset.assetId) === add0x(assetId)
     )
 
     const asset = useMemo(
         () =>
             availableAssets.data.find(
-                (asset) => add0x(asset.asset_id) === assetId
+                (asset) => add0x(asset.assetId) === add0x(assetId)
             ),
         [assetId, availableAssets.data]
     )
+    console.log('assetId', assetId, toJS(existAsset), toJS(asset))
 
     const isTransfer =
         txType === ITxType.TX_TYPE_CAT_TRANSFER ||

src/container/ImportCAT/ImportCAT.tsx

@@ -10,7 +10,7 @@ import SearchBar from '~/components/SearchBar'
 import BackLink from '~/layouts/BackLink'
 import { useClosablePage } from '~/layouts/ClosablePage'
 import rootStore from '~/store'
-import { ICryptocurrency } from '~/types/api'
+import { Asset } from '~/types/entities'
 import { fuseOptions, search } from '~/utils/fuse'
 import BottomIcon from '~icons/hoogii/bottom.jsx'
 
@@ -23,7 +23,7 @@ function ImportCAT() {
     const {
         assetsStore: { existedAssets, availableAssets },
     } = rootStore
-    const [selected, setSelected] = useState<ICryptocurrency[]>([])
+    const [selected, setSelected] = useState<Asset[]>([])
 
     const [toggleSelectedList, setToggleSelectedList] = useState(false)
 
@@ -34,16 +34,16 @@ function ImportCAT() {
 
     const filteredAssets = useMemo(
         () =>
-            search<ICryptocurrency>(
+            search<Asset>(
                 keyword,
                 availableAssets.data,
-                fuseOptions(['asset_id', 'code', 'name'])
+                fuseOptions(['assetId', 'code', 'name'])
             ),
         [keyword, availableAssets.data]
     )
 
     const handleRemoveSelected = (id: string) => {
-        const newSelected = selected.filter((item) => item.asset_id !== id)
+        const newSelected = selected.filter((item) => item.assetId !== id)
 
         setSelected(newSelected)
 
@@ -72,11 +72,11 @@ function ImportCAT() {
                 ],
             })
 
-            selected.forEach(({ asset_id, code, icon_url }) =>
+            selected.forEach(({ assetId, code, icon }) =>
                 rootStore.walletStore.db.assets.add({
-                    assetId: asset_id,
+                    assetId,
                     code,
-                    iconUrl: icon_url,
+                    iconUrl: icon,
                 })
             )
         }
@@ -142,32 +142,32 @@ function ImportCAT() {
                                 <div className="flex flex-col gap-2 overflow-auto">
                                     {filteredAssets.map((item, index) => (
                                         <AssetItem
-                                            key={`${item.asset_id}_${index}`}
+                                            key={`${item.assetId}_${index}`}
                                             asset={{
-                                                assetId: item.asset_id,
+                                                assetId: item.assetId,
                                                 code: item.code,
-                                                iconUrl: item.icon_url,
+                                                iconUrl: item.icon,
                                             }}
                                             active={selected.some(
                                                 (e) =>
-                                                    e.asset_id === item.asset_id
+                                                    e.assetId === item.assetId
                                             )}
                                             disabled={existedAssetIds?.some(
-                                                (id) => id === item.asset_id
+                                                (id) => id === item.assetId
                                             )}
                                             onClick={() => {
                                                 if (
                                                     selected.some(
                                                         (e) =>
-                                                            e.asset_id ===
-                                                            item.asset_id
+                                                            e.assetId ===
+                                                            item.assetId
                                                     )
                                                 ) {
                                                     setSelected([
                                                         ...selected.filter(
                                                             (e) =>
-                                                                e.asset_id !==
-                                                                item.asset_id
+                                                                e.assetId !==
+                                                                item.assetId
                                                         ),
                                                     ])
                                                 } else {

src/container/ImportCAT/components/CustomPage.tsx

@@ -12,7 +12,7 @@ import { sendMeasurement } from '~/api/ga'
 // import AssetIcon from '~/components/AssetIcon'
 import ErrorMessage from '~/components/ErrorMessage'
 import rootStore from '~/store'
-import { ICryptocurrency } from '~/types/api'
+import { Asset } from '~/types/entities'
 import { fuseOptions, search } from '~/utils/fuse'
 
 interface IForm {
@@ -94,10 +94,10 @@ const CustomPage = () => {
 
     const searchResults = useMemo(() => {
         if (!errors.assetId && searchField) {
-            const result = search<ICryptocurrency>(
+            const result = search<Asset>(
                 searchField,
                 availableAssets.data,
-                fuseOptions(['asset_id'])
+                fuseOptions(['assetId'])
             )
 
             return result?.[0]
@@ -206,7 +206,7 @@ const CustomPage = () => {
                             <div className="flex h-8 w-fit justify-center rounded py-[11px] px-2 flex-row cursor-pointer gap-2 text-body3 bg-white bg-opacity-5  items-center">
                                 <img
                                     className="w-6 h-6 "
-                                    src={searchResults.icon_url}
+                                    src={searchResults.icon}
                                 />
                                 <span>{searchResults.code}</span>
 

src/popup/components/spendBundleInfo.tsx

@@ -35,7 +35,7 @@ function spendBundleInfo({ request }: IPopupPageProps<MethodEnum.REQUEST>) {
     } = rootStore
 
     const finsAsset = availableAssets?.data?.find(
-        (availableAsset) => metadata?.asset_id === availableAsset.asset_id
+        (availableAsset) => metadata?.asset_id === availableAsset.assetId
     )
     const onGetParseSpendBundle = async (spendBundle) => {
         try {
@@ -78,7 +78,7 @@ function spendBundleInfo({ request }: IPopupPageProps<MethodEnum.REQUEST>) {
                             <div className="flex-row-center justify-between mb-1">
                                 <div className="flex-row-center">
                                     <AssetIcon
-                                        src={finsAsset?.icon_url}
+                                        src={finsAsset?.icon}
                                         assetId={
                                             metadata?.asset_id || XCH.assetId
                                         }

src/store/AssetsStore.ts

@@ -10,12 +10,13 @@ import {
 import {
     callGetBalance,
     callGetBalanceByPuzzleHashes,
+    callGetCATs,
     callGetExchangeRate,
-    callGetMarkets,
 } from '~/api/api'
 import { IAsset } from '~/db'
 import rootStore from '~/store'
-import { ICryptocurrency, IExchangeRate, IFetchData } from '~/types/api'
+import { IExchangeRate, IFetchData } from '~/types/api'
+import { Asset } from '~/types/entities'
 import { CAT } from '~/utils/CAT'
 import { mojoToCat, mojoToXch } from '~/utils/CoinConverter'
 import { chains } from '~/utils/constants'
@@ -29,7 +30,7 @@ class AssetsStore {
 
     existedAssets: IAsset[] = []
 
-    availableAssets: IFetchData<ICryptocurrency[]> = {
+    availableAssets: IFetchData<Asset[]> = {
         isFetching: true,
         data: [],
     }
@@ -52,13 +53,9 @@ class AssetsStore {
         onBecomeUnobserved(this, 'existedAssets', this.unsubscribeExistedAssets)
         onBecomeObserved(this, 'availableAssets', async () => {
             try {
-                const res = await callGetMarkets()
-                const markets = res.data.data
-                const assets = markets.map(
-                    (market) => market[market.info_ccy_name] as ICryptocurrency
-                )
+                const assets = await callGetCATs()
                 runInAction(() => {
-                    this.availableAssets.data = assets
+                    this.availableAssets.data = assets || []
                     this.availableAssets.isFetching = false
                 })
             } catch (error) {}
@@ -89,13 +86,13 @@ class AssetsStore {
                 )
             }
             const asset = this.availableAssets.data.find(
-                (asset) => asset.asset_id === assetId
+                (asset) => asset.assetId === assetId
             )
             return asset
                 ? {
-                      assetId: asset.asset_id,
+                      assetId: asset.assetId,
                       code: asset.code,
-                      iconUrl: asset.icon_url,
+                      iconUrl: asset.icon,
                   }
                 : asset
         }

src/types/api.ts

@@ -13,6 +13,13 @@ interface IBase {
     updated_at: string
 }
 
+export interface IAsset {
+    code: string
+    name: string
+    icon: string
+    asset_id: string
+}
+
 export interface ICryptocurrency extends IBase {
     id: string
     asset_id: string

src/types/chia.ts

@@ -15,6 +15,7 @@ export interface IChainSet {
 }
 
 export interface IApiEndpointSet {
+    newJarvan: string
     jarvan: string
     zed: string
 }

src/types/entities.ts

@@ -0,0 +1,15 @@
+import { IAsset } from './api'
+
+export class Asset {
+    code: string
+    name: string
+    icon: string
+    assetId: string
+
+    constructor(asset: IAsset) {
+        this.code = asset.code
+        this.name = asset.name
+        this.icon = asset.icon
+        this.assetId = asset.asset_id
+    }
+}