feat: rizful

src/pages/secondary/WalletPage/index.tsx

@@ -1,5 +1,20 @@
+import { useSecondaryPage } from '@/PageManager'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
-import { Button as BcButton } from '@getalby/bitcoin-connect-react'
+import { toRizful } from '@/lib/link'
+import { useZap } from '@/providers/ZapProvider'
+import { disconnect, launchModal } from '@getalby/bitcoin-connect-react'
 import { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import DefaultZapAmountInput from './DefaultZapAmountInput'
@@ -9,16 +24,60 @@ import QuickZapSwitch from './QuickZapSwitch'
 
 const WalletPage = forwardRef(({ index }: { index?: number }, ref) => {
   const { t } = useTranslation()
+  const { push } = useSecondaryPage()
+  const { isWalletConnected, walletInfo } = useZap()
 
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Wallet')}>
-      <div className="px-4 pt-3 space-y-4">
-        <BcButton />
-        <LightningAddressInput />
-        <DefaultZapAmountInput />
-        <DefaultZapCommentInput />
-        <QuickZapSwitch />
-      </div>
+      {isWalletConnected ? (
+        <div className="px-4 pt-3 space-y-4">
+          <div>
+            {walletInfo?.node.alias && (
+              <div className="mb-2">
+                {t('Connected to')} <strong>{walletInfo.node.alias}</strong>
+              </div>
+            )}
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button variant="destructive">{t('Disconnect Wallet')}</Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t('Are you absolutely sure?')}</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t('You will not be able to send zaps to others.')}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
+                  <AlertDialogAction variant="destructive" onClick={() => disconnect()}>
+                    {t('Disconnect')}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+          <DefaultZapAmountInput />
+          <DefaultZapCommentInput />
+          <QuickZapSwitch />
+          <LightningAddressInput />
+        </div>
+      ) : (
+        <div className="px-4 pt-3 flex items-center gap-2">
+          <Button className="bg-foreground hover:bg-foreground/90" onClick={() => push(toRizful())}>
+            {t('Start with a Rizful Vault')}
+          </Button>
+          <Button
+            variant="link"
+            className="text-muted-foreground hover:text-foreground px-0"
+            onClick={() => {
+              launchModal()
+            }}
+          >
+            {t('or other wallets')}
+          </Button>
+        </div>
+      )}
     </SecondaryPageLayout>
   )
 })