Skip to main content
This guide will get you up and running with TUNA in just a few minutes. You’ll connect your wallet, view the news feed, and tip your first article.

​
Prerequisites

Before you begin, make sure you have:

​
Getting Started

1

Clone and Install

Clone the TUNA repository and install dependencies:
git clone <repository-url>
cd tuna
npm install
You can also use yarn or pnpm if you prefer:
yarn install
# or
pnpm install
2

Configure Environment

Copy the example environment file:
cp .env.example .env.local
The default configuration is already set up for testnet:
# Sui Network Configuration
VITE_SUI_NETWORK=testnet
VITE_SUI_RPC_URL=https://fullnode.testnet.sui.io:443

# Contract Addresses
VITE_PACKAGE_ID=0xc19c25a9e42f77c2466a1df42d99a160a65a8800711eef447bb8da441df33c9e
VITE_REGISTRY_ID=0x65fa3ee1fa53af68c36dd47b525392dfb844726af980f758c1b6dc353a30e962
VITE_ADMIN_CAP_ID=0x87c090e5a60dd505d3ef7634e6f32ced2134640f56b329946ab920a3a9299f6e

# Walrus Configuration
VITE_WALRUS_PUBLISHER_URL=https://publisher.walrus-testnet.walrus.space/v1/store
VITE_WALRUS_AGGREGATOR_URL=https://aggregator.walrus-testnet.walrus.space/v1
These addresses point to the deployed TUNA contracts on Sui testnet. You don’t need to change them unless you’re deploying your own instance.
3

Start Development Server

Launch the development server:
npm run dev
The app will be available at http://localhost:5173
The development server supports hot module replacement (HMR), so your changes will be reflected instantly.
4

Connect Your Wallet

Open the app in your browser and:
  1. Click “Connect Wallet” in the header
  2. Select your Sui Wallet from the options
  3. Approve the connection in the wallet popup
  4. Verify you’re connected to testnet
Make sure your Sui Wallet is set to Testnet. TUNA currently runs on Sui testnet only.

​
Your First Actions

​
View the News Feed

Once connected, you’ll see the latest news articles from the Sui ecosystem displayed in a card-based layout: 
import { useLatestNews } from './hooks/useNews';

function NewsFeed() {
  const { data: articles, isLoading } = useLatestNews(50);
  
  if (isLoading) return <div>Loading news...</div>;
  
  return (
    <div>
      {articles?.map(article => (
        <NewsCard key={article.id} article={article} />
      ))}
    </div>
  );
}
Each article shows:
  • Title and summary
  • Category (DeFi, Gaming, NFT, Dev, Governance, General)
  • Publication date and source
  • Total tips received
  • Comment count

​
Tip an Article

Support quality content by tipping articles with SUI:
  1. Click the 💰 TIP button on any article
  2. Choose a quick amount (0.01, 0.05, 0.1, 0.5 SUI) or enter a custom amount
  3. Confirm the transaction in your Sui Wallet
  4. Wait for the transaction to complete
import { useSignAndExecuteTransaction } from '@mysten/dapp-kit';
import { createTipArticleTransaction, suiToMist } from './lib/sui';

function TipButton({ blobId }: { blobId: string }) {
  const { mutate: signAndExecute } = useSignAndExecuteTransaction();
  
  const handleTip = (amountInSui: number) => {
    const tx = createTipArticleTransaction(blobId, suiToMist(amountInSui));
    signAndExecute(
      { transaction: tx },
      {
        onSuccess: () => console.log('Tip sent!'),
        onError: (error) => console.error('Tip failed:', error)
      }
    );
  };
  
  return <button onClick={() => handleTip(0.1)}>Tip 0.1 SUI</button>;
}

​
Read Full Articles

Click “READ ↗” on any article card to:
  • View the complete article content
  • See all comments
  • Add your own comments
  • Tip the article or individual comments

​
Understanding the Architecture

TUNA combines three key technologies:

Sui Blockchain

Handles transactions, tips, comments, and article metadata on-chain

Walrus Storage

Stores article content and media in a decentralized blob storage network

React Frontend

Modern UI built with React 19, TypeScript, and Vite for fast performance

​
How It Works

  1. Articles are stored on Walrus (decentralized storage)
  2. Metadata is registered on-chain via the Sui smart contract
  3. The frontend fetches article IDs from the contract and content from Walrus
  4. All interactions (tips, comments) happen on-chain
// Articles are fetched from both sources
const registry = await suiClient.getObject({
  id: CONTRACT_CONFIG.REGISTRY_ID,
  options: { showContent: true },
});

const latestBlobs = fields.latest_blobs as string[];
const walrusContent = await fetchFromWalrus<WalrusArticleContent>(blobId);

​
Next Steps

Installation

Learn about detailed installation options and configuration

Core Concepts

Understand how TUNA works under the hood

API Reference

Explore available hooks and utilities

Sui Integration

Deep dive into the Sui smart contract integration

​
Troubleshooting

The registry might be empty. Check that:
  • You’re connected to the correct network (testnet)
  • The contract addresses in .env.local are correct
  • Articles have been published to the registry
Ensure that:
  • Sui Wallet extension is installed and unlocked
  • Your wallet is set to Testnet mode
  • You’ve approved the connection request
  • Try refreshing the page
Common issues:
  • Insufficient testnet SUI (get more from the faucet)
  • Wrong network selected in wallet
  • Gas price too low (usually handled automatically)
This could be due to:
  • Walrus aggregator temporarily unavailable
  • Network connectivity issues
  • Invalid blob IDs in the registry
  • Check browser console for detailed error messages

​
Get Help

Need assistance?
  • GitHub Issues: Report bugs or request features
  • Sui Discord: Join the Sui community
  • Documentation: Sui Docs | Walrus Docs
You’re now ready to explore the Sui ecosystem with TUNA! Start tipping articles and engaging with the community.

Build docs developers (and LLMs) love

Get started for freeTalk to us