Dexifier

Dexifier is built as a production-style decentralized exchange frontend. It focuses on the hard parts of Web3 product engineering: route discovery, wallet/provider state, transaction confirmation, no-wallet swaps, QR/deposit flows, persistent history, settings, and a polished trading experience.

The project is especially useful as a portfolio example because it shows how a frontend engineer can connect complex third-party protocols to a usable interface without hiding the underlying transaction lifecycle from the user.

Cross-chain swapping is powerful but often confusing. Users need to choose networks, select tokens, compare routes, connect wallets, understand approvals, track pending transactions, and recover when a route fails. Dexifier organizes that flow into a single interface:

• Wallet swap mode for users who want direct wallet execution through supported providers.
• No-wallet swap mode for users who want a one-time deposit address flow without browser wallet connection.
• Route comparison so users can evaluate recommended, fastest, lowest-fee, and best-rate paths.
• Local history and status tracking so transactions are not just submitted and forgotten.

Public Dexifier positioning describes the product as a cross-chain/on-chain swap aggregator with privacy-first, no-KYC, no-signup expectations. This repository implements the interface layer around that product idea.

flowchart LR
    User[Trader] --> UI[Next.js App Router UI]
    UI --> State[Redux Toolkit + React Context Providers]
    UI --> Wallets[Wallet Providers and Web3Modal]
    UI --> Routes[Rango Routing API]
    UI --> NoWallet[No-Wallet API]

    Routes --> Meta[Chains, Tokens, Swappers]
    Routes --> Quote[Best Routes and Confirm Route]
    Routes --> Tx[Create, Approve, Check Status]

    NoWallet --> Currencies[Currency Metadata]
    NoWallet --> Rate[Rate Quote]
    NoWallet --> Deposit[Create Deposit Transaction]
    NoWallet --> Confirm[Poll Transaction Status]

    State --> Cards[Swap Card, Routes Card, Details Card]
    Wallets --> Manager[Rango Queue Manager]
    Manager --> Pending[Pending Swap Lifecycle]

1. User connects a supported wallet.
2. App loads blockchain and token metadata from Rango.
3. User selects source chain/token, destination chain/token, and amount.
4. App requests best routes from Rango.
5. Routes are sorted and rendered in the routes card.
6. User confirms a route.
7. Queue manager tracks approval, transaction creation, status checks, and failure reporting.

1. User selects source and destination currencies/networks.
2. App requests a rate quote from the no-wallet API.
3. User submits destination/refund details.
4. API creates a transaction and returns deposit instructions.
5. UI renders QR/deposit information and polls transaction status.
6. History is preserved through the no-wallet Redux slices.

• Framework: Next.js 14 App Router, React 18, TypeScript.
• Web3: Rango SDK, Rango wallet packages, Web3Modal, Wagmi/Viem, Web3.js.
• State: Redux Toolkit, React Redux, Redux Persist, React Query.
• Forms and validation: Formik, Yup.
• UI: Tailwind CSS, Radix UI, Lucide React, custom modal/card components.
• Utilities: Axios client wrappers, QR generation, queue manager integration.

Dexifier/
  app/
    _components/
      exchange-card/          # Main swap form, token/chain popups, wallet popup
      routes-card/            # Route result cards and route details
      swap-details-card/      # Transaction execution details
      no-wallet/              # No-wallet user interface
      settings-popup/         # Settings, filters, history popups
    api/
      rango-api.ts            # Rango routing and transaction API wrapper
      noWallet-api.ts         # No-wallet API wrapper
    providers/                # Token, filter, settings, Web3Modal providers
    wallet/                   # Wallet provider discovery and helpers
  redux_slice/
    slice/browserSlice/       # Wallet, token, chain, route, swap browser state
    slice/noWalletSlice/      # No-wallet currency, rate, transaction, history state
  docs/assets/                # README screenshots

Create .env.local with the keys used by the API clients:

NEXT_PUBLIC_RANGO_API_KEY_BASIC=your_rango_api_key
NEXT_PUBLIC_NO_WALLET_API_URL=your_no_wallet_api_base_url

Depending on the deployment target, wallet provider configuration may also require WalletConnect/Web3Modal project settings.

npm install
npm run dev

Open:

http://localhost:3000

Production build:

npm run build
npm run start

• Add route simulation and human-readable risk explanation before confirmation.
• Add stronger transaction recovery states for stuck, expired, failed, and refunded swaps.
• Add E2E tests around walletless flow and Rango route confirmation.
• Move sensitive API mediation behind a backend edge service where needed.
• Add analytics for route failures, abandonment, quote latency, and chain-level demand.
• Add accessibility review for keyboard navigation, modal focus traps, and mobile layouts.

• Complex Web3 UI state modeling.
• Cross-chain route and transaction lifecycle integration.
• Wallet-provider orchestration.
• No-wallet deposit-address swap UX.
• Production-style error handling and user feedback.
• Responsive trading interface design.