[web] Button base component

web/src/app/(auth)/page.tsx

@@ -3,8 +3,8 @@ import { redirect } from 'next/navigation'
 import Link from 'next/link'
 
 import Balance from '@/components/Balance'
-import { BalanceUnit } from '@/enums'
 import Transactions from '@/components/Transactions'
+import Button from '@/components/base/Button'
 
 const Page = () => {
   const { get } = cookies()
@@ -21,14 +21,10 @@ const Page = () => {
       <Balance />
       <div className="flex mt-4 gap-4 justify-center">
         <Link href="/receive">
-          <button className="w-[128px] rounded p-2 bg-gray-700">
-            <span>Receive</span>
-          </button>
+          <Button className="w-[128px]">Receive</Button>
         </Link>
         <Link href="/send">
-          <button className="w-[128px] rounded p-2 bg-gray-700">
-            <span>Send</span>
-          </button>
+          <Button className="w-[128px]">Send</Button>
         </Link>
       </div>
       <div className="mt-4" />

web/src/app/(auth)/receive/Receive.tsx

@@ -12,6 +12,7 @@ import useIsMounted from '@/hooks/useIsMounted'
 import { LnFService } from '@/services/lnf'
 import { EventMessage } from '@/types'
 import { Transaction } from '@/types/lnf'
+import Button from '@/components/base/Button'
 
 const Receive: FC<{}> = () => {
   const { Canvas: QRCanvas } = useQRCode()
@@ -98,9 +99,9 @@ const Receive: FC<{}> = () => {
               autoFocus
               onChange={(e) => setAmountSat(parseInt(e.target.value.toLowerCase()))}
             />
-            <button className="w-full h-[48px] p-3 rounded bg-gray-700" type="submit">
+            <Button className="w-full h-[48px] p-3" type="submit">
               {isLoading ? 'Loading...' : 'Create invoice'}
-            </button>
+            </Button>
           </form>
         </Fragment>
       )}
@@ -113,8 +114,8 @@ const Receive: FC<{}> = () => {
 
           <div className="mt-3 mx-auto">
             {!copied ? (
-              <button
-                className="flex gap-1 rounded bg-gray-700 p-2 items-center"
+              <Button
+                className="flex gap-1 items-center"
                 onClick={() => {
                   setCopied(true)
                   setTimeout(() => setCopied(false), 2000)
@@ -123,20 +124,20 @@ const Receive: FC<{}> = () => {
               >
                 <FaCopy className="cursor-pointer w-[32px] h-[32px]" />
                 <span>Copy</span>
-              </button>
+              </Button>
             ) : (
               <p>Copied</p>
             )}
           </div>
 
-          <button
-            className="mt-3 p-2 rounded bg-gray-700"
+          <Button
+            className="mt-3"
             onClick={() => {
               setOpenInvoice(!openInvoice)
             }}
           >
             {openInvoice ? 'Hide invoice' : 'Show invoice'}
-          </button>
+          </Button>
 
           {openInvoice && <p className="mt-1 break-words">{invoice}</p>}
         </div>

web/src/app/(auth)/send/QrScanModal.tsx

@@ -3,6 +3,7 @@ import { Dialog, Transition } from '@headlessui/react'
 import { QrReader } from 'react-qr-reader'
 
 import { validInvoice } from '@/utils/invoice'
+import Button from '@/components/base/Button'
 
 interface IQrScanProps {
   closeModal: () => void
@@ -69,13 +70,9 @@ const QrScan: FC<IQrScanProps> = ({ closeModal, setInvoice }) => {
                   />
 
                   <div className="mt-auto w-full">
-                    <button
-                      type="button"
-                      className="flex items-center justify-center py-2 w-full rounded bg-gray-700"
-                      onClick={closeModal}
-                    >
+                    <Button type="button" className="flex items-center justify-center w-full" onClick={closeModal}>
                       Cancel
-                    </button>
+                    </Button>
                   </div>
                 </Dialog.Panel>
               </Transition.Child>

web/src/app/(auth)/send/Send.tsx

@@ -9,6 +9,7 @@ import { toast } from 'react-toastify'
 import { LnFService } from '@/services/lnf'
 import { decodeInvoice, validInvoice } from '@/utils/invoice'
 import QrScanModal from './QrScanModal'
+import Button from '@/components/base/Button'
 
 const Send: FC<{}> = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -95,23 +96,23 @@ const Send: FC<{}> = () => {
               onChange={(e) => setInvoice(e.target.value)}
             />
             <div className="flex gap-2 w-full">
-              <button
+              <Button
                 type="submit"
                 disabled={!invoice || isLoading || !isValidInvoice}
-                className="flex grow gap-1 items-center justify-center p-2 h-[48px] rounded bg-gray-700"
+                className="flex grow gap-1 items-center justify-center h-[48px]"
               >
                 {sendBtnElem}
-              </button>
-              <button
+              </Button>
+              <Button
                 type="button"
-                className="flex items-center gap-1 justify-center py-2 px-6 rounded bg-gray-700"
+                className="flex items-center gap-1 justify-center py-2 px-6"
                 onClick={() => {
                   setIsOpenQRScan((prev) => !prev)
                 }}
               >
                 <RiQrScan2Line className="text-3xl" />
                 <span className="max-md:hidden">Scan</span>
-              </button>
+              </Button>
             </div>
           </form>
 

web/src/app/(unauth)/login/LoginForm.tsx

@@ -7,6 +7,7 @@ import { toast } from 'react-toastify'
 import { AuthService } from '@/services/auth'
 import { IBaseResponseError } from '@/types'
 import { ErrorCode } from '@/enums'
+import Button from '@/components/base/Button'
 
 const Login: FC<{}> = () => {
   const { replace } = useRouter()
@@ -43,9 +44,9 @@ const Login: FC<{}> = () => {
         onChange={(e) => setPin(e.target.value)}
         autoFocus
       />
-      <button className="py-2 rounded w-full h-[48px] mt-2 bg-gray-700" type="submit">
+      <Button className="py-2 w-full h-[48px] mt-2" type="submit">
         {isLoading ? 'Loading...' : 'Login'}
-      </button>
+      </Button>
     </form>
   )
 }

web/src/components/Transactions.tsx

@@ -10,6 +10,7 @@ import { shortenTime } from '@/utils/date'
 import { LnFService } from '@/services/lnf'
 import { useAppContext } from '@/contexts/AppContext'
 import { getUnitSymbol } from '@/utils/unit'
+import Button from './base/Button'
 
 const TxItem = ({ amountSat, description, createdAt, type }: Transaction) => {
   const { displayAmount, amountUnit } = useAppContext()
@@ -90,14 +91,14 @@ const Transactions: FC<{}> = () => {
       ))}
 
       {hasNext && (
-        <button
-          className="mt-4 p-2 bg-gray-700 rounded"
+        <Button
+          className="mt-4"
           onClick={() => {
             fetchTransactions(limit + 5)
           }}
         >
           {isLoading ? 'Loading...' : 'Load more'}
-        </button>
+        </Button>
       )}
     </div>
   )

web/src/components/base/Button.tsx

@@ -0,0 +1,13 @@
+import { ButtonHTMLAttributes, FC } from 'react'
+
+interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+const Button: FC<IButtonProps> = ({ className, children, ...props }) => {
+  return (
+    <button className={`rounded p-2 bg-gray-700 hover:bg-gray-600 hover:text-gray-50 ${className}`} {...props}>
+      {children}
+    </button>
+  )
+}
+
+export default Button