Merge pull request #121 from P4-Games/feature/opensea-url

mer feature/opensea-url into develop

Dockerfile

@@ -28,6 +28,7 @@ ARG NEXT_PUBLIC_ALLOWED_ORIGINS
 ARG RECAPTCHA_API_KEY
 ARG NEXT_PUBLIC_RECAPTCHA_SITE_KEY
 ARG NEXT_PUBLIC_NFT_IMAGE_REPOSITORY
+ARG NEXT_PUBLIC_NFT_MARKETPLACE_URL
 
 #
 # env
@@ -53,6 +54,7 @@ ENV NEXT_PUBLIC_ALLOWED_ORIGINS $NEXT_PUBLIC_ALLOWED_ORIGINS
 ENV RECAPTCHA_API_KEY $RECAPTCHA_API_KEY
 ENV NEXT_PUBLIC_RECAPTCHA_SITE_KEY $NEXT_PUBLIC_RECAPTCHA_SITE_KEY
 ENV NEXT_PUBLIC_NFT_IMAGE_REPOSITORY $NEXT_PUBLIC_NFT_IMAGE_REPOSITORY
+ENV NEXT_PUBLIC_NFT_MARKETPLACE_URL $NEXT_PUBLIC_NFT_MARKETPLACE_URL
 #
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .

README.md

@@ -64,39 +64,7 @@ __2. Clone repository__:
 
 __3. Complete .env file__: 
 
-Create a .env file in the root folder and populate it with the following keys and values:
-
-```sh
-SKIP_PREFLIGHT_CHECK=true
-GENERATE_SOURCEMAP=false
-npm_config_user_agent=yarn
-PORT=3000
-
-# server-side
-NODE_ENV='development'
-APP_ENV='development'
-BOT_API_TOKEN={api token}
-BOT_API_URL=http://localhost:3000
-BACKEND_API_URL=https://dev.back.chatterpay.net
-BOT_API_WAPP_ENABLED=true
-MONGODB='mongodb://localhost:27017'
-MONGODB_BOT='BOT mongo db url'
-DB_CHATTERPAY_NAME='chatterpay_dev'
-NODE_PROVIDER_SEPOLIA_URL='https://sepolia.infura.io/v3/YOUR_API_KEY'
-NODE_PROVIDER_MUMBAI_URL='https://stylish-dawn-bush.bsc-testnet.quiknode.pro/YOUR_API_KEY/'
-NODE_PROVIDER_SCROLL_URL='https://lb.drpc.org/ogrpc?network=scroll-sepolia&dkey=YOUR_API_KEY'
-HANDLE_VERCEL_FREE_PLAN_TIMEOUT=true
-API3_ENABLED=false
-JWT_SECRET='some secret text'
-RECAPTCHA_API_KEY={recaptcha api key}
-
-# client-side
-NEXT_PUBLIC_USE_MOCK=true
-NEXT_PUBLIC_UI_URL=http://localhost:3000
-NEXT_PUBLIC_ALLOWED_ORIGINS=http://localhost:3000
-NEXT_PUBLIC_RECAPTCHA_SITE_KEY={recaptcha side key}
-NEXT_PUBLIC_NFT_IMAGE_REPOSITORY={gcp|ipfs|icp}
-```
+Create a .env file in the root folder and populate it with keys and values described in [example_env file](./example_env).
 
 __4. Install Dependencies__:
 

cloudbuild.yaml

@@ -30,7 +30,8 @@ steps:
       - RECAPTCHA_API_KEY=${_RECAPTCHA_API_KEY}
       - NEXT_PUBLIC_RECAPTCHA_SITE_KEY=${_NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
       - NEXT_PUBLIC_NFT_IMAGE_REPOSITORY=${_NEXT_PUBLIC_NFT_IMAGE_REPOSITORY}
-
+      - NEXT_PUBLIC_NFT_MARKETPLACE_URL=${_NEXT_PUBLIC_NFT_MARKETPLACE_URL}
+
   # build the container images
   - name: "gcr.io/cloud-builders/docker"
     id: Build
@@ -46,6 +47,7 @@ steps:
       "--build-arg", "RECAPTCHA_API_KEY=${_RECAPTCHA_API_KEY}",
       "--build-arg", "NEXT_PUBLIC_RECAPTCHA_SITE_KEY=${_NEXT_PUBLIC_RECAPTCHA_SITE_KEY}",
       "--build-arg", "NEXT_PUBLIC_NFT_IMAGE_REPOSITORY=${_NEXT_PUBLIC_NFT_IMAGE_REPOSITORY}",
+      "--build-arg", "NEXT_PUBLIC_NFT_MARKETPLACE_URL=${_NEXT_PUBLIC_NFT_MARKETPLACE_URL}",
       "--build-arg", "BOT_API_TOKEN=${_BOT_API_TOKEN}",
       "--build-arg", "BOT_API_URL=${_BOT_API_URL}",
       "--build-arg", "BOT_API_WAPP_ENABLED=${_BOT_API_WAPP_ENABLED}",

example_env

@@ -27,4 +27,5 @@ NEXT_PUBLIC_UI_URL=http://localhost:3000
 NEXT_PUBLIC_ALLOWED_ORIGINS=http://localhost:3000
 NEXT_PUBLIC_RECAPTCHA_SITE_KEY={recaptcha side key}
 NEXT_PUBLIC_NFT_IMAGE_REPOSITORY={gcp|ipfs|icp}
+NEXT_PUBLIC_NFT_MARKETPLACE_URL=https://testnets.opensea.io/assets/arbitrum-sepolia/0xAc3F97E45F67052b1AdBbC4d4eB1153Ba14E955d
 

scripts/docker-build.sh

@@ -29,4 +29,5 @@ docker build \
   --build-arg RECAPTCHA_API_KEY="$RECAPTCHA_API_KEY" \
   --build-arg NEXT_PUBLIC_RECAPTCHA_SITE_KEY="$NEXT_PUBLIC_RECAPTCHA_SITE_KEY" \
   --build-arg NEXT_PUBLIC_NFT_IMAGE_REPOSITORY="$NEXT_PUBLIC_NFT_IMAGE_REPOSITORY" \
+  --BUILD-ARG NEXT_PUBLIC_NFT_MARKETPLACE_URL="$NEXT_PUBLIC_NFT_MARKETPLACE_URL" \
   -t my-nextjs-app ..

src/config-global.ts

@@ -44,11 +44,10 @@ export const BOT_WAPP_URL =
 export const EXPLORER_L1 = 'https://sepolia.etherscan.io'
 export const EXPLORER_L2 = 'https://l1sload-blockscout.scroll.io' // Scroll devnet Explorer
 export const NFT_TRX_EXPLORER = 'https://sepolia.arbiscan.io'
-// export const NFT_MARKETPLACE =
-//  'https://testnets.opensea.io/assets/arbitrum-sepolia/0xedeb3db84518d539c8d7a4755d4be48dc1f876c1/ID'
 
-export const NFT_MARKETPLACE =
-  'https://testnets.opensea.io/assets/arbitrum-sepolia/0xAc3F97E45F67052b1AdBbC4d4eB1153Ba14E955d/ID'
+export const NFT_MARKETPLACE_URL =
+  process.env.NEXT_PUBLIC_NFT_MARKETPLACE_URL ||
+  'https://testnets.opensea.io/assets/arbitrum-sepolia'
 
 export const NFT_SHARE = 'https://api.whatsapp.com/send/?text=MESSAGE'
 

src/sections/nfts/nft-item-claim.tsx

@@ -7,7 +7,7 @@ import { Card, Button, Typography } from '@mui/material'
 import { useResponsive } from 'src/hooks/use-responsive'
 
 import { useTranslate } from 'src/locales'
-import { BOT_WAPP_URL, NFT_MARKETPLACE, NFT_IMAGE_REPOSITORY } from 'src/config-global'
+import { BOT_WAPP_URL, NFT_MARKETPLACE_URL, NFT_IMAGE_REPOSITORY } from 'src/config-global'
 
 import { varFade } from 'src/components/animate'
 
@@ -25,7 +25,7 @@ export default function NftItemClaim({ nftId, nftData }: NftItemClaimProps) {
   const { t } = useTranslate()
 
   const handleOpenOpenSea = () => {
-    const url = `${NFT_MARKETPLACE.replace('ID', nftId)}`
+    const url = `${NFT_MARKETPLACE_URL}/${nftId}`
     window.open(url, '_blank')
   }
 

src/sections/nfts/nft-item.tsx

@@ -22,7 +22,7 @@ import { useTranslate } from 'src/locales'
 import {
   NFT_SHARE,
   UI_API_URL,
-  NFT_MARKETPLACE,
+  NFT_MARKETPLACE_URL,
   NFT_TRX_EXPLORER,
   NFT_IMAGE_REPOSITORY
 } from 'src/config-global'
@@ -46,7 +46,7 @@ export default function NftItem({ nft }: Props) {
   const { trxId, nftId, metadata } = nft
 
   const linkTrx = `${NFT_TRX_EXPLORER}/tx/${trxId}`
-  const linkMarketplace = `${NFT_MARKETPLACE.replace('ID', nftId.toString())}`
+  const linkMarketplace = `${NFT_MARKETPLACE_URL}/${nftId}`
 
   const mintUrl = `${UI_API_URL}/nfts/mint/${nftId.toString()}`
   const linkShare = `${NFT_SHARE.replace('MESSAGE', `${t('nfts.mint')}: ${mintUrl}`)}`