Sui x BSA 2024 dApp Starter Template

Welcome to the BSA x SUI Hackathon Official Starter Pack ! This kit should provide you with tons of tools to make your hackathon experience seamless and easy, so ou can focus on what you do best !

This starter pack was made by BSA comitee member Loris, feel free to contact me for any questions, bug reports, etc...

This dApp was created using @mysten/create-dapp that sets up a basic React Client dApp using the following tools:

• React as the UI framework
• TypeScript for type checking
• Vite for build tooling
• TailwindCSS for styling classes
• Daisy UI for pre-built UI components
• ESLint for linting
• @mysten/dapp-kit for connecting to wallets and loading data
• pnpm for package management

IMPORTANT ! : To select your desired network for the dapp, create a .env file at the root of the project, add either VITE_NETWORK="testnet" for testnet or VITE_NETWORK="mainnet" for mainnet. Dapp default to testnet if no .env file is provided.

For a full guide on how to build this dApp from scratch, visit this guide.

Deploying your Move code

Install Sui cli

Before deploying your move code, ensure that you have installed the Sui CLI. You can follow the Sui installation instruction to get everything set up.

This template uses testnet by default, so we'll need to set up a testnet environment in the CLI:

sui client new-env --alias testnet --rpc https://fullnode.testnet.sui.io:443
sui client switch --env testnet

If you haven't set up an address in the sui client yet, you can use the following command to get a new address:

sui client new-address secp256k1

This well generate a new address and recover phrase for you. You can mark a newly created address as you active address by running the following command with your new address:

sui client switch --address 0xYOUR_ADDRESS...

We can ensure we have some Sui in our new wallet by requesting Sui from the faucet (make sure to replace the address with your address):

curl --location --request POST 'https://faucet.testnet.sui.io/gas' \
--header 'Content-Type: application/json' \
--data-raw '{
    "FixedAmountRequest": {
        "recipient": "<YOUR_ADDRESS>"
    }
}'

Publishing the move package

The move code for this template is located in the move directory. To publish it, you can enter the move directory, and publish it with the Sui CLI:

cd move
sui client publish --gas-budget 100000000 counter

In the output there will be an object with a "packageId" property. You'll want to save that package ID to the src/constants.ts file as PACKAGE_ID:

export const TESTNET_COUNTER_PACKAGE_ID = "<YOUR_PACKAGE_ID>";

Now that we have published the move code, and update the package ID, we can start the app.

Starting your dApp

To install dependencies you can run

pnpm install

To start your dApp in development mode run

pnpm dev

Building

To build your app for deployment you can run

pnpm build