fix: modules imports (#163)

.changeset/mean-gorillas-reflect.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+- **fix**: make sure imports from `core`, `farcaster` and `xmtp` work.

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"
     }
   }
 }

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 [email protected] 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 [email protected] 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 [email protected] 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:
     - [`<Avatar />`](/identitykit/avatar)
     - [`<Name />`](/identitykit/name)
+
+- [XMTP Kit](/xmtpkit/introduction)
+  - Utilities:
+    - [`getXmtpFrameMessage`](/xmtpkit/get-xmtp-frame-message)
+    - [`isXmtpFrameRequest`](/xmtpkit/is-xmtp-frame-request)

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
 

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<NextResponse> {
-  // 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<Response> {
-  return getResponse(req);
-}
 ```
 
 ## Returns
 
-```ts
-type Promise<XmtpFrameValidationResponse>;
-
-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<XmtpFrameValidationResponse>`](/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<XmtpFramesRequest>`](/xmtpkit/types#xmtpframesrequest)

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)

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<NextResponse> {
+  const body: FrameRequest = await req.json();
+  if (isXmtpFrameRequest(body)) {
+    // [!code focus]
+    // [!code focus]
+    // ...
+  }
+}
+```
+
+## Returns
+
+- **Type:** `boolean`
+
+## Parameters
+
+[`XmtpFramesRequest`](/xmtpkit/types#xmtpframesrequest)

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 };
+```

src/version.ts

@@ -1 +1 @@
-export const version = '0.8.0';
+export const version = '0.8.2';

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@')) {

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 (