docs: polish (#94)

coinbase · Feb 7, 2024 · 1a73346 · 1a73346
1 parent d12472c
commit 1a73346
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,40 +4,39 @@
 
 ### Patch Changes
 
-- f9f7652: - **feat**: added option for mint action on a Frame. By @zizzamia #93
-  - **feat**: added option for simple static links when creating a Frame. By @zizzamia #93
-  - **feat**: added `wrapper` prop to `<FrameMetadata />` component, that defaults to `React.Fragment` when not passed (original behavior). By @syntag #90 #91
-  - **feat**: exported `FrameMetadataResponse` type which can be useful when using `getFrameMetadata` in a TS project. By @syntag #90
+- **feat**: added option for mint action on a Frame. By @zizzamia #93 f9f7652
+- **feat**: added option for simple static links when creating a Frame. By @zizzamia #93
+- **feat**: added `wrapper` prop to `<FrameMetadata />` component, that defaults to `React.Fragment` when not passed (original behavior). By @syntag #90 #91
+- **feat**: exported `FrameMetadataResponse` type which can be useful when using `getFrameMetadata` in a TS project. By @syntag #90
 
 ## 0.5.0
 
 ### Minor Changes
 
-- dc6f33d: - **fix**: ensured that the `<FrameMetadata>` component uses the `name` property instead of the `property` property to set the type of metadata. Both options are technically correct, but historically, using `name` is more accurate.
+- **fix**: ensured that the `<FrameMetadata>` component uses the `name` property instead of the `property` property to set the type of metadata. Both options are technically correct, but historically, using `name` is more accurate. dc6f33d
+- **feat**: renamed the component from `OnchainName` to `Name` in our Identity Kit. This is a breaking changes. The purpose of the rename is to simplify and enhance clarity. By @alvaroraminelli #86
 
-  - **feat**: renamed the component from `OnchainName` to `Name` in our Identity Kit. This is a breaking changes. The purpose of the rename is to simplify and enhance clarity. By @alvaroraminelli #86
-
-  BREAKING CHANGES
+BREAKING CHANGES
 
-  To enhance usability and intuitiveness, the component name has been simplified. `OnchainName` is now renamed to `Name`.
+To enhance usability and intuitiveness, the component name has been simplified. `OnchainName` is now renamed to `Name`.
 
-  Before
+Before
 
-  ```ts
-  import { OnchainName } from '@coinbase/onchainkit';
+```ts
+import { OnchainName } from '@coinbase/onchainkit';
 
-  ...
-  <OnchainName address="0x1234">
-  ```
+...
+<OnchainName address="0x1234">
+```
 
-  After
+After
 
-  ```ts
-  import { Name } from '@coinbase/onchainkit';
+```ts
+import { Name } from '@coinbase/onchainkit';
 
-  ...
-  <Name address="0x1234">
-  ```
+...
+<Name address="0x1234">
+```
 
 ## 0.4.5
 

diff --git a/README.md b/README.md
@@ -93,8 +93,13 @@ export default function HomePage() {
           label: 'Tell me the story',
         },
         {
-          label: 'Redirect to cute dog pictures',
+          action: 'link',
+          label: 'Link to Google',
+          target: 'https://www.google.com'
+        },
+        {
           action: 'post_redirect',
+          label: 'Redirect to cute pictures',
         },
       ]}
       image="https://zizzamia.xyz/park-1.png"
@@ -111,10 +116,16 @@ export default function HomePage() {
 **@Props**
 
 ```ts
-type Button = {
-  label: string;
-  action?: 'post' | 'post_redirect';
-};
+type Button =
+  | {
+      action: 'link' | 'mint';
+      label: string;
+      target: string;
+    }
+  | {
+      action?: 'post' | 'post_redirect';
+      label: string;
+    };
 
 type InputMetadata = {
   text: string;
@@ -132,15 +143,22 @@ type FrameMetadataType = {
   // A period in seconds at which the app should expect the image to update.
   refresh_period?: number;
 };
+
+type FrameMetadataReact = FrameMetadataType & {
+  wrapper?: React.ComponentType<any>;
+};
 ```
 
 **@Returns**
 
 ```html
 <meta name="fc:frame" content="vNext" />
 <meta name="fc:frame:button:1" content="Tell me the story" />
-<meta name="fc:frame:button:2" content="Redirect to cute dog pictures" />
-<meta name="fc:frame:button:2:action" content="post_redirect" />
+<meta name="fc:frame:button:2" content="Link to Google" />
+<meta name="fc:frame:button:2:action" content="link" />
+<meta name="fc:frame:button:2:target" content="https://www.google.com" />
+<meta name="fc:frame:button:3" content="Redirect to cute pictures" />
+<meta name="fc:frame:button:3:action" content="post_redirect" />
 <meta name="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />
 <meta name="fc:frame:input:text" content="Tell me a boat story" />
 <meta name="fc:frame:post_url" content="https://zizzamia.xyz/api/frame" />
@@ -185,10 +203,16 @@ export async function POST(req: NextRequest): Promise<Response> {
 **@Param**
 
 ```ts
-type Button = {
-  label: string;
-  action?: 'post' | 'post_redirect';
-};
+type Button =
+  | {
+      action: 'link' | 'mint';
+      label: string;
+      target: string;
+    }
+  | {
+      action?: 'post' | 'post_redirect';
+      label: string;
+    };
 
 type InputMetadata = {
   text: string;
@@ -344,10 +368,16 @@ export default function Page() {
 **@Param**
 
 ```ts
-type Button = {
-  label: string;
-  action?: 'post' | 'post_redirect';
-};
+type Button =
+  | {
+      action: 'link' | 'mint';
+      label: string;
+      target: string;
+    }
+  | {
+      action?: 'post' | 'post_redirect';
+      label: string;
+    };
 
 type InputMetadata = {
   text: string;