Brian

src/components/Bar/AppBar.tsx

@@ -18,16 +18,16 @@ import Image from "next/image";
 
 const pages = [
   {
-    label: 'Dai',
-    link: '/dai',
+    label: 'Lend',
+    link: '/lend',
   },
   {
-    label: 'Bank',
-    link: '/merkle-tree'
+    label: 'Proof',
+    link: '/proof'
   },
   {
     label: 'Bond',
-    link: '/lender'
+    link: '/bond'
   },
 ]
 
@@ -46,8 +46,8 @@ export function ApplicationBar() {
     router.push(link)
   }
   return (
-    <AppBar position="static" style={{
-      backgroundColor: '#FFFFFF'
+    <AppBar position="static" elevation={0} style={{
+      backgroundColor: '#f1c27d'
     }}>
       <Container maxWidth="xl">
         <Toolbar 
@@ -64,7 +64,7 @@ export function ApplicationBar() {
             height={90}
             onClick={(e) => redirect(e, '/')}
           />
-          ({
+          {
             isConnected && !isReconnecting ? <Box sx={{ flexGrow: 1}}>
               <Tabs value={value} onChange={handleChange} centered>
                 {pages.map((page) => (
@@ -81,7 +81,7 @@ export function ApplicationBar() {
                 ))}
               </Tabs>
             </Box> : null
-          })
+          }
 
           <Box sx={{ flexGrow: 0 }}>
               <ConnectButton />

src/components/Button/RepayButton.tsx

@@ -23,6 +23,12 @@ export function RepayButton ({ amount }: any) {
       variant="contained" 
       color="success" 
       disabled={loading}
+      style={{
+        textTransform: 'none',
+      }}
+      sx={{
+        width: '120px',
+      }}
       onClick={()=> {
         setLoading(true)
         repay()
@@ -31,7 +37,7 @@ export function RepayButton ({ amount }: any) {
           })
       }}
     >
-      Repay!
+      Repay
     </Button>
   )
 }

src/components/Card/BondCard.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, CardContent, Grid, TextField, Typography } from "@mui/material";
+import { Button, Card, CardContent, Grid, TextField, Typography, alpha } from "@mui/material";
 import { erc20ABI, useAccount, useBalance, useContractRead } from "wagmi";
 import { useState } from "react";
 import { prepareWriteContract, writeContract} from '@wagmi/core'
@@ -9,6 +9,7 @@ import { ApproveButton } from "../Button/ApproveButton";
 import { BigNumber } from "ethers";
 import { formatted, invokeFormat } from "../../utils/ether-big-number";
 import { CurrentBalanceDisplay } from "../Display/CurrentBalanceDisplay";
+import { GetMaxBalanceDisplay } from "../Display/GetMaxBalanceDisplay";
 
 export function BondCard () {
   const daiAddress = useDaiContractAddressHook()
@@ -37,56 +38,40 @@ export function BondCard () {
   return (
     <Card sx={{
       p: 5,
-      backgroundColor: '#dcc5ad'
-    }}>
-      <Card 
-        sx={{
-          p: 2,
-          mb: 3
-        }}
-        style={{
-          backgroundColor: '#daa608'
-        }}
-      >
-        <Grid container rowSpacing={2}>
-          <Grid item container justifyContent="space-between">
-            <Grid item>
-              <Typography sx={{
-                fontSize: '24px'
+      backgroundColor: alpha('#5B3700', 0.15),
+      boxShadow: "0px 0px",
+      width: '50%',
+    }}
+    style={{ borderRadius: "20px" }}>
+        <Grid container rowSpacing={2} sx={{padding: '0 0 20px 0'}}>
+          <Grid item container alignItems={'center'} justifyContent="space-between">
+            <div style={{ display: 'flex' }}>
+              <Image src="/dai.png" width={30} height={30} style={{padding: '0 10px 0 0'}} alt="token"/>  
+              <Typography display={'inline-block'} sx={{
+                fontSize: '20px'
               }}>
-                Bonding Dai
+                DAI
               </Typography>
-            </Grid>
+            </div>
             <Grid item>
               <CurrentBalanceDisplay />
             </Grid>
           </Grid>
-          <Grid item container xs={10}>
-            <Image src="/dai.png" width={56} height={56} alt="token"/>
-            <TextField 
-              label="Amount"
-              type="number"
-              placeholder="How many dai will you provide"
-              onChange={(e) => {
-                setAmount(Number(e.target.value))
-              }}
-              sx={{
-                ml: '8px',
-                width: '80%'
-              }}
-            />
-          </Grid>
         </Grid>
-      </Card>
+        <GetMaxBalanceDisplay /> 
       <Grid container item xs={12}>
         {
           !daiToZkafiAllowance?.lte(0) ?
           (<>
             <Button
                 variant="contained"
                 disabled={writing}
+                disableElevation
                 style={{
-                  width: '100%'
+                  width: '100%',
+                  backgroundColor: '#6C221C',
+                  color: '#ffffff',
+                  textTransform: 'none',
                 }}
               onClick={() => 
                 bond()
@@ -95,7 +80,7 @@ export function BondCard () {
                   })
               }
             >
-              Bond!
+              Bond
             </Button>
           </>)
           : <ApproveButton isApprove={!daiToZkafiAllowance?.lte(0)}/>

src/components/Display/CurrentBalanceDisplay.tsx

@@ -19,7 +19,7 @@ export function CurrentBalanceDisplay ({ size = '18px' }: any) {
   return (
     <Typography
       sx={{
-        fontWeight: 'bold',
+        fontWeight: 'normal',
         fontSize: size,
       }}
     >

src/components/Display/GetMaxBalanceDisplay.tsx

@@ -0,0 +1,67 @@
+import { useAccount, useContractRead, useToken } from "wagmi";
+import { useDaiContractAddressHook } from "../../hooks/useContractAddress.hook";
+import { DaiABI } from "../../contracts/dai";
+import { Button, Grid, TextField, alpha } from "@mui/material";
+import { useState } from "react";
+import { formatted } from "../../utils/ether-big-number";
+
+export function GetMaxBalanceDisplay() {
+  const [amount, setAmount] = useState(0)
+  const [submitAmount, setSubmitAmount] = useState(0)
+  const { address } = useAccount()
+  const daiAddress = useDaiContractAddressHook()
+  const { data: balance } = useContractRead({
+    address: daiAddress,
+    abi: DaiABI,
+    functionName: 'balanceOf',
+    args: [address]
+  })
+  // return balance
+  // return (
+  //   <TextField 
+  //     label="Amount"
+  //     type="number"
+  //     value={balance}
+  //     sx={{
+  //       ml: '0px',
+  //       width: '100%'
+  //     }}
+  //   />
+  // )
+  return (
+    <Grid container item alignItems={'center'} sx={{padding: '0 0 20px 0'}}>
+      <Grid item xs={9}> 
+        <TextField 
+          placeholder="Amount"
+          type="number"
+          value={amount}
+          onChange={(e) => {
+            setAmount(Number(e.target.value))
+          }}
+          sx={{
+            ml: '0px',
+            width: '100%'
+          }}
+        />
+      </Grid>
+      <Grid item xs={1}></Grid>
+      <Grid item xs={2}>
+        <Button 
+          variant="outlined"
+          size="small"
+          sx={{
+            borderRadius: '20px',
+          }}
+          style={{
+            color: alpha("#6C221C", 0.8),
+            borderColor: alpha("#6C221C", 0.8),
+            textTransform: 'none',
+          }}
+          onClick={() => setAmount(Number(formatted(balance)))}
+        >
+          Max
+        </Button>
+      </Grid>
+    </Grid>
+  )
+}

src/components/Display/TotalPoolDisplay.tsx

@@ -22,7 +22,7 @@ export function TotalPoolDisplay () {
         fontWeight: 'bold'
       }}
     >
-      total pool: {totalPool ? formatted(totalPool).toString() : null} Dai
+      Total pool: {totalPool ? formatted(totalPool).toString() : null} DAI
     </Typography>
   )
 }

src/components/Form/ApplyForm.tsx

@@ -26,13 +26,23 @@ export function ApplyForm () {
       })
   }
   return (
-    <Grid container rowSpacing={3} padding={3}>
+    <Grid container rowSpacing={3} padding={5}>
       <Grid item container justifyContent="center">
         {
           isInit ? null : 
           <Button
             variant="contained"
             disabled={isInit}
+            style={{
+              width: '300px',
+              height: '70px',
+              backgroundColor: '#6C221C',
+              color: '#ffffff',
+              textTransform: 'none',
+            }}
+            sx={{
+              borderRadius: '15px',
+            }}
             onClick={() => {
               callAPI()
             }}

src/components/Form/BorrowForm.tsx

@@ -1,4 +1,4 @@
-import { Button, CircularProgress, Grid, TextField } from "@mui/material";
+import { Button, CircularProgress, Grid, TextField, alpha } from "@mui/material";
 import { useState } from "react";
 import { LoadingContent } from "../Loading/LoadingContent";
 import { ApproveButton } from "../Button/ApproveButton";
@@ -9,6 +9,7 @@ import { zkafiABI } from "../../contracts/zkafi";
 import { BigNumber } from "ethers";
 import { formatted } from "../../utils/ether-big-number";
 import { TotalPoolDisplay } from "../Display/TotalPoolDisplay";
+import { purple } from '@mui/material/colors';
 
 export function BorrowForm ({ onSubmit, loading }: any) {
   const [amount, setAmount] = useState(0)
@@ -21,8 +22,16 @@ export function BorrowForm ({ onSubmit, loading }: any) {
       <Grid container item columnSpacing={2} alignItems="center">
         <Grid item>
           <Button
-            variant="contained"
+            variant="outlined"
             component="label"
+            style={{
+              color: alpha("#6C221C", 0.8),
+              borderColor: alpha("#6C221C", 0.8),
+              textTransform: 'none',
+            }}
+            sx={{
+              width: '120px',
+            }}
           >
             Upload File
             <input
@@ -71,6 +80,13 @@ export function BorrowForm ({ onSubmit, loading }: any) {
           <Button
             variant="contained"
             disabled={loading}
+            style={{
+              backgroundColor: alpha("#6C221C", 0.8),
+              textTransform: 'none',
+            }}
+            sx={{
+              width: '120px',
+            }}
             onClick={() => {
               onSubmit({
                 amount,
@@ -82,9 +98,9 @@ export function BorrowForm ({ onSubmit, loading }: any) {
               loading ? (
                 <>
                   Borrowing...
-                  <CircularProgress size={20} color="secondary"/>
+                  <CircularProgress size={20} sx={{ backgroundColor: alpha("#6C221C", 0.8)}}/>
                 </> )
-                : 'Borrow!'
+                : 'Borrow'
             } 
           </Button>
         </Grid>

src/components/Form/RepayForm.tsx

@@ -1,4 +1,4 @@
-import { Button, FormControl, Grid, Input, OutlinedInput, TextField } from "@mui/material"
+import { Button, FormControl, Grid, Input, OutlinedInput, TextField, alpha } from "@mui/material"
 import { RepayButton } from "../Button/RepayButton"
 import { ApproveButton } from "../Button/ApproveButton"
 import { useState } from "react"
@@ -28,8 +28,8 @@ export function RepayForm ({loading}:any) {
       </Grid>
       <Grid container item xs={12}>
         <FormControl fullWidth={true} variant="outlined">
-          <Grid container item >
-            <Grid item xs={10}>
+          <Grid container item alignItems={'center'}>
+            <Grid item xs={9}>
               <OutlinedInput 
                 type="number"
                 placeholder="enter repay amount"
@@ -42,15 +42,22 @@ export function RepayForm ({loading}:any) {
                 }}
               />
             </Grid>
+            <Grid item xs={1}></Grid>
             <Grid item xs={2}>
               <Button 
-                variant="contained"
+                variant="outlined"
                 size="small"
                 sx={{
-                  borderRadius: '10px',
-
+                  borderRadius: '20px',
                 }}
-              >Max</Button>
+                style={{
+                  color: alpha("#6C221C", 0.8),
+                  borderColor: alpha("#6C221C", 0.8),
+                  textTransform: 'none',
+                }}
+              >
+                Max
+              </Button>
             </Grid>
           </Grid>
         </FormControl>