prep for v1.2.3

.changeset/few-cherries-leave.md

@@ -0,0 +1,18 @@
+---
+'@reown/appkit-ethers5-react-native': patch
+'@reown/appkit-ethers-react-native': patch
+'@reown/appkit-wagmi-react-native': patch
+'@reown/appkit-auth-ethers-react-native': patch
+'@reown/appkit-auth-wagmi-react-native': patch
+'@reown/appkit-coinbase-ethers-react-native': patch
+'@reown/appkit-coinbase-wagmi-react-native': patch
+'@reown/appkit-common-react-native': patch
+'@reown/appkit-core-react-native': patch
+'@reown/appkit-scaffold-react-native': patch
+'@reown/appkit-scaffold-utils-react-native': patch
+'@reown/appkit-siwe-react-native': patch
+'@reown/appkit-ui-react-native': patch
+'@reown/appkit-wallet-react-native': patch
+---
+
+fix: clear balance if the sdk fails to get it

.changeset/shaggy-moose-tan.md

@@ -0,0 +1,18 @@
+---
+'@reown/appkit-scaffold-react-native': patch
+'@reown/appkit-ethers5-react-native': patch
+'@reown/appkit-common-react-native': patch
+'@reown/appkit-ethers-react-native': patch
+'@reown/appkit-wagmi-react-native': patch
+'@reown/appkit-core-react-native': patch
+'@reown/appkit-siwe-react-native': patch
+'@reown/appkit-ui-react-native': patch
+'@reown/appkit-auth-ethers-react-native': patch
+'@reown/appkit-auth-wagmi-react-native': patch
+'@reown/appkit-coinbase-ethers-react-native': patch
+'@reown/appkit-coinbase-wagmi-react-native': patch
+'@reown/appkit-scaffold-utils-react-native': patch
+'@reown/appkit-wallet-react-native': patch
+---
+
+fix: deduplicate wallets in all wallet list

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.20.0

TESTING.md

@@ -0,0 +1,173 @@
+# Testing Setup
+
+This document describes the testing setup for the WalletConnect AppKit React Native project.
+
+## Shared Jest Setup
+
+To avoid duplication and ensure consistency across packages, we use a shared Jest setup approach:
+
+### Structure
+
+- `jest-shared-setup.ts`: Contains common mocks used across all packages
+- Package-specific `jest-setup.ts` files: Import the shared setup and add package-specific mocks
+
+### How it works
+
+1. The root `jest.config.ts` defines a moduleNameMapper that maps `@shared-jest-setup` to the shared setup file:
+
+```js
+moduleNameMapper: {
+  '^@shared-jest-setup$': '<rootDir>/jest-shared-setup.ts'
+}
+```
+
+2. Each package's `jest.config.ts` overrides this mapping to use a relative path:
+
+```js
+moduleNameMapper: {
+  '^@shared-jest-setup$': '../../jest-shared-setup.ts'
+}
+```
+
+3. Each package has its own `jest-setup.ts` file that imports the shared setup and only adds package-specific mocks:
+
+```js
+// Import shared setup
+import '@shared-jest-setup';
+
+// Import helper functions from shared setup (if needed)
+import { mockThemeContext, mockUseTheme } from '@shared-jest-setup';
+
+// Apply package-specific mocks
+mockThemeContext('../src/context/ThemeContext');
+mockUseTheme('../src/hooks/useTheme');
+
+// Add any other package-specific mocks here if needed
+```
+
+### Shared Mocks
+
+The shared setup includes mocks for:
+
+- `@react-native-async-storage/async-storage`
+- React Native components and APIs (StyleSheet, Dimensions, Platform, etc.)
+- `react-native-svg` components
+- Helper functions for mocking package-specific modules
+
+All common mocks are centralized in the shared setup file, eliminating duplication across packages. This makes the testing setup more maintainable and consistent.
+
+### Adding New Mocks
+
+To add a new mock that should be shared across packages:
+
+1. Add it to `jest-shared-setup.ts`
+2. If it's a function that needs to be imported by packages, export it from `jest-shared-setup.ts`
+
+For package-specific mocks, add them to the package's `jest-setup.ts` file.
+
+### Type Declarations
+
+Each package includes a type declaration file for the shared setup module:
+
+```ts
+// types/shared-jest-setup.d.ts
+declare module '@shared-jest-setup' {
+  export function mockThemeContext(modulePath: string): void;
+  export function mockUseTheme(modulePath: string): void;
+}
+```
+
+## Running Tests
+
+To run tests for all packages:
+
+```bash
+yarn test
+```
+
+To run tests for a specific package:
+
+```bash
+yarn workspace @reown/appkit-[package-name]-react-native test
+```
+
+## Playwright Testing
+
+For end-to-end testing of web interfaces (such as the web demo or web views within the React Native app), we use Playwright.
+
+### Setup
+
+1. Install Playwright:
+
+```bash
+# Install Playwright and browsers
+npx playwright install
+```
+
+2. Playwright tests are located in the `e2e` directory at the root of the project.
+
+### Writing Tests
+
+Playwright tests are written using the Playwright Test framework. Here's a basic example:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('basic test', async ({ page }) => {
+  // Navigate to the page
+  await page.goto('https://your-app-url.com');
+
+  // Interact with the page
+  await page.click('text=Sign In');
+  await page.fill('input[name="email"]', 'user@example.com');
+  await page.fill('input[name="password"]', 'password');
+  await page.click('button[type="submit"]');
+
+  // Assert the result
+  await expect(page.locator('.welcome-message')).toContainText('Welcome');
+});
+```
+
+### Running Playwright Tests
+
+To run all Playwright tests:
+
+```bash
+yarn playwright:test
+```
+
+To run a specific test file:
+
+```bash
+yarn playwright:test tests/basic-tests.spec.ts
+```
+
+### Debugging Playwright Tests
+
+To debug tests:
+
+1. Run with the `--debug` flag:
+
+```bash
+yarn playwright:test --debug
+```
+
+2. Use the Playwright Inspector to step through the test.
+
+3. Add `await page.pause()` in your test to pause at a specific point.
+
+### Generating Test Reports
+
+To generate an HTML report:
+
+```bash
+yarn playwright:test --reporter=html
+```
+
+Then open the report:
+
+```bash
+yarn playwright:test show-report
+```
+
+For more information, refer to the [Playwright documentation](https://playwright.dev/docs/intro).

apps/native/app.json

@@ -6,6 +6,7 @@
     "orientation": "default",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",

apps/native/package.json

@@ -19,40 +19,39 @@
     "build:web": "expo export -p web"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~3.2.3",
-    "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-native-community/netinfo": "11.3.1",
+    "@expo/metro-runtime": "~4.0.1",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/netinfo": "11.4.1",
     "@reown/appkit-auth-wagmi-react-native": "1.2.2",
     "@reown/appkit-wagmi-react-native": "1.2.2",
     "@tanstack/query-async-storage-persister": "^5.40.0",
     "@tanstack/react-query": "5.56.2",
     "@tanstack/react-query-persist-client": "5.56.2",
-    "@walletconnect/react-native-compat": "2.17.1",
-    "expo": "~51.0.24",
-    "expo-application": "~5.9.1",
-    "expo-clipboard": "~6.0.3",
-    "expo-status-bar": "~1.12.1",
-    "expo-updates": "~0.25.21",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.3",
+    "@walletconnect/react-native-compat": "2.19.1",
+    "expo": "^52.0.38",
+    "expo-application": "~6.0.2",
+    "expo-clipboard": "~7.0.1",
+    "expo-status-bar": "~2.0.1",
+    "expo-updates": "~0.27.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.7",
     "react-native-get-random-values": "~1.11.0",
-    "react-native-modal": "13.0.1",
-    "react-native-svg": "15.2.0",
+    "react-native-modal": "14.0.0-rc.0",
+    "react-native-svg": "15.8.0",
     "react-native-toast-message": "2.2.1",
-    "react-native-web": "~0.19.10",
-    "react-native-webview": "13.8.6",
-    "uuid": "3.4.0",
-    "viem": "2.21.48",
-    "wagmi": "2.12.33"
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.5",
+    "uuid": "^11.1.0",
+    "viem": "2.23.10",
+    "wagmi": "2.14.13"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@playwright/test": "^1.49.1",
     "@types/gh-pages": "^6",
     "@types/node": "^22.10.1",
     "@types/react": "~18.2.79",
-    "@types/react-native": "0.72.2",
     "babel-plugin-module-resolver": "^5.0.0",
     "gh-pages": "^6.2.0",
     "typescript": "~5.3.3"

babel.config.js

@@ -1,3 +1,8 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset']
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    '@babel/plugin-transform-flow-strip-types',
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }]
+  ]
 };

jest-shared-setup.ts

@@ -0,0 +1,101 @@
+// Mock AsyncStorage
+jest.mock('@react-native-async-storage/async-storage', () =>
+  require('@react-native-async-storage/async-storage/jest/async-storage-mock')
+);
+
+// Mock react-native modules that cause issues with Flow types
+jest.mock('react-native', () => {
+  return {
+    StyleSheet: {
+      create: (styles: Record<string, any>) => styles,
+      hairlineWidth: 1,
+      absoluteFill: {},
+      flatten: jest.fn()
+    },
+    Dimensions: {
+      get: jest.fn().mockReturnValue({ width: 375, height: 812 }),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn()
+    },
+    Platform: {
+      OS: 'ios',
+      select: jest.fn().mockImplementation((obj: { ios?: any; android?: any }) => obj.ios)
+    },
+    NativeModules: {
+      StatusBarManager: { height: 44 }
+    },
+    Text: 'Text',
+    View: 'View',
+    TouchableOpacity: 'TouchableOpacity',
+    TouchableWithoutFeedback: 'TouchableWithoutFeedback',
+    TextInput: 'TextInput',
+    ScrollView: 'ScrollView',
+    Image: 'Image',
+    Animated: {
+      View: 'Animated.View',
+      createAnimatedComponent: (component: string) => `Animated.${component}`,
+      timing: jest.fn().mockReturnValue({ start: jest.fn() }),
+      Value: jest.fn(() => ({
+        interpolate: jest.fn(),
+        setValue: jest.fn()
+      }))
+    },
+    I18nManager: {
+      isRTL: false
+    },
+    useColorScheme: jest.fn().mockReturnValue('light')
+  };
+});
+
+// Mock react-native-svg
+jest.mock('react-native-svg', () => {
+  const mockSvg = () => 'Svg';
+  mockSvg.Circle = () => 'Circle';
+  mockSvg.Rect = () => 'Rect';
+  mockSvg.Path = () => 'Path';
+  mockSvg.G = () => 'G';
+  mockSvg.Defs = () => 'Defs';
+  mockSvg.LinearGradient = () => 'LinearGradient';
+  mockSvg.Stop = () => 'Stop';
+
+  return mockSvg;
+});
+
+// Export a function to mock package-specific modules
+export const mockThemeContext = (modulePath: string) => {
+  jest.mock(
+    modulePath,
+    () => ({
+      ThemeContext: {
+        Provider: ({ children }: { children: React.ReactNode }) => children,
+        Consumer: ({ children }: { children: Function }) => children({ themeMode: 'light' })
+      },
+      useTheme: jest.fn().mockReturnValue({
+        themeMode: 'light',
+        colors: {
+          text: '#000000',
+          background: '#FFFFFF',
+          primary: '#3396FF'
+        }
+      })
+    }),
+    { virtual: true }
+  );
+};
+
+export const mockUseTheme = (modulePath: string) => {
+  jest.mock(
+    modulePath,
+    () => ({
+      useTheme: jest.fn().mockReturnValue({
+        themeMode: 'light',
+        colors: {
+          text: '#000000',
+          background: '#FFFFFF',
+          primary: '#3396FF'
+        }
+      })
+    }),
+    { virtual: true }
+  );
+};