TUWA Nova Connect


Feature-rich React components for connecting Web3 wallets with a comprehensive customization system and support for multiple blockchain networks.

---

🏛️ What is @tuwaio/nova-connect?

@tuwaio/nova-connect is a comprehensive solution for integrating Web3 wallets into React applications. The package provides ready-to-use components with deep customization and support for both EVM and Solana blockchains.

Built on top of the Satellite Connect ecosystem, Nova Connect offers a unified interface for working with various wallet types and blockchain networks.

---

✨ Key Features

- 🎨 Full Customization: Comprehensive customization system for all components and behaviors.
- ⚡ TypeScript: Full TypeScript support with proper type definitions.
- 🌐 Multi-Blockchain: Unified support for EVM and Solana wallets.
- 🔗 Modern React: Built using React 19+ features and best practices.
- 🎯 Ready-made Components: Connection button, modals, network selectors.
- ♿ Accessibility: Full ARIA and keyboard navigation support.
- 🎭 Internationalization: Support for multiple languages.
- 🔄 State Management: Zustand-based store for efficient state management.

---

💾 Installation

$3

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

``bash


Using pnpm (recommended), but you can use npm, yarn or bun as well


pnpm add @tuwaio/nova-connect @tuwaio/orbit-core @tuwaio/satellite-core @tuwaio/satellite-react @tuwaio/pulsar-core @tuwaio/nova-core zustand immer framer-motion react-toastify ethereum-blockies-base64 @emotion/is-prop-valid @web3icons/react @web3icons/common @heroicons/react @radix-ui/react-dialog @radix-ui/react-select
`

---

🚀 Quick Start

$3

`tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { satelliteEVMAdapter, createDefaultTransports } from '@tuwaio/satellite-evm';
import { NovaConnectProvider } from '@tuwaio/nova-connect';
import { SatelliteConnectProvider } from '@tuwaio/nova-connect/satellite';
import { EVMWalletsWatcher } from '@tuwaio/nova-connect/evm';
import { SolanaWalletsWatcher } from '@tuwaio/nova-connect/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 (


adapter={[satelliteEVMAdapter(wagmiConfig), satelliteSolanaAdapter({ rpcUrls: solanaRPCUrls })]}
autoConnect={true}
>


appChains={appEVMChains}
solanaRPCUrls={solanaRPCUrls}
withImpersonated
withBalance
withChain
>
{children}




);
}
`

$3

`tsx
import { ConnectButton } from '@tuwaio/nova-connect/components';

function App() {
return (



);
}
`

---

🧩 Key Components

$3

- Main component for wallet connection.
- Full customization system.

$3

- Context provider with state management.
- Customizable error handling.
- Flexible internationalization system.

---

🌍 Internationalization

Nova Connect supports full label customization:

`tsx
const customLabels = {
connectWallet: 'Connect Wallet',
disconnect: 'Disconnect',
connecting: 'Connecting...',
connected: 'Connected',
// ... other labels
};

labels={customLabels}
// ... other props
/>;
``

---

♿ Accessibility

Nova Connect fully supports accessibility standards:

- ARIA labels and descriptions
- Keyboard navigation
- Screen reader support
- Semantic HTML elements
- High contrast

🤝 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.