feat(docs): mint 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,76 +1,99 @@
 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 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.';
+  const wallets = useWallets();
+  const { mutate } = useConnectWallet();
+  const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction();
 
-      setCoins(message);
-    } catch (err: any) {
-      setError(err.message || 'An error occurred. Please try again.');
-    } finally {
-      setLoading(false);
-    }
+  const handleSubmit = async () => {
+   await handleChallengeSubmit({
+      inputText,
+      expectedObjectType,
+      nftName,
+      challengeNumber,
+      wallets,
+      mutate,
+      signAndExecuteTransaction,
+      setLoading,
+      setCoins,
+      setError,
+      setShowPopup,
+    });
   };
 
   return (
-    <div className='flex items-center'>
+    <div className="flex items-center">
       <input
         type="text"
         value={inputText}
         onChange={(e) => setInputText(e.target.value)}
         placeholder="Enter Flag Object Id"
         className="input-field mr-2"
       />
-      <button onClick={handleSubmit} className={clsx("button", { "button-disabled": loading })}>
+      <button
+        onClick={handleSubmit}
+        className={`${clsx('button', { 'button-disabled': loading })} p-3 min-w-28`}
+        disabled={loading|| coins==="Congratulations! You have successfully completed this level!" }
+      >
         {loading ? 'Loading...' : 'Submit'}
       </button>
 
-      {error && <p className='text-red-500 text-center mb-0 ml-2'>{error}</p>}
+      {error.status === 'error' && <p className="text-red-500 text-center mb-0 ml-2">{error.description}</p>}
+
+      {coins && !loading && <pre className="ml-4 mb-0 p-3">{coins}</pre>}
 
-      {coins && (
-        <div>
-          <h2>Result</h2>
-          <pre>{JSON.stringify(coins, null, 2)}</pre>
-        </div>
+      {showPopup && (
+        <Popup
+          status={error.status}
+          description={error.description}
+          title={error.title}
+          setShowPopup={setShowPopup}
+          showPopup={showPopup}
+        />
       )}
     </div>
   );
 };
 
-// Higher-order function to provide necessary context
 const withProviders = (Component: React.FC<ChallengeVerifierProps>) => {
   return ({ expectedObjectType }: ChallengeVerifierProps) => {
     if (typeof window === 'undefined') {
@@ -83,13 +106,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

@@ -0,0 +1,53 @@
+import React from 'react'
+
+interface PropTypes {
+    status: 'success' | 'error',
+    description: string,
+    title: string,
+    setShowPopup: React.Dispatch<React.SetStateAction<boolean>>,
+    showPopup: boolean
+}
+
+const Popup = ({ status, description, title, setShowPopup, showPopup }: 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>
+            <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+                <div className="flex min-h-full items-center justify-center p-4 text-center">
+                    <div className="relative transform overflow-hidden rounded-lg bg-white text-center shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-md">
+                        <div className="bg-[#ffffff] px-6 py-10">
+                            <div className={`${status !== 'success' && 'hidden'} mx-auto mb-6 flex size-16 items-center justify-center rounded-full bg-green-100`}>
+                                <svg className="size-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                                </svg>
+                            </div>
+                            <div className={`${status === 'success' && 'hidden'} mx-auto mb-6 flex size-16 items-center justify-center rounded-full bg-red-100`}>
+                                <svg className="size-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+                                </svg>
+                            </div>
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2" id="modal-title">
+                                {title}
+                            </h3>
+                            <p className="text-sm text-gray-500 mb-6">
+                                {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 font-semibold text-white hover:text-black"
+                                    onClick={() => setShowPopup(!showPopup)}
+                                >
+                                    Close
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    )
+}
+
+export default Popup

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

@@ -0,0 +1,95 @@
+import { getFullnodeUrl, IotaClient } from '@iota/iota-sdk/client';
+import { Transaction } from '@iota/iota-sdk/transactions';
+
+export const handleChallengeSubmit = async ({
+    inputText,
+    expectedObjectType,
+    nftName,
+    challengeNumber,
+    wallets,
+    mutate,
+    signAndExecuteTransaction,
+    setLoading,
+    setCoins,
+    setError,
+    setShowPopup,
+}: any) => {
+    setLoading(true);
+    setError({
+        status: 'success',
+        description: '',
+        title: '',
+    });
+    setCoins(null);
+
+    try {
+        const NETWORKS = {
+            testnet: { url: getFullnodeUrl('testnet') },
+        };
+        const NFTPackageAddress = "0x61b31360fb89cae585b8cb593edde20dfc690a3f260c12693bbb8b33ebf4707d"
+        const client = new IotaClient({ url: NETWORKS.testnet.url });
+        const result = await client.getObject({ id: inputText, options: { showType: true } });
+
+        if (result.data.type === expectedObjectType) {
+            const message = 'Congratulations! You have successfully completed this level!';
+            const wallet = wallets[0];
+
+            mutate(
+                { wallet },
+                {
+                    onSuccess: () => {
+                        const tx = () => {
+                            const tx = new Transaction();
+                            const arg0 = new TextEncoder().encode(`Challenge_${challengeNumber}_${nftName}_NFT`);
+                            const arg1 = new TextEncoder().encode('NFT Reward for completing challenge');
+                            tx.setGasBudget(50000000);
+                            tx.moveCall({
+                                target: `${NFTPackageAddress}::CTF_NFT::mint_to_sender`,
+                                arguments: [tx.pure.vector('u8', arg0), tx.pure.vector('u8', arg1)],
+                            });
+                            return tx;
+                        };
+
+                        signAndExecuteTransaction(
+                            {
+                                transaction: tx(),
+                            },
+                            {
+                                onSuccess: ({ digest }: any) => {
+                                    client.waitForTransaction({ digest, options: { showEffects: true } }).then(() => {
+                                        setError({
+                                            status: 'success',
+                                            description: 'An NFT reward is minted to your IOTA wallet address upon completing the challenge.',
+                                            title: 'NFT Minted',
+                                        });
+                                        setCoins(message);
+                                        setLoading(false);
+                                        setShowPopup(true);
+                                    });
+                                },
+                                onError: (error: any) => {
+                                    setError({
+                                        status: 'error',
+                                        description: `Failed to execute transaction : ${error}`,
+                                        title: 'Submission failed',
+                                    });
+                                    setLoading(false);
+                                    setShowPopup(true);
+                                },
+                            }
+                        );
+                    },
+                }
+            );
+        } else {
+            setCoins('Invalid Flag Object Id. Please try again.');
+        }
+    } catch (err: any) {
+        setError({
+            status: 'error',
+            description: err.message || 'An error occurred. Please try again.',
+            title: 'Submission failed',
+        });
+        setLoading(false);
+    }
+};