Sui Blockchain with Move & React.js - The Complete Guide

Set up a React.js frontend for a voting app by initializing a project, installing Node.js and npm, and configuring Tailwind CSS to enable future move language smart contract integration.

Install sui on macOS or Windows using official guidance. Use brew for macOS and chocolatey for Windows, then set up git and verify with your React frontend at localhost 5173.

Learn how to create and place a .gitignore in the frontend folder to exclude node_modules and other files from pushing to a GitHub repository, using the provided resources.

Set up the sui client to interact with the blockchain and tsui scan. Create a key pair, secure the recovery phrase, and test on the sui testnet with a faucet.

Install a wallet extension (official Sui wallet or Sweet Wallet), create a new wallet, securely save the 12-word recovery phrase, and import on the test net.

Create multiple Sui accounts by generating new addresses, switching the active one, and importing recovery phrases into a wallet. Practice sending coins between accounts and renaming them.

Generate a move package by creating a voting_system package, configuring move.toml, and defining modules such as dashboard within the package while preparing deployment addresses.

Define a proposal struct with a unique id and vote data, then publish a create_proposal function in Move to store proposals as shared objects on the Sui blockchain.

Explore value and reference concepts with rust-like examples, showing how variables copy or reference each other. Demonstrate mutable references, dereferencing, and how changes propagate to a and b.

Build and publish a move-based voting system package on the Sui testnet. Organize contracts, compile bytecode, manage dependencies, publish, and track upgrade capabilities with gas budgeting.

Send transactions on the Sui testnet by invoking the dashboard create_proposal with a title, description, and timestamp. Use programmable transaction blocks to batch calls and view digests and object changes.

Build a front-end proposal view for the Sui blockchain app, displaying proposals as cards, with vote interactions and wallet-enabled transactions, including NFT rewards.

Style the proposal view as a responsive grid with three items per row on large screens and one or two on small screens, with borders, rounded corners, and hover effects.

Create a reusable React navbar in TSX to navigate between home and wallet views, with light and dark theme styling and an active page highlight.

Create a wallet view in a React app, wire a navigation bar to switch between home, proposal, and wallet pages, and display wallet details for the connected account.

Create a navigation context and provider in React TypeScript to expose current page and navigate function, wiring them through the app to render pages dynamically.

Update the navigation provider to reflect the current view in the URL using pushState. Read the path from window.location and handle popstate to preserve the view on reload.

Connect a web app to the Sui wallet and send transactions across three blockchains using Tanstack query. Learn to install, wrap app in a query provider, and fetch with useQuery.

Install two more packages from Mr. Labs to add functionality, and wrap the app with wallet provider, Sui client provider, and query client provider for auto connect on testnet.

Display wallet status in a new wallet status component by showing account address, balance, and object count, using useCurrentAccount from the app kit to reflect connection status.

Connect the wallet with the navbar's connect button, which opens a modal to select and authorize a wallet on the testnet, displaying the address and allowing disconnect.

Connect your wallet, fetch owned objects with use sui client query, and display them for the connected account in a dedicated React component.

Display owned objects data in a Sui Move app by enabling show type, show owner, and show content. Render a Sui object component with id, type, owner, and content.

Display the sui coin balance by detecting coin objects, accessing the balance field, and rendering the value in a user-friendly format.

Refactor Move code into modular smart contracts by creating a dashboard and a proposal module. Build on-chain storage with a dashboard key and Uuid to wrap proposals.

Create a dashboard on the sui blockchain and register proposals by storing their unique IDs in the dashboard's proposal IDs vector, with init, create dashboard, and register proposal functions.

Learn to test Move modules for a sui dashboard by building test functions, simulating transaction scenarios, and validating init and proposal creation in a practical workflow.

Test the dashboard creation in init, take the shared dashboard from the object pool, and assert that the proposal IDs vector is empty.

Demonstrate testing a created proposal in move by using take_shared to fetch it, adding public getters for title, description, expiration, vote counts, creator, and voter registry, and validating them.

Move testing code to a separate test module, creating a voting system test and a dedicated create proposal test, and organize tests by module to verify proposals and dashboard interactions.

Implement admin restrictions in move with an admin capability pattern and transferring capability to the transaction sender. Initialize the admin capability in init so only the owner can create dashboards.

Fix test failures by simulating admin capability issuance in the dashboard module with a test-only function, granting the transaction sender admin capability to create proposals in voting tests.

Demonstrates testing an admin capability check by attempting to create a proposal without admin capability, expecting an empty inventory abort code and handling error codes in test scenarios.

Improve test reliability by introducing a new proposal test helper that wraps proposal creation with a simple function using admin capability, reducing boilerplate and preparing for future tests.

Enforce admin-only dashboard creation by passing the admin capability to the new function and init, preventing access and enabling a single dashboard with multiple proposals via one time witness pattern.

Show how a one time witness pattern in move creates a single dashboard, removes admin capability, and explain publishing your package, along with passing the witness by value and testing.

Discover why the drop ability matters in move, compare it with copy and hot potato, and learn to define a dashboard config and properly consume its values.

Explore the hot potato pattern in move, passing a value around and consuming it at drop, with examples like a hot potato struct and a shopping cart checkout.

Explain copy ability in move language by showing how config values are moved or copied, using mutability, and contrast with drop and copy semantics for primitives.

Recap copying, moving values, and borrowing in move language and rust concepts, explaining primitive types, copy and drop, mutable references, and dereferencing with practical console debugging examples.

Explore moving and borrowing semantics using a container struct and primitive types, demonstrating ownership transfer, drop behavior, mutable borrows, and the difference between copy and move.

Implement register proposal logic in move with duplicate checks and error handling. Use asserts and proposal IDs to prevent duplicates and prepare for one time witness validation and error signaling.

Explore testing register proposal in a Move-based Sui dashboard. Create one-time witness, admin capability, and register proposals, verifying IDs and dashboard storage for front-end voting.

Publish the move package to testnet, verify the correct address, publish the smart contract after running tests, then update the frontend with the package id, dashboard id, and admin capability.

Learn to retrieve the dashboard ID from environment-specific constants and adapt frontend code to fetch proposal IDs across devnet, testnet, and mainnet using a network variable.

Learn to create proposals on the blockchain using a move call with a package id, capture the proposal id, and register it via the dashboard module.

Fix register proposal security by enforcing admin capability and updating the dashboard and tests. Redeploy the contract, update package ids and admin capabilities, and verify proposal ids for frontend integration.

Fetch the dashboard data on the frontend by querying the blockchain with a sui client query, retrieving the dashboard object by its id and extracting the proposal IDs.

Learn to parse dashboard data and extract proposal ids with a getDashboardFields helper, validate move object content, and map proposal ids to proposal items using id props for display.

Separate the proposal item into its own tsx file and fetch all proposal data from the blockchain using sui client query get object to display title, description, and vote counts.

Parse the proposal data by validating as a move object, extract content fields, define a proposal type, and convert string counts and expiration to numbers for display.

Display a vote count and voted no count for a proposal in a Sui blockchain interface built with Move and React.js, using divs and spans.

Create a helper to format the proposal expiration unix timestamp into a readable date. Convert seconds to milliseconds and emit a locale string with a precise date and time.

Open and close a vote modal for a proposal by wiring a vote model component, controlled with is open and on close, and display hardcoded title, description, and yes/no votes.

Learn to pass a proposal into a vote model, display title and description, and handle voting with yes/no callbacks and vote counts in a modal component.

Compare interfaces and types in TypeScript, explain when to use each, and illustrate unions, intersections, and merging capabilities with remote packages.

Learn how to handle proposal expiration by validating unix time seconds, converting to milliseconds, and conditionally styling expired versus not expired items with hover states and cursor changes.