Case 2: Fetch user's Moxie earning

guide on how to create the desired frame using frog.fm

** The full code for this example can be found here.

** You can check the operation of the completed sample here. ** This example demonstrates creating a frame via frog.fm. For more details about frog, please refer to the official documentation below.

https://frog.fm/getting-started

This example creates a frame to view a specific user's moxie earning stat.

1. How to get data with Lum0x SDK 1) The farcasterMoxie.getEarningStat function gets the moxie earning stat for a specific fid.

     let res = await Lum0x.farcasterMoxie.getEarningStat({
         entity_type: "USER",
         entity_id: fid.toString(),
         timeframe: "LIFETIME"
     });
     let LIFETIME_STAT = res.data.FarcasterMoxieEarningStats.FarcasterMoxieEarningStat;

   2) Lookup for each timeframe.

     let res = await Lum0x.farcasterMoxie.getEarningStat({
         entity_type: "USER",
         entity_id: fid.toString(),
         timeframe: "LIFETIME"
     });
     let LIFETIME_STAT = res.data.FarcasterMoxieEarningStats.FarcasterMoxieEarningStat;
   
     res = await Lum0x.farcasterMoxie.getEarningStat({
         entity_type: "USER",
         entity_id: fid.toString(),
         timeframe: "WEEKLY"
     });
     let WEEKLY_STAT = res.data.FarcasterMoxieEarningStats.FarcasterMoxieEarningStat;
   
     res = await Lum0x.farcasterMoxie.getEarningStat({
         entity_type: "USER",
         entity_id: fid.toString(),
         timeframe: "TODAY"
     });
   
     let TODAY_STAT = res.data.FarcasterMoxieEarningStats.FarcasterMoxieEarningStat;

1. State Management 1) Setting initialState. (Set the initial targetFid to -1)

   const app = new Frog({
     assetsPath: "/",
     basePath: "/api",
     hub: neynar({ apiKey: process.env.NEYNAR_API_KEY ?? "" }),
     title: "Moxie Stat",
     imageAspectRatio: "1:1",
     imageOptions: {
       height: 800,
       width: 800,
     },
     initialState: {
       targetFid: -1
     },
   });

2) Update the state value with the value received as textInput (deriveState,previousState)

  const state = c.deriveState((previousState: any) => {
    previousState.targetFid = Number(c.inputText);
  });

1. How to bind data with image 1) call getMoxieImage and pass return value to image field.

app.frame("/moxie-stat", async (c) => {
  const fid = c.frameData?.fid;
  await postLum0xTestFrameValidation(Number(fid), "moxie-stat");

  const state = c.deriveState((previousState: any) => {
    previousState.targetFid = Number(c.inputText);
  });

  return c.res({
    image: await getMoxieImage(c.inputText == "" ? fid : state.targetFid),
    intents: [
      <TextInput placeholder="Enter Fid" />,
      <Button action="/moxie-stat">Search</Button>
    ],
  });
});

2) getMoxieImage is return <Box>

export async function getMoxieImage(fid?: number) {

  let result = await moxieStat(Number(fid));

  return (
    <Box
      grow
      alignVertical="center"
      padding="10"
      paddingBottom="26"
      marginTop="2"
      marginBottom="2"
      fontWeight="700"
      position="relative"
    >
      <div
        style={{
          position: "absolute",
          display: "flex",
          top: 0,
          left: 0,
          width: "100%",
        }}
      >
        <img src="/Result.png" />
      </div>

      <div
        style={{
          position: "absolute",
          display: "flex",
          top: 365,
          left: 90,
          width: 500,
          height: 45,
          color: "white",
          fontSize: 44,
          fontFamily: "coinbase",
        }}
      >
        {`${result.LIFETIME} MOXIE`}
      </div>


      <div
        style={{
          position: "absolute",
          display: "flex",
          top: 500,
          left: 90,
          width: 500,
          height: 45,
          color: "white",
          fontSize: 44,
          fontFamily: "coinbase",
        }}
      >
        {`${result.WEEKLY} MOXIE`}
      </div>

      <div
        style={{
          position: "absolute",
          display: "flex",
          top: 635,
          left: 90,
          width: 500,
          height: 45,
          color: "white",
          fontSize: 44,
          fontFamily: "coinbase",
        }}
      >
        {`${result.TODAY} MOXIE`}
      </div>


    </Box>
  );
}

4. Add postLum0xTestFrameValidation

call postLum0xTestFrameValidation when every frame page loads.

This makes track frame usage and generate dashboard page.

app.frame("/moxie-stat", async (c) => {
  const fid = c.frameData?.fid;
  await postLum0xTestFrameValidation(Number(fid), "moxie-stat");

  const state = c.deriveState((previousState: any) => {
    previousState.targetFid = Number(c.inputText);
  });

  return c.res({
    image: await getMoxieImage(c.inputText == "" ? fid : state.targetFid),
    intents: [
      <TextInput placeholder="Enter Fid" />,
      <Button action="/moxie-stat">Search</Button>
    ],
  });
});

1. Please deploy the completed project code on Vercel. For instructions on how to deploy via Vercel, refer to this guide here.