Merge branch 'nostr-panel' into 'main'

Add NostrPanel

See merge request soapbox-pub/soapbox!3048

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

@@ -0,0 +1,27 @@
+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

@@ -176,3 +176,4 @@ export const Relays = lazy(() => import('soapbox/features/admin/relays'));
 export const Rules = lazy(() => import('soapbox/features/admin/rules'));
 export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/modals/edit-rule-modal'));
 export const AdminNostrRelays = lazy(() => import('soapbox/features/admin/nostr-relays'));
+export const NostrPanel = lazy(() => import('soapbox/features/ui/components/nostr-panel'));

src/locales/en.json

@@ -1148,6 +1148,8 @@
   "new_group_panel.title": "Create Group",
   "nostr_extension.found": "<link>Sign in</link> with browser extension.",
   "nostr_extension.not_found": "Browser extension not found.",
+  "nostr_panel.message": "Connect with any Nostr client.",
+  "nostr_panel.title": "Nostr Relay",
   "nostr_relays.read_only": "Read-only",
   "nostr_relays.read_write": "Read & write",
   "nostr_relays.title": "Relays",

src/pages/home-page.tsx

@@ -15,6 +15,7 @@ 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';
@@ -96,22 +97,23 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
         {me && features.announcements && (
           <AnnouncementsPanel />
         )}
-        {features.trends && (
-          <TrendsPanel limit={5} />
+        {(hasCrypto && cryptoLimit > 0 && me) && (
+          <CryptoDonatePanel limit={cryptoLimit} />
         )}
+        <NostrPanel />
         {(hasPatron && me) && (
           <FundingPanel />
         )}
-        {(hasCrypto && cryptoLimit > 0 && me) && (
-          <CryptoDonatePanel limit={cryptoLimit} />
-        )}
-        <PromoPanel />
         {features.birthdays && (
           <BirthdayPanel limit={10} />
         )}
+        {features.trends && (
+          <TrendsPanel limit={5} />
+        )}
         {me && features.suggestions && (
           <WhoToFollowPanel limit={3} />
         )}
+        <PromoPanel />
         <LinkFooter />
       </Layout.Aside>
     </>