refactor(challenges): remove hardcodings

src/hooks/use-challenge-settings.ts

@@ -1,17 +1,10 @@
-import { useEffect, useState } from 'react';
 import { usePlebbitRpcSettings } from '@plebbit/plebbit-react-hooks';
 
 const useChallengeSettings = (challengeName: string) => {
-  const [settings, setSettings] = useState(null);
   const { challenges } = usePlebbitRpcSettings().plebbitRpcSettings || {};
-
-  useEffect(() => {
-    if (challenges) {
-      setSettings(challenges[challengeName]);
-    }
-  }, [challenges, challengeName]);
-
-  return settings;
+  if (challenges) {
+    return challenges[challengeName] || {};
+  }
 };
 
 export default useChallengeSettings;

src/hooks/use-challenges-options.ts

@@ -0,0 +1,21 @@
+import { usePlebbitRpcSettings } from '@plebbit/plebbit-react-hooks';
+
+const useChallengesOptions = () => {
+  const { challenges } = usePlebbitRpcSettings().plebbitRpcSettings || {};
+
+  const options = Object.keys(challenges || {}).reduce(
+    (acc, challengeName) => {
+      const challengeSettings = challenges[challengeName];
+      acc[challengeName] = challengeSettings.optionInputs.reduce((optionsAcc: any, input: any) => {
+        optionsAcc[input.option] = input.default || '';
+        return optionsAcc;
+      }, {});
+      return acc;
+    },
+    {} as Record<string, Record<string, string>>,
+  );
+
+  return options;
+};
+
+export default useChallengesOptions;

src/lib/utils/challenge-utils.ts

@@ -61,66 +61,3 @@ export const getPublicationPreview = (publication: any) => {
   }
   return publicationPreview;
 };
-
-export const getDefaultChallengeOptions = (challengeType: string) => {
-  switch (challengeType) {
-    case 'text-math':
-      return {
-        difficulty: '',
-      };
-    case 'captcha-canvas-v3':
-      return {
-        characters: '',
-        height: '',
-        width: '',
-        color: '',
-      };
-    case 'fail':
-      return {
-        error: '',
-      };
-    case 'blacklist':
-      return {
-        blacklist: '',
-        error: '',
-      };
-    case 'question':
-      return {
-        question: '',
-        answer: '',
-      };
-    case 'evm-contract-call':
-      return {
-        chainTicker: '',
-        address: '',
-        abi: '',
-        condition: '',
-        error: '',
-      };
-    default:
-      return {};
-  }
-};
-
-export type OptionInput = {
-  option: string;
-  label: string;
-  default?: string;
-  description: string;
-  placeholder?: string;
-  required?: boolean;
-};
-
-export type Exclude = {
-  postScore?: number;
-  replyScore?: number;
-  firstCommentTimestamp?: number;
-  challenges?: number[];
-  post?: boolean;
-  reply?: boolean;
-  vote?: boolean;
-  role?: string[];
-  address?: string[];
-  rateLimit?: number;
-  rateLimitChallengeSuccess?: boolean;
-};

src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx

@@ -14,8 +14,8 @@ import { useTranslation } from 'react-i18next';
 import { create } from 'zustand';
 import styles from './subplebbit-settings.module.css';
 import { isValidURL } from '../../../lib/utils/url-utils';
-import { OptionInput, Exclude, getDefaultChallengeOptions } from '../../../lib/utils/challenge-utils';
 import { isCreateSubplebbitView, isSubplebbitSettingsView } from '../../../lib/utils/view-utils';
+import useChallengesOptions from '../../../hooks/use-challenges-options';
 import useChallengeSettings from '../../../hooks/use-challenge-settings';
 import LoadingEllipsis from '../../../components/loading-ellipsis';
 import Markdown from '../../../components/markdown';
@@ -366,6 +366,29 @@ interface ChallengeSettingsProps {
   showSettings: boolean;
 }
 
+type OptionInput = {
+  option: string;
+  label: string;
+  default?: string;
+  description: string;
+  placeholder?: string;
+  required?: boolean;
+};
+
+type Exclude = {
+  postScore?: number;
+  replyScore?: number;
+  firstCommentTimestamp?: number;
+  challenges?: number[];
+  post?: boolean;
+  reply?: boolean;
+  vote?: boolean;
+  role?: string[];
+  address?: string[];
+  rateLimit?: number;
+  rateLimitChallengeSuccess?: boolean;
+};
+
 const rolesToExclude = ['moderator', 'admin', 'owner'];
 const actionsToExclude: Array<'post' | 'reply' | 'vote'> = ['post', 'reply', 'vote'];
 const nonActionsToExclude: Array<'not post' | 'not reply' | 'not vote'> = ['not post', 'not reply', 'not vote'];
@@ -695,6 +718,7 @@ const Challenges = ({ isReadOnly, readOnlyChallenges }: { isReadOnly: boolean; r
   const { settings, setSubplebbitSettingsStore } = useSubplebbitSettingsStore();
   const challenges = settings?.challenges || readOnlyChallenges || [];
   const [showSettings, setShowSettings] = useState<boolean[]>(challenges.map(() => false));
+  const challengeOptions = useChallengesOptions();
 
   const location = useLocation();
   const isInCreateSubplebbitView = isCreateSubplebbitView(location.pathname);
@@ -706,11 +730,10 @@ const Challenges = ({ isReadOnly, readOnlyChallenges }: { isReadOnly: boolean; r
   };
 
   const handleAddChallenge = () => {
-    const defaultChallenge = 'captcha-canvas-v3';
-    const options = getDefaultChallengeOptions(defaultChallenge);
+    const defaultOptions = challengeOptions['captcha-canvas-v3'] || {};
     const newChallenge = {
-      name: defaultChallenge,
-      options,
+      name: 'captcha-canvas-v3',
+      defaultOptions,
     };
     const updatedChallenges = [...(settings?.challenges || []), newChallenge];
     setSubplebbitSettingsStore({ settings: { ...settings, challenges: updatedChallenges } });
@@ -724,8 +747,9 @@ const Challenges = ({ isReadOnly, readOnlyChallenges }: { isReadOnly: boolean; r
   };
 
   const handleChallengeTypeChange = (index: number, newType: string) => {
+    const options = challengeOptions[newType] || {};
     const updatedChallenges = [...challenges];
-    updatedChallenges[index] = { ...updatedChallenges[index], name: newType, options: getDefaultChallengeOptions(newType) };
+    updatedChallenges[index] = { ...updatedChallenges[index], name: newType, options };
     setSubplebbitSettingsStore({ settings: { ...settings, challenges: updatedChallenges } });
   };