refactor(subplebbit settings): implement usePlebbitRpcSettings to get challenges info

src/hooks/use-challenge-settings.ts

@@ -0,0 +1,17 @@
+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;
+};
+
+export default useChallengeSettings;

src/lib/utils/challenge-utils.ts

@@ -62,25 +62,6 @@ export const getPublicationPreview = (publication: any) => {
   return publicationPreview;
 };
 
-export const getDefaultChallengeDescription = (challengeType: string) => {
-  switch (challengeType) {
-    case 'text-math':
-      return 'Ask a plain text math question, insecure, use ONLY for testing.';
-    case 'captcha-canvas-v3':
-      return 'make custom image captcha';
-    case 'fail':
-      return 'A challenge that automatically fails with a custom error message.';
-    case 'blacklist':
-      return 'Blacklist author addresses.';
-    case 'question':
-      return "Ask a question, like 'What is the password?'";
-    case 'evm-contract-call':
-      return 'The response from an EVM contract call passes a condition, e.g. a token balance challenge.';
-    default:
-      return '';
-  }
-};
-
 export const getDefaultChallengeOptions = (challengeType: string) => {
   switch (challengeType) {
     case 'text-math':
@@ -143,137 +124,3 @@ export type Exclude = {
   rateLimit?: number;
   rateLimitChallengeSuccess?: boolean;
 };
-
-export const getDefaultChallengeSettings = (challengeType: string) => {
-  switch (challengeType) {
-    case 'text-math':
-      return [
-        {
-          option: 'difficulty',
-          label: 'Difficulty',
-          default: '1',
-          description: 'The math difficulty of the challenge between 1-3.',
-          placeholder: '1',
-        },
-      ];
-    case 'captcha-canvas-v3':
-      return [
-        {
-          option: 'characters',
-          label: 'Characters',
-          description: 'Amount of characters of the captcha.',
-          default: '6',
-          placeholder: 'example: 6',
-        },
-        {
-          option: 'height',
-          label: 'Height',
-          description: 'Height of the captcha.',
-          default: '100',
-          placeholder: 'example: 100',
-        },
-        {
-          option: 'width',
-          label: 'Width',
-          description: 'Width of the captcha.',
-          default: '300',
-          placeholder: 'example: 300',
-        },
-        {
-          option: 'color',
-          label: 'Color',
-          description: 'Color of the captcha.',
-          default: '#32cf7e',
-          placeholder: 'example: #ff0000,#00ff00,#0000ff',
-        },
-      ];
-    case 'fail':
-      return [
-        {
-          option: 'error',
-          label: 'Error',
-          default: "You're not allowed to publish.",
-          description: 'The error to display to the author.',
-          placeholder: "You're not allowed to publish.",
-        },
-      ];
-    case 'blacklist':
-      return [
-        {
-          option: 'blacklist',
-          label: 'Blacklist',
-          default: '',
-          description: 'Comma separated list of author addresses to be blacklisted.',
-          placeholder: 'address1.eth,address2.eth,address3.eth',
-        },
-        {
-          option: 'error',
-          label: 'Error',
-          default: "You're blacklisted.",
-          description: 'The error to display to the author.',
-          placeholder: "You're blacklisted.",
-        },
-      ];
-    case 'question':
-      return [
-        {
-          option: 'question',
-          label: 'Question',
-          default: '',
-          description: 'The question to answer.',
-          placeholder: '',
-        },
-        {
-          option: 'answer',
-          label: 'Answer',
-          default: '',
-          description: 'The answer to the question.',
-          placeholder: '',
-          required: true,
-        },
-      ];
-    case 'evm-contract-call':
-      return [
-        {
-          option: 'chainTicker',
-          label: 'chainTicker',
-          default: 'eth',
-          description: 'The chain ticker',
-          placeholder: 'eth',
-          required: true,
-        },
-        {
-          option: 'address',
-          label: 'Address',
-          default: '',
-          description: 'The contract address.',
-          placeholder: '0x...',
-          required: true,
-        },
-        {
-          option: 'abi',
-          label: 'ABI',
-          default: '',
-          description: 'The ABI of the contract method.',
-          placeholder: '{"constant":true,"inputs":[{"internalType":"address","name":"account...',
-          required: true,
-        },
-        {
-          option: 'condition',
-          label: 'Condition',
-          default: '',
-          description: 'The condition the contract call response must pass.',
-          placeholder: '>1000',
-          required: true,
-        },
-        {
-          option: 'error',
-          label: 'Error',
-          default: "Contract call response doesn't pass condition.",
-          description: 'The error to display to the author.',
-        },
-      ];
-    default:
-      return [];
-  }
-};

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

@@ -14,11 +14,12 @@ 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, getDefaultChallengeDescription, getDefaultChallengeOptions, getDefaultChallengeSettings } from '../../../lib/utils/challenge-utils';
+import { OptionInput, Exclude, getDefaultChallengeOptions } from '../../../lib/utils/challenge-utils';
+import { isCreateSubplebbitView, isSubplebbitSettingsView } from '../../../lib/utils/view-utils';
+import useChallengeSettings from '../../../hooks/use-challenge-settings';
 import LoadingEllipsis from '../../../components/loading-ellipsis';
 import Markdown from '../../../components/markdown';
 import Sidebar from '../../../components/sidebar';
-import { isCreateSubplebbitView, isSubplebbitSettingsView } from '../../../lib/utils/view-utils';
 import _ from 'lodash';
 
 type SubplebbitSettingsState = {
@@ -371,7 +372,7 @@ const nonActionsToExclude: Array<'not post' | 'not reply' | 'not vote'> = ['not
 
 const ChallengeSettings = ({ challenge, index, isReadOnly, setSubplebbitSettingsStore, settings, showSettings }: ChallengeSettingsProps) => {
   const { name, options } = challenge || {};
-  const challengeSettings: OptionInput[] = getDefaultChallengeSettings(name);
+  const challengeSettings: any = useChallengeSettings(name);
 
   const handleOptionChange = (optionName: string, newValue: string) => {
     const updatedOptions = { ...options, [optionName]: newValue };
@@ -469,12 +470,12 @@ const ChallengeSettings = ({ challenge, index, isReadOnly, setSubplebbitSettings
       {isReadOnly ? (
         <>
           <div className={styles.readOnlyChallengeType}>type: {challenge?.type}</div>
-          <div className={styles.readOnlyChallengeDescription}>{challenge?.description}</div>
+          <div className={styles.readOnlyChallengeDescription}>{challengeSettings?.description}</div>
         </>
       ) : (
-        <div className={styles.challengeDescription}>{getDefaultChallengeDescription(name)}</div>
+        <div className={styles.challengeDescription}>{challengeSettings?.description}</div>
       )}
-      {challengeSettings.map((setting) => (
+      {challengeSettings?.optionInputs.map((setting: OptionInput) => (
         <div key={setting?.option} className={styles.challengeOption}>
           <div className={styles.challengeOptionLabel}>{setting?.label}</div>
           <div className={styles.challengeOptionDescription}>