Using the AI Copilot

async function handleGetStrategy() {
  // 1. Gather your portfolio data
  const result = await getAIStrategy({
    address,
    stxBalance,
    sbtcBalance,
    totalUSD,
    riskProfile,
    protocols,
    strategyCount,
    txCount,
  });
  
  // 2. Generate personalized strategy with Gemini
  setStrategy(result);
  
  // 3. Anchor strategy hash to Bitcoin
  const hashBuffer = await crypto.subtle.digest('SHA-256', encoder.encode(result));
  const hashHex = Array.from(new Uint8Array(hashBuffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
  
  const txId = await anchorStrategy(hashHex, topProtocol);
  setAnchorTxId(txId);
}

{
  label: 'HODLer',
  color: '#22c55e',  // Green
  risk: 'Low'
}

{
  label: 'Builder',
  color: '#f59e0b',  // Orange
  risk: 'Medium'
}

{
  label: 'Degen',
  color: '#ef4444',  // Red
  risk: 'High'
}

<div className="grid grid-cols-3 gap-2">
  {RISK_OPTIONS.map(r => (
    <button
      onClick={() => setRiskProfile(r)}
      className="py-1.5 px-2 rounded-lg text-xs font-bold"
      style={{
        background: active ? cfg.bg : 'transparent',
        border: `1px solid ${active ? cfg.border : s('border')}`,
        color: active ? cfg.color : s('muted'),
      }}
    >
      {cfg.label}
    </button>
  ))}
</div>

function parseStrategy(text) {
  const sections = [];
  const SECTION_EMOJIS = ['👋', '🎯', '📖', '📊', '💰', '🛡️', '🚀', '⚡', '🔁', '⚠️', '💡', '✅'];
  
  // Parses AI output into structured sections
  for (const line of lines) {
    const startsSection = SECTION_EMOJIS.some(e => line.trim().startsWith(e));
    if (startsSection) {
      sections.push({ heading: line, body: [] });
    }
  }
  return sections;
}

function getSectionColor(heading, isDark) {
  if (heading.startsWith('⚠️') || heading.startsWith('🛡️')) 
    return '#f59e0b';  // Warning/Risk - Orange
  if (heading.startsWith('🚀') || heading.startsWith('✅')) 
    return '#22c55e';  // Success/Action - Green
  if (heading.startsWith('💰') || heading.startsWith('📊')) 
    return '#F7931A';  // Financial - Bitcoin Orange
  if (heading.startsWith('⚡') || heading.startsWith('🔁')) 
    return '#3B82F6';  // Optimization - Blue
}

const isNewUser = strategyCount === 0 && txCount < 3;

if (isNewUser) {
  // Format includes:
  // 👋 WELCOME TO BITCOIN DEFI
  // 🎯 YOUR FIRST STRATEGY: [Simple recommendation]
  // 📖 WHAT THIS MEANS: [Plain English explanation]
  // 💰 WHAT YOU COULD EARN: [Specific projection]
  // 🛡️ IS IT SAFE?: [Risk explanation]
  // 🚀 HOW TO START: [Step by step]
}

const isExperienced = strategyCount > 5 || txCount > 20;

if (isExperienced) {
  // Format includes:
  // 🎯 STRATEGY: [Bold recommendation]
  // 📊 ALLOCATION: [Multi-protocol % breakdown]
  // 💰 PROJECTED RETURN: [Specific APY and USD return]
  // ⚡ OPTIMIZATION: [Advanced yield tactics]
  // ⚠️ KEY RISK: [Critical risk factors]
  // 🚀 EXECUTE NOW: [Immediate action]
}

const prompt = `You are Staxiq, the smartest Bitcoin DeFi copilot on Stacks.

${userContext}  // Adapts to new vs. experienced users

USER PORTFOLIO:
- Wallet: ${address}
- STX Balance: ${stxBalance} STX
- sBTC Balance: ${sbtcBalance} sBTC
- Total Value: $${totalUSD} USD
- Risk Profile: ${riskProfile}
- Strategies Generated: ${strategyCount}
- Transaction History: ${txCount} transactions

AVAILABLE PROTOCOLS ON STACKS:
${protocolSummary}  // Live APY, TVL, risk data

INSTRUCTIONS:
${formatInstructions}  // Ensures consistent output format
`;

const protocolSummary = protocols
  .map(p => `- ${p.name}: ${p.type}, ${p.apy}% APY, ${p.risk} risk, accepts ${p.asset}, TVL ${p.tvl}`)
  .join('\n');

// Example output:
// - Zest Protocol: Lending, 8.2% APY, Low risk, accepts sBTC, TVL $48.2M
// - ALEX Lab: DEX, 15.1% APY, Medium risk, accepts sBTC/STX, TVL $124.5M

// 1. Hash the strategy text
const encoder = new TextEncoder();
const hashBuffer = await crypto.subtle.digest('SHA-256', encoder.encode(result));
const hashHex = Array.from(new Uint8Array(hashBuffer))
  .map(b => b.toString(16).padStart(2, '0'))
  .join('')
  .slice(0, 64);

// 2. Anchor hash to Bitcoin via Stacks
const txId = await anchorStrategy(hashHex, topProtocol);

// 3. Display transaction on Stacks Explorer
setAnchorTxId(txId);
setAnchored(true);

{anchored && anchorTxId && (
  <div style={{ background: '#F7931A0a', border: '1px solid #F7931A33' }}>
    <span>⛓️ Strategy anchored on Bitcoin via Stacks</span>
    <a
      href={`https://explorer.hiro.so/txid/${anchorTxId}?chain=testnet`}
      target="_blank"
    >
      {anchorTxId.slice(0, 10)}…{anchorTxId.slice(-6)} ↗
    </a>
  </div>
)}

useEffect(() => {
  if (address) {
    getStrategyCount(address).then(c => setStrategyCount(Number(c) || 0));
  }
}, [address]);

{strategyCount > 0 && (
  <div style={{ background: '#F7931A11', color: '#F7931A' }}>
    ⛓️ {strategyCount} anchored on Bitcoin
  </div>
)}

<button onClick={handleGetStrategy}>
  {strategy ? 'Regenerate Strategy' : '🎯 Get My Personalized Strategy'}
</button>

useEffect(() => {
  if (demoStrategy) {
    setStrategy(demoStrategy);
    setSections(parseStrategy(demoStrategy));
  }
}, [demoStrategy]);

async function handleGetStrategy() {
  if (demoStrategy) {
    // In demo mode, just re-parse the demo strategy
    setSections(parseStrategy(demoStrategy));
    return;
  }
  // ... normal flow
}

try {
  const txId = await anchorStrategy(hashHex, topProtocol);
  setAnchorTxId(txId);
  setAnchored(true);
} catch (anchorErr) {
  console.warn('Anchoring failed silently:', anchorErr);
  // Strategy still usable, just not anchored
}

if (!connected) {
  return (
    <div>
      <p>Connect your wallet to get a personalized Bitcoin DeFi strategy</p>
    </div>
  );
}