Taco Shop
Scaffold Details | |
---|---|
Complexity | Beginner |
Automated Tests | Yes |
Installed Plugins | LIGO, Taquito, Flextesa |
Frontend Dapp | Yes |
Wallet Integration | Yes |
Quickstart
In a rush? You can follow the steps below to get up and running immediatley
Scaffold and Initialize the Project
taq scaffold https://github.com/ecadlabs/taqueria-scaffold-taco-shop taco-shop
cd taco-shop
npm run start
Overview
This scaffold implements a simple full stack Tezos project. It has a React dApp that interacts with a smart contract which stores the number of available_tacos and provides a function to buy tacos
The React dApp uses Beacon Wallet to interact with Tezos wallets in the browser and once connected, will display the number of available_tacos
stored on-chain in the smart contract. There is also a basic interface which allows the user to buy tacos by sending a transaction to the smart contract with the number_of_tacos_to_buy
as a parameter
The smart contract has been deployed to ghostnet at the address for demonstration purposes: KT18izS1s5Hsv9tRaB8VjxdTU6MFpLviLCrS
The project comes pre-configured with the following:
- Plugins: LIGO, Flextesa, Taquito, Jest
- A LIGO smart contract
hello-tacos.mligo
- A network configuration for the Ghostnet testnet
- A faucet file to fund operations on the testnet
- An environment named
testing
- Jest tests for the smart contract
Requirements
- Taqueria v0.6.5 or later
- Docker v0.9 or later
- Node.js v16 or later
- Beacon or Kukai Wallet
- A funded testnet account
- A faucet file
Project Overview
Project Structure
/.taq
- This hidden folder stores the Taqueria configuration and state/app
- This is the React dApp/contracts
- This folder contains the LIGO smart contracts/tests
- This folder contains the automated tests/artifacts
- This folder contains the compiled Michelson.tz
contracts
Smart Contract
The smart contract hello-tacos.mligo
is simple and straightforward. It stores the number of available_tacos
in the contract storage, and provides an entrypoint that accepts a tacos_to_buy
parameter which will decrease the number of available_tacos by the number of tacos_to_buy
type available_tacos = nat
type tacos_to_buy = nat
let main (tacos_to_buy, available_tacos: tacos_to_buy * available_tacos): operation list * available_tacos =
if tacos_to_buy > available_tacos
then (failwith "NOT_ENOUGH_TACOS": operation list * available_tacos)
else ([]: operation list), abs(available_tacos - tacos_to_buy)
React Dapp
The React dApp retrieves the number of available tacos from the smart contract and displays the value. It provides an interface for the user to buy tacos and looks like this:
In order for the React dApp to connect to the smart contract, the contract must be deployed to the testnet and the returned address of the contract must be added to the /app/index.tsx
file. The scaffold comes pre-configured with the address of the deployed contract for demonstration purposes but it is recommended that you add your own faucet file, then re-deploy the contract and update the references to it in the project for your own use
This will be fixed in the future when contract addresses will be passed via the State API dynamically
Scaffold the Project
This project is available as a Taqueria scaffold. To create a new project from this scaffold, run the following command:
taq scaffold https://github.com/ecadlabs/taqueria-scaffold-taco-shop taco-shop
This will clone the Taco Shop scaffold project into a directory called taco-shop
Project Startup
To start the project, first change into the project directory:
cd hello-tacos
Then run the start script:
npm run start
Using the Project
The intended workflow for this project is as follows:
- Compile the LIGO source code
- Originate the smart contract to the testnet
- Insert the returned contract address into the React dApp
- Build and start the React dApp
- Connect to Temple wallet
- Buy tacos!
Compile the Contract
taq compile
This will compile the /contracts/hello-tacos.mligo
contract to a file, /artifacts/hello-tacos.tz
Originate to the Testnet
Run the following command to originate the contract to the ghostnet environment:
taq originate -e ghostnet
This should return the address of the contract on the testnet which looks like this:
┌────────────────┬──────────────────────────────────────┬───────────────────┐
│ Contract │ Address │ Destination │
├────────────────┼──────────────────────────────────────┼───────────────────┤
│ hello-tacos.tz │ KT1EHAXNQ1oeh2ZNTkvvcU6PfzQvGPLsgJx3 │ ghostnet_network │
└────────────────┴──────────────────────────────────────┴───────────────────┘
This scaffold comes with a pre-configured faucet file for the testnet which is shared by all users and can cause issues. It is recommended that you replace the faucet file in the project's config.json
file with your own which you can get from the Teztnets Faucet. Further information about network configuration can be found here
Insert the Contract Address
Now that the contract has been deployed, you need to insert the address of the contract into the /app/index.tsx
file. Copy the address returned from the command above and paste it into the contractAddress
variable in the /app/index.tsx
file as shown here:
function app() {
const [rpcUrl, setRpcUrl] = useState("https://ghostnet.ecadinfra.com");
const [contractAddress, setContractAddress] = useState(
"KT1EHAXNQ1oeh2ZNTkvvcU6PfzQvGPLsgJx3"
);
const [contractStorage, setContractStorage] = useState<number | undefined>(
undefined
);
const [Tezos, setTezos] = useState<TezosToolkit>();
const [connected, setConnected] = useState(false);
Build and Start the React Dapp
Now that the contract has been deployed and the address added to the dApp, you can build and start the React dApp
Change into the /app
directory:
cd app
Install dependencies:
npm install
Build the React dApp:
npm run build
Start and serve the dApp:
npm run start
You should now be able to access the Taco Shop dApp at http://localhost:3000
Connect to Temple Wallet
Open a browser and navigate to http://localhost:3000
You should see the number of available_tacos
displayed
Click on the Connect wallet
button in the top right corner of the page and select Temple Wallet
Provide your credentials for the wallet, select a funded account, and click connect
Buy Tacos
With your wallet connected, you can now interact with the contract entrypoint
Click the order
button and then authorize the transaction in Temple Wallet
Once completed, you will see the value of available_tacos
decrease by the number of tacos you ordered
Testing
This scaffold comes with Jest tests in the tests
folder which has been intitalized as a partition. The scaffold uses the @taqueria/plugin-jest
plugin to run the tests
To run the tests, first make sure you have started a local sandbox by running:
taq start sandbox local
Then, run the Jest tests in the tests
directory with the following command:
taq test
You should see the following output:
❯ taq test
PASS tests/hello-tacos.test.js (13.954 s)
JavaScript tests for Hello Tacos contract
✓ Should originate the Hello Tacos contract (3431 ms)
✓ Should buy 15 tacos (5113 ms)
✓ Should prevent buying tacos if unavailable (11 ms)
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 13.986 s
Ran all test suites.