Kinco

@kinco

6 Following

6 Followers

Kinco pfp

TIPS: Make a Nuxt.js app Frame-compatible 🪄 With @betswirl , we have just deployed our dapp on Frame. Here are 9 tips to help you do the same:

0 reply

1 recast

2 reactions

Kinco pfp

Hey framers I've just made a thread to help devs to make their Nuxt.js app Frame compatible. Hope it will help some 🙏

0 reply

0 recast

1 reaction

Kinco pfp

Feel free to DM me if you need help to make your Nuxt.js app compatible! My DMs are always open😀

0 reply

0 recast

1 reaction

Kinco pfp

BONUS) Cache - Eveytime you update you fc:frame metadata or your manifest, changes could not be taken into account directly. I suggest you to check the cast made by @deodad to help you to refresh your data : https://warpcast.com/deodad/0xdc024835

0 reply

0 recast

1 reaction

Kinco pfp

9) Notifications - Save in your database the data your receive wia the webhook sent by Frame servers. To avoid to pay a Neynar service to help you to secure your webhook, I suggest you to create a custom checker. You can check what has be done by @horsefacts.eth for that: https://github.com/horsefacts/yoink-devcon/blob/dbd796d0ff13eb30d5ae34b065eb9287f187e4c4/app/api/webhook/route.ts#L17-L99

0 reply

0 recast

1 reaction

Kinco pfp

8) Use local storage instead of cookies - The cookies we had with expiration dates didn't work well in a Frame context. So we create a composable to manage data easily - Some devs successfully managed to make it work by creating very specific types of cookies, but I didn't dig any deeper than that because local storage works perfectly in our case.

0 reply

0 recast

1 reaction

Kinco pfp

7) Ask the user to add your frame - When you think it's the moment, ask your user to add your frame app. It will be useful to send them some notifications. On our side, we ask them to add the app once the user connected their wallet.

0 reply

0 recast

1 reaction

Kinco pfp

5) Start Frame app once SSR is finished - Use sdk.actions.ready() once your page is mounted if page is in a Frame context. You can place it in app.vue or in your main layout for example.

0 reply

0 recast

1 reaction

Kinco pfp

6) Frame wallet connector - Copy/paste the connector from npm package https://www.npmjs.com/package/@farcaster/frame-wagmi-connector?activeTab=code in your app. - Add the connector in Wagmi context only if app detects it is in Frame context

0 reply

0 recast

1 reaction

Kinco pfp

4) Detect if user is in a frame context - Create a plugin client side to detect if the page has been opened in a Frame context. You will be able to use "frameContext" and "isFrameMode" everywhere in your app now!

0 reply

0 recast

1 reaction

Kinco pfp

2) Manifest - Generate your manifest on your mobile app ( dot not forget to enable developer mode before) - Create a static JSON file or use a GET endpoint to generate it dynamically

0 reply

0 recast

2 reactions

Kinco pfp

3) fc:frame metadata - Add a default fc:frame in app.vue or in your main layout using useHead composable. - Add more fc:rame on specific pages if needed (to change label button or image for example)

0 reply

0 recast

1 reaction

Kinco pfp

1) Documentation - Read documentation about Frames V2: https://docs.farcaster.xyz/developers/frames/v2/ - Join Frames V2 direct cast group: https://warpcast.com/~/group/X2P7HNc4PHTriCssYHNcmQ

0 reply

0 recast

3 reactions

BetSwirl pfp

🚀 BetSwirl Frame is coming to Farcaster! Now you can place sports bets & play casino games directly on Warpcast using its integrated wallet, Coinbase Wallet, and MetaMask—seamless, non-custodial, and fully onchain. 🔔 Stay ahead: Enjoy notifications when your sports bets are resolved & claim payouts without delay. 🔥 Free bets alert! In March, we’ll take a snapshot of users who installed the frame and reward them with free bets on Base. Make sure you’re subscribed to qualify! We’re here for the long haul—building for the future on Base. Turn on notifications & get in the game! 🔵 Check it out here : https://www.betswirl.com

2 replies

7 recasts

19 reactions

Kinco pfp

Hey devs Anyone has a tip to test Frame V2 notification webhook ? I tried to update my manisfest with a tunnel url that targets my localhost backend, but it's been like 24h the manifest has not been updated (I guess because of cache)

0 reply

0 recast

1 reaction