feat(docs): mint ctf completion nft

docs/content/developer/iota-move-ctf/challenge_1.mdx

@@ -35,4 +35,4 @@ Good luck in capturing your first flag!
 
 
 
-<ChallengeVerifier expectedObjectType="0xed1bbeb067ea89b70859641557700997a39bf749b5eedf91e221d56a5d961622::checkin::Flag" />
+<ChallengeVerifier challengeNumber="1" nftName="Checkin" expectedObjectType="0xed1bbeb067ea89b70859641557700997a39bf749b5eedf91e221d56a5d961622::checkin::Flag" />

docs/content/developer/iota-move-ctf/challenge_2.mdx

@@ -42,4 +42,4 @@ Good luck in capturing your second flag!
 
 
 
-<ChallengeVerifier expectedObjectType="0x2d902cb948748fd2b92ff98e5d0fd46a9ceb4b7501050ef8513b9bc60f515ef8::luckynumber::Flag" />
+<ChallengeVerifier expectedObjectType="0x2d902cb948748fd2b92ff98e5d0fd46a9ceb4b7501050ef8513b9bc60f515ef8::luckynumber::Flag" challengeNumber="2" nftName="Lucky_Number"/>

docs/content/developer/iota-move-ctf/challenge_3.mdx

@@ -45,4 +45,4 @@ Good luck in capturing your third flag!
 
 
 
-<ChallengeVerifier expectedObjectType="0x871d4332aeb888fafa0c90280a3b2d301213e3352c11493b2ac59002264c2d20::mintcoin::Flag" />
+<ChallengeVerifier expectedObjectType="0x871d4332aeb888fafa0c90280a3b2d301213e3352c11493b2ac59002264c2d20::mintcoin::Flag" challengeNumber="3" nftName="MintCoin_Mechanics"/>

docs/content/developer/iota-move-ctf/challenge_4.mdx

@@ -46,4 +46,4 @@ Good luck in capturing your fourth flag!
 Under `Deployed Contract Addresses`, you can find the addresses of the package as well as the `Vault`. Carefully check what the constraints are for the `get_flag` function to work, as it has some assertions that need to be met.
 :::
 
-<ChallengeVerifier expectedObjectType="0x817e64f33b784f0c4a3d2cd18f62cc4409bc869efa715f29e93eff52343fb7b2::airdrop::Flag" />
+<ChallengeVerifier expectedObjectType="0x817e64f33b784f0c4a3d2cd18f62cc4409bc869efa715f29e93eff52343fb7b2::airdrop::Flag" challengeNumber="4" nftName="Airdrop"/>

docs/content/developer/iota-move-ctf/challenge_5.mdx

@@ -36,4 +36,4 @@ After taking a look at the challenge's usage of [bcs::to_bytes](../../references
 Good luck in capturing your fifth flag!
 
 
-<ChallengeVerifier expectedObjectType="0xdd29ddb70eec2828bf8375c9bb3e4c3546f94d9090113fc760adce8010d69762::pizza::Flag" />
+<ChallengeVerifier expectedObjectType="0xdd29ddb70eec2828bf8375c9bb3e4c3546f94d9090113fc760adce8010d69762::pizza::Flag" number="5" nftName="Perfect_Pizza"/>

docs/content/developer/iota-move-ctf/challenge_6.mdx

@@ -44,4 +44,4 @@ Good luck in capturing your sixth flag!
 Make sure you recycle enough pizza boxes!
 :::
 
-<ChallengeVerifier expectedObjectType="0x5b3571ccaf942310691ca034fbfa381ccd724029396e329910a789b1d25ece3d::recycle::Flag" />
+<ChallengeVerifier expectedObjectType="0x5b3571ccaf942310691ca034fbfa381ccd724029396e329910a789b1d25ece3d::recycle::Flag" challengeNumber="6" nftName="Go_Recycle"/>

docs/content/developer/iota-move-ctf/challenge_7.mdx

@@ -35,4 +35,4 @@ Good luck in capturing your seventh flag!
 
 
 
-<ChallengeVerifier expectedObjectType="0x2fce22869e453ec5bb6de2b3bee4cb94b2c3605abad9e9bbda477a75306bef2c::ptb::Flag" />
+<ChallengeVerifier expectedObjectType="0x2fce22869e453ec5bb6de2b3bee4cb94b2c3605abad9e9bbda477a75306bef2c::ptb::Flag" challengeNumber="7" nftName="PTBs"/>

docs/content/developer/iota-move-ctf/challenge_8.mdx

@@ -53,4 +53,4 @@ The DEX programmer pulled an all-nighter before writing the flash loan mechanism
 
 
 
-<ChallengeVerifier expectedObjectType="0xfd9284dd49737957297ebb10a9bbf73964453696c037b9e59f0fb4d23fc13aee::vault::Flag" />
+<ChallengeVerifier expectedObjectType="0xfd9284dd49737957297ebb10a9bbf73964453696c037b9e59f0fb4d23fc13aee::vault::Flag" challengeNumber="8" nftName="Flash"/>

docs/site/src/components/CTF/ctf-verifier.tsx

@@ -1,48 +1,64 @@
 import React, { useState, useMemo } from 'react';
 import {
   IotaClientProvider,
+  useSignAndExecuteTransaction,
   WalletProvider,
 } from '@iota/dapp-kit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { getFullnodeUrl, IotaClient } from '@iota/iota-sdk/client';
+import { getFullnodeUrl } from '@iota/iota-sdk/client';
 import clsx from 'clsx';
+import { useConnectWallet, useWallets } from '@iota/dapp-kit';
+import Popup from './popup';
+import { handleChallengeSubmit } from "../../utils/ctf-utils"
 
-// Define props interface
 interface ChallengeVerifierProps {
-  expectedObjectType: string; // Prop for the expected Object Type
+  expectedObjectType: string;
+  nftName: string;
+  challengeNumber: string
 }
 
-// Define network configurations
 const NETWORKS = {
   testnet: { url: getFullnodeUrl('testnet') },
 };
 
-// Main ChallengeVerifier component
-const ChallengeVerifier: React.FC<ChallengeVerifierProps> = ({ expectedObjectType }) => {
+const ChallengeVerifier: React.FC<ChallengeVerifierProps> = ({
+  expectedObjectType,
+  nftName,
+  challengeNumber,
+}) => {
   const [inputText, setInputText] = useState('');
   const [coins, setCoins] = useState<string | null>(null);
+  const [showPopup, setShowPopup] = useState<boolean>(false);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState<{
+    status: 'success' | 'error';
+    description: string;
+    title: string;
+  }>({
+    status: 'success',
+    description: '',
+    title: '',
+  });
 
+  const wallets = useWallets();
+  const { mutate } = useConnectWallet();
+  const { mutate: signAndExecuteTransaction} = useSignAndExecuteTransaction();
+  const [digest,setDigest] = useState<string>('');
   const handleSubmit = async () => {
-    setLoading(true);
-    setError('');
-    setCoins(null);
-
-    try {
-      const client = new IotaClient({ url: NETWORKS.testnet.url });
-      const result = await client.getObject({ id: inputText, options: { showType: true } });
-
-      const message = result.data.type === expectedObjectType
-        ? 'Congratulations! You have successfully completed this level!'
-        : 'Invalid Flag Object Id. Please try again.';
-
-      setCoins(message);
-    } catch (err: any) {
-      setError(err.message || 'An error occurred. Please try again.');
-    } finally {
-      setLoading(false);
-    }
+   await handleChallengeSubmit({
+      inputText,
+      expectedObjectType,
+      nftName,
+      challengeNumber,
+      wallets,
+      mutate,
+      signAndExecuteTransaction,
+      setLoading,
+      setCoins,
+      setError,
+      setShowPopup,
+      setDigest
+    });
   };
 
   return (
@@ -57,7 +73,7 @@ const ChallengeVerifier: React.FC<ChallengeVerifierProps> = ({ expectedObjectTyp
           placeholder="Enter Flag Object Id"
           className="input-field"
         />
-        {<p className={`text-red-500 mb-0 mt-1 text-sm ${error ? 'visible' : 'invisible'}`}>{error}</p>}
+        {<p className={`text-red-500 mb-0 mt-1 text-sm ${error.description!=='' ? 'visible' : 'invisible'}`}>{error.description}</p>}
         <button 
           onClick={handleSubmit} 
           className={`${clsx("button", { "button-disabled": inputText=='' || loading })} min-w-28 mt-4`}
@@ -71,7 +87,6 @@ const ChallengeVerifier: React.FC<ChallengeVerifierProps> = ({ expectedObjectTyp
   );
 };
 
-// Higher-order function to provide necessary context
 const withProviders = (Component: React.FC<ChallengeVerifierProps>) => {
   return ({ expectedObjectType }: ChallengeVerifierProps) => {
     if (typeof window === 'undefined') {
@@ -84,13 +99,16 @@ const withProviders = (Component: React.FC<ChallengeVerifierProps>) => {
       <QueryClientProvider client={queryClient}>
         <IotaClientProvider networks={NETWORKS}>
           <WalletProvider>
-            <Component expectedObjectType={expectedObjectType} />
+            <Component
+              expectedObjectType={expectedObjectType}
+              challengeNumber="1"
+              nftName="Checkin"
+            />
           </WalletProvider>
         </IotaClientProvider>
       </QueryClientProvider>
     );
   };
 };
 
-// Export the component wrapped in providers
 export default withProviders(ChallengeVerifier);

docs/site/src/components/CTF/popup.tsx

@@ -5,10 +5,11 @@ interface PropTypes {
     description: string,
     title: string,
     setShowPopup: React.Dispatch<React.SetStateAction<boolean>>,
-    showPopup: boolean
+    showPopup: boolean,
+    digest:string
 }
 
-const Popup = ({ status, description, title, setShowPopup, showPopup }: PropTypes) => {
+const Popup = ({ status, description, title, setShowPopup, showPopup,digest }: PropTypes) => {
     return (
         <div className="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
             <div className="fixed inset-0 dark:bg-gray-500/75 bg-gray-200/75 transition-opacity" aria-hidden="true"></div>
@@ -33,6 +34,15 @@ const Popup = ({ status, description, title, setShowPopup, showPopup }: PropType
                                 {description}
                             </p>
                             <div>
+                                <button 
+                                    type='button'
+                                    className="inline-flex cursor-pointer w-full border-none justify-center rounded-md bg-[#017195] px-4 py-2 text-sm my-2">
+                                        <a 
+                                            target='blank' 
+                                            href={`https://explorer.rebased.iota.org/txblock/${digest}?network=testnet`}
+                                            className='font-semibold text-white hover:text-black'
+                                        >Check transaction on explorer</a>
+                                </button>
                                 <button
                                     type="button"
                                     className="inline-flex cursor-pointer w-full border-none justify-center rounded-md bg-[#017195] px-4 py-2 text-sm font-semibold text-white hover:text-black"
@@ -41,6 +51,9 @@ const Popup = ({ status, description, title, setShowPopup, showPopup }: PropType
                                     Close
                                 </button>
                             </div>
+                            <div className='text-black'>
+                                <p className='text-xs text-gray-700 mt-4'>Note: Transactions may take some time to appear on the explorer.</p>
+                            </div>
                         </div>
                     </div>
                 </div>

docs/site/src/utils/ctf-utils.ts

@@ -13,6 +13,7 @@ export const handleChallengeSubmit = async ({
     setCoins,
     setError,
     setShowPopup,
+    setDigest
 }: any) => {
     setLoading(true);
     setError({
@@ -57,6 +58,7 @@ export const handleChallengeSubmit = async ({
                             {
                                 onSuccess: ({ digest }: any) => {
                                     client.waitForTransaction({ digest, options: { showEffects: true } }).then(() => {
+                                        setDigest(digest)
                                         setError({
                                             status: 'success',
                                             description: 'An NFT reward was minted and transferred to your IOTA wallet address for completing the challenge.',
@@ -178,4 +180,4 @@ export const handleMintLeapFrogSubmit = async ({
         });
         setLoading(false);
     }
-};
+};