fix: fix hex to base64

package.json

@@ -21,7 +21,6 @@
     "echarts": "4.9.0",
     "history": "5.3.0",
     "i18next": "20.6.1",
-    "js-base64": "^3.7.5",
     "jsbi": "3.2.5",
     "lint-staged": "^13.2.3",
     "lodash.debounce": "4.0.8",

src/pages/Address/AddressAssetComp.tsx

@@ -1,14 +1,12 @@
 import { useTranslation } from 'react-i18next'
 import { ReactEventHandler, useEffect, useState } from 'react'
-import { Base64 } from 'js-base64'
-import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'
 import axios, { AxiosResponse } from 'axios'
 import { AddressUDTItemPanel } from './styled'
 import { CoTA, OmigaInscription, MNFT, NRC721, SUDT, Spore } from '../../models/Address'
 import SUDTTokenIcon from '../../assets/sudt_token.png'
 import { parseUDTAmount } from '../../utils/number'
 import { parseSporeCellData } from '../../utils/spore'
-import { handleNftImgError, patchMibaoImg } from '../../utils/util'
+import { handleNftImgError, hexToBase64, patchMibaoImg } from '../../utils/util'
 import { sliceNftName } from '../../utils/string'
 
 export const AddressAssetComp = ({
@@ -69,7 +67,7 @@ export const AddressSporeComp = ({ account }: { account: Spore }) => {
   if (udtIconFile) {
     const sporeData = parseSporeCellData(udtIconFile)
     if (sporeData.content.slice(0, 5) === 'image') {
-      const base64Data = Base64.fromUint8Array(hexToBytes(`0x${sporeData.content}`))
+      const base64Data = hexToBase64(sporeData.content)
       setIcon(`data:${sporeData.contentType};base64,${base64Data}`)
     }
   }

src/pages/NftCollectionInfo/NftCollectionInventory/index.tsx

@@ -1,14 +1,12 @@
 import { Link } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
-import { Base64 } from 'js-base64'
-import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'
 import { useTranslation } from 'react-i18next'
 import { parseSporeCellData } from '../../../utils/spore'
 import { ReactComponent as Cover } from '../../../assets/nft_cover.svg'
 import styles from './styles.module.scss'
 import { getPrimaryColor } from '../../../constants/common'
 import { explorerService } from '../../../services/ExplorerService'
-import { handleNftImgError, patchMibaoImg } from '../../../utils/util'
+import { handleNftImgError, hexToBase64, patchMibaoImg } from '../../../utils/util'
 import type { NFTItem } from '../../../services/ExplorerService/fetcher'
 
 const primaryColor = getPrimaryColor()
@@ -47,7 +45,7 @@ const NftCollectionInventory: React.FC<{
     if (standard === 'spore' && cell && cell.data) {
       const sporeData = parseSporeCellData(cell.data)
       if (sporeData.contentType.slice(0, 5) === 'image') {
-        const base64data = Base64.fromUint8Array(hexToBytes(`0x${sporeData.content}`))
+        const base64data = hexToBase64(sporeData.content)
 
         return (
           <img

src/pages/NftCollectionInfo/NftCollectionTransfers/index.tsx

@@ -2,15 +2,13 @@ import { FC, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { Tooltip } from 'antd'
-import { Base64 } from 'js-base64'
-import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'
 import { useTranslation } from 'react-i18next'
 import { parseSporeCellData } from '../../../utils/spore'
 // TODO: Refactor is needed. Should not directly import anything from the descendants of ExplorerService.
 import type { TransferListRes, TransferRes } from '../../../services/ExplorerService/fetcher'
 import styles from './styles.module.scss'
 import { getPrimaryColor } from '../../../constants/common'
-import { handleNftImgError, patchMibaoImg } from '../../../utils/util'
+import { handleNftImgError, hexToBase64, patchMibaoImg } from '../../../utils/util'
 import { explorerService } from '../../../services/ExplorerService'
 import { dayjs } from '../../../utils/date'
 import { useParsedDate, useTimestamp } from '../../../hooks'
@@ -114,7 +112,7 @@ const TransferTableRow: FC<{
     if (standard === 'spore' && cell && cell.data) {
       const sporeData = parseSporeCellData(cell.data)
       if (sporeData.contentType.slice(0, 5) === 'image') {
-        const base64data = Base64.fromUint8Array(hexToBytes(`0x${sporeData.content}`))
+        const base64data = hexToBase64(sporeData.content)
 
         return (
           <img
@@ -243,7 +241,7 @@ const TransferCard: FC<{
     if (standard === 'spore' && cell && cell.data) {
       const sporeData = parseSporeCellData(cell.data)
       if (sporeData.contentType.slice(0, 5) === 'image') {
-        const base64data = Base64.fromUint8Array(hexToBytes(`0x${sporeData.content}`))
+        const base64data = hexToBase64(sporeData.content)
 
         return (
           <img

src/pages/NftInfo/index.tsx

@@ -1,16 +1,14 @@
 import { Link, useParams, useHistory } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { Tooltip } from 'antd'
-import { Base64 } from 'js-base64'
-import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'
 import { useTranslation } from 'react-i18next'
 import NftItemTransfers from './NftItemTransfers'
 import Pagination from '../../components/Pagination'
 import { ReactComponent as Cover } from '../../assets/nft_cover.svg'
 import { explorerService } from '../../services/ExplorerService'
 import { getPrimaryColor } from '../../constants/common'
 import styles from './styles.module.scss'
-import { patchMibaoImg, handleNftImgError } from '../../utils/util'
+import { patchMibaoImg, handleNftImgError, hexToBase64 } from '../../utils/util'
 import { parseSporeCellData } from '../../utils/spore'
 import { useSearchParams } from '../../hooks'
 
@@ -45,7 +43,7 @@ const NftInfo = () => {
     if (standard === 'spore' && cell && cell.data) {
       const sporeData = parseSporeCellData(cell.data)
       if (sporeData.contentType.slice(0, 5) === 'image') {
-        const base64data = Base64.fromUint8Array(hexToBytes(`0x${sporeData.content}`))
+        const base64data = hexToBase64(sporeData.content)
 
         return (
           <img

src/utils/util.ts

@@ -355,6 +355,17 @@ export function assertIsHashType(value: string): asserts value is HashType {
   }
 }
 
+export const hexToBase64 = (hexstring: string) => {
+  const str = hexstring
+    .match(/\w{2}/g)
+    ?.map(function (a) {
+      return String.fromCharCode(parseInt(a, 16))
+    })
+    .join('')
+  if (!str) return ''
+  return btoa(str)
+}
+
 export default {
   copyElementValue,
   shannonToCkb,
@@ -364,4 +375,5 @@ export default {
   deprecatedAddrToNewAddr,
   handleRedirectFromAggron,
   assertIsHashType,
+  hexToBase64,
 }

yarn.lock

@@ -12154,11 +12154,6 @@ jest@^27.4.3:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
-js-base64@^3.7.5:
-  version "3.7.6"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.6.tgz#6ccb5d761b48381fd819f9ce04998866dbcbbc99"
-  integrity sha512-NPrWuHFxFUknr1KqJRDgUQPexQF0uIJWjeT+2KjEePhitQxQEx5EJBG1lVn5/hc8aLycTpXrDOgPQ6Zq+EDiTA==
-
 js-sdsl@^4.1.4:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"