degmods.com/src/layout/header.tsx

import {
  init as initNostrLogin,
  launch as launchNostrLoginDialog
} from 'nostr-login'
import React, { useCallback, useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { toast } from 'react-toastify'
import { Banner } from '../components/Banner'
import { LoadingSpinner } from '../components/LoadingSpinner'
import { ZapButtons, ZapPresets, ZapQR } from '../components/Zap'
import { MetadataController, ZapController } from '../controllers'
import { useAppDispatch, useAppSelector } from '../hooks'
import { appRoutes } from '../routes'
import { setAuth, setUser } from '../store/reducers/user'
import mainStyles from '../styles//main.module.scss'
import navStyles from '../styles/nav.module.scss'
import '../styles/popup.css'
import { PaymentRequest } from '../types'
import { formatNumber, npubToHex, unformatNumber } from '../utils'

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

  useEffect(() => {
    initNostrLogin({
      darkMode: true,
      noBanner: true,
      methods: ['extension'],
      onAuth: (npub, opts) => {
        if (opts.type === 'logout') {
          dispatch(setAuth(null))
          dispatch(setUser(null))
        } else {
          dispatch(
            setAuth({
              method: opts.method,
              localNsec: opts.localNsec
            })
          )
          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.auth && (
                  <>
                    <RegisterButtonWithDialog />
                    <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.auth && 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.auth && 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'>
          <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 don't want the development and maintenance of DEG
                          Mods to stop, then a tip helps!
                        </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'>
                        <ZapPresets 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>
                    <ZapButtons
                      disabled={!amount}
                      handleGenerateQRCode={handleGenerateQRCode}
                      handleSend={handleSend}
                    />
                    {paymentRequest && (
                      <ZapQR
                        paymentRequest={paymentRequest}
                        handleClose={handleClose}
                        handleQRExpiry={handleQRExpiry}
                      />
                    )}
                    <div className='BTCAddressPopZap'>
                      <p>
                      DEG Mod's Silent Payment Bitcoin Address (Be careful. <a href='https://youtu.be/payDPlHzp58?t=215' className='linkMain' target='_blank'>Learn more</a>):<br />
                      <span className='BTCAddressPopZapTextSpan'>sp1qq205tj23sq3z6qjxt5ts5ps8gdwcrkwypej3h2z2hdclmaptl25xxqjfqhc2de4gaxprgm0yqwfr737swpvvmrph9ctkeyk60knz6xpjhqumafrd</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
    </>
  )
})

const RegisterButtonWithDialog = () => {
  const [showPopUp, setShowPopUp] = useState(false)

  return (
    <>
      <a
        id='registerNav'
        className={navStyles.NMTI_SecInside_Link}
        onClick={() => setShowPopUp(true)}
      >
        Register
      </a>
      {showPopUp && (
        <div id='PopUpMainRegister' className='popUpMain'>
          <div className='ContainerMain'>
            <div className='popUpMainCardWrapper'>
              <div className='popUpMainCard popUpMainCardQR'>
                <div className='popUpMainCardTop'>
                  <div className='popUpMainCardTopInfo'>
                    <h3>Create an account via</h3>
                  </div>
                  <div
                    className='popUpMainCardTopClose'
                    onClick={() => setShowPopUp(false)}
                  >
                    <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'></path>
                    </svg>
                  </div>
                </div>
                <div className='pUMCB_Zaps'>
                  <div className='pUMCB_ZapsInside'>
                    <div className='inputLabelWrapperMain'>
                      <label className='form-label labelMain'>
                        Browser Extensions (Windows)
                      </label>
                      <p className='labelDescriptionMain'>
                        Once you create your "account" on any of these, come
                        back and click login, then sign-in with extension.
                      </p>
                    </div>
                    <a
                      className='btn btnMain btnMainPopup'
                      role='button'
                      target='_blank'
                      href='https://getalby.com/'
                    >
                      Alby Browser Extension
                    </a>
                    <a
                      className='btn btnMain btnMainPopup'
                      role='button'
                      href='https://keys.band/'
                      target='_blank'
                    >
                      Keys.Band Browser Extension
                    </a>
                  </div>
                  <p
                    className='labelDescriptionMain'
                    style={{
                      padding: '10px',
                      borderRadius: '10px',
                      background: 'rgba(0,0,0,0.1)',
                      border: 'solid 1px rgba(255,255,255,0.1)',
                      margin: '10px 0 0 0'
                    }}
                  >
                    Q:&nbsp;Why can't I create an account normally?
                    <br />
                    A: DEG Mods can't ban you or delete your content (we can
                    only hide you), and the consequence of that is this kind of
                    registration/login system.
                  </p>
                  <div className='dividerPopup'>
                    <div className='dividerPopupLine'></div>
                    <p>or</p>
                    <div className='dividerPopupLine'></div>
                  </div>
                  <div className='pUMCB_ZapsInside'>
                    <div className='inputLabelWrapperMain'>
                      <label className='form-label labelMain'>
                        Browser Extensions (iOS)
                      </label>
                      <p className='labelDescriptionMain'>
                        Once you create your "account" on any of these, come
                        back and click login, then sign-in with extension.
                      </p>
                    </div>
                    <a
                      className='btn btnMain btnMainPopup'
                      role='button'
                      href='https://apps.apple.com/us/app/nostore/id1666553677'
                      target='_blank'
                    >
                      Nostore Browser Extension
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  )
}