feat: introduce frontend

.github/workflows/k8s-deploy.yml

@@ -69,7 +69,6 @@ jobs:
       - name: Build and push image
         uses: docker/build-push-action@v5
         with:
-          context: frontend
           file: frontend/Dockerfile
           push: true
           tags: ${{ needs.prepair.outputs.image_name }}
@@ -80,7 +79,7 @@ jobs:
             VITE_WALLET_CONNECT_PROJECT_ID=${{ secrets.VITE_WALLET_CONNECT_PROJECT_ID }}
             VITE_INDEXER_ADDRESS=${{ secrets.VITE_INDEXER_ADDRESS }}
             VITE_BRIDGING_PAYMENT_CONTRACT_ADDRESS=${{ secrets.VITE_BRIDGING_PAYMENT_CONTRACT_ADDRESS }}
-            VITE_ERC20_TREASURY_CONTRACT_ADDRESS=${{ secrets.VITE_ERC20_TREASURY_CONTRACT_ADDRESS }}
+            VITE_ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS=${{ secrets.VITE_ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS }}
 
   deploy-to-k8s:
     needs: [prepair, build-and-push-image]

frontend/.env.example

@@ -0,0 +1,7 @@
+VITE_VARA_NODE_ADDRESS=
+VITE_ETH_NODE_ADDRESS=
+VITE_ETH_CHAIN_ID=
+VITE_WALLET_CONNECT_PROJECT_ID=
+VITE_INDEXER_ADDRESS=
+VITE_BRIDGING_PAYMENT_CONTRACT_ADDRESS=
+VITE_ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS=

frontend/.eslintrc

@@ -0,0 +1,69 @@
+{
+  "root": true,
+  "env": { "browser": true, "es2020": true },
+
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier"
+  ],
+
+  "settings": {
+    "ecmaVersion": "latest",
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "typescript": true
+    }
+  },
+
+  "plugins": ["react", "react-hooks", "import", "jsx-a11y", "react-refresh"],
+
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": { "project": ["./tsconfig.json", "./tsconfig.node.json"] },
+
+      "extends": [
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "plugin:import/typescript"
+      ],
+
+      "plugins": ["@typescript-eslint/eslint-plugin"],
+
+      "rules": {
+        // airbnb cfg
+        "no-shadow": "error",
+        "no-shadow-restricted-names": "error",
+
+        // dx
+        "@typescript-eslint/no-unused-vars": "warn",
+
+        // react-hook-form onSubmit
+        "@typescript-eslint/no-misused-promises": [2, { "checksVoidReturn": { "attributes": false } }],
+
+        // import sort
+        "import/order": [
+          1,
+          {
+            "groups": ["external", "builtin", "internal", "parent", "sibling", "index"],
+            "newlines-between": "always",
+            "alphabetize": { "order": "asc" }
+          }
+        ],
+
+        // we're using typescript
+        "react/prop-types": "off"
+      }
+    }
+  ]
+}

frontend/.gitignore

@@ -0,0 +1,27 @@
+# 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*
+!.env.example
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.npmrc

@@ -0,0 +1 @@
+save-exact=true

frontend/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "endOfLine": "lf",
+  "printWidth": 120,
+  "semi": true,
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "arrowParens": "always",
+  "tabWidth": 2
+}

frontend/Dockerfile

@@ -0,0 +1,36 @@
+FROM node:18-alpine
+MAINTAINER gear
+
+WORKDIR /app
+
+COPY ./frontend .
+
+RUN npm install -g pnpm
+
+RUN apk update
+
+RUN apk add xsel
+
+ARG VITE_VARA_NODE_ADDRESS \
+    VITE_ETH_NODE_ADDRESS \
+    VITE_ETH_CHAIN_ID \
+    VITE_WALLET_CONNECT_PROJECT_ID \
+    VITE_INDEXER_ADDRESS \
+    VITE_BRIDGING_PAYMENT_CONTRACT_ADDRESS \
+    VITE_ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS
+
+ENV VITE_VARA_NODE_ADDRESS=${VITE_VARA_NODE_ADDRESS} \
+    VITE_ETH_NODE_ADDRESS=${VITE_ETH_NODE_ADDRESS} \
+    VITE_ETH_CHAIN_ID=${VITE_ETH_CHAIN_ID} \
+    VITE_WALLET_CONNECT_PROJECT_ID=${VITE_WALLET_CONNECT_PROJECT_ID} \
+    VITE_INDEXER_ADDRESS=${VITE_INDEXER_ADDRESS} \
+    VITE_BRIDGING_PAYMENT_CONTRACT_ADDRESS=${VITE_BRIDGING_PAYMENT_CONTRACT_ADDRESS} \
+    VITE_ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS=${VITE_ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS}
+
+RUN pnpm install
+
+RUN pnpm build
+
+RUN npm install --global serve
+
+CMD ["serve", "-s", "/app/dist"]

frontend/README.md

@@ -0,0 +1 @@
+# Vara Network Bridge

frontend/codegen.ts

@@ -0,0 +1,23 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+import { loadEnv } from 'vite';
+
+const config: CodegenConfig = {
+  schema: loadEnv('', process.cwd(), '').VITE_INDEXER_ADDRESS,
+  documents: ['src/**/*.{ts,tsx}'],
+  ignoreNoDocuments: true, // for better experience with the watcher
+  generates: {
+    './src/features/history/graphql/': {
+      preset: 'client',
+      plugins: [],
+      config: {
+        scalars: {
+          DateTime: 'string', // custom subsquid scalars
+          BigInt: 'string',
+        },
+        avoidOptionals: true,
+      },
+    },
+  },
+};
+
+export default config;

frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Vara Network Bridge</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "start": "vite --open --port 3000",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "codegen": "graphql-codegen"
+  },
+  "dependencies": {
+    "@gear-js/api": "0.38.1",
+    "@gear-js/react-hooks": "0.12.2",
+    "@gear-js/vara-ui": "0.0.10",
+    "@hookform/resolvers": "3.9.0",
+    "@polkadot/api": "11.0.2",
+    "@polkadot/react-identicon": "3.9.1",
+    "@tanstack/react-query": "5.52.1",
+    "@web3modal/wagmi": "5.1.3",
+    "graphql": "16.9.0",
+    "graphql-request": "7.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-hook-form": "7.52.2",
+    "react-number-format": "5.4.0",
+    "react-router-dom": "6.26.1",
+    "sails-js": "0.1.8",
+    "viem": "2.19.6",
+    "wagmi": "2.12.7",
+    "zod": "3.23.8"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "5.0.2",
+    "@graphql-codegen/client-preset": "4.3.3",
+    "@graphql-typed-document-node/core": "3.2.0",
+    "@polkadot/types": "11.0.2",
+    "@types/react": "18.3.4",
+    "@types/react-dom": "18.3.0",
+    "@typescript-eslint/eslint-plugin": "8.2.0",
+    "@typescript-eslint/parser": "8.2.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-refresh": "0.4.11",
+    "sass": "1.77.8",
+    "typescript": "5.5.4",
+    "vite": "5.4.2",
+    "vite-plugin-checker": "0.7.2",
+    "vite-plugin-node-polyfills": "0.22.0",
+    "vite-plugin-svgr": "4.2.0"
+  }
+}