# React E2E Counter (Sui)

This project is based on the Sui **Distributed Counter** example and the `react-e2e-counter` template from `@mysten/create-dapp`.[[Distributed Counter](https://docs.sui.io/guides/developer/app-examples/e2e-counter); [create-dapp e2e-counter](https://sdk.mystenlabs.com/dapp-kit/getting-started/create-dapp)]

It demonstrates an end-to-end Sui dApp:

- `move/counter/`: Move smart contract that defines the `Counter` object and its logic.[[Distributed Counter smart contracts](https://docs.sui.io/guides/developer/app-examples/e2e-counter#smart-contracts)]
- `src/`: React frontend that lets users create, increment, and reset counters.[[Distributed Counter frontend](https://docs.sui.io/guides/developer/app-examples/e2e-counter#frontend)]

## Prerequisites

- Sui CLI installed and configured (Testnet recommended).[[Distributed Counter](https://docs.sui.io/guides/developer/app-examples/e2e-counter)]
- Testnet SUI from the faucet: <https://faucet.sui.io>.[[Distributed Counter](https://docs.sui.io/guides/developer/app-examples/e2e-counter)]
- `pnpm` or `yarn` installed.[[Distributed Counter frontend](https://docs.sui.io/guides/developer/app-examples/e2e-counter#frontend)]

## Install dependencies

From the project root:

```bash
pnpm install
# or
yarn install

Deploy the Move contract

1. Configure Sui Testnet:

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

2. Make sure your Testnet address has SUI (via the faucet).[Distributed Counter]

3. Publish the counter package:

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

Copy the packageId from the publish output; you will use it in the frontend configuration.[e2e-counter deployment]

Connect your deployed package

Create or edit src/constants.ts and set the package IDs as follows:[Connecting your package]

export const DEVNET_COUNTER_PACKAGE_ID = "0xTODO";
export const TESTNET_COUNTER_PACKAGE_ID = "<YOUR_TESTNET_PACKAGE_ID>";
export const MAINNET_COUNTER_PACKAGE_ID = "0xTODO";

If your project includes src/networkConfig.ts, update it to use these constants as shown in the e2e-counter example.[Connecting your package]

Run the frontend

From the project root:

pnpm dev
# or
yarn dev

Open the URL printed in the terminal (typically http://localhost:5173 or similar) in your browser.

What the app does

This app follows the Sui Distributed Counter guide:[Distributed Counter]

• Creates shared Counter objects on-chain.
• Lets any user increment a counter.
• Restricts resetting/setting the counter value to the owner address.
• Uses Programmable Transaction Blocks (PTBs) from the React frontend to call the Move functions.