Quick Start

Note

Interested in seeing what Tapps can do? Click here to see Tapps examples.

In this tutorial you will:

1. Quickstart tapp project
2. Build a tapp project
3. Test (emulate) a tapp project
4. Tapp project lifecycle

Prerequisites

Before starting this tutorial you must:

1. Install Node.js & Python
2. Install TokenScript CLI

Install Node.js & Python

Compatible versions

• Node.js

16.20.2
18.16.0
18.18.2

• Python

3.11.0

Manage Node.js version

Highly recommend to use NVM to manage Node.js. Install nvm on Mac as following:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

Install the specific version of Node.js as following:

nvm install node (the latest version)
nvm install 16.20.2
nvm use 16.20.2

Manage python version

brew install pyenv
pyenv install 3.11.0
pyenv global 3.11.0

Install TokenScript CLI

Before install TokenScript CLI, you must check the Node.JS version.

npm

npm install -g @tokenscript/cli

pnpm

pnpm add -g @tokenscript/cli

yarn

yarn add -g @tokenscript/cli

Development lifecycle

Create a tapp project

tokenscript create my-project-dir

When you execute the command, you will be asked to choose a project type:

Empty Svelte Project - recommended: An empty TokenScript project with Svelte & Vite
Empty React Project - recommended: An empty TokenScript project with React & Vite
Empty TypeScript Project: An empty TokenScript project with TypeScript & Webpack
Empty Project: An empty TokenScript project

Recommend to choose one of the first three options, which can be viewed in the browser.

The following is an example of creating a new project with the Empty React Project template:

Create new workspace at /Users/.../my-project-dir?: y
? Select project template Empty React Project - recommended: An empty TokenScript project with React & Vite
? Enter a name for the TokenScript project: my-first-tokenscript
? Select the token type: erc20
? Enter the ethereum contract address for the TokenScript: 0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48
? Enter the ethereum chainID for the TokenScript: 1
? Enter a short description for the TokenScript: tokenscript-usdc
? Enter a URL to a website about this TokenScript: https://etherscan.io/address/0xa0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48
? Enter an icon URL for the TokenScript (base64 image URLs are supported):
https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png
Initializing template...... done
Running NPM install...... done
Project successfully initialized!

Build a tapp project

Once the tapp project is successfully initialized, you can build your tapp project into one single file (tokenscript.tsml) .

cd my-project-dir
npm run build

The output like the following:

> emptyreact@0.0.0 build
> tokenscript build


Building TokenScript with default environment

> emptyreact@0.0.0 ts:buildWeb
> vite build

vite v5.3.1 building for production...
transforming...
✓ 37 modules transformed.
rendering chunks...


Inlining: index-CoUqb0k_.js
Inlining: style-DfSgmIGg.css
computing gzip size...
dist/index.html  145.26 kB │ gzip: 46.99 kB
✓ built in 918ms
Processing ./dist/index.html
Processing ./src/styles.css
Validate TSML...... done

TokenScript build completed successfully!

Test a tapp project

If all is well, you should see a file in ./out/tokenscript.tsml.

In order to verify the tapp project, you can emulate the project as following:

npm run emulate

Your browser should open a new page for your token automatically, like the following, if not you can visit http://localhost:8090/?emulator:

Sign a tapp project

Once you have tested the tapp project, you can sign the tokenscript.tsml file with the following command:

tokenscript sign

Now, your tapp is ready to be deployed.