This Branch has some extra features that are not mentioned in the original challenge, allowing users to also sell back their tokens, or for the deployer to withdraw tokens or eth freely.
App available at rdtvendor.surge.sh
๐ต Create
YourToken.solsmart contract that inherits the ERC20 token standard from OpenZeppelin. Set your token to_mint()1000 (* 10 ** 18) tokens to themsg.sender. Then create aVendor.solcontract that sells your token using a payablebuyTokens()function.
๐ Create a frontend that invites the user to
<input\>an amount of tokens they want to buy. Then, 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 buildandyarn surgeyour app to a public webserver. 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
git clone https://github.com/austintgriffith/scaffold-eth.git challenge-2-token-vendor
cd challenge-2-token-vendor
git checkout challenge-2-token-vendor
yarn install๐ Edit your smart contract YourToken.sol in packages/hardhat/contracts
You'll have three terminals up for:
yarn start (react app frontend)
yarn chain (harthat backend)
yarn deploy (to compile, deploy, and publish your contracts to the frontend)
๐ฉโ๐ป Rerun
yarn deploywhenever you want to deploy new contracts to the frontend.
ignore any warnings about the vendor deploy, we'll get to that.
๐ฉโ๐ป Edit
YourToken.solto 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.js:
const result = await yourToken.transfer(
"**YOUR FRONTEND ADDRESS**",
utils.parseEther("1000")
);(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.)
- Can you check the
balanceOf()your frontend address in the YourContract of theDebug Contractstab?- โ๏ธ
- Can you
transfer()your token to another account and check that account'sbalanceOf? (Use an incognito window to create a new address and try sending to that new address. Use thetransfer()function in theDebug Contractstab.)- โ๏ธ
๐ฉโ๐ป Create a
Vendor.solcontract with a payablebuyTokens()function
Use a price variable named tokensPerEth set to 100:
uint256 public constant tokensPerEth = 100;๐ Emit event
BuyTokens(address buyer, uint256 amountOfETH, uint256 amountOfTokens)when tokens are purchased.
Edit deploy.js to deploy the Vendor (uncomment Vendor deploy line), but also to send all the tokens to the vendor.address:
const result = await yourToken.transfer(
vendor.address,
utils.parseEther("1000")
);In deploy.js you will also need to call transferOwnership() on the Vendor to make your frontend address the owner:
await vendor.transferOwnership("**YOUR FRONTEND ADDRESS**");(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.)
- Does the
Vendoraddress start with abalanceOf1000 inYourTokenon theDebug Contractstab?- โ๏ธ
- Can you buy 10 tokens for 0.01 ETH?
- โ๏ธ
- Can you transfer tokens to a different account?
- โ๏ธ
- Can the
ownerwithdraw the ETH from theVendor?- โ๏ธ
- Can anyone withdraw? Test everything!
- Just admins, anyone else should buy.
- What if you minted 2000 and only sent 1000 to the
Vendor?- Only 1000 tokens would be available to sell from the Vendor. Or implement a functionality that checks if the vendor doesn't have tokens, and claim some.
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 transferFrom(msg.sender, address(this), theAmount) and if the user has appoved the Vendor correctly, tokens should transfer to the Vendor and ETH should be sent to the user.
๐ก Edit the defaultNetwork to your choice of public EVM networks in packages/hardhat/hardhat.config.js
๐ฉโ๐ 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 an instantwallet.io to fund your deployer address (run yarn account again to view balances)
๐ Run
yarn deployto 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 can "flatten" your contracts with yarn flatten > flat.txt (the flat.txt file will need a little cleanup). Then copy and paste the code into the block explorer like Etherscan to verify. (optimizer "on" set to 200 runs)
๐ฆ 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
๐ฌ Problems, questions, comments on the stack? Post them to the ๐ scaffold-eth developers chat