feat/add popup

components/Popup.tsx

@@ -0,0 +1,83 @@
+import styles from "./popup.module.css"
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    useDisclosure,
+} from '@chakra-ui/react'
+import React, {
+    forwardRef,
+    useImperativeHandle,
+    useState,
+} from 'react'
+
+const infoType = {
+    sushi: '/images/popup/sushi.webp',
+    stamina: '/images/popup/stamina.webp',
+    fish: '/images/popup/fish.webp',
+    ore: '/images/popup/ore.webp',
+    other: '/images/popup/other.webp',
+    success: '/images/popup/success.webp',
+    failed: '/images/popup/failed.webp',
+    cancel: '/images/popup/cancel.webp',
+    waiting: '/images/popup/waiting.webp',
+}
+
+export type PopupRef = {
+    isOpen: boolean
+    open: () => void
+    close: () => void
+    popup: (type, content, subcontent?, actionContent?, action?) => void
+}
+
+function Popup(_, ref) {
+    const { isOpen, onOpen, onClose } = useDisclosure()
+    const [info, setInfo] = useState({
+        type: '',
+        content: '',
+        subcontent: '',
+        actionContent: 'Close',
+        action: onClose
+    })
+
+    useImperativeHandle(ref, () => ({
+        isOpen: isOpen,
+        open: onOpen,
+        close: onClose,
+        popup(type, content, subcontent = '', actionContent = 'Close', action = onClose){
+            setInfo({
+                type,
+                content,
+                subcontent,
+                actionContent,
+                action
+            })
+        }
+    }), [onClose])
+
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} isCentered>
+            <ModalOverlay />
+            <ModalContent style={{ backgroundColor: "transparent" }}>
+                <div className={styles.background3}>
+                    <div className={styles.background2}>
+                        <div className={styles.background1}>
+                            <div>
+                                <div>NOTI</div>
+                                <button className="click-cursor" onClick={onClose}>
+                                    <img src='/images/popup/close.webp' />
+                                </button>
+                            </div>
+                            {info.type && <img src={infoType[info.type]} />}
+                            <div>{info.content}</div>
+                            {info.subcontent && <div>({info.subcontent})</div> }
+                            <button className="click-cursor" onClick={info.action}>{info.actionContent}</button>
+                        </div>
+                    </div>
+                </div>
+            </ModalContent>
+        </Modal>
+    )
+}
+
+export default forwardRef<PopupRef>(Popup)

components/Shop/ConfirmationModal.tsx

@@ -16,6 +16,7 @@ import {
   ModalOverlay,
 } from '@chakra-ui/react'
 import LoadingModal from '@components/LoadingModal'
+import Popup, { PopupRef } from '@components/Popup'
 import Button from '@components/theme/components/Button'
 import { utils } from 'ethers'
 import useTransactionState, {
@@ -28,6 +29,7 @@ import {
   useState,
   useCallback,
   useEffect,
+  useRef,
 } from 'react'
 import { buyFirstHammer, getHammerPrice } from 'utils/Item'
 import Price from './Price'
@@ -43,6 +45,7 @@ function ConfirmationModal(_, ref) {
   const [buyAmount, setBuyAmount] = useState(1)
   const [loading, setLoading] = useState(false)
   const handleTxStateChange = useTransactionState()
+  const popupRef = useRef<PopupRef>()
 
   useEffect(() => {
     ;(async () => {
@@ -67,7 +70,11 @@ function ConfirmationModal(_, ref) {
   const handleConfirm = useCallback(async () => {
     setLoading(true)
     await buyFirstHammer((hash) => {
-      handleTxStateChange('Buy first hammer', hash, TRANSACTION_STATE.WAITING)
+      handleTxStateChange('Buy first hammer', hash, TRANSACTION_STATE.WAITING, 
+        (type, content, subcontent) => {
+        popupRef.current.open()
+        popupRef.current.popup(type, content, subcontent)
+      })
     })
     setLoading(false)
     onToggle()
@@ -148,6 +155,7 @@ function ConfirmationModal(_, ref) {
           </Button>
         </ModalFooter>
       </ModalContent>
+      <Popup ref={popupRef} />
     </Modal>
   )
 }

components/marketplace/DashBoard.tsx

@@ -1,11 +1,12 @@
 import Link from 'next/link'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { listMultiItems } from 'utils/NFTMarket'
 import styles from './dashboard.module.css'
 import useTransactionState, {
   TRANSACTION_STATE,
 } from 'hooks/useTransactionState'
 import { getHeroes, listingHero } from 'utils/HeroMarketUtils'
+import Popup, { PopupRef } from '@components/Popup'
 
 const numOfPage = 8
 
@@ -17,6 +18,7 @@ export default function DashBoard() {
   const [priceInput, setPriceInput] = useState(null)
   const [status, setStatus] = useState('Loading ...')
   const handleTxStateChange = useTransactionState()
+  const popupRef = useRef<PopupRef>()
 
   const getHeroesData = async () => {
     const result = await getHeroes()
@@ -37,17 +39,29 @@ export default function DashBoard() {
       selected.id,
       Number(priceInput),
       (txHash) => {
-        handleTxStateChange(title, txHash, TRANSACTION_STATE.WAITING)
+        handleTxStateChange(title, txHash, TRANSACTION_STATE.WAITING,
+          (type, content, subcontent) => {
+          popupRef.current.open()
+          popupRef.current.popup(type, content, subcontent)
+        })
       }
     )
     if (result) {
       setDataInit([])
       await getHeroesData()
-      handleTxStateChange(title, result.transactionHash, result.status)
+      handleTxStateChange(title, result.transactionHash, result.status, 
+        (type, content, subcontent) => {
+        popupRef.current.open()
+        popupRef.current.popup(type, content, subcontent)
+      })
     } else {
       setData(dataInit)
       setStatus('Loading ...')
-      handleTxStateChange(title, '', TRANSACTION_STATE.NOT_EXECUTED)
+      handleTxStateChange(title, '', TRANSACTION_STATE.NOT_EXECUTED,
+        (type, content, subcontent) => {
+        popupRef.current.open()
+        popupRef.current.popup(type, content, subcontent)
+      })
     }
   }
   const renderData = useMemo(() => {
@@ -164,6 +178,7 @@ export default function DashBoard() {
           />
         </a>
       </Link>
+      <Popup ref={popupRef} />
     </div>
   )
 }

components/marketplace/History.tsx

@@ -1,10 +1,11 @@
 import Link from 'next/link'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { cancelListingItem, getListingIDsBySeller, getNumberOfItemListings } from 'utils/NFTMarket'
 import styles from './history.module.css'
 import useTransactionState, {
     TRANSACTION_STATE,
 } from 'hooks/useTransactionState'
+import Popup, { PopupRef } from '@components/Popup'
 
 const numOfPage = 4
 
@@ -16,6 +17,7 @@ export default function History() {
     const [status, setStatus] = useState('Loading ...')
     const [isOpenNotify, setIsOpenNotify] = useState(null)
     const handleTxStateChange = useTransactionState()
+    const popupRef = useRef<PopupRef>()
 
     useEffect(() => {
         getItems()
@@ -36,7 +38,11 @@ export default function History() {
         const result = await cancelListingItem(
             id,
             (txHash) => {
-                handleTxStateChange(title, txHash, TRANSACTION_STATE.WAITING)
+                handleTxStateChange(title, txHash, TRANSACTION_STATE.WAITING, 
+                    (type, content, subcontent) => {
+                    popupRef.current.open()
+                    popupRef.current.popup(type, content, subcontent)
+                })
             }, 
         )
         if (result) {
@@ -151,6 +157,7 @@ export default function History() {
                         <img src="./images/marketplace/back.webp" alt="img" />
                     </a>
                 </Link>
+                <Popup ref={popupRef} />
             </div>
             }
         </>

components/marketplace/Market.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './market.module.css'
 import useTransactionState, {
   TRANSACTION_STATE,
@@ -12,6 +12,7 @@ import {
   getListingIDs,
   purchaseHero,
 } from 'utils/HeroMarketUtils'
+import Popup, { PopupRef } from '@components/Popup'
 
 const numOfPage = 12
 
@@ -24,6 +25,7 @@ function Market() {
   const [data, setData] = useState([])
   const [loading, setLoading] = useState(false)
   const handleTxStateChange = useTransactionState()
+  const popupRef = useRef<PopupRef>()
 
   useEffect(() => {
     getItems()
@@ -43,34 +45,57 @@ function Market() {
 
   const handlePurchase = async (value) => {
     const title = 'Purchase item'
-
     const result = await purchaseHero(
       parseInt(value?.id),
       (txHash) => {
-        handleTxStateChange(title, txHash, TRANSACTION_STATE.WAITING)
+        handleTxStateChange(title, txHash, TRANSACTION_STATE.WAITING, 
+          (type, content, subcontent) => {
+          popupRef.current.open()
+          popupRef.current.popup(type, content, subcontent)
+        })
       },
       async (_) => {
         setData(dataInit)
       }
     )
     if (result) {
       await getItems()
-      handleTxStateChange(title, result.transactionHash, result.status)
+      handleTxStateChange(title, result.transactionHash, result.status, 
+        (type, content, subcontent) => {
+        popupRef.current.open()
+        popupRef.current.popup(type, content, subcontent)
+      })
     } else {
-      handleTxStateChange(title, '', TRANSACTION_STATE.NOT_EXECUTED)
+      handleTxStateChange(title, '', TRANSACTION_STATE.NOT_EXECUTED, 
+        (type, content, subcontent) => {
+        popupRef.current.open()
+        popupRef.current.popup(type, content, subcontent)
+      })
     }
   }
 
   const handleCancel = async (value) => {
     const title = 'Cancel listing item'
     const result = await cancelListingItem(value?.id, (txHash) => {
-      handleTxStateChange(title, txHash, TRANSACTION_STATE.WAITING)
+      handleTxStateChange(title, txHash, TRANSACTION_STATE.WAITING, 
+        (type, content, subcontent) => {
+        popupRef.current.open()
+        popupRef.current.popup(type, content, subcontent)
+      })
     })
     if (result) {
       await getItems()
-      handleTxStateChange(title, result.transactionHash, result.status)
+      handleTxStateChange(title, result.transactionHash, result.status, 
+        (type, content, subcontent) => {
+        popupRef.current.open()
+        popupRef.current.popup(type, content, subcontent)
+      })
     } else {
-      handleTxStateChange(title, '', TRANSACTION_STATE.NOT_EXECUTED)
+      handleTxStateChange(title, '', TRANSACTION_STATE.NOT_EXECUTED, 
+      (type, content, subcontent) => {
+      popupRef.current.open()
+      popupRef.current.popup(type, content, subcontent)
+    })
     }
   }
 
@@ -235,6 +260,7 @@ function Market() {
           <img src="./images/marketplace/back.webp" alt="img" />
         </a>
       </Link>
+      <Popup ref={popupRef} />
     </div>
   )
 }