repay modal ui

burrowHQ · Dec 22, 2023 · dd5589a · dd5589a
1 parent 127879f
commit dd5589a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/components/Modal/components.tsx b/components/Modal/components.tsx
@@ -70,11 +70,8 @@ export const CloseButton = ({ onClose, ...props }) => (
   </Box>
 );
 
-export const TokenInfo = ({ apy, asset, onClose }) => {
-  const { action, symbol, tokenId, icon, depositRewards, borrowRewards } = asset;
-  const page = ["Withdraw", "Adjust", "Supply"].includes(action) ? "deposit" : "borrow";
-  const isRepay = action === "Repay";
-  const { degenMode, isRepayFromDeposits, setRepayFromDeposits } = useDegenMode();
+export const ModalTitle = ({ asset, onClose }) => {
+  const { action, symbol } = asset;
   return (
     <div className="mb-[20px]">
       <div className="flex items-center justify-between text-lg text-white">
@@ -83,6 +80,15 @@ export const TokenInfo = ({ apy, asset, onClose }) => {
         </div>
         <CloseIcon onClick={onClose} />
       </div>
+    </div>
+  );
+};
+export const RepayTab = ({ asset }) => {
+  const { action } = asset;
+  const isRepay = action === "Repay";
+  const { degenMode, isRepayFromDeposits, setRepayFromDeposits } = useDegenMode();
+  return (
+    <div className="mb-[20px]">
       {isRepay && degenMode.enabled && (
         <div className="flex items-center justify-between border border-dark-500 rounded-md bg-dark-600 h-12 mt-5 p-1.5">
           <span

diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
@@ -22,7 +22,8 @@ import { Wrapper } from "./style";
 import { getModalData } from "./utils";
 import {
   NotConnected,
-  TokenInfo,
+  ModalTitle,
+  RepayTab,
   HealthFactor,
   Rates,
   Alerts,
@@ -110,15 +111,15 @@ const Modal = () => {
       >
         <Box sx={{ p: ["20px", "20px"] }}>
           {!accountId && <NotConnected />}
-          <TokenInfo apy={apy} asset={asset} onClose={handleClose} />
+          <ModalTitle asset={asset} onClose={handleClose} />
           {action === "Borrow" || action === "Repay" ? (
             <CollateralTypeSelector
               maxBorrowAmountPositions={maxBorrowAmountPositions}
               selectedCollateralType={selectedCollateralType}
               setSelectedCollateralType={setSelectedCollateralType}
             />
           ) : null}
-
+          <RepayTab asset={asset} />
           <Controls
             amount={amount}
             available={available}