pwc-sdk-wallet 0.7.2 → 0.7.3

package/README.md

@@ -55,6 +55,15 @@ A comprehensive, secure, and user-friendly wallet SDK for React Native applicati
 - [Validate QR Code](#validate-qr-code)
 - [Generate EIP-681 Compatible Address QR (for Metamask, Binance, Trust Wallet)](#generate-eip-681-compatible-address-qr-for-metamask-binance-trust-wallet)
 
+### 🌐 DApp Browser Integration
+- [DApp Browser Overview](#dapp-browser-overview)
+- [Quick Start](#dapp-browser-quick-start)
+- [Components](#dapp-browser-components)
+- [Services](#dapp-browser-services)
+- [Wagmi Integration](#wagmi-integration)
+- [Hooks](#dapp-browser-hooks)
+- [Examples](#dapp-browser-examples)
+
 ### 🖼️ NFT Functionality
 - [Get NFT Details](#get-nft-details)
 - [Get NFT Balance](#get-nft-balance)
@@ -693,6 +702,349 @@ console.log('Transaction History:', history);
 // Returns array of: { hash, from, to, blockNumber, timestamp, type }
 ```
 
+## 🌐 DApp Browser Integration with Wagmi
+
+The PWC Wallet SDK provides a complete DApp Browser integration with **Wagmi support**, ensuring that PWC Wallet appears as a connection option in **all dApps** that use Wagmi, ConnectKit, or RainbowKit. This integration follows the same patterns as popular wallets like MetaMask Mobile, Trust Wallet, and Rainbow Wallet.
+
+### 🎯 Key Benefits
+
+- **Universal dApp Compatibility** - PWC Wallet appears in ALL dApps using Wagmi
+- **One-Click Integration** - Simple setup with `createWagmiConfig`
+- **Built-in WebView Browser** - Complete browser with navigation controls
+- **Automatic Provider Injection** - PWC Wallet provider automatically injected
+- **Transaction Approval UI** - Beautiful transaction approval modals
+- **Connection Approval UI** - dApp connection approval modals
+- **Multi-chain Support** - Support for Ethereum and other EVM chains
+- **Security Features** - Transaction validation and user confirmation
+
+### 🚀 Quick Start (Wagmi Integration)
+
+```typescript
+import React from 'react';
+import { WagmiConfig } from 'wagmi';
+import { DAppBrowser, createWagmiConfig } from 'pwc-wallet-sdk';
+
+const WalletApp = () => {
+  const vault = new Vault(); // Your vault instance
+  
+  // Create Wagmi config with PWC Wallet connector
+  const wagmiConfig = createWagmiConfig({
+    vault: vault,
+    pwcWalletName: 'PWC Wallet',
+    pwcWalletIcon: 'https://pwc-wallet.com/icon.png'
+  });
+  
+  return (
+    <WagmiConfig config={wagmiConfig}>
+      <DAppBrowser
+        vault={vault}
+        initialUrl="https://paywithcrypto.io/"
+        onTransaction={(transaction) => {
+          console.log('Transaction requested:', transaction);
+        }}
+        onConnection={(dAppInfo) => {
+          console.log('Connection requested:', dAppInfo);
+        }}
+        onError={(error) => {
+          console.error('Browser error:', error);
+        }}
+      />
+    </WagmiConfig>
+  );
+};
+```
+
+### 🎯 What This Achieves
+
+With this setup, PWC Wallet will appear as a connection option in:
+
+- ✅ **PancakeSwap** - "Connect Wallet" → PWC Wallet option
+- ✅ **Uniswap** - "Connect Wallet" → PWC Wallet option  
+- ✅ **OpenSea** - "Connect Wallet" → PWC Wallet option
+- ✅ **All dApps using Wagmi** - "Connect Wallet" → PWC Wallet option
+- ✅ **All dApps using ConnectKit** - "Connect Wallet" → PWC Wallet option
+- ✅ **All dApps using RainbowKit** - "Connect Wallet" → PWC Wallet option
+
+### DApp Browser Components
+
+#### DAppBrowser
+
+The main component that provides a complete WebView browser with PWC Wallet integration. **Must be wrapped with WagmiConfig for universal dApp compatibility.**
+
+```typescript
+import { WagmiConfig } from 'wagmi';
+import { DAppBrowser, createWagmiConfig } from 'pwc-wallet-sdk';
+
+// Create Wagmi config for universal dApp compatibility
+const wagmiConfig = createWagmiConfig({
+  vault: vault,
+  pwcWalletName: 'PWC Wallet'
+});
+
+<WagmiConfig config={wagmiConfig}>
+  <DAppBrowser
+    vault={vault}
+    initialUrl="https://paywithcrypto.io/"
+    onTransaction={handleTransaction}
+    onConnection={handleConnection}
+    onError={handleError}
+  />
+</WagmiConfig>
+```
+
+#### TransactionModal
+
+A modal component for approving/rejecting transactions.
+
+```typescript
+import { TransactionModal } from 'pwc-wallet-sdk';
+
+<TransactionModal
+  visible={showTransactionModal}
+  transaction={pendingTransaction}
+  onApprove={handleApprove}
+  onReject={handleReject}
+/>
+```
+
+#### ConnectionModal
+
+A modal component for approving/rejecting dApp connections.
+
+```typescript
+import { ConnectionModal } from 'pwc-wallet-sdk';
+
+<ConnectionModal
+  visible={showConnectionModal}
+  dAppInfo={pendingConnection}
+  onApprove={handleApprove}
+  onReject={handleReject}
+/>
+```
+
+### DApp Browser Services
+
+#### BrowserProviderService
+
+Handles the injection of PWC Wallet provider into WebView and processes dApp requests.
+
+```typescript
+import { BrowserProviderService } from 'pwc-wallet-sdk';
+
+const browserProviderService = new BrowserProviderService(vault);
+const providerScript = browserProviderService.injectPWCWalletProvider();
+```
+
+#### MessageBridgeService
+
+Manages communication between WebView and React Native.
+
+```typescript
+import { MessageBridgeService } from 'pwc-wallet-sdk';
+
+const messageBridgeService = new MessageBridgeService();
+messageBridgeService.setWebViewRef(webViewRef.current);
+```
+
+#### TransactionHandler
+
+Processes and validates transactions.
+
+```typescript
+import { TransactionHandler } from 'pwc-wallet-sdk';
+
+const transactionHandler = new TransactionHandler(vault);
+const details = await transactionHandler.processTransaction(transaction);
+```
+
+### 🔌 Wagmi Integration (Core Feature)
+
+#### PWCWalletConnector
+
+The **core component** that makes PWC Wallet appear in all dApps. This connector integrates PWC Wallet with the Wagmi ecosystem, ensuring universal compatibility.
+
+```typescript
+import { PWCWalletConnector, createWagmiConfig } from 'pwc-wallet-sdk';
+
+// Create PWC Wallet connector
+const connector = new PWCWalletConnector({
+  vault: vault,
+  name: 'PWC Wallet',
+  icon: 'https://pwc-wallet.com/icon.png'
+});
+
+// Create complete Wagmi config
+const config = createWagmiConfig({
+  vault: vault,
+  appName: 'PWC Wallet',
+  pwcWalletName: 'PWC Wallet',
+  pwcWalletIcon: 'https://pwc-wallet.com/icon.png'
+});
+```
+
+#### Why This Matters
+
+- **Universal Compatibility** - PWC Wallet appears in ALL dApps using Wagmi
+- **No dApp Changes Required** - dApps don't need to add PWC Wallet manually
+- **Industry Standard** - Follows the same pattern as MetaMask, WalletConnect
+- **Future-Proof** - Works with any new dApp that uses Wagmi
+
+### DApp Browser Hooks
+
+#### usePWCWallet
+
+A React hook that provides easy access to PWC Wallet functionality.
+
+```typescript
+import { usePWCWallet } from 'pwc-wallet-sdk';
+
+const {
+  accounts,
+  currentAccount,
+  isConnected,
+  connect,
+  disconnect,
+  sendTransaction,
+  signMessage,
+  isLoading,
+  error
+} = usePWCWallet({ vault });
+```
+
+### DApp Browser Examples
+
+#### Complete Wallet App with Wagmi Integration
+
+```typescript
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { WagmiConfig } from 'wagmi';
+import { DAppBrowser, usePWCWallet, Vault, createWagmiConfig } from 'pwc-wallet-sdk';
+
+const WalletApp = () => {
+  const [activeTab, setActiveTab] = useState<'wallet' | 'browser'>('wallet');
+  const vault = new Vault(); // Your vault instance
+  
+  // Create Wagmi config for universal dApp compatibility
+  const wagmiConfig = createWagmiConfig({
+    vault: vault,
+    pwcWalletName: 'PWC Wallet',
+    pwcWalletIcon: 'https://pwc-wallet.com/icon.png'
+  });
+  
+  const { accounts, currentAccount, isConnected, connect, disconnect } = usePWCWallet({ vault });
+
+  if (activeTab === 'browser') {
+    return (
+      <WagmiConfig config={wagmiConfig}>
+        <DAppBrowser
+          vault={vault}
+          initialUrl="https://paywithcrypto.io/"
+          onTransaction={(transaction) => {
+            console.log('Transaction:', transaction);
+          }}
+          onConnection={(dAppInfo) => {
+            console.log('Connection:', dAppInfo);
+          }}
+        />
+      </WagmiConfig>
+    );
+  }
+
+  return (
+    <View>
+      <Text>PWC Wallet</Text>
+      {isConnected ? (
+        <View>
+          <Text>Connected: {currentAccount}</Text>
+          <TouchableOpacity onPress={() => setActiveTab('browser')}>
+            <Text>Open Browser</Text>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={disconnect}>
+            <Text>Disconnect</Text>
+          </TouchableOpacity>
+        </View>
+      ) : (
+        <TouchableOpacity onPress={connect}>
+          <Text>Connect Wallet</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+```
+
+#### Real-World Example: PancakeSwap Integration
+
+```typescript
+import React from 'react';
+import { WagmiConfig } from 'wagmi';
+import { DAppBrowser, createWagmiConfig } from 'pwc-wallet-sdk';
+
+const PancakeSwapExample = () => {
+  const vault = new Vault();
+  
+  const wagmiConfig = createWagmiConfig({
+    vault: vault,
+    pwcWalletName: 'PWC Wallet'
+  });
+
+  return (
+    <WagmiConfig config={wagmiConfig}>
+      <DAppBrowser
+        vault={vault}
+        initialUrl="https://pancakeswap.finance/"
+        onTransaction={(transaction) => {
+          console.log('PancakeSwap transaction:', transaction);
+        }}
+        onConnection={(dAppInfo) => {
+          console.log('PancakeSwap connection:', dAppInfo);
+        }}
+      />
+    </WagmiConfig>
+  );
+};
+```
+
+**Result:** When user clicks "Connect Wallet" on PancakeSwap, they will see "PWC Wallet" as an option! 🎯
+
+### 🎯 Summary: Universal dApp Compatibility
+
+The PWC Wallet SDK with Wagmi integration provides **universal dApp compatibility**:
+
+#### ✅ **Works with ALL dApps:**
+- **PancakeSwap** - "Connect Wallet" → PWC Wallet option
+- **Uniswap** - "Connect Wallet" → PWC Wallet option  
+- **OpenSea** - "Connect Wallet" → PWC Wallet option
+- **Aave** - "Connect Wallet" → PWC Wallet option
+- **Compound** - "Connect Wallet" → PWC Wallet option
+- **Any dApp using Wagmi** - "Connect Wallet" → PWC Wallet option
+
+#### ✅ **One Setup, Universal Access:**
+```typescript
+// Mobile dev chỉ cần setup 1 lần
+const wagmiConfig = createWagmiConfig({
+  vault: vault,
+  pwcWalletName: 'PWC Wallet'
+});
+
+<WagmiConfig config={wagmiConfig}>
+  <DAppBrowser vault={vault} />
+</WagmiConfig>
+```
+
+#### ✅ **No dApp Changes Required:**
+- dApps don't need to add PWC Wallet manually
+- Works with existing dApp code
+- Follows industry standards (MetaMask, WalletConnect)
+
+#### ✅ **No WalletConnect Required:**
+- PWC Wallet uses built-in browser (WebView)
+- No need for `projectId` or WalletConnect bridge
+- Direct connection without external services
+
+For detailed documentation, see [DApp Browser Integration Guide](./docs/DAPP_BROWSER_INTEGRATION.md).
+
 ### NFT Types and Interfaces
 Complete TypeScript interfaces for NFT functionality.
 
@@ -1070,10 +1422,27 @@ console.log('ERC-1155 transfer gas:', erc1155TransferGas.toString());
 
 ## Installation
 
+### Basic Installation
+
 ```bash
 npm install pwc-wallet-sdk
 ```
 
+### DApp Browser Dependencies
+
+For DApp Browser functionality with universal dApp compatibility:
+
+```bash
+npm install pwc-wallet-sdk react-native-webview wagmi connectkit
+```
+
+**Required Dependencies:**
+- `react-native-webview` - For WebView browser functionality
+- `wagmi` - For universal dApp compatibility  
+- `connectkit` - For modern wallet connection UI
+
+**Note:** These are peer dependencies. Mobile developers need to install them to use the DApp Browser features.
+
 ## Quick Start
 
 ### 1. Basic Wallet Creation

package/dist/components/ConnectionModal.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface DAppInfo {
+    name: string;
+    description: string;
+    url: string;
+    icons: string[];
+}
+export interface ConnectionModalProps {
+    visible: boolean;
+    dAppInfo: DAppInfo | null;
+    onApprove: () => void;
+    onReject: () => void;
+}
+export declare const ConnectionModal: React.FC<ConnectionModalProps>;

package/dist/components/ConnectionModal.js

@@ -0,0 +1,206 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectionModal = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ConnectionModal = ({ visible, dAppInfo, onApprove, onReject, }) => {
+    if (!dAppInfo)
+        return null;
+    const handleApprove = () => {
+        react_native_1.Alert.alert('Confirm Connection', `Are you sure you want to connect to ${dAppInfo.name}?`, [
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'Connect', onPress: onApprove, style: 'default' },
+        ]);
+    };
+    const handleReject = () => {
+        react_native_1.Alert.alert('Reject Connection', `Are you sure you want to reject the connection to ${dAppInfo.name}?`, [
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'Reject', onPress: onReject, style: 'destructive' },
+        ]);
+    };
+    return (react_1.default.createElement(react_native_1.Modal, { visible: visible, animationType: "slide", transparent: true, onRequestClose: onReject },
+        react_1.default.createElement(react_native_1.View, { style: styles.overlay },
+            react_1.default.createElement(react_native_1.View, { style: styles.modalContainer },
+                react_1.default.createElement(react_native_1.View, { style: styles.header },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.title }, "Connect to dApp"),
+                    react_1.default.createElement(react_native_1.Text, { style: styles.subtitle }, "Review connection request")),
+                react_1.default.createElement(react_native_1.ScrollView, { style: styles.content },
+                    react_1.default.createElement(react_native_1.View, { style: styles.dAppInfo },
+                        dAppInfo.icons && dAppInfo.icons.length > 0 && (react_1.default.createElement(react_native_1.Image, { source: { uri: dAppInfo.icons[0] }, style: styles.dAppIcon })),
+                        react_1.default.createElement(react_native_1.View, { style: styles.dAppDetails },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.dAppName }, dAppInfo.name),
+                            react_1.default.createElement(react_native_1.Text, { style: styles.dAppUrl }, dAppInfo.url))),
+                    react_1.default.createElement(react_native_1.View, { style: styles.section },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.sectionTitle }, "Description"),
+                        react_1.default.createElement(react_native_1.Text, { style: styles.description }, dAppInfo.description)),
+                    react_1.default.createElement(react_native_1.View, { style: styles.section },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.sectionTitle }, "Permissions"),
+                        react_1.default.createElement(react_native_1.View, { style: styles.permissionItem },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.permissionText }, "\u2022 View account address")),
+                        react_1.default.createElement(react_native_1.View, { style: styles.permissionItem },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.permissionText }, "\u2022 Request transaction approval")),
+                        react_1.default.createElement(react_native_1.View, { style: styles.permissionItem },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.permissionText }, "\u2022 Request message signing"))),
+                    react_1.default.createElement(react_native_1.View, { style: styles.section },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.sectionTitle }, "Network"),
+                        react_1.default.createElement(react_native_1.Text, { style: styles.network }, "Ethereum Mainnet")),
+                    react_1.default.createElement(react_native_1.View, { style: styles.warningSection },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.warningTitle }, "\u26A0\uFE0F Security Notice"),
+                        react_1.default.createElement(react_native_1.Text, { style: styles.warningText }, "Only connect to dApps you trust. This connection will allow the dApp to:"),
+                        react_1.default.createElement(react_native_1.Text, { style: styles.warningText }, "\u2022 View your wallet address"),
+                        react_1.default.createElement(react_native_1.Text, { style: styles.warningText }, "\u2022 Request transaction approvals"),
+                        react_1.default.createElement(react_native_1.Text, { style: styles.warningText }, "\u2022 Request message signatures"))),
+                react_1.default.createElement(react_native_1.View, { style: styles.footer },
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rejectButton, onPress: handleReject },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.rejectButtonText }, "Reject")),
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.approveButton, onPress: handleApprove },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.approveButtonText }, "Connect")))))));
+};
+exports.ConnectionModal = ConnectionModal;
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    modalContainer: {
+        width: '90%',
+        maxHeight: '80%',
+        backgroundColor: '#fff',
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    header: {
+        padding: 20,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e9ecef',
+        backgroundColor: '#f8f9fa',
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: '#212529',
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontSize: 14,
+        color: '#6c757d',
+        textAlign: 'center',
+        marginTop: 4,
+    },
+    content: {
+        flex: 1,
+        padding: 20,
+    },
+    dAppInfo: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 20,
+        padding: 16,
+        backgroundColor: '#f8f9fa',
+        borderRadius: 8,
+    },
+    dAppIcon: {
+        width: 48,
+        height: 48,
+        borderRadius: 8,
+        marginRight: 12,
+    },
+    dAppDetails: {
+        flex: 1,
+    },
+    dAppName: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: '#212529',
+        marginBottom: 4,
+    },
+    dAppUrl: {
+        fontSize: 14,
+        color: '#6c757d',
+    },
+    section: {
+        marginBottom: 16,
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#495057',
+        marginBottom: 8,
+    },
+    description: {
+        fontSize: 14,
+        color: '#212529',
+        lineHeight: 20,
+    },
+    permissionItem: {
+        marginBottom: 4,
+    },
+    permissionText: {
+        fontSize: 14,
+        color: '#212529',
+    },
+    network: {
+        fontSize: 14,
+        color: '#212529',
+        fontWeight: '500',
+    },
+    warningSection: {
+        marginTop: 20,
+        padding: 16,
+        backgroundColor: '#fff3cd',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#ffeaa7',
+    },
+    warningTitle: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#856404',
+        marginBottom: 8,
+    },
+    warningText: {
+        fontSize: 14,
+        color: '#856404',
+        lineHeight: 18,
+        marginBottom: 4,
+    },
+    footer: {
+        flexDirection: 'row',
+        padding: 20,
+        borderTopWidth: 1,
+        borderTopColor: '#e9ecef',
+    },
+    rejectButton: {
+        flex: 1,
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        backgroundColor: '#6c757d',
+        borderRadius: 8,
+        marginRight: 10,
+    },
+    rejectButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    approveButton: {
+        flex: 1,
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        backgroundColor: '#007AFF',
+        borderRadius: 8,
+        marginLeft: 10,
+    },
+    approveButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+});

package/dist/components/DAppBrowser.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Vault } from '../Vault';
+export interface DAppBrowserProps {
+    vault: Vault;
+    initialUrl?: string;
+    onTransaction?: (transaction: any) => void;
+    onConnection?: (dAppInfo: any) => void;
+    onError?: (error: Error) => void;
+    style?: any;
+}
+export declare const DAppBrowser: React.FC<DAppBrowserProps>;