Merge branch 'lightning-profile-field' into 'main'

Add LightningAddress component

See merge request soapbox-pub/soapbox!2928

src/features/crypto-donate/components/lightning-address.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CopyableInput from 'soapbox/components/copyable-input';
+import { Text, Stack, HStack, Emoji } from 'soapbox/components/ui';
+
+export interface ILightningAddress {
+  address: string;
+}
+
+const LightningAddress: React.FC<ILightningAddress> = (props): JSX.Element => {
+  const { address } = props;
+
+  return (
+    <Stack>
+      <HStack alignItems='center' className='mb-1'>
+        <Emoji
+          className='mr-2.5 flex w-6 items-start justify-center rtl:ml-2.5 rtl:mr-0'
+          emoji='⚡'
+        />
+
+        <Text weight='bold'>
+          <FormattedMessage id='crypto.lightning' defaultMessage='Lightning' />
+        </Text>
+      </HStack>
+
+      <CopyableInput value={address} />
+    </Stack>
+  );
+};
+
+export default LightningAddress;

src/features/ui/components/profile-field.tsx

@@ -4,12 +4,13 @@ import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
 
 import Markup from 'soapbox/components/markup';
 import { HStack, Icon } from 'soapbox/components/ui';
-import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
+import { CryptoAddress, LightningAddress } from 'soapbox/features/ui/util/async-components';
 
 import type { Account } from 'soapbox/schemas';
 
 const getTicker = (value: string): string => (value.match(/\$([a-zA-Z]*)/i) || [])[1];
 const isTicker = (value: string): boolean => Boolean(getTicker(value));
+const isZapEmoji = (value: string) => /^\u26A1[\uFE00-\uFE0F]?$/.test(value);
 
 const messages = defineMessages({
   linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
@@ -39,6 +40,8 @@ const ProfileField: React.FC<IProfileField> = ({ field }) => {
         address={field.value_plain}
       />
     );
+  } else if (isZapEmoji(field.name)) {
+    return <LightningAddress address={field.value_plain} />;
   }
 
   return (

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

@@ -102,6 +102,7 @@ export const CryptoDonate = lazy(() => import('soapbox/features/crypto-donate'))
 export const CryptoDonatePanel = lazy(() => import('soapbox/features/crypto-donate/components/crypto-donate-panel'));
 export const CryptoAddress = lazy(() => import('soapbox/features/crypto-donate/components/crypto-address'));
 export const CryptoDonateModal = lazy(() => import('soapbox/features/ui/components/modals/crypto-donate-modal'));
+export const LightningAddress = lazy(() => import('soapbox/features/crypto-donate/components/lightning-address'));
 export const ScheduledStatuses = lazy(() => import('soapbox/features/scheduled-statuses'));
 export const UserIndex = lazy(() => import('soapbox/features/admin/user-index'));
 export const FederationRestrictions = lazy(() => import('soapbox/features/federation-restrictions'));

src/locales/en.json

@@ -528,6 +528,7 @@
   "confirmations.scheduled_status_delete.message": "Are you sure you want to discard this scheduled post?",
   "confirmations.unfollow.confirm": "Unfollow",
   "copy.success": "Copied to clipboard!",
+  "crypto.lightning": "Lightning",
   "crypto_donate.explanation_box.message": "{siteTitle} accepts cryptocurrency donations. You may send a donation to any of the addresses below. Thank you for your support!",
   "crypto_donate.explanation_box.title": "Sending cryptocurrency donations",
   "crypto_donate_panel.actions.view": "Click to see {count, plural, one {# wallet} other {# wallets}}",