feat: haidilao imgv2

degencast · Apr 3, 2024 · 48d5fbe · 48d5fbe
1 parent 5ff3c89
commit 48d5fbe
Show file tree

Hide file tree

Showing 2 changed files with 203 additions and 2 deletions.
diff --git a/src/haidilao/check.tsx b/src/haidilao/check.tsx
@@ -30,7 +30,7 @@ export async function check(c: FrameContext) {
   }
   return c.res({
     action: "/",
-    image: `/haidilao/images/check/${fid}/image.png`,
+    image: `/haidilao/images/check/${fid}/imagev2.png`,
     intents: [
       <Button action={`/`}>Back</Button>,
       <Button.Link
@@ -41,7 +41,7 @@ export async function check(c: FrameContext) {
 ` +
             `join /haidilao and keep updates`
         )}&embeds[]=${
-          HAI_DI_LAO_FRAME + `/images/check/${fid}/image.png`
+          HAI_DI_LAO_FRAME + `/images/check/${fid}/imagev2.png`
         }&embeds[]=${HAI_DI_LAO_FRAME}`}
       >
         Share

diff --git a/src/haidilao/images/index.tsx b/src/haidilao/images/index.tsx
@@ -242,4 +242,205 @@ images.hono.get("/check/:fid/image.png", async (ctx) => {
   });
 });
 
+images.hono.get("/check/:fid/imagev2.png", async (ctx) => {
+  const fid = ctx.req.param("fid");
+  if (fid === "0") {
+    const errorImg = (
+      <div
+        style={{ ...backgroundStyles, padding: 64, backgroundColor: "#6944BA" }}
+      >
+        {fid}
+      </div>
+    );
+    return new ImageResponse(errorImg, {
+      format: "png",
+      headers: {
+        "Cache-Control": "public, max-age=3600",
+      },
+    });
+  }
+  const { ethAddress } = (await getAddressFromFid(Number(fid))) as {
+    ethAddress: `0x${string}`;
+  };
+  if (!ethAddress) {
+    const errorImg = (
+      <div
+        style={{ ...backgroundStyles, padding: 64, backgroundColor: "#6944BA" }}
+      >
+        There is no wallet address associated with this account.
+      </div>
+    );
+    return new ImageResponse(errorImg, {
+      format: "png",
+      headers: {
+        "Cache-Control": "public, max-age=3600",
+      },
+    });
+  }
+  const [user, degenSold] = await Promise.all([
+    getUserDataByFid(Number(fid)),
+    fetchSoldDegen({ address: ethAddress }),
+  ]);
+  const degenPriceData = await fetchDegenPrice();
+  const degenPrice = degenPriceData.pair.priceUsd;
+
+  const transfers = degenSold.result.transfers;
+  //   console.log(transfers);
+
+  let amount = 0;
+  for (let i = 0; i < transfers.length; i++) {
+    amount += transfers[i].value;
+  }
+  const total = amount * Number(degenPrice || 0);
+  //   console.log({ amount });
+  const image = (
+    <div
+      style={{
+        ...backgroundStyles,
+        padding: 40,
+        backgroundColor: "#D92622",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        gap: 20,
+      }}
+    >
+      <div
+        style={{
+          ...backgroundStyles,
+          position: "relative",
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+          width: "720px",
+          height: "200px",
+          padding: "0px",
+          gap: "10px",
+          backgroundColor: "none",
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "100% 100%",
+          backgroundImage: `url(${HAI_DI_LAO_FRAME}/images/dialog.png)`,
+        }}
+      >
+        <div
+          style={{
+            ...backgroundStyles,
+            flexDirection: "row",
+            justifyContent: "flex-start",
+            alignItems: "center",
+            fontSize: 24,
+            height: "55px",
+            padding: "25px 20px 0 20px",
+            gap: "0px",
+            backgroundColor: "none",
+            // border: "2px solid rgba(15, 36, 56, 0.1)",
+            fontFamily: "upheaval",
+          }}
+        >
+          <span>{user.display}</span>
+          <span>{`@${user.username}:`}</span>
+        </div>
+        <div
+          style={{
+            ...backgroundStyles,
+            flexDirection: "row",
+            justifyContent: "flex-start",
+            alignItems: "flex-start",
+            fontSize: 32,
+            padding: "0px 20px 25px 20px",
+            height: "auto",
+            backgroundColor: "none",
+            // border: "2px solid rgba(15, 36, 56, 0.1)",
+          }}
+        >
+          I sold {amount.toLocaleString().split(".")[0]} $degen for $
+          {total.toLocaleString().split(".")[0]}, if i held them today i can
+          have...
+        </div>
+      </div>
+
+      <div
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          display: "flex",
+          gap: 40,
+          with: "100%",
+          height: "auto",
+          // fontSize: "50px",
+          backgroundColor: "none",
+          fontFamily: "inter",
+          position: "relative",
+        }}
+      >
+        <div
+          style={{
+            ...backgroundStyles,
+            position: "relative",
+            flexDirection: "column",
+            justifyContent: "flex-start",
+            alignItems: "flex-start",
+            width: "160px",
+            height: "160px",
+            padding: "9px",
+            gap: "0px",
+            backgroundColor: "none",
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "100% 100%",
+            backgroundImage: `url(${HAI_DI_LAO_FRAME}/images/avatar.png)`,
+          }}
+        >
+          <img
+            src={user.pfp}
+            alt=""
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+          />
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-start",
+            alignItems: "flex-start",
+            fontSize: 60,
+            // flexGrow: 1,
+            // border: "2px solid rgba(15, 36, 56, 0.1)",
+            height: "180px",
+            width: "500px",
+            padding: "0px",
+            margin: "0px",
+          }}
+        >
+          <div
+            style={{
+              color: "#F9D818",
+            }}
+          >
+            {(total / 50).toLocaleString()}
+          </div>
+          <div>time haidilao hot pot!!!!!</div>
+        </div>
+      </div>
+    </div>
+  );
+  return new ImageResponse(image, {
+    format: "png",
+    headers: {
+      "Cache-Control": "public, max-age=3600",
+    },
+    width: 800,
+    height: 480,
+    fonts: [
+      {
+        data: upheavttFont,
+        name: "upheaval",
+      },
+    ],
+  });
+});
+
 export default images;