format

app/[projectName]/page.tsx

@@ -12,18 +12,16 @@ interface homeProps {
 export default async function ProjectHome({ params }: homeProps) {
 	const projectData = await retrieveProjectData(params.projectName);
 
-  return (
-    <div className="flex flex-col lg:grid grid-cols-4 xl:grid-cols-5 flex-grow w-full">
-      <div className="col-span-2 prose p-8 h-full">
-        <Markdown rehypePlugins={[rehypeRaw]}>
-          {projectData.webappMDText}
-        </Markdown>
-      </div>
-      <div className="flex flex-col gap-y-4 col-span-2 xl:col-span-3 justify-start bg-gray-50 p-8 border-lg border-gray-100">
-        {projectData.yamlDatas.map((data, i: number) => (
-          <StrategyCard data={data} key={i} />
-        ))}
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-col lg:grid grid-cols-4 xl:grid-cols-5 flex-grow w-full">
+			<div className="col-span-2 prose p-8 h-full">
+				<Markdown rehypePlugins={[rehypeRaw]}>{projectData.webappMDText}</Markdown>
+			</div>
+			<div className="flex flex-col gap-y-4 col-span-2 xl:col-span-3 justify-start bg-gray-50 p-8 border-lg border-gray-100">
+				{projectData.yamlDatas.map((data, i: number) => (
+					<StrategyCard data={data} key={i} />
+				))}
+			</div>
+		</div>
+	);
 }

app/_components/NavBar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { ConnectButton } from "@rainbow-me/rainbowkit";
-import {  Navbar } from "flowbite-react";
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { Navbar } from 'flowbite-react';
 
 export function NavItems() {
 	return (

app/_components/StrategyCard.tsx

@@ -4,17 +4,17 @@ import { DeploymentCard } from './DeploymentCard';
 import rehypeRaw from 'rehype-raw';
 
 export const StrategyCard = ({ data }: { data: StrategyFile }) => {
-  return (
-    <div className="flex flex-col gap-y-8 mb-8">
-      <div className="font-bold text-3xl">{data.yamlData.gui.name}</div>
-      <div className="prose text-gray-500">
-        <Markdown rehypePlugins={[rehypeRaw]}>{data.descriptionMD}</Markdown>
-      </div>
-      <div className="flex flex-col xl:grid xl:grid-cols-2 2xl:grid-cols-3 gap-4">
-        {data.yamlData.gui.deployments.map((deployment, i: number) => (
-          <DeploymentCard key={i} deployment={deployment} slug={data.fileName} />
-        ))}
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-y-8 mb-8">
+			<div className="font-bold text-3xl">{data.yamlData.gui.name}</div>
+			<div className="prose text-gray-500">
+				<Markdown rehypePlugins={[rehypeRaw]}>{data.descriptionMD}</Markdown>
+			</div>
+			<div className="flex flex-col xl:grid xl:grid-cols-2 2xl:grid-cols-3 gap-4">
+				{data.yamlData.gui.deployments.map((deployment, i: number) => (
+					<DeploymentCard key={i} deployment={deployment} slug={data.fileName} />
+				))}
+			</div>
+		</div>
+	);
 };

app/_components/SubmissionModal.tsx

@@ -283,7 +283,6 @@ export const SubmissionModal = ({
 		}
 	};
 
-
 	return (
 		<Dialog open={open}>
 			{account.isConnected ? (

app/_components/WebappFrame.tsx

@@ -1,22 +1,22 @@
 'use client';
 
-import { useEffect, useState } from "react";
-import { generateButtonsData } from "../_services/buttonsData";
-import { YamlData } from "../_types/yamlData";
-import { FrameImage } from "./FrameImage";
-import { getUpdatedFrameState } from "../_services/frameState";
-import { FrameState } from "../_types/frame";
-import yaml from "js-yaml";
-import { ProgressBar } from "./ProgressBar";
-import { FailsafeSchemaWithNumbers } from "../_schemas/failsafeWithNumbers";
-import { SubmissionModal } from "./SubmissionModal";
-import { useSearchParams } from "next/navigation";
-import { Dialog, DialogClose, DialogContent } from "@/components/ui/dialog";
-import { TriangleAlert } from "lucide-react";
-import { TokenInfo, getTokenInfos } from "../_services/getTokenInfo";
-import { Button, Spinner } from "flowbite-react";
-import ShareStateAsUrl from "./ShareStateAsUrl";
-import { decompress } from "../_services/compress";
+import { useEffect, useState } from 'react';
+import { generateButtonsData } from '../_services/buttonsData';
+import { YamlData } from '../_types/yamlData';
+import { FrameImage } from './FrameImage';
+import { getUpdatedFrameState } from '../_services/frameState';
+import { FrameState } from '../_types/frame';
+import yaml from 'js-yaml';
+import { ProgressBar } from './ProgressBar';
+import { FailsafeSchemaWithNumbers } from '../_schemas/failsafeWithNumbers';
+import { SubmissionModal } from './SubmissionModal';
+import { useSearchParams } from 'next/navigation';
+import { Dialog, DialogClose, DialogContent } from '@/components/ui/dialog';
+import { TriangleAlert } from 'lucide-react';
+import { TokenInfo, getTokenInfos } from '../_services/getTokenInfo';
+import { Button, Spinner } from 'flowbite-react';
+import ShareStateAsUrl from './ShareStateAsUrl';
+import { decompress } from '../_services/compress';
 
 interface props {
 	dotrainText: string;

app/_components/WithdrawalModal.tsx

@@ -89,21 +89,18 @@ export const WithdrawalModal = ({ vault }: WithdrawalModalProps) => {
 		const userInput = e.target.value;
 		form.setValue('withdrawalAmount', parseFloat(userInput));
 
-    // Update the raw amount based on the user input (convert back to raw value)
-    if (userInput) {
-      try {
-        const parsedRawAmount = parseUnits(
-          userInput,
-          vault.token.decimals
-        ).toString();
-        setRawAmount(parsedRawAmount); // Update raw amount on every user change
-      } catch  {
-        setRawAmount("0"); // Fallback to 0 if input is invalid
-      }
-    } else {
-      setRawAmount("0"); // Fallback to 0 if input is empty
-    }
-  };
+		// Update the raw amount based on the user input (convert back to raw value)
+		if (userInput) {
+			try {
+				const parsedRawAmount = parseUnits(userInput, vault.token.decimals).toString();
+				setRawAmount(parsedRawAmount); // Update raw amount on every user change
+			} catch {
+				setRawAmount('0'); // Fallback to 0 if input is invalid
+			}
+		} else {
+			setRawAmount('0'); // Fallback to 0 if input is empty
+		}
+	};
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>

app/_services/compress.ts

@@ -1,20 +1,20 @@
 // Compresses string to GZIP. Retruns a Promise with Base64 string
 export const compress = (string: string): Promise<string> => {
-  const blobToBase64 = (blob: Blob) =>
-    new Promise<string>((resolve) => {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        const res = reader.result;
-        if (typeof res === "string") return resolve(res.split(",")[1]);
-      };
-      reader.readAsDataURL(blob);
-    });
-  const byteArray = new TextEncoder().encode(string);
-  const cs = new CompressionStream("gzip");
-  const writer = cs.writable.getWriter();
-  writer.write(byteArray);
-  writer.close();
-  return new Response(cs.readable).blob().then(blobToBase64);
+	const blobToBase64 = (blob: Blob) =>
+		new Promise<string>((resolve) => {
+			const reader = new FileReader();
+			reader.onloadend = () => {
+				const res = reader.result;
+				if (typeof res === 'string') return resolve(res.split(',')[1]);
+			};
+			reader.readAsDataURL(blob);
+		});
+	const byteArray = new TextEncoder().encode(string);
+	const cs = new CompressionStream('gzip');
+	const writer = cs.writable.getWriter();
+	writer.write(byteArray);
+	writer.close();
+	return new Response(cs.readable).blob().then(blobToBase64);
 };
 
 // Decompresses base64 encoded GZIP string. Returns a string with original text.

app/_services/frameButtons.tsx

@@ -1,56 +1,49 @@
 import { Button } from 'frames.js/next';
 import { FrameState } from 'frames.js/next/types';
 
-export const getFrameButtons = (
-  buttonsData: any[],
-  currentState: FrameState,
-  urlContext: any
-) => {
-  return buttonsData.map((button,i: number) => {
-    if (button.buttonAction === "link") {
-      const projectName = urlContext.pathname.split("/")[2];
-      const strategyName = urlContext.pathname.split("/")[3];
-      const deployment = urlContext.pathname.split("/")[4];
-      return (
-        <Button
-        key={i}
-          action="link"
-          target={`${urlContext.origin}/${projectName}/${strategyName}/${deployment}/?${button.buttonTarget}=${button.buttonValue}`}
-        >
-          {button.buttonText}
-        </Button>
-      );
-    } else if (
-      button.buttonValue === "approve" ||
-      button.buttonValue === "submit"
-    ) {
-      // Update state after tokens have been approved or submission has been made
-      const updatedState = {
-        ...(currentState as object),
-        ...(button.buttonValue === "approve" ? { tokensApproved: true } : {}),
-        ...(button.buttonValue === "submit" ? { currentStep: "done" } : {}),
-      };
-      return (
-        <Button
-        key={i}
-          action="tx"
-          target={{ query: { [button.buttonTarget]: button.buttonValue } }}
-          post_url={{
-            query: { currentState: encodeURI(JSON.stringify(updatedState)) },
-          }}
-        >
-          {button.buttonText}
-        </Button>
-      );
-    }
-    return (
-      <Button
-      key={i}
-        action="post"
-        target={{ query: { [button.buttonTarget]: button.buttonValue } }}
-      >
-        {button.buttonText}
-      </Button>
-    );
-  });
+export const getFrameButtons = (buttonsData: any[], currentState: FrameState, urlContext: any) => {
+	return buttonsData.map((button, i: number) => {
+		if (button.buttonAction === 'link') {
+			const projectName = urlContext.pathname.split('/')[2];
+			const strategyName = urlContext.pathname.split('/')[3];
+			const deployment = urlContext.pathname.split('/')[4];
+			return (
+				<Button
+					key={i}
+					action="link"
+					target={`${urlContext.origin}/${projectName}/${strategyName}/${deployment}/?${button.buttonTarget}=${button.buttonValue}`}
+				>
+					{button.buttonText}
+				</Button>
+			);
+		} else if (button.buttonValue === 'approve' || button.buttonValue === 'submit') {
+			// Update state after tokens have been approved or submission has been made
+			const updatedState = {
+				...(currentState as object),
+				...(button.buttonValue === 'approve' ? { tokensApproved: true } : {}),
+				...(button.buttonValue === 'submit' ? { currentStep: 'done' } : {})
+			};
+			return (
+				<Button
+					key={i}
+					action="tx"
+					target={{ query: { [button.buttonTarget]: button.buttonValue } }}
+					post_url={{
+						query: { currentState: encodeURI(JSON.stringify(updatedState)) }
+					}}
+				>
+					{button.buttonText}
+				</Button>
+			);
+		}
+		return (
+			<Button
+				key={i}
+				action="post"
+				target={{ query: { [button.buttonTarget]: button.buttonValue } }}
+			>
+				{button.buttonText}
+			</Button>
+		);
+	});
 };

app/my-strategies/page.tsx

@@ -57,15 +57,15 @@ export default function MyStrategies() {
 									</Table.Cell>
 									<Table.Cell>
 										<div className="flex gap-x-2">
-											{order.inputs.map((input: any,i: number) => (
+											{order.inputs.map((input: any, i: number) => (
 												<TokenAndBalance input={input} key={i} />
 											))}
 										</div>
 									</Table.Cell>
 									<Table.Cell>
 										<div className="flex gap-x-2">
-											{order.outputs.map((output: any,i: number) => (
-												<TokenAndBalance input={output} key={i}/>
+											{order.outputs.map((output: any, i: number) => (
+												<TokenAndBalance input={output} key={i} />
 											))}
 										</div>
 									</Table.Cell>

components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 import { cn } from '@/lib/utils';
 

package.json

@@ -69,6 +69,5 @@
 		"format-check": "prettier --list-different .",
 		"format": "prettier --write . --config ./.prettierrc.json",
 		"lint-format-check": "npm run lint-check && npm run format-check"
-
 	}
 }