From bbc723623b1fa3d7048e54cfc3cb25983e45d18d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 12 Sep 2024 09:38:48 -0500
Subject: [PATCH] Small refactors to zap stuff

---
 .../ui/components/modals/zaps-modal.tsx       |  4 +-
 .../zap/components/zap-button/zap-button.tsx  |  7 ++--
 .../zap/components/zap-pay-request-form.tsx   | 38 ++++++++++++-------
 src/locales/en.json                           |  1 -
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/features/ui/components/modals/zaps-modal.tsx b/src/features/ui/components/modals/zaps-modal.tsx
index a8b2c9fb4..dbcf99169 100644
--- a/src/features/ui/components/modals/zaps-modal.tsx
+++ b/src/features/ui/components/modals/zaps-modal.tsx
@@ -28,7 +28,9 @@ const ZapsModal: React.FC<IZapsModal> = ({ onClose, statusId }) => {
   const accounts = useMemo((): ImmutableList<IAccountWithZaps> | undefined => {
     if (!zaps) return;
 
-    return zaps.map(({ account, amount, comment }) =>({ id: account, amount, comment })).flatten() as ImmutableList<IAccountWithZaps>;
+    return zaps
+      .map(({ account, amount, comment }) => ({ id: account, amount, comment }))
+      .flatten() as ImmutableList<IAccountWithZaps>;
   }, [zaps]);
 
   const fetchData = () => {
diff --git a/src/features/zap/components/zap-button/zap-button.tsx b/src/features/zap/components/zap-button/zap-button.tsx
index 76f352397..d07fab6aa 100644
--- a/src/features/zap/components/zap-button/zap-button.tsx
+++ b/src/features/zap/components/zap-button/zap-button.tsx
@@ -48,13 +48,14 @@ const ZapButton = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX
       onClick={onClick}
       ref={ref}
       type={type}
-      className={clsx(className, '!box-border flex flex-1 appearance-none flex-col place-content-center items-center rounded-xl border p-2 font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 sm:w-20 sm:p-4', {
+      className={clsx(className, '!box-border flex flex-1 appearance-none flex-col place-content-center items-center rounded-xl border p-2 font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 sm:w-20', {
         'select-none disabled:opacity-75 disabled:cursor-default': disabled,
         'bg-primary-500 hover:bg-primary-400 dark:hover:bg-primary-600 border-transparent focus:bg-primary-500 text-gray-100 focus:ring-primary-300': selected,
         'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': !selected })}
     >
-      <img className='w-full' src={icon} alt='' />
-      <span className='text-base sm:text-2xl'>
+      <img className='w-full flex-1' src={icon} alt='' />
+
+      <span className='justify-self-end text-base sm:text-2xl'>
         <p>
           {shortNumberFormat(amount)}
         </p>
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index 3a5ad9184..5b9ecc85c 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -10,9 +10,10 @@ import coinIcon from 'soapbox/assets/icons/coin.svg';
 import moneyBag from 'soapbox/assets/icons/money-bag.svg';
 import pileCoin from 'soapbox/assets/icons/pile-coin.svg';
 import DisplayNameInline from 'soapbox/components/display-name-inline';
-import { Stack, Button, Input, Avatar } from 'soapbox/components/ui';
+import { Stack, Button, Input, Avatar, Text } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 import { useAppDispatch } from 'soapbox/hooks';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 import ZapButton from './zap-button/zap-button';
 
@@ -28,7 +29,6 @@ interface IZapPayRequestForm {
 }
 
 const messages = defineMessages({
-  zap_button_rounded: { id: 'zap.button.text.rounded', defaultMessage: 'Zap {amount}K sats' },
   zap_button: { id: 'zap.button.text.raw', defaultMessage: 'Zap {amount} sats' },
   zap_commentPlaceholder: { id: 'zap.comment_input.placeholder', defaultMessage: 'Optional comment' },
 });
@@ -64,20 +64,18 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
     }
   };
 
-  const renderZapButtonText = () => {
-    if (zapAmount >= 1000) {
-      return intl.formatMessage(messages.zap_button_rounded, { amount: Math.round((zapAmount / 1000) * 10) / 10 });
-    }
-    return intl.formatMessage(messages.zap_button, { amount: zapAmount });
-  };
-
   return (
     <Stack space={4} element='form' onSubmit={handleSubmit} justifyContent='center' alignItems='center' className='relative'>
       <Stack space={2} justifyContent='center' alignItems='center' >
-        <IconButton src={closeIcon} onClick={onClose} className='absolute -right-[1%] -top-[2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
-        <span className='display-name__account text-base'>
+        <IconButton
+          src={closeIcon}
+          onClick={onClose}
+          className='absolute right-[-1%] top-[-2%] text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
+        />
+
+        <Text weight='semibold'>
           <FormattedMessage id='zap.send_to' defaultMessage='Send zaps to {target}' values={{ target: account.display_name }} />
-        </span>
+        </Text>
         <Avatar src={account.avatar} size={50} />
         <DisplayNameInline account={account} />
       </Stack>
@@ -100,7 +98,10 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
             type='text' onChange={handleCustomAmount} value={zapAmount}
             className='max-w-20 rounded-none border-0 border-b-4 p-0 text-center !text-2xl font-bold !ring-0 sm:max-w-28 sm:p-0.5 sm:!text-4xl dark:bg-transparent'
           />
-          <p className='absolute -right-10 font-bold sm:-right-12 sm:text-xl'>sats</p>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          <p className='absolute -right-10 font-bold sm:-right-12 sm:text-xl'>
+            sats
+          </p>
         </div>
 
       </Stack>
@@ -108,7 +109,16 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
       <div className='w-full'>
         <Input onChange={e => setZapComment(e.target.value)} type='text' placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} />
       </div>
-      <Button className='m-auto w-auto' type='submit' theme='primary' icon={require('@tabler/icons/outline/bolt.svg')} text={renderZapButtonText()} disabled={zapAmount < 1 ? true : false} />
+
+      <Button
+        className='m-auto w-auto'
+        type='submit'
+        theme='primary'
+        icon={require('@tabler/icons/outline/bolt.svg')}
+        disabled={zapAmount < 1 ? true : false}
+      >
+        {intl.formatMessage(messages.zap_button, { amount: shortNumberFormat(zapAmount) })}
+      </Button>
     </Stack>
   );
 };
diff --git a/src/locales/en.json b/src/locales/en.json
index b7ebd7fb4..a1b044b44 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1650,7 +1650,6 @@
   "video.unmute": "Unmute sound",
   "who_to_follow.title": "People To Follow",
   "zap.button.text.raw": "Zap {amount} sats",
-  "zap.button.text.rounded": "Zap {amount}K sats",
   "zap.comment_input.placeholder": "Optional comment",
   "zap.open_wallet": "Open Wallet",
   "zap.send_to": "Send zaps to {target}"