feat: UI changes + calculations

Plenty-network · Feb 2, 2024 · 1aa264d · 1aa264d
1 parent 9a0294c
commit 1aa264d
Show file tree

Hide file tree

Showing 12 changed files with 182 additions and 156 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,49 +11,41 @@ import {
   polygonZkEvmTestnet,
   mantleTestnet,
   scrollTestnet,
-  baseGoerli,
+  baseGoerli
 } from "wagmi/chains";
 import { publicProvider } from "wagmi/providers/public";
 import HomePage from "./pages/HomePage";
 import { AppProvider } from "./context/AppContext";
-const { chains, publicClient } = configureChains(
-  [
-    sepolia,
-    arbitrumSepolia,
-    polygonZkEvmTestnet,
-    mantleTestnet,
-    scrollTestnet,
-    baseGoerli,
-  ],
-  [publicProvider()]
-);
+const { chains, publicClient } = configureChains([arbitrumSepolia], [publicProvider()]);
 
 const { connectors } = getDefaultWallets({
   appName: "Neper Finance",
   projectId: "YOUR_PROJECT_ID",
-  chains,
+  chains
 });
 
 const wagmiConfig = createConfig({
   autoConnect: true,
   connectors,
-  publicClient,
+  publicClient
 });
 
 const App = () => {
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <AppProvider>
-        <RainbowKitProvider chains={chains}>
-          <BrowserRouter>
-            <Routes>
-              <Route path="/" Component={Landing} />
-              <Route path="/dapp" element={<HomePage />} />
-            </Routes>
-          </BrowserRouter>
-        </RainbowKitProvider>
-      </AppProvider>
-    </WagmiConfig>
+    <div className="bg-gradient-to-b from-purple-800 via-gray-950 to-black ">
+      <WagmiConfig config={wagmiConfig}>
+        <AppProvider>
+          <RainbowKitProvider chains={chains}>
+            <BrowserRouter>
+              <Routes>
+                <Route path="/" Component={HomePage} />
+                <Route path="/dapp" element={<HomePage />} />
+              </Routes>
+            </BrowserRouter>
+          </RainbowKitProvider>
+        </AppProvider>
+      </WagmiConfig>
+    </div>
   );
 };
 

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -40,11 +40,11 @@ interface NetworkOption {
 
 const options: { [key: string]: NetworkOption } = {};
 Object.keys(CHAINS).map(
-  (chainId) =>
+  chainId =>
     (options[chainId] = {
       label: CHAINS[chainId].name.split(" ")[0],
       value: chainId,
-      imgSrc: CHAINS[chainId].iconUrl,
+      imgSrc: CHAINS[chainId].iconUrl
     })
 );
 
@@ -53,22 +53,22 @@ const customStyles: StylesConfig<NetworkOption, false> = {
     ...provided,
     color: "black",
     backgroundColor: state.isSelected || state.isFocused ? "#F8CC81" : "white",
-    cursor: "pointer",
+    cursor: "pointer"
   }),
-  control: (provided) => ({
+  control: provided => ({
     ...provided,
-    cursor: "pointer",
+    cursor: "pointer"
   }),
-  input: (provided) => ({
+  input: provided => ({
     ...provided,
-    color: "transparent",
-  }),
+    color: "transparent"
+  })
 };
 
 const Navbar = () => {
   const { address, isConnected } = useAccount();
 
-  const { network } = useTypedSelector((state) => state.infra);
+  const { network } = useTypedSelector(state => state.infra);
   const { switchNetwork, fetchData, setDataLoading } = useActions();
 
   /*   useEffect(() => {
@@ -83,7 +83,6 @@ const Navbar = () => {
   useEffect(() => {
     (async () => {
       setClient(network);
-      //await setContracts(network); //todo: come to this later
       setDataLoading();
       fetchData(address);
     })();
@@ -109,11 +108,11 @@ const Navbar = () => {
   };
 
   return (
-    <div className="text-black py-4 px-28 flex justify-between items-center z-0">
+    <div className="text-black py-4 px-10 md:px-28 flex justify-between items-center z-0">
       <Link to="/">
         <div className="flex items-center">
           <img src="/brand.png" alt="brand" className="w-10 mr-2" />
-          <span className="text-2xl font-bold">Neper Finance</span>
+          <span className="text-2xl font-bold text-white hidden md:block">Neper Finance</span>
         </div>
       </Link>
 

diff --git a/src/components/Params.tsx b/src/components/Params.tsx
@@ -1,30 +1,23 @@
 import { Params as ParamsType } from "../utils/types";
 
-type ParamsProps = ParamsType;
+type ParamsProps = {
+  mcr: string;
+  baseRate: string;
+  totalColl: string;
+  totalDebt: string;
+  vaultCount: string;
+};
 
-const Params = ({
-  mcr,
-  borrowRate,
-  totalColl,
-  totalDebt,
-  vaultCount,
-}: ParamsProps) => {
+const Params = ({ mcr, baseRate, totalColl, totalDebt, vaultCount }: ParamsProps) => {
   return (
-    <div
-      className="bg-white shadow-lg rounded-lg p-6 bg-gradient-to-r from-blue-200 to-blue-400"
-      style={{
-        width: "45%",
-      }}
-    >
-      <h3 className="text-xl mb-2 font-semibold border-b pb-2">
-        Neper statistics
-      </h3>
+    <div className="bg-white shadow-lg rounded-lg p-6 bg-gradient-to-r from-blue-200 to-blue-400 w-full md:w-[45%]">
+      <h3 className="text-xl mb-2 font-semibold border-b pb-2">Neper statistics</h3>
       <div className="mb-6">
         <h4 className="font-bold text-lg mb-3">Protocol</h4>
         <ul>
           <li className="flex justify-between py-1">
             <span>Borrowing Fee</span>
-            <span className="font-medium">{borrowRate} %</span>
+            <span className="font-medium">{(parseFloat(baseRate) + 0.5).toFixed(3)} %</span>
           </li>
           <li className="flex justify-between py-1">
             <span>Vaults</span>
@@ -36,15 +29,17 @@ const Params = ({
           </li>
           <li className="flex justify-between py-1">
             <span>Total Collateral Ratio</span>
-            <span className="font-medium">{mcr}%</span>
+            <span className="font-medium">
+              {((parseFloat(totalColl) * 40000) / parseFloat(totalDebt)).toFixed(2)}%
+            </span>
           </li>
           <li className="flex justify-between py-1">
             <span>Current MCR</span>
-            <span className="font-medium">{mcr}</span>
+            <span className="font-medium">{mcr}%</span>
           </li>
           <li className="flex justify-between py-1">
             <span>Total Collateral</span>
-            <span className="font-medium">${totalColl}</span>
+            <span className="font-medium">{totalColl} WBTC</span>
           </li>
           <li className="flex justify-between py-1">
             <span>Total Debt</span>

diff --git a/src/components/StabilityPool.tsx b/src/components/StabilityPool.tsx
@@ -4,35 +4,25 @@ import { toast } from "react-hot-toast";
 import Button from "./Button";
 import Modal from "./modals/Modal";
 
-import { Vault as VaultType } from "../utils/types";
 import { useActions } from "../hooks/useActions";
 
-import { useAccount } from "wagmi";
-import EmptyVault from "./EmptyVault";
 import { useAppContext } from "../context/AppContext";
 
 const StabilityPool = ({}) => {
-  const [createVaultModalOpen, setCreateVaultModalOpen] = useState(false);
   const [withdrawModalOpen, setWithdrawModalOpen] = useState(false);
-  const [createVaultInput, setCreateVaultInput] = useState("");
-  const [createVaultError, setCreateVaultError] = useState(false);
+
   const [stakeModalOpen, setStakeModalOpen] = useState(false);
-  const [withdrawCollateralModalOpen, setWithdrawCollateralModalOpen] =
-    useState(false);
-  const [mintDebtModalOpen, setMintDebtModalOpen] = useState(false);
-  const [returnDebtModalOpen, setReturnDebtModalOpen] = useState(false);
+  const [withdrawCollateralModalOpen, setWithdrawCollateralModalOpen] = useState(false);
 
   const [stakeInput, setStakeInput] = useState("");
   const [withdrawInput, setWithdrawInput] = useState("");
 
   const [stakeError, setStakeError] = useState(false);
   const [withdrawError, setWithdrawError] = useState(false);
 
-  const { fetchData, setLoader, setDataLoading } = useActions();
-  const { address } = useAccount();
+  const { setLoader } = useActions();
 
-  const { depositStablityPool, withdrawStabilityPool, fetchVault } =
-    useAppContext();
+  const { depositStablityPool, withdrawStabilityPool, fetchVault } = useAppContext();
 
   const onStake = async () => {
     try {
@@ -68,21 +58,21 @@ const StabilityPool = ({}) => {
   return (
     <div>
       {
-        <div className="text-xl rounded-md bg-beige">
+        <div className="text-xl rounded-md bg-white">
           <div className="px-6 py-2 bg-gradient-to-r from-blue-400 to-blue-200">
             <h2 className="text-xl font-bold">Stability Pool</h2>
           </div>
           <div className="flex items-center justify-between gap-8 px-8 py-4">
             <div>
-              <div className="font-medium mb-1">APR</div>
-              <div>{10} %</div>
+              <div className="font-medium mb-1">Unclaimed WBTC</div>
+              <div>{0.0} WBTC</div>
             </div>
             <div>
               <div className="font-medium mb-1">pUSD Staked</div>
               <div>{0}</div>
             </div>
           </div>
-          <div className="h-0.5 bg-slate-300"></div>
+          <div className="h-0.5"></div>
           <div className="flex gap-2 px-8 py-3">
             <Button onClick={() => setStakeModalOpen(true)}>
               <div className="text-sm px-3 py-2.5">Stake</div>
@@ -102,7 +92,7 @@ const StabilityPool = ({}) => {
         value={stakeInput}
         onClose={() => setStakeModalOpen(false)}
         onSubmit={onStake}
-        onChange={(v) => setStakeInput(v)}
+        onChange={v => setStakeInput(v)}
       />
       <Modal
         show={withdrawModalOpen}
@@ -113,7 +103,7 @@ const StabilityPool = ({}) => {
         value={withdrawInput}
         onClose={() => setWithdrawCollateralModalOpen(false)}
         onSubmit={onWithdraw}
-        onChange={(v) => setWithdrawInput(v)}
+        onChange={v => setWithdrawInput(v)}
       />
     </div>
   );

diff --git a/src/components/Vault.tsx b/src/components/Vault.tsx
@@ -119,11 +119,11 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va
       {!isVault ? (
         <EmptyVault openModal={setCreateVaultModalOpen} />
       ) : (
-        <div className="text-xl rounded-md bg-beige">
+        <div className="text-xl rounded-md bg-white">
           <div className="px-6 py-2 bg-gradient-to-r from-blue-400 to-blue-200">
             <h2 className="text-xl font-bold">Vault</h2>
           </div>
-          <div className="flex items-center justify-between gap-8 px-8 py-4">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-8 px-8 py-4">
             <div>
               <div className="font-medium mb-1">Collateral Ratio</div>
               <div>{collRatio} %</div>
@@ -141,8 +141,8 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va
               <div>$ {liquidationAt}</div>
             </div>
           </div>
-          <div className="h-0.5 bg-slate-300"></div>
-          <div className="flex gap-2 px-8 py-3">
+          <div className="h-0.5 "></div>
+          <div className="flex flex-col md:flex-row gap-2 px-8 py-3">
             <Button onClick={() => setAddCollateralModalOpen(true)}>
               <div className="text-sm px-3 py-2.5">Add Collateral</div>
             </Button>
@@ -158,6 +158,7 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va
           </div>
         </div>
       )}
+
       <Modal
         show={addCollateralModalOpen}
         heading="Add Collateral"

diff --git a/src/components/modals/Modal.tsx b/src/components/modals/Modal.tsx
@@ -25,39 +25,31 @@ const Modal = ({
   placeholder,
   onChange,
   onClose,
-  onSubmit,
+  onSubmit
 }: ModalProps) => {
   if (!show) return null;
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-70 flex justify-center items-center z-400">
-      <div className="bg-beige p-4 rounded-md w-1/3 shadow-lg">
+      <div className="p-4 bg-white rounded-md w-3/4 md:w-1/3 shadow-lg">
         <div className="flex items-center justify-between mb-6">
           <h2 className="text-lg font-medium">{heading}</h2>
-          <i
-            onClick={onClose}
-            className="hover:cursor-pointer bi bi-x text-2xl"
-          />
+          <i onClick={onClose} className="hover:cursor-pointer bi bi-x text-2xl" />
         </div>
         <div className="mb-4">
-          <label
-            htmlFor="input1"
-            className="block text-gray-700 text-sm font-bold mb-2"
-          >
+          <label htmlFor="input1" className="block text-gray-700 text-sm font-bold mb-2">
             {label}
           </label>
           <input
             type="number"
             id="input1"
             placeholder={placeholder}
-            onChange={(e) => onChange(e.target.value)}
+            onChange={e => onChange(e.target.value)}
             value={value}
             className="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none"
           />
           {subLabel && <span className="text-xs">{subLabel}</span>}
-          {error && (
-            <div className="text-base mt-3 text-red-600">Invalid amount</div>
-          )}
+          {error && <div className="text-base mt-3 text-red-600">Invalid amount</div>}
         </div>
         <Button onClick={onSubmit}>
           <div className="px-3 py-2.5 text-sm">{heading}</div>