Components

1"use client"
2import { useState } from "react"
3import type { Buff, PlanTier } from "buff-protocol-sdk"
4
5interface BuffToggleProps {
6  buff: Buff | null
7  onToggle: (enabled: boolean) => void
8  onPlanChange: (plan: PlanTier) => void
9  defaultPlan?: PlanTier
10  investAsset?: string
11}
12
13export function BuffToggle({
14  buff, onToggle, onPlanChange,
15  defaultPlan = "sprout", investAsset = "BTC"
16}: BuffToggleProps) {
17  const [enabled, setEnabled] = useState(true)
18  const [plan, setPlan] = useState(defaultPlan)
19
20  const plans = [
21    { key: "seed", label: "Seed", roundTo: 0.05 },
22    { key: "sprout", label: "Sprout", roundTo: 0.10 },
23    { key: "tree", label: "Tree", roundTo: 0.50 },
24    { key: "forest", label: "Forest", roundTo: 1.00 },
25  ]
26
27  const toggle = () => {
28    const next = !enabled
29    setEnabled(next)
30    onToggle(next)
31  }
32
33  const changePlan = (key: string) => {
34    setPlan(key as PlanTier)
35    onPlanChange(key as PlanTier)
36    if (buff) buff.setPlan(key as any)
37  }
38
39  return (
40    <div className="rounded-xl border p-4 bg-card">
41      <div className="flex items-center justify-between mb-3">
42        <div>
43          <div className="text-sm font-medium">Buff Round-Up</div>
44          <div className="text-xs text-muted-foreground">
45            Auto-invest into {investAsset}
46          </div>
47        </div>
48        <button onClick={toggle} className={`w-12 h-7 rounded-full
49          ${enabled ? "bg-amber-500" : "bg-gray-600"}`}>
50          <div className={`w-5 h-5 rounded-full bg-white transform
51            ${enabled ? "translate-x-[22px]" : "translate-x-[3px]"}`} />
52        </button>
53      </div>
54      {enabled && (
55        <div className="grid grid-cols-4 gap-1">
56          {plans.map((p) => (
57            <button key={p.key}
58              onClick={() => changePlan(p.key)}
59              className={`text-xs py-2 rounded-lg font-medium
60                ${plan === p.key
61                  ? "bg-amber-500/10 text-amber-500 border border-amber-500/20"
62                  : "text-muted-foreground hover:bg-accent"
63                }`}>
64              {p.label}
65            </button>
66          ))}
67        </div>
68      )}
69    </div>
70  )
71}

1"use client"
2import type { RoundUpBreakdown } from "buff-protocol-sdk"
3
4interface RoundUpPreviewProps {
5  breakdown: RoundUpBreakdown | null
6  asset: string
7}
8
9export function RoundUpPreview({ breakdown, asset }: RoundUpPreviewProps) {
10  if (!breakdown || breakdown.skipped) {
11    return (
12      <div className="rounded-xl border p-4 bg-card text-center">
13        <p className="text-sm text-muted-foreground">No round-up needed</p>
14      </div>
15    )
16  }
17
18  return (
19    <div className="rounded-xl border p-4 bg-card">
20      <div className="flex justify-between text-sm mb-2">
21        <span>Tx value</span>
22        <span>${breakdown.txValueUsd.toFixed(2)}</span>
23      </div>
24      <div className="flex justify-between text-sm mb-2">
25        <span>Rounded to</span>
26        <span>${breakdown.roundedToUsd.toFixed(2)}</span>
27      </div>
28      <hr className="my-2" />
29      <div className="flex justify-between font-semibold text-amber-500">
30        <span>Investing</span>
31        <span>${breakdown.roundUpUsd.toFixed(2)} → {asset}</span>
32      </div>
33      <div className="flex justify-between text-xs text-muted-foreground mt-1">
34        <span>Buff fee ({breakdown.buffFeePercent}%)</span>
35        <span>${breakdown.buffFeeUsd.toFixed(4)}</span>
36      </div>
37    </div>
38  )
39}
40
41// Usage:
42// const breakdown = await buff.calculateRoundUp(txValueUsd)
43// <RoundUpPreview breakdown={breakdown} asset="BTC" />

1"use client"
2import { useState, useEffect } from "react"
3import type { Buff, Portfolio } from "buff-protocol-sdk"
4
5interface BuffPortfolioProps {
6  buff: Buff | null
7  walletAddress: string   // Buff wallet address (from deriveWallet)
8  refreshInterval?: number // ms, default 60000
9}
10
11export function BuffPortfolio({ buff, walletAddress, refreshInterval = 60000 }: BuffPortfolioProps) {
12  const [portfolio, setPortfolio] = useState<Portfolio | null>(null)
13
14  useEffect(() => {
15    if (!buff || !walletAddress) return
16    const fetch = () => buff.getPortfolio(walletAddress).then(setPortfolio)
17    fetch()
18    const interval = setInterval(fetch, refreshInterval)
19    return () => clearInterval(interval)
20  }, [buff, walletAddress, refreshInterval])
21
22  if (!portfolio) return <div className="animate-pulse h-40 rounded-xl bg-card" />
23
24  const total = portfolio.totalUsd
25
26  return (
27    <div className="rounded-xl border p-5 bg-card">
28      <div className="text-2xl font-bold mb-1">${total.toFixed(2)}</div>
29      <div className="text-xs text-muted-foreground mb-4">
30        {portfolio.pendingSol.toFixed(4)} SOL pending
31        ({" "}
32        ${portfolio.pendingUsd.toFixed(2)}
33        {" "})
34      </div>
35      {portfolio.balances.map((b) => (
36        <div key={b.asset} className="flex justify-between text-sm py-1.5 border-t">
37          <span className="font-medium">{b.asset}</span>
38          <span>${b.usdValue.toFixed(2)}</span>
39        </div>
40      ))}
41    </div>
42  )
43}

1"use client"
2import { useState, useEffect } from "react"
3import type { Buff } from "buff-protocol-sdk"
4
5interface BuffStatsProps {
6  buff: Buff | null
7  walletAddress: string
8}
9
10export function BuffStats({ buff, walletAddress }: BuffStatsProps) {
11  const [portfolio, setPortfolio] = useState<any>(null)
12  const [plans, setPlans] = useState<any[]>([])
13
14  useEffect(() => {
15    if (!buff || !walletAddress) return
16    buff.getPortfolio(walletAddress).then(setPortfolio)
17    buff.getPlans().then(setPlans)
18  }, [buff, walletAddress])
19
20  if (!portfolio) return null
21
22  return (
23    <div className="rounded-xl border p-5 bg-card">
24      <div className="grid grid-cols-2 gap-4">
25        <Stat label="Total value" value={`$${portfolio.totalUsd.toFixed(2)}`} />
26        <Stat label="Pending SOL" value={portfolio.pendingSol.toFixed(4)} />
27        <Stat label="Assets" value={portfolio.balances.length.toString()} />
28        <Stat label="Plans available" value={plans.length.toString()} />
29      </div>
30    </div>
31  )
32}
33
34function Stat({ label, value }: { label: string; value: string }) {
35  return (
36    <div>
37      <div className="text-lg font-bold">{value}</div>
38      <div className="text-xs text-muted-foreground">{label}</div>
39    </div>
40  )
41}