React Installation
The Mina SDK provides first-class React support with hooks and a context provider for seamless integration into your React applications.
Installation
Install the SDK along with its peer dependencies.
npm install @siphoyawe/mina-sdk viem react react-dom
Requirements
| Dependency | Version | Purpose |
|---|
react | ^18.0.0 | React library |
react-dom | ^18.0.0 | React DOM renderer |
viem | ^2.0.0 | Ethereum interactions |
Import Path
React-specific exports are available from a dedicated subpath:
// React hooks and provider
import {
MinaProvider,
useMina,
useQuote,
useTokenBalance,
useTransactionStatus
} from '@siphoyawe/mina-sdk/react';
// Core SDK (also available)
import { Mina, getChains, getTokens } from '@siphoyawe/mina-sdk';
The /react subpath includes client-side only code. Always import React hooks from @siphoyawe/mina-sdk/react, not from the main entry point.
Framework Setup
Next.js App Router
Next.js Pages Router
Vite / Create React App
The SDK requires client-side rendering. Mark your provider component with 'use client':'use client';
import { MinaProvider } from '@siphoyawe/mina-sdk/react';
export function Providers({ children }: { children: React.ReactNode }) {
return (
<MinaProvider config={{ integrator: 'my-app' }}>
{children}
</MinaProvider>
);
}
import { Providers } from './providers';
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
The 'use client' directive is required for any component using Mina hooks. Without it, Next.js will attempt server-side rendering which will fail.
Wrap your app in _app.tsx:import type { AppProps } from 'next/app';
import { MinaProvider } from '@siphoyawe/mina-sdk/react';
export default function App({ Component, pageProps }: AppProps) {
return (
<MinaProvider config={{ integrator: 'my-app' }}>
<Component {...pageProps} />
</MinaProvider>
);
}
Wrap your app at the entry point:import React from 'react';
import ReactDOM from 'react-dom/client';
import { MinaProvider } from '@siphoyawe/mina-sdk/react';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<MinaProvider config={{ integrator: 'my-app' }}>
<App />
</MinaProvider>
</React.StrictMode>
);
TypeScript Configuration
Ensure your tsconfig.json supports the SDK:
{
"compilerOptions": {
"moduleResolution": "bundler",
"target": "ES2020",
"lib": ["ES2020", "DOM"],
"jsx": "react-jsx"
}
}
Verifying Setup
Create a simple component to verify the SDK is working:
'use client';
import { useMina } from '@siphoyawe/mina-sdk/react';
export function SDKStatus() {
const { mina, isReady, error } = useMina();
if (error) {
return <div>SDK Error: {error.message}</div>;
}
if (!isReady) {
return <div>Initializing SDK...</div>;
}
return <div>SDK Ready</div>;
}
Available Exports
The /react subpath exports:
| Export | Type | Description |
|---|
MinaProvider | Component | Context provider for SDK instance |
useMina | Hook | Access SDK instance and status |
useQuote | Hook | Fetch bridge quotes with debouncing |
useTokenBalance | Hook | Track token balances with auto-refresh |
useTransactionStatus | Hook | Poll transaction status |
import type {
MinaConfig,
Chain,
Token,
Quote,
QuoteParams,
Balance,
ExecutionResult,
TransactionStatus,
} from '@siphoyawe/mina-sdk/react';
Next Steps
MinaProvider
Configure and set up the provider
useMina Hook
Access the SDK instance
