fix conflicts

.github/workflows/deploy.yml

@@ -0,0 +1,27 @@
+name: Build and Deploy to Droplet
+
+on:
+  push:
+    branches:
+      - main 
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Build and deploy app on server
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.DROPLET_IP }}
+          username: ${{ secrets.DROPLET_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          script: |
+            cd /var/www/speedrunstark
+            git pull origin main
+            pm2 stop speedrunstark
+            yarn install
+            cd packages/nextjs
+            yarn build
+            pm2 restart speedrunstark
+            pm2 save

packages/nextjs/app/challenge/[id]/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { useParams } from "next/navigation";
+
+const PageView: React.FC = () => {
+  const { id } = useParams();
+
+  const [markdown, setMarkdown] = useState<string>();
+
+  useEffect(() => {
+    const getMarkdown = async () => {
+      const response = await fetch(
+        `https://raw.githubusercontent.com/Quantum3-Labs/speedrunstark/${id}/README.md`,
+      );
+      const markdownData = await response.text();
+      setMarkdown(markdownData);
+    };
+
+    getMarkdown();
+  }, [id]);
+  return (
+    <div className=" flex items-center w-full justify-center sm:text-[12px] ">
+      <div className="max-w-[800px] py-20 sm:max-w-[400px] sm:py-5 sm:px-5 ">
+        <ReactMarkdown>{markdown}</ReactMarkdown>
+      </div>
+    </div>
+  );
+};
+
+export default PageView;

packages/nextjs/app/debug/_components/contract/ContractReadMethods.tsx

@@ -5,6 +5,7 @@ import {
   ContractName,
   GenericContract,
   InheritedFunctions,
+  getFunctionsByStateMutability,
 } from "~~/utils/scaffold-stark/contract";
 import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";
 
@@ -17,36 +18,19 @@ export const ContractReadMethods = ({
     return null;
   }
 
-  const functionsToDisplay = ((deployedContractData.abi || []) as Abi)
-    .reduce((acc, part) => {
-      if (part.type === "function") {
-        acc.push(part);
-      } else if (part.type === "interface" && Array.isArray(part.items)) {
-        part.items.forEach((item) => {
-          if (item.type === "function") {
-            acc.push(item);
-          }
-        });
-      }
-      return acc;
-    }, [] as AbiFunction[])
+  const functionsToDisplay = getFunctionsByStateMutability(
+    (deployedContractData.abi || []) as Abi,
+    "view",
+  )
     .filter((fn) => {
-      const isQueryableWithParams =
-        fn.state_mutability === "view" && fn.inputs.length > 0;
+      const isQueryableWithParams = fn.inputs.length > 0;
       return isQueryableWithParams;
     })
     .map((fn) => {
       return {
         fn,
-        //   inheritedFrom: (
-        //     (deployedContractData as GenericContract)
-        //       ?.inheritedFunctions as InheritedFunctions
-        //   )?.[fn.name],
       };
     });
-  //     .sort((a, b) =>
-  //       b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1
-  //     );
   if (!functionsToDisplay.length) {
     return <>No read methods</>;
   }
@@ -58,7 +42,6 @@ export const ContractReadMethods = ({
           contractAddress={deployedContractData.address}
           abiFunction={fn}
           key={fn.name}
-          //   inheritedFrom={inheritedFrom}
         />
       ))}
     </>

packages/nextjs/app/debug/_components/contract/ContractVariables.tsx

@@ -5,6 +5,7 @@ import {
   ContractName,
   GenericContract,
   InheritedFunctions,
+  getFunctionsByStateMutability,
 } from "~~/utils/scaffold-stark/contract";
 import { DisplayVariable } from "./DisplayVariable";
 
@@ -19,37 +20,19 @@ export const ContractVariables = ({
     return null;
   }
 
-  const functionsToDisplay = ((deployedContractData.abi || []) as Abi)
-    .reduce((acc, part) => {
-      if (part.type === "function") {
-        acc.push(part);
-      } else if (part.type === "interface" && Array.isArray(part.items)) {
-        part.items.forEach((item) => {
-          if (item.type === "function") {
-            acc.push(item);
-          }
-        });
-      }
-      return acc;
-    }, [] as AbiFunction[])
+  const functionsToDisplay = getFunctionsByStateMutability(
+    (deployedContractData.abi || []) as Abi,
+    "view",
+  )
     .filter((fn) => {
-      const isQueryableWithNoParams =
-        fn.state_mutability === "view" && fn.inputs.length === 0;
-      return isQueryableWithNoParams;
+      const isQueryableWithParams = fn.inputs.length === 0;
+      return isQueryableWithParams;
     })
     .map((fn) => {
       return {
         fn,
-        // inheritedFrom: (
-        //   (deployedContractData as GenericContract)
-        //     ?.inheritedFunctions as InheritedFunctions
-        // )?.[fn.name],
       };
     });
-  // .sort((a, b) =>
-  //   b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1
-  // );
-
   if (!functionsToDisplay.length) {
     return <>No contract variables</>;
   }

packages/nextjs/app/debug/_components/contract/ContractWriteMethods.tsx

@@ -6,6 +6,7 @@ import {
   ContractName,
   GenericContract,
   InheritedFunctions,
+  getFunctionsByStateMutability,
 } from "~~/utils/scaffold-stark/contract";
 
 export const ContractWriteMethods = ({
@@ -19,35 +20,14 @@ export const ContractWriteMethods = ({
     return null;
   }
 
-  const functionsToDisplay = ((deployedContractData.abi || []) as Abi)
-    .reduce((acc, part) => {
-      if (part.type === "function") {
-        acc.push(part);
-      } else if (part.type === "interface" && Array.isArray(part.items)) {
-        part.items.forEach((item) => {
-          if (item.type === "function") {
-            acc.push(item);
-          }
-        });
-      }
-      return acc;
-    }, [] as AbiFunction[])
-    .filter((fn) => {
-      const isWriteableFunction = fn.state_mutability == "external";
-      return isWriteableFunction;
-    })
-    .map((fn) => {
-      return {
-        fn,
-        // inheritedFrom: (
-        //   (deployedContractData as GenericContract)
-        //     ?.inheritedFunctions as InheritedFunctions
-        // )?.[fn.name],
-      };
-    });
-  // .sort((a, b) =>
-  //   b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1
-  // );
+  const functionsToDisplay = getFunctionsByStateMutability(
+    (deployedContractData.abi || []) as Abi,
+    "external",
+  ).map((fn) => {
+    return {
+      fn,
+    };
+  });
 
   if (!functionsToDisplay.length) {
     return <>No write methods</>;

packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx

@@ -27,6 +27,7 @@ export const DisplayVariable = ({
 }: DisplayVariableProps) => {
   const {
     data: result,
+    isLoading,
     isFetching,
     refetch,
   } = useContractRead({
@@ -52,7 +53,7 @@ export const DisplayVariable = ({
           className="btn btn-ghost btn-xs"
           onClick={async () => await refetch()}
         >
-          {isFetching ? (
+          {!isLoading && isFetching ? (
             <span className="loading loading-spinner loading-xs"></span>
           ) : (
             <ArrowPathIcon

packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx

@@ -32,13 +32,13 @@ export const ReadOnlyFunctionForm = ({
   const [form, setForm] = useState<Record<string, any>>(() =>
     getInitialFormState(abiFunction),
   );
-  const [result, setResult] = useState<unknown>();
+  const [inputValue, setInputValue] = useState<any>();
 
-  const { isLoading, isFetching, refetch } = useContractRead({
+  const { isLoading, isFetching, data } = useContractRead({
     address: contractAddress,
     functionName: abiFunction.name,
     abi: [...abi],
-    args: getParsedContractFunctionArgs(form),
+    args: inputValue,
     enabled: false, // TODO : notify when failed - add error
     blockIdentifier: "pending" as BlockNumber,
   });
@@ -49,7 +49,7 @@ export const ReadOnlyFunctionForm = ({
       <ContractInput
         key={key}
         setForm={(updatedFormValue) => {
-          setResult(undefined);
+          setInputValue(undefined);
           setForm(updatedFormValue);
         }}
         form={form}
@@ -68,20 +68,19 @@ export const ReadOnlyFunctionForm = ({
       {inputElements}
       <div className="flex justify-between gap-2 flex-wrap">
         <div className="flex-grow w-4/5">
-          {result !== null && result !== undefined && (
+          {data !== null && data !== undefined && (
             <div className="bg-secondary rounded-3xl text-sm px-4 py-1.5 break-words">
               <p className="font-bold m-0 mb-1">Result:</p>
               <pre className="whitespace-pre-wrap break-words">
-                {displayTxResult(result, false, abiFunction?.outputs)}
+                {displayTxResult(data, false, abiFunction?.outputs)}
               </pre>
             </div>
           )}
         </div>
         <button
           className="btn btn-secondary btn-sm"
           onClick={async () => {
-            const { data } = await refetch();
-            setResult(data);
+            setInputValue(getParsedContractFunctionArgs(form));
           }}
           disabled={!isLoading && isFetching}
         >

packages/nextjs/app/debug/_components/contract/utilsContract.tsx

@@ -1,4 +1,8 @@
-import { AbiFunction, AbiParameter } from "~~/utils/scaffold-stark/contract";
+import {
+  AbiFunction,
+  AbiParameter,
+  parseParamWithType,
+} from "~~/utils/scaffold-stark/contract";
 import { uint256 } from "starknet";
 import { byteArray } from "starknet-dev";
 /**
@@ -35,12 +39,7 @@ const getInitialFormState = (abiFunction: AbiFunction) => {
 // Recursive function to deeply parse JSON strings, correctly handling nested arrays and encoded JSON strings
 const deepParseValues = (value: any, keyAndType?: any): any => {
   if (keyAndType) {
-    if (keyAndType.includes("core::integer::u256")) {
-      return uint256.bnToUint256(value);
-    }
-    if (keyAndType.includes("core::byte_array::ByteArray")) {
-      return byteArray.byteArrayFromString(value);
-    }
+    return parseParamWithType(keyAndType, value);
   }
   if (typeof value === "string") {
     if (isJsonString(value)) {

packages/nextjs/app/layout.tsx

@@ -2,16 +2,20 @@ import type { Metadata } from "next";
 import { ScaffoldStarkAppWithProviders } from "~~/components/ScaffoldStarkAppWithProviders";
 import "~~/styles/globals.css";
 import { ThemeProvider } from "~~/components/ThemeProvider";
+import { Space_Grotesk } from "next/font/google";
+
+const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Starknet Speedrun",
   description: "Fast track your starknet journey",
+  icons: "/icon-starknet.svg",
 };
 
 const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning>
-      <body>
+      <body className={spaceGrotesk.className}>
         <ThemeProvider enableSystem>
           <ScaffoldStarkAppWithProviders>
             {children}

packages/nextjs/app/page.tsx

@@ -1,26 +1,12 @@
 "use client";
 
-import Link from "next/link";
 import type { NextPage } from "next";
 import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
 // import { Address } from "~~/components/scaffold-eth";
 
 const Home: NextPage = () => {
-  // const { data } = useScaffoldContractRead({
-  //   contractName: "HelloStarknet",
-  //   functionName: "get_balance6",
-  // });
 
-  // console.log(data);
-
-  // const { writeAsync } = useScaffoldContractWrite({
-  //   contractName: "HelloStarknet",
-  //   functionName: "increase_balance",
-  //   args: [1],
-  // });
-
-  // console.log(data, isLoading);
   return (
     <>
       <div className="flex items-center flex-col flex-grow pt-10">

packages/nextjs/components/Button/Button.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+
+interface ButtonProps {
+  onClick: () => void;
+  children: ReactNode;
+}
+
+const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
+  return (
+    <button
+      className="py-[10px] px-[20px] sm:px-[10px] sm:py-[5px] bg-base-300 text-base-100 rounded-[8px] sm:text-[12px]"
+      onClick={onClick}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;