Merge pull request #198 from xmtp/nm/use-new-frames-proxy

Use new frames proxy
xmtp · Feb 21, 2024 · 5977fd5 · 5977fd5
2 parents b5efa9a + 90f22ef
commit 5977fd5
Show file tree

Hide file tree

Showing 8 changed files with 208 additions and 82 deletions.
diff --git a/.changeset/ten-ducks-applaud.md b/.changeset/ten-ducks-applaud.md
@@ -0,0 +1,5 @@
+---
+"@xmtp/frames-client": minor
+---
+
+Use new Frames Proxy with support for frameInfo field
diff --git a/packages/frames-client/package.json b/packages/frames-client/package.json
@@ -9,11 +9,7 @@
     "js",
     "ts",
     "javascript",
-    "typescript",
-    "react",
-    "reactjs",
-    "react-hooks",
-    "hooks"
+    "typescript"
   ],
   "homepage": "https://github.com/xmtp/xmtp-web",
   "bugs": {
@@ -67,11 +63,13 @@
   },
   "dependencies": {
     "@noble/hashes": "^1.3.3",
+    "@open-frames/proxy-client": "^0.1.2",
     "@xmtp/proto": "3.41.0-beta.5",
     "long": "^5.2.3"
   },
   "devDependencies": {
-    "@open-frames/types": "^0.0.5",
+    "@open-frames/proxy": "^0.0.3",
+    "@open-frames/types": "^0.0.6",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@xmtp/tsconfig": "workspace:*",

diff --git a/packages/frames-client/src/constants.ts b/packages/frames-client/src/constants.ts
@@ -1,3 +1,3 @@
-export const OPEN_FRAMES_PROXY_URL = "https://open-frames-proxy.fly.dev/";
+export const OPEN_FRAMES_PROXY_URL = "https://frames.xmtp.chat/";
 
 export const PROTOCOL_VERSION = "2024-02-09";
diff --git a/packages/frames-client/src/index.test.ts b/packages/frames-client/src/index.test.ts
@@ -75,9 +75,27 @@ describe("signFrameAction", () => {
     async () => {
       const frameUrl =
         "https://fc-polls-five.vercel.app/polls/01032f47-e976-42ee-9e3d-3aac1324f4b8";
-
       const metadata = await framesClient.proxy.readMetadata(frameUrl);
       expect(metadata).toBeDefined();
+      expect(metadata.frameInfo).toMatchObject({
+        acceptedClients: {
+          farcaster: "vNext",
+        },
+        buttons: {
+          "1": {
+            label: "Yes",
+          },
+          "2": {
+            label: "No",
+          },
+        },
+        image: {
+          content:
+            "https://fc-polls-five.vercel.app/api/image?id=01032f47-e976-42ee-9e3d-3aac1324f4b8",
+        },
+        postUrl:
+          "https://fc-polls-five.vercel.app/api/vote?id=01032f47-e976-42ee-9e3d-3aac1324f4b8",
+      });
       const signedPayload = await framesClient.signFrameAction({
         frameUrl,
         buttonIndex: 1,

diff --git a/packages/frames-client/src/proxy.ts b/packages/frames-client/src/proxy.ts
@@ -1,79 +1,34 @@
+import { OpenFramesProxy as BaseProxy } from "@open-frames/proxy-client";
 import { OPEN_FRAMES_PROXY_URL } from "./constants";
-import { ApiError } from "./errors";
 import type {
   FramePostPayload,
   FramesApiRedirectResponse,
   FramesApiResponse,
 } from "./types";
 
 export default class OpenFramesProxy {
-  baseUrl: string;
+  inner: BaseProxy;
 
   constructor(baseUrl: string = OPEN_FRAMES_PROXY_URL) {
-    this.baseUrl = baseUrl;
+    this.inner = new BaseProxy(baseUrl);
   }
 
-  async readMetadata(url: string): Promise<FramesApiResponse> {
-    const response = await fetch(
-      `${this.baseUrl}?url=${encodeURIComponent(url)}`,
-    );
-
-    if (!response.ok) {
-      throw new ApiError(`Failed to read metadata for ${url}`, response.status);
-    }
-
-    return (await response.json()) as FramesApiResponse;
+  readMetadata(url: string) {
+    return this.inner.readMetadata(url);
   }
 
-  async post(
-    url: string,
-    payload: FramePostPayload,
-  ): Promise<FramesApiResponse> {
-    const response = await fetch(
-      `${this.baseUrl}?url=${encodeURIComponent(url)}`,
-      {
-        method: "POST",
-        body: JSON.stringify(payload),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(
-        `Failed to post to frame: ${response.status} ${response.statusText}`,
-      );
-    }
-
-    return (await response.json()) as FramesApiResponse;
+  post(url: string, payload: FramePostPayload): Promise<FramesApiResponse> {
+    return this.inner.post(url, payload);
   }
 
-  async postRedirect(
+  postRedirect(
     url: string,
     payload: FramePostPayload,
   ): Promise<FramesApiRedirectResponse> {
-    const response = await fetch(
-      `${this.baseUrl}redirect?url=${encodeURIComponent(url)}`,
-      {
-        method: "POST",
-        body: JSON.stringify(payload),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(
-        `Failed to post to frame: ${response.status} ${response.statusText}`,
-      );
-    }
-
-    return (await response.json()) as FramesApiRedirectResponse;
+    return this.inner.postRedirect(url, payload);
   }
 
   mediaUrl(url: string): string {
-    return `${this.baseUrl}media?url=${encodeURIComponent(url)}`;
+    return this.inner.mediaUrl(url);
   }
 }
diff --git a/packages/frames-client/src/types.ts b/packages/frames-client/src/types.ts
@@ -1,14 +1,12 @@
 import type { OpenFramesUntrustedData } from "@open-frames/types";
+import type {
+  GetMetadataResponse,
+  PostRedirectResponse,
+} from "@open-frames/proxy-client";
 
-export type FramesApiResponse = {
-  url: string;
-  extractedTags: { [k: string]: string };
-};
+export type FramesApiResponse = GetMetadataResponse;
 
-export type FramesApiRedirectResponse = {
-  originalUrl: string;
-  redirectedTo: string;
-};
+export type FramesApiRedirectResponse = PostRedirectResponse;
 
 export type FramePostUntrustedData = OpenFramesUntrustedData & {
   walletAddress: string; // Untrusted version of the wallet address

diff --git a/packages/frames-client/tsconfig.json b/packages/frames-client/tsconfig.json
@@ -1,9 +1,4 @@
 {
   "extends": "@xmtp/tsconfig/react-sdk.json",
   "include": ["src", ".eslintrc.cjs", "vitest.config.ts", "vitest.setup.ts"],
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"],
-    },
-  },
 }