diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index a3aa26a6a..76103ee7b 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/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());
-
- const promises = [];
-
- promises.push(dispatch(loadSoapboxConfig()));
+ // Await for configuration
+ await 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) {
- promises.push(dispatch(fetchVerificationConfig()));
+ if (pepeEnabled && !state.me) {
+ await dispatch(fetchVerificationConfig());
}
-
- await Promise.all(promises);
};
};
diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx
index 4d408666d..4f53e32df 100644
--- a/app/soapbox/features/landing_page/index.tsx
+++ b/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();
diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx
index 79253194e..9ddb6eb31 100644
--- a/app/soapbox/features/public_layout/components/header.tsx
+++ b/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 features = useFeatures();
+ const soapboxConfig = useSoapboxConfig();
+ 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)}
- {(isOpen || features.pepe && pepeOpen) && (
+ {(isOpen || pepeEnabled && pepeOpen) && (
- {(isOpen || features.pepe && pepeOpen) && (
-