feat(e2e-connector-test): replicate the react app in next FE-780 (#407)

.changeset/config.json

@@ -14,7 +14,7 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["react-app", "react-next"],
+  "ignore": ["react-app", "react-next", "@e2e-tests/react-next"],
   "snapshot": {
     "useCalculatedVersion": true,
     "prereleaseTemplate": "{tag}-{commit}"

.github/workflows/pr-release.yaml

@@ -27,6 +27,9 @@ jobs:
 
       - name: Build
         run: pnpm build
+          NEXT_PUBLIC_PROVIDER_URL: "http://localhost:4000/v1/graphql"
+          NEXT_PUBLIC_WC_PROJECT_ID: e01471314fc69cc4efba6dce12dfd710
+          NEXT_PUBLIC_CHAIN_ID_NAME: testnet
 
       - name: Release to @pr-${{ github.event.pull_request.number }} tag on npm
         id: release

.github/workflows/pr-tests.yml

@@ -78,6 +78,7 @@ jobs:
           json-final-path: ./coverage/coverage-final.json
 
   tests-e2e-connectors:
+    name: E2E
     runs-on: buildjet-8vcpu-ubuntu-2204
     steps:
       - name: Check out the code
@@ -107,23 +108,18 @@ jobs:
       # E2E tests running with Playwright
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps chromium
-        working-directory: e2e-tests
-
-      - name: Run Playwright tests on Testnet
-        if: ${{ github.ref == 'refs/heads/main' }}
-        run: xvfb-run --auto-servernum -- pnpm --filter e2e-tests test:e2e
-        env:
-          VITE_FUEL_PROVIDER_URL: "https://testnet.fuel.network/v1/graphql"
-          VITE_MASTER_WALLET_MNEMONIC: ${{ secrets.VITE_MASTER_WALLET_MNEMONIC }}
-          VITE_APP_WC_PROJECT_ID: e01471314fc69cc4efba6dce12dfd710
-          VITE_CHAIN_ID_NAME: testnet
-          PORT: 5173
+        working-directory: e2e-tests/runner
 
       - name: Run Playwright tests locally for Preview
         if: ${{ github.event_name == 'pull_request' }}
         run: xvfb-run --auto-servernum -- pnpm --filter e2e-tests test:e2e
         env:
           VITE_FUEL_PROVIDER_URL: "http://localhost:4000/v1/graphql"
+          NEXT_PUBLIC_PROVIDER_URL: "http://localhost:4000/v1/graphql"
+          NEXT_PUBLIC_WC_PROJECT_ID: e01471314fc69cc4efba6dce12dfd710
+          NEXT_PUBLIC_CHAIN_ID_NAME: testnet
+          REACT_APP_PORT: 5173
+          REACT_NEXT_PORT: 3002
           VITE_WALLET_SECRET: "0xa449b1ffee0e2205fa924c6740cc48b3b473aa28587df6dab12abc245d1f5298"
           VITE_MASTER_WALLET_MNEMONIC: ${{ secrets.VITE_MASTER_WALLET_MNEMONIC }}
           VITE_APP_WC_PROJECT_ID: e01471314fc69cc4efba6dce12dfd710

e2e-tests/react-next/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_WC_PROJECT_ID=
+NEXT_PUBLIC_PROVIDER_URL=https://testnet.fuel.network/v1/graphql

e2e-tests/react-next/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

e2e-tests/react-next/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

e2e-tests/react-next/next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@fuels/connectors', '@fuels/react'],
+  webpack: (config) => {
+    // https://github.com/WalletConnect/walletconnect-monorepo/issues/1908
+    // https://docs.walletconnect.com/web3modal/nextjs/about#extra-configuration
+    config.externals.push('pino-pretty', 'lokijs', 'encoding');
+
+    return config;
+  },
+};
+
+module.exports = nextConfig;

e2e-tests/react-next/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@e2e-tests/react-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3002",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "react-app": "workspace:*",
+    "@fuels/connectors": "workspace:*",
+    "@fuels/react": "workspace:*",
+    "@radix-ui/react-toast": "1.1.5",
+    "@tanstack/react-query": "5.35.1",
+    "@wagmi/connectors": "5.1.7",
+    "@wagmi/core": "2.13.4",
+    "fuels": "0.96.1",
+    "clsx": "2.1.1",
+    "connectkit": "1.8.2",
+    "next": "14.2.3",
+    "wagmi": "2.12.7"
+  },
+  "devDependencies": {
+    "@tanstack/react-query-devtools": "5.35.1",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
+    "@vitejs/plugin-react": "4.2.1",
+    "autoprefixer": "10.4.19",
+    "postcss": "8.4.38",
+    "tailwindcss": "3.4.3",
+    "typescript": "5.4.5",
+    "vite": "5.2.11"
+  }
+}

e2e-tests/react-next/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

e2e-tests/react-next/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

e2e-tests/react-next/src/app/layout.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import '../index.css';
+import * as Toast from '@radix-ui/react-toast';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import type React from 'react';
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const queryClient = new QueryClient();
+  const isDev = process.env.NODE_ENV === 'development';
+
+  return (
+    <html lang="en">
+      <body>
+        <QueryClientProvider client={queryClient}>
+          <Toast.Provider>
+            {children}
+            <Toast.Viewport
+              id="toast-viewport"
+              className="fixed bottom-0 right-0 z-[100] m-0 flex w-[420px] max-w-[100vw] list-none flex-col gap-[10px] p-[var(--viewport-padding)] outline-none [--viewport-padding:_25px]"
+            />
+            <Toast.Root />
+          </Toast.Provider>
+          {isDev && <ReactQueryDevtools initialIsOpen={false} />}
+        </QueryClientProvider>
+      </body>
+    </html>
+  );
+}

e2e-tests/react-next/src/app/page.tsx

@@ -0,0 +1,110 @@
+'use client';
+import { defaultConnectors } from '@fuels/connectors';
+import { FuelProvider } from '@fuels/react';
+import { coinbaseWallet, walletConnect } from '@wagmi/connectors';
+import { http, createConfig, injected } from '@wagmi/core';
+import { mainnet, sepolia } from '@wagmi/core/chains';
+import { CHAIN_IDS, Provider, bn } from 'fuels';
+import App from 'react-app/src/App';
+import { ConfigProvider } from 'react-app/src/context/ConfigContext';
+import COUNTER_CONTRACT_ID_LOCAL from 'react-app/src/types/contract-ids-local.json';
+import COUNTER_CONTRACT_ID_MAINNET from 'react-app/src/types/contract-ids-mainnet.json';
+import COUNTER_CONTRACT_ID_TESTNET from 'react-app/src/types/contract-ids-testnet.json';
+
+const CHAIN_ID_NAME = process.env
+  .NEXT_PUBLIC_CHAIN_ID_NAME as keyof typeof CHAIN_IDS.fuel;
+const CHAIN_ID = CHAIN_IDS.fuel[CHAIN_ID_NAME];
+const PROVIDER_URL = process.env.NEXT_PUBLIC_PROVIDER_URL || '';
+
+function getContractId() {
+  switch (CHAIN_ID_NAME) {
+    case 'mainnet':
+      return COUNTER_CONTRACT_ID_MAINNET.counter;
+    case 'testnet':
+      return COUNTER_CONTRACT_ID_TESTNET.counter;
+    default:
+      return COUNTER_CONTRACT_ID_LOCAL.counter;
+  }
+}
+
+const EXPLORER_LOCAL_URL = 'http://localhost:3001';
+const EXPLORER_URL_MAP: Record<keyof typeof CHAIN_IDS.fuel, string> = {
+  testnet: 'https://app-testnet.fuel.network',
+  devnet: 'https://app-testnet.fuel.network',
+  mainnet: 'https://app-mainnet.fuel.network',
+};
+
+const NETWORKS = [
+  {
+    chainId: CHAIN_ID,
+    url: PROVIDER_URL,
+  },
+];
+
+const WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID || '';
+
+const METADATA = {
+  name: 'Wallet Demo',
+  description: 'Fuel Wallets Demo',
+  url: 'https://connectors.fuel.network',
+  icons: ['https://connectors.fuel.network/logo_white.png'],
+};
+
+const wagmiConfig = createConfig({
+  chains: [mainnet, sepolia],
+  transports: {
+    [mainnet.id]: http(),
+    [sepolia.id]: http(),
+  },
+  syncConnectedChain: true,
+  connectors: [
+    injected({ shimDisconnect: false }),
+    walletConnect({
+      projectId: WC_PROJECT_ID,
+      metadata: METADATA,
+      showQrModal: false,
+    }),
+    coinbaseWallet({
+      appName: METADATA.name,
+      appLogoUrl: METADATA.icons[0],
+      darkMode: true,
+      reloadOnDisconnect: true,
+    }),
+  ],
+});
+
+if (!PROVIDER_URL) {
+  throw new Error(`PROVIDER_URL is not set: ${PROVIDER_URL}`);
+}
+
+const FUEL_CONFIG = {
+  connectors: defaultConnectors({
+    devMode: true,
+    wcProjectId: WC_PROJECT_ID,
+    ethWagmiConfig: wagmiConfig,
+    chainId: CHAIN_ID,
+    fuelProvider: Provider.create(PROVIDER_URL),
+  }),
+};
+
+const config = {
+  explorerUrl:
+    EXPLORER_URL_MAP[CHAIN_ID_NAME as keyof typeof EXPLORER_URL_MAP] ||
+    EXPLORER_LOCAL_URL,
+  providerUrl: PROVIDER_URL,
+  counterContractId: getContractId(),
+  chainIdName: CHAIN_ID_NAME,
+  defaultAmount: bn.parseUnits(
+    CHAIN_ID_NAME === 'mainnet' ? '0.000000001' : '0.0001',
+  ),
+};
+
+export default function Page() {
+  return (
+    <FuelProvider theme="dark" networks={NETWORKS} fuelConfig={FUEL_CONFIG}>
+      <ConfigProvider config={config}>
+        <App />
+      </ConfigProvider>
+    </FuelProvider>
+  );
+}