0 - 1 setup instructions to get to have a Sui/Move/React base application to build upon

Set Up Environment

• Download and install VS Code

• Download and install Move Extention

• Install Suicargo install --locked --git https://github.com/MystenLabs/sui.git --branch devnet sui

• Install Sui Wallet

Create Front End

• Install Yarn

• Install create-react-app

Create App Connection Method

• We will be using Suiet Kit. It is a wallet connection library built specifically for SUI and the most used wallets.

• You can view a sample PR here that will show you how to add it to your application

Create Move Contracts

• Develop Modules - can copy/pasta any of these examples if needed

• Create a folder in the /src dir of your application and add the modules in a structure like this

Testing and Deploying Locally

• cd into the package - eg cd /src/contracts/your-package-name

• Build the package - sui move build

• Test the package(there are no tests currently in the example packages) - sui move test

Set Up Local Devnet

sui move does not have a publish function. We will use sui client to interact with a local network we set up below

• We will now create an extra terminal(Ctrl+` + Ctrl+Shift+`) in VSCode to run the following commands

  • sui genesis --force - This overwrites your current .sui folder at the root of your machine

  • sui start

The network that genesis creates includes four validators and five user accounts that contain five coin objects each. We will deploy using one of these accounts but we will also fund a browser wallet to interact as we would in the real world(see below)

• Move back to your other terminal and publish your projectsui client publish --gas-budget 1000

You will receive a certificate and the ID’s of the objects published from the package that will look like this

----- Certificate ----
Transaction Hash: H5mfT9UgoV+qW1kbWXT1HFvWzmSnPCxSgEplu3lI5UM=
Transaction Signature: AA==@Vga6rEHwv+ytGgIjR/krZtQcxAH1VXejqXDpekNWQ4Q/MWmeW+6NnFMvgvdiexJ9aJ0Wei41PxMC8JS6Ee3ICg==@WUoEWyFiMdiC5G4KUvAKKJgI9nks+et6+8qncumfJs4=
Signed Authorities Bitmap: RoaringBitmap<[0, 1, 2]>
Transaction Kind : Publish
----- Transaction Effects ----
Status : Success
Created Objects:
  - ID: 0x77e2392b2d77412b89533d7e5d9c82caed714822 , Owner: Immutable
  - ID: 0x9ada30b2e52c23ea36c9fb7c4905bc58ca44eabc , Owner: Account Address ( 0xf271faa139f3d1c992d43deba597686d392fc39a )
  - ID: 0xa4890ca9d1ba6b871f885fdc92396b8baae52549 , Owner: Shared
Mutated Objects:
  - ID: 0x08af5d44a99e483881c76fb106b025542a48ccec , Owner: Account Address ( 0xf271faa139f3d1c992d43deba597686d392fc39a )

To Note: in this instance we are publishing a module and two structs1. ID: 0x77....822 , Owner: Immutable - The module address as its immutable2. ID: 0x9...abc , Owner: Account Address ( 0xf...39a ) - A capability issued by the module on initialization3. ID: 0xa...549 , Owner: Shared - A registry created in the module and is shared

Fund your browser wallet

1. Find Sui Gas Object Idsui client objects

2. Transfer to your browser walletsui client transfer --to <BROWSER-WALLET-ADDRESS> --object-id <SUI-GAS-OBJECT-ID> --gas-budget 1000

Interacting with your Deployed Modules

• Create a .env file in the root of your project to add the addresses returned. You will need to install a package(env-cmd) and use it when you start your application. This can be done byyarn add env-cmd and then changing your scripts start cmd in package.json to something like this env-cmd -f .env react-scripts start

Example

REACT_APP_SUI_LOCAL_NETWORK_WORDSUIP_PACKAGE_ADDRESS=0xca32f75d60edbb2bb7057df93b0a29c32f81f670
REACT_APP_SUI_LOCAL_NETWORK_WORDSUIP_USER_MANAGER_CAP_ADDRESS=0xc2fa11f372ebdb056303067deb2174e99f446f4c
REACT_APP_SUI_LOCAL_NETWORK_WORDSUIP_USER_REGISTRY_ADDRESS=0x9088202aa9636adae4af8373a2135ac5e657e1f3

REACT_APP_NETWORK=local # || devnet || testnet || mainnet

REACT_APP_SUI_LOCAL_ENDPOINT=http://127.0.0.1:9000
REACT_APP_SUI_DEVNET_ENDPOINT=https://fullnode.devnet.sui.io

Create Client Side Interaction

• Create a folder /hooks and create a file called useSui.tsx. We will use this to store all of the contract interactions client side and be able to use it in our application. An example can be found here

• We can now manipulate the UI to utilize this hook and interact with our module on our local network.

• Open another terminal and start the application. you must be at the root of your create-react-appyarn start

You should now have 3 terminals open

1. Sui local network

2. Application

3. An extra one to interact/add packages etc whilst you are working

Resetting or Changing the Contract

• The idea of this developer environment is to be able to streamline our ability to develop Move applications. You can follow these steps to demolish your existing setup, make changes, redeploy and test.

1. Stop Sui local network in your Sui terminal

2. Nuke the db - sui genesis --force

3. Restart Sui local network - sui start

4. Make your desired changes in your contract, UI or both

5. Redeploy your contract - sui client publish --gas-budget 1000

6. Change your .env variables with the new addresses

7. Stop and Restart your application to recognize these changes CTRL + C and yarn start

8. Send Sui Gas to your browser wallet

TEST AWAY! Watch out for scaffold-move.xyz!