Merge branch 'nostr-relay-settings' into 'main'

Move Nostr Relay to settings page

See merge request soapbox-pub/soapbox!3052

src/features/settings/index.tsx

@@ -2,9 +2,10 @@ import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchMfa } from 'soapbox/actions/mfa';
+import CopyableInput from 'soapbox/components/copyable-input';
 import List, { ListItem } from 'soapbox/components/list';
-import { Card, CardBody, CardHeader, CardTitle, Column, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { Card, CardBody, CardHeader, CardTitle, Column, FormGroup, Text } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useFeatures, useInstance, useOwnAccount } from 'soapbox/hooks';
 
 import Preferences from '../preferences';
 
@@ -44,6 +45,7 @@ const Settings = () => {
   const mfa = useAppSelector((state) => state.security.get('mfa'));
   const features = useFeatures();
   const { account } = useOwnAccount();
+  const instance = useInstance();
 
   const isMfaEnabled = mfa.getIn(['settings', 'totp']);
 
@@ -169,6 +171,20 @@ const Settings = () => {
             </CardBody>
           </>
         )}
+
+        {instance.nostr && (
+          <>
+            <CardHeader>
+              <CardTitle title={<FormattedMessage id='nostr_panel.title' defaultMessage='Nostr Relay' />} />
+            </CardHeader>
+
+            <CardBody className='pb-3'>
+              <FormGroup hintText={<FormattedMessage id='nostr_panel.message' defaultMessage='Connect with any Nostr client.' />}>
+                <CopyableInput value={instance.nostr.relay} />
+              </FormGroup>
+            </CardBody>
+          </>
+        )}
       </Card>
     </Column>
   );

src/features/ui/components/nostr-panel.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import CopyableInput from 'soapbox/components/copyable-input';
-import { Text, Widget } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks/useInstance';
-
-const NostrPanel = () => {
-  const instance = useInstance();
-  const relay = instance.nostr?.relay;
-
-  if (!relay) {
-    return null;
-  }
-
-  return (
-    <Widget title={<FormattedMessage id='nostr_panel.title' defaultMessage='Nostr Relay' />}>
-      <Text>
-        <FormattedMessage id='nostr_panel.message' defaultMessage='Connect with any Nostr client.' />
-      </Text>
-
-      <CopyableInput value={relay} />
-    </Widget>
-  );
-};
-
-export default NostrPanel;

src/features/ui/util/async-components.ts

@@ -178,4 +178,3 @@ export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/m
 export const AdminNostrRelays = lazy(() => import('soapbox/features/admin/nostr-relays'));
 export const ZapPayRequestModal = lazy(() => import('soapbox/features/ui/components/modals/zap-pay-request'));
 export const ZapInvoiceModal = lazy(() => import('soapbox/features/ui/components/modals/zap-invoice'));
-export const NostrPanel = lazy(() => import('soapbox/features/ui/components/nostr-panel'));

src/pages/home-page.tsx

@@ -15,7 +15,6 @@ import {
   BirthdayPanel,
   CtaBanner,
   AnnouncementsPanel,
-  NostrPanel,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig, useDraggedFiles, useAppDispatch } from 'soapbox/hooks';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile';
@@ -100,7 +99,6 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
         {(hasCrypto && cryptoLimit > 0 && me) && (
           <CryptoDonatePanel limit={cryptoLimit} />
         )}
-        <NostrPanel />
         {(hasPatron && me) && (
           <FundingPanel />
         )}