Fixes to auction series (#2228)

* add auction series

* add more content

* updates

* more additions

* small changes

* add updates (#2190)

* add auction series

* add more content

* updates

* more additions

* accept changes

* Monday additions

* Tuesday changes

---------

Co-authored-by: PiVortex <[email protected]>
Co-authored-by: Guille <[email protected]>

* wip: proposal

* Wednesday changes

* finish part 1 and part 2

* small changes + remove future tutorials from sidebar

* fix spelling mistake

* update part 3

* hide nft tuotrial on intro page

* improved part 4

* complete part 3 & 4 (hidden)

* change cusd to dai

* add frontend docs WIP

* spelling

* update 5-frontend

* add showSingleFName

* add factory contract docs

* wip: re-structuring

* add indexing page

* finished 1st part

* finished 1st part

* rename files

* fix: links

* Update docs/6.integrations/create-transactions.md

Co-authored-by: Damián Parrino <[email protected]>

* fix suggested changes

* Update docs/3.tutorials/auction/0-intro.md

* Update docs/3.tutorials/auction/0-intro.md

* Update docs/3.tutorials/auction/3-nft.md

---------

Co-authored-by: PiVortex <[email protected]>
Co-authored-by: gagdiez <[email protected]>
Co-authored-by: Damián Parrino <[email protected]>

docs/3.tutorials/auction/0-intro.md

@@ -9,22 +9,21 @@ import TabItem from '@theme/TabItem';
 
 Welcome! In this guide we will help you navigate NEAR tech stack, so you can build Web3 applications from start to finish in no-time.
 
-We'll start from a simple auction contract and slowly build on top of it a full Web3 application to carry on-chain auctions.
+We'll start from a simple auction contract and slowly build on top of it to create a full Web3 application to carry out on-chain auctions.
 
-By the time you finish this tutorial, you will have learned how to use several key primitives and concepts along the way:
+By the time you finish this tutorial, you will have learned several key concepts:
 
-- Building and testing a contract
-- Deploying, updating and locking a contract
-- Creating a frontend to interact with the contract
-- Using an indexing API to keep track of the contract's activity
-- Creating a factory to deploy new contracts
+- [Creating a simple smart contract](./1.1-basic.md)
+- [Writing tests for a contract](./1.2-testing.md)
+- [Deploying a contract to testnet](./1.3-deploy.md)
 
-<!-- - Making cross-contract calls
-- Using Non-Fungible Tokens
-- Using Fungible Tokens 
-- Creating a frontend for a contract
-- Setting up an indexer 
-- Creating a factory contract -->
+<!-- - [Locking a contract](./2-locking.md)
+- [Making cross-contract calls](./3-nft.md#transferring-the-nft-to-the-winner)
+- [Using Non-Fungible Tokens](./3-nft.md)
+- [Using Fungible Tokens](./4-ft.md) 
+- [Creating a frontend to interact with the contract](./5-frontend.md)
+- [Using an indexing API to keep track of the contract's activity](./6-indexing.md)
+- [Modifying a contract factory to deploy your own contracts](./7-factory.md) -->
 
 ---
 
@@ -73,8 +72,7 @@ Before starting, make sure to set up your development environment!
 
 </Tabs>
 
-We will be using the tool [NEAR CLI](../../4.tools/cli.md) to interact with the blockchain through the terminal, and you can choose between JavaScript or Rust to write the contract.
-
+We will use [NEAR CLI](../../4.tools/cli.md) to interact with the blockchain through the terminal, and you can choose between JavaScript and Rust to write the contract.
 
 ---
 
@@ -96,24 +94,23 @@ This series will touch on different level of the NEAR tech stack. Each section w
 2. Easily query on-chain data (soon): Use open APIs to keep track of the users and their bidding price
 
 #### 3. Factory
-1. Creating a factory: Allow users to easily deploy and initialize their own auction contracts
-
+1. Creating a factory (soon): Allow users to easily deploy and initialize their own auction contracts
 
 ---
 
 ## Next steps
 
 Ready to start? Let's jump to the [The Auction Contract](./1.1-basic.md) and begin your learning journey!
 
+---
+
 :::note Versioning for this article
 
 - near-cli: `0.12.0`
-- near-sdk-js: `2.0.0`
-- near-sdk-rs: `5.1.0`
-- near-workspaces-js: `3.5.0`
-- node: `21.6.1`
-- near-workspaces-rs: `0.10.0`
 - rustc: `1.78.0`
+- cargo: `1.80.1`
 - cargo-near: `0.6.2`
+- rustc: `1.78.0`
+- node: `21.6.1`
 
 :::

docs/3.tutorials/auction/1.1-basic.md

@@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import {Github, Language} from "@site/src/components/codetabs"
 
-In this section, we will analyze a simple auction contract, which allows users to place bids and track the highest bidder. After, we will cover how to test the contract, as well as how to deploy it on the testnet.
+In this section, we will analyze a simple auction contract, which allows users to place bids and track the highest bidder. After, we will cover how to test the contract, as well as how to deploy it on  `testnet`.
 
 :::info Documentation
 
@@ -236,7 +236,7 @@ Second, the function is marked as `payable`, this is because by default **functi
 Notice that the function can access information about the environment in which it is running, such as who called the function (`predecessor account`), how much tokens they attached as deposit (`attached deposit`), and the approximate `unix timestamp` at which the function is executing (`block timestamp`).
 
 #### Token Transfer
-The function finishes by creating a `Promise` to transfer tokens to the previous bidder. This token amount will be deducted immediately, and transfer in the next block, after the current function has finished executing.
+The function finishes by creating a `Promise` to transfer tokens to the previous bidder. This token amount will be deducted immediately and transferred in the next block after the current function has finished executing.
 
 Note that on the first bid the contract will send 1 yoctonear to itself, this is fine as we can safely assume that the contract will have the lowest denomination of $NEAR available to send to itself.
 
@@ -261,4 +261,4 @@ You can read more about the environment variables, payable functions and which a
 
 ## Conclusion 
 
-In this part of the tutorial, we've seen how a smart contract stores data, mutates the stored data and views the data. In the next part, we will cover how to test the contract, so we can ensure it works as expected before deploying it to the testnet.
+In this part of the tutorial, we've seen how a smart contract stores data, mutates the stored data, and views the data. In the next part, we will cover how to test the contract, so we can ensure it works as expected before deploying it to `testnet`.

docs/3.tutorials/auction/1.2-testing.md

@@ -13,7 +13,7 @@ Here, we will focus on the sandbox testing, as it enables to deploy the contract
 
 :::info unit testing
 
-Unit tests are built-in in the language, and used to test the contract functions individually. These tests work well when little context is required. However, they cannot test chain interactions - like sending accounts $NEAR tokens - since they need to be processed by the network.
+Unit tests are built into the language and are used to test the contract functions individually. These tests work well when little context is required. However, they cannot test chain interactions - like sending accounts $NEAR tokens - since they need to be processed by the network.
 
 :::
 
@@ -45,7 +45,7 @@ The first thing our test does is to create multiple accounts with 10 $NEAR token
 
 ## Contract Initialization
 
-To initialize the contract the contract's account calls itself, invoking the `init` function with an `end_time` set to 60 seconds in the future.
+To initialize, the contract's account calls itself, invoking the `init` function with an `end_time` set to 60 seconds in the future.
 
 <Tabs groupId="code-tabs">
 
@@ -204,4 +204,4 @@ All tests should pass, and you should see the output of the tests in the console
 
 In this part of the tutorial, we've seen how to use our sandbox testing environment to test the contract. We've tested the contract's initialization, biding, and time advancement.
 
-You are now ready to move to the next section, in which we will deploy the contract to the testnet and interact with it through the CLI.
+You are now ready to move to the next section, where we will deploy the contract to `testnet` and interact with it through the CLI.

docs/3.tutorials/auction/1.3-deploy.md

@@ -30,7 +30,7 @@ near create <contractId> --useFaucet
 
 Replace `<contractId>` with the name you want to give to your account, and make sure it ends with `.testnet`.
 
-The account will be created with **10 NEAR** (this are test tokens).
+The account will be created with **10 NEAR** (these are test tokens).
 
 :::info Testnet Faucet
 
@@ -110,7 +110,7 @@ For the `get_highest_bid` function, we don't need to specify which user is calli
 
 ## Conclusion 
 
-We have now seen how to deploy a contract to the testnet and interact with it using the NEAR CLI.
+We have now seen how to deploy a contract to `testnet` and interact with it using the NEAR CLI.
 
 A word of advice before moving forward. When people learn how to use the CLI, they get lazy and start testing new contract features directly on the testnet. While this is tempting, it is not recommended.
 

docs/3.tutorials/auction/2-locking.md

@@ -70,7 +70,7 @@ The `claim` method should only be callable when the auction is over, can only be
 
 If we update our contract then we should update our tests accordingly. For example, the tests will now need to add `auctioneer` to the arguments of `init`.
 
-We will also now also test the `claim` method. The test will check that the `auctioneer` account has received the correct amount of $NEAR tokens.
+We will now also test the `claim` method. The test will check that the `auctioneer` account has received the correct amount of $NEAR tokens.
 
 <Tabs groupId="code-tabs">
 
@@ -98,9 +98,9 @@ Note that the test doesn't check that the auctioneer has exactly 12 $NEAR since
 
 ## Deploying and locking
 
-Go ahead and test, build and deploy your new contract, as in part 1. Remember to add the "auctioneer" argument when initializing.
+Go ahead and test, build, and deploy your new contract, as in part 1. Remember to add the `auctioneer` argument when initializing.
 
-Now we have the claim method, we can deploy the contract without keys. Later we will introduce a factory contract that deploys auctions to a locked account, but for now, we can manually remove the keys using the CLI to lock the account.
+Now that we have the `claim` method, we can deploy the contract without keys. Later, we will introduce a factory contract that deploys auctions to a locked account, but for now, we can manually remove the keys using the CLI to lock the account.
 
 ```
 near account delete-keys 
@@ -116,6 +116,6 @@ Be extra careful to delete the keys from the correct account as you'll never be
 
 ## Conclusion
 
-In this part of the tutorial, we learned how to lock a contract by creating a new method to claim tokens, specify an account on initialization that will claim the tokens and how to delete the contract account's keys with the CLI. 
+In this part of the tutorial, you learned how to lock a contract by creating a new method to claim tokens, specify an account on initialization that will claim the tokens, and how to delete the contract account's keys with the CLI. 
 
 In the [next part](./3-nft.md), we'll add a prize to the auction by introducing a new primitive; spoiler, the primitive is an NFT. We'll look at how to use non-fungible token standards to send NFTs and interact with multiple interacting contracts in sandbox testing.

docs/3.tutorials/auction/3-nft.md

@@ -43,7 +43,7 @@ When we create an auction we need to list the NFT. To specify which NFT is being
 
 ## Transferring the NFT to the winner
 
-When the auction is ended - by calling the method `claim` - the NFT needs to be transferred to the highest bidder. Operations regarding NFTs live on the NFT contract, so we make a cross-contract call to the NFT contract telling it to swap the owner of the NFT to the highest bidder. The method on the NFT contract to do this is `nft_transfer`.
+When the method `claim` is called the NFT needs to be transferred to the highest bidder. Operations regarding NFTs live on the NFT contract, so we make a cross-contract call to the NFT contract telling it to swap the owner of the NFT to the highest bidder. The method on the NFT contract to do this is `nft_transfer`.
 
 <Tabs groupId="code-tabs">
 

docs/3.tutorials/auction/4-ft.md

@@ -420,7 +420,7 @@ However, this architecture could be deemed less secure since if a bad actor were
 
 ## Conclusion
 
-In this section, we learned a lot about fungible tokens: how to send and receive FTs in a smart contract, and then in sandbox tests how to deploy and initialize an FT contract, how to register a user in an FT contract, and send them some tokens, how to attach FTs to a smart contract call and finally how to view the FT balance of a user. With that, we now have our completed auction smart contract! 
+In this section, you learned a lot about fungible tokens: how to send and receive FTs in a smart contract, and then in sandbox tests how to deploy and initialize an FT contract, how to register a user in an FT contract, and send them some tokens, how to attach FTs to a smart contract call and finally how to view the FT balance of a user. With that, we now have our completed auction smart contract!  
 
 Taking a further step back we've taken a very simple auction contract and transformed it into a more production contract with thorough testing. To improve the auction we learned how to make a contract more secure by locking it, added a prize by introducing NFTs, and enabled auctioneers to host auctions with FTs.
 

docs/3.tutorials/auction/5-frontend.md

@@ -62,7 +62,7 @@ For starters, let's take a look at how the code in the frontend is structured by
 
 ## Specifying the contract
 
-We have a config file that specifies the contract name of the auction that the frontend will interact with. The example given is a pre-deployed contract from part 4 of the tutorial. The example contract is set up to accept bids in DAI (dai.fakes.testnet), has an NFT token pre-minted and owned by the contract account, and has an end auction time far in the future. Feel free to change the specified contract to your own auction that you deploy.
+We have a config file that specifies the contract name of the auction that the frontend will interact with. The example given is a pre-deployed contract from [part 4 of the tutorial](4-ft.md). The example contract is set up to accept bids in DAI (dai.fakes.testnet), has an NFT token pre-minted and owned by the contract account, and has an end auction time far in the future. Feel free to change the specified contract to your own auction that you deploy.
 
 <Language value="javascript" language="javascript" showSingleFName={true}>
     <Github fname="config.js"
@@ -74,7 +74,7 @@ We have a config file that specifies the contract name of the auction that the f
 
 ## Setting up wallets
 
-To be able to fully interact with the contract - send bids or claim the auction - you'll need a `wallet` to sign transactions. Wallets securely store your private keys and allow you to sign transactions without exposing your private key to the frontend. The wallet selector is used to allow users to use choose between a selection of wallets.
+To be able to fully interact with the contract - send bids or claim the auction - you'll need a `wallet` to sign transactions. Wallets securely store your private keys and allow you to sign transactions without exposing your private key to the frontend. The wallet selector allows users to choose between a selection of wallets.
 
 We abstract the wallet selector in our `near.js` file by exposing methods to complete various tasks. Feel free to [explore the file](https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/wallets/near.js) to understand how the wallet selector is implemented. 
 
@@ -121,8 +121,8 @@ We then pass the information about the highest bidder into the `LastBid` compone
 
 <Language value="javascript" language="javascript">
     <Github fname="index.js" 
-        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L123"
-        start="123" end="123" />
+        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L129"
+        start="129" end="129" />
     <Github fname="LastBid.jsx" 
         url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/components/LastBid.jsx"
         />
@@ -132,8 +132,8 @@ When we display the latest bid, instead of just showing the bid amount directly
 
 <Language value="javascript" language="javascript" showSingleFName={true}>
     <Github fname="index.js"
-        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L72-L87"
-        start="72" end="87" />
+        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L75-L93"
+        start="75" end="93" />
 </Language>
 
 ---
@@ -144,8 +144,8 @@ We want to know the highest bid at all times, someone else could have placed a h
 
 <Language value="javascript" language="javascript" showSingleFName={true}>
     <Github fname="index.js" 
-        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L38-L51"
-        start="38" end="51" />
+        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L41-L55"
+        start="41" end="55" />
 </Language>
 ---
 
@@ -155,7 +155,7 @@ The contract stores the end time of the auction in the number of nanoseconds sin
 
 <Language value="javascript" language="javascript" showSingleFName={true}>
     <Github fname="Timer.jsx" 
-        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/components/Timer.jsx"
+        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/components/Timer.jsx#L11-L35"
         start="11" end="35" />
 </Language>
 ---
@@ -166,8 +166,8 @@ We want to show what NFT is being auctioned. To do this we will call `nft_token`
 
 <Language value="javascript" language="javascript" showSingleFName={true}>
     <Github fname="index.js"
-        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L54-L70"
-        start="54" end="70" />
+        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L57-L73"
+        start="57" end="73" />
 </Language>
 
 Note that this effect will only run once the `auctionInfo` updates because we first need the NFT contract ID and token ID from `auctionInfo` to make a valid call to `nft_token`.
@@ -190,8 +190,8 @@ To make a bid we call the `ft_transfer_call` method on the FT contract which sub
 
 <Language value="javascript" language="javascript">
     <Github fname="index.js" 
-        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L99-L109"
-        start="99" end="109" />
+        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L95-L105"
+        start="95" end="105" />
     <Github fname="near.js" 
         url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/wallets/near.js#L107-L126"
         start="107" end="126"/>
@@ -207,14 +207,14 @@ Once the auction is over (the current time is greater than the end time) the auc
 
 <Language value="javascript" language="javascript" showSingleFName={true}>
     <Github fname="index.js" 
-        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L111-L118"
-        start="111" end="118" />
+        url="https://github.com/near-examples/auctions-tutorial/blob/main/frontend/src/pages/index.js#L107-L114"
+        start="107" end="114" />
 </Language>
 
 ---
 
 ## Conclusion
 
-In this part of the tutorial, we have implemented a simple frontend for a NEAR contract. Along the way we have learned how to use the wallet selector to sign the user in and out, how to view the contract’s state, how to sign and send transactions, and use ft_transfer_call from a frontend.
+In this part of the tutorial, we have implemented a simple frontend for a NEAR contract. Along the way, you have learned how to use the wallet selector to sign the user in and out, how to view the contract’s state, how to sign and send transactions, and use `ft_transfer_call` from a frontend.
 
-Whilst we can see the highest bid we may want to see the auction's bidding history. Since the contract only stores the most recent bid we need to use an indexer to pull historical data. In the [next part](./6-indexing.md) of the tutorial, we'll look at quering historical data using an API endpoint.
+While we can see the highest bid, we may want to see the auction's bidding history. Since the contract only stores the most recent bid, we need to use an indexer to pull historical data. In the [next part](./6-indexing.md) of the tutorial, we'll look at querying historical data using an API endpoint.