Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Little Fixes in Optimism and RepayModal #69

Merged
merged 2 commits into from
Feb 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions packages/nextjs/app/cdp/components/modals/RepayModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,16 @@ interface RepayModalProps {
onClose: () => void;
backedTokenID: string;
houseOfCoinContract: Address;
mintedAmount: number; // Add this new prop
}

const RepayModal: React.FC<RepayModalProps> = ({ isOpen, onClose, backedTokenID, houseOfCoinContract }) => {
const RepayModal: React.FC<RepayModalProps> = ({
isOpen,
onClose,
backedTokenID,
houseOfCoinContract,
mintedAmount,
}) => {
const chainId = useChainId();
const [amount, setAmount] = useState("");
const [isValid, setIsValid] = useState(false);
Expand Down Expand Up @@ -116,7 +123,11 @@ const RepayModal: React.FC<RepayModalProps> = ({ isOpen, onClose, backedTokenID,
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span className="text-xs sm:text-sm">Here I can warn you about an important fact about repaying $XOC</span>
<span className="text-xs sm:text-sm">
Please ensure that you have sufficient funds to cover the repayment amount. Repaying $XOC will burn the
specified amount from your balance, reducing your debt. Make sure to double-check the amount before
proceeding.
</span>
</div>

{!data && !isError && (
Expand All @@ -130,6 +141,7 @@ const RepayModal: React.FC<RepayModalProps> = ({ isOpen, onClose, backedTokenID,
placeholder="0.00"
value={amount}
onChange={handleChange}
max={mintedAmount}
/>
<span className="font-bold ml-2">$XOC</span>
</div>
Expand All @@ -138,6 +150,10 @@ const RepayModal: React.FC<RepayModalProps> = ({ isOpen, onClose, backedTokenID,

<div className="container-gray-borders flex flex-col gap-2">
<label className="font-bold text-sm sm:text-base">Transaction Overview</label>
<div className="flex justify-between items-center text-xs sm:text-sm">
<span>Total Minted Amount</span>
<span className="font-bold">{mintedAmount.toFixed(6)} $XOC</span>
</div>
<div className="flex justify-between items-center text-xs sm:text-sm">
<span>Repay Amount</span>
<span className="font-bold">{amount ? amount : 0} $XOC</span>
Expand Down
28 changes: 26 additions & 2 deletions packages/nextjs/app/cdp/components/tables/YourDeposits.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,40 @@ const generateDeposits = (
): { [key: number]: Deposit[] } => {
const deposits: { [key: number]: Deposit[] } = {};
let globalIndex = 0;
let mintingPowerIndex = 0;
let healthRatioIndex = 0;

Object.entries(contractData).forEach(([chainId, data]) => {
const chainIdNumber = parseInt(chainId, 10);
const typedData = data as ContractData[typeof chainIdNumber];

deposits[chainIdNumber] = Object.entries(typedData.assets).map(([symbol, asset]) => {
// Get the correct indices based on the chain
const currentChainId = parseInt(chainId, 10);
if (currentChainId === chainIds.BNB) {
mintingPowerIndex = globalIndex;
healthRatioIndex = globalIndex;
} else if (currentChainId === chainIds.POLYGON) {
mintingPowerIndex = globalIndex + 2; // Adjust based on BNB assets
healthRatioIndex = globalIndex + 2;
} else if (currentChainId === chainIds.BASE) {
mintingPowerIndex = globalIndex + 5; // Adjust based on BNB + POLYGON assets
healthRatioIndex = globalIndex + 5;
} else if (currentChainId === chainIds.OPTIMISM) {
mintingPowerIndex = globalIndex + 7; // Adjust based on BNB + POLYGON + BASE assets
healthRatioIndex = globalIndex + 7;
}

const deposit = {
symbol,
amount: parseFloat(formattedBalances[globalIndex]?.toFixed(6) || "0"),
minted: parseFloat(formattedMints[globalIndex]?.toFixed(6) || "0"),
mintingPower: parseFloat(String(formattedMintingPower[globalIndex] || 0)),
mintingPower: parseFloat(formattedMintingPower[mintingPowerIndex] || "0"),
houseofReserveContract: typedData.houseOfReserves[symbol],
assetContract: asset.contract,
houseOfCoinContract: typedData.houseOfCoin,
assetsAccountantContract: typedData.assetsAccountant,
userHealthRatio: parseFloat(String(formattedUserHealthRatio[globalIndex] || 0)),
userHealthRatio: parseFloat(formattedUserHealthRatio[healthRatioIndex] || "0"),
backedTokenID: asset.backedTokenID || "",
};
globalIndex++;
Expand Down Expand Up @@ -228,6 +247,7 @@ const YourDeposits = () => {
backedTokenID?: bigint | number;
formattedMintingPower?: number[];
formattedUserHealthRatio?: number[];
mintedAmount?: number; // Add this property
}

const [selectedAsset, setSelectedAsset] = useState<SelectedAsset | null>(null);
Expand Down Expand Up @@ -264,13 +284,15 @@ const YourDeposits = () => {
houseOfCoinContract: Address,
assetsAccountantContract: Address,
backedTokenID: string,
mintedAmount: number, // Add this parameter
) => {
setSelectedAsset({
assetName,
houseOfReserveContract,
assetContract,
houseOfCoinContract,
assetsAccountantContract,
mintedAmount, // Add this to the selectedAsset state
});
setBackedTokenID(BigInt(backedTokenID));
setIsRepayModalOpen(true);
Expand Down Expand Up @@ -406,6 +428,7 @@ const YourDeposits = () => {
deposit.houseOfCoinContract as Address,
deposit.assetsAccountantContract as Address,
deposit.backedTokenID as string,
deposit.minted, // Pass the minted amount
)
}
>
Expand Down Expand Up @@ -435,6 +458,7 @@ const YourDeposits = () => {
onClose={closeRepayModal}
backedTokenID={backedTokenID?.toString() ?? "0"}
houseOfCoinContract={selectedAsset.houseOfCoinContract}
mintedAmount={selectedAsset.mintedAmount ?? 0} // Add this prop
/>
)}
</>
Expand Down