Skip to main content

​
Component Architecture

TUNA is built with React and TypeScript, featuring reusable components for news display, user engagement, and layout. All components follow brutalist design principles with bold borders, shadows, and high contrast.

​
Core Components

NewsCard

Displays news articles with images, metadata, and engagement actions

TipModal

Modal interface for tipping articles with SUI tokens

CommentSection

Full-featured commenting system with wallet authentication

Header & Footer

Navigation, wallet connection, and footer layout components

​
Component Hierarchy

App
├── Header
│   ├── Logo
│   ├── Navigation (Latest/Trending)
│   └── ConnectModal (Wallet)
├── NewsCard (multiple)
│   ├── Category Tag
│   ├── Article Content
│   └── TipModal (conditional)
├── ArticleDetail
│   ├── Article Content
│   └── CommentSection
│       ├── Comment Form
│       └── Comment List
└── Footer
    ├── About Links
    └── Social Links

​
Design System

​
Brutalist Style

All components share these design characteristics:
  • Bold borders: 2-4px solid black borders
  • Box shadows: Offset shadows (e.g., 4px 4px 0 black)
  • High contrast: Black borders on colored backgrounds
  • Sharp corners: No border radius
  • Monospace fonts: Used for metadata and labels

​
Animation

Components use GSAP for animations:
  • Entrance animations: Fade and slide on scroll
  • Hover effects: Lift and shadow changes
  • Smooth transitions: 0.2-0.5s durations

​
Shared Dependencies

​
Essential Packages

import { useCurrentAccount } from '@mysten/dapp-kit'
import { Link } from 'react-router-dom'
import gsap from 'gsap'
import type { NewsArticle, Comment } from '../types'

​
Type Definitions

All components use TypeScript interfaces from /src/types/index.ts:
  • NewsArticle: Article data structure
  • Comment: Comment data structure
  • Component-specific props interfaces

​
CSS Methodology

Each component has a dedicated CSS file:
  • NewsCard.css
  • TipModal.css
  • Component-specific utility classes
  • Global CSS variables for theming

​
State Management

​
Local State

Components use React hooks for local state: 
const [isOpen, setIsOpen] = useState(false)
const [amount, setAmount] = useState(0.01)

​
Global Hooks

Custom hooks from /hooks:
  • useArticleComments: Fetch article comments
  • usePostComment: Submit new comments
  • useSignAndExecuteTransaction: Execute blockchain transactions

​
Next Steps

Explore NewsCard

Learn about article display and engagement

Implement Tipping

Add token tipping to your application

Build docs developers (and LLMs) love

Get started for freeTalk to us