[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_166":167,"_168":169},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_19":20,"_17":18,"_124":-5,"_21":125,"_23":126,"_127":128,"_129":130,"_27":131,"_25":132,"_133":134,"_135":136,"_137":49,"_138":139,"_140":82,"_141":-5,"_142":-5,"_143":144},"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5,"_32":-5,"_33":-5},"handle","vawogbemi","name","forbearingAmethystToad","branchName","main","version",67,"path","main.tsx","project",{"_34":79,"_13":14,"_36":80,"_47":-5,"_81":82,"_50":51,"_83":51,"_84":-5,"_85":-5,"_86":87,"_88":59,"_89":82,"_90":-5,"_91":-5,"_92":93,"_53":54,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":108,"_109":110,"_111":112,"_48":49},"tree",[74],"file",{"_34":57,"_13":20,"_58":59,"_60":-5,"_61":62,"_63":18,"_64":49,"_36":65,"_17":66,"_67":68,"_69":70,"_71":49,"_72":-5,"_19":73},"contents",[],"upstream",{"_34":35,"_36":37,"_38":39,"_13":16,"_40":41,"_17":42,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":12,"_53":54,"_55":56},"pull","ahead","behind","id","aa549008-26dc-11f0-a5b3-569c3dd06744","createdAt",["D",1746138964077],"updatedAt",["D",1731386335193],"projectId","aa54409e-26dc-11f0-a5b3-569c3dd06744",111,"forkedBranchId","forkedBranchVersion","lockfileKey","1769146236347-esm.town_v_vawogbemi_StripeCheckoutDemo@111-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","4bf34fc5-775b-4490-bd5b-9599385e237f","projectName","StripeCheckoutDemo","09c553f6-26dd-11f0-a5b3-569c3dd06744","fileId","0807452e-26dd-11f0-a5b3-569c3dd06744","parentId","branchId","08039104-26dd-11f0-a5b3-569c3dd06744","branchVersion","latest",["D",1730505928171],66,"fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport confetti from \"https://esm.sh/canvas-confetti\";\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport DatePicker from \"https://esm.sh/react-datepicker\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport Stripe from \"https://esm.sh/stripe\";\n\nconst datePickerStyles = `\n .react-datepicker {\n font-family: Arial, sans-serif;\n border: 1px solid #aeaeae;\n border-radius: 0.3rem;\n display: inline-block;\n position: relative;\n width: 100%;\n background-color: white;\n }\n .react-datepicker__header {\n text-align: center;\n background-color: #f0f0f0;\n border-bottom: 1px solid #aeaeae;\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n padding-top: 8px;\n position: relative;\n }\n .react-datepicker__current-month {\n margin-top: 0;\n color: #000;\n font-weight: bold;\n font-size: 1rem;\n }\n .react-datepicker__day-names, .react-datepicker__week {\n display: flex;\n justify-content: space-around;\n }\n .react-datepicker__day-name, .react-datepicker__day {\n color: #000;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n }\n .react-datepicker__day:hover {\n background-color: #f0f0f0;\n }\n .react-datepicker__day--selected {\n background-color: #216ba5;\n color: #fff;\n }\n .react-datepicker__day--today {\n font-weight: bold;\n }\n .react-datepicker__navigation {\n display: none;\n }\n .custom-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px;\n background-color: #f0f0f0;\n border-bottom: 1px solid #aeaeae;\n }\n .custom-header button {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 1.2rem;\n padding: 0 10px;\n color: #216ba5;\n }\n .custom-header button:hover {\n color: #1d5d90;\n }\n .custom-header__current-month {\n font-weight: bold;\n font-size: 1rem;\n }\n`;\n\nfunction Instructions() {\n return (\n

How it works

Choose a tip amount or enter a custom amount
Enter your name and an optional comment
Click \"Send Tip\" to complete your payment
Your tip will be added to the leaderboard

\n );\n}\n\nfunction TipList({ tips, selectedDate, sortOrder, setSortOrder }) {\n const filteredTips = tips.filter((tip) => {\n const tipDate = new Date(tip.timestamp);\n return (\n tipDate.getFullYear() === selectedDate.getFullYear()\n && tipDate.getMonth() === selectedDate.getMonth()\n && tipDate.getDate() === selectedDate.getDate()\n );\n });\n\n const sortedTips = [...filteredTips].sort((a, b) => {\n if (sortOrder === 'highest') {\n return b.amount - a.amount;\n } else {\n return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();\n }\n });\n\n return (\n

Leaderboard

\n setSortOrder(e.target.value)}\n className=\"px-2 py-1 border border-gray-300 rounded-lg\"\n >\n \n \n \n

\n {sortedTips.length === 0\n ?

No tips for this date.

\n : (\n

\n
{tip.name}
\n
${tip.amount}
\n
{tip.comment}
\n
{new Date(tip.timestamp).toLocaleString()}
\n

\n )}\n

\n );\n}\n\nfunction DateSelector({ selectedDate, setSelectedDate }) {\n const [isCalendarOpen, setIsCalendarOpen] = useState(false);\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n\n const formatDate = (date) => {\n return date.toLocaleDateString(\"en-US\", { month: \"long\", day: \"numeric\", year: \"numeric\" });\n };\n\n const handlePrevDay = () => {\n const newDate = new Date(selectedDate);\n newDate.setDate(newDate.getDate() - 1);\n setSelectedDate(newDate);\n };\n\n const handleNextDay = () => {\n const newDate = new Date(selectedDate);\n newDate.setDate(newDate.getDate() + 1);\n setSelectedDate(newDate);\n };\n\n const isDateInFuture = selectedDate > today;\n\n const CustomHeader = ({\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n }) => (\n

\n \n \n {date.toLocaleString(\"default\", { month: \"long\", year: \"numeric\" })}\n \n \n

\n );\n\n return (\n

\n \n ←\n \n setIsCalendarOpen(!isCalendarOpen)}\n className=\"text-lg font-semibold\"\n >\n {formatDate(selectedDate)}\n \n \n →\n \n

\n {isCalendarOpen && (\n

\n {\n setSelectedDate(date);\n setIsCalendarOpen(false);\n }}\n inline\n maxDate={today}\n calendarClassName=\"w-full\"\n renderCustomHeader={CustomHeader}\n showMonthYearPicker={false}\n />\n

\n )}\n

\n );\n}\n\nfunction App({ initialTips }) {\n const [amount, setAmount] = useState(20);\n const [name, setName] = useState(\"\");\n const [comment, setComment] = useState(\"\");\n const [showCustomAmount, setShowCustomAmount] = useState(false);\n const [customAmount, setCustomAmount] = useState(\"\");\n const [tips, setTips] = useState(initialTips);\n const [selectedDate, setSelectedDate] = useState(new Date());\n const [sortOrder, setSortOrder] = useState('highest');\n const tipAmounts = [1, 5, 10, 20];\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const finalAmount = showCustomAmount ? parseFloat(customAmount) : amount;\n const response = await fetch(\"/create-checkout-session\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ amount: finalAmount, name, comment }),\n });\n const { url } = await response.json();\n window.location = url;\n };\n\n const handleCustomAmountSubmit = (e) => {\n e.preventDefault();\n if (customAmount && !isNaN(parseFloat(customAmount))) {\n setAmount(parseFloat(customAmount));\n setShowCustomAmount(false);\n }\n };\n\n return (\n

Competitive Tipping

\n \n

\n Select tip amount:\n

\n {tipAmounts.map((tipAmount) => (\n {\n setAmount(tipAmount);\n setShowCustomAmount(false);\n }}\n >\n ${tipAmount}\n \n ))}\n setShowCustomAmount(true)}\n >\n Custom\n \n

\n {showCustomAmount && (\n

\n \n setCustomAmount(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg\"\n placeholder=\"Enter custom amount\"\n min=\"0.01\"\n step=\"0.01\"\n required\n />\n \n Set Custom Amount\n \n \n

\n )}\n

\n setName(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg\"\n placeholder=\"Your Name\"\n required\n />\n

\n setComment(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg\"\n placeholder=\"Add a comment (optional)\"\n rows=\"3\"\n >\n \n

\n \n Send ${showCustomAmount ? customAmount : amount} Tip\n \n \n

\n \n

\n );\n}\n\nfunction Confetti() {\n useEffect(() => {\n confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 },\n });\n }, []);\n\n return null;\n}\n\nfunction SuccessPage({ payments }) {\n return (\n

\n \n

Thank you for your tip!

Your Tip Details

\n {payments.map((payment, index) => (\n

{payment.name}

${payment.amount}

{payment.comment}

\n ))}\n

\n \n Back to Tipping Page\n \n

\n );\n}\n\nfunction client() {\n const root = document.getElementById(\"root\");\n if (root.dataset.page === \"success\") {\n const payments = JSON.parse(root.dataset.payments);\n createRoot(root).render();\n } else {\n const initialTips = JSON.parse(root.dataset.tips);\n createRoot(root).render();\n }\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(req: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const SCHEMA_VERSION = 1;\n const KEY = \"forbearingAmethystToad\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_payments_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n amount REAL NOT NULL,\n comment TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const url = new URL(req.url);\n\n if (url.pathname === \"/create-checkout-session\" && req.method === \"POST\") {\n const stripe = new Stripe(Deno.env.get(\"STRIPE_VALTOWN_SECRET_KEY\"), {\n apiVersion: \"2022-11-15\",\n });\n\n const data = await req.json();\n const { amount, name, comment } = data;\n\n const session = await stripe.checkout.sessions.create({\n payment_method_types: [\"card\"],\n line_items: [\n {\n price_data: {\n currency: \"usd\",\n product_data: {\n name: \"Tip\",\n },\n unit_amount: Math.round(amount * 100),\n },\n quantity: 1,\n },\n ],\n mode: \"payment\",\n success_url: `${url.origin}/success?session_id={CHECKOUT_SESSION_ID}&amount=${amount}&name=${\n encodeURIComponent(name)\n }&comment=${encodeURIComponent(comment)}`,\n cancel_url: `${url.origin}`,\n });\n\n return new Response(JSON.stringify({ url: session.url }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname === \"/success\") {\n const sessionId = url.searchParams.get(\"session_id\");\n const amount = url.searchParams.get(\"amount\");\n const name = url.searchParams.get(\"name\");\n const comment = url.searchParams.get(\"comment\");\n\n const stripe = new Stripe(Deno.env.get(\"STRIPE_VALTOWN_SECRET_KEY\"), {\n apiVersion: \"2022-11-15\",\n });\n\n const session = await stripe.checkout.sessions.retrieve(sessionId);\n const paymentIntent = await stripe.paymentIntents.retrieve(session.payment_intent as string);\n\n if (paymentIntent.status === \"succeeded\") {\n await sqlite.execute(\n `INSERT INTO ${KEY}_payments_${SCHEMA_VERSION} (name, amount, comment) VALUES (?, ?, ?)`,\n [name, amount, comment],\n );\n }\n\n const paymentsJson = JSON.stringify([{ name, amount, comment }]);\n\n return new Response(\n `\n \n \n \n \n Tip Successful - Competitive Tipping\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n }\n\n // Fetch all tips for the root endpoint\n const allTips = await sqlite.execute(\n `SELECT name, amount, comment, timestamp FROM ${KEY}_payments_${SCHEMA_VERSION} ORDER BY amount DESC`,\n );\n\n const tipsJson = JSON.stringify(allTips.rows);\n\n return new Response(\n `\n \n \n \n \n Competitive Tipping\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","label",[20],{"_34":57,"_13":20,"_58":59,"_60":-5,"_61":62,"_63":18,"_64":49,"_36":75,"_17":66,"_67":68,"_69":-5,"_71":49,"_72":-5,"_76":77,"_19":78},["D",1730505928171],"children",[],[20],"080332c2-26dd-11f0-a5b3-569c3dd06744",["D",1746139121251],"legacyEnvVars",true,"httpPrivacy","description","imageUrl","userId","2a463891-c041-4488-97d7-5c4873f793b2","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_123":119},"org",{"_11":12,"_117":-5,"_118":119,"_86":87,"_120":121,"_122":49},"branch",{"_17":113,"_13":16,"_34":62,"_40":79,"_43":35,"_44":93,"_114":51,"_115":41,"_116":54,"_55":14,"_52":12},80,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://images.clerk.dev/oauth_github/img_2TXrDk0iTsMgo2T7z93Wn4eqcgK.jpeg","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":79,"_13":14,"_36":162,"_47":-5,"_81":82,"_50":51,"_83":51,"_84":-5,"_85":-5,"_86":87,"_88":59,"_89":82,"_90":-5,"_91":-5,"_92":93,"_53":54,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":163,"_109":164,"_111":165,"_48":49},[159],"files",[159],"counts",{"_149":93,"_150":93,"_151":93,"_152":153,"_154":155},[],{"_34":57,"_13":20,"_58":59,"_60":-5,"_61":62,"_63":18,"_64":49,"_36":65,"_17":66,"_67":68,"_69":70,"_71":49,"_72":-5,"_19":148},"upstreamProject",{"_34":41,"_13":56,"_84":-5,"_85":-5,"_50":51,"_107":147},"upstreamBranch",{"_34":35,"_36":145,"_38":146,"_13":16,"_40":41,"_17":42,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":12,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746138964077],["D",1731386335193],{"_11":12,"_123":119},[20],"pulls","branches","forks","envVars",{"_156":93,"_158":93},"connections",{"_156":93,"_157":93},"count","unfilledCount","emptyCount",{"_34":57,"_13":20,"_58":59,"_60":-5,"_61":62,"_63":18,"_64":49,"_36":75,"_17":66,"_67":68,"_69":-5,"_71":49,"_72":-5,"_76":160,"_19":161},[],[20],["D",1746139121251],{"_11":12,"_123":119},{"_11":12,"_117":-5,"_118":119,"_86":87,"_120":121,"_122":49},{"_17":113,"_13":16,"_34":62,"_40":79,"_43":35,"_44":93,"_114":51,"_115":41,"_116":54,"_55":14,"_52":12},"ctx",{"_107":-5,"_199":200,"_142":201,"_202":203,"_204":205,"_206":49,"_207":49,"_208":49,"_209":82,"_210":-5,"_211":-7,"_212":-7,"_213":93,"_214":49,"_215":49,"_216":-5},"ENV",{"_170":171,"_172":173,"_174":16,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","db46cea2d909ccbd011cfec0e4ddfe291f419728","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","aiChatModels",[217,218,219,220,221],[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","navCollapsed","currentOrgId",{"_222":245,"_72":246,"_225":247,"_84":248,"_228":82,"_229":82,"_230":231,"_232":82},{"_222":241,"_72":242,"_225":243,"_84":244,"_228":82,"_229":82,"_230":231,"_232":49},{"_222":237,"_72":238,"_225":239,"_84":240,"_228":82,"_229":82,"_230":231,"_232":49},{"_222":233,"_72":234,"_225":235,"_84":236,"_228":82,"_229":82,"_230":231,"_232":49},{"_222":223,"_72":224,"_225":226,"_84":227,"_228":82,"_229":82,"_230":231,"_232":49},"value","fable","Claude Fable 5.1","shortLabel","Fable","Most capable; 2× Opus pricing","imageInput","thinking","contextWindowSize",1000000,"isDefault","opus55","Claude Opus 5.5","Opus","Highly capable for complex work","sonnet55","Claude Sonnet 5.5","Sonnet","Balanced speed and capability","haiku55","Claude Haiku 5.5","Haiku 5.5","Fast; good for straightforward edits","deepseekflash","DeepSeek V4.1 Flash","DeepSeek Flash","Smart and very cheap"]