Feat: Add ch-2

Author: gianalarcon

packages/nextjs/.env

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+yarn.lock

packages/nextjs/.gitignore

@@ -24,7 +24,7 @@ export function DebugContracts() {
   }, [selectedContract, setSelectedContract]);
 
   return (
-    <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center">
+    <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center  text-primary">
       {contractNames.length === 0 ? (
         <p className="text-3xl mt-14">No contracts found!</p>
       ) : (

packages/nextjs/app/debug/_components/DebugContracts.tsx

@@ -58,11 +58,11 @@ export const ContractInput = ({
     <div className="flex flex-col gap-1.5 w-full">
       <div className="flex items-center ml-2">
         {paramType.name && (
-          <span className="text-xs font-medium mr-2 leading-none">
+          <span className="text-xs font-medium mr-2 leading-none text-neutral">
             {paramType.name}
           </span>
         )}
-        <span className="block text-xs font-extralight leading-none">
+        <span className="block text-xs font-extralight leading-none text-neutral">
           {displayType(paramType.type)}
         </span>
       </div>

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

@@ -29,7 +29,7 @@ export const ContractReadMethods = ({
       };
     });
   if (!functionsToDisplay.length) {
-    return <>No read methods</>;
+    return <span className="text-neutral">No read methods</span>;
   }
   return (
     <>

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

@@ -41,7 +41,7 @@ export const ContractUI = ({
 
   if (!deployedContractData) {
     return (
-      <p className="text-3xl mt-14">
+      <p className="text-3xl mt-14 text-neutral">
         {`No contract found by the name of "${contractName}" on chain "${targetNetwork.name}"!`}
       </p>
     );
@@ -59,7 +59,9 @@ export const ContractUI = ({
                 <span className="font-bold text-neutral">{contractName}</span>
                 <Address address={deployedContractData.address} />
                 <div className="flex gap-1 items-center">
-                  <span className="font-bold text-sm">Balance:</span>
+                  <span className="font-bold text-sm text-neutral">
+                    Balance:
+                  </span>
                   <Balance
                     address={deployedContractData.address}
                     className="px-0 h-1.5 min-h-[0.375rem] text-network"
@@ -69,7 +71,7 @@ export const ContractUI = ({
             </div>
             {targetNetwork && (
               <p className="my-0 text-sm">
-                <span className="font-bold">Network</span>:{" "}
+                <span className="font-bold text-neutral">Network</span>:{" "}
                 <span className="text-network">{targetNetwork.name}</span>
               </p>
             )}
@@ -86,7 +88,7 @@ export const ContractUI = ({
             <div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
               <div className="bg-function w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem] clip-corner">
                 <div className="flex items-center justify-center space-x-2">
-                  <p className="my-0 text-sm text-center">Read</p>
+                  <p className="my-0 text-sm text-center text-neutral">Read</p>
                 </div>
               </div>
               <div className="p-5 divide-y divide-secondary">
@@ -100,7 +102,7 @@ export const ContractUI = ({
             <div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
               <div className="w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem]  bg-function clip-corner">
                 <div className="flex items-center justify-center space-x-2">
-                  <p className="my-0 text-sm">Write</p>
+                  <p className="my-0 text-sm text-neutral">Write</p>
                 </div>
               </div>
               <div className="p-5 divide-y divide-secondary">

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

@@ -31,7 +31,7 @@ export const ContractVariables = ({
       };
     });
   if (!functionsToDisplay.length) {
-    return <>No contract variables</>;
+    return <span className="text-neutral">No contract variables</span>;
   }
 
   return (

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

@@ -55,7 +55,7 @@ export const DisplayVariable = ({
           {abiFunction.name}
         </h3>
         <button
-          className="btn btn-ghost btn-xs"
+          className="btn btn-ghost btn-xs text-neutral"
           onClick={async () => await refetch()}
         >
           {!isLoading && isFetching ? (

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

@@ -116,7 +116,7 @@ export const WriteOnlyFunctionForm = ({
         {inputs}
         <div className="flex justify-between gap-2">
           {!zeroInputs && (
-            <div className="flex-grow basis-0">
+            <div className="flex-grow basis-0 text-neutral-content">
               {displayedTxResult ? (
                 <TxReceipt txResult={displayedTxResult} />
               ) : null}