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

yarn add @siphoyawe/mina-sdk viem react react-dom

pnpm add @siphoyawe/mina-sdk viem react react-dom

bun add @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':

app/providers.tsx

'use client';

import { MinaProvider } from '@siphoyawe/mina-sdk/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <MinaProvider config={{ integrator: 'my-app' }}>
      {children}
    </MinaProvider>
  );
}

Then use in your root layout:

app/layout.tsx

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:

pages/_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:

src/main.tsx

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:

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "target": "ES2020",
    "lib": ["ES2020", "DOM"],
    "jsx": "react-jsx"
  }
}

Verifying Setup

Create a simple component to verify the SDK is working:

components/SDKStatus.tsx

'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

Additionally, commonly used types are re-exported for convenience:

import type {
  MinaConfig,
  Chain,
  Token,
  Quote,
  QuoteParams,
  Balance,
  ExecutionResult,
  TransactionStatus,
} from '@siphoyawe/mina-sdk/react';

Setup

Hooks

React Installation

React Installation

Installation

Requirements

Import Path

Framework Setup

TypeScript Configuration

Verifying Setup

Available Exports

Next Steps

MinaProvider

useMina Hook

​React Installation

​Installation

​Requirements

​Import Path

​Framework Setup

​TypeScript Configuration

​Verifying Setup

​Available Exports

​Next Steps

MinaProvider

useMina Hook

React Installation

Installation

Requirements

Import Path

Framework Setup

TypeScript Configuration

Verifying Setup

Available Exports

Next Steps