@tuwaio/satellite-react

Satellite Connect React

React components and hooks for the Satellite Connect ecosystem, providing an easy-to-use interface for integrating Web3 wallet functionality into React applications.

🏛️ What is @tuwaio/satellite-react?

@tuwaio/satellite-react is the React integration layer for the Satellite Connect ecosystem. It provides a collection of React hooks and components that make it easy to integrate Web3 wallet functionality into your React applications.

Built on top of @tuwaio/satellite-core, this package offers a seamless developer experience for React applications requiring Web3 wallet integration.

✨ Key Features

• Type Safety: Full TypeScript support with proper type definitions
• Chain Agnostic: Unified support for both EVM and Solana wallets
• Modern React: Built with React 19+ features and best practices
• Multi-Chain Support: Seamless integration with multiple blockchain networks
• State Management: Zustand-based store for efficient state handling

💾 Installation

Requirements

• React 19+
• Node.js 20-24
• TypeScript 5.9+

# Using pnpm (recommended), but you can use npm, yarn or bun as well
pnpm add @tuwaio/satellite-react @tuwaio/satellite-core @tuwaio/orbit-core @wagmi/core @wallet-standard/react gill react immer zustand

🚀 Quick Start

Basic Setup

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { satelliteEVMAdapter, createDefaultTransports } from '@tuwaio/satellite-evm';
import { SatelliteConnectProvider } from '@tuwaio/satellite-react';
import { EVMConnectorsWatcher } from '@tuwaio/satellite-react/evm';
import { SolanaConnectorsWatcher } from '@tuwaio/satellite-react/solana';
import { satelliteSolanaAdapter } from '@tuwaio/satellite-solana';
import { WagmiProvider } from 'wagmi';
import { ReactNode } from 'react';
import { createConfig } from '@wagmi/core';
import { injected } from '@wagmi/connectors';
import { mainnet, sepolia } from 'viem/chains';
import type { Chain } from 'viem/chains';

export const appEVMChains = [
   mainnet,
   sepolia,
] as readonly [Chain, ...Chain[]];

export const wagmiConfig = createConfig({
   connectors: [injected()],
   transports: createDefaultTransports(appEVMChains), // Automatically creates http transports
   chains: appEVMChains,
   ssr: true, // Enable SSR support if needed (e.g., in Next.js)
});

export const solanaRPCUrls = {
   devnet: 'https://api.devnet.solana.com',
};


const queryClient = new QueryClient();

export function Providers({ children }: { children: ReactNode }) {
   return (
     <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={queryClient}>
           <SatelliteConnectProvider
             adapter={[satelliteEVMAdapter(wagmiConfig), satelliteSolanaAdapter({ rpcUrls: solanaRPCUrls })]}
             autoConnect={true}
           >
              <EVMConnectorsWatcher wagmiConfig={wagmiConfig} />
              <SolanaConnectorsWatcher />
              {children}
           </SatelliteConnectProvider>
        </QueryClientProvider>
     </WagmiProvider>
   );
}

Using Hooks

import { useSatelliteConnectStore } from '@tuwaio/satellite-react';

function ExampleGettingActiveWalletFromStore() {
  const activeConnection = useSatelliteConnectStore((state) => state.activeConnection);
  return <div>{activeConnection?.address}</div>
}

Core Components

• Store Access

  • useSatelliteConnectStore: Access to satellite connect store with full type safety
  • Provides access to wallet state, connection methods, and chain management

• Provider Components

  • SatelliteConnectProvider: Global context provider with all necessary configurations
  • EVMConnectorsWatcher: EVM connection state management
  • SolanaConnectorsWatcher: Solana connection state management

🤝 Contributing & Support

Contributions are welcome! Please read our main Contribution Guidelines.

If you find this library useful, please consider supporting its development. Every contribution helps!

➡️ View Support Options

📄 License

This project is licensed under the Apache-2.0 License - see the LICENSE file for details.