api.js
Changed around line 1
+ export default async function handler(req, res) {
+ if (req.method !== 'POST') {
+ return res.status(405).json({ error: 'Method not allowed' });
+ }
+
+ try {
+ const { amount, trustedData } = req.body;
+ const { fid } = trustedData.messageBytes;
+
+ // Here you would integrate with your preferred payment solution
+ // For example, using Base, Optimism, or other L2 solutions
+
+ return res.status(200).json({
+ version: 'vNext',
+ image: {
+ src: 'https://sendframehub.pro/images/success.png',
+ aspectRatio: '1.91:1'
+ },
+ buttons: [
+ {
+ label: 'SEND MORE',
+ action: 'post'
+ }
+ ]
+ });
+ } catch (error) {
+ console.error('Frame API error:', error);
+ return res.status(500).json({ error: 'Internal server error' });
+ }
+ }
frame.scroll
Changed around line 1
+ main
+ class frameContainer
+ div
+ class frameContent
+ h1 Send Funds
+ class frameTitle
+ div
+ class inputGroup
+ label Amount (ETH)
+ for amount
+ input
+ type number
+ id amount
+ placeholder 0.05
+ min 0.001
+ step 0.001
+ div
+ class frameActionArea
+ button Send
+ class frameButton
+ data-action post
head.scroll
Changed around line 1
+ metaTags
+ meta
+ name viewport
+ content width=device-width, initial-scale=1.0
+
+ replaceNodejs
+ module.exports = {JSONCONTENTS: JSON.stringify(JSON.parse(require("fs").readFileSync("meta.json")))}
+
+
+
+ meta
+ name fc:frame:image
+ content https://sendframehub.pro/images/send-frame.png
+ meta
+ name fc:frame:post_url
+ content https://sendframehub.pro/api/frame
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://sendframehub.pro
+ import head.scroll
+ title Send Funds to Friends
+ description A simple and secure way to send funds to your Farcaster friends
+ style.css
+ frame.scroll
+ script.js
manifest.json
Changed around line 1
+ {
+ "version": "vNext",
+ "name": "Send Funds",
+ "description": "Send funds to your Farcaster friends securely",
+ "image": {
+ "src": "https://sendframehub.pro/images/send-frame.png",
+ "aspectRatio": "1.91:1"
+ },
+ "buttons": [
+ {
+ "label": "SEND",
+ "action": "post"
+ }
+ ],
+ "postUrl": "https://sendframehub.pro/api"
+ }
meta.json
Changed around line 1
+ {
+ "version": "next",
+ "imageUrl": "https://sendframehub.pro/images/send-frame.png",
+ "button": {
+ "title": "Send Funds",
+ "action": {
+ "type": "launch_frame",
+ "name": "Send Funds Frame",
+ "url": "https://sendframehub.pro",
+ "splashImageUrl": "https://sendframehub.pro/images/splash.png",
+ "splashBackgroundColor": "#0a0a0a"
+ }
+ }
+ }
prompt.json
Changed around line 1
+ {
+ "id": "msg_016xRSPnq5suMmdasUMpbLar",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a WarpCast Frame for sending money to friends. Let's make it sleek and user-friendly.\n\n---domain---\nsendframehub.pro\n\n---index.scroll---\nbuildHtml\nbaseUrl https://sendframehub.pro\nimport head.scroll\ntitle Send Funds to Friends\ndescription A simple and secure way to send funds to your Farcaster friends\nstyle.css\nframe.scroll\nscript.js\n\n---head.scroll---\nmetaTags\nmeta\n name viewport\n content width=device-width, initial-scale=1.0\n\nreplaceNodejs\n module.exports = {JSONCONTENTS: JSON.stringify(JSON.parse(require(\"fs\").readFileSync(\"meta.json\")))}\n\n\n\nmeta\n name fc:frame:image\n content https://sendframehub.pro/images/send-frame.png\nmeta\n name fc:frame:post_url\n content https://sendframehub.pro/api/frame\n\n---frame.scroll---\nmain\n class frameContainer\n div\n class frameContent\n h1 Send Funds\n class frameTitle\n div\n class inputGroup\n label Amount (ETH)\n for amount\n input\n type number\n id amount\n placeholder 0.05\n min 0.001\n step 0.001\n div\n class frameActionArea\n button Send\n class frameButton\n data-action post\n\n---style.css---\n:root {\n --frame-bg: #0a0a0a;\n --frame-text: #ffffff;\n --frame-accent: #6366f1;\n --frame-input-bg: rgba(255, 255, 255, 0.1);\n --frame-radius: 16px;\n --frame-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background: var(--frame-bg);\n color: var(--frame-text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.frameContainer {\n width: 100%;\n max-width: 500px;\n margin: 0 auto;\n padding: 24px;\n}\n\n.frameContent {\n background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));\n border-radius: var(--frame-radius);\n padding: 32px;\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: var(--frame-shadow);\n}\n\n.frameTitle {\n font-size: 28px;\n font-weight: 700;\n margin-bottom: 24px;\n text-align: center;\n background: linear-gradient(135deg, #6366f1, #8b5cf6);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.inputGroup {\n margin-bottom: 24px;\n}\n\n.inputGroup label {\n display: block;\n margin-bottom: 8px;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n.inputGroup input {\n width: 100%;\n background: var(--frame-input-bg);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: calc(var(--frame-radius) / 2);\n padding: 12px 16px;\n color: var(--frame-text);\n font-size: 16px;\n transition: all 0.3s ease;\n}\n\n.inputGroup input:focus {\n outline: none;\n border-color: var(--frame-accent);\n box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);\n}\n\n.frameActionArea {\n display: flex;\n justify-content: center;\n margin-top: 24px;\n}\n\n.frameButton {\n background: linear-gradient(135deg, #6366f1, #8b5cf6);\n color: var(--frame-text);\n border: none;\n padding: 14px 32px;\n border-radius: var(--frame-radius);\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.frameButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);\n}\n\n@media (max-width: 480px) {\n .frameContainer {\n padding: 16px;\n }\n \n .frameContent {\n padding: 24px;\n }\n \n .frameTitle {\n font-size: 24px;\n }\n}\n\n---script.js---\nconst initializeFrame = async () => {\n try {\n const frameContext = await window.frames.getContext();\n console.log('Frame context:', frameContext);\n\n const amountInput = document.querySelector('#amount');\n const sendButton = document.querySelector('.frameButton');\n\n sendButton.addEventListener('click', async () => {\n try {\n const amount = amountInput.value;\n if (!amount || amount <= 0) {\n alert('Please enter a valid amount');\n return;\n }\n\n await window.frames.postMessage({\n action: 'post',\n amount: amount\n });\n } catch (error) {\n console.error('Frame action error:', error);\n }\n });\n\n await window.frames.ready();\n } catch (error) {\n console.error('Frame initialization error:', error);\n }\n};\n\ndocument.addEventListener('DOMContentLoaded', initializeFrame);\n\n---manifest.json---\n{\n \"version\": \"vNext\",\n \"name\": \"Send Funds\",\n \"description\": \"Send funds to your Farcaster friends securely\",\n \"image\": {\n \"src\": \"https://sendframehub.pro/images/send-frame.png\",\n \"aspectRatio\": \"1.91:1\"\n },\n \"buttons\": [\n {\n \"label\": \"SEND\",\n \"action\": \"post\"\n }\n ],\n \"postUrl\": \"https://sendframehub.pro/api\"\n}\n\n---meta.json---\n{\n \"version\": \"next\",\n \"imageUrl\": \"https://sendframehub.pro/images/send-frame.png\",\n \"button\": {\n \"title\": \"Send Funds\",\n \"action\": {\n \"type\": \"launch_frame\",\n \"name\": \"Send Funds Frame\",\n \"url\": \"https://sendframehub.pro\",\n \"splashImageUrl\": \"https://sendframehub.pro/images/splash.png\",\n \"splashBackgroundColor\": \"#0a0a0a\"\n }\n }\n}\n\n---api.js---\nexport default async function handler(req, res) {\n if (req.method !== 'POST') {\n return res.status(405).json({ error: 'Method not allowed' });\n }\n\n try {\n const { amount, trustedData } = req.body;\n const { fid } = trustedData.messageBytes;\n\n // Here you would integrate with your preferred payment solution\n // For example, using Base, Optimism, or other L2 solutions\n\n return res.status(200).json({\n version: 'vNext',\n image: {\n src: 'https://sendframehub.pro/images/success.png',\n aspectRatio: '1.91:1'\n },\n buttons: [\n {\n label: 'SEND MORE',\n action: 'post'\n }\n ]\n });\n } catch (error) {\n console.error('Frame API error:', error);\n return res.status(500).json({ error: 'Internal server error' });\n }\n}\n\n---end---\n\nThis Frame implementation creates a sleek, modern interface for sending funds to Farcaster friends. Key features include:\n\n1. Beautiful gradient design with glass-morphism effects\n2. Responsive input field for entering ETH amount\n3. Smooth animations and transitions\n4. Error handling and validation\n5. Clean, semantic HTML structure\n6. Accessibility considerations\n7. Mobile-first responsive design\n\nThe design uses a modern dark theme with purple/indigo accents, creating a professional and trustworthy feeling that's appropriate for financial transactions. The UI is intentionally simple to reduce friction in the sending process.\n\nNote that you'd need to:\n1. Add actual payment processing logic in the API handler\n2. Create and host the required images (send-frame.png, success.png, splash.png)\n3. Set up proper security measures for handling transactions\n4. Implement proper error handling and transaction confirmation flows"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 2297,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2339
+ }
+ }
readme.scroll
Changed around line 1
+ # sendframehub.pro.framehub.pro
+
+ frame generated by Claude from prompt: build me a frame for sending my friends money on warpcast
script.js
Changed around line 1
+ const initializeFrame = async () => {
+ try {
+ const frameContext = await window.frames.getContext();
+ console.log('Frame context:', frameContext);
+
+ const amountInput = document.querySelector('#amount');
+ const sendButton = document.querySelector('.frameButton');
+
+ sendButton.addEventListener('click', async () => {
+ try {
+ const amount = amountInput.value;
+ if (!amount || amount <= 0) {
+ alert('Please enter a valid amount');
+ return;
+ }
+
+ await window.frames.postMessage({
+ action: 'post',
+ amount: amount
+ });
+ } catch (error) {
+ console.error('Frame action error:', error);
+ }
+ });
+
+ await window.frames.ready();
+ } catch (error) {
+ console.error('Frame initialization error:', error);
+ }
+ };
+
+ document.addEventListener('DOMContentLoaded', initializeFrame);
style.css
Changed around line 1
+ :root {
+ --frame-bg: #0a0a0a;
+ --frame-text: #ffffff;
+ --frame-accent: #6366f1;
+ --frame-input-bg: rgba(255, 255, 255, 0.1);
+ --frame-radius: 16px;
+ --frame-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ background: var(--frame-bg);
+ color: var(--frame-text);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .frameContainer {
+ width: 100%;
+ max-width: 500px;
+ margin: 0 auto;
+ padding: 24px;
+ }
+
+ .frameContent {
+ background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
+ border-radius: var(--frame-radius);
+ padding: 32px;
+ backdrop-filter: blur(12px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: var(--frame-shadow);
+ }
+
+ .frameTitle {
+ font-size: 28px;
+ font-weight: 700;
+ margin-bottom: 24px;
+ text-align: center;
+ background: linear-gradient(135deg, #6366f1, #8b5cf6);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .inputGroup {
+ margin-bottom: 24px;
+ }
+
+ .inputGroup label {
+ display: block;
+ margin-bottom: 8px;
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.8);
+ }
+
+ .inputGroup input {
+ width: 100%;
+ background: var(--frame-input-bg);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: calc(var(--frame-radius) / 2);
+ padding: 12px 16px;
+ color: var(--frame-text);
+ font-size: 16px;
+ transition: all 0.3s ease;
+ }
+
+ .inputGroup input:focus {
+ outline: none;
+ border-color: var(--frame-accent);
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+ }
+
+ .frameActionArea {
+ display: flex;
+ justify-content: center;
+ margin-top: 24px;
+ }
+
+ .frameButton {
+ background: linear-gradient(135deg, #6366f1, #8b5cf6);
+ color: var(--frame-text);
+ border: none;
+ padding: 14px 32px;
+ border-radius: var(--frame-radius);
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ .frameButton:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
+ }
+
+ @media (max-width: 480px) {
+ .frameContainer {
+ padding: 16px;
+ }
+
+ .frameContent {
+ padding: 24px;
+ }
+
+ .frameTitle {
+ font-size: 24px;
+ }
+ }