Presale page 2

package.json

@@ -6,8 +6,8 @@
     "dev": "next dev",
     "build": "yarn clear && next build && next export",
     "start": "next start",
-    "lint": "yarn prettier ./components/*.tsx ./components/*/*.tsx ./components/*/*/*.tsx ./pages/*.tsx --check",
-    "lint:fix": "yarn prettier ./components/*.tsx ./components/*/*.tsx ./components/*/*/*.tsx ./pages/*.tsx --write",
+    "lint": "yarn prettier ./pages/*.tsx ./src/**/*.tsx --check",
+    "lint:fix": "yarn prettier ./pages/*.tsx ./src/**/*.tsx --write",
     "clear": "rimraf out"
   },
   "dependencies": {

src/components/private-sale/PrivateSaleInterface.tsx

@@ -13,6 +13,8 @@ import { SectionProps } from '../sections/utils/SectionProps'
 // Back-end
 import { useWallet } from '../../hooks/useWallet'
 import { usePrivateSale } from '../../hooks/usePrivateSale'
+import useNumberValue from '../../hooks/useNumberValue'
+
 
 export function PrivateSaleInterface({ className }: SectionProps) {
   const SYMBOL: string = 'BNB'
@@ -26,15 +28,19 @@ export function PrivateSaleInterface({ className }: SectionProps) {
   const [buySuccessfulMessage, setBuySuccessfulMessage] = useState<string>('')
   const [purchaseLoading, setPurchaseLoading] = useState<boolean>(false)
 
-  const [userBnbAllowance, setUserBnbAllowance] = useState<string>('0')
   const [userUsdAllowance, setUserUsdAllowance] = useState<number>(0.0)
   const [userRecipientAddress, setUserRecipientAddress] = useState<string>('')
   const [useMyAddress, setUseMyAddress] = useState<boolean>(false)
 
-  const userAllowanceChange = (value: string) => {
-    const val = value == '' ? '0' : value.replace(',', '.')
-    setUserBnbAllowance(val)
-    setUserUsdAllowance(parseFloat(val) * currentBnbPrice)
+  const [userBnbAllowance,userAllowanceChange,allowanceErrorMessage] = useNumberValue()
+
+  const onUserAllowanceChange = (value: string) => {
+
+    userAllowanceChange(value)
+      .then(() => {
+        setUserUsdAllowance(parseFloat(userBnbAllowance) * currentBnbPrice)
+      })
+      .catch()
   }
 
   useEffect(() => {
@@ -55,8 +61,7 @@ export function PrivateSaleInterface({ className }: SectionProps) {
   const setMaxUserAllowance = () => {
     if (connected) {
       const max = balance ? (balance - 2 * parseFloat(Web3.utils.fromWei(gasPrice))).toString() : '0'
-      setUserBnbAllowance(max)
-      userAllowanceChange(max)
+      onUserAllowanceChange(max)
     }
   }
 
@@ -72,7 +77,7 @@ export function PrivateSaleInterface({ className }: SectionProps) {
   }
 
   var resetUIToDefault = () => {
-    setUserBnbAllowance('0')
+    onUserAllowanceChange('0')
     setUserUsdAllowance(0.0)
     setPurchaseLoading(false)
   }
@@ -125,7 +130,7 @@ export function PrivateSaleInterface({ className }: SectionProps) {
           </div>
           <div
             className={classNames(' mt-7 bg-blue-gray rounded-xl flex justify-between items-center p-6', {
-              'border-2 border-red-error': errorInput
+              'border-2 border-red-error': errorInput || allowanceErrorMessage
             })}
             style={{
               height: calcRem(87)
@@ -135,7 +140,7 @@ export function PrivateSaleInterface({ className }: SectionProps) {
               <input
                 className="bg-blue-gray focus:outline-none w-full"
                 value={userBnbAllowance}
-                onChange={(event) => userAllowanceChange(event.currentTarget.value)}
+                onChange={(event) => onUserAllowanceChange(event.currentTarget.value)}
               />
               <SideText className="truncate">
                 {'= '}
@@ -167,6 +172,7 @@ export function PrivateSaleInterface({ className }: SectionProps) {
           </div>
           <div className="text-red-error mt-2" style={{ fontSize: calcRem(12) }}>
             {errorInput}
+            {allowanceErrorMessage}
           </div>
           <div className="text-center my-2 opacity-40" style={{ fontSize: calcRem(12) }}>
             You will get
@@ -260,9 +266,11 @@ export function PrivateSaleInterface({ className }: SectionProps) {
       <ActionButton
         disabled={
           !isWhitelisted ||
-          userBnbAllowance == '0' ||
+          userBnbAllowance === '0' ||
           (!useMyAddress && userRecipientAddress === '') ||
-          isInvalidAddress
+          isInvalidAddress ||
+          allowanceErrorMessage !== '' ||
+          errorInput !== ''
         }
         click={() => purchase()}
       >

src/hooks/useNumberValue.ts

@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+export default function useNumberValue(): [
+    value: string,
+    onValueChange: (value: string) => Promise<void>,
+    errorMessage: string
+] {
+
+    const [value, setValue] = useState<string>('0')
+    const [errorMessage, setErrorMessage] = useState<string>('')
+
+    function onValueChange(value: string): Promise<void> {
+
+        // Return promise to be able to execute code after value has changed
+        return new Promise<void>((resolve, reject) => {
+            // Remplace ',' with '.' for US agreements
+            const val = value === '' ? '0' : value.replace(',', '.')
+            let regex = new RegExp('^([0-9]*[.])?[0-9]+$')
+            if (regex.test(val)) {
+                setErrorMessage('')
+                // parseFloat() is used to remove 0 before number
+                setValue(parseFloat(val).toString()) 
+                resolve()
+            } 
+            // Value is not a correct number
+            else {
+                setErrorMessage('Wrong number format')
+                // Reject the promise
+                reject()
+            }
+        })
+    }
+
+    return [value, onValueChange, errorMessage]
+
+}

src/pages/tutorials/index.tsx

@@ -5,8 +5,8 @@ import { TutorialsHeader } from '../../components/tutorials/TutorialsHeader'
 export default function Tutorials() {
   return (
     <Page>
-        <TutorialsHeader className="container mt-32"/>
-        <TutorialsPane className="mt-10" />
+      <TutorialsHeader className="container mt-32" />
+      <TutorialsPane className="mt-10" />
     </Page>
   )
 }