Merge pull request #6 from zka-fi/update-number-input

Fix number input and add favicon

src/components/Display/DebtDisplay.tsx

@@ -1,30 +1,16 @@
-import { useAccount, useContractRead } from "wagmi"
-import { useZkafiContractAddressHook } from "../../hooks/useContractAddress.hook"
-import { zkafiABI } from "../../contracts/zkafi"
-import { formatted } from "../../utils/ether-big-number"
 import { Typography } from "@mui/material"
 
 export function DebtDisplay ({
-  onChange
+  debt
 }: any) {
-  const { address } = useAccount()
-  const zkafiAddress = useZkafiContractAddressHook()
-  const { data: debt } = useContractRead({
-    address: zkafiAddress,
-    abi: zkafiABI,
-    functionName: 'calculateRepayAmount',
-    args: [address]
-  })
-  const value = debt !== undefined ? formatted(debt).toString() : null
-  onChange(value)
   return (
     <Typography
       sx={{
         fontSize: '18px',
         fontWeight: 'bold'
       }}
     >
-      current debt: {value}
+      current debt: {debt}
     </Typography>
   )
 }

src/components/Display/GetMaxBalanceDisplay.tsx

@@ -13,11 +13,7 @@ export function GetMaxBalanceDisplay({
         <TextField 
           placeholder="Amount"
           value={amount}
-          onKeyPress={(event) => {
-            if (!/[0-9]/.test(event.key)) {
-              event.preventDefault();
-            }
-          }}
+          type="number"
           onChange={(e) => {
             const value = e.target.value
             setAmount(Number(value))

src/components/Form/RepayForm.tsx

@@ -9,14 +9,15 @@ import { DebtDisplay } from "../Display/DebtDisplay"
 import { CurrentBalanceDisplay } from "../Display/CurrentBalanceDisplay"
 import { useCurrentBalance } from "../../hooks/current-balance.hook"
 import { BigNumber } from "ethers"
+import { zkafiABI } from "../../contracts/zkafi"
+import { formatted } from "../../utils/ether-big-number"
 
 export function RepayForm ({
   loading,
   onStart,
   onComplete
 }: any) {
   const [amount, setAmount] = useState<number>()
-  const [debt, setDebt] = useState<number>()
   const [transactionLoading, setTransactionLoading] = useState(false)
   const { address } = useAccount()
   const balance = useCurrentBalance()
@@ -28,6 +29,13 @@ export function RepayForm ({
     functionName: 'allowance',
     args: [address!, zkafiAddress]
   })
+  const { data: debtValue } = useContractRead({
+    address: zkafiAddress,
+    abi: zkafiABI,
+    functionName: 'calculateRepayAmount',
+    args: [address]
+  })
+  const debt = debtValue !== undefined ? formatted(debtValue).toString() : null
   return (
     <Grid container justifyContent="center" rowSpacing={4}>
       <Grid container item>
@@ -37,11 +45,7 @@ export function RepayForm ({
         {
           transactionLoading || loading ? 
           <Skeleton variant="rectangular" width={260} height={10} />
-          : <DebtDisplay 
-              onChange={(debt: any) => {
-                setDebt(debt)
-              }}
-            />
+          : <DebtDisplay debt={debt}/>
         }
       </Grid>
       <Grid container item xs={12}>
@@ -51,6 +55,7 @@ export function RepayForm ({
               <OutlinedInput 
                 value={amount}
                 placeholder="enter repay amount"
+                type="number"
                 onChange={(e) => {
                   setAmount(Number(e.target.value))
                 }}
@@ -74,7 +79,7 @@ export function RepayForm ({
                   textTransform: 'none',
                 }}
                 onClick={() => {
-                  setAmount(debt)
+                  setAmount(Number(debt))
                 }}
               >
                 Max

src/pages/_app.tsx

@@ -36,6 +36,7 @@ function App({ Component, pageProps }: AppProps) {
       <ConnectKitProvider>
         <NextHead>
           <title>Zkafi</title>
+          <link rel="shortcut icon" href="/favicon.ico" />
         </NextHead>
         <ApplicationBar />
         <Container>

src/styles/global.css

@@ -14,4 +14,15 @@ body {
   to {
     transform: rotate(360deg);
   }
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
 }