Copy page

Arquitectura

Dashboard Architecture

React 19 + MUI + Redux Toolkit internal admin panel. Built with Nx monorepo tooling and Vite bundler. Includes wagmi + RainbowKit for on-chain operations (wallet-mint and bridge).

Tech Stack

• React 19 with TypeScript
• Material UI (MUI) for components and theming (dark/light mode)
• Redux Toolkit for state management (10 store slices)
• Nx monorepo tooling
• Vite bundler
• wagmi + RainbowKit for Web3 wallet connectivity

Project Structure

Code
twin-dashboard-frontend/
  src/
    components/
      sidebar.tsx          # Navigation menu with role-based items
      top-bar.tsx          # Header bar with ConnectButton (RainbowKit)
      table.tsx            # Reusable DataGrid with headers
      confirm.tsx          # Delete confirmation dialog
    pages/
      administration/      # Users, Roles, Accounts, Collaborators
      developer/           # Cron Jobs, Parameters
      operations/          # Tokens, Minteo, Circulacion, Seguimiento,
                           # Uniswap Pools, Bridge
      wallets/             # Minteo, Circulacion, Oracle, Uniswap,
                           # Bridge wallet configuration
      settings/            # User settings
      login/               # Authentication
    stores/
      users/               # User management slice
      roles/               # Role management slice
      accounts/            # Account management slice
      collaborators/       # Platform collaborator slice
      ops-tokens/          # Operational tokens slice
      cron-jobs/           # Cron job monitoring slice
      parameters/          # System parameters slice
      minting/             # Minting operations slice
      circulation/         # Circulation tracking slice
      bridge/              # Bridge routes and transactions slice
    router/
      route-path.ts        # Path constants
      index.tsx            # Route definitions with ProtectedRoute
    utils/
      format-amount.ts     # formatAmountToBaseUnits, formatBaseUnitsToHuman

Sidebar Navigation

The sidebar label "Configuracion" groups wallet CRUD pages. URL paths remain /wallets/... for backward compatibility.

CRUD vs Operations Pattern

Type	Sidebar Section	Purpose	Example
CRUD	Configuracion	Create, edit, delete wallets and configurations	/wallets/minting, /wallets/bridge
Operations	Operaciones	Execute actions, view on-chain info, transaction history	/operations/minting, /operations/bridge

Exception: OpsToken CRUD lives under /operations/tokens because tokens are reference entities, not wallets.

Store Pattern

Each store slice follows a consistent structure:

Code
stores/<entity>/
  types.ts      # State interface, entity type, action payloads
  actions.ts    # createAsyncThunk actions (CRUD operations)
  reducer.ts    # createSlice with extraReducers for async states
  index.ts      # Re-exports

The slice is registered in stores/reducers.ts (AppState type + reducers map) and re-exported from stores/index.ts.

Web3 Integration

Used for two features:

1. Wallet Mint -- Mint tokens via Safe multisig or EOA through WalletConnect
2. Bridge -- Bridge tokens cross-chain via Safe or EOA

Provider stack:

Code
WagmiProvider > QueryClientProvider > Redux > ThemeProvider > RainbowKitThemeWrapper

RainbowKitThemeWrapper synchronizes RainbowKit's theme with the app's dark/light mode via useThemeMode().

The ConnectButton is rendered globally in top-bar.tsx with compact props.

{% hint style="warning" %} Do not use useWaitForTransactionReceipt for wallet-mint or bridge flows. Safe multisig returns a safeTxHash that never appears on-chain until the signing threshold is met.

Do not use useSwitchChain() for Safe wallets. They do not support wallet_switchEthereumChain. Instead, show an Alert asking the user to connect on the correct network. {% endhint %}

Environment Variables

Variable	Description	Notes
VITE_API_URL	Backend API base URL	Runtime config
VITE_WALLET_CONNECT_PROJECT_ID	WalletConnect Cloud project ID	Build-time only -- Vite embeds VITE_* at build. Must be set as GitHub Secret in deploy workflow, not Doppler.

The dashboard deploys via GitHub Actions to S3 + CloudFront. Doppler is used only for the backend. The WalletConnect project ID is public by design (equivalent to a Stripe publishable key) -- allowlist the domain in cloud.reown.com to prevent quota abuse.