feat: add frames logic

packages/react-app-revamp/helpers/shortenEthereumAddress.ts

@@ -1,4 +1,6 @@
 export function shortenEthereumAddress(address: string) {
+  if (!address) return "";
+
   const front = address.slice(0, 5); // Get first 5 characters
   const mid = "...";
   const end = address.slice(-4); // Get last 4 characters

packages/react-app-revamp/helpers/shortenProposalId.ts

@@ -0,0 +1,9 @@
+export const shortenProposalId = (proposalId: string) => {
+  if (!proposalId) return "";
+
+  const front = proposalId.slice(0, 5);
+  const mid = "...";
+  const end = proposalId.slice(-4);
+  const shortenedProposalId = front + mid + end;
+  return shortenedProposalId;
+};

packages/react-app-revamp/hooks/useProposal/utils.ts

@@ -1,4 +1,4 @@
-import { config } from "@config/wagmi";
+import { serverConfig } from "@config/wagmi/server";
 import { isContentTweet } from "@helpers/isContentTweet";
 import isUrlToImage from "@helpers/isUrlToImage";
 import { readContract, readContracts } from "@wagmi/core";
@@ -171,7 +171,7 @@ export function transformProposalData(
  */
 export async function getProposalIdsRaw(contractConfig: any, isLegacy: boolean) {
   if (isLegacy) {
-    return (await readContract(config, {
+    return (await readContract(serverConfig, {
       ...contractConfig,
       functionName: "getAllProposalIds",
       args: [],
@@ -190,7 +190,7 @@ export async function getProposalIdsRaw(contractConfig: any, isLegacy: boolean)
       },
     ];
 
-    const results: any[] = await readContracts(config, { contracts });
+    const results: any[] = await readContracts(serverConfig, { contracts });
 
     const allProposals = results[0].result[0];
     const deletedIdsArray = results[1]?.result;

packages/react-app-revamp/lib/frames/submission/index.ts

@@ -0,0 +1,129 @@
+import { serverConfig } from "@config/wagmi/server";
+import { readContract, readContracts } from "@wagmi/core";
+import { Abi } from "viem";
+import { EMPTY_ROOT } from "../utils";
+
+export const targetMetadata = {
+  targetAddress: "0x0000000000000000000000000000000000000000",
+};
+
+export const safeMetadata = {
+  signers: ["0x0000000000000000000000000000000000000000"],
+  threshold: 1,
+};
+
+export const fetchContestInitialData = async (abi: Abi, chainId: number, address: string) => {
+  const contracts = [
+    {
+      address: address as `0x${string}`,
+      abi: abi,
+      chainId,
+      functionName: "name",
+    },
+    {
+      address: address as `0x${string}`,
+      abi: abi,
+      chainId,
+      functionName: "creator",
+    },
+    {
+      address: address as `0x${string}`,
+      abi: abi,
+      chainId,
+      functionName: "submissionMerkleRoot",
+    },
+    {
+      address: address as `0x${string}`,
+      abi: abi,
+      chainId,
+      functionName: "contestStart",
+    },
+    {
+      address: address as `0x${string}`,
+      abi: abi,
+      chainId,
+      functionName: "voteStart",
+    },
+  ];
+
+  const results = (await readContracts(serverConfig, { contracts })) as any;
+  const name = results[0].result as string;
+  const creator = results[1].result as string;
+  const submissionMerkleRoot = results[2].result as string;
+  const submissionsOpenDate = new Date(Number(results[3].result) * 1000 + 1000);
+  const submissionsClosedDate = new Date(Number(results[4].result) * 1000 + 1000);
+  let anyoneCanSubmit = false;
+
+  if (submissionMerkleRoot === EMPTY_ROOT) {
+    anyoneCanSubmit = true;
+  }
+
+  return {
+    name,
+    creator,
+    anyoneCanSubmit,
+    submissionsOpenDate,
+    submissionsClosedDate,
+  };
+};
+
+export const fetchContestSecondaryData = async (abi: Abi, chainId: number, address: string) => {
+  const contracts = [
+    {
+      address: address as `0x${string}`,
+      abi: abi,
+      chainId,
+      functionName: "name",
+    },
+    {
+      address: address as `0x${string}`,
+      abi: abi,
+      chainId,
+      functionName: "creator",
+    },
+    {
+      address: address as `0x${string}`,
+      abi: abi,
+      chainId,
+      functionName: "prompt",
+    },
+    {
+      address: address as `0x${string}`,
+      abi: abi,
+      chainId,
+      functionName: "costToPropose",
+    },
+    {
+      address: address as `0x${string}`,
+      abi: abi,
+      chainId,
+      functionName: "voteStart",
+    },
+  ];
+
+  const results = (await readContracts(serverConfig, { contracts })) as any;
+  const name = results[0].result as string;
+  const creator = results[1].result as string;
+  const prompt = results[2].result as string;
+  const costToPropose = Number(results[3].result);
+  const voteStartDate = new Date(Number(results[4].result) * 1000 + 1000);
+
+  return {
+    name,
+    creator,
+    prompt,
+    costToPropose,
+    voteStartDate,
+  };
+};
+
+export const fetchCostToPropose = async (abi: Abi, chainId: number, address: string) => {
+  const costToPropose = (await readContract(serverConfig, {
+    address: address as `0x${string}`,
+    abi,
+    chainId,
+    functionName: "costToPropose",
+  })) as bigint;
+
+  return costToPropose;
+};

packages/react-app-revamp/lib/frames/ui.ts

@@ -0,0 +1,40 @@
+import { createSystem } from "frog/ui";
+
+export const { Box, Columns, Column, Heading, HStack, Rows, Row, Spacer, Text, VStack, Image, vars } = createSystem({
+  colors: {
+    yellow: "#FFE25B",
+    black: "#000000",
+    neutral: "#E5E5E5",
+    darkGrey: "#6A6A6A",
+    white: "#FFFFFF",
+    green: "#78FFC6",
+    red: "#FF78A9",
+  },
+  icons: "heroicons",
+  fonts: {
+    lato: [
+      {
+        name: "Lato",
+        source: "google",
+        weight: 400,
+      },
+      {
+        name: "Lato",
+        source: "google",
+        weight: 700,
+      },
+      {
+        name: "Lato",
+        source: "google",
+        weight: 900,
+      },
+    ],
+    orbitron: [
+      {
+        name: "Orbitron",
+        source: "google",
+        weight: 900,
+      },
+    ],
+  },
+});

packages/react-app-revamp/lib/frames/utils.ts

@@ -0,0 +1,18 @@
+import { chains } from "@config/wagmi/server";
+
+export const EMPTY_ROOT = "0x0000000000000000000000000000000000000000000000000000000000000000";
+
+export type SupportedChainId = 1 | 10 | 8453 | 84532 | 7777777;
+export const SUPPORTED_CHAIN_IDS: SupportedChainId[] = [1, 10, 8453, 84532, 7777777];
+
+export function isSupportedChainId(chainId: any): chainId is SupportedChainId {
+  return SUPPORTED_CHAIN_IDS.includes(chainId);
+}
+
+export const getChainId = (chain: string): number => {
+  const chainId = chains.find(
+    (c: { name: string }) => c.name.toLowerCase().replace(" ", "") === chain.toLowerCase(),
+  )?.id;
+
+  return chainId ?? 1;
+};