Skip to main content

​
Overview

TUNA provides formatting utilities for displaying data in a user-friendly way. These utilities handle currency formatting, image URL proxying, and other display-related transformations.

​
Currency Formatting

​
formatSui

Format MIST amounts into human-readable SUI values with appropriate precision. 
function formatSui(mist: number): string
​
mist
number
required
Amount in MIST (1 SUI = 1,000,000,000 MIST)
Returns: string - Formatted string with “SUI” suffix

​
Formatting Logic

The function applies different precision levels based on the amount:
​
< 0.001 SUI
string
Displays as "< 0.001 SUI" for very small amounts
formatSui(500000);  // "< 0.001 SUI"
formatSui(1);       // "< 0.001 SUI"
​
0.001 - 0.999 SUI
string
Displays with 3 decimal places for amounts less than 1 SUI
formatSui(1000000);      // "0.001 SUI"
formatSui(5000000);      // "0.005 SUI"
formatSui(500000000);    // "0.500 SUI"
​
≥ 1 SUI
string
Displays with 2 decimal places for amounts of 1 SUI or more
formatSui(1000000000);   // "1.00 SUI"
formatSui(1500000000);   // "1.50 SUI"
formatSui(10000000000);  // "10.00 SUI"

​
Implementation

export function formatSui(mist: number): string {
  const sui = mistToSui(mist);
  if (sui < 0.001) return '< 0.001 SUI';
  if (sui < 1) return `${sui.toFixed(3)} SUI`;
  return `${sui.toFixed(2)} SUI`;
}

​
Usage Examples

import { formatSui } from '@/lib/sui';

function TipDisplay({ amount }: { amount: number }) {
  return (
    <div className="tip-amount">
      {formatSui(amount)}
    </div>
  );
}

​
Image Utilities

​
getProxiedImageUrl

Generate a proxied image URL to bypass CORS and COEP restrictions using wsrv.nl. 
function getProxiedImageUrl(
  url: string,
  width?: number
): string
​
url
string
required
Original image URL to proxy
​
width
number
default:800
Optional width to resize the image to (optimization)
Returns: string - Proxied URL with CORS headers

​
Smart Proxying Logic

The function intelligently determines when to proxy:
​
Data URLs
no proxy
URLs starting with data: are returned as-is
getProxiedImageUrl('data:image/png;base64,...') 
// Returns original data URL
​
Local Assets
no proxy
URLs starting with / or blob: are returned unchanged
getProxiedImageUrl('/images/logo.png')
// Returns: "/images/logo.png"

getProxiedImageUrl('blob:http://localhost/...')
// Returns original blob URL
​
Already Proxied
no proxy
URLs containing wsrv.nl are not double-proxied
getProxiedImageUrl('https://wsrv.nl/?url=...')
// Returns original URL
​
External URLs
proxied
Remote URLs are proxied through wsrv.nl with optimization
getProxiedImageUrl('https://example.com/image.jpg', 800)
// Returns: "https://wsrv.nl/?url=https%3A%2F%2Fexample.com%2Fimage.jpg&w=800&output=webp"

​
Implementation Details

export function getProxiedImageUrl(url: string, width: number = 800): string {
  if (!url) return '';
  
  // Don't proxy data URLs or local assets
  if (url.startsWith('data:') || url.startsWith('/') || url.startsWith('blob:')) {
    return url;
  }
  
  // Already proxied?
  if (url.includes('wsrv.nl')) {
    return url;
  }
  
  // Encode the URL safely
  const encodedUrl = encodeURIComponent(url);
  
  // Use wsrv.nl with output=webp for better performance and n=-1 to allow all images
  return `https://wsrv.nl/?url=${encodedUrl}&w=${width}&output=webp`;
}

​
Why Use Image Proxying?

CORS Headers: The wsrv.nl proxy service adds proper CORS headers, allowing images to be used in canvas operations and with strict security policies.
Format Conversion: Images are automatically converted to WebP format for better performance and smaller file sizes.
Resize Optimization: Specifying a width parameter resizes images server-side, reducing bandwidth and improving load times.

​
Usage Examples

import { getProxiedImageUrl } from '@/lib/utils';
import { getWalrusUrl } from '@/lib/walrus';

function ArticleCover({ coverImageBlobId }) {
  const walrusUrl = getWalrusUrl(coverImageBlobId);
  const proxiedUrl = getProxiedImageUrl(walrusUrl, 1200);
  
  return (
    <img 
      src={proxiedUrl} 
      alt="Article cover"
      className="w-full h-auto"
    />
  );
}

​
Best Practices

​
Currency Display

Consistency: Always use formatSui() for displaying amounts to users. Don’t format MIST values manually to ensure consistent precision across the application.
Input vs Display: Store and process amounts in MIST (integer), but display them using formatSui() for better UX.

​
Image Proxying

Width Optimization: Choose appropriate width values based on the display context. Smaller widths for thumbnails and avatars, larger widths for hero images.
Walrus Integration: Always proxy Walrus URLs for external images to ensure CORS compatibility and optimize delivery.

​
Source Reference

Formatting utilities are implemented across multiple files: Currency formatting: 
src/lib/sui.ts:152-157
Image utilities: 
src/lib/utils.ts:1-28
See also:

Build docs developers (and LLMs) love

Get started for freeTalk to us