From 54a57269e4499612003c2bdc7d1adee885523740 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 6 Feb 2024 13:12:09 -0600
Subject: [PATCH] Add LightningAddress component

---
 .../components/lightning-address.tsx          | 32 +++++++++++++++++++
 src/features/ui/components/profile-field.tsx  |  5 ++-
 src/features/ui/util/async-components.ts      |  1 +
 src/locales/en.json                           |  1 +
 4 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/features/crypto-donate/components/lightning-address.tsx

diff --git a/src/features/crypto-donate/components/lightning-address.tsx b/src/features/crypto-donate/components/lightning-address.tsx
new file mode 100644
index 000000000..aa52d61f3
--- /dev/null
+++ b/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;
diff --git a/src/features/ui/components/profile-field.tsx b/src/features/ui/components/profile-field.tsx
index 540d29806..45a801678 100644
--- a/src/features/ui/components/profile-field.tsx
+++ b/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 (
diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts
index 8f63658bb..952f3c639 100644
--- a/src/features/ui/util/async-components.ts
+++ b/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'));
diff --git a/src/locales/en.json b/src/locales/en.json
index 2d005746d..3b5804357 100644
--- a/src/locales/en.json
+++ b/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}}",