Improve zap-pay-request

src/features/zap/components/zap-button/zap-button.tsx

@@ -2,19 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const themes = {
-  primary:
-    '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',
-  secondary:
-    'border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200',
-  tertiary:
-    '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',
-  accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
-  danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500',
-  transparent: 'border-transparent bg-transparent text-primary-600 dark:text-accent-blue dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50',
-  outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
-  muted: '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',
-};
+import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface IButton {
   /** Whether this button expands the width of its container. */
@@ -31,25 +19,25 @@ interface IButton {
   icon?: string;
   /** Action when the button is clicked. */
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  /** Text inside the button. Takes precedence over `children`. */
-  text?: React.ReactNode;
+  /** Amount of sats. */
+  amount?: number;
   /** Makes the button into a navlink, if provided. */
   to?: string;
-  /** Styles the button visually with a predefined theme. */
-  theme?: keyof typeof themes;
+  /** Change the button style if it is selected. */
+  selected: boolean;
   /** Whether this button should submit a form by default. */
   type?: 'button' | 'submit';
 }
 
-/** Customizable button element with various themes. */
+/** Customizable button element. */
 const ZapButton = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
   const {
     disabled = false,
     icon,
     onClick,
-    theme = 'secondary',
+    selected,
     to,
-    text,
+    amount,
     type = 'button',
     className,
   } = props;
@@ -64,12 +52,13 @@ const ZapButton = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX
     >
       <div className={clsx(className, { 'flex flex-col items-center w-14 !box-border place-content-center border font-medium p-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all sm:p-4 sm:w-20': true,
         'select-none disabled:opacity-75 disabled:cursor-default': disabled,
-        [`${themes[theme]}`]: true })}
+        '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-16' src={icon} alt='stack coin' />
         <span className='text-base sm:text-2xl'>
           <p>
-            {text}
+            {shortNumberFormat(amount)}
           </p>
         </span>
 

src/features/zap/components/zap-pay-request-form.tsx

@@ -43,6 +43,8 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
   const { zapArrays, zapSplitData, receiveAmount } = useZapSplit(status, account);
   const splitValues = zapSplitData.splitValues;
   const hasZapSplit = zapArrays.length > 0;
+  const ZAP_AMOUNTS = [50, 200, 1_000, 3_000, 5_000];
+  const ZAP_ICONS = [coinIcon, coinStack, pileCoin, moneyBag, chestIcon];
 
   const handleSubmit = async (e?: React.FormEvent<Element>) => {
     e?.preventDefault();
@@ -99,11 +101,7 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
       </Stack>
 
       <div className='flex justify-center '>
-        <ZapButton onClick={() => setZapAmount(50)} className='m-0.5 sm:m-1' theme={zapAmount === 50 ? 'primary' : 'muted'} icon={coinIcon} text='50' />
-        <ZapButton onClick={() => setZapAmount(200)} className='m-0.5 sm:m-1' theme={zapAmount === 200 ? 'primary' : 'muted'} icon={coinStack} text='200' />
-        <ZapButton onClick={() => setZapAmount(1_000)} className='m-0.5 sm:m-1' theme={zapAmount === 1_000 ? 'primary' : 'muted'} icon={pileCoin} text='1K' />
-        <ZapButton onClick={() => setZapAmount(3_000)} className='m-0.5 sm:m-1' theme={zapAmount === 3_000 ? 'primary' : 'muted'} icon={moneyBag} text='3K' />
-        <ZapButton onClick={() => setZapAmount(5_000)} className='m-0.5 sm:m-1' theme={zapAmount === 5_000 ? 'primary' : 'muted'} icon={chestIcon} text='5K' />
+        {ZAP_AMOUNTS.map((amount, i) => <ZapButton onClick={() => setZapAmount(amount)} className='m-0.5 sm:m-1' selected={zapAmount === amount} icon={ZAP_ICONS[i]} amount={amount} />)}
       </div>
 
       <Stack space={2}>