🔥 Remove parts (#11)

README.md

@@ -94,49 +94,39 @@ Here are the interesting files tree you'll have to update/use during this worksh
     1) See the file tree
     2) Contract addresses are located in [environment](/environment.ts)
     3) (use of [ChakraUI](https://chakra-ui.com/getting-started) components library)
-    4) Uncomment part by part the workshop in [page.tsx](app/page.tsx)
+    4) Uncomment part by part the workshop
 2) Fetching block infos
-    1) Update the [starknet providers](lib/shared/components/layout/provider.tsx) to connect to the default Starknet provider by using [Starknet-react](https://github.com/apibara/starknet-react)
+    1) Update the [starknet providers](lib/shared/components/layout/provider.tsx) to connect to the default Starknet Goerli provider by using [Starknet-react](https://github.com/apibara/starknet-react)
     2) Update the [footer component](lib/shared/components/layout/footer.tsx) to fetch & display the current block infos
     3) (The UI part is already done here)
 3) Wallet connect
     1) Look at the [Connect button component](lib/wallet/components/connect-button.tsx) & [Connect wallet modal component](lib/wallet/components/connect-wallet-modal.tsx)
-    2) Update it to ask user wallet connection by using [Starknet-react](https://github.com/apibara/starknet-react) or [Get starknet by argent](https://github.com/argentlabs/argent-x) if you wnt to use argent web wallet.
+    2) Update it to ask user wallet connection by using [Starknet-react](https://github.com/apibara/starknet-react) or [Get starknet by argent](https://github.com/argentlabs/argent-x) if you want to use argent web wallet.
     3) You should be able to connect with Braavos or ArgentX, and see your current address on the UI
-4) Your first transaction ----------- ici -------------
-    1) Start by taking a look at the [Contract Provider model](src/context/ContractProvider/model.ts)
-    2) You can now update the [RegisterWhitelist component](src/components/wallet/RegisterWhitelist.tsx) to
-        1) Fetch the total free slots currently available
-        2) Fetch the current whitelisted status of the connected account
-        3) Register to the whitelist if there is free slots & the connected account is not currently whitelisted
-5) Multi-call
-    1) Look at the [MultiMint component](src/components/wallet/MultiMint.tsx)
+4) Managing ERC-721
+    1) Start by taking a look at the [NFT component](lib/shared/components/nft/nft.tsx) & [Mint button component](lib/shared/components/nft/mint-button.tsx)
+    2) You can now update the [NFT component](lib/shared/components/nft/nft.tsx) to
+        1) Fetch & display the name, description and image of the NFT by fetching metadata
+        2) Fetch the balance of the connected account
+        3) Mint the NFT by using the mint button
+           1) Simple call, only mint
+           2) Multi-call, mint and donate
+5) Managing transactions ---------------------------
+    1) Look at the [Current transaction component](lib/shared/components/transactions/current-transaction.tsx) & the [Transactions list component](lib/shared/components/transactions/transactions-list.tsx)
     2) Here you'll have to
-        1) Fetch balances of arfBTC & arfETH when needed
-        2) Mint both arfBTC & arfETH in 1 TX using the multicall
-    3) (You can also make a 'register to whitelist + mint token' in 1 TX as well)
-6) Deploy your own Access Controller
+        1) Watch the last transaction registered by the app & display the current status in real time
+        2) Display all registered transactions by the app
+6) Deploy your own ERC-721 contract
     1) You can put aside IDE for the time & open your terminal
-    2) clone the [access-controller](https://github.com/419Labs/access-controller-contracts) repo
-        1) ``> git clone [email protected]:419Labs/access-controller-contracts.git``
-    3) Use nile to compile & deploy the contracts
-        1) ``> nile compile``
-        2) ``> nile deploy AccessController --alias my_access_controller [...args] --network=goerli``
-        3) Wait until the contract is deployed
-            1) You can check the status of the TX by calling [get_transaction](https://docs.starknet.io/docs/CLI/commands#starknet-get_transaction) on the starknet cli
-    4) Once it's ok, you can test it by calling *freeSlotsCount* on the deployed contract
-        1) With Nile CLI
+    2) You can use the OpenZeppelin [ERC-721 contract](https://github.com/OpenZeppelin/cairo-contracts/tree/main/src/openzeppelin/token/erc721)
+    3) Use [Starkli](https://github.com/xJonathanLEI/starkli) to compile, declare & deploy the contracts
+       1) Wait until the contract is deployed
+    4) Once it's ok, you can test it by calling *mint* on the deployed contract to verify
+        1) With the CLI
         2) With the [voyager](https://goerli.voyager.online/)
-    5) You can now replace the ACCESS_CONTROLLER_CONTRACT_ADDRESS in [the contract constants](src/contracts/addresses.ts) to use your own
-7) Add your feature
-    1) In this part you'll add your own feature from A to Z
-    2) Start by choosing the feature you want to implement
-        1) Remove from whitelist, Get a list of all whitelisted addresses, ...
-    3) Implement the feature on the [AccessController_base contract](https://github.com/419Labs/access-controller-contracts/blob/main/contracts/libraries/AccessController_base.cairo) & Add the corresponding @view or @external interface on the [AccessController contract](https://github.com/419Labs/access-controller-contracts/blob/main/contracts/AccessController.cairo)
-    4) Compile & Deploy your new contract
-        1) Get the new abi.json & update the [current one](src/contracts/abis/AccessController.json)
-    5) Implement the new feature on the UI
-        1) By create a new component in */src/components/wallet* & add it in the [index](src/pages/index.tsx)
+   5) Declare & upload your metadata.json to IPFS (or other if you prefer)
+   6) Set the tokenURI of your contract to the IPFS link
+   7) You can now replace the nftAddress in [the environment file](environment.ts) to use your own
 
 ## Contract addresses
 
@@ -167,6 +157,8 @@ https://www.npmjs.com/package/@argent/get-starknet
 
 https://github.com/OpenZeppelin/cairo-contracts
 
+https://github.com/xJonathanLEI/starkli
+
 
 ## License
 

lib/shared/components/layout/footer.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import { Flex, Text } from "@chakra-ui/react";
-import { useBlock } from "@starknet-react/core";
 
 export default function Footer() {
-  const { data } = useBlock();
+  // TODO Use the useBlock hook from starknet-react to get the current block number
   return (
     <Flex h="full" justify="flex-end" align="center">
-      <Text>Block number {data?.block_number}</Text>
+      <Text>Block number {/* Add block number here */}</Text>
     </Flex>
   );
 }

lib/shared/components/layout/providers.tsx

@@ -4,16 +4,15 @@
 
 import { CacheProvider } from "@chakra-ui/next-js";
 import { ChakraProvider } from "@chakra-ui/react";
-import { InjectedConnector, StarknetConfig } from "@starknet-react/core";
+import { StarknetConfig } from "@starknet-react/core";
 import type { ReactNode } from "react";
 import { constants, Provider } from "starknet";
 
 import theme from "../../../../styles/theme";
 
 export function Providers({ children }: { children: ReactNode }) {
   const connectors = [
-    new InjectedConnector({ options: { id: "braavos" } }),
-    new InjectedConnector({ options: { id: "argentX" } }),
+    // TODO: Add your connectors here
   ];
   return (
     <CacheProvider>

lib/shared/components/nft/mint-button.tsx

@@ -14,24 +14,26 @@ import { json } from "starknet";
 import avnuNft from "@/assets/abis/AVNUNft.json";
 import environment from "@/environment";
 
+// Compiled ABI for AVNUNft contract
 const compiledAvnuNft: Abi = json.parse(JSON.stringify(avnuNft)) as Abi;
+
+// Fetching balance of an account
 const Balance = ({
   account,
   mintHash,
 }: {
   account: AccountInterface;
   mintHash: string | undefined;
 }) => {
+  // Internal state representing the current balance of the account
   const [balance, setBalance] = useState<bigint>(BigInt(0));
-  const { data } = useWaitForTransaction({ hash: mintHash, watch: true });
+  // TODO use useWaitForTransaction hook to wait for the mint transaction to be accepted on L2 -> Use to refresh the balance after mint
+  // const { data } = ...
 
-  const { data: tokenBalanceData, refetch } = useContractRead({
-    abi: compiledAvnuNft,
-    address: environment.nftAddress,
-    functionName: "balanceOf",
-    args: [account.address],
-  });
+  // TODO use useContractRead hook to fetch the balance of the account
+  // const { data: tokenBalanceData, refetch } = ...
 
+  // Set the internal state balance when the tokenBalanceData is fetched
   useEffect(() => {
     if (tokenBalanceData) {
       // eslint-disable-next-line
@@ -40,6 +42,7 @@ const Balance = ({
     }
   }, [tokenBalanceData]);
 
+  // Refresh the balance when the mint transaction is accepted on L2
   useEffect(() => {
     if (data && data.status === "ACCEPTED_ON_L2") refetch();
   }, [refetch, data]);
@@ -50,40 +53,19 @@ const Balance = ({
 export default function MintButton({ ...props }: ButtonProps) {
   const { account } = useAccount();
   const { addTransaction } = useTransactionManager();
-  const { data: txDataMint, write: writeMint } = useContractWrite({
-    calls: [
-      {
-        contractAddress: environment.nftAddress,
-        entrypoint: "mintPublic",
-        calldata: [account?.address || "0x0"],
-      },
-    ],
-  });
 
-  const { data: txDataMintAndTransfer, write: writeMintAndTransfer } =
-    useContractWrite({
-      calls: [
-        {
-          contractAddress: environment.nftAddress,
-          entrypoint: "mintPublic",
-          calldata: [account?.address || "0x0"],
-        },
-        {
-          contractAddress: environment.ethAddress,
-          entrypoint: "transfer",
-          calldata: [
-            "0x0312479874C73a1801164B7aA59a3f4af96478dF170BE27F25E683EDF39E91Cb",
-            1,
-            0,
-          ],
-        },
-      ],
-    });
+  // TODO use useContractWrite hook to call the mint function of the AVNUNft contract
+  // const { data: txDataMint, write: writeMint } = ...
+
+  // TODO use useContractWrite hook to call the mint function of the AVNUNft contract && transfer some eth to the contract (multicall)
+  // const { data: txDataMintAndTransfer, write: writeMintAndTransfer } = ...
 
+  // Add transaction to the manager once transaction is submitted
   useEffect(() => {
     if (txDataMint) addTransaction({ hash: txDataMint.transaction_hash });
   }, [txDataMint, addTransaction]);
 
+  // Add transaction to the manager once transaction is submitted
   useEffect(() => {
     if (txDataMintAndTransfer)
       addTransaction({ hash: txDataMintAndTransfer.transaction_hash });

lib/shared/components/nft/nft.tsx

@@ -1,6 +1,5 @@
 import type { BoxProps } from "@chakra-ui/react";
 import { Box, HStack, Skeleton, Text, VStack } from "@chakra-ui/react";
-import { useContractRead } from "@starknet-react/core";
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 import type { Abi } from "starknet";
@@ -11,8 +10,10 @@ import environment from "../../../../environment";
 import MintButton from "@/lib/shared/components/nft/mint-button";
 import type { NftMetadata } from "@/lib/shared/models/nft-metadata";
 
+// Compiled ABI of the AVNUNft contract
 const compiledAvnuNft: Abi = json.parse(JSON.stringify(avnuNft)) as Abi;
 
+// Component to display a label and a value
 function Info({
   label,
   value,
@@ -31,14 +32,13 @@ function Info({
 }
 
 const Nft: FC<BoxProps> = ({ ...props }) => {
-  const { data: tokenUriData } = useContractRead({
-    abi: compiledAvnuNft,
-    address: environment.nftAddress,
-    functionName: "tokenURI",
-    args: [{ low: 1, high: 0 }],
-  });
+  // TODO use the useContractRead hook from starknet-react to get the tokenURI metadata
+  // const { data: tokenUriData } = ...
 
+  // Internal state of the metadata fecthed from the tokenURI
   const [metadata, setMetadata] = useState<NftMetadata | undefined>(undefined);
+
+  // Update the internal state when the tokenURI data changes
   useEffect(() => {
     if (tokenUriData) {
       fetch(

lib/shared/components/transactions/current-transaction.tsx

@@ -1,19 +1,10 @@
 import { Flex, Text } from "@chakra-ui/react";
-import {
-  useTransactionManager,
-  useWaitForTransaction,
-} from "@starknet-react/core";
-import { useMemo } from "react";
 
 export default function CurrentTransaction() {
-  const { hashes } = useTransactionManager();
-  const lastHash = useMemo(() => {
-    return hashes[hashes.length - 1];
-  }, [hashes]);
-  const { data, isLoading } = useWaitForTransaction({
-    hash: lastHash,
-    watch: true,
-  });
+  // TODO get the last transaction hash using useTransactionManager hook
+  // const { hashes } = ...
+  // TODO use useWaitForTransaction hook to get the last transaction hash status
+  // const { data, isLoading } = ...
   return (
     <Flex direction="column">
       <Text>Last transaction status</Text>

lib/shared/components/transactions/transactions-list.tsx

@@ -1,12 +1,13 @@
 import { Flex, Text } from "@chakra-ui/react";
-import { useTransactionManager } from "@starknet-react/core";
 import type { ManagedTransaction } from "@starknet-react/core/src/providers";
 
 function Transaction({ tx }: { tx: ManagedTransaction<object> }) {
   return <div>{tx.hash}</div>;
 }
 export default function TransactionsList() {
-  const { transactions } = useTransactionManager();
+  // TODO use useTransactionManager hook to get all transactions registered
+  // const { transactions } = ...
+  // Display all transactions hashes
   return (
     <Flex direction="column">
       <Text>All transactions</Text>

lib/wallet/components/connect-wallet-modal.tsx

@@ -1,8 +1,6 @@
 import { Link, VStack } from "@chakra-ui/react";
 import type { Connector } from "@starknet-react/core";
-import { useConnectors } from "@starknet-react/core";
 import type { FC } from "react";
-import { useEffect } from "react";
 
 import BoxItem from "../../shared/components/modal/box-item";
 import Modal from "../../shared/components/modal/modal";
@@ -13,22 +11,16 @@ interface Props {
 }
 
 const ConnectWalletModal: FC<Props> = ({ isOpen, onClose }) => {
-  const { available, connect, refresh } = useConnectors();
-  useEffect(() => {
-    let interval: NodeJS.Timer;
-    if (available.length === 0) {
-      interval = setInterval(refresh, 0);
-    }
-    return () => clearInterval(interval);
-  }, [available, refresh]);
+  // TODO use starknet-react to get available connectors
   const handleClickConnect = (connector: Connector) => () => {
-    connect(connector);
+    // connect(connector);
     onClose();
   };
 
   return (
     <Modal title="Connect wallet" isOpen={isOpen} onClose={onClose}>
-      {available.length > 0 ? (
+      {/* TODO uncomment this part when you have import the available connectors */}
+      {/* {available.length > 0 ? (
         <VStack w="full">
           {available.map((connector) => (
             <BoxItem
@@ -47,7 +39,7 @@ const ConnectWalletModal: FC<Props> = ({ isOpen, onClose }) => {
         >
           <BoxItem>No wallet detected, you can download one here</BoxItem>
         </Link>
-      )}
+      )} */}
     </Modal>
   );
 };