Merge pull request #2180 from wondrous-dev/add-pda-integration

Add POKT integration

wondrous-bot-admin/src/components/AddFormEntity/components/GitcoinPassportComponent.tsx

@@ -0,0 +1,67 @@
+import { Grid, Typography } from "@mui/material";
+import { IndexContainer, Label } from "./styles";
+import TextField from "../../Shared/TextField";
+import { TYPES } from "utils/constants";
+
+const TextInputStyle = {
+  width: "50%",
+};
+
+const GitcoinPassportScore = ({ handleOnChange, value, errors }) => (
+  <>
+    <Label>Question/Prompt</Label>
+    <TextField
+      placeholder="Enter prompt here"
+      value={value?.prompt || ""}
+      onChange={(value) => handleOnChange("prompt", value)}
+      multiline={false}
+      error={errors?.prompt}
+    />
+    <Label>Verify that a user's Gitcoin Passport Score is above this threshold</Label>
+    <TextField
+      placeholder="Please enter the minimum score threshold"
+      value={value?.gitcoinPassportMinimumScoreThreshold}
+      error={errors?.gitcoinPassportMinimumScoreThreshold}
+      onChange={(value) => handleOnChange("gitcoinPassportMinimumScoreThreshold", value)}
+      multiline={false}
+      style={TextInputStyle}
+      type="number"
+    />
+  </>
+);
+
+const GitcoinPassportComponent = ({ onChange, value, stepType, error }) => {
+  const handleOnChange = (key, val) => {
+    onChange({
+      ...value,
+      [key]: val,
+    });
+  };
+
+  return (
+    <Grid
+      gap="8px"
+      display="flex"
+      alignItems="center"
+      style={{
+        width: "100%",
+      }}
+      direction="column"
+    >
+      <Grid
+        item
+        gap="14px"
+        display="flex"
+        flexDirection="column"
+        xs={12}
+        style={{
+          width: "100%",
+        }}
+      >
+        <GitcoinPassportScore handleOnChange={handleOnChange} value={value} errors={error?.additionalData} />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default GitcoinPassportComponent;

wondrous-bot-admin/src/components/AddFormEntity/components/OptionRewards.tsx

@@ -2,7 +2,14 @@ import AddIcon from "@mui/icons-material/Add";
 import { Box, Grid } from "@mui/material";
 import { PoapImage } from "components/CreateTemplate/styles";
 import DeleteIcon from "components/Icons/Delete";
-import { DiscordRoleIcon, NFTIcon, PoapIcon, StoreItemRewardIcon, TokensIcon } from "components/Icons/Rewards";
+import {
+  DiscordRoleIcon,
+  GatewayPDAIcon,
+  NFTIcon,
+  PoapIcon,
+  StoreItemRewardIcon,
+  TokensIcon,
+} from "components/Icons/Rewards";
 import { PAYMENT_OPTIONS } from "components/Rewards/constants";
 import { ButtonIconWrapper } from "components/Shared/styles";
 import { TextLabel } from "components/ViewQuest/styles";
@@ -56,6 +63,7 @@ const ICONS_MAP = {
   [PAYMENT_OPTIONS.TOKEN]: TokensIcon,
   [PAYMENT_OPTIONS.COMMUNITY_BADGE]: NFTIcon,
   [PAYMENT_OPTIONS.CMTY_STORE_ITEM]: StoreItemRewardIcon,
+  [PAYMENT_OPTIONS.PDA]: GatewayPDAIcon,
 };
 
 const RewardContent = ({ reward }) => {
@@ -69,6 +77,7 @@ const RewardContent = ({ reward }) => {
     [PAYMENT_OPTIONS.POAP]: `POAP: ${reward?.poapRewardData?.name}`,
     [PAYMENT_OPTIONS.COMMUNITY_BADGE]: `NFT: ${reward?.amount} ${reward?.paymentMethod?.name}`,
     [PAYMENT_OPTIONS.CMTY_STORE_ITEM]: `Store Item: ${reward?.storeItem?.name}`,
+    [PAYMENT_OPTIONS.PDA]: `Citizen PDA`,
   };
 
   return (

wondrous-bot-admin/src/components/AddFormEntity/constants.ts

@@ -37,6 +37,10 @@ export const COMPONENT_OPTIONS = [
     label: "Tweet With A Mention Or Hashtag",
     value: TYPES.TWEET_WITH_PHRASE,
   },
+  {
+    label: "Verify Gitcoin Passport Score",
+    value: TYPES.VERIFY_GITCOIN_PASSPORT_SCORE,
+  },
   {
     label: "Vote On Snapshot Proposal",
     value: TYPES.SNAPSHOT_PROPOSAL_VOTE,

wondrous-bot-admin/src/components/CreateTemplate/helpers.ts

@@ -109,6 +109,11 @@ const processSteps = (steps) =>
       };
     } else if (next.type === TYPES.VERIFY_MARKETSFLARE_TRIAL || Object.values(APEIRON_TYPES).includes(next.type)) {
       step.prompt = next.value;
+    } else if (next.type === TYPES.VERIFY_GITCOIN_PASSPORT_SCORE) {
+      step.prompt = next.value?.prompt;
+      step["additionalData"] = {
+        gitcoinPassportMinimumScoreThreshold: Number(next.value?.gitcoinPassportMinimumScoreThreshold),
+      };
     }
     return [...acc, step];
   }, []);
@@ -201,6 +206,10 @@ const mapReward = (reward) => {
       type: reward?.type,
       storeItemId: reward?.storeItem?.id,
     };
+  } else if (reward?.type === PAYMENT_OPTIONS.PDA) {
+    return {
+      type: reward?.type,
+    };
   }
 };
 

wondrous-bot-admin/src/components/CreateTemplate/styles.tsx

@@ -30,7 +30,7 @@ export const Label = styled(Typography)`
     font-weight: ${({ fontWeight = 700 }) => fontWeight};
     font-size: ${({ fontSize = "14px" }) => fontSize};
     line-height: 15px;
-    min-width: ${({minWidth = "150px"}) => minWidth};
+    min-width: ${({ minWidth = "150px" }) => minWidth};
     letter-spacing: 0.01em;
     text-align: left;
     color: ${({ color = "#626262" }) => color};
@@ -124,7 +124,18 @@ export const RewardHeaderText = styled(Typography)`
     font-size: 13px;
     line-height: 15px;
     color: #626262;
-    white-space: nowrap;
+    min-width: 80px;
+  }
+`;
+
+export const RewardText = styled(Typography)`
+  && {
+    font-family: Poppins;
+    font-style: normal;
+    font-weight: 500;
+    color: black;
+    font-size: 13px;
+    line-height: 20px;
     min-width: 80px;
   }
 `;

wondrous-bot-admin/src/components/Icons/Rewards.tsx

@@ -282,3 +282,28 @@ export const StoreItemRewardIcon = (props) => (
     />
   </svg>
 );
+
+export const GatewayPDAIcon = (props) => (
+  <svg width="24" height="24" viewBox="0 0 146 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_120_20792)">
+      <path
+        d="M0 35.6098C0 15.943 15.943 0 35.6098 0H110.39C130.057 0 146 15.943 146 35.6098V110.39C146 130.057 130.057 146 110.39 146H35.6098C15.943 146 0 130.057 0 110.39V35.6098Z"
+        fill="#771AC9"
+      />
+      <path
+        d="M72.6798 39.1698C68.2792 39.1698 63.9217 40.0218 59.8561 41.6771C55.7904 43.3325 52.0963 45.7587 48.9846 48.8174C45.8729 51.8761 43.4045 55.5073 41.7205 59.5036C40.0364 63.4999 39.1697 67.7832 39.1697 72.1088C39.1697 76.4344 40.0364 80.7177 41.7205 84.714C43.4045 88.7104 45.8729 92.3415 48.9846 95.4002C52.0963 98.4589 55.7904 100.885 59.8561 102.54C63.9217 104.196 68.2792 105.048 72.6798 105.048L72.6798 39.1698Z"
+        fill="#E6D5FA"
+      />
+      <path d="M77.787 39.1698H80.021C94.8267 39.1698 106.829 50.9677 106.829 65.521L77.787 39.1698Z" fill="#E6D5FA" />
+      <path
+        d="M106.829 81.5438V105.048H77.787V81.5438C77.787 73.9077 84.2883 67.7175 92.308 67.7175C100.328 67.7175 106.829 73.9077 106.829 81.5438Z"
+        fill="#E6D5FA"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_120_20792">
+        <rect width="146" height="146" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

wondrous-bot-admin/src/components/Rewards/QuestRewardComponent/index.tsx

@@ -1,6 +1,6 @@
 import { Divider, Grid } from "@mui/material";
 import { RewardWrapper, RewardWrapperWithTextField, RewardsComponent } from "components/Rewards/RewardUtils";
-import { DiscordRoleIcon, PointsIcon, StoreItemRewardIcon, TokensIcon } from "components/Icons/Rewards";
+import { DiscordRoleIcon, GatewayPDAIcon, PointsIcon, StoreItemRewardIcon, TokensIcon } from "components/Icons/Rewards";
 import { SharedSecondaryButton } from "components/Shared/styles";
 import RewardModal from "../RewardModal";
 import { PoapImage } from "components/CreateTemplate/styles";
@@ -11,6 +11,7 @@ import {
   onPaymentMethodRewardRemove,
   handleStoreItemRewardRemove,
   handleOnRewardAdd,
+  handlePDARewardRemove,
 } from "./questUtils";
 import { useAddRewardModalState } from "components/Rewards/utils";
 import { PAYMENT_OPTIONS } from "../constants";
@@ -156,6 +157,12 @@ const QuestRewardComponent = ({
       },
       handleOnRemove: (reward) => handleStoreItemRewardRemove({ reward, setQuestSettings }),
     },
+    [PAYMENT_OPTIONS.PDA]: {
+      Component: ({ reward }) => {
+        return <RewardWrapper Icon={GatewayPDAIcon} text={"Citizen PDA"} />;
+      },
+      handleOnRemove: (reward) => handlePDARewardRemove({ reward, setQuestSettings }),
+    },
   };
   const pointReward = rewards.filter((reward) => reward?.type === "points")[0];
   const otherRewards = rewards.filter((reward) => reward?.type !== "points");

wondrous-bot-admin/src/components/Rewards/QuestRewardComponent/questUtils.ts

@@ -1,6 +1,20 @@
 import { verifyIsImportedToken } from "utils/common";
 import { PAYMENT_OPTIONS } from "../constants";
 
+export const handlePDARewardRemove = ({ reward, setQuestSettings }) => {
+  setQuestSettings((prev) => {
+    const newRewards = prev.rewards.filter((r) => {
+      if (r.type === PAYMENT_OPTIONS.PDA) {
+        return false;
+      }
+      return true;
+    });
+    return {
+      ...prev,
+      rewards: newRewards,
+    };
+  });
+};
 export const handleDiscordRoleRewardRemove = ({ reward, setQuestSettings }) => {
   setQuestSettings((prev) => {
     const newRewards = prev.rewards.filter((r) => {

wondrous-bot-admin/src/components/Rewards/RewardModal.tsx

@@ -1,6 +1,13 @@
 import { Grid } from "@mui/material";
 import { RewardModalFooterLeftComponent, RewardMethod, RewardMethodOptionButton } from "components/Rewards/RewardUtils";
-import { DiscordRoleIcon, NFTIcon, PoapIcon, StoreItemRewardIcon, TokensIcon } from "components/Icons/Rewards";
+import {
+  DiscordRoleIcon,
+  GatewayPDAIcon,
+  NFTIcon,
+  PoapIcon,
+  StoreItemRewardIcon,
+  TokensIcon,
+} from "components/Icons/Rewards";
 import { PricingOptionsTitle } from "components/Pricing/PricingOptionsListItem";
 import Modal from "components/Shared/Modal";
 import { useContext, useMemo, useState } from "react";
@@ -12,11 +19,12 @@ import {
   handleAddPoap,
   handleAddTokenOnModal,
   handleNewDiscordRole,
+  handleaddPDAItem,
   useDiscordRoleRewardData,
 } from "./utils";
 import { PAYMENT_OPTIONS } from "./constants";
 import { getPlan } from "utils/common";
-
+import { POKT_ORG_ID } from "utils/constants";
 
 const RewardModal = ({
   handleRewardModalToggle,
@@ -30,11 +38,13 @@ const RewardModal = ({
     PAYMENT_OPTIONS.DISCORD_ROLE,
     PAYMENT_OPTIONS.COMMUNITY_BADGE,
     PAYMENT_OPTIONS.CMTY_STORE_ITEM,
+    PAYMENT_OPTIONS.PDA,
   ],
   title = "Add reward to quest",
 }) => {
   const { activeOrg } = useContext(GlobalContext);
-  const { isEcosystemPlan, isPremiumPlan, plan, setPaywall, setPaywallMessage, setOnCancel, setCanBeClosed } = useSubscriptionPaywall();
+  const { isEcosystemPlan, isPremiumPlan, plan, setPaywall, setPaywallMessage, setOnCancel, setCanBeClosed } =
+    useSubscriptionPaywall();
 
   const { discordRoleOptions, discordRoleData } = useDiscordRoleRewardData();
   const [errors, setErrors] = useState(null);
@@ -113,7 +123,17 @@ const RewardModal = ({
           handleOnRewardAdd,
         });
         break;
-
+      case PAYMENT_OPTIONS.PDA:
+        const hasPDARewardAlready = rewards.some((reward) => reward.type === PAYMENT_OPTIONS.PDA);
+        if (hasPDARewardAlready) {
+          setErrors({ ...errors, pda: "You can only add one PDA reward per quest" });
+        } else {
+          handleaddPDAItem({
+            type: rewardType,
+            handleOnRewardAdd,
+            handleToggle: handleRewardModalToggle,
+          });
+        }
       default:
         console.warn("Unknown reward type:", rewardType);
         return;
@@ -160,19 +180,26 @@ const RewardModal = ({
         Icon: TokensIcon,
         text: "Token reward",
       },
-    ];
-    if (isEcosystemPlan || isPremiumPlan) {
-      items.push({
+      {
         paymentOption: PAYMENT_OPTIONS.CMTY_STORE_ITEM,
         rewardType,
+        isUnavailable: plan !== PricingOptionsTitle.Premium && plan !== PricingOptionsTitle.Ecosystem,
         onClick: () => setRewardType(PAYMENT_OPTIONS.CMTY_STORE_ITEM),
         Icon: StoreItemRewardIcon,
         text: "Store Item",
+      },
+    ];
+    if (activeOrg?.id === POKT_ORG_ID) {
+      items.push({
+        paymentOption: PAYMENT_OPTIONS.PDA,
+        rewardType,
+        onClick: () => setRewardType(PAYMENT_OPTIONS.PDA),
+        Icon: GatewayPDAIcon,
+        text: "Gateway PDA",
       });
     }
     return items;
   }, [activeOrg?.id, rewardType, plan, setRewardType, setPaywall, setPaywallMessage, isEcosystemPlan]);
-
   return (
     <Modal
       open={isRewardModalOpen}