๐Ÿต
Token Vendor
Build your own token vendor ๐Ÿช™

๐Ÿšฉ Challenge 2: ๐Ÿต Token Vendor ๐Ÿค–

๐Ÿค– Smart contracts are kind of like "always on" vending machines that anyone can access. Let's make a decentralized, digital currency. Then, let's build an unstoppable vending machine that will buy and sell the currency. We'll learn about the "approve" pattern for ERC20s and how contract to contract interactions work.
๐Ÿต Create YourToken.sol smart contract that inherits the ERC20 token standard from OpenZeppelin. Set your token to _mint() 1000 (* 10 ** 18) tokens to the msg.sender. Then create a Vendor.sol contract that sells your token using a payable buyTokens() function.
๐ŸŽ› Edit the frontend that invites the user to <input\> an amount of tokens they want to buy. We'll display a preview of the amount of ETH (or USD) it will cost with a confirm button.
๐Ÿ” It will be important to verify your token's source code in the block explorer after you deploy. Supporters will want to be sure that it has a fixed supply and you can't just mint more.
๐Ÿ† The final deliverable is an app that lets users purchase and transfer your token. Deploy your contracts on your public chain of choice and then yarn build and yarn surge your app to a public web server. Share the url in the Challenge 2 telegram channel.
๐Ÿ“ฑ Part of the challenge is making the UI/UX enjoyable and clean! ๐Ÿคฉ
๐Ÿงซ Everything starts by โœ๏ธ Editing YourToken.sol in packages/hardhat/contracts
โ€‹

โœ… Checkpoint 0: ๐Ÿ“ฆ Install ๐Ÿ“š

1
git clone https://github.com/scaffold-eth/scaffold-eth-challenges challenge-2-token-vendor
2
cd challenge-2-token-vendor
3
git checkout challenge-2-token-vendor
4
yarn install
Copied!
๐Ÿ” Edit your smart contract YourToken.sol in packages/hardhat/contracts
โ€‹

Checkpoint 1: ๐Ÿ”ญ Environment ๐Ÿ“บ

You'll have three terminals up for:
yarn chain (hardhat backend)
yarn start (react app frontend)
yarn deploy (to compile, deploy, and publish your contracts to the frontend)
๐Ÿ‘€ Visit your frontend at http://localhost:3000
๐Ÿ‘ฉโ€๐Ÿ’ป Rerun yarn deploy --reset whenever you want to deploy new contracts to the frontend.
ignore any warnings, we'll get to that...
โ€‹

โœ… Checkpoint 2: ๐Ÿต Your Token ๐Ÿ’ต

๐Ÿ‘ฉโ€๐Ÿ’ป Edit YourToken.sol to inherit the ERC20 token standard from OpenZeppelin
Mint 1000 (* 10 ** 18) in the constructor (to the msg.sender) and then send them to your frontend address in the deploy/00_deploy_your_token.js:
1
const result = await yourToken.transfer(
2
"**YOUR FRONTEND ADDRESS**",
3
ethers.utils.parseEther("1000")
4
);
Copied!
(Your frontend address is the address in the top right of your frontend. Go to localhost:3000 and copy the address from the top right.)
๐Ÿฅ… Goals
  • Can you check the balanceOf() your frontend address in the YourToken of the Debug Contracts tab?
  • Can you transfer() your token to another account and check that account's balanceOf?
(Use an incognito window to create a new address and try sending to that new address. Use the transfer() function in the Debug Contracts tab.)
โ€‹

โœ… Checkpoint 3: โš–๏ธ Vendor ๐Ÿค–

๐Ÿ‘ฉโ€๐Ÿ’ป Create a Vendor.sol contract with a payable buyTokens() function
Use a price variable named tokensPerEth set to 100:
1
uint256 public constant tokensPerEth = 100;
Copied!
๐Ÿ“ The buyTokens() function in Vendor.sol should use msg.value and tokensPerEth to calculate an amount of tokens to yourToken.transfer() to msg.sender.
๐Ÿ“Ÿ Emit event BuyTokens(address buyer, uint256 amountOfETH, uint256 amountOfTokens) when tokens are purchased.
Edit deploy/01_deploy_vendor.js to deploy the Vendor (uncomment Vendor deploy lines).
You will also want to change 00_deploy_your_token.js and 01_deploy_vendor.js so you transfer the tokens to the vendor.address instead of your frontend address.
1
const result = await yourToken.transfer( vendor.address, ethers.utils.parseEther("1000") );
Copied!
(You will use the YourToken UI tab and the frontend for most of your testing. Most of the UI is already built for you for this challenge.)
๐Ÿ“ Edit Vendor.sol to inherit Ownable.
In deploy/01_deploy_vendor.js you will need to call transferOwnership() on the Vendor to make your frontend address the owner:
1
await vendor.transferOwnership("**YOUR FRONTEND ADDRESS**");
Copied!
๐Ÿ“ Finally, add a withdraw() function in Vendor.sol that lets the owner withdraw ETH from the vendor.
๐Ÿฅ… Goals
  • Does the Vendor address start with a balanceOf 1000 in YourToken on the Debug Contracts tab?
  • Can you buy 10 tokens for 0.1 ETH?
  • Can you transfer tokens to a different account?
  • Can the owner withdraw the ETH from the Vendor?
โš”๏ธ Side Quests
  • Can anyone withdraw? Test everything!
  • What if you minted 2000 and only sent 1000 to the Vendor?
โ€‹

โœ… Checkpoint 4: ๐Ÿค” Vendor Buyback ๐Ÿคฏ

๐Ÿ‘ฉโ€๐Ÿซ The hardest part of this challenge is to build your Vendor to buy the tokens back.
๐Ÿง The reason why this is hard is the approve() pattern in ERC20s.
๐Ÿ˜• First, the user has to call approve() on the YourToken contract, approving the Vendor contract address to take some amount of tokens.
๐Ÿคจ Then, the user makes a second transaction to the Vendor contract to sellTokens().
๐Ÿค“ The Vendor should call yourToken.transferFrom(msg.sender, address(this), theAmount) and if the user has approved the Vendor correctly, tokens should transfer to the Vendor and ETH should be sent to the user.
(Use the Debug Contracts tab to call the approve and sellTokens() at first but then look in the App.jsx for the extra approve/sell UI to uncomment.)
๐Ÿฅ… Goal
  • Can you sell tokens back to the vendor and receive ETH?
โš”๏ธ Side Quest
  • Should we disable the owner withdraw to keep liquidity in the Vendor?
โ€‹

โœ… Checkpoint 5: ๐Ÿ’พ Deploy it ๐Ÿ›ฐ

๐Ÿ“ก Edit the defaultNetwork in packages/hardhat/hardhat.config.js, as well as targetNetwork in packages/react-app/src/App.jsx, to your choice of public EVM networksโ€‹
๐Ÿ‘ฉโ€๐Ÿš€ You will want to run yarn account to see if you have a deployer address.
๐Ÿ” If you don't have one, run yarn generate to create a mnemonic and save it locally for deploying.
๐Ÿ›ฐ Use a faucet like faucet.paradigm.xyz to fund your deployer address (run yarn account again to view balances)
๐Ÿš€ Run yarn deploy to deploy to your public network of choice (๐Ÿ˜… wherever you can get โ›ฝ๏ธ gas)
๐Ÿ”ฌ Inspect the block explorer for the network you deployed to... make sure your contract is there.
๐Ÿ‘ฎ Your token contract source needs to be verified ๐Ÿ”ƒ (source code publicly available on the block explorer).
๐Ÿ“  You will need a Etherscan API key for this and you can get on by creating a free account at etherscan.io. Add your key to the hardhat.config file at around line 258. The verify script is at the bottom of 00_deploy_your_token.js. You will see something like this after successful completion.
โš”๏ธ Side Quest: ๐Ÿ”‚ use this same methodology to verify the Vendor contract.

โœ… Checkpoint 6: ๐Ÿšข Ship it ๐Ÿš

๐Ÿ“ฆ Run yarn build to package up your frontend.
๐Ÿ’ฝ Upload your app to surge with yarn surge (you could also yarn s3 or maybe even yarn ipfs?)
๐Ÿš” Traffic to your url might break the Infura rate limit, edit your key: constants.js in packages/ract-app/src.
๐ŸŽ– Show off your app by pasting the url in the Challenge 2 telegram channelโ€‹
โ€‹

โœ… Checkpoint 7: ๐Ÿ“œ Contract Verification

Update the api-key in packages/hardhat/package.json file. You can get your key here.
Screen Shot 2021-11-30 at 10 21 01 AM
Now you are ready to run the yarn verify --network your_network command to verify your contracts on etherscan ๐Ÿ›ฐ This will be the URL you submit to SpeedRun.
๐Ÿฐ Buidl Guidl Discord Server Join Hereโ€‹
๐Ÿ’ฌ Problems, questions, comments on the stack? Post them to the ๐Ÿ— scaffold-eth developers chatโ€‹