From bf014fda0671329ab4c17072ff648439b910f0ec Mon Sep 17 00:00:00 2001
From: Leonardo Zizzamia
Date: Thu, 8 Feb 2024 23:58:19 -0800
Subject: [PATCH] feat: exported `FrameButtonMetadata`, `FrameInputMetadata`
and `FrameImageMetadata` types (#111)
---
.changeset/popular-phones-shake.md | 6 +++
README.md | 64 ++++++++++++++++--------------
src/core/types.ts | 15 +++++++
src/index.ts | 9 ++++-
src/version.ts | 2 +-
5 files changed, 64 insertions(+), 32 deletions(-)
create mode 100644 .changeset/popular-phones-shake.md
diff --git a/.changeset/popular-phones-shake.md b/.changeset/popular-phones-shake.md
new file mode 100644
index 0000000000..1cf3362af9
--- /dev/null
+++ b/.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
diff --git a/README.md b/README.md
index 19f96da9c9..8ecd5cb278 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
@@ -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 & {
-
+
+
```
@@ -208,7 +212,7 @@ export async function POST(req: NextRequest): Promise {
**@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.
diff --git a/src/core/types.ts b/src/core/types.ts
index e3ae4bfb68..25081dc57a 100644
--- a/src/core/types.ts
+++ b/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';
diff --git a/src/index.ts b/src/index.ts
index 3ec77143c8..66156872cd 100644
--- a/src/index.ts
+++ b/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';
diff --git a/src/version.ts b/src/version.ts
index ed0f9da241..46d7dc0dd5 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1 +1 @@
-export const version = '0.5.3';
+export const version = '0.5.4';