Merge pull request #94 from P4-Games/feature/refactor-nft-claim

merge feature/refactor-nft-claim into develop

next.config.js

@@ -15,6 +15,7 @@ module.exports = {
   },
   output: 'standalone',
   images: {
+    domains: ['storage.googleapis.com'],
     remotePatterns: [
       {
         protocol: 'https',

src/app/api/_data/blk-service.ts

@@ -98,6 +98,10 @@ export async function getConversationRates(): Promise<any> {
   return result
 }
 
+export async function getNftById(nftId: string): Promise<any> {
+  return fetchNftById(nftId)
+}
+
 // ---------------------------------------------------------------------------------------------
 
 async function getBalances(walletAddress: string): Promise<any[]> {
@@ -217,6 +221,16 @@ const fethCustomTokens = async (address: string) => {
   }
 }
 
+const fetchNftById = async (id: string) => {
+  try {
+    const response = await axios.get(`${BACKEND_API_URL}/nft/${id}`)
+    return response.data
+  } catch (error) {
+    console.error('Error fetching nft id:', id, error)
+    throw error
+  }
+}
+
 async function getTokenBalance(
   tokenContract: ethers.Contract,
   walletAddress: string

src/app/api/_hooks/api-resolver.ts

@@ -48,6 +48,9 @@ export const endpoints = {
     code: () => getFullUIEndpoint(`auth/code`),
     login: () => getFullUIEndpoint(`auth/login`)
   },
+  nft: {
+    id: (id: string) => getFullUIEndpoint(`nft/${id}`)
+  },
   dashboard: {
     root: getFullUIEndpoint('app'),
     user: {

src/app/api/_hooks/index.ts

@@ -1,3 +1,5 @@
+export { useGetNftById } from './use-nft'
+
 export { useGetContact } from './use-contact'
 
 export {

src/app/api/_hooks/use-nft.ts

@@ -0,0 +1,9 @@
+import { endpoints } from 'src/app/api/_hooks/api-resolver'
+
+import { useGetCommon } from './common'
+
+// ----------------------------------------------------------------------
+
+export function useGetNftById(nftId: string) {
+  return useGetCommon(endpoints.nft.id(nftId))
+}

src/app/api/v1/nft/[id]/route.ts

@@ -0,0 +1,53 @@
+import { NextResponse } from 'next/server'
+
+import { getNftById } from 'src/app/api/_data/blk-service'
+
+import { IErrorResponse } from 'src/types/api'
+
+// ----------------------------------------------------------------------
+
+type IParams = {
+  id: string
+}
+
+// ----------------------------------------------------------------------
+
+export async function GET(request: Request, { params }: { params: IParams }) {
+  const errorMessage: IErrorResponse = {
+    error: {
+      code: 'NFT_NOT_FOUND',
+      message: `NFT id '${params.id}' not found`,
+      details: '',
+      stack: '',
+      url: request.url
+    }
+  }
+
+  if (!params.id) {
+    return new NextResponse(JSON.stringify(errorMessage), {
+      status: 404,
+      headers: { 'Content-Type': 'application/json' }
+    })
+  }
+
+  try {
+    console.log('x')
+    const response = (await getNftById(params.id)) || {}
+    console.log('response backend get Nft By Id', response.data)
+    if (response && response.image) {
+      return NextResponse.json(response)
+    }
+    return new NextResponse(JSON.stringify(errorMessage), {
+      status: 404,
+      headers: { 'Content-Type': 'application/json' }
+    })
+  } catch (ex) {
+    console.error(ex)
+    return new NextResponse(JSON.stringify({ error: 'Error getting NFT' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' }
+    })
+  }
+}
+
+// ----------------------------------------------------------------------

src/app/dashboard/user/wallet/[walletId]/nfts/[nftId]/page.tsx → src/app/dashboard/user/wallet/[walletId]/nfts/[nftId]/page_

@@ -1,8 +1,10 @@
+/*
 'use client'
 
 import { useParams } from 'next/navigation'
 
 import { NftView } from 'src/sections/nfts/view'
+*/
 
 // ----------------------------------------------------------------------
 
@@ -11,7 +13,7 @@ export const metadata = {
   title: 'user - NFTs'
 }
 */
-
+/*
 export default function NftIdPage() {
   const params = useParams()
 
@@ -20,3 +22,4 @@ export default function NftIdPage() {
   const nftId = Array.isArray(params.nftId) ? params.nftId[0] : params.nftId
   return <NftView walletId={walletId} nftId={nftId} />
 }
+*/

src/app/layout.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable perfectionist/sort-imports */
 import 'src/global.css'
 
-// i18n
 import 'src/locales/i18n'
 
 // ----------------------------------------------------------------------

src/app/nfts/mint/[id]/layout.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import MainLayout from 'src/layouts/main'
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  children: React.ReactNode
+}
+
+export default function Layout({ children }: Props) {
+  return <MainLayout>{children}</MainLayout>
+}

src/app/nfts/mint/[id]/page.tsx

@@ -0,0 +1,11 @@
+import { NftMintView } from 'src/sections/nfts/view'
+
+// ----------------------------------------------------------------------
+
+export const metadata = {
+  title: 'NFT Mint'
+}
+
+export default function NftMintPage({ params }: { params: { id: string } }) {
+  return <NftMintView nftId={params.id} />
+}

src/config-global.ts

@@ -51,7 +51,7 @@ export const NFT_SHARE = 'https://api.whatsapp.com/send/?text=MESSAGE'
 
 export const STORAGE_KEY_TOKEN = 'accessToken'
 export const STORAGE_KEY_SETTINGS = 'settings'
-export const CONTACT_EMAIL = 'info@chatterpay.net'
+export const CONTACT_EMAIL = 'contacto@chatterpay.com.ar'
 export const GET_BALANCES_FROM_BACKEND = true
 
 export const defaultBalance = {

src/locales/langs/br.json

@@ -294,7 +294,13 @@
   },
   "nfts": {
     "view-trx": "Ver detalhes da transação",
-    "mint": "Ei, dá uma olhada no meu NFT:"
+    "mint": "Ei, dá uma olhada no meu NFT:",
+    "claim": {
+      "cta": "Reivindicar",
+      "cta-msg": "Reivindique seu certificado na blockchain gratuitamente!",
+      "opensea-alt": "logo open sea",
+      "wapp-msg": "Gostaria de mintar o NFT"
+    }
   },
   "account": {
     "title": "Conta"

src/locales/langs/en.json

@@ -294,7 +294,13 @@
   },
   "nfts": {
     "view-trx": "View Transacton Details",
-    "mint": "Hey, check out my NFT:"
+    "mint": "Hey, check out my NFT:",
+    "claim": {
+      "cta": "Claim",
+      "cta-msg": "Claim your certificate on the blockchain for free!",
+      "opensea-alt": "open sea logo",
+      "wapp-msg": "I would like to mint the NFT"
+    }
   },
   "account": {
     "title": "Account"

src/locales/langs/es.json

@@ -294,7 +294,13 @@
   },
   "nfts": {
     "view-trx": "Ver detalles de la transacción",
-    "mint": "Hey, mira mi NFT:"
+    "mint": "Hey, mira mi NFT:",
+    "claim": {
+      "cta": "Reclamar",
+      "cta-msg": "¡Reclamá tu certificado en blockchain gratis!",
+      "opensea-alt": "logo open sea",
+      "wapp-msg": "Me gustaría mintear el NFT"
+    }
   },
   "account": {
     "title": "Cuenta"

src/sections/nfts/nft-item-mint.tsx → src/sections/nfts/_nft-item-mint_

@@ -1,3 +1,4 @@
+/*
 import { Box, Stack } from '@mui/system'
 import IconButton from '@mui/material/IconButton'
 import { Link, Card, Avatar, Divider, MenuItem, Typography } from '@mui/material'
@@ -56,7 +57,7 @@ export default function NftItemMint({ nft }: NftItemProps) {
             >
               <Avatar
                 alt='nft'
-                src={metadata.image_url}
+                src={metadata.image}
                 variant='rounded'
                 sx={{
                   position: 'absolute',
@@ -101,3 +102,4 @@ export default function NftItemMint({ nft }: NftItemProps) {
     </>
   )
 }
+*/