From dd5589a6631eb909db5f7894a9ec61ac027579e9 Mon Sep 17 00:00:00 2001
From: "nature.xie" <nature@ref.finance>
Date: Fri, 22 Dec 2023 22:49:16 +0800
Subject: [PATCH] repay modal ui

---
 components/Modal/components.tsx | 16 +++++++++++-----
 components/Modal/index.tsx      |  7 ++++---
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/Modal/components.tsx b/components/Modal/components.tsx
index 8b9bc9b4..d1e1f5ef 100644
--- 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
index 924cea66..8652a769 100644
--- 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,7 +111,7 @@ 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}
@@ -118,7 +119,7 @@ const Modal = () => {
               setSelectedCollateralType={setSelectedCollateralType}
             />
           ) : null}
-
+          <RepayTab asset={asset} />
           <Controls
             amount={amount}
             available={available}