Treat Pepe API as an extension, not a feature

app/soapbox/containers/soapbox.tsx

@@ -10,7 +10,7 @@ import { ScrollContext } from 'react-router-scroll-4';
 
 import { loadInstance } from 'soapbox/actions/instance';
 import { fetchMe } from 'soapbox/actions/me';
-import { loadSoapboxConfig } from 'soapbox/actions/soapbox';
+import { loadSoapboxConfig, getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { fetchVerificationConfig } from 'soapbox/actions/verification';
 import * as BuildConfig from 'soapbox/build_config';
 import Helmet from 'soapbox/components/helmet';
@@ -22,7 +22,6 @@ import WaitlistPage from 'soapbox/features/verification/waitlist_page';
 import { createGlobals } from 'soapbox/globals';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures, useSoapboxConfig, useSettings } from 'soapbox/hooks';
 import MESSAGES from 'soapbox/locales/messages';
-import { getFeatures } from 'soapbox/utils/features';
 import { generateThemeCss } from 'soapbox/utils/theme';
 
 import { checkOnboardingStatus } from '../actions/onboarding';
@@ -51,19 +50,16 @@ const loadInitial = () => {
     await dispatch(fetchMe());
     // Await for feature detection
     await dispatch(loadInstance());
-
+    // Await for configuration
-    const promises = [];
+    await dispatch(loadSoapboxConfig());
-
-    promises.push(dispatch(loadSoapboxConfig()));
 
     const state = getState();
-    const features = getFeatures(state.instance);
+    const soapboxConfig = getSoapboxConfig(state);
+    const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
 
-    if (features.pepe && !state.me) {
+    if (pepeEnabled && !state.me) {
-      promises.push(dispatch(fetchVerificationConfig()));
+      await dispatch(fetchVerificationConfig());
     }
-
-    await Promise.all(promises);
   };
 };
 

app/soapbox/features/landing_page/index.tsx

@@ -3,12 +3,14 @@ import { FormattedMessage } from 'react-intl';
 
 import VerificationBadge from 'soapbox/components/verification_badge';
 import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 
 import { Button, Card, CardBody, Stack, Text } from '../../components/ui';
 
 const LandingPage = () => {
-  const features = useFeatures();
+  const soapboxConfig = useSoapboxConfig();
+  const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
+
   const instance = useAppSelector((state) => state.instance);
   const pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true);
 
@@ -56,7 +58,7 @@ const LandingPage = () => {
 
   // Render registration flow depending on features
   const renderBody = () => {
-    if (features.pepe && pepeOpen) {
+    if (pepeEnabled && pepeOpen) {
       return renderPepe();
     } else if (instance.registrations) {
       return renderOpen();

app/soapbox/features/public_layout/components/header.tsx

@@ -5,7 +5,7 @@ import { Link, Redirect } from 'react-router-dom';
 
 import { logIn, verifyCredentials } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
-import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 
 import { openModal } from '../../../actions/modals';
 import { Button, Form, HStack, IconButton, Input, Tooltip } from '../../../components/ui';
@@ -27,8 +27,10 @@ const Header = () => {
   const dispatch = useDispatch();
   const intl = useIntl();
 
-  const { logo } = useSoapboxConfig();
+  const soapboxConfig = useSoapboxConfig();
-  const features = useFeatures();
+  const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
+
+  const { logo } = soapboxConfig;
   const instance = useAppSelector((state) => state.instance);
   const isOpen   = instance.get('registrations', false) === true;
   const pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true);
@@ -94,9 +96,9 @@ const Header = () => {
                   {intl.formatMessage(messages.login)}
                 </Button>
 
-                {(isOpen || features.pepe && pepeOpen) && (
+                {(isOpen || pepeEnabled && pepeOpen) && (
                   <Button
-                    to={features.pepe ? '/verify' : '/signup'}
+                    to={pepeEnabled ? '/verify' : '/signup'}
                     theme='primary'
                   >
                     {intl.formatMessage(messages.register)}

app/soapbox/features/ui/components/modals/landing-page-modal.tsx

@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { Button } from 'soapbox/components/ui';
 import { Modal } from 'soapbox/components/ui';
-import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 
 const messages = defineMessages({
   download: { id: 'landing_page_modal.download', defaultMessage: 'Download' },
@@ -20,9 +20,11 @@ interface ILandingPageModal {
 const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
   const intl = useIntl();
 
-  const { logo } = useSoapboxConfig();
+  const soapboxConfig = useSoapboxConfig();
+  const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
+
+  const { logo } = soapboxConfig;
   const instance = useAppSelector((state) => state.instance);
-  const features = useFeatures();
 
   const isOpen   = instance.get('registrations', false) === true;
   const pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true);
@@ -43,8 +45,8 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
             {intl.formatMessage(messages.login)}
           </Button>
 
-          {(isOpen || features.pepe && pepeOpen) && (
+          {(isOpen || pepeEnabled && pepeOpen) && (
-            <Button to={features.pepe ? '/verify' : '/signup'} theme='primary' block>
+            <Button to={pepeEnabled ? '/verify' : '/signup'} theme='primary' block>
               {intl.formatMessage(messages.register)}
             </Button>
           )}

app/soapbox/utils/__tests__/features-test.js

@@ -148,22 +148,4 @@ describe('getFeatures', () => {
       expect(features.focalPoint).toBe(false);
     });
   });
-
-  describe('pepe', () => {
-    it('is true for Truth Social', () => {
-      const instance = InstanceRecord({
-        version: '3.4.1 (compatible; TruthSocial 1.0.0)',
-      });
-      const features = getFeatures(instance);
-      expect(features.pepe).toBe(true);
-    });
-
-    it('is false for Pleroma', () => {
-      const instance = InstanceRecord({
-        version: '2.7.2 (compatible; Pleroma 2.3.0)',
-      });
-      const features = getFeatures(instance);
-      expect(features.pepe).toBe(false);
-    });
-  });
 });

app/soapbox/utils/features.ts

@@ -347,9 +347,6 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     paginatedContext: v.software === TRUTHSOCIAL,
 
-    /** Truth Social account registration API. */
-    pepe: v.software === TRUTHSOCIAL,
-
     /**
      * Can add polls to statuses.
      * @see POST /api/v1/statuses