From ffd581a10529ac9d801204e57a97fb96c5eaa4ec Mon Sep 17 00:00:00 2001
From: vivekjain23 <165671934+vivekjain23@users.noreply.github.com>
Date: Thu, 16 Jan 2025 11:19:23 +0530
Subject: [PATCH] feat(docs): mint ctf completion nft (#4521)

* Mint CTF completion NFT
---
 .../developer/iota-move-ctf/challenge_1.mdx   |  2 +-
 .../developer/iota-move-ctf/challenge_2.mdx   |  2 +-
 .../developer/iota-move-ctf/challenge_3.mdx   |  2 +-
 .../developer/iota-move-ctf/challenge_4.mdx   |  2 +-
 .../developer/iota-move-ctf/challenge_5.mdx   |  2 +-
 .../developer/iota-move-ctf/challenge_6.mdx   |  2 +-
 .../developer/iota-move-ctf/challenge_7.mdx   |  2 +-
 .../developer/iota-move-ctf/challenge_8.mdx   |  2 +-
 docs/site/src/components/CTF/ctf-verifier.tsx | 76 ++++++++++++-------
 docs/site/src/components/CTF/popup.tsx        | 17 ++++-
 docs/site/src/utils/ctf-utils.ts              |  4 +-
 11 files changed, 73 insertions(+), 40 deletions(-)

diff --git a/docs/content/developer/iota-move-ctf/challenge_1.mdx b/docs/content/developer/iota-move-ctf/challenge_1.mdx
index 074825eb770..141a2791a6e 100644
--- a/docs/content/developer/iota-move-ctf/challenge_1.mdx
+++ b/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" />
\ No newline at end of file
+<ChallengeVerifier challengeNumber="1" nftName="Checkin" expectedObjectType="0xed1bbeb067ea89b70859641557700997a39bf749b5eedf91e221d56a5d961622::checkin::Flag" />
\ No newline at end of file
diff --git a/docs/content/developer/iota-move-ctf/challenge_2.mdx b/docs/content/developer/iota-move-ctf/challenge_2.mdx
index b00a5bd9983..046822df864 100644
--- a/docs/content/developer/iota-move-ctf/challenge_2.mdx
+++ b/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" />
\ No newline at end of file
+<ChallengeVerifier expectedObjectType="0x2d902cb948748fd2b92ff98e5d0fd46a9ceb4b7501050ef8513b9bc60f515ef8::luckynumber::Flag" challengeNumber="2" nftName="Lucky_Number"/>
\ No newline at end of file
diff --git a/docs/content/developer/iota-move-ctf/challenge_3.mdx b/docs/content/developer/iota-move-ctf/challenge_3.mdx
index 172ca441ff7..5627115e415 100644
--- a/docs/content/developer/iota-move-ctf/challenge_3.mdx
+++ b/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" />
\ No newline at end of file
+<ChallengeVerifier expectedObjectType="0x871d4332aeb888fafa0c90280a3b2d301213e3352c11493b2ac59002264c2d20::mintcoin::Flag" challengeNumber="3" nftName="MintCoin_Mechanics"/>
\ No newline at end of file
diff --git a/docs/content/developer/iota-move-ctf/challenge_4.mdx b/docs/content/developer/iota-move-ctf/challenge_4.mdx
index 511a948e5cc..66fe23e263c 100644
--- a/docs/content/developer/iota-move-ctf/challenge_4.mdx
+++ b/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" />
\ No newline at end of file
+<ChallengeVerifier expectedObjectType="0x817e64f33b784f0c4a3d2cd18f62cc4409bc869efa715f29e93eff52343fb7b2::airdrop::Flag" challengeNumber="4" nftName="Airdrop"/>
\ No newline at end of file
diff --git a/docs/content/developer/iota-move-ctf/challenge_5.mdx b/docs/content/developer/iota-move-ctf/challenge_5.mdx
index 5404f6f582f..bfe79236979 100644
--- a/docs/content/developer/iota-move-ctf/challenge_5.mdx
+++ b/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" />
\ No newline at end of file
+<ChallengeVerifier expectedObjectType="0xdd29ddb70eec2828bf8375c9bb3e4c3546f94d9090113fc760adce8010d69762::pizza::Flag" number="5" nftName="Perfect_Pizza"/>
\ No newline at end of file
diff --git a/docs/content/developer/iota-move-ctf/challenge_6.mdx b/docs/content/developer/iota-move-ctf/challenge_6.mdx
index ffade8fdfe7..2c8d253a92c 100644
--- a/docs/content/developer/iota-move-ctf/challenge_6.mdx
+++ b/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" />
\ No newline at end of file
+<ChallengeVerifier expectedObjectType="0x5b3571ccaf942310691ca034fbfa381ccd724029396e329910a789b1d25ece3d::recycle::Flag" challengeNumber="6" nftName="Go_Recycle"/>
\ No newline at end of file
diff --git a/docs/content/developer/iota-move-ctf/challenge_7.mdx b/docs/content/developer/iota-move-ctf/challenge_7.mdx
index a6ba9de785a..62b2900bbd4 100644
--- a/docs/content/developer/iota-move-ctf/challenge_7.mdx
+++ b/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" />
\ No newline at end of file
+<ChallengeVerifier expectedObjectType="0x2fce22869e453ec5bb6de2b3bee4cb94b2c3605abad9e9bbda477a75306bef2c::ptb::Flag" challengeNumber="7" nftName="PTBs"/>
\ No newline at end of file
diff --git a/docs/content/developer/iota-move-ctf/challenge_8.mdx b/docs/content/developer/iota-move-ctf/challenge_8.mdx
index d8015702836..0417f08574a 100644
--- a/docs/content/developer/iota-move-ctf/challenge_8.mdx
+++ b/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" />
\ No newline at end of file
+<ChallengeVerifier expectedObjectType="0xfd9284dd49737957297ebb10a9bbf73964453696c037b9e59f0fb4d23fc13aee::vault::Flag" challengeNumber="8" nftName="Flash"/>
\ No newline at end of file
diff --git a/docs/site/src/components/CTF/ctf-verifier.tsx b/docs/site/src/components/CTF/ctf-verifier.tsx
index 0ba79670930..3f0c0140d04 100644
--- a/docs/site/src/components/CTF/ctf-verifier.tsx
+++ b/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,7 +99,11 @@ 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>
@@ -92,5 +111,4 @@ const withProviders = (Component: React.FC<ChallengeVerifierProps>) => {
   };
 };
 
-// Export the component wrapped in providers
 export default withProviders(ChallengeVerifier);
\ No newline at end of file
diff --git a/docs/site/src/components/CTF/popup.tsx b/docs/site/src/components/CTF/popup.tsx
index b8eb42e14b1..a1a454c9b46 100644
--- a/docs/site/src/components/CTF/popup.tsx
+++ b/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>
diff --git a/docs/site/src/utils/ctf-utils.ts b/docs/site/src/utils/ctf-utils.ts
index ad7f7a9c76e..2756e8634d6 100644
--- a/docs/site/src/utils/ctf-utils.ts
+++ b/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);
     }
-};
\ No newline at end of file
+};