\n {/* Header */}\n

\n XRPL EVM Compensation Summary\n

\n October 2026 - September 2028\n

\n\n {/* Scenario Selector */}\n

\n setScenario(\"low\")}\n className={`p-5 rounded-xl text-left transition-all ${\n scenario === \"low\"\n ? \"bg-blue-600 text-white shadow-lg scale-[1.02]\"\n : \"bg-blue-100 text-blue-800 hover:bg-blue-200\"\n }`}\n >\n

\n $1B TVL Target (Conservative)\n

â€¢ 2-Year Net Spend: $71.7M

â€¢ Year 1: $51.2M | Year 2: $20.5M

\n \n setScenario(\"medium\")}\n className={`p-5 rounded-xl text-left transition-all ${\n scenario === \"medium\"\n ? \"bg-blue-600 text-white shadow-lg scale-[1.02]\"\n : \"bg-blue-100 text-blue-800 hover:bg-blue-200\"\n }`}\n >\n

$2B TVL Target (Base Case)

â€¢ 2-Year Net Spend: $138.0M

â€¢ Year 1: $102.4M | Year 2: $35.6M

\n \n setScenario(\"high\")}\n className={`p-5 rounded-xl text-left transition-all ${\n scenario === \"high\"\n ? \"bg-blue-600 text-white shadow-lg scale-[1.02]\"\n : \"bg-blue-100 text-blue-800 hover:bg-blue-200\"\n }`}\n >\n

$4B TVL Target (Aggressive)

â€¢ 2-Year Net Spend: $229.3M

â€¢ Year 1: $163.8M | Year 2: $65.5M

\n \n

\n\n {/* Model Parameters */}\n

\n {/* Performance Selector */}\n

\n TVL Performance vs Target\n

\n setPerformance(\"underperform\")}\n className={`flex-1 py-3 px-4 transition-all border-r border-gray-200 ${\n performance === \"underperform\"\n ? \"bg-indigo-600 text-white\"\n : \"bg-gray-50 text-gray-700 hover:bg-gray-100\"\n }`}\n >\n \n Underperform\n

\n \n 75% of target\n

\n \n Peak: ${(current.peakTvl * 0.75 / 1000).toFixed(2)}B\n

\n \n setPerformance(\"perform\")}\n className={`flex-1 py-3 px-4 transition-all border-r border-gray-200 ${\n performance === \"perform\"\n ? \"bg-indigo-600 text-white\"\n : \"bg-gray-50 text-gray-700 hover:bg-gray-100\"\n }`}\n >\n \n Perform\n

\n \n 100% of target\n

\n \n Peak: ${(current.peakTvl / 1000).toFixed(2)}B\n \n \n setPerformance(\"outperform\")}\n className={`flex-1 py-3 px-4 transition-all ${\n performance === \"outperform\"\n ? \"bg-indigo-600 text-white\"\n : \"bg-gray-50 text-gray-700 hover:bg-gray-100\"\n }`}\n >\n \n Outperform\n \n \n 125% of target\n \n \n Peak: ${(current.peakTvl * 1.25 / 1000).toFixed(2)}B\n \n \n \n \n\n {/* Composition and Firelight Row */}\n

\n {/* Composition Checkbox */}\n

\n Composition Requirement\n

\n \n setCompositionMet(e.target.checked)}\n className=\"w-5 h-5 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500\"\n />\n

\n ≥60% XRP + RLUSD\n

\n {compositionMet\n ? \"Met → 1.0× multiplier\"\n : \"Not met → 0.75× multiplier\"}\n

\n \n {compositionMet ? \"1.0×\" : \"0.75×\"}\n

\n \n

\n\n {/* Firelight TVL Slider */}\n

\n Firelight TVL Contribution\n

\n ${firelightTvl}M\n

\n setFirelightTvl(parseInt(e.target.value))}\n className=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600\"\n />\n

\n $0\n $250M\n $500M\n

\n \n \n\n {/* Total Compensation - Hero Card */}\n

\n Total Compensation\n

\n ${totalCompensation.toFixed(2)}M\n

Over 24-month program

\n\n

\n ${projectFees.toFixed(2)}M\n

Project Fees

\n ${distributionFees.toFixed(2)}M\n

Distribution (7%)

\n ${bonusCompensation.toFixed(2)}M\n

Bonus Comp

\n\n {/* Key Metrics Row */}\n

Program Spend

\n ${totalSpend.toFixed(1)}M\n

\n Peak TVL{\" \"}\n {performance !== \"perform\" && `(${Math.round(perfMult * 100)}%)`}\n

\n ${(adjustedPeakTvl / 1000).toFixed(2)}B\n

\n Retained TVL{\" \"}\n {performance !== \"perform\" && `(${Math.round(perfMult * 100)}%)`}\n

\n ${(adjustedRetainedTvl / 1000).toFixed(2)}B\n

Comp / Spend

\n {(totalCompensation / totalSpend * 100).toFixed(1)}%\n

\n\n {/* Calendar Year Breakdown */}\n

\n {calendarYears.map((cy, idx) => (\n \n \n {cy.year}\n

{cy.months}

\n Project Fees\n \n ${cy.projectFees.toFixed(2)}M\n \n

\n Distribution\n ${cy.distFees.toFixed(2)}M\n

\n Bonus\n ${cy.bonus.toFixed(2)}M\n

\n Total\n ${cy.total.toFixed(2)}M\n

\n \n ))}\n \n\n {/* Quarterly Earnings Chart */}\n

\n Quarterly Earnings\n

\n \n \n \n \n `$${v}M`} />\n [`$${value.toFixed(2)}M`, name]}\n labelFormatter={(label) => label}\n />\n \n \n \n \n \n \n

\n\n {/* Period Breakdown Table */}\n

\n Period-by-Period Breakdown\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {periodData.map((row, idx) => (\n = 1.0 && row.effMult >= 1.0\n ? \"bg-green-50\"\n : \"\"\n }`}\n >\n \n \n \n \n \n \n \n \n ))}\n \n \n \n \n \n \n \n

Period	Calendar	TVL	Spend	Efficiency	TVLÃ—EffÃ—Comp	Bonus
P{row.period}	\n {row.calendar}\n	\n ${row.tvl}M\n	\n ${row.periodSpend.toFixed(2)}M\n	\n {row.efficiency.toFixed(2)}%\n	\n {row.tvlMult}Ã—{row.effMult}Ã—{row.compMult}\n	\n ${row.bonus.toFixed(3)}M\n
TOTAL	\n ${totalSpend.toFixed(2)}M\n		\n ${bonusCompensation.toFixed(2)}M\n

\n\n {/* Multiplier Reference - Compact */}\n

\n TVL Multiplier{\" \"}\n \n ({current.label.split(\" \")[0]})\n \n

\n \n {\"<\"}${(1000 * current.tvlTarget / 2 / 1000).toFixed(1)}B\n \n 0x\n

\n \n ${(1000 * current.tvlTarget / 2 / 1000).toFixed(\n 1,\n )}B-${(1500 * current.tvlTarget / 2 / 1000).toFixed(2)}B\n \n 0.5x\n

\n \n ${(1500 * current.tvlTarget / 2 / 1000).toFixed(\n 2,\n )}B-${(1750 * current.tvlTarget / 2 / 1000).toFixed(2)}B\n \n 0.75x\n

\n \n ${(1750 * current.tvlTarget / 2 / 1000).toFixed(\n 2,\n )}B-${(2250 * current.tvlTarget / 2 / 1000).toFixed(2)}B\n \n 1.0x\n

\n \n ${(2250 * current.tvlTarget / 2 / 1000).toFixed(\n 2,\n )}B-${(2500 * current.tvlTarget / 2 / 1000).toFixed(2)}B\n \n 1.25x\n

\n \n â‰¥${(2500 * current.tvlTarget / 2 / 1000).toFixed(2)}B\n \n 1.5x\n

\n Efficiency Multiplier\n

\n {\"<\"}4%\n 1.5x\n

\n 4%-6%\n 1.25x\n

\n 6%-8%\n 1.0x\n

\n 8%-10%\n 0.75x\n

\n 10%-12%\n 0.5x\n

\n â‰¥12%\n 0x\n

\n Composition Multiplier\n

\n {\"<\"}60% XRP+RLUSD\n 0.75x\n

\n â‰¥60% XRP+RLUSD\n 1.0x\n

\n Base case assumes 60% composition\n

\n\n {/* Key Assumptions - Compact */}\n

\n Key Assumptions\n

\n Program:{\" \"}\n 24 months (Oct 2026 - Sep 2028)\n

\n Budget: $138M incentives\n

\n Peak TVL: $2.0B (Month 8)\n

\n Retention: 70% ($1.4B)\n

\n Project Fees:{\" \"}\n $5M ($2M+$1M+$2M)\n

\n Distribution: 7% of spend\n

\n Bonus Target:{\" \"}\n $10M ($1M Ã— 10)\n

\n Max Bonus: $15M (1.5x cap)\n

\n \n \n );\n};\n\nexport default CompensationModelLite;","label","children",[96,78],"contentHash","bc14463f8c4d53c07103063da2fe7d024f13cf15aec34415e236833753c4eaab","frontend","37ad4e0c-f53e-11ef-940f-569c3dd06744","5b1c65b6-f52b-11ef-bc72-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",24,["D",1740683304259],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[96,78],"427c45f5341ba32dd31e98a21e648a32637bfca120ebc165e98f9be62706370c",["D",1767979413027],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","019ba3c1-df4f-766b-b203-fce1c2ce8fc9","pinnedFileId","019ba3c8-ee68-7669-b6d2-57c45c414f5e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"019ba3c1-df4f-766b-b204-014f53697f73","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_146":142},"org",{"_11":12,"_140":-5,"_141":142,"_112":113,"_143":144,"_145":48},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zODF0WE1raGY0WVY2bVZNYzk3bGdmUlBTZ2UifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":259,"_46":-5,"_107":48,"_49":50,"_108":50,"_109":110,"_111":-5,"_112":113,"_114":115,"_116":26,"_117":-5,"_118":-5,"_119":120,"_53":121,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_135":260,"_137":261,"_139":262,"_47":48},"tree",[205,212,213],"files",[205,206,207,208,209,210,211,212,213],"counts",{"_195":120,"_196":20,"_197":120,"_198":199,"_200":201},"contents",[176,177,178],"file","upstreamProject",{"_32":39,"_13":56,"_109":110,"_111":173,"_49":50,"_135":174},"upstreamBranch",{"_32":33,"_34":171,"_36":172,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789710578&sig=904ec56a06977b50ea38e45a4c8af5fcafd576951c478b2ec36e6e2f59f3293a",{"_11":52,"_146":175},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789710578&sig=f08353e4cd178d947e3b5364fc42f7e7ca9866cdccda372d2b041b8710439454",{"_32":191,"_13":96,"_79":82,"_81":-5,"_83":58,"_84":20,"_85":26,"_34":192,"_40":120,"_87":193,"_89":-5,"_66":48,"_91":-5,"_71":194},{"_32":185,"_13":186,"_79":187,"_81":-5,"_83":58,"_84":20,"_85":26,"_34":188,"_40":120,"_87":158,"_89":189,"_66":48,"_91":-5,"_71":190},{"_32":179,"_13":180,"_79":115,"_81":-5,"_83":58,"_84":20,"_85":26,"_34":181,"_40":120,"_87":182,"_89":183,"_66":48,"_91":-5,"_71":184},"ec644ec4-ed7f-11f0-8e7c-42dde27851f2","index.ts",["D",1767979413027],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[180],"ec643f92-ed7f-11f0-8e7c-42dde27851f2","README.md","019ba3c8-ee68-7669-b6d2-53d4333f9a63",["D",1767979413027],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the\ntop-right.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest\nreading the files in this order:\n\n[`index.ts`](index.ts) -> [`/frontend/index.html`](/frontend/index.html) ->\n[`/frontend/index.tsx`](/frontend/index.tsx) ->\n[`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.",[186],"ec643d1c-ed7f-11f0-8e7c-42dde27851f2",["D",1767979413027],"directory",[96],"pulls","branches","forks","envVars",{"_202":120,"_204":120},"connections",{"_202":120,"_203":120},"count","unfilledCount","emptyCount",{"_32":191,"_13":96,"_79":82,"_81":-5,"_83":58,"_84":20,"_85":26,"_34":256,"_40":120,"_87":193,"_89":-5,"_66":48,"_91":-5,"_92":257,"_71":258},{"_32":252,"_13":251,"_79":246,"_81":82,"_83":58,"_84":20,"_85":26,"_34":253,"_40":120,"_87":193,"_89":-5,"_66":48,"_91":-5,"_92":254,"_71":255},{"_32":243,"_13":244,"_79":245,"_81":246,"_83":58,"_84":20,"_85":26,"_34":247,"_40":120,"_87":88,"_89":248,"_66":48,"_91":-5,"_92":249,"_71":250},{"_32":236,"_13":237,"_79":238,"_81":82,"_83":58,"_84":20,"_85":26,"_34":239,"_40":120,"_87":158,"_89":240,"_66":48,"_91":-5,"_92":241,"_71":242},{"_32":229,"_13":230,"_79":231,"_81":82,"_83":58,"_84":20,"_85":26,"_34":232,"_40":120,"_87":158,"_89":233,"_66":48,"_91":-5,"_92":234,"_71":235},{"_32":77,"_13":78,"_79":80,"_81":82,"_83":58,"_84":57,"_85":26,"_34":86,"_40":20,"_87":88,"_89":90,"_66":48,"_91":-5,"_92":227,"_71":228},{"_32":220,"_13":221,"_79":222,"_81":82,"_83":58,"_84":20,"_85":26,"_34":223,"_40":120,"_87":158,"_89":224,"_66":48,"_91":-5,"_92":225,"_71":226},{"_32":185,"_13":186,"_79":187,"_81":-5,"_83":58,"_84":20,"_85":26,"_34":217,"_40":120,"_87":158,"_89":189,"_66":48,"_91":-5,"_92":218,"_71":219},{"_32":179,"_13":180,"_79":115,"_81":-5,"_83":58,"_84":20,"_85":26,"_34":214,"_40":120,"_87":182,"_89":183,"_66":48,"_91":-5,"_92":215,"_71":216},["D",1767979413027],[],[180],["D",1767979413027],[],[186],"ec64390c-ed7f-11f0-8e7c-42dde27851f2","style.css","019ba3c8-ee68-7669-b6d2-496a5c53b16b",["D",1767979413027],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[96,221],[],[96,78],"ec642f0c-ed7f-11f0-8e7c-42dde27851f2","index.html","019ba3c8-ee68-7669-b6d2-43ceb8dfccb3",["D",1767979413027],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[96,230],"ec642b10-ed7f-11f0-8e7c-42dde27851f2","favicon.svg","019ba3c8-ee68-7669-b6d2-3f13f52952e2",["D",1767979413027],"\n",[],[96,237],"ec6406d0-ed7f-11f0-8e7c-42dde27851f2","App.tsx","019ba3c8-ee68-7669-b6d2-34d2bd669f98","019ba3c8-ee68-7669-b6d2-3a3c68b97b2e",["D",1767979413027],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[96,251,244],"components","ec642926-ed7f-11f0-8e7c-42dde27851f2",["D",1767979413027],[207],[96,251],["D",1767979413027],[206,208,209,210,211],[96],["D",1767979413027],{"_11":12,"_146":142},{"_11":12,"_140":-5,"_141":142,"_112":113,"_143":144,"_145":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_135":-5,"_168":296,"_297":298,"_299":300,"_301":48,"_302":48,"_303":48,"_304":26,"_305":-5,"_306":-7,"_307":-7,"_308":120,"_309":48,"_310":48,"_311":-5,"_312":48,"_313":48,"_314":48,"_315":-5},"ENV",{"_267":268,"_269":270,"_271":16,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Compare

Mergebobcat5000/mainintotemplates/main

frontend/index.tsx+921-1