retweet contribution page, submit, congrats screen, retweet api call

src/components/OAuth/index.tsx

@@ -170,6 +170,7 @@ export const useOAuthSocials = () => {
   }, []);
 
   const getAuthX = useCallback(async (onSuccess, onFailure) => {
+    localStorage.removeItem("OAUTH_RESPONSE");
     setAuthenticating(true);
     if (popupRef.current && !popupRef.current.closed) {
       popupRef.current.close();
@@ -188,6 +189,8 @@ export const useOAuthSocials = () => {
           if (error) {
             onFailure(error);
           } else {
+            // eslint-disable-next-line no-debugger
+            debugger;
             xCleanUp(xIntervalRef);
             const response = await axios.post(
               `${environment.apiUrl}/aut/config/oauth2AccessTokenX`,
@@ -196,6 +199,7 @@ export const useOAuthSocials = () => {
                 callbackUrl
               }
             );
+
             setAuthenticating(false);
             clearInterval(intervalRef.current);
             popupRef.current.close();
@@ -204,6 +208,8 @@ export const useOAuthSocials = () => {
           }
         }
       } catch (genericError) {
+        // eslint-disable-next-line no-debugger
+        debugger;
         onFailure(genericError);
         console.error(genericError);
       }
@@ -240,6 +246,9 @@ export const useOAuthSocials = () => {
                 callbackUrl
               }
             );
+
+            // eslint-disable-next-line no-debugger
+            debugger;
             setAuthenticating(false);
             popupRef.current.close();
             onSuccess(response.data);

src/pages/AutID/AutHub/AutHubContributionsTable.tsx

@@ -231,19 +231,22 @@ export const AutHubTasksTable = ({ header }) => {
       take: 1000
     }
   });
-  useEffect(() => {
-    if (!contributions.length) {
-      const updatedContributions = data?.map((item) => ({
-        ...item,
-        contributionType: "open",
-        status: TaskStatus.Created,
-        id: generateRandomId()
-      }));
-      dispatch(
-        updateContributionState({ contributions: updatedContributions })
-      );
-    }
-  }, [data]);
+    useEffect(() => {
+      if (!contributions.length) {
+        const updatedContributions = data?.map((item) => ({
+          ...item,
+          contributionType: (item.properties as any)
+            .tweetUrl
+            ? "retweet"
+            : "open",
+          status: TaskStatus.Created,
+          id: generateRandomId()
+        }));
+        dispatch(
+          updateContributionState({ contributions: updatedContributions })
+        );
+      }
+    }, [data]);
 
   const theme = useTheme();
   return (

src/pages/Oauth2/Callback.tsx

@@ -24,6 +24,7 @@ const Callback = () => {
       });
     } else {
       console.log("POST MESSAGE");
+      // localStorage.setItem("OAUTH_RESPONSE", JSON.stringify({ payload }));
       window.opener.postMessage({
         type: "OAUTH_RESPONSE",
         payload

src/pages/Tasks/Contributions/Contributions.tsx

@@ -30,7 +30,7 @@ const Contributions = () => {
       {contribution?.contributionType === "quiz" && (
         <QuizTask contribution={contribution} />
       )}
-        {contribution?.contributionType === "twitter" && (
+        {contribution?.contributionType === "retweet" && (
         <TwitterTask contribution={contribution} />
       )}
     </>

src/pages/Tasks/TwitterTask/TwitterTask.tsx

@@ -1,9 +1,10 @@
-import { memo, useState } from 'react';
+import { memo, useState } from "react";
 import {
   Box,
   Card,
   CardContent,
   Container,
+  Link,
   Stack,
   Typography
 } from "@mui/material";
@@ -15,8 +16,11 @@ import { AutOsButton } from "@components/AutButton";
 import TaskDetails from "../Shared/TaskDetails";
 import SubmitDialog from "@components/Dialog/SubmitDialog";
 import AutLoading from "@components/AutLoading";
-import { useOAuthSocials } from '@components/OAuth';
-import { useAccount } from 'wagmi';
+import { useOAuthSocials } from "@components/OAuth";
+import { useAccount } from "wagmi";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { environment } from "@api/environment";
 
 const TwitterSubmitContent = ({ contribution, userAddress }) => {
   const [loading, setLoading] = useState(false);
@@ -27,37 +31,58 @@ const TwitterSubmitContent = ({ contribution, userAddress }) => {
   const { autAddress, hubAddress } = useParams();
   const { getAuthX } = useOAuthSocials();
 
+  const { mutateAsync: verifyTetweetTask } = useMutation<any, void, any>({
+    mutationFn: (verifyRetweetRequest) => {
+      return axios
+        .post(
+          `${environment.apiUrl}/task/twitter/retweet`,
+          verifyRetweetRequest
+        )
+        .then((res) => res.data);
+    }
+  });
+
   const handleSubmit = async () => {
     await getAuthX(
       async (data) => {
         const { access_token } = data;
         setLoading(true);
-
         try {
-          // Here you would typically make your API call to verify the twitter action
-          await new Promise((resolve) => setTimeout(resolve, 3000)); // Simulating API call
-
-          dispatch(
-            updateContributionById({
-              id: contribution?.id,
-              data: {
-                ...contribution,
-                status: TaskStatus.Submitted,
-                submission: {
-                  properties: {
-                    twitterToken: access_token
-                  }
-                }
+          await verifyTetweetTask(
+            {
+              accessToken: access_token,
+              contributionId: contribution?.id,
+              tweetUrl: contribution.properties?.tweetUrl
+            },
+            {
+              onSuccess: (response) => {
+                dispatch(
+                  updateContributionById({
+                    id: contribution?.id,
+                    data: {
+                      ...contribution,
+                      status: TaskStatus.Submitted,
+                      submission: {
+                        properties: {
+                          twitterToken: access_token
+                        }
+                      }
+                    }
+                  })
+                );
+
+                setOpenSubmitSuccess(true);
+                setLoading(false);
+              },
+              onError: (res) => {
+                console.error("Failed to submit contribution:", res);
               }
-            })
+            }
           );
-
-          setLoading(false);
-          setOpenSubmitSuccess(true);
         } catch (error) {
           setLoading(false);
           // Handle error case
-          console.error('Failed to submit contribution:', error);
+          console.error("Failed to submit contribution:", error);
         }
       },
       () => {
@@ -132,7 +157,23 @@ const TwitterSubmitContent = ({ contribution, userAddress }) => {
             >
               {contribution?.description}
             </Typography>
-
+
+            <Link
+              href={contribution.properties?.tweetUrl}
+              target="_blank"
+              color="primary"
+              underline="none"
+            >
+              <Typography
+                color="primary"
+                variant="body2"
+                textAlign="center"
+                marginBottom="16px"
+              >
+                {contribution.properties?.tweetUrl}
+              </Typography>
+            </Link>
+
             <Typography
               color="white"
               variant="body2"
@@ -152,7 +193,7 @@ const TwitterSubmitContent = ({ contribution, userAddress }) => {
               }}
             >
               <Typography fontWeight="bold" fontSize="16px" lineHeight="26px">
-                Verify with Twitter
+                Claim
               </Typography>
             </AutOsButton>
           </CardContent>
@@ -223,4 +264,4 @@ const TwitterTask = ({ contribution }) => {
   );
 };
 
-export default memo(TwitterTask);
+export default memo(TwitterTask);

src/utils/format-contribution-type.tsx

@@ -1,29 +1,33 @@
 export const formatContributionType = (type: string) => {
-    switch (type) {
-      case "discord":
-        return "Discord";
-      case "open":
-        return "Open Task";
-      case "quiz":
-        return "Quiz";
-      case "github":
-        return "GitHub";
-      default:
-        return type;
-    }
-  };
+  switch (type) {
+    case "discord":
+      return "Discord";
+    case "open":
+      return "Open Task";
+    case "quiz":
+      return "Quiz";
+    case "github":
+      return "GitHub";
+    case "retweet":
+      return "Retweet";
+    default:
+      return type;
+  }
+};
 
-  export const getContributionTypeSubtitle = (type: string) => {
-    switch (type) {
-      case "discord":
-        return "Join Discord Task";
-      case "open":
-        return "Open Task";
-      case "quiz":
-        return "Quiz Task";
-      case "github":
-        return "GitHub Task";
-      default:
-        return type;
-    }
-  };
+export const getContributionTypeSubtitle = (type: string) => {
+  switch (type) {
+    case "discord":
+      return "Join Discord Task";
+    case "open":
+      return "Open Task";
+    case "quiz":
+      return "Quiz Task";
+    case "github":
+      return "GitHub Task";
+    case "retweet":
+      return "Retweet Task";
+    default:
+      return type;
+  }
+};

yarn.lock

@@ -4601,9 +4601,6 @@ fs-extra@^8.1.0:
 fs.realpath@^1.0.0:
   version "1.0.0"
 
-fsevents@^2.3.2, fsevents@~2.3.2, fsevents@~2.3.3:
-  version "2.3.3"
-
 fsevents@^2.3.2, fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"