update forge gem

app/(private)/components/revealForgingResult.tsx

@@ -0,0 +1,96 @@
+'use client'
+import IconClose from '@/assets/ic_close.svg'
+import Gem from '@/components/gem'
+import NoBackgroundModal from '@/components/modal/giftModal'
+import { Bangkok, Context } from '@/provider'
+import { GET_REQUEST_MANAGER } from '@/services'
+import { useSubscription } from '@apollo/client'
+import Image from 'next/image'
+import { useContext, useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+import GoldRing from '../assets/gold-ring.png'
+import SilverRing from '../assets/silver-ring.png'
+export const RevealForgingResult = ({
+  requestId,
+  setRequestLoading,
+  isOpen,
+  onOpenChange,
+  requestLoading,
+  onClose,
+}: any) => {
+  const [prize, setPrize] = useState<any>()
+  const [result, setResult] = useState()
+  const { account } = useContext(Context)
+  const { data } = useSubscription(GET_REQUEST_MANAGER, {
+    variables: {
+      id: requestId,
+    },
+  })
+  console.log(data)
+  useEffect(() => {
+    if (data?.request_manager?.[0]?.response?.code == 200) {
+      setResult(data.request_manager[0].response.data.result)
+      setPrize(data.request_manager[0].response.data.nftReward.class.toLowerCase())
+      setRequestLoading(false)
+    }
+    if (data?.request_manager?.[0]?.response?.code >= 500) {
+      toast(
+        data?.request_manager?.[0]?.response?.error?.msg?.[0]?.message || 'Something went wrong. Please try again.',
+        { type: 'error' }
+      )
+      setRequestLoading(false)
+    }
+  }, [data?.request_manager?.[0]?.response?.code])
+
+  if (requestLoading) {
+    return (
+      <NoBackgroundModal isOpen onOpenChange={onOpenChange} isLoading>
+        <></>
+      </NoBackgroundModal>
+    )
+  }
+  if (result == 'FAIL') {
+    return (
+      <NoBackgroundModal isOpen={isOpen} onOpenChange={onOpenChange}>
+        <div className='flex flex-col items-center text-center'>
+          <div className={`font-bold text-[#FB5050] ${Bangkok.className} text-xl`}>
+            Sorry!
+            <br /> Dragon Gems upgrade failed. Maybe you'll be luckier next time
+          </div>
+          <div className='relative mt-8'>
+            <Image src={SilverRing} alt='' className='w-[158px] h-[168px]' />
+            <div className='absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2'>
+              <Gem type={prize} />
+            </div>
+          </div>
+          <div onClick={onClose} className='mt-4'>
+            <Image src={IconClose} alt='' className='w-8 h-8 cursor-pointer' />
+          </div>
+        </div>
+      </NoBackgroundModal>
+    )
+  } else {
+    return (
+      <NoBackgroundModal isOpen={isOpen} onOpenChange={onOpenChange}>
+        <div className='flex flex-col items-center text-center'>
+          <div className={`font-bold text-[#fff] ${Bangkok.className} text-xl`}>
+            Congratulation!
+            <br /> Your Dragon Gem has been upgraded successfully
+          </div>
+          <div className='text-sm'>
+            Congratulation <span className='#FCE57C'>{account?.username}</span>,<br /> your gem has been uprank
+          </div>
+          <div className='relative mt-8'>
+            <Image src={GoldRing} alt='' className='w-[158px] h-[168px]' />
+            <div className='absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2'>
+              <Gem type={prize} />
+            </div>
+          </div>
+          <div onClick={onClose} className='mt-4'>
+            <Image src={IconClose} alt='' className='w-8 h-8 cursor-pointer' />
+          </div>
+        </div>
+      </NoBackgroundModal>
+    )
+  }
+}

app/(private)/jackpot/page.tsx

@@ -42,9 +42,10 @@ const initList = {
   r5: 0,
   r6: 0,
   r7: 0,
+  shield: 0,
 }
 export default function Page() {
-  const { inventory } = useContext(Context)
+  const { assets } = useContext(Context)
   const [selectedColorKey, setSelectedColorKey] = useState(new Set(['all_colors']))
   const selectedColorValue = useMemo(
     () => Array.from(selectedColorKey).join(', ').replaceAll('_', ' '),
@@ -59,24 +60,32 @@ export default function Page() {
   const [gems, setGems] = useState<any>(Map(initList))
 
   useEffect(() => {
-    const gemList = inventory.reduce((total, current) => {
-      const color = current.media_info.onchain.metadata.attributes.find((attr) => attr.trait_type == 'Color')?.value
-      if (color == 'WHITE') {
-        total['w1']++
-      }
-      if (color == 'BLUE') {
-        total['b1']++
-      }
-      if (color == 'GOLD') {
-        total['g1']++
-      }
-      if (color == 'RED') {
-        total['r1']++
+    const gemList = assets.reduce(
+      (total, current) => {
+        const color = current.media_info.onchain.metadata.attributes.find((attr) => attr.trait_type == 'Color')?.value
+        if (color == 'WHITE') {
+          total['w1']++
+        }
+        if (color == 'BLUE') {
+          total['b1']++
+        }
+        if (color == 'GOLD') {
+          total['g1']++
+        }
+        if (color == 'RED') {
+          total['r1']++
+        }
+        return total
+      },
+      { ...initList }
+    )
+    for (let i = 0; i < 3; i++) {
+      if (selectedGems[i] != undefined) {
+        ;(gemList as any)[selectedGems[i] as string]--
       }
-      return total
-    }, initList)
+    }
     setGems(Map(gemList))
-  }, [inventory?.length])
+  }, [selectedGems.filter((g) => !g).length, assets?.length])
 
   const addGemHandler = (type: string) => {
     for (let i = 0; i < 3; i++) {
@@ -251,7 +260,7 @@ export default function Page() {
                   return (
                     <div
                       key={color + star}
-                      className='flex flex-col items-center gap-[6px] cursor-pointer'
+                      className='flex flex-col items-center gap-[6px] cursor-pointer h-fit'
                       onClick={() => addGemHandler(color + star)}>
                       <div>
                         <GemWithFrame type={(color + star) as any} />

app/(private)/layout.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import ForceActive from '@/app/(private)/assets/force-active.png'
-import ForceInactive from '@/app/(private)/assets/force-inactive.png'
+import ForgeActive from '@/app/(private)/assets/force-active.png'
+import ForgeInactive from '@/app/(private)/assets/force-inactive.png'
 import JackpotActive from '@/app/(private)/assets/jackpot-active.png'
 import JackpotInactive from '@/app/(private)/assets/jackpot-inactive.png'
 import QuestActive from '@/app/(private)/assets/quest-active.png'
@@ -46,11 +46,11 @@ export default function Layout({ children }: { children: ReactNode }) {
               className={`${Bangkok.className} absolute inset-0 grid place-items-center ${
                 pathname == '/' ? 'text-[#FFB438]' : 'text-[#828282]'
               }`}>
-              <div className=''>Force</div>
+              <div className=''>Forge</div>
             </div>
           </div>
-          <Image src={ForceActive} alt='' className={`hidden w-[157px] ${pathname == '/' ? 'md:block' : ''}`} />
-          <Image src={ForceInactive} alt='' className={` hidden w-[112px] ${pathname != '/' ? 'md:block' : ''}`} />
+          <Image src={ForgeActive} alt='' className={`hidden w-[157px] ${pathname == '/' ? 'md:block' : ''}`} />
+          <Image src={ForgeInactive} alt='' className={` hidden w-[112px] ${pathname != '/' ? 'md:block' : ''}`} />
         </div>
         <div
           className='cursor-pointer'