feat: show network name instead network url, and related fixes (#36)

* chore: add link to docs

* chore: add configuration to run locally

* chore: don't show empty revision in docker

* fix: show network name instead network url

* feat: get primary color and symbol from node configs

docker-compose.yml

@@ -0,0 +1,34 @@
+services:
+  middleware:
+    # TODO: use upstream after solving https://github.com/aeternity/ae_mdw/issues/1758
+    image: davidyuk/temp:mdw-dev-mode
+    ports: [4000:4000, 4001:4001, 3013:3013, 3313:3313]
+    volumes:
+      - ./docker/aeternity.yaml:/home/aeternity/aeternity.yaml
+    stop_grace_period: 0s
+
+  explorer:
+    # TODO: use upstream after merging https://github.com/aeternity/aescan/pull/774
+    image: davidyuk/temp:explorer
+    ports: [3070:80]
+    environment:
+      - NUXT_PUBLIC_NETWORK_NAME=Localnet
+      - NUXT_PUBLIC_NODE_URL=http://host.docker.internal:3013
+      - NUXT_PUBLIC_MIDDLEWARE_URL=http://host.docker.internal:4000
+      - NUXT_PUBLIC_WEBSOCKET_URL=ws://host.docker.internal:4001/v2/websocket
+    depends_on:
+      middleware:
+        condition: service_healthy
+
+  faucet:
+    build: .
+    ports: [5001:5000]
+    environment:
+      - FAUCET_ACCOUNT_PRIV_KEY=9ebd7beda0c79af72a42ece3821a56eff16359b6df376cf049aee995565f022f840c974b97164776454ba119d84edc4d6058a8dec92b6edc578ab2d30b4c4200
+      - TOPUP_AMOUNT=0.01
+      - SPEND_TX_PAYLOAD=Test Faucet Tx
+      - NODE_URL=http://host.docker.internal:3013
+      - EXPLORER_URL=http://host.docker.internal:3070
+    depends_on:
+      middleware:
+        condition: service_healthy

docker/aeternity.yaml

@@ -0,0 +1,30 @@
+# yaml-language-server: $schema=https://github.com/aeternity/aeternity/raw/master/apps/aeutils/priv/aeternity_config_schema.json
+
+system:
+  dev_mode: true
+  plugins:
+    - name: aeplugin_dev_mode
+
+dev_mode:
+  auto_emit_microblocks: true
+
+chain:
+  persist: false
+  hard_forks:
+    "1": 0
+    "6": 1
+  genesis_accounts:
+    ak_21A27UVVt3hDkBE5J7rhhqnH5YNb4Y1dqo4PnSybrH85pnWo7E: 10000000000000000000
+  currency:
+    symbol: LAE
+  display:
+    network_name: Localnet
+    primary_colour: '#29f752'
+
+# TODO: remove after solving https://github.com/aeternity/ae_mdw/issues/1760
+fork_management:
+  network_id: ae_dev
+
+# TODO remove after solving https://github.com/aeternity/ae_mdw/issues/1760#issuecomment-2102872638
+mining:
+  beneficiary: ak_21A27UVVt3hDkBE5J7rhhqnH5YNb4Y1dqo4PnSybrH85pnWo7E

docker/run-devmode.mjs

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+import { execSync } from 'child_process';
+
+// TODO: remove after solving https://github.com/aeternity/ae_mdw/issues/1758
+try {
+  execSync(
+    'docker compose exec middleware ./bin/ae_mdw rpc ":aeplugin_dev_mode_app.start_unlink()"',
+    { stdio : 'pipe' },
+  );
+} catch (error) {
+  if (!error.message.includes('{:error, {:already_started')) throw error;
+}

index.html

@@ -13,7 +13,7 @@ <h1>
         🚰<br/>
         <a href="https://aeternity.com">Æternity Blockchain</a>'s Faucet Aepp
       </h1>
-      <h4>{{ NODE_URL }}</h4>
+      <h4>{{ NETWORK_NAME }}, <a target="_blank" href="{{ NODE_URL }}/v3/status">status</a></h4>
       <form id="form">
         <input name="address" placeholder="ak_YOUrPubl1ckeyh4sHh3r3" required>
         <button>Top UP</button>
@@ -24,12 +24,20 @@ <h4>{{ NODE_URL }}</h4>
       <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>
+      {{ REVISION }}
+      | <a href="https://github.com/aeternity/aepp-faucet-nodejs/blob/master/README.md" target="_blank">documentation</a>
+      | <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 }}'
+      window.SYMBOL = '{{ SYMBOL }}'
     </script>
+    <style>
+      :root {
+        --color-primary: {{ COLOR_PRIMARY }};
+      }
+    </style>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

server.ts

@@ -39,7 +39,8 @@ async function fetchNonce() {
   nonce = (await aeSdk.api.getAccountNextNonce(aeSdk.address)).nextNonce;
   console.info(`Synced nonce ${nonce}`);
 }
-await fetchNonce();
+
+const [currency] = await Promise.all([aeSdk.api.getCurrency(), fetchNonce()]);
 
 let previousSpendPromise: ReturnType<typeof aeSdk.spend>;
 app.post('/account/:recipient_address', async (req, res) => {
@@ -74,11 +75,11 @@ app.post('/account/:recipient_address', async (req, res) => {
         verify: false,
       }));
     const tx = await previousSpendPromise;
-    console.info(`Top up ${address} with ${TOPUP_AMOUNT} AE, tx hash ${tx.hash}`);
+    console.info(`Top up ${address} with ${TOPUP_AMOUNT} ${currency.symbol}, tx hash ${tx.hash}`);
     const balance = await aeSdk.getBalance(address);
     res.send({ tx_hash: tx.hash, balance });
   } catch (err) {
-    console.error(`Generic error: top up ${address} of ${TOPUP_AMOUNT} AE on ${NODE_URL.replace('https://', '')} failed with error.`, err);
+    console.error(`Generic error: top up ${address} of ${TOPUP_AMOUNT} ${currency.symbol} on ${NODE_URL.replace('https://', '')} failed with error.`, err);
     res.status(500);
     res.send({ message: `Unknown error, please contact <a href="mailto:${SUPPORT_EMAIL}">${SUPPORT_EMAIL}</a>` });
   }
@@ -88,13 +89,16 @@ await new Promise<void>((resolve) => ViteExpress.listen(app, SERVER_LISTEN_PORT,
 
 ViteExpress.config({
   transformer: (html: string) => [
+    ['NETWORK_NAME', currency.networkName],
+    ['SYMBOL', currency.symbol],
+    ['COLOR_PRIMARY', currency.primaryColour],
     ['NODE_URL', NODE_URL],
     ['TOPUP_AMOUNT', TOPUP_AMOUNT],
     ['EXPLORER_URL', EXPLORER_URL],
-    ['REVISION', process.env.REVISION ?? 'local'],
+    ['REVISION', process.env.REVISION || 'local'],
   ].reduce((acc, [k, v]) => acc.replace(`{{ ${k} }}`, v), html),
 });
 
 console.info(`Faucet listening at http://0.0.0.0:${SERVER_LISTEN_PORT}`);
 console.info(`Faucet Address: ${aeSdk.address}`);
-console.info(`Faucet Balance: ${toAe(await aeSdk.getBalance(aeSdk.address))} AE`);
+console.info(`Faucet Balance: ${toAe(await aeSdk.getBalance(aeSdk.address))} ${currency.symbol}`);

src/style.css

@@ -51,7 +51,7 @@ h4 {
 }
 
 a {
-  color: #ff0d6a;
+  color: var(--color-primary);
   text-decoration: none;
 
   &:hover {
@@ -70,7 +70,7 @@ button {
   background-color: #282a36;
   border: none;
   border-radius: .25rem;
-  color: #ff0d6a;
+  color: var(--color-primary);
   cursor: pointer;
 
   &:disabled {

src/topUp.ts

@@ -1,10 +1,11 @@
 import { SetResult } from './result.ts'
 
 declare const TOPUP_AMOUNT: string
+declare const SYMBOL: string
 declare const EXPLORER_URL: string
 
 export default async function topUp(address: string, setResult: SetResult): Promise<void> {
-  setResult('loading', `Adding ${TOPUP_AMOUNT} AE`, `
+  setResult('loading', `Adding ${TOPUP_AMOUNT} ${SYMBOL}`, `
     Account: <a href="${EXPLORER_URL}/accounts/${address}" target="_blank">${address}</a>
   `)
 
@@ -13,10 +14,10 @@ export default async function topUp(address: string, setResult: SetResult): Prom
     response = await fetch(`/account/${address}`, { method: 'POST' })
     json = await response.json()
     if (response.status !== 200) throw new Error(`Unexpected response status: ${response.status}`)
-    setResult('success', `Added ${TOPUP_AMOUNT} AE!`, `
+    setResult('success', `Added ${TOPUP_AMOUNT} ${SYMBOL}!`, `
       Transaction: <a href="${EXPLORER_URL}/transactions/${json.tx_hash}" target="_blank">${json.tx_hash}</a><br>
       Account: <a href="${EXPLORER_URL}/accounts/${address}" target="_blank">${address}</a><br>
-      Balance: ${json.balance / 1e18} AE<br>
+      Balance: ${json.balance / 1e18} ${SYMBOL}<br>
     `)
   } catch (error) {
     throw new Error(`${json?.message ?? (error instanceof Error ? error.message : String(error))}`)