Skip to content

Commit

Permalink
feat: return missing debt repay guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZakMooney
ZakMooney committed Jun 5, 2024
1 parent 9f47395 commit 55090cc
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 159 deletions.
7 changes: 2 additions & 5 deletions src/components/vault/BorrowModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ const BorrowModal = (props) => {
</div>
</Modal>
</>
)
);
}

return (
Expand Down Expand Up @@ -210,10 +210,7 @@ const BorrowModal = (props) => {
</Button>
</div>
</div>
<div class="divider md:divider-horizontal" />
<div className="flex-1">
<EurosCompare />
</div>
<EurosCompare />
</div>
</Modal>
</>
Expand Down
167 changes: 86 additions & 81 deletions src/components/vault/EurosCompare.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,88 +80,93 @@ const EurosCompare = () => {

if (currentDiscount < 0) {
return (
<div>
<div className="mb-2">
<Typography
variant="h2"
className="mb-1"
>
Repay Your Debt for a Discount
</Typography>
<Typography
variant="p"
>
Take advantage of market conditions to reduce your EUROs debt.
<br/>
When the EUROs Value dips below the FX market price of EUR, you have the opportunity to repay your debt at discount. Act swiftly to lock in your savings and strengthen your financial position.
</Typography>
</div>

<div className="mb-2">
<Typography
variant="h3"
>
Current Savings Opportunity:
</Typography>
<div
className="flex justify-between align-center"
>
<Typography
variant="p"
className="flex-1"
>
EUR FX market price (USD):
</Typography>
<Typography
variant="p"
className="flex-1"
>
${chainPrice}
</Typography>
</div>

<div
className="flex justify-between align-center"
>
<Typography
variant="p"
className="flex-1"
>
EUROs price (USD):
</Typography>
<Typography
variant="p"
className="flex-1"
>
${poolPrice}
</Typography>
</div>

<div
className="flex justify-between align-center"
>
<Typography
variant="p"
className="flex-1"
>
Current discount %:
</Typography>
<Typography
variant="p"
className="flex-1"
>
{showDiscount.toFixed(2)}%
</Typography>
<div className="flex flex-col md:flex-row flex-1">
<div className="flex flex-col md:flex-row">
<div class="divider md:divider-horizontal" />
<div>
<div className="mb-2">
<Typography
variant="h2"
className="mb-1"
>
Repay Your Debt for a Discount
</Typography>
<Typography
variant="p"
>
Take advantage of market conditions to reduce your EUROs debt.
<br/>
When the EUROs Value dips below the FX market price of EUR, you have the opportunity to repay your debt at discount. Act swiftly to lock in your savings and strengthen your financial position.
</Typography>
</div>

<div className="mb-2">
<Typography
variant="h3"
>
Current Savings Opportunity:
</Typography>
<div
className="flex justify-between align-center"
>
<Typography
variant="p"
className="flex-1"
>
EUR FX market price (USD):
</Typography>
<Typography
variant="p"
className="flex-1"
>
${chainPrice}
</Typography>
</div>

<div
className="flex justify-between align-center"
>
<Typography
variant="p"
className="flex-1"
>
EUROs price (USD):
</Typography>
<Typography
variant="p"
className="flex-1"
>
${poolPrice}
</Typography>
</div>

<div
className="flex justify-between align-center"
>
<Typography
variant="p"
className="flex-1"
>
Current discount %:
</Typography>
<Typography
variant="p"
className="flex-1"
>
{showDiscount.toFixed(2)}%
</Typography>
</div>

</div>

<div>
<Typography
variant="h3"
>
Act Now: Save {showDiscount.toFixed(2)}% on Repayment
</Typography>
</div>
</div>

</div>

<div>
<Typography
variant="h3"
>
Act Now: Save {showDiscount.toFixed(2)}% on Repayment
</Typography>
</div>
</div>
);
Expand Down
153 changes: 80 additions & 73 deletions src/components/vault/RepayModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
} from '@heroicons/react/24/outline';

import VaultHealth from "./VaultHealth";
import EurosCompare from "./EurosCompare";

import Modal from "../ui/Modal";
import Button from "../ui/Button";
Expand Down Expand Up @@ -157,91 +158,97 @@ const RepayModal = (props) => {
<Modal
open={open}
closeModal={closeModal}
wide={true}
>
<Typography variant="h2" className="card-title">
<ArrowUpCircleIcon className="mr-2 h-6 w-6 inline-block"/>
Repaying EUROs
</Typography>
<div className="flex flex-col md:flex-row">
<div className="flex flex-col flex-1">
<Typography variant="h2" className="card-title">
<ArrowUpCircleIcon className="mr-2 h-6 w-6 inline-block"/>
Repaying EUROs
</Typography>

<div className="flex justify-between">
<Typography
variant="p"
>
Repay Amount
</Typography>
<Typography
variant="p"
className="text-right"
>
Remaining: {getInputMax()}
</Typography>
</div>
<div
className="join"
>
<Input
className="join-item w-full"
placeholder="Amount of EUROs you want to repay"
type="number"
onChange={(e) => handleAmount(e, 'REPAY')}
disabled={isPending}
useRef={inputRef}
/>

<Button
className="join-item"
variant="outline"
onClick={() => handleInputMax('REPAY')}
disabled={isPending}
>
Max
</Button>
</div>

<div className="mt-4">
<VaultHealth currentVault={currentVault}/>
</div>

<div>
{repayValues.map((item) => (
<div
className="flex justify-between align-center"
key={item.key}
>
<div className="flex justify-between">
<Typography
variant="p"
className="flex-1"
>
{item.key}
Repay Amount
</Typography>
<Typography
variant="p"
className="flex-1"
className="text-right"
>
{item.value || '0'}
Remaining: {getInputMax()}
</Typography>
</div>
))}
</div>
<div
className="join"
>
<Input
className="join-item w-full"
placeholder="Amount of EUROs you want to repay"
type="number"
onChange={(e) => handleAmount(e, 'REPAY')}
disabled={isPending}
useRef={inputRef}
/>

<div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
<Button
className="w-full lg:w-auto"
color="ghost"
onClick={closeModal}
disabled={isPending}
>
Close
</Button>
<Button
className="w-full lg:w-64"
color="success"
disabled={!amount || isPending}
onClick={() => handleDebtAction('REPAY')}
loading={isPending}
>
Repay
</Button>
<Button
className="join-item"
variant="outline"
onClick={() => handleInputMax('REPAY')}
disabled={isPending}
>
Max
</Button>
</div>

<div className="mt-4">
<VaultHealth currentVault={currentVault}/>
</div>

<div>
{repayValues.map((item) => (
<div
className="flex justify-between align-center"
key={item.key}
>
<Typography
variant="p"
className="flex-1"
>
{item.key}
</Typography>
<Typography
variant="p"
className="flex-1"
>
{item.value || '0'}
</Typography>
</div>
))}
</div>

<div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
<Button
className="w-full lg:w-auto"
color="ghost"
onClick={closeModal}
disabled={isPending}
>
Close
</Button>
<Button
className="w-full lg:w-64"
color="success"
disabled={!amount || isPending}
onClick={() => handleDebtAction('REPAY')}
loading={isPending}
>
Repay
</Button>
</div>
</div>
<EurosCompare />
</div>
</Modal>
</>
Expand Down

0 comments on commit 55090cc

Please sign in to comment.