Show time lock dynamically on the UI

api/api/routes.py

@@ -17,12 +17,14 @@ def status():
 @apiv1.route("/info")
 def info():
     enabled_tokens = Token.enabled_tokens()
+    rate_limit_days = current_app.config['FAUCET_RATE_LIMIT_TIME_LIMIT_SECONDS'] / (24*60*60)
     enabled_tokens_json = [
         {
             'address': t.address,
             'name': t.name,
             'maximumAmount': t.max_amount_day,
-            'type': t.type
+            'type': t.type,
+            'rateLimitDays': round(rate_limit_days, 2)
         } for t in enabled_tokens
     ]
     return jsonify(

api/api/services/validator.py

@@ -1,5 +1,4 @@
 import datetime
-import pdb
 
 from flask import current_app, request
 from web3 import Web3

app/src/App.tsx

@@ -68,6 +68,11 @@ function App(): JSX.Element {
           enabledTokens={enabledTokens}
           setLoading={setLoading}
         />
+        <h3>Want more{chainId === 100 ? '?' : ' on Gnosis Chain?'}</h3>
+        <ul>
+          <li>on-ramp fiat via <a href="https://uramp.gnosis.io/"  rel="noreferrer" target="_blank">uramp.gnosis.io</a></li>
+          <li><a href="https://bridge.gnosischain.com/"  rel="noreferrer" target="_blank">bridge</a> assets from Ethereum</li>
+        </ul>
       </div>
       {loading && <Loading/>}
     </>

app/src/components/FaucetForm/Faucet.tsx

@@ -5,6 +5,7 @@ import axios from "axios"
 import Captcha from "../Captcha/Captcha"
 import TokenSelect, { Token } from "../TokenSelect/TokenSelect"
 import HCaptcha from "@hcaptcha/react-hcaptcha"
+import { formatLimit } from "../../utils"
 
 interface FaucetProps {
   enabledTokens: Token[],
@@ -45,15 +46,17 @@ function Faucet({ enabledTokens, chainId, setLoading }: FaucetProps): JSX.Elemen
       setToken({
         address: enabledTokens[0].address,
         name: enabledTokens[0].name,
-        maximumAmount: Number(enabledTokens[0].maximumAmount)
+        maximumAmount: Number(enabledTokens[0].maximumAmount),
+        rateLimitDays: enabledTokens[0].rateLimitDays
       })
     } else {
       const defaultToken = enabledTokens.find(token => token.address === "0x0000000000000000000000000000000000000000")
       if (defaultToken !== undefined) {
         setToken({
           address: defaultToken.address,
           name: defaultToken.name,
-          maximumAmount: Number(defaultToken.maximumAmount)
+          maximumAmount: Number(defaultToken.maximumAmount),
+          rateLimitDays: defaultToken.rateLimitDays
         })
       }
     }
@@ -142,7 +145,7 @@ function Faucet({ enabledTokens, chainId, setLoading }: FaucetProps): JSX.Elemen
           <>
             <label htmlFor="token">Token:</label>
             <div className="input-field token-info">
-              <strong>{token.name}</strong> {token.maximumAmount} / day
+              <strong>{token.name}</strong> {token.maximumAmount} / {formatLimit(token.rateLimitDays)}
             </div>
           </> :
           <>

app/src/components/TokenSelect/TokenSelect.tsx

@@ -1,10 +1,12 @@
 import { Dispatch, SetStateAction } from "react"
 import Select, { StylesConfig } from "react-select"
+import { formatLimit } from "../../utils"
 
 export interface Token {
   address: string
   name: string
-  maximumAmount: number
+  maximumAmount: number,
+  rateLimitDays: number
 }
 
 interface TokenSelectProps {
@@ -14,10 +16,10 @@ interface TokenSelectProps {
   windowWidth: number
 }
 
-const formatOptionLabel = ({ name, maximumAmount }: Token) => {
+const formatOptionLabel = ({ name, maximumAmount, rateLimitDays }: Token) => {
   return (
     <div>
-      <strong>{name}</strong> {maximumAmount} / day
+      <strong>{name}</strong> {maximumAmount} / {formatLimit(rateLimitDays)}
     </div>
   )
 }
@@ -33,7 +35,8 @@ function TokenSelect ({ enabledTokens, token, setToken, windowWidth }: TokenSele
           setToken({
             address: option.address,
             name: option.name,
-            maximumAmount: Number(enabledTokens[idx].maximumAmount)
+            maximumAmount: Number(enabledTokens[idx].maximumAmount),
+            rateLimitDays: option.rateLimitDays
           })
           break
         }

app/src/css/App.css

@@ -93,4 +93,29 @@
   .title h2 {
     font-size: 2rem;
   }
+}
+
+h3 {
+  /* font-family: "Maxi Round", sans-serif; */
+  font-size: 1.6rem;
+  color: white;
+  color: #F0EBDE;
+  font-weight: normal;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+}
+
+ul {
+  color: white;
+  font-size: 1rem;
+  margin-top: 0;
+  list-style: circle;
+}
+
+li {
+  padding-bottom: 0.5rem;
+}
+
+li a {
+  color: white;
 }

app/src/utils.ts

@@ -0,0 +1,5 @@
+export function formatLimit(days: number): string {
+  if (days === 1) return "day"
+  if (days === 7) return "week"
+  return `${String(days)} days`
+}