From 27affc7d48913895b26629f2206ec115b0d58c42 Mon Sep 17 00:00:00 2001
From: Christopher Nascone <cnasc@users.noreply.github.com>
Date: Sat, 24 Feb 2024 18:14:55 -0500
Subject: [PATCH] chore: pin onchainkit, update aspect ratio classname (#191)

---
 framegear/components/Frame/Frame.tsx | 9 +++++----
 framegear/package.json               | 2 +-
 framegear/yarn.lock                  | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/framegear/components/Frame/Frame.tsx b/framegear/components/Frame/Frame.tsx
index fb38149699..0590d597a7 100644
--- a/framegear/components/Frame/Frame.tsx
+++ b/framegear/components/Frame/Frame.tsx
@@ -20,9 +20,10 @@ export function Frame() {
 }
 
 function ValidFrame({ tags }: { tags: Record<string, string> }) {
-  const { image, imageAspectRatio, input, buttons } = useMemo(() => {
+  const { image, imageAspectRatioClassname, input, buttons } = useMemo(() => {
     const image = tags['fc:frame:image'];
-    const imageAspectRatio = tags['fc:frame:image:aspect_ratio'] === '1:1' ? '1/1' : '1.91/1';
+    const imageAspectRatioClassname =
+      tags['fc:frame:image:aspect_ratio'] === '1:1' ? 'aspect-square' : 'aspect-[1.91/1]';
     const input = tags['fc:frame:input:text'];
     // TODO: when debugger is live we will also need to extract actions, etc.
     const buttons = [1, 2, 3, 4].map((index) => {
@@ -39,7 +40,7 @@ function ValidFrame({ tags }: { tags: Record<string, string> }) {
     });
     return {
       image,
-      imageAspectRatio,
+      imageAspectRatioClassname,
       input,
       buttons,
     };
@@ -49,7 +50,7 @@ function ValidFrame({ tags }: { tags: Record<string, string> }) {
     <div>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
-        className={`w-full rounded-t-xl aspect-[${imageAspectRatio}] object-cover`}
+        className={`w-full rounded-t-xl ${imageAspectRatioClassname} object-cover`}
         src={image}
         alt=""
       />
diff --git a/framegear/package.json b/framegear/package.json
index 5b9907cbb8..5c623e1d5b 100644
--- a/framegear/package.json
+++ b/framegear/package.json
@@ -10,7 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "^0.9.4",
+    "@coinbase/onchainkit": "0.9.4",
     "@radix-ui/react-icons": "^1.3.0",
     "jotai": "^2.6.4",
     "next": "14.1.0",
diff --git a/framegear/yarn.lock b/framegear/yarn.lock
index cc9666f11c..8aacfced27 100644
--- a/framegear/yarn.lock
+++ b/framegear/yarn.lock
@@ -438,7 +438,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/onchainkit@npm:^0.9.4":
+"@coinbase/onchainkit@npm:0.9.4":
   version: 0.9.4
   resolution: "@coinbase/onchainkit@npm:0.9.4"
   peerDependencies:
@@ -3193,7 +3193,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "framegear@workspace:."
   dependencies:
-    "@coinbase/onchainkit": "npm:^0.9.4"
+    "@coinbase/onchainkit": "npm:0.9.4"
     "@radix-ui/react-icons": "npm:^1.3.0"
     "@testing-library/jest-dom": "npm:^6.4.2"
     "@testing-library/react": "npm:^14.2.1"