Merge branch 'simple-nft-example' into nadai/simple-nft-update

.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

.yarnrc.yml

@@ -1,11 +1,11 @@
+compressionLevel: mixed
+
 enableColors: true
 
+enableGlobalCache: false
+
 nmHoistingLimits: workspaces
 
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: "@yarnpkg/plugin-typescript"
-
 yarnPath: .yarn/releases/yarn-3.2.3.cjs

README.md

@@ -162,4 +162,4 @@ For production-grade applications, it's recommended to obtain your own API keys
 
 > 🏃 Head to your next challenge [here](https://www.speedrunstark.com/challenge/decentralized-staking).
 
-> 💭 Problems, questions, comments on the stack? Post them to the [🏗 Scaffold-Stark developers chat](https://t.me/+wO3PtlRAreo4MDI9)
+> 💭 Problems, questions, comments on the stack? Post them to the [🏗 Scaffold-Stark developers chat](https://t.me/+wO3PtlRAreo4MDI9)

packages/nextjs/.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

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

@@ -1,10 +1,7 @@
 import { Abi } from "abi-wan-kanabi";
 import {
-  AbiFunction,
   Contract,
   ContractName,
-  GenericContract,
-  InheritedFunctions,
   getFunctionsByStateMutability,
 } from "~~/utils/scaffold-stark/contract";
 import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";

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

@@ -5,10 +5,7 @@ import { useReducer } from "react";
 import { ContractReadMethods } from "./ContractReadMethods";
 // import { ContractWriteMethods } from "./ContractWriteMethods";
 import { Address, Balance } from "~~/components/scaffold-stark";
-import {
-  useDeployedContractInfo,
-  useNetworkColor,
-} from "~~/hooks/scaffold-stark";
+import { useDeployedContractInfo } from "~~/hooks/scaffold-stark";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { ContractName } from "~~/utils/scaffold-stark/contract";
 import { ContractVariables } from "./ContractVariables";
@@ -55,12 +52,12 @@ export const ContractUI = ({
     <div
       className={`grid grid-cols-1 lg:grid-cols-6 px-6 lg:px-10 lg:gap-12 w-full max-w-7xl my-0 ${className}`}
     >
-      <div className="col-span-5 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
+      <div className="col-span-5 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10 ">
         <div className="col-span-1 flex flex-col">
           <div className="bg-transparent border-gradient rounded-[5px] px-6 lg:px-8 mb-6 space-y-1 py-4">
             <div className="flex">
               <div className="flex flex-col gap-1">
-                <span className="font-bold">{contractName}</span>
+                <span className="font-bold text-neutral">{contractName}</span>
                 <Address address={deployedContractData.address} />
                 <ClassHash
                   classHash={deployedContractData.classHash}

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

@@ -1,10 +1,7 @@
 import { Abi } from "abi-wan-kanabi";
 import {
-  AbiFunction,
   Contract,
   ContractName,
-  GenericContract,
-  InheritedFunctions,
   getFunctionsByStateMutability,
 } from "~~/utils/scaffold-stark/contract";
 import { DisplayVariable } from "./DisplayVariable";

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useRef, useEffect } from "react";
 import { useState, useRef, useEffect } from "react";
 import { Abi } from "abi-wan-kanabi";
 import { Address } from "@starknet-react/chains";
@@ -31,15 +32,18 @@ export const ReadOnlyFunctionForm = ({
   );
   const [inputValue, setInputValue] = useState<any | undefined>(undefined);
   const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
+  const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
   const lastForm = useRef(form);
 
   const { isFetching, data, refetch } = useContractRead({
     address: contractAddress,
     functionName: abiFunction.name,
     abi: [...abi],
     args: inputValue ? inputValue.flat(Infinity) : [],
+    args: inputValue ? inputValue.flat(Infinity) : [],
     enabled: false,
     parseArgs: false,
+    parseArgs: false,
     blockIdentifier: "pending" as BlockNumber,
   });
 
@@ -48,35 +52,45 @@ export const ReadOnlyFunctionForm = ({
     const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
     return (
       <ContractInput
+        abi={abi}
         abi={abi}
         key={key}
         setForm={setForm}
         form={form}
         stateObjectKey={key}
         paramType={input}
         setFormErrorMessage={setFormErrorMessage}
+        setFormErrorMessage={setFormErrorMessage}
       />
     );
   });
 
+  const handleRead = () => {
+    const newInputValue = getParsedContractFunctionArgs(form, false);
+    if (JSON.stringify(form) !== JSON.stringify(lastForm.current)) {
   const handleRead = () => {
     const newInputValue = getParsedContractFunctionArgs(form, false);
     if (JSON.stringify(form) !== JSON.stringify(lastForm.current)) {
       setInputValue(newInputValue);
       lastForm.current = form;
     }
     refetch();
+    refetch();
   };
 
   return (
     <div className="flex flex-col gap-3 py-5 first:pt-0 last:pb-1">
+      <p className="font-medium my-0 break-words text-function">
+        {abiFunction.name}
+      </p>
       <p className="font-medium my-0 break-words text-function">
         {abiFunction.name}
       </p>
       {inputElements}
       <div className="flex justify-between gap-2 flex-wrap">
         <div className="flex-grow w-4/5">
           {data !== null && data !== undefined && (
+            <div className="bg-input text-sm px-4 py-1.5 break-words">
             <div className="bg-input 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">

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

@@ -1,12 +1,8 @@
 "use client";
 
 import { useEffect, useState } from "react";
-// import { Abi, AbiFunction } from "abitype";
-// import { Address, TransactionReceipt } from "viem";
-// import { useContractWrite, useNetwork, useWaitForTransaction } from "wagmi";
 import {
   ContractInput,
-  //   TxReceipt,
   getFunctionInputKey,
   getInitialFormState,
   getParsedContractFunctionArgs,
@@ -31,16 +27,14 @@ type WriteOnlyFunctionFormProps = {
   abiFunction: AbiFunction;
   onChange: () => void;
   contractAddress: Address;
-  //   inheritedFrom?: string;
 };
 
 export const WriteOnlyFunctionForm = ({
   abi,
   abiFunction,
   onChange,
   contractAddress,
-}: //   inheritedFrom,
-WriteOnlyFunctionFormProps) => {
+}: WriteOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() =>
     getInitialFormState(abiFunction),
   );
@@ -135,7 +129,6 @@ WriteOnlyFunctionFormProps) => {
       >
         <p className="font-medium my-0 break-words text-function">
           {abiFunction.name}
-          {/* <InheritanceTooltip inheritedFrom={undefined} /> */}
         </p>
         {inputs}
         <div className="flex justify-between gap-2">
@@ -167,7 +160,7 @@ WriteOnlyFunctionFormProps) => {
         </div>
       </div>
       {zeroInputs && txResult ? (
-        <div className="flex-grow basis-0">
+        <div className="flex-grow basis-0 ">
           <TxReceipt txResult={txResult} />
         </div>
       ) : null}

packages/nextjs/components/Footer.tsx

@@ -22,12 +22,15 @@ export const Footer = () => {
   const isMainnetNetwork = targetNetwork.id === mainnet.id;
 
   return (
+    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 bg-base-100">
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 bg-base-100">
       <div>
-        <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
-          <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
+        <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none ">
+          <div className="flex md:flex-row gap-2 pointer-events-auto text-[12px] sm:text-[16px]">
             {nativeCurrencyPrice > 0 && (
               <div>
+                <div className="btn btn-sm font-normal gap-1 cursor-auto border border-[#32BAC4] shadow-none">
+                  <CurrencyDollarIcon className="h-4 w-4 text-[#32BAC4]" />
                 <div className="btn btn-sm font-normal gap-1 cursor-auto border border-[#32BAC4] shadow-none">
                   <CurrencyDollarIcon className="h-4 w-4 text-[#32BAC4]" />
                   <span>{nativeCurrencyPrice}</span>
@@ -53,9 +56,9 @@ export const Footer = () => {
           </div>
         </div>
       </div>
-      <div className="w-full">
-        <ul className="menu menu-horizontal w-full">
-          <div className="flex justify-center items-center gap-2 text-sm w-full">
+      <div className="w-full ">
+        <ul className="menu menu-horizontal w-full ">
+          <div className="flex justify-center items-center gap-2 text-sm w-full ">
             <div className="text-center">
               <a
                 href="https://github.com/Quantum3-Labs/scaffold-stark-2"