diff --git a/.changeset/mean-gorillas-reflect.md b/.changeset/mean-gorillas-reflect.md new file mode 100644 index 0000000000..a8d8d98386 --- /dev/null +++ b/.changeset/mean-gorillas-reflect.md @@ -0,0 +1,5 @@ +--- +'@coinbase/onchainkit': patch +--- + +- **fix**: make sure imports from `core`, `farcaster` and `xmtp` work. diff --git a/package.json b/package.json index f679baaf48..f63e389fb0 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,36 @@ "default": "./lib/index.js" }, "default": "./lib/index.js" + }, + "./core": { + "types": "./lib/core/index.d.ts", + "browser": { + "types": "./esm/core/index.d.ts", + "module": "./esm/core/index.js", + "import": "./esm/core/index.js", + "default": "./lib/core/index.js" + }, + "default": "./lib/core/index.js" + }, + "./farcaster": { + "types": "./lib/farcaster/index.d.ts", + "browser": { + "types": "./esm/farcaster/index.d.ts", + "module": "./esm/farcaster/index.js", + "import": "./esm/farcaster/index.js", + "default": "./lib/farcaster/index.js" + }, + "default": "./lib/farcaster/index.js" + }, + "./xmtp": { + "types": "./lib/xmtp/index.d.ts", + "browser": { + "types": "./esm/xmtp/index.d.ts", + "module": "./esm/xmtp/index.js", + "import": "./esm/xmtp/index.js", + "default": "./lib/xmtp/index.js" + }, + "default": "./lib/xmtp/index.js" } } } diff --git a/site/docs/pages/getting-started.mdx b/site/docs/pages/getting-started.mdx index 55e83c459b..826359bba1 100644 --- a/site/docs/pages/getting-started.mdx +++ b/site/docs/pages/getting-started.mdx @@ -4,17 +4,37 @@ Add OnchainKit to your project, install the required packages. ## Installation -```sh -# Use Yarn -yarn add @coinbase/onchainkit +:::code-group -# Use NPM +```bash [npm] npm install @coinbase/onchainkit -# Use PNPM +# Depending on the components or utilities you use, +# you may end up utilizing any of those libraries. +npm install viem@2.x react@18 react-dom@18 +npm install graphql@14 graphql-request@6 +``` + +```bash [yarn] +yarn add @coinbase/onchainkit + +# Depending on the components or utilities you use, +# you may end up utilizing any of those libraries. +yarn add viem@2.x react@18 react-dom@18 +yarn add graphql@14 graphql-request@6 +``` + +```bash [pnpm] pnpm add @coinbase/onchainkit + +# Depending on the components or utilities you use, +# you may end up utilizing any of those libraries. +pnpm install viem@2.x react@18 react-dom@18 +pnpm install graphql@14 graphql-request@6 ``` +::: + OnchainKit is divided into various theme utilities and components that are available for your use: - [Farcaster Kit](/farcasterkit/introduction) @@ -33,6 +53,12 @@ OnchainKit is divided into various theme utilities and components that are avail - [Framegear](/framekit/framegear) - [Identity Kit](/identitykit/introduction) + - Components: - [``](/identitykit/avatar) - [``](/identitykit/name) + +- [XMTP Kit](/xmtpkit/introduction) + - Utilities: + - [`getXmtpFrameMessage`](/xmtpkit/get-xmtp-frame-message) + - [`isXmtpFrameRequest`](/xmtpkit/is-xmtp-frame-request) diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx index a7c41907e9..a75d869d4a 100644 --- a/site/docs/pages/index.mdx +++ b/site/docs/pages/index.mdx @@ -99,6 +99,7 @@ OnchainKit offers three themes packed with React components and TypeScript utili - [XMTP Kit](/xmtpkit/introduction) - Utilities: - [`getXmtpFrameMessage`](/xmtpkit/get-xmtp-frame-message) + - [`isXmtpFrameRequest`](/xmtpkit/is-xmtp-frame-request) # Community diff --git a/site/docs/pages/xmtpkit/get-xmtp-frame-message.mdx b/site/docs/pages/xmtpkit/get-xmtp-frame-message.mdx index ea9e476c9c..acd135266e 100644 --- a/site/docs/pages/xmtpkit/get-xmtp-frame-message.mdx +++ b/site/docs/pages/xmtpkit/get-xmtp-frame-message.mdx @@ -12,76 +12,26 @@ You can also use `getXmtpFrameMessage` to access useful information such as: Note that if the `message` is not valid, it will be undefined. -**In order to use `getXmtpFrameMessage` you must also install `@xmtp/frames-validator` in your app, alongside onchainkit** - -```sh -yarn add @xmtp/frames-validator -# OR -npm i --save @xmtp/frames-validator -``` - ```ts -import { FrameRequest, getFrameMessage } from '@coinbase/onchainkit'; -import { isXmtpFrameRequest, getXmtpFrameMessage } from '@coinbase/onchainkit/xmtp'; -import { NextRequest, NextResponse } from 'next/server'; +import { FrameRequest } from '@coinbase/onchainkit'; +import { isXmtpFrameRequest, getXmtpFrameMessage } from '@coinbase/onchainkit/xmtp'; // [!code focus] +import { NextResponse } from 'next/server'; async function getResponse(req: any): Promise { - // Step 2. Read the body from the Next Request const body: FrameRequest = await req.json(); if (isXmtpFrameRequest(body)) { - const { isValid, message } = await getXmtpFrameMessage(body); + const { isValid, message } = await getXmtpFrameMessage(body); // [!code focus] // ... do something with the message if isValid is true } else { - const { isValid, message } = await getFrameMessage(body, { - neynarApiKey, - }); - // ... do something with the message if isValid is true + // ... } } - -export async function POST(req: NextRequest): Promise { - return getResponse(req); -} ``` ## Returns -```ts -type Promise; - -type XmtpFrameValidationResponse = - | { isValid: true; message: XmtpFrameValidationData } - | { isValid: false; message: undefined }; - -interface FrameValidationData { - frameUrl: string; - buttonIndex: number; - timestamp: number; - identifier: string; - verifiedWalletAddress: string; - // Same as verifiedWalletAddress - identifier: string; -} -``` +[`Promise`](/xmtpkit/types#xmtpframevalidationresponse) -## Param +## Parameters -```ts -export type UntrustedData = { - url: string; - timestamp: number; - buttonIndex: number; - inputText?: string; - opaqueConversationIdentifier: string; - walletAddress: string; -}; - -// The Frame Signature Packet body -export type XmtpFramesRequest = { - clientProtocol: `xmtp@${string}`; - untrustedData: UntrustedData; - trustedData: { - messageBytes: string; - }; -}; -``` +[`Promise`](/xmtpkit/types#xmtpframesrequest) diff --git a/site/docs/pages/xmtpkit/introduction.mdx b/site/docs/pages/xmtpkit/introduction.mdx index 2f8921208f..61b4bb83af 100644 --- a/site/docs/pages/xmtpkit/introduction.mdx +++ b/site/docs/pages/xmtpkit/introduction.mdx @@ -7,8 +7,27 @@ deescription: Introduction to XMTP Kit XMTP Kit is designed to be modular and flexible, allowing developers to use only the parts of the protocol that they need. +In order to use **XMTP Kit** you must also install `@xmtp/frames-validator` in your app, alongside Onchainkit. + +:::code-group + +```bash [npm] +npm install @coinbase/onchainkit @xmtp/frames-validator +``` + +```bash [yarn] +yarn add @coinbase/onchainkit @xmtp/frames-validator +``` + +```bash [pnpm] +pnpm add @coinbase/onchainkit @xmtp/frames-validator +``` + +::: + To assist you in engaging with XMTP, here is the XMTP Kit which includes: - [XMTP Kit](/xmtpkit/introduction) - Utilities: - [`getXmtpFrameMessage`](/xmtpkit/get-xmtp-frame-message) + - [`isXmtpFrameRequest`](/xmtpkit/is-xmtp-frame-request) diff --git a/site/docs/pages/xmtpkit/is-xmtp-frame-request.mdx b/site/docs/pages/xmtpkit/is-xmtp-frame-request.mdx index 6691ba2f2c..9613a8f1a8 100644 --- a/site/docs/pages/xmtpkit/is-xmtp-frame-request.mdx +++ b/site/docs/pages/xmtpkit/is-xmtp-frame-request.mdx @@ -1,3 +1,24 @@ # isXmtpFrameRequest -isXmtpFrameRequest +```ts +import { FrameRequest } from '@coinbase/onchainkit'; +import { isXmtpFrameRequest } from '@coinbase/onchainkit/xmtp'; // [!code focus] +import { NextResponse } from 'next/server'; + +async function getResponse(req: any): Promise { + const body: FrameRequest = await req.json(); + if (isXmtpFrameRequest(body)) { + // [!code focus] + // [!code focus] + // ... + } +} +``` + +## Returns + +- **Type:** `boolean` + +## Parameters + +[`XmtpFramesRequest`](/xmtpkit/types#xmtpframesrequest) diff --git a/site/docs/pages/xmtpkit/types.mdx b/site/docs/pages/xmtpkit/types.mdx new file mode 100644 index 0000000000..a6b53dfe8b --- /dev/null +++ b/site/docs/pages/xmtpkit/types.mdx @@ -0,0 +1,36 @@ +--- +title: XmtpKit Types +deescription: Glossary of Types in XmtpKit Kit. +--- + +# Types [Glossary of Types in XmtpKit Kit.] + +## `XmtpFramesRequest` + +```ts +export type UntrustedData = { + url: string; + timestamp: number; + buttonIndex: number; + inputText?: string; + opaqueConversationIdentifier: string; + walletAddress: string; +}; + +// The Frame Signature Packet body +export type XmtpFramesRequest = { + clientProtocol: `xmtp@${string}`; + untrustedData: UntrustedData; + trustedData: { + messageBytes: string; + }; +}; +``` + +## `XmtpFrameValidationResponse` + +```ts +type XmtpFrameValidationResponse = + | { isValid: true; message: XmtpFrameValidationData } + | { isValid: false; message: undefined }; +``` diff --git a/src/version.ts b/src/version.ts index 3cd94dc7d5..21ea39227c 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export const version = '0.8.0'; +export const version = '0.8.2'; diff --git a/src/xmtp/getXmtpFrameMessage.ts b/src/xmtp/getXmtpFrameMessage.ts index b93b600034..92a42147b4 100644 --- a/src/xmtp/getXmtpFrameMessage.ts +++ b/src/xmtp/getXmtpFrameMessage.ts @@ -1,4 +1,5 @@ -import { validateFramesPost, XmtpOpenFramesRequest } from '@xmtp/frames-validator'; +import { validateFramesPost } from '@xmtp/frames-validator'; +import type { XmtpOpenFramesRequest } from '@xmtp/frames-validator'; export async function getXmtpFrameMessage(payload: XmtpOpenFramesRequest) { if (!payload.clientProtocol || !payload.clientProtocol.startsWith('xmtp@')) { diff --git a/src/xmtp/isXmtpFrameRequest.ts b/src/xmtp/isXmtpFrameRequest.ts index 00cbd4cba0..2c85c452d6 100644 --- a/src/xmtp/isXmtpFrameRequest.ts +++ b/src/xmtp/isXmtpFrameRequest.ts @@ -1,4 +1,4 @@ -import { XmtpOpenFramesRequest } from '@xmtp/frames-validator'; +import type { XmtpOpenFramesRequest } from '@xmtp/frames-validator'; export function isXmtpFrameRequest(payload: any): payload is XmtpOpenFramesRequest { return ( diff --git a/src/xmtp/types.ts b/src/xmtp/types.ts new file mode 100644 index 0000000000..e69de29bb2