api assets

api assets

src/components/Select.tsx

@@ -55,11 +55,11 @@ const SelectedWrap = styled.div`
   text-overflow: ellipsis;
   flex: 1;
 `
-export type SelectOption = { value?: string | number; label: string | number; onSelect?: () => void }
+export type SelectOption = { value?: string | number; label: ReactNode; onSelect?: () => void }
 
 const getOptionValue = (option: SelectOption | undefined) => {
   if (!option) return ''
-  return typeof option !== 'object' ? option : option.value ?? option.label
+  return typeof option !== 'object' ? option : option.value ?? ''
 }
 const getOptionLabel = (option: SelectOption | undefined) => {
   if (!option) return ''

src/pages/TrueSightV2/components/KyberAIWidget.tsx

@@ -203,7 +203,7 @@ export default function Widget() {
 
   const { data, isFetching, isError } = useTokenListQuery(
     activeTab === WidgetTab.MyWatchlist
-      ? { type: KyberAIListType.ALL, page: 1, pageSize: 5, watchlist: true }
+      ? { type: KyberAIListType.ALL, page: 1, pageSize: 5, watchlist: 'all' }
       : {
           type: {
             [WidgetTab.Bearish]: KyberAIListType.BEARISH,

src/pages/TrueSightV2/components/MultipleChainDropdown.tsx

@@ -73,7 +73,7 @@ const MultipleChainDropdown = React.forwardRef(
   (
     props: {
       show: boolean
-      tokens?: Array<{ address: string; logo: string; chain: string }>
+      tokens?: Array<{ address: string; chain: string }>
       onChainClick: (chain: string, address: string) => void
     },
     ref,
@@ -90,7 +90,7 @@ const MultipleChainDropdown = React.forwardRef(
               </Text>
             </Row>
             <Row style={{ flexWrap: 'wrap', gap: '12px', marginTop: '12px' }}>
-              {tokens?.map((item: { address: string; logo: string; chain: string }) => {
+              {tokens?.map((item: { address: string; chain: string }) => {
                 if (item.chain === 'ethereum')
                   return (
                     <MobileChainIcon
@@ -170,7 +170,7 @@ const MultipleChainDropdown = React.forwardRef(
         ref={ref}
         onClick={e => e.stopPropagation()}
       >
-        {tokens?.map((item: { address: string; logo: string; chain: string }) => {
+        {tokens?.map((item: { address: string; chain: string }) => {
           if (item.chain === 'ethereum')
             return (
               <ChainIcon

src/pages/TrueSightV2/components/SearchWithDropDown.tsx

@@ -25,16 +25,17 @@ import { formatTokenPrice } from '../utils'
 import WatchlistButton from './WatchlistButton'
 
 const formatTokenType = (token: ITokenList): ITokenSearchResult => {
+  const kyberScore3D = token.kyberScore3D?.[token.kyberScore3D.length - 1]
   return {
-    assetId: token.asset_id,
+    assetId: token.assetId,
     name: token.name,
     symbol: token.symbol,
-    logo: token.tokens[0].logo,
+    logo: token.logo,
     price: token.price,
-    priceChange24h: token.percent_change_24h,
+    priceChange24h: token.priceChange24H,
     kyberScore: {
-      score: token.ks_3d?.[token.ks_3d.length - 1].kyber_score || 0,
-      label: token.ks_3d?.[token.ks_3d.length - 1].tag || '',
+      score: kyberScore3D?.kyberScore || 0,
+      label: kyberScore3D?.tag || '',
     },
   }
 }

src/pages/TrueSightV2/components/SmallKyberScoreMeter.tsx

@@ -28,7 +28,7 @@ const GaugeValue = styled.div`
   bottom: 6px;
 `
 function SmallKyberScoreMeter({ data, disabledTooltip }: { data?: IKyberScoreChart; disabledTooltip?: boolean }) {
-  const value = data?.kyber_score
+  const value = data?.kyberScore
   const theme = useTheme()
   const emptyColor = theme.darkMode ? theme.subText + '30' : theme.border + '60'
   const activeGaugeValue = value ? (gaugeList.length * value) / 100 : 0
@@ -56,12 +56,12 @@ function SmallKyberScoreMeter({ data, disabledTooltip }: { data?: IKyberScoreCha
             data ? (
               <Column style={{ whiteSpace: 'pre-wrap' }}>
                 <Text>
-                  Calculated at {data.created_at ? dayjs(data.created_at * 1000).format('DD/MM/YYYY HH:mm A') : '--'}
+                  Calculated at {data.createdAt ? dayjs(data.createdAt * 1000).format('DD/MM/YYYY HH:mm A') : '--'}
                 </Text>
                 <Text>
                   KyberScore:{' '}
-                  <span style={{ color: calculateValueToColor(data.kyber_score || 0, theme) }}>
-                    {data.kyber_score || '--'} ({data.tag || t`Not Applicable`})
+                  <span style={{ color: calculateValueToColor(data.kyberScore || 0, theme) }}>
+                    {data.kyberScore || '--'} ({data.tag || t`Not Applicable`})
                   </span>
                 </Text>
                 <Text>

src/pages/TrueSightV2/components/TokenFilter/WatchlistSelect.tsx

@@ -1,7 +1,9 @@
-import { t } from '@lingui/macro'
+import { Trans, t } from '@lingui/macro'
 import { useMemo, useState } from 'react'
 import { CSSProperties } from 'styled-components'
 
+import Icon from 'components/Icons/Icon'
+import Row from 'components/Row'
 import { SelectOption } from 'components/Select'
 import { ActiveSelectItem, StyledSelect } from 'pages/TrueSightV2/components/TokenFilter'
 import { ManageListModal } from 'pages/TrueSightV2/components/WatchlistButton'
@@ -27,8 +29,22 @@ const WatchlistSelect = ({
         return { value: e.id + '', label: `${e.name} (${e.assetNumber})` }
       }) || []
 
-    opts.unshift({ label: t`All Tokens (${total})`, value: '' })
-    opts.push({ label: t`Manage Lists`, onSelect: () => setIsOpen(true) }) // todo danh: update like desgin
+    opts.unshift({
+      label: (
+        <Row>
+          <Trans>All Tokens ({total})</Trans>
+        </Row>
+      ),
+      value: '',
+    })
+    opts.push({
+      label: (
+        <Row gap="6px">
+          <Icon id="assignment" size={20} /> <Trans>Manage Lists</Trans>
+        </Row>
+      ),
+      onSelect: () => setIsOpen(true),
+    }) // todo danh: update like desgin
 
     return opts
   }, [dataWatchList])

src/pages/TrueSightV2/components/TokenListVariants.tsx

@@ -20,7 +20,7 @@ export default function TokenListVariants({
   tokens,
   iconSize = 12,
 }: {
-  tokens: Array<{ address: string; logo: string; chain: string }>
+  tokens: Array<{ address: string; chain: string }>
   iconSize?: number
 }) {
   const theme = useTheme()

src/pages/TrueSightV2/components/TokenOverview.tsx

@@ -316,12 +316,12 @@ export const TokenOverview = ({ data, isLoading }: { data?: IAssetOverview; isLo
                       <>
                         <Column color={theme.subText} style={{ fontSize: '12px', lineHeight: '16px' }}>
                           <Text>
-                            Calculated at {dayjs(latestKyberscore.created_at * 1000).format('DD/MM/YYYY HH:mm A')}
+                            Calculated at {dayjs(latestKyberscore.createdAt * 1000).format('DD/MM/YYYY HH:mm A')}
                           </Text>
                           <Text>
                             KyberScore:{' '}
-                            <span style={{ color: calculateValueToColor(latestKyberscore.kyber_score || 0, theme) }}>
-                              {latestKyberscore.kyber_score || '--'} ({latestKyberscore.tag || t`Not Applicable`})
+                            <span style={{ color: calculateValueToColor(latestKyberscore.kyberScore || 0, theme) }}>
+                              {latestKyberscore.kyberScore || '--'} ({latestKyberscore.tag || t`Not Applicable`})
                             </span>
                           </Text>
                           <Text>
@@ -534,7 +534,7 @@ export const TokenOverview = ({ data, isLoading }: { data?: IAssetOverview; isLo
             <ShareButton onClick={() => setShowShare(true)} />
           </RowBetween>
           <Row justify="center" marginBottom="12px">
-            <KyberScoreMeter value={latestKyberscore?.kyber_score} />
+            <KyberScoreMeter value={latestKyberscore?.kyberScore} />
           </Row>
 
           <Row marginBottom="16px" justify="center" gap="6px">
@@ -555,12 +555,12 @@ export const TokenOverview = ({ data, isLoading }: { data?: IAssetOverview; isLo
                 <>
                   <Column color={theme.subText} style={{ fontSize: '12px', lineHeight: '16px' }}>
                     <Text>
-                      {latestKyberscore && dayjs(latestKyberscore?.created_at * 1000).format('DD/MM/YYYY HH:mm A')}
+                      {latestKyberscore && dayjs(latestKyberscore?.createdAt * 1000).format('DD/MM/YYYY HH:mm A')}
                     </Text>
                     <Text>
                       KyberScore:{' '}
-                      <span style={{ color: calculateValueToColor(latestKyberscore?.kyber_score || 0, theme) }}>
-                        {latestKyberscore?.kyber_score || '--'} ({latestKyberscore?.tag || t`Not Applicable`})
+                      <span style={{ color: calculateValueToColor(latestKyberscore?.kyberScore || 0, theme) }}>
+                        {latestKyberscore?.kyberScore || '--'} ({latestKyberscore?.tag || t`Not Applicable`})
                       </span>
                     </Text>
                     <Text>

src/pages/TrueSightV2/components/chart/KyberScoreChart.tsx

@@ -54,7 +54,7 @@ export default function KyberScoreChart({
     const startTimestamp = Math.floor(Date.now() / 14400000) * 14400
     for (let i = 0; i < 18; i++) {
       const timestamp = startTimestamp - i * 14400
-      const index = data.findIndex(item => item.created_at === timestamp)
+      const index = data.findIndex(item => item.createdAt === timestamp)
       if (index >= 0) {
         datatemp.push(data[index])
       } else {
@@ -86,7 +86,7 @@ export default function KyberScoreChart({
         </defs>
         <g transform="scale(1,-1) translate(0,-21)" clipPath="url(#cut-off-outline)">
           {filledData?.map((item, index) => {
-            const v = item?.kyber_score || 0
+            const v = item?.createdAt || 0
             const gap = 2
             const rectWidth = (100 - (filledData.length - 1) * gap) / filledData.length
             const rectHeight = !v ? 21 : Math.max((v * 21) / 100, 0.8)
@@ -124,16 +124,16 @@ export default function KyberScoreChart({
           <Column style={{ color: theme.subText, fontSize: '12px', lineHeight: '16px' }} gap="2px">
             <Text>
               Calculated at{' '}
-              {hoveringItem?.created_at && dayjs(hoveringItem?.created_at * 1000).format('DD/MM/YYYY hh:mm A')}
+              {hoveringItem?.createdAt && dayjs(hoveringItem?.createdAt * 1000).format('DD/MM/YYYY hh:mm A')}
             </Text>
             <Text style={{ whiteSpace: 'nowrap' }}>
               <Trans>KyberScore</Trans>:{' '}
               <span
-                style={{ color: hoveringItem ? calculateValueToColor(hoveringItem.kyber_score, theme) : theme.text }}
+                style={{ color: hoveringItem ? calculateValueToColor(hoveringItem.kyberScore, theme) : theme.text }}
               >
                 {hoveringItem
                   ? !!hoveringItem.tag
-                    ? `${hoveringItem.kyber_score} (${hoveringItem.tag})`
+                    ? `${hoveringItem.kyberScore} (${hoveringItem.tag})`
                     : 'N/A'
                   : '--'}
               </span>

src/pages/TrueSightV2/components/shareContent/ExploreTopShareContent.tsx

@@ -83,6 +83,13 @@ export default function ExploreShareContent({ token, mobileMode }: { token?: IAs
   const last7daysPrice = data?.data[0]?.['7daysprice']
   const formattedData = last7daysPrice ? [...last7daysPrice].sort((a, b) => a.timestamp - b.timestamp).slice(1, 8) : []
   const priceChangeColor = token && token.price24hChangePercent > 0 ? theme.primary : theme.red
+  const msgTimeScore = (
+    <Trans>
+      Calculated at {latestKyberscore ? dayjs(latestKyberscore?.createdAt * 1000).format('HH:mm A, MMM DD') : ''} when
+      price was {latestKyberscore ? '$' + formatTokenPrice(latestKyberscore.price) : '--'}
+    </Trans>
+  )
+
   if (mobileMode) {
     return (
       <Column gap="20px">
@@ -118,16 +125,10 @@ export default function ExploreShareContent({ token, mobileMode }: { token?: IAs
         <Divider style={{ flex: 'unset' }} />
         <Column width="100%" height="100%" gap="16px" style={{ justifyContent: 'space-between' }}>
           <Text fontWeight={500}>KyberScore</Text>
-          <Text fontSize="12px">
-            <Trans>
-              Calculated at{' '}
-              {latestKyberscore ? dayjs(latestKyberscore?.created_at * 1000).format('HH:mm A, MMM DD') : ''} when price
-              was {latestKyberscore ? '$' + formatTokenPrice(latestKyberscore.price) : '--'}
-            </Trans>
-          </Text>
+          <Text fontSize="12px">{msgTimeScore}</Text>
           <Row gap="12px">
             <KyberScoreMeter
-              value={latestKyberscore?.kyber_score || 0}
+              value={latestKyberscore?.kyberScore || 0}
               style={{ width: '220px', height: '100px', alignSelf: 'center' }}
               noAnimation={true}
               fontSize="28px"
@@ -136,7 +137,7 @@ export default function ExploreShareContent({ token, mobileMode }: { token?: IAs
               <Text color={theme.text} fontSize="16px" lineHeight="20px" textAlign="center">
                 <Trans>
                   {token?.symbol?.toUpperCase()} seems to be{' '}
-                  <span style={{ color: calculateValueToColor(latestKyberscore?.kyber_score || 0, theme) }}>
+                  <span style={{ color: calculateValueToColor(latestKyberscore?.kyberScore || 0, theme) }}>
                     {latestKyberscore ? latestKyberscore.tag : ''}
                   </span>
                 </Trans>
@@ -159,23 +160,17 @@ export default function ExploreShareContent({ token, mobileMode }: { token?: IAs
     <Row align="stretch" justify="stretch" gap="36px">
       <CardWrapper>
         <Column width="100%" height="100%" gap="16px" style={{ justifyContent: 'space-between' }}>
-          <Text>
-            <Trans>
-              Calculated at{' '}
-              {latestKyberscore ? dayjs(latestKyberscore?.created_at * 1000).format('HH:mm A, MMM DD') : ''} when price
-              was {latestKyberscore ? '$' + formatTokenPrice(latestKyberscore.price) : '--'}
-            </Trans>
-          </Text>
+          <Text>{msgTimeScore}</Text>
           <KyberScoreMeter
-            value={latestKyberscore?.kyber_score || 0}
+            value={latestKyberscore?.kyberScore || 0}
             style={{ width: '264px', height: '160px', alignSelf: 'center' }}
             noAnimation={true}
           />
           <Row justify="center">
             <Text color={theme.text} fontSize="24px" lineHeight="28px">
               <Trans>
                 {token?.symbol?.toUpperCase()} seems to be{' '}
-                <span style={{ color: calculateValueToColor(latestKyberscore?.kyber_score || 0, theme) }}>
+                <span style={{ color: calculateValueToColor(latestKyberscore?.kyberScore || 0, theme) }}>
                   {latestKyberscore ? latestKyberscore.tag : ''}
                 </span>
               </Trans>

src/pages/TrueSightV2/components/shareContent/KyberScoreShareContent.tsx

@@ -25,20 +25,20 @@ export default function KyberScoreShareContent({
     <Column width="100%" justify="center" gap={mobileMode ? '28px' : '16px'}>
       <Text fontSize={mobileMode ? '14px' : '16px'}>
         <Trans>
-          Calculated at {latestKyberscore ? dayjs(latestKyberscore?.created_at * 1000).format('HH:mm A, MMM DD') : ''}{' '}
+          Calculated at {latestKyberscore ? dayjs(latestKyberscore?.createdAt * 1000).format('HH:mm A, MMM DD') : ''}{' '}
           when price was {latestKyberscore ? '$' + formatTokenPrice(latestKyberscore.price) : '--'}
         </Trans>
       </Text>
       <KyberScoreMeter
-        value={latestKyberscore?.kyber_score || 0}
+        value={latestKyberscore?.kyberScore || 0}
         style={{ width: mobileMode ? '250px' : '380px', height: mobileMode ? '135px' : '236px', alignSelf: 'center' }}
         noAnimation={true}
       />
       <Row justify="center">
         <Text color={theme.text} fontSize={mobileMode ? '20px' : '36px'} lineHeight={mobileMode ? '28px' : '44px'}>
           <Trans>
             {token?.symbol?.toUpperCase()} seems to be{' '}
-            <span style={{ color: calculateValueToColor(latestKyberscore?.kyber_score || 0, theme) }}>
+            <span style={{ color: calculateValueToColor(latestKyberscore?.kyberScore || 0, theme) }}>
               {latestKyberscore ? latestKyberscore.tag : ''}
             </span>
           </Trans>