feat: exported FrameButtonMetadata, FrameInputMetadata and `Frame…

…ImageMetadata` types (#111)

.changeset/popular-phones-shake.md

@@ -0,0 +1,6 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+- **feat**: exported `FrameButtonMetadata`, `FrameInputMetadata` and `FrameImageMetadata` types. By @zizzamia #111
+- **feat**: introduced support for image aspect ratio metadata, ensuring backward compatibility. Image metadata can now be defined either as a string (with a default aspect ratio of `1.91:1`) or as an object with a src URL string and an aspect ratio of either `1.91:1` or `1:1`. By @taycaldwell #110

README.md

@@ -2,7 +2,7 @@
   <a href="https://github.com/coinbase/onchainkit">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="./docs/logo-v-0-5.png">
-      <img alt="OnchainKit logo vibes" src="./docs/logo-v-0-4.png" width="auto">
+      <img alt="OnchainKit logo vibes" src="./docs/logo-v-0-5.png" width="auto">
     </picture>
   </a>
 </p>
@@ -102,7 +102,10 @@ export default function HomePage() {
           label: 'Redirect to cute pictures',
         },
       ]}
-      image='https://zizzamia.xyz/park-1.png'
+      image={{
+       src: 'https://zizzamia.xyz/park-3.png',
+       aspectRatio: '1.1'
+      }}
       input={{
         text: 'Tell me a boat story',
       }}
@@ -116,7 +119,7 @@ export default function HomePage() {
 **@Props**
 
 ```ts
-type ButtonMetadata =
+type FrameButtonMetadata =
   | {
       action: 'link' | 'mint';
       label: string;
@@ -127,22 +130,22 @@ type ButtonMetadata =
       label: string;
     };
 
-type InputMetadata = {
-  text: string;
-};
-
-type ImageMetadata = {
+type FrameImageMetadata = {
   src: string;
   aspectRatio?: '1.91:1' | '1.1';
 };
 
+type FrameInputMetadata = {
+  text: string;
+};
+
 type FrameMetadataType = {
   // A list of strings which are the label for the buttons in the frame (max 4 buttons).
-  buttons?: [ButtonMetadata, ...ButtonMetadata[]];
+  buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]];
   // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 or 1:1
-  image: ImageMetadata;
+  image: FrameImageMetadata;
   // The text input to use for the Frame.
-  input?: InputMetadata;
+  input?: FrameInputMetadata;
   // A valid POST URL to send the Signature Packet to.
   postUrl?: string;
   // A period in seconds at which the app should expect the image to update.
@@ -164,7 +167,8 @@ type FrameMetadataReact = FrameMetadataType & {
 <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:image" content="https://zizzamia.xyz/park-3.png" />
+<meta name="fc:frame:image:aspect_ratio" content="1.1" />
 <meta name="fc:frame:input:text" content="Tell me a boat story" />
 <meta name="fc:frame:post_url" content="https://zizzamia.xyz/api/frame" />
 ```
@@ -208,7 +212,7 @@ export async function POST(req: NextRequest): Promise<Response> {
 **@Param**
 
 ```ts
-type ButtonMetadata =
+type FrameButtonMetadata =
   | {
       action: 'link' | 'mint';
       label: string;
@@ -219,22 +223,22 @@ type ButtonMetadata =
       label: string;
     };
 
-type InputMetadata = {
-  text: string;
-};
-
-type ImageMetadata = {
+type FrameImageMetadata = {
   src: string;
   aspectRatio?: '1.91:1' | '1.1';
 };
 
+type FrameInputMetadata = {
+  text: string;
+};
+
 type FrameMetadataType = {
   // A list of strings which are the label for the buttons in the frame (max 4 buttons).
-  buttons?: [ButtonMetadata, ...ButtonMetadata[]];
+  buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]];
   // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 or 1:1
-  image: ImageMetadata;
+  image: FrameImageMetadata;
   // The text input to use for the Frame.
-  input?: InputMetadata;
+  input?: FrameInputMetadata;
   // A valid POST URL to send the Signature Packet to.
   postUrl?: string;
   // A period in seconds at which the app should expect the image to update.
@@ -378,7 +382,7 @@ export default function Page() {
 **@Param**
 
 ```ts
-type ButtonMetadata =
+type FrameButtonMetadata =
   | {
       action: 'link' | 'mint';
       label: string;
@@ -389,22 +393,22 @@ type ButtonMetadata =
       label: string;
     };
 
-type InputMetadata = {
-  text: string;
-};
-
-type ImageMetadata = {
+type FrameImageMetadata = {
   src: string;
   aspectRatio?: '1.91:1' | '1.1';
 };
 
+type FrameInputMetadata = {
+  text: string;
+};
+
 type FrameMetadataType = {
   // A list of strings which are the label for the buttons in the frame (max 4 buttons).
-  buttons?: [ButtonMetadata, ...ButtonMetadata[]];
+  buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]];
   // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1
-  image: ImageMetadata;
+  image: FrameImageMetadata;
   // The text input to use for the Frame.
-  input?: InputMetadata;
+  input?: FrameInputMetadata;
   // A valid POST URL to send the Signature Packet to.
   postUrl?: string;
   // A period in seconds at which the app should expect the image to update.

src/core/types.ts

@@ -68,6 +68,11 @@ export function convertToFrame(json: any) {
   };
 }
 
+/**
+ * Frame Request
+ *
+ * Note: exported as public Type
+ */
 export type FrameButtonMetadata =
   | {
       action: 'link' | 'mint';
@@ -79,10 +84,20 @@ export type FrameButtonMetadata =
       label: string;
     };
 
+/**
+ * Frame Request
+ *
+ * Note: exported as public Type
+ */
 export type FrameInputMetadata = {
   text: string;
 };
 
+/**
+ * Frame Request
+ *
+ * Note: exported as public Type
+ */
 export type FrameImageMetadata = {
   src: string;
   aspectRatio?: '1.91:1' | '1:1';

src/index.ts

@@ -8,4 +8,11 @@ export { Avatar } from './components/Avatar';
 export { Name } from './components/Name';
 export { useAvatar } from './hooks/useAvatar';
 export { useName } from './hooks/useName';
-export type { FrameMetadataType, FrameRequest, FrameValidationData } from './core/types';
+export type {
+  FrameButtonMetadata,
+  FrameImageMetadata,
+  FrameInputMetadata,
+  FrameMetadataType,
+  FrameRequest,
+  FrameValidationData,
+} from './core/types';

src/version.ts

@@ -1 +1 @@
-export const version = '0.5.3';
+export const version = '0.5.4';