@tuwaio/nova-connect 1.0.0-fix-test-alpha.60.80c744e → 1.0.0-fix-test-alpha.62.a3a7178

package/README.md

@@ -1,28 +1,32 @@
-# Satellite Connect React
+# Nova Connect
 
-[![NPM Version](https://img.shields.io/npm/v/@tuwaio/satellite-react.svg)](https://www.npmjs.com/package/@tuwaio/satellite-react)
-[![License](https://img.shields.io/npm/l/@tuwaio/satellite-react.svg)](./LICENSE)
-[![Build Status](https://img.shields.io/github/actions/workflow/status/TuwaIO/satellite-connect/release.yml?branch=main)](https://github.com/TuwaIO/satellite-connect/actions)
+[![NPM Version](https://img.shields.io/npm/v/@tuwaio/nova-connect.svg)](https://www.npmjs.com/package/@tuwaio/nova-connect)
+[![License](https://img.shields.io/npm/l/@tuwaio/nova-connect.svg)](./LICENSE)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/TuwaIO/nova-uikit/release.yml?branch=main)](https://github.com/TuwaIO/nova-uikit/actions)
 
-React components and hooks for the Satellite Connect ecosystem, providing an easy-to-use interface for integrating Web3 wallet functionality into React applications.
+Feature-rich React components for connecting Web3 wallets with a comprehensive customization system and support for multiple blockchain networks.
 
 ---
 
-## 🏛️ What is `@tuwaio/satellite-react`?
+## 🏛️ What is `@tuwaio/nova-connect`?
 
-`@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.
+`@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 `@tuwaio/satellite-core`, this package offers a seamless developer experience for React applications requiring Web3 wallet integration.
+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
 
-- **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
+- **🎨 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.
+- **📱 Responsiveness**: Mobile-first design.
 
 ---
 
@@ -35,19 +39,21 @@ Built on top of `@tuwaio/satellite-core`, this package offers a seamless develop
 
 ```bash
 # Using pnpm (recommended)
-pnpm add @tuwaio/satellite-react @tuwaio/satellite-core @tuwaio/orbit-core @wagmi/core @wallet-standard/react gill react immer zustand
+pnpm add @tuwaio/nova-connect @tuwaio/satellite-core @tuwaio/orbit-core @tuwaio/pulsar-core @tuwaio/satellite-evm @tuwaio/satellite-solana @wagmi/core @wallet-standard/react viem zustand
 
 # Using npm
-npm install @tuwaio/satellite-react @tuwaio/satellite-core @tuwaio/orbit-core @wagmi/core @wallet-standard/react gill react immer zustand
+npm install @tuwaio/nova-connect @tuwaio/satellite-core @tuwaio/orbit-core @tuwaio/pulsar-core @tuwaio/satellite-evm @tuwaio/satellite-solana @wagmi/core @wallet-standard/react viem zustand
 
 # Using yarn
-yarn add @tuwaio/satellite-react @tuwaio/satellite-core @tuwaio/orbit-core @wagmi/core @wallet-standard/react gill react immer zustand
-```
----
+yarn add @tuwaio/nova-connect @tuwaio/satellite-core @tuwaio/orbit-core @tuwaio/pulsar-core @tuwaio/satellite-evm @tuwaio/satellite-solana @wagmi/core @wallet-standard/react viem zustand
+````
+
+-----
 
 ## 🚀 Quick Start
 
-### Basic Setup
+### Basic Provider Setup
+
 ```tsx
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { satelliteEVMAdapter } from '@tuwaio/satellite-evm';
@@ -56,17 +62,17 @@ import { initializeSolanaMobileConnectors, satelliteSolanaAdapter } from '@tuwai
 import { ReactNode } from 'react';
 import { WagmiProvider } from 'wagmi';
 import { createWagmiConfig } from '@tuwaio/satellite-evm';
-import { Chain, mainnet, sepolia } from 'viem/chains';
+import { Chain, mainnet, polygon, arbitrum } from 'viem/chains';
 
 export const appConfig = {
-  appName: 'Satellite EVM Test App',
+  appName: 'My Nova Connect App',
 };
 
 export const solanaRPCUrls = {
-  devnet: 'https://api.devnet.solana.com',
+  mainnet: '[https://api.mainnet-beta.solana.com](https://api.mainnet-beta.solana.com)',
 };
 
-export const appEVMChains = [mainnet, sepolia] as readonly [Chain, ...Chain[]];
+export const appEVMChains = [mainnet, polygon, arbitrum] as readonly [Chain, ...Chain[]];
 
 export const wagmiConfig = createWagmiConfig({
   ...appConfig,
@@ -75,7 +81,6 @@ export const wagmiConfig = createWagmiConfig({
   syncConnectedChain: true,
 });
 
-
 const queryClient = new QueryClient();
 
 initializeSolanaMobileConnectors({
@@ -88,10 +93,10 @@ export function Providers({ children }: { children: ReactNode }) {
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <SatelliteConnectProvider
-          adapter={[satelliteEVMAdapter(wagmiConfig), satelliteSolanaAdapter({ rpcUrls: solanaRPCUrls })]}
-          autoConnect={true}
+          adapters={[satelliteEVMAdapter({ wagmiConfig }), satelliteSolanaAdapter()]}
+          appName={appConfig.appName}
         >
-          <EVMWalletsWatcher wagmiConfig={wagmiConfig} />
+          <EVMWalletsWatcher />
           <SolanaWalletsWatcher />
           {children}
         </SatelliteConnectProvider>
@@ -101,29 +106,161 @@ export function Providers({ children }: { children: ReactNode }) {
 }
 ```
 
-### Using Hooks
+### Using NovaConnectButton
+
 ```tsx
-import { useSatelliteConnectStore } from '@tuwaio/satellite-react';
+import { NovaConnectButton } from '@tuwaio/nova-connect';
+import { SatelliteStoreContext } from '@tuwaio/satellite-react';
+import { useContext } from 'react';
 
-function ExampleGettingActiveWalletFromStore() {
-  const activeWallet = useSatelliteConnectStore((state) => state.activeWallet);
-  return <div>{activeWallet?.address}</div>
+function App() {
+  const store = useContext(SatelliteStoreContext);
+
+  return (
+    <div>
+      <NovaConnectButton
+        store={store}
+        appChains={appEVMChains}
+        solanaRPCUrls={solanaRPCUrls}
+        withBalance
+        withChain
+        withImpersonated
+      />
+    </div>
+  );
 }
 ```
----
 
-### Core Components
+-----
 
-1. **Store Access**
-    - `useSatelliteConnectStore`: Access to satellite connect store with full type safety
-    - Provides access to wallet state, connection methods, and chain management
+## 🎨 Customization
 
-2. **Provider Components**
-    - `SatelliteConnectProvider`: Global context provider with all necessary configurations
-    - `EVMWalletsWatcher`: EVM wallet connection state management
-    - `SolanaWalletsWatcher`: Solana wallet connection state management
+Nova Connect provides three levels of customization:
 
----
+### Basic Customization
+
+```tsx
+<NovaConnectButton
+  store={store}
+  appChains={appEVMChains}
+  solanaRPCUrls={solanaRPCUrls}
+  className="custom-button"
+  labels={{
+    connectWallet: 'Connect Wallet',
+    disconnect: 'Disconnect',
+  }}
+/>
+```
+
+### Advanced Customization
+
+```tsx
+<NovaConnectButton
+  store={store}
+  appChains={appEVMChains}
+  solanaRPCUrls={solanaRPCUrls}
+  customization={{
+    connectButton: {
+      classNames: {
+        button: ({ buttonData }) => `btn ${buttonData.isConnected ? 'btn-connected' : 'btn-connect'}`,
+      },
+    },
+    provider: {
+      errors: {
+        position: 'bottom-right',
+        autoClose: 5000,
+      },
+    },
+  }}
+/>
+```
+
+### Full Provider Customization
+
+```tsx
+<NovaConnectButton
+  store={store}
+  appChains={appEVMChains}
+  solanaRPCUrls={solanaRPCUrls}
+  customization={{
+    provider: {
+      // Custom components
+      components: {
+        ErrorsProvider: CustomErrorsProvider,
+        LabelsProvider: CustomLabelsProvider,
+      },
+      // Label customization
+      labels: {
+        merge: (defaultLabels, userLabels) => ({ ...defaultLabels, ...userLabels }),
+        transform: (mergedLabels, context) => ({
+          ...mergedLabels,
+          connectWallet: context.isConnected ? 'Reconnect' : 'Connect Wallet',
+        }),
+      },
+      // Lifecycle hooks
+      initialization: {
+        onConnectionStateChange: (isConnected, wallet, context) => {
+          console.log('Connection state changed:', isConnected);
+        },
+      },
+    },
+  }}
+/>
+```
+
+-----
+
+## 🧩 Key Components
+
+### 1. **NovaConnectButton**
+
+- Main component for wallet connection.
+- Built-in support for balance display and network selector.
+- Full customization system.
+
+### 2. **NovaConnectProvider**
+
+- Context provider with state management.
+- Customizable error handling.
+- Flexible internationalization system.
+
+### 3. **Hooks**
+
+- `useWalletBalance`: Get the wallet balance.
+
+-----
+
+## 🌍 Internationalization
+
+Nova Connect supports full label customization:
+
+```tsx
+const customLabels = {
+  connectWallet: 'Connect Wallet',
+  disconnect: 'Disconnect',
+  connecting: 'Connecting...',
+  connected: 'Connected',
+  // ... other labels
+};
+
+<NovaConnectButton
+  store={store}
+  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