feat(erc-20): separate and cache initial load

Author: stephancill

examples/api/src/app/api/erc-20/lib/utils.ts

@@ -65,7 +65,10 @@ export async function getFollowingHolderInfo({
   fid: string;
   tokenAddress: string;
   blockchain: string;
-}): Promise<{ user: FarcasterUser; amount: number }[]> {
+}): Promise<{
+  holders: { user: FarcasterUser; amount: number }[];
+  holdersCount: number;
+}> {
   const acc: any[] = [];
 
   let hasNextPage = true;
@@ -118,7 +121,7 @@ export async function getFollowingHolderInfo({
     })
     .sort((a, b) => Number(b.amount) - Number(a.amount));
 
-  return result;
+  return { holders: result, holdersCount: result.length };
 }
 
 export async function getPriceData({
@@ -170,7 +173,7 @@ export async function getPriceData({
       change24hNumber.toFixed(2)
     ).toLocaleString();
     const change24hFormatted =
-      change24hNumber > 0 ? `+${change24hPartial}%` : `-${change24hPartial}%`;
+      change24hNumber > 0 ? `+${change24hPartial}%` : `-${-change24hPartial}%`;
 
     return {
       unitPriceUsd: unitPriceUsdFormatted,
@@ -181,6 +184,7 @@ export async function getPriceData({
   }
 
   // Use on-chain data as fallback
+  // TODO: Query uniswap contracts directly
   const chain = chainByName[blockchain.toLowerCase()];
   const url = `https://api.1inch.dev/price/v1.1/${chain.id}/${tokenAddress}?currency=USD`;
   const res = await fetch(url, {
@@ -195,7 +199,7 @@ export async function getPriceData({
   };
 }
 
-export async function tokenInfo({
+export async function getTokenInfo({
   tokenAddress,
   blockchain,
 }: {

examples/api/src/app/api/erc-20/route.ts

@@ -1,66 +1,75 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextRequest } from "next/server";
 import {
   getFollowingHolderInfo,
   getPriceData,
   parseTokenParam,
-  tokenInfo,
+  getTokenInfo,
 } from "./lib/utils";
 
 export async function GET(request: NextRequest) {
-  const fid = request.nextUrl.searchParams.get("fid")?.toLowerCase();
+  const fid = request.nextUrl.searchParams.get("fid");
   const token = request.nextUrl.searchParams.get("token")?.toLowerCase();
   let tokenAddress = request.nextUrl.searchParams
     .get("tokenAddress")
     ?.toLowerCase();
   let blockchain = request.nextUrl.searchParams
     .get("blockchain")
     ?.toLowerCase();
+  const methodName = request.nextUrl.searchParams
+    .get("function")
+    ?.toLowerCase();
 
   if (token) {
     const parsedToken = parseTokenParam(token);
     tokenAddress = parsedToken.tokenAddress;
     blockchain = parsedToken.blockchain;
   }
 
-  if (!tokenAddress) {
-    return NextResponse.json({
-      error: "Missing tokenAddress",
-    });
-  }
+  const { fn, options } = {
+    holders: {
+      fn: getFollowingHolderInfo,
+      options: {
+        headers: new Headers({
+          "Cache-Control": "public, max-age=3600, immutable",
+        }),
+      },
+    },
+    price: {
+      fn: getPriceData,
+      options: {
+        headers: new Headers({
+          "Cache-Control": "public, max-age=3600, immutable",
+        }),
+      },
+    },
+    token: {
+      fn: getTokenInfo,
+      options: {
+        headers: new Headers({
+          "Cache-Control": "public, max-age=3600, immutable",
+        }),
+      },
+    },
+  }[methodName];
 
-  if (!blockchain) {
-    return NextResponse.json({
-      error: "Missing or invalid blockchain",
+  if (!fn) {
+    return Response.json({
+      error: "Invalid function",
     });
   }
 
-  const [holderData, priceData, tokenData] = await Promise.all([
-    getFollowingHolderInfo({
-      blockchain: blockchain,
-      tokenAddress: tokenAddress,
-      fid: fid,
-    }),
-    getPriceData({
-      blockchain: blockchain,
-      tokenAddress: tokenAddress,
-    }),
-    tokenInfo({
-      tokenAddress,
-      blockchain,
-    }),
-  ]);
+  const result = await fn({
+    fid,
+    tokenAddress,
+    blockchain,
+  });
 
-  return NextResponse.json({
-    holderData: {
-      holders: [...(holderData || [])],
-      holdersCount: holderData?.length || 0,
-    },
-    priceData,
-    tokenData,
+  return Response.json(result, {
+    ...options,
   });
 }
 
 // needed for preflight requests to succeed
 export const OPTIONS = async (request: NextRequest) => {
-  return NextResponse.json({});
+  return Response.json({});
 };

mods/erc-20/src/buying.ts

@@ -13,7 +13,8 @@ const buy: ModElement[] = [
           {
             type: "text",
             label:
-              "Buying ~${{refs.buyAmountUsd}} of {{refs.tokenReq.response.data.tokenData.name}}...",
+              "Buying ~${{refs.buyAmountUsd}} of {{refs.tokenReq.response.data.name}}...",
+            variant: "secondary",
           },
         ],
       },
@@ -37,7 +38,7 @@ const buy: ModElement[] = [
         ],
       },
       {
-        type: "horizontal-layout",
+        type: "vertical-layout",
         onload: {
           type: "POST",
           url: "{{api}}/erc-20/buy?walletAddress={{user.wallet.address}}&token={{embed.url}}&buyAmountUsd={{refs.buyAmountUsd}}",