Merge branch 'challenge-base' into token-vendor

.github/workflows/test_contract.yml

@@ -0,0 +1,29 @@
+name: Next.js CI
+
+on:
+  push:
+    paths:
+      - "packages/snfoundry/contracts/**"
+  pull_request:
+    paths:
+      - "packages/snfoundry/contracts/**"
+
+jobs:
+  snfoundry:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+
+      - name: Install scarb
+        run: curl --proto '=https' --tlsv1.2 -sSf https://docs.swmansion.com/scarb/install.sh | sh -s -- -v 2.5.4
+
+      - name: Install snfoundryup
+        run: curl -L https://raw.githubusercontent.com/foundry-rs/starknet-foundry/master/scripts/install.sh | sh
+
+      - name: Install snforge
+        run: snfoundryup -v 0.25.0
+
+      - name: Run snforge tests
+        run: snforge test
+        working-directory: ./packages/snfoundry/contracts

README.md

@@ -68,7 +68,7 @@ yarn start
 
 > 👩‍💻 Edit `YourToken.cairo` to reuse the **ERC20** token standard from OpenZeppelin. To accomplish this, you can use [`Cairo Components`](https://book.cairo-lang.org/ch16-02-00-composability-and-components.html) to embed the `ERC20` logic inside your contract.
 
-> Mint **1000** (\* 10 \*\* 18) to your frontend address using the `constructor()`. In devnet, by default we choose the first pre-deployed account: `0x64b48806902a367c8598f4f95c305e8c1a1acba5f082d294a43793113115691`, to deploy the contracts. In order to complete this checkpoint, you need to connect to devnet using the same address.
+> Mint **2000** (\* 10 \*\* 18) to your frontend address using the `constructor()`. In devnet, by default we choose the first pre-deployed account: `0x64b48806902a367c8598f4f95c305e8c1a1acba5f082d294a43793113115691`, to deploy the contracts. In order to complete this checkpoint, you need to connect to devnet using the same address. In testnet, you can use your own address to deploy the contracts. Edi the .env file in the `snfoundry` package to set the `ACCOUNT_ADDRESS_SEPOLIA` to your own address.
 
 (Your frontend address is the address in the top right of <http://localhost:3000>)
 
@@ -89,7 +89,7 @@ yarn start
 
 > 👩‍💻 Edit the `Vendor.cairo` contract with a `buy_tokens()` function
 
-Use a price variable named `tokensPerEth` set to **100**:
+Create a price variable named `tokensPerEth` set to **100**:
 
 ```cairo
 const TokensPerEth: u256 = 100;
@@ -101,7 +101,7 @@ const TokensPerEth: u256 = 100;
 
 Edit `packages/snfoundry/scripts-ts/deploy.ts` to deploy the `Vendor` (uncomment Vendor deploy lines).
 
-Create a `tokens_per_eth` function in `Vendor.cairo` that returns the `tokensPerEth` value.
+Implement `tokens_per_eth` function in `Vendor.cairo` that returns the `tokensPerEth` value.
 
 Uncomment the `Buy Tokens` sections in `packages/nextjs/app/token-vendor/page.tsx` to show the UI to buy tokens on the Token Vendor tab.
 
@@ -115,8 +115,6 @@ Uncomment the `Buy Tokens` sections in `packages/nextjs/app/token-vendor/page.ts
 
 > ✏️ We can't hard code the vendor address like we did above when deploying to the network because we won't know the vendor address at the time we create the token contract.
 
-> ✏️ So instead, edit `YourToken.cairo` to mint the tokens to the `recipient` (deployer) in the **constructor()**.
-
 > ✏️ Then, edit `packages/snfoundry/scripts-ts/deploy.ts` to transfer 1000 tokens to vendor address.
 
 ```ts

packages/nextjs/.env.example

@@ -1 +1 @@
-NEXT_PUBLIC_PROVIDER_URL=
+NEXT_PUBLIC_PROVIDER_URL=https://starknet-sepolia.infura.io/v3/c45bd0ce3e584ba4a5e6a5928c9c0b0f

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

@@ -6,7 +6,7 @@ import { ContractUI } from "~~/app/debug/_components/contract";
 import { ContractName } from "~~/utils/scaffold-stark/contract";
 import { getAllContracts } from "~~/utils/scaffold-stark/contractsData";
 
-const selectedContractStorageKey = "scaffoldEth2.selectedContract";
+const selectedContractStorageKey = "scaffoldStark2.selectedContract";
 const contractsData = getAllContracts();
 const contractNames = Object.keys(contractsData) as ContractName[];
 
@@ -42,14 +42,6 @@ export function DebugContracts() {
                   onClick={() => setSelectedContract(contractName)}
                 >
                   {contractName}
-                  {/* {contractsData[contractName].external && (
-                    <span
-                      className="tooltip tooltip-top tooltip-accent"
-                      data-tip="External contract"
-                    >
-                      <BarsArrowUpIcon className="h-4 w-4 cursor-pointer" />
-                    </span>
-                  )} */}
                 </button>
               ))}
             </div>

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

@@ -1,20 +1,11 @@
 "use client";
 
 import { Dispatch, SetStateAction } from "react";
-// import { Tuple } from "./Tuple";
-// import { TupleArray } from "./TupleArray";
-import {
-  InputBase,
-  //   AddressInput,
-  //   Bytes32Input,
-  //   BytesInput,
-  //   InputBase,
-  IntegerInput,
-} from "~~/components/scaffold-stark";
-// import { AbiParameterTuple } from "~~/utils/scaffold-eth/contract";
+import { InputBase, IntegerInput } from "~~/components/scaffold-stark";
 import { AbiParameter } from "~~/utils/scaffold-stark/contract";
 import { displayType } from "./utilsDisplay";
 import {
+  isCairoArray,
   isCairoBigInt,
   isCairoInt,
   isCairoU256,
@@ -27,9 +18,6 @@ type ContractInputProps = {
   paramType: AbiParameter;
 };
 
-/**
- * Generic Input component to handle input's based on their function param type
- */
 export const ContractInput = ({
   setForm,
   form,
@@ -52,29 +40,12 @@ export const ContractInput = ({
 
   const renderInput = () => {
     switch (paramType.type) {
-      //   case "address":
-      //     return <AddressInput {...inputProps} />;
-      //   case "bytes32":
-      //     return <Bytes32Input {...inputProps} />;
-      //   case "bytes":
-      //     return <BytesInput {...inputProps} />;
-      //   case "string":
-      //     return <InputBase {...inputProps} />;
-      //   case "tuple":
-      //     return (
-      //       <Tuple
-      //         setParentForm={setForm}
-      //         parentForm={form}
-      //         abiTupleParameter={paramType as AbiParameterTuple}
-      //         parentStateObjectKey={stateObjectKey}
-      //       />
-      //     );
       default:
-        // Handling 'int' types and 'tuple[]' types
         if (
-          isCairoInt(paramType.type) ||
-          isCairoBigInt(paramType.type) ||
-          isCairoU256(paramType.type)
+          !isCairoArray(paramType.type) &&
+          (isCairoInt(paramType.type) ||
+            isCairoBigInt(paramType.type) ||
+            isCairoU256(paramType.type))
         ) {
           return <IntegerInput {...inputProps} variant={paramType.type} />;
         } else {

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

@@ -3,8 +3,6 @@ import {
   AbiParameter,
   parseParamWithType,
 } from "~~/utils/scaffold-stark/contract";
-import { uint256 } from "starknet";
-import { byteArray } from "starknet-dev";
 /**
  * Generates a key based on function metadata
  */
@@ -36,7 +34,6 @@ const getInitialFormState = (abiFunction: AbiFunction) => {
   return initialForm;
 };
 
-// Recursive function to deeply parse JSON strings, correctly handling nested arrays and encoded JSON strings
 const deepParseValues = (
   value: any,
   isRead: boolean,
@@ -99,24 +96,9 @@ const getParsedContractFunctionArgs = (
 };
 
 const adjustInput = (input: AbiParameter): AbiParameter => {
-  //   if (input.type.startsWith("tuple[")) {
-  //     const depth = (input.type.match(/\[\]/g) || []).length;
-  //     return {
-  //       ...input,
-  //       components: transformComponents(input.components, depth, {
-  //         internalType: input.internalType || "struct",
-  //         name: input.name,
-  //       }),
-  //     };
-  //   } else if (input.components) {
   return {
     ...input,
-    // components: input.components.map((value) =>
-    //   adjustInput(value as AbiParameterTuple)
-    // ),
   };
-  //   }
-  //   return input;
 };
 
 const transformAbiFunction = (abiFunction: AbiFunction): AbiFunction => {

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

@@ -9,6 +9,7 @@ import {
 import {
   isCairoContractAddress,
   isCairoTuple,
+  parseGenericType,
 } from "~~/utils/scaffold-stark/types";
 import { formatEther } from "ethers";
 
@@ -79,7 +80,24 @@ export const displayTxResult = (
   return JSON.stringify(displayContent, replacer, 2);
 };
 
-export const displayType = (type: string) =>
-  type.includes("::") ? type.split("::").pop() : type;
+export const displayType = (type: string) => {
+  if (type.includes("core::array") || type.includes("core::option")) {
+    const kindOfArray = type.split("::").at(2);
+    const parsed = parseGenericType(type);
+    const arrayType = Array.isArray(parsed)
+      ? parsed[0].split("::").pop()
+      : `(${parsed
+          .split(",")
+          .map((t) => t.split("::").pop())
+          .join(",")}`;
+    return `${kindOfArray}<${arrayType}>`;
+  } else if (type.includes("core::result")) {
+    const types = type.split("::");
+    return `${types.at(-4)}<${types.at(-2)?.split(",").at(0)},${types.at(-1)}`;
+  } else if (type.includes("::")) {
+    return type.split("::").pop();
+  }
+  return type;
+};
 const displayTxResultAsText = (displayContent: DisplayContent) =>
   displayTxResult(displayContent, true);