jframe.parsers
Changed around line 3: jframeMetaTagsParser
- const jframe = ``
+ const jframe = ``
meta.js
Changed around line 1
+ {
+ "version": "next",
+ "imageUrl": "https://jframe.breckyunits.com/splash.png",
+ "button": {
+ "title": "Play",
+ "action": {
+ "type": "launch_frame",
+ "name": "JFrame",
+ "url": "https://jframe.breckyunits.com",
+ "splashImageUrl": "https://jframe.breckyunits.com/splash.png",
+ "splashBackgroundColor": "purple"
+ }
+ }
+ }
readme.scroll
Changed around line 19: GitHub
- Clone This Site
- link /clone
-
- ***
-
Changed around line 28: Splash Image
+ ***
+
+ Clone This Site
+ link /clone
+
+
readme.scroll
Changed around line 14: editButton /edit.html
+ GitHub
+ https://github.com/breck7/jframe
+
+ ***
- GitHub
- https://github.com/breck7/jframe
+ ***
readme.scroll
Changed around line 1
+ metaTags
readme.scroll
Changed around line 5: buildHtml index.html
- printTitle
+ # JFrame
readme.scroll
Changed around line 2: buildTxt readme.md
- homeButton /index.html
+ homeButton
readme.scroll
Changed around line 1
+ title JFrame
- # JFrame
+ printTitle
readme.scroll
Changed around line 13: editButton /edit.html
- Clone This Frame
+ Clone This Site
readme.scroll
Changed around line 1
- homeButton /
+ homeButton /index.html
readme.scroll
Changed around line 1
- homeButton .
+ homeButton /
readme.scroll
Changed around line 1
- homeButton
+ homeButton .
readme.scroll
Changed around line 8: editButton /edit.html
- ## As easy to use as JQuery
+ ## Goal: make Frames as easy to use as JQuery
readme.scroll
Changed around line 10: editButton /edit.html
- - Frames V2 docs
+ Frames V2 docs
- ##
-
readme.scroll
Changed around line 16: editButton /edit.html
- /clone
+ link /clone
readme.scroll
Changed around line 15: editButton /edit.html
+ Clone This Frame
+ /clone
+
readme.scroll
Changed around line 2: buildTxt readme.md
- editButton https://github.com/breck7/jframe
+ editButton /edit.html
Changed around line 15: editButton https://github.com/breck7/jframe
+ GitHub
+ https://github.com/breck7/jframe
+
demo.scroll
Changed around line 1
+ jframe.parsers
- metaTags
+ jframeMetaTags
jframe.parsers
Changed around line 1
+ jframeMetaTagsParser
+ cueFromId
+ extends metaTagsParser
+ javascript
+ buildHtml() {
+ const jframe = ``
+ return super.buildHtml().replace("", jframe + "")
+ }
.well-known/farcaster.json
Changed around line 1
+ {
+ "accountAssociation": {
+ "header": "eyJmaWQiOjM2MjEsInR5cGUiOiJjdXN0b2R5Iiwia2V5IjoiMHgyY2Q4NWEwOTMyNjFmNTkyNzA4MDRBNkVBNjk3Q2VBNENlQkVjYWZFIn0",
+ "payload": "eyJkb21haW4iOiJmcmFtZXMtdjItc3dhcC1kZW1vLnZlcmNlbC5hcHAifQ",
+ "signature": "MHgxMzE0NDBjODMyMWRkM2UzNmQ3OWFiNDYxYmNiZThiOTM0NGNkOGZkNmVhMmVlNmY3YTY4NWJiNjMzMTYyNGNjNTczNjUyNTlhNzE5MTJkZDM4NWVmZmM5MWMwZmY1ZWVlMzYwNGUzYWNiZTI3MTQzYzIwYTRjMDBlNjgwZjBmNzFj"
+ },
+ "frame": {
+ "version": "0.0.0",
+ "name": "Simple Farcaster Frames v2 Demo",
+ "iconUrl": "https://jframe.breckyunits.com/splash.png",
+ "splashImageUrl": "https://jframe.breckyunits.com/splash.png",
+ "splashBackgroundColor": "purple",
+ "homeUrl": "https://jframe.breckyunits.com"
+ }
+ }
demo.scroll
Changed around line 7: metaTags
-
+
-
-
+
+
-
+
app.js
Changed around line 20: class App {
+ get sdk() {
+ return jframe.sdk
+ }
+
- await jframe.actions.ready();
+ await this.sdk.actions.ready();
- jframe.on("primaryButtonClicked", () => {
+ this.sdk.on("primaryButtonClicked", () => {
Changed around line 42: class App {
- const context = await jframe.context;
+ const context = await this.sdk.context;
Changed around line 57: class App {
- jframe.actions.openUrl("https://www.farcaster.xyz");
+ this.sdk.actions.openUrl("https://www.farcaster.xyz");
Changed around line 67: class App {
- jframe.actions.close();
+ this.sdk.actions.close();
Changed around line 77: class App {
- jframe.actions.setPrimaryButton({
+ this.sdk.actions.setPrimaryButton({
app.js
Changed around line 22: class App {
- await frame.actions.ready();
+ await jframe.actions.ready();
- frame.on("primaryButtonClicked", () => {
+ jframe.on("primaryButtonClicked", () => {
Changed around line 38: class App {
- const context = await frame.context;
+ const context = await jframe.context;
Changed around line 53: class App {
- frame.actions.openUrl("https://www.farcaster.xyz");
+ jframe.actions.openUrl("https://www.farcaster.xyz");
Changed around line 63: class App {
- frame.actions.close();
+ jframe.actions.close();
Changed around line 73: class App {
- frame.actions.setPrimaryButton({
+ jframe.actions.setPrimaryButton({
demo.scroll
Changed around line 3: style.css
-
app.js
Changed around line 1
- const main = () => {
- // Get UI elements
- const statusDiv = document.getElementById("status");
- const contextDiv = document.getElementById("contextData");
- const buttons = ["contextBtn", "urlBtn", "closeBtn", "testBtn"].map((id) =>
- document.getElementById(id),
- );
+ class App {
+ constructor() {
+ this.statusDiv = document.getElementById("status");
+ this.contextDiv = document.getElementById("contextData");
+ this.buttons = ["contextBtn", "urlBtn", "closeBtn", "testBtn"].map((id) =>
+ document.getElementById(id)
+ );
+ this.isSDKLoaded = false;
+ }
- let isSDKLoaded = false;
+ setStatus(message) {
+ if (this.statusDiv) {
+ this.statusDiv.innerText = message;
+ }
+ }
- // Enable all buttons
- function enableButtons() {
- buttons.forEach((btn) => (btn.disabled = false));
+ enableButtons() {
+ this.buttons.forEach((btn) => {
+ if (btn) btn.disabled = false;
+ });
- // Initialize frame
- async function init() {
+ async start() {
- isSDKLoaded = true;
- statusDiv.innerText = "Frame is ready!";
- enableButtons();
-
- // Set up button click listener
+ this.isSDKLoaded = true;
+ this.setStatus("Frame is ready!");
+ this.enableButtons();
+
- statusDiv.innerText = "Primary button was clicked!";
+ this.setStatus("Primary button was clicked!");
- statusDiv.innerText = "Error initializing frame: " + error.message;
+ this.setStatus(`Error initializing frame: ${error.message}`);
- // Get and display frame context
- async function getContext() {
- if (!isSDKLoaded) return;
+ async getContext() {
+ if (!this.isSDKLoaded) return;
- contextDiv.innerHTML = `
-
Frame Context:
-
${JSON.stringify(context, null, 2)}- `;
+ if (this.contextDiv) {
+ this.contextDiv.innerHTML = `
+
Frame Context:
+
${JSON.stringify(context, null, 2)}+ `;
+ }
- statusDiv.innerText = "Error getting context: " + error.message;
+ this.setStatus(`Error getting context: ${error.message}`);
- // Open external URL
- function openUrl() {
- if (!isSDKLoaded) return;
+ openUrl() {
+ if (!this.isSDKLoaded) return;
- statusDiv.innerText = "Opening URL...";
+ this.setStatus("Opening URL...");
- statusDiv.innerText = "Error opening URL: " + error.message;
+ this.setStatus(`Error opening URL: ${error.message}`);
- // Close the frame
- function closeFrame() {
- if (!isSDKLoaded) return;
+ closeFrame() {
+ if (!this.isSDKLoaded) return;
- statusDiv.innerText = "Closing frame...";
+ this.setStatus("Closing frame...");
- statusDiv.innerText = "Error closing frame: " + error.message;
+ this.setStatus(`Error closing frame: ${error.message}`);
- // Test the primary button functionality
- function testPrimaryButton() {
- if (!isSDKLoaded) return;
+ testPrimaryButton() {
+ if (!this.isSDKLoaded) return;
- statusDiv.innerText = "Primary button set - try clicking it!";
+ this.setStatus("Primary button set - try clicking it!");
- statusDiv.innerText = "Error setting primary button: " + error.message;
+ this.setStatus(`Error setting primary button: ${error.message}`);
- };
+ }
- // Initialize the app when the DOM is fully loaded
- main();
- jframe.sdk.actions.ready();
+ window.app = new App();
+ window.app.start();
demo.scroll
Changed around line 23: metaTags
- frame.js
+ app.js
app.js
Changed around line 84: const main = () => {
- init();
+ main();
app.js
demo.scroll
Changed around line 5: metaTags
-
Farcaster Frames v2 Demo
-
Waiting for frame to load...
-
-
- Show Context
-
-
-
- Close Frame
-
-
- Test Primary Button
-
-
-
-
+
Farcaster Frames v2 Demo
+
Waiting for frame to load...
+
+
+ Show Context
+
+
+
+ Close Frame
+
+
+ Test Primary Button
+
+
+
+