Swap Page

The Swap page brings cross-chain token trading right into RitoSwap via the Rango widget. The heart of RitoSwap’s classic dApp vision is seamless token trading—so instead of building a DEX from scratch, Rito integrated Rango’s battle-tested widget and skinned it to fit RitoSwap’s branding. Users get true multichain freedom without ever leaving the app, making the experience inclusive and expansive.

RitoSwap does NOT charge any fees or profit from widget usage, nor does it directly promote or sponsor any tokens or projects for profit.

View Live Page

Mainnet Testnet

File Paths

- - - - Music.tsx
      - SwapClient.integration.test.tsx
      - SwapClient.tsx
      - SwapClient.unit.test.tsx
      - useExternalProvider.ts
    - metadata.ts
    - page.integration.test.tsx
    - page.module.css
    - page.tsx
    - page.unit.test.ts

Components of Note

Component	Location	Purpose
SwapClient	`app/swap/components/SwapClient.tsx`	Loads, themes, and mounts the Rango cross-chain swap widget with custom orbs and load-state styling.
Music	`app/swap/components/Music.tsx`	Embeds the “A Trillie” audio player via `AudioWrapper`.

Music

This page features “A Trillie”, Rito Rhymes’ parody remix of Lil Wayne’s A Milli. It’s a punchline-packed anthem about blockchain culture and crypto get-rich-quick memeing—perfect for trading vibes but not meant to be taken too seriously.

⚠️

If you fork this repo and upgrade beyond Next.js 13, the Rango widget may break. You’ll need to remove it or refit it for compatibility with Next.js 14+.

For full Rango widget documentation and advanced setup options, see Rango Widget .