digit-recognition frontend

.github/workflows/CI-CD-Distributed-Computation-fe.yml

@@ -1,66 +1,121 @@
-name: Deploy Frontend Distributed Computation
+name: Build and Deploy mandelbrot-set/frontend
 
 on:
-  push:
-    branches: ['master']
-    paths: frontend
   workflow_dispatch:
+  push:
+    branches: ["*"]
+    paths:
+      - "mandelbrot-set/frontend/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
+  ENVIRONMENT: ${{ (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main') && 'prod' || 'stg' }}
+  REGISTRY: ghcr.io/$(echo ${{ github.repository }} | tr '[:upper:]' '[:lower:]')
   AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
   AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
   AWS_REGION: ${{ secrets.AWS_REGION }}
+  KUBECTL_VERSION: ${{ secrets.KUBECTL_VERSION }}
   KUBE_CONFIG_DATA: ${{ secrets.KUBE_CONFIG_DATA }}
+  KUBE_NAMESPACE: gear-exe-dapps
+  KUBE_DEPLOY_PREFIX: mandelbrot-set-frontend
+  KUBE_DEPLOY_TYPE: deployment # (statefulset or deployment)
 
 jobs:
-  build-frontend-image:
+  prepair:
+    runs-on: ubuntu-latest
+    outputs:
+      image_name: ${{ steps.image.outputs.image_name }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Get branch
+        id: branch
+        run: |
+          branch_name=${GITHUB_REF#refs/heads/}
+          echo "branch_name=$branch_name" >> $GITHUB_ENV
+
+      - name: Get short SHA
+        id: sha
+        run: |
+          sha_short=$(git rev-parse --short HEAD)
+          echo "sha_short=$sha_short" >> $GITHUB_ENV
+
+      - name: Set IMAGE_NAME
+        id: image
+        run: |
+          image_name=${{ env.REGISTRY }}-${{ env.KUBE_DEPLOY_PREFIX }}:${{ env.branch_name }}-${{ env.sha_short }}
+          echo "image_name=$image_name" >> $GITHUB_OUTPUT
+
+  build-and-push-image:
+    needs: [prepair]
     runs-on: ubuntu-latest
+    environment: ${{ (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main') && 'prod' || 'stg' }}
     permissions:
       contents: read
       packages: write
-
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Log in to the github container registry
-        uses: docker/login-action@master
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build and push Frontend Docker image
-        uses: docker/build-push-action@master
+      - name: Build and push image
+        uses: docker/build-push-action@v6
         with:
-          context: mandelbrot-set/frontend
+          context: mandelbrot-set/frontend/
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}-mandelbrot-set-fe:prod
           build-args: |
             VITE_WALLET_CONNECT_PROJECT_ID=${{ secrets.VITE_WALLET_CONNECT_PROJECT_ID_MONDELBROT }}
             VITE_GEAR_API_NODE=${{ secrets.VITE_GEAR_API_NODE }}
             VITE_CONTRACT_ADDRESS=${{ secrets.VITE_CONTRACT_ADDRESS_MONDELBROT }}
             VITE_ETH_NODE_ADDRESS=${{ secrets.VITE_ETH_NODE_ADDRESS }}
+          tags: ${{ needs.prepair.outputs.image_name }}
 
-  deploy-k8s:
-    needs: build-frontend-image
+  deploy-to-k8s:
+    needs: [prepair, build-and-push-image]
     runs-on: ubuntu-latest
-
+    environment: ${{ (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main') && 'prod' || 'stg' }}
     steps:
+      - name: Setup kubectl
+        run: |
+          curl -LO "https://dl.k8s.io/release/${{ env.KUBECTL_VERSION }}/bin/linux/amd64/kubectl"
+          chmod +x kubectl
+          sudo mv kubectl /usr/local/bin/
+          mkdir -p $HOME/.kube/
+          echo "${{ env.KUBE_CONFIG_DATA }}" | base64 -d > $HOME/.kube/config
+
       - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v1
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-access-key-id: ${{ env.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ env.AWS_SECRET_ACCESS_KEY }}
           aws-region: ${{ env.AWS_REGION }}
 
-      - name: Deploy to k8s
-        uses: sergeyfilyanin/kubectl-aws-eks@master
-        with:
-          args: rollout restart deployment distributed-computation -n gear-dapps
+      - name: Get containes
+        id: containers
+        run: |
+          containers=$(kubectl get ${{ env.KUBE_DEPLOY_TYPE }}/${{ env.KUBE_DEPLOY_PREFIX }}-${{ env.ENVIRONMENT }} -n ${{ env.KUBE_NAMESPACE }} -o jsonpath="{.spec.template.spec.containers[*].name}")
+          echo "CONTAINERS=$containers" >> $GITHUB_ENV
+
+      - name: Update deployment image
+        run: |
+          for container in ${{ env.CONTAINERS }}; do
+            kubectl set image ${{ env.KUBE_DEPLOY_TYPE }}/${{ env.KUBE_DEPLOY_PREFIX }}-${{ env.ENVIRONMENT }} $container=${{ needs.prepair.outputs.image_name }} -n ${{ env.KUBE_NAMESPACE }};
+          done
+
+      - name: Restart deployment
+        run: |
+          kubectl rollout restart ${{ env.KUBE_DEPLOY_TYPE }}/${{ env.KUBE_DEPLOY_PREFIX }}-${{ env.ENVIRONMENT }} -n ${{ env.KUBE_NAMESPACE }}
+
+      - name: Check deployment
+        run: |
+          kubectl rollout status ${{ env.KUBE_DEPLOY_TYPE }}/${{ env.KUBE_DEPLOY_PREFIX }}-${{ env.ENVIRONMENT }} --timeout=300s -n ${{ env.KUBE_NAMESPACE }}

.github/workflows/CI-CD_digit-recognition-frontend.yaml

@@ -75,10 +75,10 @@ jobs:
           push: true
           build-args: |
             NODE_ENV=${{ env.NODE_ENV }}
-            VITE_WALLET_CONNECT_PROJECT_ID=${{ env.VITE_WALLET_CONNECT_PROJECT_ID }}
-            VITE_GEAR_API_NODE=${{ env.VITE_GEAR_API_NODE }}
-            VITE_ETH_NODE_ADDRESS=${{ env.VITE_ETH_NODE_ADDRESS }}
-            VITE_CONTRACT_ADDRESS=${{ env.VITE_CONTRACT_ADDRESS }}
+            VITE_WALLET_CONNECT_PROJECT_ID=${{ secrets.VITE_WALLET_CONNECT_PROJECT_ID_DIGIT_RECOGNITION }}
+            VITE_GEAR_API_NODE=${{ secrets.VITE_GEAR_API_NODE }}
+            VITE_ETH_NODE_ADDRESS=${{ secrets.VITE_ETH_NODE_ADDRESS }}
+            VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION=${{ secrets.VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION }}
           tags: ${{ needs.prepair.outputs.image_name }}
 
   deploy-to-k8s:

digit-recognition/frontend/.env.example

@@ -0,0 +1,4 @@
+VITE_WALLET_CONNECT_PROJECT_ID=
+VITE_GEAR_API_NODE=
+VITE_ETH_NODE_ADDRESS=
+VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION=

digit-recognition/frontend/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

digit-recognition/frontend/Dockerfile

@@ -0,0 +1,30 @@
+FROM node:18-alpine
+
+WORKDIR /opt
+
+RUN apk add --no-cache xsel
+
+COPY package.json yarn.lock ./
+
+RUN yarn install --frozen-lockfile
+
+COPY . .
+
+ARG VITE_WALLET_CONNECT_PROJECT_ID \
+    VITE_GEAR_API_NODE \
+    VITE_ETH_NODE_ADDRESS \
+    VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION
+
+ENV VITE_WALLET_CONNECT_PROJECT_ID=${VITE_WALLET_CONNECT_PROJECT_ID} \
+    VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION=${VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION} \
+    VITE_GEAR_API_NODE=${VITE_GEAR_API_NODE} \
+    VITE_ETH_NODE_ADDRESS=${VITE_ETH_NODE_ADDRESS} \
+    DISABLE_ESLINT_PLUGIN=true
+
+RUN yarn build
+
+RUN npm install --global serve
+
+EXPOSE 4173
+
+CMD ["serve", "-s", "/opt/dist"]

digit-recognition/frontend/README.md

@@ -0,0 +1,23 @@
+# AI Image Recognition
+
+## Description
+
+React application of AI Image Recognition.
+
+## Getting started
+
+### Install packages:
+
+```sh
+yarn install
+```
+
+### Declare environment variables:
+
+Create `.env` file, `.env.example` will let you know what variables are expected.
+
+### Run the app:
+
+```sh
+yarn start
+```

digit-recognition/frontend/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

digit-recognition/frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/favicon.png" sizes="any" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI Image Recognition</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

digit-recognition/frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "distributed-computation",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@polkadot/types": "14.3.1",
+    "@radix-ui/react-slot": "1.1.0",
+    "@reown/appkit": "^1.6.0",
+    "@reown/appkit-adapter-wagmi": "^1.6.0",
+    "@tanstack/react-query": "^5.59.20",
+    "class-variance-authority": "^0.7.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "wagmi": "^2.12.29"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
+    "vite-plugin-svgr": "^4.3.0",
+    "sass": "1.62.0"
+  }
+}

digit-recognition/frontend/src/App.module.scss

@@ -0,0 +1,9 @@
+.connectionWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 48px;
+  padding-top: 0;
+  min-height: calc(100vh - 78px);
+}

digit-recognition/frontend/src/App.tsx

@@ -0,0 +1,27 @@
+import "./index.css";
+import { useAccount } from "wagmi";
+
+import { WalletButton, Header, Layout } from "@/components";
+import { Recognition } from "./components/recognition/Recognition";
+import styles from "./App.module.scss";
+
+function App() {
+  const ethAccount = useAccount();
+  const isConnected = Boolean(ethAccount.chain);
+
+  return (
+    <>
+      <Header />
+      {!isConnected && (
+        <Layout className={styles.connectionWrapper}>
+          <h1>AI Image Recognition</h1>
+
+          <WalletButton />
+        </Layout>
+      )}
+      {isConnected && <Recognition />}
+    </>
+  );
+}
+
+export default App;