feat: add wallet connect button, version at the bottom (#33)

* feat: add bottom line with version and bug report link * chore: add "rollup-plugin-visualizer" * refactor: extract topUp function * feat: add wallet connect button
aeternity · Apr 29, 2024 · 9f9cbf0 · 9f9cbf0
1 parent 2545504
commit 9f9cbf0
Show file tree

Hide file tree

Showing 15 changed files with 473 additions and 51 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -6,4 +6,5 @@
 !server.ts
 !utils.ts
 !tsconfig.json
+!vite.config.ts
 !index.html
diff --git a/Dockerfile b/Dockerfile
@@ -6,7 +6,7 @@ RUN npm ci
 
 COPY src src
 COPY public public
-COPY tsconfig.json index.html ./
+COPY tsconfig.json vite.config.ts index.html ./
 RUN npm run build
 
 FROM node:20-alpine
@@ -17,5 +17,7 @@ RUN npm ci --omit dev
 COPY --from=frontend /app/dist dist
 COPY server.ts utils.ts ./
 ENV NODE_ENV production
+ARG REVISION
+ENV REVISION $REVISION
 
 CMD [ "npx", "tsx", "server.ts"]
diff --git a/index.html b/index.html
@@ -8,18 +8,28 @@
     <title>Faucet Aepp</title>
   </head>
   <body>
-    <div>
+    <main>
       <h1>
         🚰<br/>
         <a href="https://aeternity.com">Æternity Blockchain</a>'s Faucet Aepp
       </h1>
-      <h4>{{ node }}</h4>
-      <form id="form" data-amount="{{ amount }}" data-explorer-url="{{ explorer_url }}">
+      <h4>{{ NODE_URL }}</h4>
+      <form id="form">
         <input name="address" placeholder="ak_YOUrPubl1ckeyh4sHh3r3" required>
         <button>Top UP</button>
       </form>
+      <div class="connect-wallet">
+        <span>or</span> <button>Connect Wallet</button>
+      </div>
       <div id="result"></div>
+    </main>
+    <div class="bottom-line">
+      {{ REVISION }} | <a href="https://github.com/aeternity/aepp-faucet-nodejs/issues/new" target="_blank">report a bug</a>
     </div>
+    <script>
+      window.TOPUP_AMOUNT = '{{ TOPUP_AMOUNT }}'
+      window.EXPLORER_URL = '{{ EXPLORER_URL }}'
+    </script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>