UI improvements

.github/workflows/publish-api.yaml

@@ -4,7 +4,9 @@ name: Create and publish docker images for the API
 # Configures this workflow to run every time a change is pushed to the branch called `release`.
 on:
   push:
-    branches: ['main']
+    branches:
+      - main
+      - dev
     tags:
       - v*
     paths:
@@ -73,4 +75,28 @@ jobs:
           context: api
           push: true
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+  eks-deployment-restart:
+    runs-on: ubuntu-latest
+    needs:  build-and-push-image
+    permissions:
+      id-token: write   # Required for the OIDC, see https://github.com/aws-actions/configure-aws-credentials?tab=readme-ov-file#OIDC
+      contents: read
+    steps:
+      - name: configure aws credentials
+        uses: aws-actions/[email protected]
+        with:
+          audience: sts.amazonaws.com
+          role-to-assume: ${{ secrets.DEV_AWS_EKS_ROLE }}
+          role-session-name: GitHub_to_AWS_via_FederatedOIDC
+          aws-region: ${{ secrets.DEV_AWS_REGION }}
+
+      - name: Configure kubectl for EKS
+        run: aws eks update-kubeconfig --name ${{ secrets.DEV_AWS_EKS_CLUSTER }} --region ${{ secrets.DEV_AWS_REGION }}
+
+      - name: Restart Bridge Explorer Deployment
+        if: github.ref == 'refs/heads/dev'
+        run: |
+          kubectl config use-context arn:aws:eks:${{ secrets.DEV_AWS_REGION }}:${{ secrets.DEV_AWS_ACCOUNT_ID }}:cluster/${{ secrets.DEV_AWS_EKS_CLUSTER }}
+          kubectl rollout restart deploy/${{ secrets.DEV_AWS_EKS_DEPLOYMENT_API }} -n ${{ secrets.DEV_AWS_EKS_NAMESPACE }}

.github/workflows/publish-ui.yaml

@@ -4,7 +4,9 @@ name: Create and publish docker images for the UI
 # Configures this workflow to run every time a change is pushed to the branch called `release`.
 on:
   push:
-    branches: ['main']
+    branches:
+      - main
+      - dev
     tags:
       - v*
     paths:
@@ -44,14 +46,50 @@ jobs:
       # This step uses the `docker/build-push-action` action to build the image, based on your repository's `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages.
       # It uses the `context` parameter to define the build's context as the set of files located in the specified path. For more information, see "[Usage](https://github.com/docker/build-push-action#usage)" in the README of the `docker/build-push-action` repository.
       # It uses the `tags` and `labels` parameters to tag and label the image with the output from the "meta" step.
-      - name: Build and push Docker image
+      - name: Dev branch - Build and push Docker image
+        if: github.ref == 'refs/heads/dev'
         uses: docker/build-push-action@4a13e500e55cf31b7a5d59a38ab2040ab0f42f56
         with:
           context: app
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           build-args: |
-            "REACT_APP_HCAPTCHA_SITE_KEY=${{ secrets.REACT_APP_HCAPTCHA_SITE_KEY }}"
-            "REACT_APP_FAUCET_API_URL=${{ secrets.REACT_APP_FAUCET_API_URL}}"
-
+            "REACT_APP_HCAPTCHA_SITE_KEY=${{ secrets.DEV_REACT_APP_HCAPTCHA_SITE_KEY }}"
+            "REACT_APP_FAUCET_API_URL=${{ secrets.DEV_REACT_APP_FAUCET_API_URL}}"
+
+      - name: Main branch / tags - Build and push Docker image
+        if: ( github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') )
+        uses: docker/build-push-action@4a13e500e55cf31b7a5d59a38ab2040ab0f42f56
+        with:
+          context: app
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            "REACT_APP_HCAPTCHA_SITE_KEY=${{ secrets.PROD_REACT_APP_HCAPTCHA_SITE_KEY }}"
+            "REACT_APP_FAUCET_API_URL=${{ secrets.PROD_REACT_APP_FAUCET_API_URL}}"
+
+  eks-deployment-restart:
+    runs-on: ubuntu-latest
+    needs:  build-and-push-image
+    permissions:
+      id-token: write   # Required for the OIDC, see https://github.com/aws-actions/configure-aws-credentials?tab=readme-ov-file#OIDC
+      contents: read
+    steps:
+      - name: configure aws credentials
+        uses: aws-actions/[email protected]
+        with:
+          audience: sts.amazonaws.com
+          role-to-assume: ${{ secrets.DEV_AWS_EKS_ROLE }}
+          role-session-name: GitHub_to_AWS_via_FederatedOIDC
+          aws-region: ${{ secrets.DEV_AWS_REGION }}
+
+      - name: Configure kubectl for EKS
+        run: aws eks update-kubeconfig --name ${{ secrets.DEV_AWS_EKS_CLUSTER }} --region ${{ secrets.DEV_AWS_REGION }}
+
+      - name: Restart Bridge Explorer Deployment
+        if: github.ref == 'refs/heads/dev'
+        run: |
+          kubectl config use-context arn:aws:eks:${{ secrets.DEV_AWS_REGION }}:${{ secrets.DEV_AWS_ACCOUNT_ID }}:cluster/${{ secrets.DEV_AWS_EKS_CLUSTER }}
+          kubectl rollout restart deploy/${{ secrets.DEV_AWS_EKS_DEPLOYMENT_UI }} -n ${{ secrets.DEV_AWS_EKS_NAMESPACE }}

app/.env.example

@@ -0,0 +1,2 @@
+REACT_APP_HCAPTCHA_SITE_KEY=
+REACT_APP_FAUCET_API_URL=http://localhost:8000/api/v1

app/.eslintrc.js

@@ -4,7 +4,9 @@ module.exports = {
     es2021: true,
     node: true,
   },
-  extends: ["eslint:recommended", "plugin:react/recommended"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react", "@typescript-eslint"],
+  extends: ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
   overrides: [
     {
       env: {
@@ -20,7 +22,6 @@ module.exports = {
     ecmaVersion: "latest",
     sourceType: "module",
   },
-  plugins: ["react"],
   rules: {
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",

app/package.json

@@ -3,18 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "@hcaptcha/react-hcaptcha": "^1.9.1",
-    "@mui/material": "^5.14.18",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.21",
+    "@types/react": "^18.2.60",
+    "@types/react-dom": "^18.2.19",
     "axios": "^1.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
+    "typescript": "^5.3.3",
     "web-vitals": "^2.1.0"
   },
   "scripts": {
@@ -44,6 +47,9 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "eslint": "^8.54.0",
     "eslint-plugin-react": "^7.33.2",
     "prettier": "3.1.0"

app/public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Faucet for Gnosis chain"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Gnosis Faucet</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

app/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Gnosis Faucet",
+  "name": "Faucet for Gnosis chain",
   "icons": [
     {
       "src": "favicon.ico",

app/src/App.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react"
+import { ToastContainer, toast } from "react-toastify"
+import "react-toastify/dist/ReactToastify.css"
+import axios from "axios"
+import logo from "./images/logo.svg"
+import "./css/App.css"
+import Loading from "./components/Loading/Loading"
+import Faucet from "./components/FaucetForm/Faucet"
+
+const chainName:{ [key: string]: string }= {
+  "100": "Gnosis",
+  "10200": "Chiado"
+}
+
+function App(): JSX.Element {
+  const [chainId, setChainId] = useState("10200")
+  const [loading, setLoading] = useState(true)
+  const [enabledTokens, setEnabledTokens] = useState([])
+  const [faucetLoading, setFaucetLoading] = useState(true)
+
+  const getFaucetInfo = async () => {
+    return axios.get(`${process.env.REACT_APP_FAUCET_API_URL}/info`)
+  }
+
+  useEffect(() => {
+    getFaucetInfo()
+      .then((response) => {
+        setChainId(response.data.chainId)
+        setEnabledTokens(response.data.enabledTokens)
+
+        const chain = chainName[response.data.chainId]
+        document.title = `${chain} Faucet`
+        document.querySelector('meta[name="description"]')?.setAttribute("content", `Faucet for ${chain} chain`)
+      })
+      .catch(() => {
+        toast.error("Network error")
+      })
+      .finally(() => {
+        setFaucetLoading(false)
+        setLoading(false)
+      })
+  }, [])
+
+  const title = faucetLoading ? "FAUCET" : `${chainName[chainId]} CHAIN`
+  const subtitle = faucetLoading
+    ? "Loading..."
+    : (chainId === "100" ? "Faucet" : "Testnet Faucet")
+
+  return (
+    <>
+      <ToastContainer
+        position="bottom-right"
+        hideProgressBar={true}
+        newestOnTop={false}
+        closeOnClick={true}
+        // pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
+      <div className="app-container">
+        <img src={logo} className="app-logo" alt="logo" />
+        <div className="title">
+          <h1>{title}</h1>
+          <h2>{subtitle}</h2>
+        </div>
+        <Faucet
+          chainId={chainId}
+          enabledTokens={enabledTokens}
+          setLoading={setLoading}
+        />
+      </div>
+      {loading && <Loading/>}
+    </>
+  )
+}
+
+export default App

app/src/components/Captcha/Captcha.tsx

@@ -0,0 +1,28 @@
+import React, { RefObject } from "react"
+import HCaptcha from "@hcaptcha/react-hcaptcha"
+
+const siteKey = process.env.REACT_APP_HCAPTCHA_SITE_KEY || "10000000-ffff-ffff-ffff-000000000001"
+
+interface CaptchaProps {
+  setCaptchaToken: (token: string) => void,
+  windowWidth: number,
+  captchaRef: RefObject<HCaptcha>
+}
+
+const Captcha: React.FC<CaptchaProps> = ({ setCaptchaToken, windowWidth, captchaRef }) => {
+
+  const onVerifyCaptcha = (token: string) => {
+    setCaptchaToken(token)
+  }
+
+  return (
+    <HCaptcha
+      size={windowWidth > 500 ? "normal" : "compact"}
+      sitekey={siteKey}
+      onVerify={onVerifyCaptcha}
+      ref={captchaRef}
+    />
+  )
+}
+
+export default Captcha