'use client'; import { useState, useMemo } from 'react'; import { Drawer } from 'vaul'; import useMeasure from 'react-use-measure'; import { motion } from 'motion/react'; import { Button } from '@/components/ui/button'; import { X } from 'lucide-react'; import { BannedIcon, DangerIcon, FaceIDIcon, LockIcon, PassIcon, PhraseIcon, RecoveryPhraseIcon, ShieldIcon, WarningIcon, } from '@/components/demo'; export const AnimatedDrawer = () => { const [isOpen, setIsOpen] = useState(false); const [view, setView] = useState('default'); const [elementRef, bounds] = useMeasure(); const content = useMemo(() => { switch (view) { case 'default': return (

Wallet Settings

); case 'remove': return (

Remove Wallet?

This action cannot be undone. Make sure you've backed up your recovery phrase before proceeding. You'll lose access to all funds if you don't have a backup.

); case 'pharse': return (

Recovery Phrase

Your recovery phrase is the master key to your wallet. Write it down and store it securely. Anyone with this phrase can access your funds.

Store it in a secure location

Never share with anyone

We cannot recover it for you

); case 'key': return (

Private Key

Your private key is a cryptographic key that proves ownership of your wallet. Treat it with the same security as your bank account details.

Store it in a secure location

Never share with anyone

We cannot recover it for you

); } }, [view]); return ( <> setIsOpen(false)} />

{content}

); };

Animated Drawer

Installation