diff --git a/README.md b/README.md index fe8eba272a..f4acb441db 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,7 @@ OnchainKit offers three themes packed with React components and TypeScript utili - [`getFrameHtmlResponse`](https://onchainkit.xyz/framekit/get-frame-html-response) - [`getFrameMessage`](https://onchainkit.xyz/framekit/get-frame-message) - [`getFrameMetadata`](https://onchainkit.xyz/framekit/get-frame-metadata) + - [Framegear](https://onchainkit.xyz/framekit/framegear) - [Identity Kit](https://onchainkit.xyz/identitykit/introduction) - Components: @@ -136,10 +137,10 @@ Check out the following places for more OnchainKit-related content: ## Authors - [@zizzamia](https://github.com/zizzamia.png) ([X](https://twitter.com/Zizzamia)) +- [@cnasc](https://github.com/cnasc.png) ([warpcast](https://warpcast.com/cnasc)) - [@alvaroraminelli](https://github.com/alvaroraminelli.png) ([X](https://twitter.com/alvaroraminelli)) - [@robpolak](https://github.com/robpolak.png) ([X](https://twitter.com/0xr0b_eth)) - [@taycaldwell](https://github.com/taycaldwell.png) ([X](https://twitter.com/taycaldwell_)) -- [@cnasc](https://github.com/cnasc.png) ([warpcast](https://warpcast.com/cnasc)) - [@wespickett](https://github.com/wespickett.png) ([X](https://twitter.com/wespickett)) ## License diff --git a/site/docs/pages/framekit/framegear.mdx b/site/docs/pages/framekit/framegear.mdx index f2fa4c4c16..e30b977cde 100644 --- a/site/docs/pages/framekit/framegear.mdx +++ b/site/docs/pages/framekit/framegear.mdx @@ -1,6 +1,6 @@ -# framegear +# Framegear -`framegear` is a simple tool that allows you to run and test your frames locally: +**Framegear** is a simple tool that allows you to run and test your frames locally: - without publishing - without casting @@ -8,59 +8,81 @@ ## Installation and Usage -`framegear` is currently distributed as part of the [coinbase/onchainkit](https://github.com/coinbase/onchainkit.git) Git repository. +**Framegear** is currently distributed as part of the [@coinbase/onchainkit](https://github.com/coinbase/onchainkit) Git repository. -```sh -# clone the repo +:::code-group + +```bash [npm] +git clone https://github.com/coinbase/onchainkit.git + +cd onchainkit/framegear +npm install +npm run dev +``` + +```bash [yarn] git clone https://github.com/coinbase/onchainkit.git -# Use Yarn cd onchainkit/framegear yarn yarn dev +``` -# Use NPM -cd onchainkit/framegear -npm install -npm run dev +```bash [pnpm] +git clone https://github.com/coinbase/onchainkit.git -# Use PNPM cd onchainkit/framegear pnpm install pnpm run dev ``` -Visit http://localhost:1337 to start the `framegear` interface. Enter the URL of your locally running -frame (e.g., `http://localhost:3000`) and click `Fetch` to validate your frame response and start testing. +::: + +Visit http://localhost:1337 to start the **Framegear** interface. Enter the URL of your locally +running frame (e.g., `http://localhost:3000`) and click `Fetch` to validate your frame response and start testing. + +![Fetch Frame](https://onchainkit.xyz/assets/fetch-frame.png)] ### Frame-specific setup -`framegear` can validate the initial response of any frame. However, more sophisticated debugging is available -if the frame is built using `@coinbase/onchainkit` (versions `^0.8.0`). When calling the `getFrameMessage` function -pass the `allowFramegear` option to allow `framegear` to send mock frame actions. +**Framegear** can validate the initial response of any frame. For more advanced debugging capabilities, +consider building the frame using `@coinbase/onchainkit` (versions `^0.8.0`). When using the `getFrameMessage` function, +include the `allowFramegear` option to enable **Framegear** to send mock frame actions. ```ts -const result = await getFrameMessage(body, { allowFramegear: true }); +import { getFrameMessage } from '@coinbase/onchainkit'; + +// ... + +const { isValid, message } = await getFrameMessage(body, { + allowFramegear: true, // [!code focus] +}); ``` -#### An Important Security Note +### Security Tip -Frames in production should not pass the `allowFramegear` option. Exact setup will depend on the particular application, -but one example is: +When setting up frames in production, remember not to include the `allowFramegear` option. +The exact setup might vary based on the application, but here's one example: ```ts -const allowFramegear = process.env.NODE_ENV !== 'production'; +import { getFrameMessage } from '@coinbase/onchainkit'; + +const allowFramegear = process.env.NODE_ENV !== 'production'; // [!code focus] + // ... -const result = await getFrameMessage(body, { allowFramegear }); + +const { isValid, message } = await getFrameMessage(body, { + allowFramegear, // [!code focus] +}); ``` ## Current Abilities -At present, `framegear` is able to validate the initial frame response against the +At present, **Framegear** is able to validate the initial frame response against the [current Frame Specification](https://docs.farcaster.xyz/reference/frames/spec) and interact with frames through buttons using the `post` action. -`framegear` is under active development and much more functionality is on the roadmap including (but not limited to): +**Framegear** is under active development and much more functionality is on the roadmap including (but not limited to): - more button actions - text input @@ -69,4 +91,4 @@ buttons using the `post` action. - viewer liked - viewer recasted -A partial roadmap can be viewed at https://github.com/coinbase/onchainkit/issues/146 \ No newline at end of file +A partial roadmap can be viewed at https://github.com/coinbase/onchainkit/issues/146 diff --git a/site/docs/pages/getting-started.mdx b/site/docs/pages/getting-started.mdx index 3375064b96..55e83c459b 100644 --- a/site/docs/pages/getting-started.mdx +++ b/site/docs/pages/getting-started.mdx @@ -30,8 +30,7 @@ OnchainKit is divided into various theme utilities and components that are avail - [`getFrameHtmlResponse`](/framekit/get-frame-html-response) - [`getFrameMessage`](/framekit/get-frame-message) - [`getFrameMetadata`](/framekit/get-frame-metadata) - - Emulator - - [`framegear`](/framekit/framegear) + - [Framegear](/framekit/framegear) - [Identity Kit](/identitykit/introduction) - Components: diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx index 1696695f93..2d4cbb71ab 100644 --- a/site/docs/pages/index.mdx +++ b/site/docs/pages/index.mdx @@ -88,8 +88,7 @@ OnchainKit offers three themes packed with React components and TypeScript utili - [`getFrameHtmlResponse`](/framekit/get-frame-html-response) - [`getFrameMessage`](/framekit/get-frame-message) - [`getFrameMetadata`](/framekit/get-frame-metadata) - - Emulator - - [`framegear`](/framekit/framegear) + - [Framegear](/framekit/framegear) - [Identity Kit](/identitykit/introduction) - Components: diff --git a/site/docs/public/assets/fetch-frame.png b/site/docs/public/assets/fetch-frame.png new file mode 100644 index 0000000000..77ba09fea8 Binary files /dev/null and b/site/docs/public/assets/fetch-frame.png differ diff --git a/site/sidebar.ts b/site/sidebar.ts index 3198acdf28..7c536be1cf 100644 --- a/site/sidebar.ts +++ b/site/sidebar.ts @@ -58,12 +58,12 @@ export const sidebar = [ ], }, { - text: 'Types', - link: '/framekit/types', + text: 'Framegear', + link: '/framekit/framegear', }, { - text: 'Emulator', - link: '/framekit/framegear', + text: 'Types', + link: '/framekit/types', }, ], },