refactor: flatten docker image, update README

.dockerignore

@@ -1,3 +1,17 @@
+dist
 node_modules
-android
-clients/liquid-auth-client-kt
+.decisions
+.github
+.vscode
+docs
+__mocks__
+.eslintrc.json
+.gitignore
+.prettierrc
+ARCHITECTURE.md
+CODE_OF_CONDUCT.md
+CONTRIBUTING.md
+docker-compose.yml
+Dockerfile
+README.md
+SEQUENCE.md

.env.docker

@@ -1,7 +1,7 @@
 # Application
 NODE_ENV=production
 SENTRY_DNS=
-PORT=5173
+PORT=3000
 
 # Database
 DB_HOST=mongo:27017

.gitignore

@@ -1,3 +1,9 @@
+# Project Files
+docker-compose.override.yml
+swagger-codegen-cli.jar
+ngrok.yml
+.data
+
 assetlinks.json
 src/views
 src/public

Dockerfile

@@ -1,4 +1,6 @@
-FROM node:20.12-alpine AS BUILDER
+FROM node:22.8.0-alpine AS BUILDER
+
+WORKDIR /home/node
 
 ENV PYTHONUNBUFFERED=1
 RUN apk add --update --no-cache g++ make py3-pip pkgconfig pixman-dev cairo-dev pango-dev && ln -sf python3 /usr/bin/python
@@ -9,19 +11,19 @@ RUN npm ci
 
 RUN npm run build
 
-FROM node:20.12-alpine
+FROM node:22.8.0-alpine
+
+WORKDIR /home/node
+
+# Dependencies
+COPY --from=BUILDER /home/node/node_modules ./node_modules
 
 # App Files
-COPY --from=BUILDER ./node_modules ./node_modules
-COPY --from=BUILDER ./package.json ./package.json
-COPY --from=BUILDER ./package-lock.json ./package-lock.json
-# Sites Files
-COPY --from=BUILDER ./sites ./sites
-# Service Files
-COPY --from=BUILDER ./services/liquid-auth-api-js/ ./services/liquid-auth-api-js/
+COPY --from=BUILDER /home/node/dist ./dist
+COPY --from=BUILDER /home/node/src ./src
+COPY --from=BUILDER /home/node/package.json ./package.json
 
 # Expose the port on which the app will run
 EXPOSE 3000
-EXPOSE 5173
 
-CMD ["npm", "run", "start"]
+CMD ["npm", "run", "start:prod"]

README.md

@@ -39,10 +39,10 @@ ngrok will ask you to add your auth token to your configuration file.
 ngrok config add-authtoken <NGROK_AUTH_TOKEN>
 ```
 
-Will then ask you to deploy your static domain, make sure to change the port to **5173** like this:
+Will then ask you to deploy your static domain, make sure to change the port to **3000** like this:
 
 ``` bash
-ngrok http --domain=<NGROK_STATIC_DOMAIN> 5173
+ngrok http --domain=<NGROK_STATIC_DOMAIN> 3000
 ```
 
 #### Configure NGROK
@@ -55,7 +55,7 @@ version: 2
 authtoken: <NGROK_AUTH_TOKEN>
 tunnels:
   website:
-    addr: liquid-auth:5173
+    addr: liquid-auth:3000
     proto: http
     domain: <NGROK_STATIC_DOMAIN>
 
@@ -79,3 +79,37 @@ Run the following command to start the backend:
 docker-compose up -d
 ```
 
+### Documentation
+
+A quick way to test the service is using the Astro documentation site. 
+To run the documentation, navigate to the `docs` directory:
+
+```bash
+cd docs
+```
+
+Copy the `.env.template` file to `.env`:
+
+```bash
+cp .env.template .env
+```
+
+Update the `.env` file with the <NGROK_STATIC_DOMAIN>
+
+```bash
+LIQUID_ORIGIN=<NGROK_STATIC_DOMAIN>
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Run the documentation:
+
+```bash
+npm run dev
+```
+
+Navigate to [https://localhost:4321](https://localhost:4321/#get-connected) to view the documentation.

docker-compose.yml

@@ -1,18 +1,15 @@
 services:
   liquid-auth:
     build: .
-    restart: no
     env_file:
       - .env.docker
     ports:
-      - "5173:5173"
+      - "3000:3000"
     depends_on:
       - redis
       - mongo
-    command: ["npm", "run", "start:ssr"]
   ngrok:
     image: ngrok/ngrok:latest
-    restart: no
     command:
       - "start"
       - "--all"
@@ -24,12 +21,10 @@ services:
       - 4040:4040
   redis:
     image: redis
-    restart: always
     ports:
       - "6379:6379"
   mongo:
     image: mongo:7.0
-    restart: no
     environment:
       - MONGO_INITDB_DATABASE=${DB_NAME:-fido}
       - MONGO_INITDB_ROOT_USERNAME=${DB_USERNAME:-algorand}
@@ -38,23 +33,5 @@ services:
       - "27017:27017"
     volumes:
       - mongo:/data/db
-  turn:
-    image: coturn/coturn
-    restart: no
-    deploy:
-      replicas: 0
-    depends_on:
-      - mongo
-    ports:
-      - "3478:3478"
-      - "3478:3478/udp"
-      - "5349:5349"
-      - "5349:5349/udp"
-    command:
-      - "--no-auth"
-      - "--mongo-userdb"
-      - "mongodb://${DB_USERNAME:-algorand}:${DB_PASSWORD:-algorand}@mongo:27017/${DB_NAME:-coturn}?authSource=admin&retryWrites=true&w=majority"
-      - "--redis-userdb"
-      - "ip=redis dbname=0"
 volumes:
   mongo:

docs/.env.template

@@ -0,0 +1 @@
+PUBLIC_LIQUID_ORIGIN=liquid-auth.onrender.com

docs/src/components/QrCode.tsx

@@ -15,20 +15,41 @@ import {
 } from "@algorandfoundation/provider";
 import { fromResult } from "../hooks/provider.ts";
 
-const url = "liquid-auth.onrender.com";
-
+const url = import.meta.env.PUBLIC_LIQUID_ORIGIN || "liquid-auth.onrender.com";
 const INITIAL = "Initializing 🚀";
 const PEER_CONNECTED = "Peer connected 🎉";
-const SENDING_TRANSACTION = "Sending Transaction 🚀";
+const SENDING_TRANSACTION = "Requesting Signature 📲";
 const RECEIVED_SIGNATURE = "Received Signature 🔏";
 const SUBMITTED_TRANSACTION = "Submitted Transaction 🚀";
-const TRANSACTION_CONFIRMED = "Confirmed Transaction 🎉";
+const TRANSACTION_CONFIRMED = "Transaction Confirmed ✅";
 const LINK_REQUEST = "Link Requested 🚚";
 const WAITING = "Waiting for Link ⌛";
 const LINKED = "Linked 🔗";
 const CLOSED = "Closed 🚪";
 const ERROR = "Something went wrong 🛑";
 
+type FundAccountProps = {
+  address?: string
+  onCancel?: React.MouseEventHandler<HTMLButtonElement>
+}
+function FundAccount({address = "Loading...", onCancel = console.log}){
+  return (
+    <>
+      <h1 className="text-white text-2xl mb-2">Fund Account</h1>
+      <p className="text-white">Account is missing funds, you need at least the minimum transaction fee to test</p>
+      <input value={address} onChange={()=>{}}/>
+      <div className="flex flex-col mt-4 mx-auto gap-2">
+        <a role="button" target="_blank" href="https://bank.testnet.algorand.network/" className="px-10 py-2 text-md font-poppins leading-6 border-2 border-liquid-purple text-white">
+          Dispenser
+        </a>
+        <button className="px-10 py-2 text-md font-poppins leading-6 border-2 border-red-600 text-white"
+                onClick={onCancel}>
+          Cancel
+        </button>
+      </div>
+    </>
+  )
+}
 
 type SendTransactionProps = {
   disabled?: boolean,
@@ -41,12 +62,12 @@ function SendTransaction({ disabled = false, onCancel = console.log, onSubmit =
     <>
       <h1 className="text-white text-2xl mb-2">Send Transaction</h1>
       <p className="text-white">Send a simple transaction with 0 Amount</p>
-      <div className="flex mt-2 mx-auto">
-        <button disabled={disabled} className="px-10 py-2 text-md font-poppins leading-6 border-2 border-liquid-purple text-white"
+      <div className="flex mt-2 mx-auto gap-2">
+        <button disabled={disabled} className="px-10 py-2 text-md font-poppins leading-6 border-2 border-liquid-green text-white"
                 onClick={onSubmit}>
           Send
         </button>
-        <button className="px-10 py-2 text-md font-poppins leading-6 border-2 border-liquid-purple text-white"
+        <button className="px-10 py-2 text-md font-poppins leading-6 border-2 border-red-600 text-white"
                 onClick={onCancel}>
           Cancel
         </button>
@@ -125,17 +146,15 @@ export function QrCode({ label = true }: { label?: boolean }) {
             setStatus(ERROR);
           } else {
             algod.sendRawTransaction(stxns).do().then(({txId})=>{
-              console.log('wow')
               setStatus(SUBMITTED_TRANSACTION)
               waitForConfirmation(algod, txId, 4).then(()=>{
-                setStatus(TRANSACTION_CONFIRMED)
-                setIsInflight(false)
+                  setStatus(TRANSACTION_CONFIRMED)
+                  setIsInflight(false)
               });
             }).catch(handleError);
           }
         }
       }
-
       setStatus(PEER_CONNECTED);
     }).catch(handleError);
 
@@ -181,8 +200,13 @@ export function QrCode({ label = true }: { label?: boolean }) {
       .catch(handleError);
   }
 
+  function Status() {
+    if(status === TRANSACTION_CONFIRMED) return <a role="button" target="_blank" href={`https://testnet.explorer.perawallet.app/tx/${_txn?.txID()}`} className="relative -inset-y-14 text-xl text-liquid-blue mt-2 inline">{status}</a>;
+    return <h6 className="relative -inset-y-14 text-white text-xl mt-2 inline">{status}</h6>;
+  }
+
   return <div className="w-80 h-80 flex justify-center">
-    {label && <h6 className="relative -inset-y-14 text-white text-xl mt-2 inline">{status}</h6>}
+    {label && <Status />}
     {qrCodeUrl &&
       <a className={"absolute max-w-80"} href={client.deepLink(requestId)}>
         <img className="!mt-0" src={qrCodeUrl} alt="Algorand QRCode" />
@@ -191,6 +215,7 @@ export function QrCode({ label = true }: { label?: boolean }) {
     {isConnected && <div className="absolute flex flex-col bg-gray-800/[.98] p-6 h-80 justify-center max-w-80">
       {isFunded &&
         <SendTransaction disabled={isInFlight} onSubmit={handleSubmit} onCancel={() => setRequestId(SignalClient.generateRequestId())} />}
+      {!isFunded && <FundAccount address={accountInfo.data!!.address} onCancel={() => setRequestId(SignalClient.generateRequestId())} />}
     </div>}
   </div>;
 }

docs/src/hooks/useAccountInfo.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useAlgod } from './useAlgod.ts';
+import { useAlgod } from './useAlgod.js';
 
 export function useAccountInfo(
   address: string | null,