Add transaction progress indicator

package.json

@@ -63,6 +63,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.6.3",
     "@jest/globals": "^29.7.0",
+    "@onflow/typedefs": "^1.4.0",
     "@tsconfig/docusaurus": "^2.0.3",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.14",

src/components/ChallengeModal.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { Button } from '../ui/design-system/src/lib/Components/Button';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBrain } from '@fortawesome/free-solid-svg-icons';
+import Modal from '@site/src/ui/design-system/src/lib/Components/Modal';
+import { submitNoopChallenge } from '../utils/gold-star';
+import * as fcl from '@onflow/fcl';
+import { useProfile } from '../hooks/use-profile';
+import { useCurrentUser } from '../hooks/use-current-user';
+
+const ChallengeModal: React.FC<{
+  isOpen: boolean;
+  onClose: () => void;
+}> = ({ isOpen, onClose }) => {
+  const [txStatus, setTxStatus] = useState<string | null>(null);
+  const { user } = useCurrentUser();
+  const { mutate: mutateProfile } = useProfile(user.addr);
+
+  const completeChallenge = async () => {
+    setTxStatus('Pending approval...');
+    try {
+      const txId = await submitNoopChallenge();
+
+      setTxStatus('Submitting challenge...');
+
+      fcl
+        .tx(txId)
+        .onceSealed()
+        .then(() => {
+          mutateProfile();
+        });
+
+      await fcl.tx(txId).onceExecuted();
+    } catch (error) {
+      console.error('Failed to complete challenge', error);
+    } finally {
+      setTxStatus(null);
+      onClose();
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Challenge Details">
+      <div className="space-y-4 text-center">
+        <FontAwesomeIcon icon={faBrain} size="5x" className="text-green-500" />
+        <p className="text-lg text-gray-700 mt-4">
+          By completing this challenge, you are declaring your intent to learn
+          Flow and explore its capabilities.
+        </p>
+        <Button
+          size="lg"
+          className="w-full py-4 text-lg font-semibold mt-6"
+          onClick={completeChallenge}
+          disabled={txStatus !== null}
+        >
+          {txStatus ? txStatus : 'Complete Challenge'}
+        </Button>
+      </div>
+    </Modal>
+  );
+};
+
+export default ChallengeModal;

src/components/ProfileModal.tsx

@@ -13,6 +13,7 @@ import RemovableTag from '@site/src/ui/design-system/src/lib/Components/Removabl
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrophy } from '@fortawesome/free-solid-svg-icons';
 import { useChallenges } from '../hooks/use-challenges';
+import * as fcl from '@onflow/fcl';
 
 interface ProfileModalProps {
   isOpen: boolean;
@@ -44,7 +45,7 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ isOpen, onClose }) => {
     deployedContracts: {},
   });
   const [loaded, setLoaded] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
+  const [txStatus, setTxStatus] = useState<string | null>(null);
   const [tags, setTags] = useState<string[]>([]);
   const [tagInput, setTagInput] = useState('');
 
@@ -85,18 +86,30 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ isOpen, onClose }) => {
   async function handleSave() {
     if (!settings) return;
 
-    setIsSaving(true);
+    setTxStatus('Awaiting approval...');
     try {
+      let txId: string | null = null;
       if (profile) {
-        await setProfile(settings);
+        txId = await setProfile(settings);
       } else {
-        await createProfile(settings);
+        txId = await createProfile(settings);
       }
+
+      setTxStatus('Saving profile...');
+
+      fcl
+        .tx(txId)
+        .onceSealed()
+        .then(() => {
+          mutateProfile();
+        });
+
+      await fcl.tx(txId).onceExecuted();
     } catch (e) {
       console.error(e);
     } finally {
-      setIsSaving(false);
-      mutateProfile();
+      setTxStatus(null);
+      onClose();
     }
   }
 
@@ -211,9 +224,9 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ isOpen, onClose }) => {
             size="sm"
             className="w-full max-w-md"
             onClick={handleSave}
-            disabled={!hasChanges() || !settings || isSaving}
+            disabled={!hasChanges() || !settings || !!txStatus}
           >
-            Save
+            {txStatus ? txStatus : 'Save Profile'}
           </Button>
         </div>
       </div>

src/components/ProgressModal.tsx

@@ -3,9 +3,8 @@ import Modal from '@site/src/ui/design-system/src/lib/Components/Modal';
 import Checklist from '@site/src/components/ProgressChecklist';
 import { Button } from '@site/src/ui/design-system/src/lib/Components/Button';
 import { useProgress } from '../hooks/use-progress';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBrain } from '@fortawesome/free-solid-svg-icons';
 import { submitNoopChallenge } from '../utils/gold-star';
+import ChallengeModal from './ChallengeModal';
 
 interface ProgressModalProps {
   isOpen: boolean;
@@ -30,11 +29,6 @@ const ProgressModal: React.FC<ProgressModalProps> = ({
     setChallengeModalOpen(false);
   };
 
-  const completeChallenge = async () => {
-    await submitNoopChallenge();
-    closeChallengeModal();
-  };
-
   return (
     <>
       <Modal isOpen={isOpen} onClose={onClose} title="Progress">
@@ -69,33 +63,10 @@ const ProgressModal: React.FC<ProgressModalProps> = ({
         </div>
       </Modal>
 
-      {/* Challenge Modal */}
-      {challengeModalOpen && (
-        <Modal
-          isOpen={challengeModalOpen}
-          onClose={closeChallengeModal}
-          title="Challenge Details"
-        >
-          <div className="space-y-4 text-center">
-            <FontAwesomeIcon
-              icon={faBrain}
-              size="5x"
-              className="text-green-500"
-            />
-            <p className="text-lg text-gray-700 mt-4">
-              By completing this challenge, you are declaring your intent to
-              learn Flow and explore its capabilities.
-            </p>
-            <Button
-              size="lg"
-              className="w-full py-4 text-lg font-semibold mt-6"
-              onClick={completeChallenge}
-            >
-              Complete Challenge
-            </Button>
-          </div>
-        </Modal>
-      )}
+      <ChallengeModal
+        isOpen={challengeModalOpen}
+        onClose={closeChallengeModal}
+      />
     </>
   );
 };

yarn.lock

@@ -3387,7 +3387,7 @@
     isomorphic-ws "^5.0.0"
     ws "^8.18.0"
 
-"@onflow/typedefs@1.4.0":
+"@onflow/typedefs@1.4.0", "@onflow/typedefs@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@onflow/typedefs/-/typedefs-1.4.0.tgz#21963c4a334cb15f7759b90f25eee177d32885f6"
   integrity sha512-7b4C3F4Ztayx6XdQz/7YoHMzZ6kzy37dLxdVCV/PAsAunq9Jfu32HQaf8a0NCk0L0aM7FS2zT1Om4k7b5KP4Xg==