Mobile & Desktop

The ONE SDK (@one_deploy/sdk v1.1.0) ships two entry points with different component availability. Both platforms share the same hooks and engine client, but UI components differ significantly between web and React Native.

Platform Entry Points

Entry Point	Import Path	Platform
Web	`@one_deploy/sdk`	Browser (React DOM)
React Native	`@one_deploy/sdk/react-native`	iOS / Android (React Native)

Web Components

The web entry point exports the full set of pre-built widget components:

// All available from '@one_deploy/sdk'
import {
  // Wallet
  OneConnectButton,
  OneConnectButtonSimple,
  OneConnectButtonFull,
  OneWalletBalance,
  OneBalanceDisplay,
  OneSendWidget,
  OneSendETHWidget,
  OneSendUSDCWidget,
  OneReceiveWidget,
  OneTransactionButton,
  OneSendETHButton,
  OneApproveButton,

  // Payments
  OnePayWidget,
  OneOnrampWidget,
  OneOfframpWidget,
  OneSwapWidget,
} from '@one_deploy/sdk';

Full Web Component List

Category	Component	Description
Connect	`OneConnectButton`	Wallet connection with social login
	`OneConnectButtonSimple`	Minimal connect button preset
	`OneConnectButtonFull`	Full-featured connect button preset
Balance	`OneWalletBalance`	Live wallet balance display
	`OneBalanceDisplay`	Static balance display from data
Send	`OneSendWidget`	Complete send form
	`OneSendETHWidget`	ETH send preset
	`OneSendUSDCWidget`	USDC send preset
Receive	`OneReceiveWidget`	QR code and address display
Buttons	`OneTransactionButton`	Generic transaction executor
	`OneSendETHButton`	ETH send button
	`OneApproveButton`	ERC-20 approval button
Payments	`OnePayWidget`	Unified payment widget
	`OneOnrampWidget`	Fiat-to-crypto onramp
	`OneOfframpWidget`	Crypto-to-fiat offramp
	`OneSwapWidget`	Token swap widget

React Native Components

The React Native entry point exports AI trading and forex components only. Wallet and payment widgets are not available on React Native.

// Available from '@one_deploy/sdk/react-native'
import {
  // AI Trading
  OneAITradingDashboard,
  OneAgentCatalog,
  OneTradingPairSelector,
  OneBotConsole,

  // Forex
  OneForexDashboard,
  OneForexPoolCard,
  OneForexCapitalSplit,
  OneForexConsoleView,
  OneForexPairSelector,
  OneForexTradeHistory,

  // Utilities (not components)
  parseQRCode,
  generateShareContent,
} from '@one_deploy/sdk/react-native';

React Native Component List

Category	Component	Description
AI Trading	`OneAITradingDashboard`	Portfolio and agent overview
	`OneAgentCatalog`	Browse and select trading agents
	`OneTradingPairSelector`	Select trading pairs
	`OneBotConsole`	Real-time bot activity console
Forex	`OneForexDashboard`	Forex investment overview
	`OneForexPoolCard`	Individual pool display
	`OneForexCapitalSplit`	Capital allocation view
	`OneForexConsoleView`	Forex trading console
	`OneForexPairSelector`	Currency pair selection
	`OneForexTradeHistory`	Trade history list
Utilities	`parseQRCode`	Parse QR code data
	`generateShareContent`	Generate shareable wallet content

Shared Across Both Platforms

Hooks and the engine client work identically on both web and React Native.

Hooks

// Available from both '@one_deploy/sdk' and '@one_deploy/sdk/react-native'
import {
  useOneClient,
  useWalletBalance,
  useTokenPrice,
  useAITradingPortfolio,
  useForexPools,
} from '@one_deploy/sdk'; // or '@one_deploy/sdk/react-native'

Engine Client

// The engine client API is identical on both platforms
import { useOneClient } from '@one_deploy/sdk';

function CrossPlatformExample() {
  const { engineClient } = useOneClient();

  const fetchData = async () => {
    // These methods work on both web and React Native
    const wallets = await engineClient.getUserWallets();
    const balances = await engineClient.getWalletBalance('0x...');
    const portfolio = await engineClient.getPortfolioSummary('0x...');
    const history = await engineClient.getWalletTransactions('0x...');
    const status = await engineClient.getTransactionStatus('tx-id');

    // sendTransaction works on both platforms
    const tx = await engineClient.sendTransaction({
      fromAddress: '0x...',
      toAddress: '0x...',
      chainId: 8453,
      value: '0.1',
      currency: 'ETH',
    });
  };

  return null;
}

Why the Split?

The ONE SDK keeps web widgets (Connect, Pay, Send, Receive, Swap, Onramp, Offramp) as web-only because they rely on browser-specific APIs (DOM, window, navigator.share, clipboard API) and CSS-based layouts. The React Native entry point provides native mobile components for AI trading and forex, which are the primary mobile use cases.

For wallet and payment flows on React Native, use the engine client methods and hooks directly to build custom native UI.

Responsive Wrapping Guidance

SDK Widgets Are Card-Sized

All ONE SDK web components render as self-contained, card-sized widgets. They do not include built-in responsive breakpoints. This is by design -- it gives you full control over layout.

// The widget renders at its intrinsic card size
<OneSendWidget fromAddress="0x..." chainId={8453} />

You Control the Container

Wrap SDK widgets in your own responsive containers. The widgets will fill the width of their parent.

import { OneSendWidget } from '@one_deploy/sdk';

function ResponsiveSendPage() {
  return (
    <div
      style={{
        maxWidth: '480px',
        width: '100%',
        margin: '0 auto',
        padding: '16px',
      }}
    >
      <OneSendWidget
        fromAddress="0xYourWallet..."
        chainId={8453}
        onSuccess={(tx) => console.log(tx.transactionHash)}
      />
    </div>
  );
}

CSS Grid / Flexbox Layouts

import {
  OneWalletBalance,
  OneSendWidget,
  OneReceiveWidget,
  CHAIN_IDS,
} from '@one_deploy/sdk';

function WalletDashboard({ address }: { address: string }) {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
        gap: '24px',
        padding: '24px',
      }}
    >
      <div>
        <h3>Balance</h3>
        <OneWalletBalance
          walletAddress={address}
          chains={[CHAIN_IDS.BASE, CHAIN_IDS.ETHEREUM]}
          autoRefresh
        />
      </div>
      <div>
        <h3>Send</h3>
        <OneSendWidget
          fromAddress={address}
          chainId={CHAIN_IDS.BASE}
        />
      </div>
      <div>
        <h3>Receive</h3>
        <OneReceiveWidget
          walletAddress={address}
          chainId={CHAIN_IDS.BASE}
        />
      </div>
    </div>
  );
}

No Built-In Breakpoints

The SDK intentionally does not ship responsive breakpoints. Reasons:

Framework agnostic -- Your app may use Tailwind, CSS modules, styled-components, or plain CSS. The SDK does not impose a CSS framework.
Layout control -- You decide whether a widget appears in a sidebar, modal, full-page, or card grid.
Consistent sizing -- Widgets render predictably at ~360-480px wide, making them easy to place in any layout.

If you need responsive behavior, apply it at the container level:

/* Your app's CSS */
.wallet-widget-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .wallet-widget-container {
    max-width: 420px;
  }
}

@media (min-width: 1200px) {
  .wallet-widget-container {
    max-width: 480px;
  }
}

import { OneSendWidget } from '@one_deploy/sdk';

function ResponsiveWrapper() {
  return (
    <div className="wallet-widget-container">
      <OneSendWidget fromAddress="0x..." chainId={8453} />
    </div>
  );
}

Platform Detection

If you maintain a shared codebase, conditionally import based on platform:

// utils/platform.ts
import { Platform } from 'react-native';

export const isWeb = Platform.OS === 'web';
export const isMobile = Platform.OS === 'ios' || Platform.OS === 'android';

// Conditional component rendering
import { isWeb } from './utils/platform';

function WalletView({ address }: { address: string }) {
  if (isWeb) {
    // Dynamic import for web-only components
    const { OneWalletBalance } = require('@one_deploy/sdk');
    return <OneWalletBalance walletAddress={address} />;
  }

  // On React Native, use the hook directly
  const { balances, totalBalanceUsd } = useWalletBalance({
    walletAddress: address,
  });

  return (
    <View>
      <Text>Total: ${totalBalanceUsd}</Text>
      {balances.map((b) => (
        <Text key={`${b.chainId}-${b.token}`}>
          {b.symbol}: {b.balance}
        </Text>
      ))}
    </View>
  );
}

Summary

Capability	Web	React Native
Connect button	`OneConnectButton`	Use engine client
Balance display	`OneWalletBalance`	`useWalletBalance` hook
Send widget	`OneSendWidget`	`engineClient.sendTransaction()`
Receive widget	`OneReceiveWidget`	`generateShareContent()`
Payment widgets	`OnePayWidget`, `OneOnrampWidget`, etc.	Use engine client
AI Trading	Not available	`OneAITradingDashboard`, etc.
Forex	Not available	`OneForexDashboard`, etc.
Hooks	All hooks	All hooks
Engine client	Full API	Full API
QR parsing	Not exported	`parseQRCode()`

Next Steps

Wallet Overview -- Core wallet concepts and API.
Connect Button -- Web-only connect button details.
QR Code Scanning -- React Native QR parsing utility.

Platform Entry Points​

Web Components​

Full Web Component List​

React Native Components​

React Native Component List​

Shared Across Both Platforms​

Hooks​

Engine Client​

Why the Split?​

Responsive Wrapping Guidance​

SDK Widgets Are Card-Sized​

You Control the Container​

CSS Grid / Flexbox Layouts​

No Built-In Breakpoints​

Platform Detection​

Summary​

Next Steps​