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 @@ - OnchainKit logo vibes + OnchainKit logo vibes

@@ -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';