degmods.com/src/layout/header.tsx

import {
  init as initNostrLogin,
  launch as launchNostrLoginDialog
} from 'nostr-login'
import React, {
  Dispatch,
  SetStateAction,
  useCallback,
  useEffect,
  useMemo,
  useState
} from 'react'
import { Link } from 'react-router-dom'
import { Banner } from '../components/Banner'
import { MetadataController, ZapController } from '../controllers'
import { useAppDispatch, useAppSelector, useDidMount } from '../hooks'
import { appRoutes } from '../routes'
import { setIsAuth, setUser } from '../store/reducers/user'
import mainStyles from '../styles//main.module.scss'
import navStyles from '../styles/nav.module.scss'
import '../styles/popup.css'
import {
  copyTextToClipboard,
  formatNumber,
  npubToHex,
  unformatNumber
} from '../utils'
import { toast } from 'react-toastify'
import { PaymentRequest } from '../types'
import { LoadingSpinner } from '../components/LoadingSpinner'
import { QRCodeSVG } from 'qrcode.react'
import Countdown, { CountdownRenderProps } from 'react-countdown'

export const Header = () => {
  const dispatch = useAppDispatch()
  const userState = useAppSelector((state) => state.user)

  useEffect(() => {
    initNostrLogin({
      darkMode: true,
      localSignup: true,
      noBanner: true,
      onAuth: (npub, opts) => {
        if (opts.type === 'logout') {
          dispatch(setIsAuth(false))
          dispatch(setUser(null))
        } else {
          dispatch(setIsAuth(true))
          dispatch(
            setUser({
              npub,
              pubkey: npubToHex(npub)!
            })
          )
          MetadataController.getInstance().then((metadataController) => {
            metadataController.findMetadata(npub).then((userProfile) => {
              if (userProfile) {
                dispatch(
                  setUser({
                    npub,
                    pubkey: npubToHex(npub)!,
                    ...userProfile
                  })
                )
              }
            })
          })
        }
      }
    })
  }, [dispatch])

  const handleLogin = () => {
    launchNostrLoginDialog()
  }

  return (
    <div className={navStyles.NavMain}>
      <Banner />
      <div className={navStyles.NavMainTop}>
        <div className={mainStyles.ContainerMain}>
          <div className={navStyles.NavMainTopInside}>
            <div className={navStyles.NMTI_Sec}>
              <Link
                to={appRoutes.index}
                className={navStyles.NMTI_Sec_HomeLink}
              >
                <div className={navStyles.NMTI_Sec_HomeLink_Logo}>
                  <img
                    className={navStyles.NMTI_Sec_HomeLink_LogoImg}
                    src='/assets/img/DEG%20Mods%20Logo%20With%20Text.svg'
                  />
                </div>
              </Link>
            </div>
            <div className={navStyles.NMTI_Sec}>
              <div className={navStyles.NMTI_SecInside}>
                <TipButtonWithDialog />
                <Link
                  to={appRoutes.submitMod}
                  className={navStyles.NMTI_SecInside_Link}
                >
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='0 0 512 512'
                    width='1em'
                    height='1em'
                    fill='currentColor'
                  >
                    <path d='M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z'></path>
                  </svg>
                  Submit Mod
                </Link>
                <Link
                  to={appRoutes.write}
                  className={navStyles.NMTI_SecInside_Link}
                >
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='0 0 512 512'
                    width='1em'
                    height='1em'
                    fill='currentColor'
                  >
                    <path d='M467.1 241.1L351.1 288h94.34c-7.711 14.85-16.29 29.28-25.87 43.01l-132.5 52.99h85.65c-59.34 52.71-144.1 80.34-264.5 52.82l-68.13 68.13c-9.38 9.38-24.56 9.374-33.94 0c-9.375-9.375-9.375-24.56 0-33.94l253.4-253.4c4.846-6.275 4.643-15.19-1.113-20.95c-6.25-6.25-16.38-6.25-22.62 0l-168.6 168.6C24.56 58 366.9 8.118 478.9 .0846c18.87-1.354 34.41 14.19 33.05 33.05C508.7 78.53 498.5 161.8 467.1 241.1z'></path>
                  </svg>
                  Write
                </Link>
                <Link
                  to={appRoutes.settingsProfile}
                  className={navStyles.NMTI_SecInside_Link}
                >
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='0 0 512 512'
                    width='1em'
                    height='1em'
                    fill='currentColor'
                  >
                    <path d='M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z'></path>
                  </svg>
                  Settings
                </Link>
                {!userState.isAuth && (
                  <a
                    id='loginNav'
                    className={navStyles.NMTI_SecInside_Link}
                    onClick={handleLogin}
                  >
                    <img
                      className={navStyles.NMTI_SecInside_LinkImg}
                      src='/assets/img/DEG%20Mods%20Default%20PP.png'
                    />
                    Login
                  </a>
                )}
                {userState.isAuth && userState.user && (
                  <div className={navStyles.NMTI_SecInside_Link}>
                    {userState.user.image && (
                      <img
                        src={userState.user.image}
                        alt='Profile Avatar'
                        className={navStyles.NMTI_SecInside_LinkImg}
                      />
                    )}
                    <span className={navStyles.NMTI_SecInside_Username}>
                      {userState.user.name ||
                        userState.user.displayName ||
                        userState.user.npub}
                    </span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={navStyles.NavMainBottom}>
        <div className={mainStyles.ContainerMain}>
          <div className={navStyles.NavMainBottomInside}>
            <Link
              to={appRoutes.games}
              className={navStyles.NavMainBottomInsideLink}
            >
              Games
            </Link>
            <Link
              to={appRoutes.mods}
              className={navStyles.NavMainBottomInsideLink}
            >
              Mods
            </Link>
            <Link
              to={appRoutes.about}
              className={navStyles.NavMainBottomInsideLink}
            >
              About
            </Link>
            <Link
              to={appRoutes.blog}
              className={navStyles.NavMainBottomInsideLink}
            >
              Blog
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}

const TipButtonWithDialog = React.memo(() => {
  const [isOpen, setIsOpen] = useState(false)

  const [isLoading, setIsLoading] = useState(false)
  const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')

  const [amount, setAmount] = useState<number>(0)
  const [message, setMessage] = useState('')

  const [paymentRequest, setPaymentRequest] = useState<PaymentRequest>()

  const userState = useAppSelector((state) => state.user)

  const handleClose = useCallback(() => {
    setPaymentRequest(undefined)
    setIsLoading(false)
    setIsOpen(false)
  }, [])

  const handleQRExpiry = useCallback(() => {
    setPaymentRequest(undefined)
  }, [])

  const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const unformattedValue = unformatNumber(event.target.value)
    setAmount(unformattedValue)
  }

  const generatePaymentRequest =
    useCallback(async (): Promise<PaymentRequest | null> => {
      let userHexKey: string

      setIsLoading(true)
      setLoadingSpinnerDesc('Getting user pubkey')

      if (userState.isAuth && userState.user?.pubkey) {
        userHexKey = userState.user.pubkey as string
      } else {
        userHexKey = (await window.nostr?.getPublicKey()) as string
      }

      if (!userHexKey) {
        setIsLoading(false)
        toast.error('Could not get pubkey')
        return null
      }

      setLoadingSpinnerDesc('Getting admin metadata')
      const metadataController = await MetadataController.getInstance()

      const adminMetadata = await metadataController.findAdminMetadata()

      if (!adminMetadata?.lud16) {
        setIsLoading(false)
        toast.error('Lighting address (lud16) is missing in admin metadata!')
        return null
      }

      if (!adminMetadata?.pubkey) {
        setIsLoading(false)
        toast.error('pubkey is missing in admin metadata!')
        return null
      }

      const zapController = ZapController.getInstance()

      setLoadingSpinnerDesc('Creating zap request')
      return await zapController
        .getLightningPaymentRequest(
          adminMetadata.lud16,
          amount,
          adminMetadata.pubkey as string,
          userHexKey,
          message
        )
        .catch((err) => {
          toast.error(err.message || err)
          return null
        })
        .finally(() => {
          setIsLoading(false)
        })
    }, [amount, message, userState])

  const handleSend = useCallback(async () => {
    const pr = await generatePaymentRequest()

    if (!pr) return

    setIsLoading(true)
    setLoadingSpinnerDesc('Sending payment!')

    const zapController = ZapController.getInstance()

    if (await zapController.isWeblnProviderExists()) {
      await zapController
        .sendPayment(pr.pr)
        .then(() => {
          toast.success(`Successfully sent ${amount} sats!`)
          handleClose()
        })
        .catch((err) => {
          toast.error(err.message || err)
        })
    } else {
      toast.warn('Webln is not present. Use QR code to send zap.')
      setPaymentRequest(pr)
    }

    setIsLoading(false)
  }, [amount, handleClose, generatePaymentRequest])

  const handleGenerateQRCode = async () => {
    const pr = await generatePaymentRequest()

    if (!pr) return

    setPaymentRequest(pr)
  }

  return (
    <>
      <a
        className={`${navStyles.NMTI_SecInside_Link} ${navStyles.NMTI_SI_LinkTip}`}
        onClick={() => setIsOpen(true)}
      >
        <svg
          xmlns='http://www.w3.org/2000/svg'
          viewBox='-64 0 512 512'
          width='1em'
          height='1em'
          fill='currentColor'
        >
          <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
        </svg>
        Tip
      </a>
      {isOpen && (
        <div
          id='PopUpMainZap'
          className='popUpMain'
          style={{ display: 'flex' }}
        >
          <div className='ContainerMain'>
            <div className='popUpMainCardWrapper'>
              <div className='popUpMainCard popUpMainCardQR'>
                <div className='popUpMainCardTop'>
                  <div className='popUpMainCardTopInfo'>
                    <h3>Tip/Zap DEG Mods</h3>
                  </div>
                  <div className='popUpMainCardTopClose' onClick={handleClose}>
                    <svg
                      xmlns='http://www.w3.org/2000/svg'
                      viewBox='-96 0 512 512'
                      width='1em'
                      height='1em'
                      fill='currentColor'
                      style={{ zIndex: 1 }}
                    >
                      <path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z' />
                    </svg>
                  </div>
                </div>
                <div className='pUMCB_Zaps'>
                  <div className='pUMCB_ZapsInside'>
                    <div className='pUMCB_ZapsInsideAmount'>
                      <div className='inputLabelWrapperMain'>
                        <p
                          className='labelDescriptionMain'
                          style={{ textAlign: 'center' }}
                        >
                          If you want the development and maintenance of DEG
                          Mods to stop, then a tip helps continue it.
                        </p>
                        <label className='form-label labelMain'>
                          Amount (Satoshis)
                        </label>
                        <input
                          className='inputMain'
                          type='text'
                          inputMode='numeric'
                          value={amount ? formatNumber(amount) : ''}
                          onChange={handleAmountChange}
                        />
                      </div>
                      <div className='pUMCB_ZapsInsideAmountOptions'>
                        <PresetAmount
                          label='1K'
                          value={1000}
                          setAmount={setAmount}
                        />
                        <PresetAmount
                          label='5K'
                          value={5000}
                          setAmount={setAmount}
                        />
                        <PresetAmount
                          label='10K'
                          value={10000}
                          setAmount={setAmount}
                        />
                        <PresetAmount
                          label='25K'
                          value={25000}
                          setAmount={setAmount}
                        />
                      </div>
                    </div>
                    <div className='inputLabelWrapperMain'>
                      <label className='form-label labelMain'>
                        Message (optional)
                      </label>
                      <input
                        type='text'
                        className='inputMain'
                        value={message}
                        onChange={(e) => setMessage(e.target.value)}
                      />
                    </div>
                    <div className='pUMCB_ZapsInsideBtns'>
                      <button
                        className='btn btnMain pUMCB_ZapsInsideElementBtn'
                        type='button'
                        onClick={handleGenerateQRCode}
                        disabled={!amount}
                      >
                        <svg
                          xmlns='http://www.w3.org/2000/svg'
                          viewBox='-32 0 512 512'
                          width='1em'
                          height='1em'
                          fill='currentColor'
                        >
                          <path d='M144 32C170.5 32 192 53.49 192 80V176C192 202.5 170.5 224 144 224H48C21.49 224 0 202.5 0 176V80C0 53.49 21.49 32 48 32H144zM128 96H64V160H128V96zM144 288C170.5 288 192 309.5 192 336V432C192 458.5 170.5 480 144 480H48C21.49 480 0 458.5 0 432V336C0 309.5 21.49 288 48 288H144zM128 352H64V416H128V352zM256 80C256 53.49 277.5 32 304 32H400C426.5 32 448 53.49 448 80V176C448 202.5 426.5 224 400 224H304C277.5 224 256 202.5 256 176V80zM320 160H384V96H320V160zM352 448H384V480H352V448zM448 480H416V448H448V480zM416 288H448V416H352V384H320V480H256V288H352V320H416V288z'></path>
                        </svg>
                      </button>
                      <button
                        className='btn btnMain pUMCB_ZapsInsideElementBtn'
                        type='button'
                        onClick={handleSend}
                        disabled={!amount}
                      >
                        <svg
                          xmlns='http://www.w3.org/2000/svg'
                          viewBox='-64 0 512 512'
                          width='1em'
                          height='1em'
                          fill='currentColor'
                        >
                          <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z' />
                        </svg>
                        Send
                      </button>
                    </div>
                    {paymentRequest && (
                      <ZapQR
                        paymentRequest={paymentRequest}
                        handleClose={handleClose}
                        handleQRExpiry={handleQRExpiry}
                      />
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
    </>
  )
})

type PresetAmountProps = {
  label: string
  value: number
  setAmount: Dispatch<SetStateAction<number>>
}

const PresetAmount = React.memo(
  ({ label, value, setAmount }: PresetAmountProps) => {
    return (
      <button
        className='btn btnMain pUMCB_ZapsInsideAmountOptionsBtn'
        type='button'
        onClick={() => setAmount(value)}
      >
        <svg
          xmlns='http://www.w3.org/2000/svg'
          viewBox='-64 0 512 512'
          width='1em'
          height='1em'
          fill='currentColor'
        >
          <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z' />
        </svg>
        {label}
      </button>
    )
  }
)

type ZapQRProps = {
  paymentRequest: PaymentRequest
  handleClose: () => void
  handleQRExpiry: () => void
}

const ZapQR = React.memo(
  ({ paymentRequest, handleClose, handleQRExpiry }: ZapQRProps) => {
    useDidMount(() => {
      ZapController.getInstance()
        .pollZapReceipt(paymentRequest)
        .then(() => {
          toast.success(`Successfully sent sats!`)
        })
        .catch((err) => {
          toast.error(err.message || err)
        })
        .finally(() => {
          handleClose()
        })
    })

    const onQrCodeClicked = async () => {
      if (!paymentRequest) return

      const zapController = ZapController.getInstance()

      if (await zapController.isWeblnProviderExists()) {
        zapController.sendPayment(paymentRequest.pr)
      } else {
        console.warn('Webln provider not present')

        const href = `lightning:${paymentRequest.pr}`
        const a = document.createElement('a')
        a.href = href
        a.click()
      }
    }

    return (
      <div className='inputLabelWrapperMain' style={{ alignItems: 'center' }}>
        <QRCodeSVG
          className='popUpMainCardBottomQR'
          onClick={onQrCodeClicked}
          value={paymentRequest.pr}
          height={235}
          width={235}
        />
        <label
          className='popUpMainCardBottomLnurl'
          onClick={() => {
            copyTextToClipboard(paymentRequest.pr).then((isCopied) => {
              if (isCopied) toast.success('Lnurl copied to clipboard!')
            })
          }}
        >
          {paymentRequest.pr}
        </label>
        <Timer onTimerExpired={handleQRExpiry} />
      </div>
    )
  }
)

const MAX_POLLING_TIME = 2 * 60 * 1000 // 2 minutes in milliseconds

const renderer = ({ minutes, seconds }: CountdownRenderProps) => (
  <span>
    {minutes}:{seconds}
  </span>
)

type TimerProps = {
  onTimerExpired: () => void
}

const Timer = React.memo(({ onTimerExpired }: TimerProps) => {
  const expiryTime = useMemo(() => {
    return Date.now() + MAX_POLLING_TIME
  }, [])

  return (
    <div>
      <i className='fas fa-clock'></i>
      <Countdown
        date={expiryTime}
        renderer={renderer}
        onComplete={onTimerExpired}
      />
    </div>
  )
})