File size: 5,337 Bytes
f667d47 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 'use client'
import { useState } from 'react'
import { X, Share2, CheckCircle2 } from 'lucide-react'
interface RecoveryCardProps {
wallet: string
savedCount: number
daysInactive?: number
campaignName?: string
onClose: () => void
}
export function RecoveryCard({ wallet, savedCount, daysInactive = 8, campaignName = 'Anti-Churn Gift', onClose }: RecoveryCardProps) {
const [copied, setCopied] = useState(false)
const short = `${wallet.slice(0, 6)}...${wallet.slice(-4)}`
const tweetText = encodeURIComponent(
`🔥 Wallet ${short} returned after ${daysInactive}d of inactivity — rescued by @torqueprotocol FlowState\n\n` +
`Campaign: ${campaignName}\n` +
`FlowState detected the churn risk, fired the incentive, and brought them back. Autonomous DeFi retention works.\n\n` +
`#Solana #DeFi #Torque`
)
const tweetUrl = `https://twitter.com/intent/tweet?text=${tweetText}`
const handleCopyLink = () => {
navigator.clipboard.writeText(`https://github.com/MUTHUKUMARAN-K-1/flowstate`)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
<div className="w-full max-w-sm mx-4">
{/* The shareable card */}
<div className="rounded-2xl overflow-hidden shadow-2xl border border-trading-up/30">
{/* Card header — gradient */}
<div className="bg-gradient-to-br from-[#0a1628] via-[#0d1f35] to-[#0a2010] p-6 relative">
<div className="absolute inset-0 opacity-20" style={{backgroundImage:'radial-gradient(circle at 30% 50%, #0ecb81 0%, transparent 60%), radial-gradient(circle at 80% 20%, #FCD535 0%, transparent 50%)'}} />
<div className="relative">
<div className="flex items-center gap-2 mb-4">
<div className="w-6 h-6 rounded bg-brand-yellow flex items-center justify-center">
<span className="text-ink text-[10px] font-black">FS</span>
</div>
<span className="text-caption text-brand-yellow font-bold tracking-wider uppercase">FlowState × Torque</span>
</div>
<div className="text-[40px] mb-2">🔥</div>
<h2 className="text-display-sm text-white font-bold leading-tight">Wallet Recovered</h2>
<p className="text-body-sm text-trading-up/80 mt-1">Churn prevented. User retained.</p>
</div>
</div>
{/* Card body */}
<div className="bg-[#0b1018] p-5 space-y-4">
<div className="grid grid-cols-3 gap-3">
<div className="rounded-lg bg-surface-elevated p-3 text-center">
<p className="text-caption text-muted">Wallet</p>
<p className="font-mono text-body-sm text-[#eaecef] mt-0.5">{short}</p>
</div>
<div className="rounded-lg bg-trading-up/10 border border-trading-up/20 p-3 text-center">
<p className="text-caption text-trading-up/70">Back After</p>
<p className="font-mono text-title-sm text-trading-up mt-0.5">{daysInactive}d</p>
</div>
<div className="rounded-lg bg-brand-yellow/10 border border-brand-yellow/20 p-3 text-center">
<p className="text-caption text-brand-yellow/70">Saves</p>
<p className="font-mono text-title-sm text-brand-yellow mt-0.5">{savedCount}×</p>
</div>
</div>
<div className="rounded-lg bg-surface-elevated p-3">
<p className="text-caption text-muted mb-1">Triggered by</p>
<p className="text-body-sm text-[#eaecef] font-medium">{campaignName}</p>
<p className="text-caption text-muted mt-1">via Torque Protocol · FlowState AI Engine</p>
</div>
<div className="flex gap-2">
<a
href={tweetUrl}
target="_blank"
rel="noopener noreferrer"
className="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg bg-white/5 border border-white/20 text-white text-button font-semibold hover:bg-white/10 transition"
>
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.259 5.631zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
Share on X
</a>
<button
onClick={handleCopyLink}
className="flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-surface-elevated border border-hairline-dark text-muted hover:text-[#eaecef] transition text-button"
>
{copied ? <CheckCircle2 className="w-4 h-4 text-trading-up" /> : <Share2 className="w-4 h-4" />}
{copied ? 'Copied' : 'Link'}
</button>
</div>
</div>
</div>
<button
onClick={onClose}
className="mt-3 w-full py-2 rounded-lg border border-hairline-dark text-muted hover:text-[#eaecef] text-caption transition"
>
<X className="w-3.5 h-3.5 inline mr-1.5" />Close
</button>
</div>
</div>
)
}
|