Merge pull request #34 from depatchedmode/v0.11.0

V0.11.0 - transactions

Author: depatchedmode

api/txdata.ts

@@ -0,0 +1,56 @@
+import { encodeFunctionData } from 'viem';
+
+export default async () => {
+  try {
+    // Contract details
+    const CONTRACT_ADDRESS = '0x8CA328F83387519Eb8B18Ea23fc01bBe92dE2Adc'; // Counter.sol on Base    
+    const abi = [{'inputs':[],'stateMutability':'nonpayable','type':'constructor'},{'inputs':[],'name':'getCurrentCount','outputs':[{'internalType':'uint256','name':'','type':'uint256'}],'stateMutability':'view','type':'function'},{'inputs':[],'name':'incrementCount','outputs':[],'stateMutability':'nonpayable','type':'function'}];
+
+    // Encode the transaction data for the incrementCount function
+    const calldata = encodeFunctionData({
+      abi: abi,
+      functionName: 'incrementCount',
+      args: []
+    });
+
+    const txJson = JSON.stringify(
+      {
+        chainId: 'eip155:8453', // base
+        method: 'eth_sendTransaction',
+        params: {
+          abi: abi, // JSON ABI of the function selector and any errors
+          to: CONTRACT_ADDRESS,
+          data: calldata,
+          value: '0',
+        },
+      }
+    )
+
+    // Return the transaction details to the client for signing
+    return new Response(
+      txJson,
+      {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json; charset=utf-8'
+        },
+      }
+    );
+  } catch (error) {
+    return new Response(
+      JSON.stringify({
+        error: `Failed to process request: ${error.message}`
+      }),
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json; charset=utf-8'
+        },
+      }
+    );
+  }
+};
+
+export const config = {
+  path: '/txdata'
+};

package.json

@@ -1,11 +1,11 @@
 {
   "name": "simplest-frame",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "dependencies": {
     "@netlify/blobs": "^6.4.2",
     "dompurify": "^3.0.8",
-    "frames.js": "0.13.0",
+    "frames.js": "0.14.0",
     "jsdom": "^24.0.0",
     "satori": "^0.10.13",
     "satori-html": "^0.3.2",

src/frames/count.ts

@@ -38,23 +38,23 @@ export default {
             buttons: [
                 {
                     action: 'post',
-                    label: '🫵 Frame me!'
+                    label: '⬅ Back'
                 },
                 {
                     action: 'post',
-                    label: '🎬 View credits'
-                }
+                    label: '🫵 Frame me!'
+                },
             ]
         } 
     },
     handleInteraction: async (msg: FrameActionDataParsed) => {
         switch (msg.buttonIndex) {
             case 1:
+                return `poster`;
+            case 2:
                 await incrementCount();
                 await setFramer(msg.requesterFid, msg.inputText);
                 return `count`;
-            case 2:
-                return `credits`;
         }
     },
 }

src/frames/index.ts

@@ -2,12 +2,14 @@ import poster from "./poster.js";
 import count from "./count.js";
 import credits from "./credits.js";
 import mint from "./mint.js";
+import transaction from "./transaction.js";
 import stolen from "./stolen.js";
 
 export default {
     count,
     poster,
     credits,
+    transaction,
     mint,
     stolen,
 }

src/frames/mint.ts

@@ -10,7 +10,7 @@ export default {
             buttons: [
                 {
                     action: 'post',
-                    label: '⬅️ Back'
+                    label: '⬅ Back'
                 },
                 {
                     action: 'mint',
@@ -21,19 +21,15 @@ export default {
                         tokenId: '1',
                     })
                 },
-                {
-                    action: 'post',
-                    label: '🎬 View credits'
-                }
             ]
         } 
     },
     handleInteraction: async (msg: FrameActionDataParsed) => {
         switch (msg.buttonIndex) {
             case 1:
                 return `poster`;
-            case 3:
-                return `credits`;
+            case 2:
+                return `mint`;
         }
     },
 }

src/frames/poster.ts

@@ -8,11 +8,15 @@ export default {
             buttons: [
                 {
                     action: 'post',
-                    label: '🔳 State Demo'
+                    label: '🔳 State'
                 },
                 {
                     action: 'post',
-                    label: '🔳 Mint Demo'
+                    label: '🔳 Tx'
+                },
+                {
+                    action: 'post',
+                    label: '🔳 Mint'
                 },
                 {
                     action: 'link',
@@ -23,10 +27,13 @@ export default {
         }
     },
     handleInteraction: (msg: FrameActionDataParsed) => {
-        if (msg.buttonIndex == 1) {
-            return `count`
-        } else if (msg.buttonIndex == 2) {
-            return `mint`
+        switch (msg.buttonIndex) {
+            case 1:
+                return `count`;
+            case 2:
+                return `transaction`;
+            case 3:
+                return `mint`;
         }
     },
 };

src/frames/transaction.ts

@@ -0,0 +1,55 @@
+import { FrameActionDataParsed } from 'frames.js';
+const html = String.raw;
+
+export default {
+    name: 'transaction',
+    render: async () => {
+        return {
+            image: html`
+            <div style="
+                font-family: 'Redaction';
+                display: flex;
+                flex-direction: column;
+                width: 100vw;
+                height: 100vh;
+                color: white;
+                background: black;
+                align-items: center;
+                justify-content: center;
+                line-height: 1;
+                gap: 1rem;
+            ">
+                <div style="font-size: 5em;">
+                   Count Onchain
+                </div>
+                <div style="font-size: 2em;">
+                   Visit the contract to see the current count
+                </div>
+            </div>`,
+            buttons: [
+                {
+                    action: 'post',
+                    label: '⬅ Back'
+                },
+                {
+                    action: 'tx',
+                    target: `${process.env.URL}/txdata`,
+                    label: '⬆ Higher'
+                },
+                {
+                    action: 'link',
+                    target: 'https://basescan.org/address/0x8ca328f83387519eb8b18ea23fc01bbe92de2adc',
+                    label: 'View Contract'
+                }
+            ]
+        } 
+    },
+    handleInteraction: async (msg: FrameActionDataParsed) => {
+        switch (msg.buttonIndex) {
+            case 1:
+                return `poster`;
+            case 2:
+                return `transaction`;
+        }
+    },
+}