Air 1505 fe fix tosi scan asset view new branch

src/App.tsx

@@ -46,8 +46,8 @@ function App() {
                 <Route path="/dataset/:id/*" element={<Dataset />} />
                 <Route path="/search-asset/:encoded" element={<AssetSearchResult />} />
                 <Route path="/single-asset/:id">
-                  <Route path=":assetContract/:assetTokenId" element={<SingleAsset />} />
-                  <Route path=":assetSerial" element={<SingleAsset />} />
+                  <Route path=":assetTokenId/:assetBatchId" element={<SingleAsset />} />
+                  <Route path=":assetTokenId" element={<SingleAsset />} />
                 </Route>
                 <Route path="/single-asset-with-tabs/:id/:assetSerial/*" element={<SingleAssetWithTabs />} />
                 <Route path="/single-asset-nft/:id">

src/components/AssetTab.tsx

@@ -18,8 +18,9 @@ import { styled } from '@mui/system'
 import IconCheck from '../assets/images/icon-check.svg'
 import IconInfo from '../assets/images/icon-info.svg'
 import GoldBar from '../assets/images/gold-bar.jpg'
+import Gray from '../assets/images/gold-bar.jpg'
 
-import { useDataSetAssetsContext, IFinalAsset } from '../hooks/useDatachainOutput'
+import { useDataSetAssetsContext, IFinalAsset, DatachainOutputContextT } from '../hooks/useDatachainOutput'
 import { TableHeadCell, CustomLink, TableBodyCellUnique } from './TableStyles'
 
 const SectionWrapper = styled(Box)(({ theme }) => ({
@@ -36,12 +37,7 @@ const SectionWrapper = styled(Box)(({ theme }) => ({
 }))
 
 const AssetsDetails = ({ assets }: { assets: IFinalAsset[] }) => {
-  let uniqueItems: any = new Set(
-    assets.map((asset: IFinalAsset) =>
-      asset['asset-type'] === 'Carbon Credits Batch' ? 'Carbon Credits Batch' : asset['asset-type'],
-    ),
-  )
-  uniqueItems = Array.from(uniqueItems)
+  const uniqueItems = Array.from(new Set(assets.map((asset) => asset.metadata.type)))
 
   return (
     <TableContainer>
@@ -60,7 +56,7 @@ const AssetsDetails = ({ assets }: { assets: IFinalAsset[] }) => {
               <TableBodyCellUnique sx={{ textAlign: 'left', fontSize: '16px', lineHeight: 1.5, color: 'grey.700' }}>
                 {asset}
               </TableBodyCellUnique>
-              <TableBodyCellUnique>{assets?.filter((item) => item['asset-type'] === asset).length}</TableBodyCellUnique>
+              <TableBodyCellUnique>{assets?.filter((item) => item.metadata.type === asset).length}</TableBodyCellUnique>
               <TableBodyCellUnique>0</TableBodyCellUnique>
             </TableRow>
           ))}
@@ -71,12 +67,14 @@ const AssetsDetails = ({ assets }: { assets: IFinalAsset[] }) => {
 }
 
 const IndividualAssetTable = ({
+  selectedDataSet,
   assets,
   page,
   setPage,
   rowsPerPage,
   setRowsPerPage,
 }: {
+  selectedDataSet: DatachainOutputContextT
   assets: IFinalAsset[]
   page: number
   setPage: any
@@ -223,32 +221,34 @@ const IndividualAssetTable = ({
               <TableRow
                 sx={{ backgroundColor: 'grey.50', borderWidth: '1px', borderStyle: 'solid', borderColor: 'grey.200' }}
               >
-                <TableHeadCell sx={{ width: '125px', paddingY: 1.5, paddingX: 3 }}>Serial No.</TableHeadCell>
+                <TableHeadCell sx={{ width: '125px', paddingY: 1.5, paddingX: 3 }}>Token Id.</TableHeadCell>
                 <TableHeadCell sx={{ width: '367px', paddingY: 1.5, paddingX: 3 }}>Asset</TableHeadCell>
                 <TableHeadCell sx={{ width: '92px', paddingY: 1.5, paddingX: 3 }}>Status</TableHeadCell>
                 <TableHeadCell sx={{ width: '120px', paddingY: 1.5, paddingX: 3 }}>Blockchain</TableHeadCell>
                 <TableHeadCell sx={{ width: '199px', paddingY: 1.5, paddingX: 3 }}>Token Ref.</TableHeadCell>
+                <TableHeadCell sx={{ width: '199px', paddingY: 1.5, paddingX: 3 }}>Batch Id</TableHeadCell>
                 <TableHeadCell sx={{ width: '196px', paddingY: 1.5, paddingX: 3 }}>Owner Address</TableHeadCell>
                 <TableHeadCell sx={{ width: '146px' }}> </TableHeadCell>
               </TableRow>
             </TableHead>
 
             <TableBody>
               {assets.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row: IFinalAsset) => {
-                const location = row.locations[0]
-                const assetContract = location?.contract
-                const assetTokenId = location?.tokenId
-                const assetSerial = row.assetNumber
+                const { metadata } = row
+
+                const assetBatchId = row.batchId
+                const assetTokenId = row.tokenId
 
                 const onAssetClick = () => {
-                  if (assetContract && assetTokenId) {
-                    navigate(`/single-asset/${id}/${assetContract}/${assetTokenId}`)
+                  if (assetTokenId) {
+                    navigate(`/single-asset/${id}/${assetTokenId}/${assetBatchId}`)
                   } else {
-                    navigate(`/single-asset/${id}/${assetSerial}`)
+                    navigate(`/single-asset/${id}/${assetTokenId}`)
                   }
                 }
 
-                const message = row.status === 'ok' ? hovermessage : row.failedReason
+                const message =
+                  selectedDataSet.verifications[2].status === 'success' ? hovermessage : 'failed verification'
 
                 return (
                   <TableRow
@@ -257,44 +257,34 @@ const IndividualAssetTable = ({
                   >
                     <TableCell sx={{ paddingY: 1.75, paddingX: 3, border: 'none' }}>
                       <CustomLink onClick={onAssetClick} sx={{ cursor: 'pointer' }}>
-                        {assetSerial}
+                        {assetTokenId}
                       </CustomLink>
                     </TableCell>
 
                     <TableCell sx={{ display: 'flex', alignItems: 'center', paddingX: 3, border: 'none' }}>
-                      <img
-                        src={row.assetName.indexOf('TEST') > -1 ? GoldBar : row.imageUrl}
-                        width="36"
-                        height="36"
-                        alt="."
-                      />
+                      <img src={metadata.image || selectedDataSet?.metadata?.image} width="36" height="36" alt="." />
                       <Typography variant="body2" color="grey.900" ml={1.5}>
-                        {row.assetName}
+                        {metadata.name}
                       </Typography>
                     </TableCell>
 
                     <TableCell sx={{ paddingY: 1.75, paddingX: 4.5, border: 'none' }}>
                       <Tooltip title={message} placement="top">
-                        <img src={row.status === 'ok' ? IconCheck : IconInfo} alt="." />
+                        <img
+                          src={selectedDataSet.verifications[2].status === 'success' ? IconCheck : IconInfo}
+                          alt="."
+                        />
                       </Tooltip>
                     </TableCell>
 
                     <TableCell sx={{ paddingX: 3, color: 'grey.600', border: 'none' }}>
-                      {location ? location.name : 'Zippienet'}
-                    </TableCell>
-                    <TableCell sx={{ paddingX: 3, border: 'none' }}>
-                      {location && location.contract
-                        ? `${location.contract.slice(0, 6)}...${location.contract.slice(location.contract.length - 4)}`
-                        : `${location.tokenId.slice(0, 6)}...${location.tokenId.slice(location.tokenId.length - 4)}`}
+                      {metadata ? metadata.chain : 'Zippienet'}
                     </TableCell>
 
-                    <TableCell sx={{ paddingX: 3, border: 'none' }}>
-                      {location?.ownerAccount
-                        ? `${location.ownerAccount.slice(0, 6)}...${location.ownerAccount.slice(
-                            location.ownerAccount.length - 4,
-                          )}`
-                        : ''}
-                    </TableCell>
+                    <TableCell sx={{ paddingX: 3, border: 'none' }}>{assetTokenId}</TableCell>
+                    <TableCell sx={{ paddingX: 3, border: 'none' }}>{assetBatchId}</TableCell>
+
+                    <TableCell sx={{ paddingX: 3, border: 'none' }}>{row.owner}</TableCell>
 
                     <TableCell sx={{ paddingX: 3, textAlign: 'right', border: 'none' }}>
                       <CustomLink onClick={onAssetClick} sx={{ fontWeight: 500, cursor: 'pointer' }}>
@@ -378,6 +368,7 @@ const AssetTab = () => {
           setPage={setPage}
           page={page}
           assets={assets}
+          selectedDataSet={selectedDataSet}
         />
       </Box>
     </>

src/components/Footer.tsx

@@ -14,7 +14,7 @@ const Footer = () => {
   }
 
   return (
-    <Box sx={{ paddingTop: '64px', backgroundColor: 'grey.900' }}>
+    <Box sx={{ paddingTop: '64px', backgroundColor: 'grey.900', position: 'relative', bottom: '0px', width: '100%' }}>
       <Container sx={{ maxWidth: { xl: '1280px' }, margin: '0 auto', paddingX: { xs: 0, xl: 4 } }}>
         <Box sx={{ paddingBottom: '64px' }}>
           <Logo style={{ width: '112px', height: '32px' }} />

src/components/Search.tsx

@@ -41,7 +41,7 @@ const Search = () => {
         width: '100%',
       }}
       type="text"
-      placeholder="Token URL or name"
+      placeholder="Search dataset by name"
       onKeyDown={handleKeyDown}
       onChange={(ev) => {
         setSearchValue(ev.target.value)

src/components/SingleAssetDetailsTab.tsx

@@ -10,43 +10,27 @@ import IconCheck from '../assets/images/icon-check.svg'
 import IconInfo from '../assets/images/icon-info.svg'
 
 const SingleAssetDetailsTab = () => {
-  const { assetContract, assetTokenId, assetSerial, id } = useParams()
+  const { assetContract, assetBatchId, assetTokenId, id } = useParams()
   const { selectedDataSet, isLoading } = useDataSetAssetsContext()
 
   const metaData = selectedDataSet?.metadata
   const assets = selectedDataSet?.assets
   const lastVerified = selectedDataSet?.lastVerified as number
   const createdDate = selectedDataSet?.creationDate as number
 
-  const asset = assetSerial
-    ? assets?.find((asset) => asset.assetNumber === assetSerial)
-    : assets?.find(
-        (asset) =>
-          asset.locations[0]?.contract?.toLocaleLowerCase() === assetContract?.toLocaleLowerCase() &&
-          asset.locations[0]?.tokenId === assetTokenId,
-      )
+  const assetTokenIdNumber = assetTokenId !== undefined ? parseInt(assetTokenId, 10) : null
+  const asset = assets?.find((asset) => asset.tokenId === assetTokenIdNumber)
 
   const message = asset?.status === 'ok' ? 'Verified successfully' : asset?.failedReason || ''
 
-  const location = asset?.locations[0]
-
-  const tokenId = location?.tokenId
-
-  const lenthToken = tokenId?.length as number
-
-  const tokenRef = lenthToken > 12 ? `${tokenId?.slice(0, 6)}...${tokenId?.slice(-4)}` : tokenId
-
-  const Description = getOverviewComponent(metaData?.name || '')
   return (
     <>
       <SectionWrapper>
         <Typography variant="h2" color="grey.900" mb={1.25} sx={{ fontSize: '20px', lineHeight: 1.5 }}>
           Description
         </Typography>
 
-        <Typography>
-          <Description />
-        </Typography>
+        <Typography>{metaData?.['asset-description']}</Typography>
       </SectionWrapper>
 
       <SectionWrapper>
@@ -66,13 +50,13 @@ const SingleAssetDetailsTab = () => {
                 <TableNameCell>Asset name</TableNameCell>
                 <TableValueCell sx={{ display: 'flex', alignItems: 'center' }}>
                   <img
-                    src={asset?.imageUrl}
+                    src={asset?.metadata.image}
                     width="40"
                     height="40"
                     style={{ marginRight: '12px', borderRadius: '4px' }}
                     alt="."
                   />
-                  {asset?.assetName}
+                  {asset?.metadata.name}
                 </TableValueCell>
               </TableRow>
 
@@ -90,19 +74,24 @@ const SingleAssetDetailsTab = () => {
                 <TableNameCell>Status</TableNameCell>
                 <TableValueCell>
                   <Tooltip title={message} placement="top">
-                    <img src={asset?.status === 'ok' ? IconCheck : IconInfo} width="24px" height="24p" alt="." />
+                    <img
+                      src={selectedDataSet?.verifications[2].status === 'success' ? IconCheck : IconInfo}
+                      width="24px"
+                      height="24p"
+                      alt="."
+                    />
                   </Tooltip>
                 </TableValueCell>
               </TableRow>
 
               <TableRow>
                 <TableNameCell>BlockChain</TableNameCell>
-                <TableValueCell>{asset?.currentLocation}</TableValueCell>
+                <TableValueCell>{asset?.metadata.chain}</TableValueCell>
               </TableRow>
 
               <TableRow sx={{ backgroundColor: 'grey.50' }}>
                 <TableNameCell>Token ID</TableNameCell>
-                <TableValueCell>{tokenRef}</TableValueCell>
+                <TableValueCell>{asset?.tokenId}</TableValueCell>
               </TableRow>
 
               <TableRow>
@@ -112,7 +101,7 @@ const SingleAssetDetailsTab = () => {
 
               <TableRow sx={{ backgroundColor: 'grey.50' }}>
                 <TableNameCell>Owner Address</TableNameCell>
-                <TableValueCell>{location?.ownerAccount}</TableValueCell>
+                <TableValueCell>{asset?.owner}</TableValueCell>
               </TableRow>
               <TableRow sx={{ backgroundColor: 'grey.50' }}>
                 <TableNameCell>Creator</TableNameCell>

src/components/TabsSingleAsset.tsx

@@ -47,7 +47,7 @@ const TabsSingleAsset = () => (
   <TabsUnstyled defaultValue={0}>
     <TabsList>
       <Tab>Details</Tab>
-      <Tab>Attributes</Tab>
+      {/* <Tab>Attributes</Tab> */}
 
       {/* <Tab>History</Tab> */}
     </TabsList>
@@ -56,9 +56,9 @@ const TabsSingleAsset = () => (
       <SingleAssetDetailsTab />
     </TabPanelUnstyled>
 
-    <TabPanelUnstyled value={1}>
+    {/* <TabPanelUnstyled value={1}>
       <SingleAssetAttributeTab />
-    </TabPanelUnstyled>
+    </TabPanelUnstyled> */}
 
     {/* <TabPanelUnstyled value={4}>
       4sdfsdf

src/hooks/useDatachainOutput.tsx

@@ -36,6 +36,11 @@ interface IMetadata {
   ['supported-locations']: string[]
   datasetLinked?: string[]
   publisher: string
+  chain: string
+  class: string
+  token: string
+  type: string
+  vcu: string
 }
 
 export interface IDatasetDynamic {
@@ -71,6 +76,10 @@ export interface IFinalAsset {
   timestamp: number
   serialNumberStart?: string
   serialNumberEnd?: string
+  batchId: number
+  tokenId: number
+  owner: string
+  metadata: IMetadata
 }
 interface IDataSetOutputs {
   [key: string]: DatachainOutputContextT