index.tsx raw

   1  import { useSecondaryPage } from '@/PageManager'
   2  import {
   3    AlertDialog,
   4    AlertDialogAction,
   5    AlertDialogCancel,
   6    AlertDialogContent,
   7    AlertDialogDescription,
   8    AlertDialogFooter,
   9    AlertDialogHeader,
  10    AlertDialogTitle,
  11    AlertDialogTrigger
  12  } from '@/components/ui/alert-dialog'
  13  import { Button } from '@/components/ui/button'
  14  import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
  15  import { toRizful } from '@/lib/link'
  16  import { useZap } from '@/providers/ZapProvider'
  17  import { disconnect, launchModal } from '@getalby/bitcoin-connect-react'
  18  import { forwardRef } from 'react'
  19  import { useTranslation } from 'react-i18next'
  20  import DefaultZapAmountInput from './DefaultZapAmountInput'
  21  import DefaultZapCommentInput from './DefaultZapCommentInput'
  22  import LightningAddressInput from './LightningAddressInput'
  23  import QuickZapSwitch from './QuickZapSwitch'
  24  
  25  const WalletPage = forwardRef(({ index }: { index?: number }, ref) => {
  26    const { t } = useTranslation()
  27    const { push } = useSecondaryPage()
  28    const { isWalletConnected, walletInfo } = useZap()
  29  
  30    return (
  31      <SecondaryPageLayout ref={ref} index={index} title={t('Wallet')}>
  32        {isWalletConnected ? (
  33          <div className="px-4 pt-3 space-y-4">
  34            <div>
  35              {walletInfo?.node.alias && (
  36                <div className="mb-2">
  37                  {t('Connected to')} <strong>{walletInfo.node.alias}</strong>
  38                </div>
  39              )}
  40              <AlertDialog>
  41                <AlertDialogTrigger asChild>
  42                  <Button variant="destructive">{t('Disconnect Wallet')}</Button>
  43                </AlertDialogTrigger>
  44                <AlertDialogContent>
  45                  <AlertDialogHeader>
  46                    <AlertDialogTitle>{t('Are you absolutely sure?')}</AlertDialogTitle>
  47                    <AlertDialogDescription>
  48                      {t('You will not be able to send zaps to others.')}
  49                    </AlertDialogDescription>
  50                  </AlertDialogHeader>
  51                  <AlertDialogFooter>
  52                    <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
  53                    <AlertDialogAction variant="destructive" onClick={() => disconnect()}>
  54                      {t('Disconnect')}
  55                    </AlertDialogAction>
  56                  </AlertDialogFooter>
  57                </AlertDialogContent>
  58              </AlertDialog>
  59            </div>
  60            <DefaultZapAmountInput />
  61            <DefaultZapCommentInput />
  62            <QuickZapSwitch />
  63            <LightningAddressInput />
  64          </div>
  65        ) : (
  66          <div className="px-4 pt-3 flex items-center gap-2">
  67            <Button className="bg-foreground hover:bg-foreground/90" onClick={() => push(toRizful())}>
  68              {t('Start with a Rizful Vault')}
  69            </Button>
  70            <Button
  71              variant="link"
  72              className="text-muted-foreground hover:text-foreground px-0"
  73              onClick={() => {
  74                launchModal()
  75              }}
  76            >
  77              {t('or other wallets')}
  78            </Button>
  79          </div>
  80        )}
  81      </SecondaryPageLayout>
  82    )
  83  })
  84  WalletPage.displayName = 'WalletPage'
  85  export default WalletPage
  86