Merge pull request #48 from gnosischain/dev

v1.0.4: adding e2e tests to GBC Deposit UI

.github/workflows/dev_deploy.yml

@@ -7,6 +7,10 @@ on:
       - main
       - dev
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 env:
   NEXT_PUBLIC_WC_PROJECT_ID: ${{ secrets.DEV_WC_PROJECT_ID }}
 
@@ -16,11 +20,6 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Cancel Previous Runs
-        uses: styfle/[email protected]
-        with:
-          access_token: ${{ github.token }}
-
       - uses: actions/checkout@v4
 
       - uses: actions/cache@v2
@@ -42,6 +41,17 @@ jobs:
       - name: Build App
         run: yarn update-deposits && yarn build
 
+      - name: Install Playwright Browsers
+        run: yarn playwright install
+
+      - name: Setup xvfb
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y xvfb
+
+      - name: Run tests
+        run: xvfb-run --auto-servernum --server-args='-screen 0, 1920x1080x24' yarn run-e2e-tests
+
       - name: Configure AWS Development credentials
         uses: aws-actions/configure-aws-credentials@v1
         if: ( github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main' )

.github/workflows/prod_deploy.yml

@@ -8,6 +8,10 @@ on:
           required: true
           type: string
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 env:
     NEXT_PUBLIC_WC_PROJECT_ID: ${{ secrets.PROD_WC_PROJECT_ID }}
 
@@ -17,11 +21,6 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - name: Cancel Previous Runs
-              uses: styfle/[email protected]
-              with:
-                access_token: ${{ github.token }}
-
             - name: Remove broken apt repos [Ubuntu]
               if: ${{ matrix.os }} == 'ubuntu-latest'
               run: |
@@ -54,6 +53,17 @@ jobs:
             - name: Build App for release
               run: yarn update-deposits && yarn build
 
+            - name: Install Playwright Browsers
+              run: yarn playwright install
+
+            - name: Setup xvfb
+              run: |
+                sudo apt-get update
+                sudo apt-get install -y xvfb
+
+            - name: Run tests
+              run: xvfb-run --auto-servernum --server-args='-screen 0, 1920x1080x24' yarn run-e2e-tests
+
             - name: Configure AWS Production credentials
               uses: aws-actions/configure-aws-credentials@v1
               with:

.github/workflows/tag_release.yml

@@ -5,6 +5,10 @@ on:
     tags:
       - 'v[0-9]+.[0-9]+.[0-9]+'
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 # Permission can be added at job level or workflow level    
 permissions:
   contents: write # This is required for actions/checkout and create release
@@ -15,11 +19,6 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Cancel Previous Runs
-        uses: styfle/[email protected]
-        with:
-          access_token: ${{ github.token }}
-
       - name: Create Github Release
         uses: actions/github-script@v6
         with:

.gitignore

@@ -36,6 +36,10 @@ yarn-error.log*
 next-env.d.ts
 
 .env
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
 
 hardhat/cache/**
-hardhat/node_modules/**
+hardhat/node_modules/**

app/connect/page.tsx

@@ -6,6 +6,7 @@ import { XMarkIcon } from "@heroicons/react/20/solid";
 import Image from "next/image";
 import { Connector, useAccount, useConnect } from "wagmi";
 import Link from "next/link";
+import { gnosis, hardhat } from "viem/chains";
 
 export default function Page() {
   const account = useAccount();
@@ -38,7 +39,7 @@ export default function Page() {
         <div className="w-full flex flex-col divide-slate-700 divide-y mt-8 overflow-y-auto">
           {uniqueConnectors.map((connector, index) => {
             return (
-              <div className="flex w-full justify-between items-center text-black hover:bg-[#E8E1CF] py-4 p-2 first:rounded-t-lg last:rounded-b-lg" key={connector.uid} onClick={() => connect({ connector })}>
+              <div className="flex w-full justify-between items-center text-black hover:bg-[#E8E1CF] py-4 p-2 first:rounded-t-lg last:rounded-b-lg" key={connector.uid} id={connector.name === "MetaMask" ? "metamask" : ""} onClick={() => connect({ connector: connector, chainId: process.env.NEXT_PUBLIC_TEST_ENV === "test" ? hardhat.id : gnosis.id })}>
                 {connector.name} <Image src={"./" + connector.id + ".png"} alt={connector.id} width={48} height={24} />
               </div>
             );

app/connected/page.tsx

@@ -11,9 +11,10 @@ export default function Page() {
   return (
     <Suspense fallback={<div>Loading...</div>}>
       <main className="flex h-full lg:h-screen flex-col items-center justify-center">
-        <div className="w-full lg:w-[775px] bg-[#133629CC] h-full lg:h-auto backdrop-blur-sm p-4 lg:rounded-2xl flex gap-y-6 flex-col justify-start items-center">
+        <div className="w-full lg:w-[775px] bg-[#133629CC] h-screen md:h-full lg:h-auto backdrop-blur-sm p-4 lg:rounded-2xl flex gap-y-6 flex-col justify-start items-center">
           <div className="w-full gap-x-4 flex justify-between">
             <NavigationTab value="deposit" />
+            <NavigationTab value="dappnode" />
             <NavigationTab value="withdrawal" />
             <NavigationTab value="validator" />
           </div>
@@ -22,11 +23,22 @@ export default function Page() {
             <div className="w-1/4 hidden lg:flex">
               <Image src="/logo.svg" alt="Gnosis Logo" width={45} height={24} />
               <div className="flex flex-col ml-2">
-                <Image src="/gnosis.svg" alt="Gnosis Text" width={100} height={24} />
-                <p className="text-[6px] lg:text-[8px] mt-2">BEACON CHAIN DEPOSIT</p>
+                <Image
+                  src="/gnosis.svg"
+                  alt="Gnosis Text"
+                  width={100}
+                  height={24}
+                />
+                <p className="text-[6px] lg:text-[8px] mt-2">
+                  BEACON CHAIN DEPOSIT
+                </p>
               </div>
             </div>
-            <Link target="_blank" className="w-2/4 flex justify-center text-sm lg:text-base items-center underline hover:text-slate-200" href={"https://docs.gnosischain.com/node/"}>
+            <Link
+              target="_blank"
+              className="w-2/4 flex justify-center text-sm lg:text-base items-center underline hover:text-slate-200"
+              href={"https://docs.gnosischain.com/node/"}
+            >
               Learn more about the Gnosis Beacon Chain
             </Link>
             <div className="w-2/4 lg:w-1/4 flex justify-center items-center">
@@ -36,8 +48,15 @@ export default function Page() {
           <div className="w-full flex lg:hidden justify-center">
             <Image src="/logo.svg" alt="Gnosis Logo" width={45} height={24} />
             <div className="flex flex-col ml-2">
-              <Image src="/gnosis.svg" alt="Gnosis Text" width={100} height={24} />
-              <p className="text-[6px] lg:text-[8px] mt-2">BEACON CHAIN DEPOSIT</p>
+              <Image
+                src="/gnosis.svg"
+                alt="Gnosis Text"
+                width={100}
+                height={24}
+              />
+              <p className="text-[6px] lg:text-[8px] mt-2">
+                BEACON CHAIN DEPOSIT
+              </p>
             </div>
           </div>
         </div>

app/page.tsx

@@ -11,7 +11,7 @@ export default function Page() {
         </div>
         <p className="text-xl">BEACON CHAIN DEPOSIT</p>
         <p className="text-xl my-8">Connect your wallet to get started:</p>
-        <Link href="/connect" className="bg-[#DD7143] px-8 py-4 rounded-full text-xl font-semibold">
+        <Link href="/connect" className="bg-[#DD7143] px-8 py-4 rounded-full text-xl font-semibold outline outline-2 outline-transparent hover:outline-white/80 transition-all duration-300 ease-in-out">
           Connect Wallet
         </Link>
         <Link target="_blank" className="w-full flex justify-center mt-20 text-sm lg:text-base items-center underline hover:text-slate-200" href={"https://docs.gnosischain.com/node/"}>