hicommonwealth · devin-ai-integration · Jan 14, 2025 · Jan 14, 2025
diff --git a/.well-known/farcaster.json b/.well-known/farcaster.json
@@ -0,0 +1,13 @@
+{
+  "accountAssociation": {
+    "header": "",
+    "payload": "",
+    "signature": ""
+  },
+  "frame": {
+    "name": "Commonwealth",
+    "version": "0.0.1",
+    "homeUrl": "https://commonwealth.im",
+    "iconUrl": "https://commonwealth.im/favicon.ico"
+  }
+}
diff --git a/package.json b/package.json
@@ -43,6 +43,8 @@
     "resolve": "^1.20.0"
   },
   "dependencies": {
+    "@farcaster/frame-sdk": "^0.0.26",
+    "@farcaster/frame-wagmi-connector": "^0.0.14",
     "extensionless": "^1.9.6"
   },
   "devDependencies": {
@@ -131,6 +133,7 @@
     "tsc-alias": "^1.8.8",
     "tsconfig-paths": "^4.2.0",
     "tslint": "^5.13.0",
+    "tsx": "^4.7.2",
     "typescript": "^5.0.0",
     "vite": "^5.4.11",
     "vite-bundle-visualizer": "^1.2.1",

diff --git a/packages/commonwealth/client/scripts/components/frames/v2/ContestFrame.tsx b/packages/commonwealth/client/scripts/components/frames/v2/ContestFrame.tsx
@@ -0,0 +1,32 @@
+import { FrameSDK } from '@farcaster/frame-sdk';
+import React, { useEffect } from 'react';
+
+const ContestFrame: React.FC = () => {
+  useEffect(() => {
+    const sdk = new FrameSDK();
+    sdk.actions.ready();
+  }, []);
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#2A2432',
+        color: 'white',
+        padding: '40px',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+        lineHeight: '0.5',
+      }}
+    >
+      <h1 style={{ fontSize: '56px', lineHeight: '1.2' }}>Contest Frame V2</h1>
+      <p style={{ fontSize: '32px', lineHeight: '1.2' }}>
+        Commonwealth Contest Platform
+      </p>
+      <p style={{ fontSize: '42px' }}>Check prizes below 👇</p>
+    </div>
+  );
+};
+
+export default ContestFrame;
diff --git a/packages/commonwealth/client/scripts/components/frames/v2/index.html b/packages/commonwealth/client/scripts/components/frames/v2/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Commonwealth Contest Frame</title>
+    <meta property="og:title" content="Commonwealth Contest" />
+    <meta property="og:image" content="https://commonwealth.im/favicon.ico" />
+    <meta
+      name="fc:frame"
+      content='{
+    "version": "vNext",
+    "image": {
+      "src": "https://commonwealth.im/favicon.ico",
+      "aspectRatio": "1.91:1"
+    },
+    "buttons": [
+      {
+        "label": "View Contest",
+        "action": "link",
+        "target": "https://commonwealth.im/contests"
+      },
+      {
+        "label": "View Prizes",
+        "action": "post",
+        "target": "https://farcaster-frame-spike-tunnel-ojuvirf6.devinapps.com/frame/prizes"
+      },
+      {
+        "label": "Upvote",
+        "action": "post",
+        "target": "https://farcaster-frame-spike-tunnel-ojuvirf6.devinapps.com/frame/upvote"
+      }
+    ],
+    "postUrl": "https://farcaster-frame-spike-tunnel-ojuvirf6.devinapps.com/frame"
+  }'
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="https://unpkg.com/@farcaster/[email protected]/dist/index.global.js"></script>
+  </body>
+</html>
diff --git a/packages/commonwealth/server/farcaster/frames/v2/frameRouter.ts b/packages/commonwealth/server/farcaster/frames/v2/frameRouter.ts
@@ -0,0 +1,28 @@
+import { Router } from 'express';
+import { join } from 'path';
+
+const v2Router: Router = Router();
+
+// Serve the frame HTML
+v2Router.get('/frame', (_req, res) => {
+  res.sendFile(
+    join(
+      process.cwd(),
+      'packages/commonwealth/client/scripts/components/frames/v2/index.html',
+    ),
+  );
+});
+
+// Contest frame endpoint
+v2Router.get('/frame/:contest_address', (req, res) => {
+  // TODO: Implement contest data fetching
+  res.json({
+    status: 'success',
+    data: {
+      contest_address: req.params.contest_address,
+    },
+  });
+});
+
+const router = v2Router;
+export { router as default };
diff --git a/packages/commonwealth/server/farcaster/router.tsx b/packages/commonwealth/server/farcaster/router.tsx
@@ -1,9 +1,14 @@
 import express from 'express';
 import { contestCard, contestPrizes } from './frames/contest';
+import v2Router from './frames/v2/frameRouter.js';
 
 const farcasterRouter = express.Router();
 
+// v2 frame routes
+farcasterRouter.use('/v2', v2Router);
+
 // WARNING: do not change these paths because cloudflare may route to it
+// v1 frame routes
 farcasterRouter.get('/:contest_address/contestCard', contestCard);
 farcasterRouter.post('/:contest_address/contestCard', contestCard);
 farcasterRouter.post('/:contest_address/contestPrizes', contestPrizes);