@tortoise-os/components

Beautiful, reusable UI components for Sui dApps built with Radix UI.

Installation

bun add @tortoise-os/components

Core Components

Address

Display Sui addresses with formatting, copy, and explorer link.

import { Address } from "@tortoise-os/components";

<Address
  address="0xabc123..."
  format="short"       // or "long"
  showCopy={true}
  showExplorer={true}
  label="Wallet"
/>

Balance

Display token balances with auto-refresh.

import { Balance, MultiBalance } from "@tortoise-os/components";

// Single balance
<Balance
  address="0xabc..."
  coinType="0x2::sui::SUI"
  label="SUI Balance"
  watch={true}
/>

// Multiple balances
<MultiBalance
  address="0xabc..."
  coinTypes={[
    { type: "0x2::sui::SUI", label: "SUI" },
    { type: "0xabc::tusd::TUSD", label: "TUSD" },
  ]}
/>

NetworkBadge

Display current network status.

import { NetworkBadge } from "@tortoise-os/components";

<NetworkBadge network="localnet" />
// Colors: localnet=gray, devnet=blue, testnet=orange, mainnet=green

TransactionButton

Button with loading states for transactions.

import { TransactionButton } from "@tortoise-os/components";

<TransactionButton
  onClick={handleSwap}
  isLoading={swap.isLoading}
  isDisabled={!isReady}
  color="green"
  size="3"
>
  Swap Tokens
</TransactionButton>

ObjectDisplay

Display Sui objects with all details.

import { ObjectDisplay } from "@tortoise-os/components";

<ObjectDisplay objectId="0xabc123..." />

DeFi Components

PoolCard

Display AMM pool information.

import { PoolCard } from "@tortoise-os/components";

<PoolCard
  poolId="0xabc..."
  coinASymbol="SUI"
  coinBSymbol="USDC"
/>

Features:

• Reserve amounts
• LP supply
• Fee rate (AI-optimized badge)
• TVL calculation

VaultCard

Display yield vault information.

import { VaultCard } from "@tortoise-os/components";

<VaultCard
  vaultId="0xabc..."
  name="SUI Vault"
/>

Features:

• APY display
• Total deposited
• Active strategy
• Utilization rate
• Last compound timestamp
• RL-optimized badge

StablecoinCard

Display NFT collateral vault.

import { StablecoinCard } from "@tortoise-os/components";

<StablecoinCard vaultId="0xabc..." />

Features:

• Collateral value
• Debt amount
• NFT count
• Collateralization ratio with progress bar
• Health status
• AI valuation badge

Wallet Components

WalletButton

Enhanced wallet connection button.

import { WalletButton, CustomWalletButton } from "@tortoise-os/components";

// Default dApp Kit button
<WalletButton />

// Custom styled button
<CustomWalletButton
  onConnect={() => console.log("Connected")}
  onDisconnect={() => console.log("Disconnected")}
/>

AccountInfo

Complete account information panel.

import { AccountInfo } from "@tortoise-os/components";

<AccountInfo />

Shows:

• Address with copy/explorer
• SUI balance
• Object count

Utility Components

CopyButton

Copy text to clipboard.

import { CopyButton } from "@tortoise-os/components";

<CopyButton text="0xabc123..." />

ExplorerLink

Link to Sui Explorer.

import { ExplorerLink } from "@tortoise-os/components";

<ExplorerLink address="0xabc..." />
<ExplorerLink objectId="0xdef..." />
<ExplorerLink txDigest="abc123..." network="devnet" />

LoadingSpinner

Loading state indicator.

import { LoadingSpinner } from "@tortoise-os/components";

<LoadingSpinner message="Loading pools..." size="3" />

Styling

All components use Radix UI Themes. Configure your theme:

import { Theme } from "@radix-ui/themes";
import "@radix-ui/themes/styles.css";

<Theme appearance="dark" accentColor="blue">
  <App />
</Theme>

Complete Example

import {
  PoolCard,
  VaultCard,
  WalletButton,
  AccountInfo,
  NetworkBadge,
} from "@tortoise-os/components";
import { Flex, Container } from "@radix-ui/themes";

function Dashboard() {
  return (
    <Container size="4">
      <Flex direction="column" gap="6">
        {/* Header */}
        <Flex justify="between" align="center">
          <NetworkBadge network="localnet" />
          <WalletButton />
        </Flex>

        {/* Account */}
        <AccountInfo />

        {/* Pools */}
        <Flex gap="4" wrap="wrap">
          <PoolCard
            poolId="0x123..."
            coinASymbol="SUI"
            coinBSymbol="USDC"
          />
          <VaultCard
            vaultId="0x456..."
            name="SUI Vault"
          />
        </Flex>
      </Flex>
    </Container>
  );
}

TypeScript

All components are fully typed:

import type {
  AddressProps,
  BalanceProps,
  PoolCardProps,
  VaultCardProps,
} from "@tortoise-os/components";

Customization

Components accept Radix UI props for styling:

<Address
  address="0xabc..."
  style={{ padding: "10px" }}
  className="my-custom-class"
/>

Best Practices

1. Use watch for real-time data

   <Balance watch={true} />

2. Provide loading states

   {isLoading ? <LoadingSpinner /> : <PoolCard />}

3. Handle errors gracefully

   {error ? <ErrorCard error={error} /> : <Component />}

4. Keep cards responsive

   <Flex gap="4" wrap="wrap">
     {pools.map(pool => <PoolCard key={pool.id} />)}
   </Flex>

License

MIT