Skip to main content

React Components

The @mantle-rwa/react package provides pre-built React components for common RWA operations, with full theming support and accessibility compliance.

Installation​

npm install @mantle-rwa/react @mantle-rwa/sdk

Setup​

Wrap your application with the RWAProvider:

import { RWAProvider } from '@mantle-rwa/react';

function App() {
  return (
    <RWAProvider
      config={{
        network: 'mantle-sepolia',
        theme: 'dark',
      }}
    >
      <YourApp />
    </RWAProvider>
  );
}

Available Components​

ComponentDescription
KYCFlowComplete KYC verification flow
InvestorDashboardPortfolio overview and management
TokenMintFormToken minting interface
YieldCalculatorYield projection calculator

Quick Example​

import { KYCFlow, InvestorDashboard } from '@mantle-rwa/react';

function InvestorPage() {
  return (
    <div>
      <KYCFlow
        tokenAddress="0x..."
        onComplete={(result) => console.log('KYC complete:', result)}
      />
      
      <InvestorDashboard
        tokenAddress="0x..."
        showYield={true}
      />
    </div>
  );
}

Theming​

Built-in Themes​

<RWAProvider config={{ theme: 'dark' }}>  {/* Dark theme */}
<RWAProvider config={{ theme: 'light' }}> {/* Light theme */}
<RWAProvider config={{ theme: 'system' }}> {/* System preference */}

Custom Theme​

<RWAProvider
  config={{
    network: 'mantle-sepolia',
    theme: {
      mode: 'dark',
      colors: {
        primary: '#65B3AE',
        secondary: '#4FA39E',
        background: '#0D0D0D',
        surface: '#1A1A1A',
        text: '#E5E5E5',
        textSecondary: '#A0AEC0',
        error: '#EF4444',
        success: '#10B981',
        warning: '#F59E0B',
      },
      borderRadius: '8px',
      fontFamily: 'Inter, sans-serif',
    },
  }}
>

Hooks​

The package also exports useful hooks:

import { useRWA, useToken, useKYC, useYield } from '@mantle-rwa/react';

function MyComponent() {
  const { client, isConnected } = useRWA();
  const { balance, transfer } = useToken('0x...');
  const { isVerified, startVerification } = useKYC('0x...');
  const { claimable, claim } = useYield('0x...');
  
  // ...
}

useRWA​

Access the RWA client and connection state.

const { client, isConnected, address, network } = useRWA();

useToken​

Token operations and state.

const {
  balance,
  totalSupply,
  transfer,
  approve,
  isLoading,
  error,
} = useToken(tokenAddress);

useKYC​

KYC verification state and actions.

const {
  isVerified,
  accreditationLevel,
  startVerification,
  isLoading,
} = useKYC(kycRegistryAddress);

useYield​

Yield distribution state and claims.

const {
  claimable,
  totalClaimed,
  claim,
  isLoading,
} = useYield(yieldDistributorAddress);

TypeScript Support​

All components are fully typed:

import type {
  KYCFlowProps,
  InvestorDashboardProps,
  TokenMintFormProps,
  YieldCalculatorProps,
  RWAProviderConfig,
} from '@mantle-rwa/react';

Accessibility​

All components follow WAI-ARIA guidelines:

  • Keyboard navigation support
  • Screen reader compatible
  • Focus management
  • Color contrast compliance

Next Steps​