Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes to auction series #2228

Merged
merged 37 commits into from
Sep 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
1a773f3
add auction series
Jul 16, 2024
e5e4afb
add more content
Jul 23, 2024
30c1d5c
updates
Jul 25, 2024
dc7d208
more additions
Jul 26, 2024
8c438f0
small changes
gagdiez Jul 26, 2024
a79aae1
add updates (#2190)
PiVortex Jul 30, 2024
e40022c
wip: proposal
gagdiez Jul 30, 2024
ea3bfe6
Wednesday changes
Jul 31, 2024
5a2f3a9
finish part 1 and part 2
Aug 5, 2024
75baadb
small changes + remove future tutorials from sidebar
Aug 7, 2024
e1b8fdf
fix spelling mistake
Aug 7, 2024
647f6cb
Merge branch 'master' into auction-series
gagdiez Aug 7, 2024
1506f0e
update part 3
Aug 9, 2024
d601a3c
hide nft tuotrial on intro page
Aug 9, 2024
0143d88
improved part 4
Aug 15, 2024
331815f
complete part 3 & 4 (hidden)
Aug 19, 2024
f61a12e
change cusd to dai
Aug 26, 2024
d4b3ce4
add frontend docs WIP
Aug 26, 2024
bd668a8
spelling
Aug 26, 2024
1b62851
update 5-frontend
Aug 29, 2024
f3bd686
add showSingleFName
Aug 30, 2024
4ed7520
Merge branch 'master' into auction-series
gagdiez Sep 2, 2024
01461c7
add factory contract docs
Sep 3, 2024
89ad010
wip: re-structuring
gagdiez Sep 6, 2024
cb431d2
add indexing page
Sep 9, 2024
12a49f7
finished 1st part
gagdiez Sep 9, 2024
e46e756
finished 1st part
gagdiez Sep 9, 2024
223f3e8
Merge branch 'auction-series' of github.com:near/docs into auction-se…
gagdiez Sep 9, 2024
8d94ea4
rename files
gagdiez Sep 9, 2024
ea8aa5a
fix: links
gagdiez Sep 9, 2024
6652854
Update docs/6.integrations/create-transactions.md
PiVortex Sep 13, 2024
7f2f6c6
fix suggested changes
Sep 17, 2024
edf98a6
resolve conflicts
Sep 17, 2024
32dbbe9
Update docs/3.tutorials/auction/0-intro.md
gagdiez Sep 19, 2024
b62f355
Update docs/3.tutorials/auction/0-intro.md
gagdiez Sep 19, 2024
da22b15
Merge branch 'master' into auction-series
gagdiez Sep 19, 2024
c356345
Update docs/3.tutorials/auction/3-nft.md
gagdiez Sep 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 19 additions & 22 deletions docs/3.tutorials/auction/0-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) -->

---

Expand Down Expand Up @@ -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.

---

Expand All @@ -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`

:::
6 changes: 3 additions & 3 deletions docs/3.tutorials/auction/1.1-basic.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand All @@ -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`.
6 changes: 3 additions & 3 deletions docs/3.tutorials/auction/1.2-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

:::

Expand Down Expand Up @@ -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">

Expand Down Expand Up @@ -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.
4 changes: 2 additions & 2 deletions docs/3.tutorials/auction/1.3-deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand Down
8 changes: 4 additions & 4 deletions docs/3.tutorials/auction/2-locking.md
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand Down Expand Up @@ -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
Expand All @@ -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.
2 changes: 1 addition & 1 deletion docs/3.tutorials/auction/3-nft.md
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand Down
2 changes: 1 addition & 1 deletion docs/3.tutorials/auction/4-ft.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
34 changes: 17 additions & 17 deletions docs/3.tutorials/auction/5-frontend.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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.

Expand Down Expand Up @@ -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"
/>
Expand All @@ -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>

---
Expand All @@ -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>
---

Expand All @@ -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>
---
Expand All @@ -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`.
Expand All @@ -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"/>
Expand All @@ -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.
Loading
Loading