Merge branch 'develop' into feat/swaps

Author: ignaciosantise

.github/workflows/e2e.yml

@@ -1,38 +1,86 @@
-name: e2e
+name: E2E Tests
+
 on:
   workflow_dispatch:
-  pull_request:
-    branches:
-      - main
+  workflow_call:
+    inputs:
+      branch:
+        description: 'The branch to use'
+        default: 'main'
+        required: false
+        type: string
+      base-url:
+        description: 'The AppKit App url'
+        default: 'http://localhost:8081/'
+        required: false
+        type: string
+      wallet-url:
+        description: 'The wallet url'
+        default: 'https://react-wallet.walletconnect.com/'
+        required: false
+        type: string
+      skip_setup:
+        description: 'Skip setup steps if already done'
+        type: boolean
+        default: false
+    secrets:
+      CLOUD_PROJECT_ID:
+        required: true
 
 jobs:
-  maestro-cloud:
+  e2e_tests:
+    name: 'Playwright Tests'
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: apps/native-cli
-    outputs:
-      app: app/build/outputs/apk/release
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Install Java 11
-        uses: actions/setup-java@v3
+      - name: checkout
+        if: ${{ !inputs.skip_setup }}
+        uses: actions/checkout@v4
         with:
-          java-version: 11
-          distribution: 'temurin'
-          cache: gradle
-
-      - run: touch .env && echo "PROJECT_ID=${{ secrets.CLOUD_PROJECT_ID }}" >> .env
+          repository: reown-com/appkit-react-native
+          ref: ${{ inputs.branch }}
 
       - name: Setup
+        if: ${{ !inputs.skip_setup }}
         uses: ./.github/actions/setup
 
-      - run: yarn android:build
+      - name: Build SDK
+        if: ${{ !inputs.skip_setup }}
+        run: |
+          echo "Building SDK..."
+          yarn build
+
+      - name: Create ENV file in apps/native
+        working-directory: ./apps/native/
+        run: echo "EXPO_PUBLIC_PROJECT_ID=${{ secrets.CLOUD_PROJECT_ID }}" >> .env
+
+      - name: Install Playwright Browsers
+        working-directory: ./apps/native/
+        run: yarn playwright install chromium
+
+      ## Uncomment to build the web and add ./apps/native/dist to upload the artifact
+      # - name: Build web app
+      #   working-directory: ./apps/native/
+      #   run: |
+      #     echo "Building web app..."
+      #     yarn build:web
+
+      - name: Run Playwright tests
+        working-directory: ./apps/native/
+        env:
+          BASE_URL: ${{ inputs.base-url }}
+          WALLET_URL: ${{ inputs.wallet-url }}
+
+        ## Uncomment to see better logs in the terminal
+        # DEBUG: pw:api
+        run: |
+          echo "Running tests against $BASE_URL"
+          yarn playwright:test
 
-      - uses: mobile-dev-inc/action-maestro-cloud@v1
+      - uses: actions/upload-artifact@v4
+        if: failure()
         with:
-          api-key: ${{ secrets.MAESTRO_CLOUD_API_KEY }}
-          app-file: apps/native-cli/android/app/build/outputs/apk/release/app-release.apk
-          android-api-level: 31
+          name: playwright-report
+          path: |
+            ./apps/native/playwright-report/
+            ./apps/native/test-results/
+          retention-days: 7

.github/workflows/verify.yml

@@ -22,5 +22,5 @@ jobs:
       - name: Build
         run: yarn build
 
-      - name: Test
+      - name: Package Tests
         run: yarn test

.maestro/w3m-connect-flow.yaml

@@ -9,7 +9,7 @@ appId: com.walletconnect.web3modal.rnclisdk
 - tapOn: 'Connect'
 
 - tapOn:
-    id: 'button-all-wallets'
+    id: 'all-wallets'
 
 - tapOn:
     id: 'button-qr-code'
@@ -18,7 +18,7 @@ appId: com.walletconnect.web3modal.rnclisdk
     id: 'qr-code'
 
 - tapOn:
-    id: 'button-copy-uri'
+    id: 'copy-link'
 
 - openLink:
     link: https://react-wallet.walletconnect.com/walletconnect
@@ -54,10 +54,10 @@ appId: com.walletconnect.web3modal.rnclisdk
 - back
 
 - tapOn:
-    id: 'button-account'
+    id: 'account-button'
 
 - tapOn:
-    id: 'button-network'
+    id: 'w3m-account-select-network'
 
 - tapOn:
     text: 'Polygon'
@@ -68,7 +68,7 @@ appId: com.walletconnect.web3modal.rnclisdk
     text: 'Polygon'
 
 - tapOn:
-    id: 'button-disconnect'
+    id: 'disconnect-button'
 
 - assertVisible:
-    id: 'button-connect'
+    id: 'connect-button'

.maestro/w3m-ui-flow.yaml

@@ -19,7 +19,7 @@ appId: com.walletconnect.web3modal.rnclisdk
     id: 'button-back'
 
 - tapOn:
-    id: 'button-all-wallets'
+    id: 'all-wallets'
 
 - tapOn:
     id: 'button-qr-code'
@@ -31,7 +31,7 @@ appId: com.walletconnect.web3modal.rnclisdk
     id: 'button-back'
 
 - tapOn:
-    id: 'input-search'
+    id: 'search-wallet-input'
 
 # Get a wallet that doesn't come in the first page
 - inputText: 'Abra Wallet'
@@ -57,7 +57,7 @@ appId: com.walletconnect.web3modal.rnclisdk
     text: 'Open'
 
 - tapOn:
-    id: 'button-close'
+    id: 'header-close'
 
 - assertNotVisible:
     text: 'Abra Wallet'

apps/native/.gitignore

@@ -14,3 +14,7 @@ web-build/
 .DS_Store
 
 .env
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

apps/native/App.tsx

@@ -1,9 +1,10 @@
-import { StyleSheet, View, useColorScheme } from 'react-native';
+import { Platform, SafeAreaView, StyleSheet, useColorScheme } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import * as Clipboard from 'expo-clipboard';
 import '@walletconnect/react-native-compat';
 import { WagmiProvider } from 'wagmi';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Toast from 'react-native-toast-message';
 
 import {
   AppKit,
@@ -22,6 +23,8 @@ import { AccountView } from './src/views/AccountView';
 import { ActionsView } from './src/views/ActionsView';
 import { getCustomWallets } from './src/utils/misc';
 import { chains } from './src/utils/WagmiUtils';
+import { OpenButton } from './src/components/OpenButton';
+import { DisconnectButton } from './src/components/DisconnectButton';
 
 const projectId = process.env.EXPO_PUBLIC_PROJECT_ID ?? '';
 
@@ -45,11 +48,17 @@ const clipboardClient = {
 
 const auth = authConnector({ projectId, metadata });
 
+const extraConnectors = Platform.select({
+  ios: [auth],
+  android: [auth],
+  default: []
+});
+
 const wagmiConfig = defaultWagmiConfig({
   chains,
   projectId,
   metadata,
-  extraConnectors: [auth]
+  extraConnectors
 });
 
 const queryClient = new QueryClient();
@@ -78,7 +87,7 @@ export default function Native() {
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <View style={[styles.container, isDarkMode && styles.dark]}>
+        <SafeAreaView style={[styles.container, isDarkMode && styles.dark]}>
           <StatusBar style="auto" />
           <Text variant="medium-title-600" style={styles.title}>
             AppKit for React Native
@@ -91,10 +100,13 @@ export default function Native() {
             balance="show"
           />
           <NetworkButton />
-          <AccountView />
           <ActionsView />
+          <AccountView />
+          <OpenButton />
+          <DisconnectButton />
           <AppKit />
-        </View>
+        </SafeAreaView>
+        <Toast />
       </QueryClientProvider>
     </WagmiProvider>
   );

apps/native/app.json

@@ -74,7 +74,12 @@
       }
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/favicon.png",
+      "output": "single",
+      "bundler": "metro"
+    },
+    "experiments": {
+      "baseUrl": "."
     },
     "extra": {
       "eas": {

apps/native/package.json

@@ -12,7 +12,11 @@
     "dev:android": "expo start --android",
     "eas:build": "eas build --platform all",
     "eas:build:local": "eas build --local --platform all",
-    "eas:update": "eas update --branch preview"
+    "eas:update": "eas update --branch preview",
+    "playwright:test": "playwright test",
+    "playwright:install": "playwright install chromium",
+    "deploy": "gh-pages --nojekyll -d dist",
+    "build:web": "expo export -p web"
   },
   "dependencies": {
     "@expo/metro-runtime": "~3.2.3",
@@ -35,6 +39,7 @@
     "react-native-get-random-values": "~1.11.0",
     "react-native-modal": "13.0.1",
     "react-native-svg": "15.2.0",
+    "react-native-toast-message": "2.2.1",
     "react-native-web": "~0.19.10",
     "react-native-webview": "13.8.6",
     "uuid": "3.4.0",
@@ -43,9 +48,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"
   }
 }

apps/native/playwright.config.ts

@@ -0,0 +1,68 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [['html'], ['list']],
+
+  use: {
+    baseURL: process.env.BASE_URL || 'http://localhost:8081',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Take a screenshot when the test fails */
+    screenshot: 'only-on-failure',
+
+    permissions: ['clipboard-read', 'clipboard-write'],
+    navigationTimeout: 30000,
+    actionTimeout: 30000,
+    video: 'retain-on-failure'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'], channel: 'chromium' }
+    }
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'yarn web',
+    url: 'http://localhost:8081',
+    reuseExistingServer: !process.env.CI,
+    timeout: 30000
+
+    /* Uncomment to see better logs in the terminal */
+    // stdout: 'pipe',
+    // stderr: 'pipe'
+  },
+
+  globalTimeout: 600000,
+  expect: {
+    timeout: 10000
+  }
+});

apps/native/src/components/DisconnectButton.tsx

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { Button } from '@reown/appkit-ui-react-native';
+import { useAccount, useDisconnect } from 'wagmi';
+
+export function DisconnectButton() {
+  const { isConnected } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  return isConnected ? (
+    <Button testID="disconnect-hook-button" style={styles.button} onPress={() => disconnect()}>
+      Disconnect hook
+    </Button>
+  ) : null;
+}
+
+const styles = StyleSheet.create({
+  button: {
+    height: 40,
+    marginVertical: 8
+  }
+});