Merge pull request #118 from P4-Games/feature/20241003-1

merge feature/20241003-1 into develop
P4-Games · Oct 3, 2024 · 2a1ab80 · 2a1ab80
2 parents d5f6aa5 + 6c59bc0
commit 2a1ab80
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 95 deletions.
diff --git a/src/app/api/_data/data-service.ts b/src/app/api/_data/data-service.ts
@@ -3,8 +3,8 @@ import { ObjectId, Collection } from 'mongodb'
 import { DB_CHATTERPAY_NAME } from 'src/config-global'
 
 import { IAccount } from 'src/types/account'
-import { INFT, ITransaction } from 'src/types/wallet'
 import { LastUserConversation } from 'src/types/chat'
+import { INFT, ITransaction } from 'src/types/wallet'
 
 import { getClientPromise } from './mongo-connection'
 import { getClientPromiseBot } from './mongo-connection-bot'
@@ -29,7 +29,7 @@ interface ITransactionDB extends Omit<ITransaction, 'id'> {
 }
 interface INFTDB extends Omit<INFT, 'bddId' | 'nftId'> {
   _id: any // bdd id
-  id: number // nft id
+  id: string // nft id
 }
 
 interface UserConversation {
@@ -113,7 +113,58 @@ export async function getWalletNfts(wallet: string): Promise<INFT[] | undefined>
           channel_user_id: 1,
           wallet: 1,
           trxId: 1,
-          metadata: 1
+          metadata: 1,
+          timestamp: 1,
+          original: 1,
+          copy_of: 1,
+          copy_order: 1,
+          total_of_this: 1
+        }
+      },
+      {
+        $addFields: {
+          original: {
+            $cond: {
+              if: { $eq: ['$original', null] },
+              then: true,
+              else: '$original'
+            }
+          },
+          // Considerar que copy_order puede ser nulo, si es nulo lo reemplazamos por 1
+          copy_order: {
+            $ifNull: ['$copy_order', 1]
+          },
+          // Obtener el campo copy_of, si es nulo lo dejamos como nulo
+          copy_of: {
+            $ifNull: ['$copy_of', null]
+          }
+        }
+      },
+      {
+        // Realizar un lookup para obtener el total_of_this del registro original relacionado
+        $lookup: {
+          from: SCHEMA_NFTS,
+          localField: 'copy_of',
+          foreignField: 'id',
+          as: 'original_nft'
+        }
+      },
+      {
+        $addFields: {
+          total_of_original: {
+            $cond: {
+              if: { $ne: ['$copy_of', null] },
+              then: {
+                $arrayElemAt: ['$original_nft.total_of_this', 0]
+              },
+              else: '$total_of_this'
+            }
+          }
+        }
+      },
+      {
+        $sort: {
+          timestamp: -1 // Orden descendente por timestamp
         }
       }
     ])

diff --git a/src/locales/langs/br.json b/src/locales/langs/br.json
@@ -306,7 +306,9 @@
       "geo-no-data": "Dados não fornecidos",
       "meta-image": "Repositórios de imagem",
       "meta-description": "Descrição",
-      "meta-geo": "Geolocalização"
+      "meta-geo": "Geolocalização",
+      "original": "Original",
+      "copy-of": "Cópia  #{X} de #{Z}"
     },
     "claim": {
       "cta": "Reivindicar",

diff --git a/src/locales/langs/en.json b/src/locales/langs/en.json
@@ -306,7 +306,9 @@
       "geo-no-data": "No data provided",
       "meta-image": "Image repositories",
       "meta-description": "Description",
-      "meta-geo": "Geolocation"
+      "meta-geo": "Geolocation",
+      "original": "Original",
+      "copy-of": "Copy #{X} of #{Z}"
     },
     "claim": {
       "cta": "Claim",

diff --git a/src/locales/langs/es.json b/src/locales/langs/es.json
@@ -306,7 +306,10 @@
       "geo-no-data": "Datos no proporcionados",
       "meta-image": "Repositorios de imágenes",
       "meta-description": "Descripción",
-      "meta-geo": "Geolocalización"
+      "meta-geo": "Geolocalización",
+      "original": "Original",
+      "copy-of": "Copia #{X} de #{Z}"
+
     },
     "claim": {
       "cta": "Reclamar",

diff --git a/src/sections/nfts/nft-item.tsx b/src/sections/nfts/nft-item.tsx
@@ -8,7 +8,15 @@ import Divider from '@mui/material/Divider'
 import MenuItem from '@mui/material/MenuItem'
 import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
-import { Link, Button, Dialog, DialogTitle, DialogActions, DialogContent } from '@mui/material'
+import {
+  Link,
+  Button,
+  Dialog,
+  useTheme,
+  DialogTitle,
+  DialogActions,
+  DialogContent
+} from '@mui/material'
 
 import { useTranslate } from 'src/locales'
 import {
@@ -33,6 +41,7 @@ type Props = {
 export default function NftItem({ nft }: Props) {
   const { t } = useTranslate()
   const popover = usePopover()
+  const theme = useTheme()
 
   const { trxId, nftId, metadata } = nft
 
@@ -75,7 +84,15 @@ export default function NftItem({ nft }: Props) {
   // ----------------------------------------------------------------------
 
   const renderClickableLink = (url: string, name: string) => (
-    <a href={url} target='_blank' rel='noopener noreferrer'>
+    <a
+      href={url}
+      target='_blank'
+      rel='noopener noreferrer'
+      style={{
+        color:
+          theme.palette.mode !== 'light' ? theme.palette.primary.light : theme.palette.primary.main
+      }}
+    >
       {name}
     </a>
   )
@@ -94,14 +111,24 @@ export default function NftItem({ nft }: Props) {
     return <Typography variant='body2'>{t('nfts.item.geo-no-data')}</Typography>
   }
 
+  const isOriginalOrCopy = (nftItem: INFT) => {
+    if (nftItem.original || false) {
+      return t('nfts.item.original')
+    }
+    const copyText = t('nfts.item.copy-of')
+      .replace('{X}', String(nft.copy_order) || '1')
+      .replace('{Z}', String(nft.total_of_original) || '1')
+    return copyText
+  }
+
   // ----------------------------------------------------------------------
 
   const renderNftId = (
     <Box
       sx={{
         position: 'absolute',
         top: 30,
-        left: 25,
+        left: 24,
         backgroundColor: 'rgba(0, 0, 0, 0.6)',
         padding: '2px 6px',
         borderRadius: '4px',
@@ -114,6 +141,113 @@ export default function NftItem({ nft }: Props) {
     </Box>
   )
 
+  const renderNftOriginalOrCopy = (
+    <Box
+      sx={{
+        position: 'absolute',
+        top: 30,
+        right: 40,
+        backgroundColor: 'rgba(0, 0, 0, 0.6)',
+        padding: '2px 6px',
+        borderRadius: '4px',
+        color: 'white',
+        fontSize: '10px',
+        zIndex: 1
+      }}
+    >
+      {`${isOriginalOrCopy(nft)}`}
+    </Box>
+  )
+
+  const renderImage = (
+    <Link href={linkMarketplace} target='_blank' rel='noopener' color='inherit' underline='none'>
+      <Avatar
+        alt='nft'
+        src={imageUrl}
+        variant='rounded'
+        sx={{
+          position: 'absolute',
+          marginLeft: 1.5,
+          marginTop: 2.5,
+          marginBottom: 2.5,
+          width: '90%',
+          height: '90%',
+          borderRadius: 2,
+          overflow: 'hidden',
+          objectFit: 'cover'
+        }}
+      />
+    </Link>
+  )
+
+  const renderDescriptionItems = (
+    <Box sx={{ p: 3 }}>
+      <Stack spacing={2}>
+        <Link href={linkTrx} target='_blank' rel='noopener' color='inherit' underline='none'>
+          <Stack direction='row' spacing={1.5} alignItems='center'>
+            <Iconify width={16} icon='mdi:swap-horizontal' />
+            <Typography variant='caption'>{t('nfts.view-trx')}</Typography>
+          </Stack>
+        </Link>
+
+        <Stack direction='row' spacing={1.5} alignItems='center'>
+          <Iconify width={16} icon='arcticons:openai-chatgpt' />
+          <Typography variant='caption'>{metadata.description}</Typography>
+        </Stack>
+      </Stack>
+    </Box>
+  )
+
+  const renderModalMetadata = (
+    <Dialog open={openMetadata} onClose={handleCloseMetadata} fullWidth maxWidth='xs'>
+      {' '}
+      <DialogTitle>{t('nfts.item.metadata')}</DialogTitle>
+      <DialogContent>
+        <Box sx={{ padding: 2 }}>
+          <Typography variant='h6'>{t('nfts.item.meta-image')}</Typography>
+          {'   '}
+          {renderClickableLink(metadata.image_url.gcp, 'Google')}
+          {', '}
+          {'   '}
+          {renderClickableLink(metadata.image_url.icp, 'ICP')}
+          {', '}
+          {'   '}
+          {renderClickableLink(metadata.image_url.ipfs, 'IPFS')}
+          <Typography variant='h6' sx={{ marginTop: 2 }}>
+            {t('nfts.item.meta-description')}
+          </Typography>
+          <Typography variant='body1'>{metadata.description}</Typography>
+          <Typography variant='h6' sx={{ marginTop: 2 }}>
+            {t('nfts.item.meta-geo')}
+          </Typography>
+          {renderMapLink(longitude, latitude)}
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button variant='outlined' color='inherit' onClick={handleCloseMetadata}>
+          {t('common.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+
+  const renderMenu = (
+    <CustomPopover open={popover.open} onClose={popover.onClose} arrow='right-top'>
+      <MenuItem onClick={handleView}>
+        <Iconify icon='solar:eye-bold' />
+        {t('common.view')}
+      </MenuItem>
+      <MenuItem onClick={handleShare}>
+        <Iconify icon='solar:share-bold' />
+        {t('common.share')}
+      </MenuItem>
+      <MenuItem onClick={handleViewMetadata}>
+        <Iconify icon='arcticons:metadataremover' />
+        {t('nfts.item.metadata')}
+      </MenuItem>
+    </CustomPopover>
+  )
+
   return (
     <>
       <Card>
@@ -133,97 +267,19 @@ export default function NftItem({ nft }: Props) {
             }}
           >
             {renderNftId}
-            <Link
-              href={linkMarketplace}
-              target='_blank'
-              rel='noopener'
-              color='inherit'
-              underline='none'
-            >
-              <Avatar
-                alt='nft'
-                src={imageUrl}
-                variant='rounded'
-                sx={{
-                  position: 'absolute',
-                  marginLeft: 1.5,
-                  marginTop: 2.5,
-                  marginBottom: 2.5,
-                  width: '90%',
-                  height: '90%',
-                  borderRadius: 2,
-                  overflow: 'hidden',
-                  objectFit: 'cover'
-                }}
-              />
-            </Link>
+            {renderNftOriginalOrCopy}
+            {renderImage}
           </Box>
         </Stack>
+
         <Divider sx={{ borderStyle: 'dashed' }} />
 
-        <Box sx={{ p: 3 }}>
-          <Stack spacing={2}>
-            <Link href={linkTrx} target='_blank' rel='noopener' color='inherit' underline='none'>
-              <Stack direction='row' spacing={1.5} alignItems='center'>
-                <Iconify width={16} icon='mdi:swap-horizontal' />
-                <Typography variant='caption'>{t('nfts.view-trx')}</Typography>
-              </Stack>
-            </Link>
-
-            <Stack direction='row' spacing={1.5} alignItems='center'>
-              <Iconify width={16} icon='arcticons:openai-chatgpt' />
-              <Typography variant='caption'>{metadata.description}</Typography>
-            </Stack>
-          </Stack>
-        </Box>
+        {renderDescriptionItems}
       </Card>
 
-      <CustomPopover open={popover.open} onClose={popover.onClose} arrow='right-top'>
-        <MenuItem onClick={handleView}>
-          <Iconify icon='solar:eye-bold' />
-          {t('common.view')}
-        </MenuItem>
-        <MenuItem onClick={handleShare}>
-          <Iconify icon='solar:share-bold' />
-          {t('common.share')}
-        </MenuItem>
-        <MenuItem onClick={handleViewMetadata}>
-          <Iconify icon='arcticons:metadataremover' />
-          {t('nfts.item.metadata')}
-        </MenuItem>
-      </CustomPopover>
-
-      {/* Modal for displaying metadata */}
-      <Dialog open={openMetadata} onClose={handleCloseMetadata} fullWidth maxWidth='xs'>
-        {' '}
-        <DialogTitle>{t('nfts.item.metadata')}</DialogTitle>
-        <DialogContent>
-          <Box sx={{ padding: 2 }}>
-            <Typography variant='h6'>{t('nfts.item.meta-image')}</Typography>
-            {'   '}
-            {renderClickableLink(metadata.image_url.gcp, 'Google')}
-            {', '}
-            {'   '}
-            {renderClickableLink(metadata.image_url.icp, 'ICP')}
-            {', '}
-            {'   '}
-            {renderClickableLink(metadata.image_url.ipfs, 'IPFS')}
-            <Typography variant='h6' sx={{ marginTop: 2 }}>
-              {t('nfts.item.meta-description')}
-            </Typography>
-            <Typography variant='body1'>{metadata.description}</Typography>
-            <Typography variant='h6' sx={{ marginTop: 2 }}>
-              {t('nfts.item.meta-geo')}
-            </Typography>
-            {renderMapLink(longitude, latitude)}
-          </Box>
-        </DialogContent>
-        <DialogActions>
-          <Button variant='outlined' color='inherit' onClick={handleCloseMetadata}>
-            {t('common.close')}
-          </Button>
-        </DialogActions>
-      </Dialog>
+      {renderMenu}
+
+      {renderModalMetadata}
     </>
   )
 }