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

1. taq scaffold https://github.com/ecadlabs/taqueria-scaffold-taco-shop taco-shop
2. cd taco-shop
3. 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:

note

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:

1. Compile the LIGO source code
2. Originate the smart contract to the testnet
3. Insert the returned contract address into the React dApp
4. Build and start the React dApp
5. Connect to Temple wallet
6. 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  │
└────────────────┴──────────────────────────────────────┴───────────────────┘

caution

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.