Loading...
;
-const page: FC
-
+ - By {description.by} - Collateral {description.collateral} + Interest Rate + {interestRate}%
diff --git a/src/app/component/common/Empty/index.tsx b/src/app/component/common/Empty/index.tsx new file mode 100644 index 0000000..c5632cb --- /dev/null +++ b/src/app/component/common/Empty/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Button, Empty, Typography } from 'antd'; + +interface IEmpty { + image?: string; + description?: string; + action?: string; +} + +const EmptyComponent = ({ image, description, action }: IEmpty) => ( +
+
+ {action && }
+
+
+
+);
+
+export default EmptyComponent;
\ No newline at end of file
diff --git a/src/app/component/common/Tables/active-position-container.tsx b/src/app/component/common/Tables/active-position-container.tsx
index 0ea46b1..63caf4f 100644
--- a/src/app/component/common/Tables/active-position-container.tsx
+++ b/src/app/component/common/Tables/active-position-container.tsx
@@ -1,11 +1,10 @@
"use client";
-import { useEffect, useState } from "react";
-import positionsInfo from "@/app/data/carddata";
+import { useCallback, useEffect, useState } from "react";
import ActivePositionsTable from "./active-positions-table";
import { useTranslations } from "next-intl";
-import { LoanData, getMyLoan } from "@/services/api/my-position";
+import { getMyLoansByStatus, getMySuppliedLoan } from "@/services/api/my-position";
import { useAccount } from "wagmi";
-import { ILoanRequest } from "@/interfaces/loan-interface";
+import { ILoanRequest, STATUS } from "@/interfaces/loan-interface";
const ActivePositions = () => {
const t = useTranslations("ActivePositions");
@@ -13,12 +12,12 @@ const ActivePositions = () => {
const [active, setActive] = useState(true);
const { address } = useAccount();
- const handleGetMyLoanAPI = () => {
+ const handleGetMyLoanAPI = useCallback(() => {
if (!address) return;
- getMyLoan(address).then((data) => setLoanData(data));
- };
+ getMyLoansByStatus(address, STATUS.borrowed).then((data) => setLoanData(data));
+ }, [address]);
- useEffect(() => handleGetMyLoanAPI(), []);
+ useEffect(() => handleGetMyLoanAPI(), [handleGetMyLoanAPI]);
let activePositionsTableData = active ? loanData?.slice(0, 2) : loanData;
diff --git a/src/app/component/common/Tables/active-positions-table.tsx b/src/app/component/common/Tables/active-positions-table.tsx
index 55af78d..2eaed1b 100644
--- a/src/app/component/common/Tables/active-positions-table.tsx
+++ b/src/app/component/common/Tables/active-positions-table.tsx
@@ -1,10 +1,10 @@
"use client";
import { ILoanRequest } from "@/interfaces/loan-interface";
-import { LoanData } from "@/services/api/my-position";
import Image from "next/image";
import { FC } from "react";
import { TbCurrencyEthereum } from "react-icons/tb";
+import EmptyComponent from "../Empty";
interface TablePorp {
data: ILoanRequest[];
@@ -40,72 +40,81 @@ const ActivePositionsTable: FC| - Collection - | -- Amount - | -- APR - | -- Fees - | -- Supplier - | -- Health factor - | -||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
-
-
+ <>
+ {"static"} -{"static"} -
| |||||||||||
|
+
+
+ {"static"} +{"static"} + |
+
+
+ |
+
+ {handleColor("-8")}
+ |
+
+
+ |
+ + {"static"} + | ++ + {key.healthFactor || 0}% + + | +
+
+ }
+
+
);
};
diff --git a/src/app/component/common/Tables/recent-loans-container.tsx b/src/app/component/common/Tables/recent-loans-container.tsx
index 3fb49e9..7e0235d 100644
--- a/src/app/component/common/Tables/recent-loans-container.tsx
+++ b/src/app/component/common/Tables/recent-loans-container.tsx
@@ -4,6 +4,7 @@ import RecentLoans from "./recent-loans";
import { useTranslations } from "next-intl";
import { LoanData, getRecentLoan } from "@/services/api/dashboard";
import { useAccount } from "wagmi";
+import EmptyComponent from "../Empty";
const RecentPositionsList: FC = () => {
const t = useTranslations("RecentLoans");
@@ -33,7 +34,7 @@ const RecentPositionsList: FC = () => {
useEffect(() => {
if (!address) return;
_getRecentLoadAPI(address);
- }, [active]);
+ }, [active, address]);
const sortedData = recentLoan?.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
const data = active ? sortedData?.slice(0, 3) : sortedData;
@@ -46,7 +47,7 @@ const RecentPositionsList: FC = () => {
{tableButtonInfo}
-
- {/* {key._id} */}
- Uzachi #4390
+ {truncateAddress(key.userAddress)}
+ {/* Uzachi #4390 */}
{/* {key.collateralAmount} */}
- From Ragnarok Meta
+ Koryntia Loans
-
+ {loanPeriod} Year
+
diff --git a/src/app/component/create-loan/create-loan.tsx b/src/app/component/create-loan/create-loan.tsx
index 2ac08e1..6526a09 100644
--- a/src/app/component/create-loan/create-loan.tsx
+++ b/src/app/component/create-loan/create-loan.tsx
@@ -1,244 +1,112 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
import toast from "react-hot-toast";
import Button from "../elements/button/Button";
import CreateLoanForm from "./create-loan-form";
import { RoundedInput } from "../elements/Input";
import Select from "../elements/select";
+import { Select as SelectComponent } from 'antd'
+import { AiOutlineDollarCircle } from "react-icons/ai";
+import { collateralAmountOptions, requestAmountOptions } from "@/app/data/currency";
+import { getPriceApi } from "@/services/api/getPrice";
type LoanFormProps = {
- name: string;
- value: string;
+ name: string;
+ value: string;
};
type CurrencyOption = {
- name: string;
- value: string;
+ name: string;
+ value: string;
};
const CreateLoan = () => {
- const requestAmountOptions: CurrencyOption[] = [
- { name: "USDT", value: "usdt" },
- { name: "BTC", value: "btc" },
- { name: "USDC", value: "usdc" },
- { name: "ETH", value: "eth" },
- { name: "MATIC", value: "matic" },
- { name: "SOL", value: "sol" },
- ];
+ const loanPeriodValue: LoanFormProps[] = [
+ { name: "1 Year", value: "1" },
+ { name: "2 Years", value: "2" },
+ { name: "3 Years", value: "3" },
+ { name: "4 Years", value: "4" },
+ ];
- const collateralAmountOptions: CurrencyOption[] = [
- { name: "USDT", value: "usdt" },
- { name: "BTC", value: "btc" },
- { name: "USDC", value: "usdc" },
- { name: "ETH", value: "eth" },
- { name: "MATIC", value: "matic" },
- { name: "SOL", value: "sol" },
- ];
+ const [showModal, setShowModal] = useState(false);
+ const [selectedRequestAmountOption, setSelectedRequestAmountOption] = useState(
+ requestAmountOptions[0]
+ );
+ const [selectedCollateralAmountOptions, setSelectedCollateralAmountOption] = useState(
+ collateralAmountOptions[0]
+ );
+ const [requestAmount, setRequestAmount] = useState("");
+ const [collateralAmount, setCollateralAmount] = useState(0);
+ const [loanPeriod, setLoanPeriod] = useState("1");
+ const [initialThreshold, setInitialThreshold] = useState("");
+ const [interestRate, setInterestRate] = useState("");
+ const [name, setName] = useState("");
+ const [formInvalid, setFormInvalid] = useState(false);
- const loanPeriodValue: LoanFormProps[] = [
- { name: "1 Year", value: "1" },
- { name: "2 Years", value: "2" },
- { name: "3 Years", value: "3" },
- { name: "4 Years", value: "4" },
- ];
+ const toggleModal = () => {
+ if (formInvalid) {
+ toast.error("Please provide loan details");
+ } else {
+ setShowModal(!showModal);
+ }
+ };
-// import IconMap from "../common/Icons";
-// import { collateralAmountOptions, requestAmountOptions } from "@/constant/loan";
-// import { CurrencyOption } from "@/types/liquidation";
+ useEffect(() => {
+ // Perform form validation
+ const isFormInvalid =
+ +requestAmount === 0 ||
+ +collateralAmount === 0 ||
+ +loanPeriod === 0 ||
+ +initialThreshold === 0 ||
+ +interestRate === 0 ||
+ name === "";
-// const CreateLoan = () => {
-// const [loanPeriodValue, setLoanPeriodValue] = useState([
-// { name: "1 Year", value: "1" },
-// { name: "2 Years", value: "2" },
-// { name: "3 Years", value: "3" },
-// { name: "4 Years", value: "4" },
-// ]);
+ // Set formInvalid state based on validation result
+ setFormInvalid(isFormInvalid);
+ }, [requestAmount, collateralAmount, loanPeriod, initialThreshold, interestRate, name]);
+ const handleRequestAmountOptionChange = (selectedValue: string) => {
+ const selectedOption = requestAmountOptions.find((option) => option.value === selectedValue);
+ if (!selectedOption) return;
+ setSelectedRequestAmountOption(selectedOption);
+ };
- const [showModal, setShowModal] = useState(false);
- const [selectedRequestAmountOption, setSelectedRequestAmountOption] = useState(
- requestAmountOptions[0]
- );
- const [selectedCollateralAmountOptions, setSelectedCollateralAmountOption] = useState(
- collateralAmountOptions[0]
- );
- const [requestAmount, setRequestAmount] = useState("");
- const [collateralAmount, setCollateralAmount] = useState("");
- const [loanPeriod, setLoanPeriod] = useState("1");
- const [liquidationThreshold, setLiquidationThreshold] = useState("");
- const [interestRate, setInterestRate] = useState("");
- const [name, setName] = useState("");
- const [formInvalid, setFormInvalid] = useState(false);
+ const handleCollateralOptionChange = (selectedValue: string) => {
+ const selectedOption = collateralAmountOptions.find((option) => option.value === selectedValue);
+ if (!selectedOption) return;
+ setSelectedCollateralAmountOption(selectedOption);
+ };
- const toggleModal = () => {
- if (formInvalid) {
- toast.error("Please provide loan details");
- } else {
- setShowModal(!showModal);
- }
- };
-
- useEffect(() => {
- // Perform form validation
- const isFormInvalid =
- +requestAmount === 0 ||
- +collateralAmount === 0 ||
- +loanPeriod === 0 ||
- +liquidationThreshold === 0 ||
- +interestRate === 0 ||
- name === "";
+ const calculateMaxThreshold = () => {
+ if (!interestRate) return 0;
+ return Math.round((10000 * 10000 / (10000 + (Number(interestRate) * 100))) / 100)
+ }
- // Set formInvalid state based on validation result
- setFormInvalid(isFormInvalid);
- }, [requestAmount, collateralAmount, loanPeriod, liquidationThreshold, interestRate, name]);
+ const handlePeriodChange = (value: string[]) => {
+ console.log(`selected ${value}`);
+ setLoanPeriod(value[0])
+ };
- const handleRequestAmountOptionChange = (selectedValue: string) => {
- const selectedOption = requestAmountOptions.find((option) => option.value === selectedValue);
- if (!selectedOption) return;
- setSelectedRequestAmountOption(selectedOption);
- };
+ const calculateRequestAmount = useCallback(async () => {
+ // get usd price of request token
+ // get total usdAmount
+ // get price of collateral token
+ // use total usdAmount to determine expected collateral amount
+ const requestToken = `${selectedRequestAmountOption.name}/USD`
+ const collateralToken = `${selectedCollateralAmountOptions.name}/USD`
+ const requestTokenPrice = await getPriceApi(requestToken)
+ const collateralTokenPrice = await getPriceApi(collateralToken);
+ if (requestTokenPrice && collateralTokenPrice) {
+ setCollateralAmount(requestTokenPrice?.price * Number(requestAmount) / collateralTokenPrice.price)
+ }
+ }, [requestAmount, selectedCollateralAmountOptions, selectedRequestAmountOption])
- const handleCollateralOptionChange = (selectedValue: string) => {
- const selectedOption = collateralAmountOptions.find((option) => option.value === selectedValue);
- if (!selectedOption) return;
- setSelectedCollateralAmountOption(selectedOption);
- };
+ useEffect(() => {
+ if (Number(requestAmount) > 0 && selectedRequestAmountOption.value && selectedCollateralAmountOptions.value) {
+ calculateRequestAmount()
+ }
+ }, [calculateRequestAmount, requestAmount, selectedRequestAmountOption, selectedCollateralAmountOptions])
-// <<<<<<< api-integuration
-// return (
-//
-//
-//
-// {showModal && (
-// -// Create Loan position -//
-//
-//
-//
-//
-// -// Request Amount -//
-//
-// setRequestAmount(e.target.value)}
-// />
-//
-//
-// {"|"}
-//
-//
-//
-//
-//
-// -// Collateral Amount -//
-//
-// setCollateralAmount(e.target.value)}
-// />
-//
-//
-// {"|"}
-//
-//
-//
-//
-//
-// -// Liquidation Threshold -//
-//
-// setLiquidationThreshold(e.target.value)}
-// />
-//
-//
-//
-// -// Interest Rate -//
-//
-// setInterestRate(e.target.value)}
-// />
-//
-//
-//
-// -// Loan Period -//
-//
-//
-//
-//
-//
-// -// Title -//
-//
-// setName(e.target.value)}
-// />
-//
-//
-//
-//
-//
@@ -253,22 +121,20 @@ const CreateLoan = () => {
setRequestAmount(e.target.value)}
/>
setCollateralAmount(e.target.value)}
+ onChange={(e) => setCollateralAmount(Number(e.target.value))}
+ disabled={true}
/>
+ {/* */}
+ )
+ }
+
+ );
};
export default CreateLoan;
diff --git a/src/app/component/dashboard/Dashboard.tsx b/src/app/component/dashboard/Dashboard.tsx
index b8afc70..449ce76 100644
--- a/src/app/component/dashboard/Dashboard.tsx
+++ b/src/app/component/dashboard/Dashboard.tsx
@@ -6,8 +6,6 @@ import ActivePositions from "../common/Tables/active-position-container";
import Link from "next/link";
const Dashboard = () => {
- const firstThreePositionData = positionCardsData.slice(0, 3);
-
return (
{"|"}
@@ -281,17 +147,15 @@ const CreateLoan = () => {
-
{"|"}
+
+
-
- Loan Period + Interest Rate
-
+
+
+ + Liquidation Threshold (Max {calculateMaxThreshold()}%) +
+
+ setInitialThreshold(e.target.value)}
+ />
+
+
+
+ + Loan Period +
+
+ setLoanPeriod(e.target.value)}
+ size="large"
+ className="w-full text-sm bg-transparent rounded-2xl focus:outline-none focus:ring-0 bg-gray-100"
+ onChange={handlePeriodChange}
>
- {loanPeriodValue.map((period, idx) => (
-
- ))}
-
+ {name}
+ {loanPeriodValue.map((period, index) => {
+ return (
+
+
+ )
+ })}
+
+
+ {period.name}
+
+
+ Title +
+
+ setName(e.target.value)}
+ />
@@ -342,30 +254,34 @@ const CreateLoan = () => {
className="absolute top-0 right-5 text-appColor1 cursor-pointer text-4xl "
onClick={toggleModal}
>
-
- )}
-
- );
+
-
- ×
-
-
-
-
-
+
+ ×
+
+
+
+
+
+
@@ -23,7 +21,7 @@ const Dashboard = () => {
-
diff --git a/src/app/component/dashboard/banner.tsx b/src/app/component/dashboard/banner.tsx
index 6360b29..7759a78 100644
--- a/src/app/component/dashboard/banner.tsx
+++ b/src/app/component/dashboard/banner.tsx
@@ -1,12 +1,17 @@
+import Image from "next/image";
+import Link from "next/link";
import React from "react";
+import type { Route } from "next";
const Banner = () => {
return (
= ({ image, time, title, description, bid, liked, isLliquidation }) => {
- const router = useRouter();
-
-
return (
= ({ image, time, title, description, bid, liked, isLl
- 
();
const [slidesToShow, setSlidesToShow] = useState(3);
+ console.log(marketLoans)
+
+ function calculateCountdown(date: string) {
+ const targetDate = DateTime.fromISO(date);
+ const now = DateTime.now();
+ const diff = targetDate.diff(now, ["days", "hours", "minutes", "seconds"]);
+ const countdown = `${Math.floor(diff.days)}d ${Math.floor(diff.hours)}h ${Math.floor(diff.minutes)}m ${Math.floor(diff.seconds)}s`;
+ return countdown;
+ }
const currentDate = new Date();
- const endDate = new Date(currentDate);
- endDate.setDate(currentDate.getDate() + 1);
+ const endDate = new Date(loanData ? loanData.loanRequestPeriod : currentDate);
+ endDate.setDate(endDate.getDate() + 1);
useEffect(() => {
if (sectionWidth) {
@@ -51,119 +62,122 @@ export const MarketPositionDetail = () => {
-
@@ -17,13 +22,14 @@ const Banner = () => {
-
+
);
};
diff --git a/src/app/component/elements/select/index.tsx b/src/app/component/elements/select/index.tsx
index 28a1cf4..47f24c1 100644
--- a/src/app/component/elements/select/index.tsx
+++ b/src/app/component/elements/select/index.tsx
@@ -1,24 +1,38 @@
import React from "react";
import { SelectProps } from "@/types/select";
+import { Select as SelectComponent } from "antd";
+import Image from "next/image";
function Select({ name, id, className, options, onChange }: SelectProps) {
- const handleChange = (e: React.ChangeEvent) => {
- onChange(e.target.value);
+ const handleChange = (value: string) => {
+ console.log(`selected ${value}`);
+ onChange(value);
};
-
return (
-
+ {name}
+ {options.map((item, index) => {
+ return (
+
+
+ )
+ })}
+
);
}
diff --git a/src/app/component/liquidation/LiquidationModal.tsx b/src/app/component/liquidation/LiquidationModal.tsx
index fdbfe6b..daebad0 100644
--- a/src/app/component/liquidation/LiquidationModal.tsx
+++ b/src/app/component/liquidation/LiquidationModal.tsx
@@ -4,10 +4,8 @@ import { useState } from "react";
import LoanSummaryContainer from "../create-loan/LoanSummaryContainer";
import LoanSummary from "../create-loan/LoanSummary";
import Button from "../elements/button/Button";
-
-import { collateralAmountOptions } from "@/constant/liquidation";
import { CurrencyOption, LiquidationModalProps } from "@/types/liquidation";
-
+import { collateralAmountOptions } from "@/app/data/currency";
const LiquidationModal = (props: LiquidationModalProps) => {
const { open, handleClose, data } = props;
const [selectedCollateralAmountOptions, setSelectedCollateralAmountOption] = useState(null);
diff --git a/src/app/component/liquidation/index.tsx b/src/app/component/liquidation/index.tsx
index b3b221e..f3333df 100644
--- a/src/app/component/liquidation/index.tsx
+++ b/src/app/component/liquidation/index.tsx
@@ -2,7 +2,7 @@
import React, { useEffect, useState } from "react";
import Card, { CardProps } from "@/app/component/common/Card";
import useAuth from "@/hooks/useAuth";
-import { LoanData, getMyLoan } from "@/services/api/my-position";
+import { getMyLoan } from "@/services/api/my-position";
import LiquidationModal from "./LiquidationModal";
import { getLiquidationLoans } from "@/services/api/liquidation-loans";
import { ILoanRequest } from "@/interfaces/loan-interface";
@@ -51,7 +51,8 @@ export const LliquidationCards = ({ positionCardsData }: PositionCardsProps) =>
amount: item.loanAmount,
currency: item.loanToken,
}}
- description={{ by: "12%", collateral: item.collateralAmount + "%" }}
+ interestRate="10"
+ // description={{ by: "12%", collateral: item.collateralAmount + "%" }}
image={"/assets/placeholder/cover.png"}
time={calculateCountdown(item.loanPeriod.toString())}
isLliquidation={true}
diff --git a/src/app/component/market/index.tsx b/src/app/component/market/index.tsx
index 2ef3be3..2705a7e 100644
--- a/src/app/component/market/index.tsx
+++ b/src/app/component/market/index.tsx
@@ -4,34 +4,46 @@ import Image from "next/image";
import NoteIcon from "../../../../public/icons/noteIcon.svg";
import dollarIcon from "../../../../public/icons/dollar.svg";
import categoryIcon from "../../../../public/icons/category.svg";
-import { positionCardsData } from "@/data";
import { AvailablePositions } from "./positions";
+import { ILoanRequest } from "@/interfaces/loan-interface";
+import { getMarketLoans } from "@/services/api/market-loans";
+import { useState, useEffect } from "react";
type Tab = {
label: string;
- href: string;
icon: any;
};
const tabs: Tab[] = [
{
label: "Category",
- href: "/mypositions/created",
icon: categoryIcon,
},
{
label: "Collections",
- href: "/mypositions/invested",
icon: NoteIcon,
},
{
label: "Price Range",
- href: "/mypositions/pending-action",
icon: dollarIcon,
},
];
export default function Market() {
+ const [loanData, setLoanData] = useState();
+ const [isLoading, setIsLoading] = useState(false);
+
+ const handleGetMarketLoans = () => {
+ setIsLoading(true);
+ getMarketLoans()
+ .then((data) => setLoanData(data))
+ .finally(() => setIsLoading(false));
+ };
+
+ useEffect(() => handleGetMarketLoans(), []);
+
+ if (isLoading) return
-
+
+ {item.name}
+Loading...
;
+
return (
@@ -43,13 +55,12 @@ export default function Market() {
))}
@@ -61,7 +72,7 @@ export default function Market() {
Filter & Sort
-
{tabs.map((tab) => (
-
-
{tab.label} - +
-
diff --git a/src/app/component/my-positions/_components/card.tsx b/src/app/component/my-positions/_components/card.tsx
index 431ed8d..046a7c0 100644
--- a/src/app/component/my-positions/_components/card.tsx
+++ b/src/app/component/my-positions/_components/card.tsx
@@ -6,6 +6,7 @@ import { TbCurrencyEthereum } from "react-icons/tb";
import Link from "next/link";
import { useRouter } from "next/navigation";
import Button from "../../elements/button/Button";
+import { getImage } from "@/shared/constant";
export type CardProps = {
image: string;
@@ -14,6 +15,7 @@ export type CardProps = {
description: {
by: string;
collateral: string;
+ collateralToken?: string;
};
bid: {
amount: string | number;
@@ -24,9 +26,6 @@ export type CardProps = {
};
const Card: FC
-
-
-
-
- setIsPositionName(false)}
- />
+ />}
);
};
diff --git a/src/app/component/market/marketModal.tsx b/src/app/component/market/marketModal.tsx
index f656ed0..315e0b0 100644
--- a/src/app/component/market/marketModal.tsx
+++ b/src/app/component/market/marketModal.tsx
@@ -1,57 +1,27 @@
-import { AiOutlineDollarCircle } from "react-icons/ai";
import Modal from "../common/Modal";
-import { useState } from "react";
import LoanSummaryContainer from "../create-loan/LoanSummaryContainer";
import LoanSummary from "../create-loan/LoanSummary";
import Button from "../elements/button/Button";
+import { ILoanRequest } from "@/interfaces/loan-interface";
+import { DateTime } from "luxon";
type MarketModalProps = {
open: boolean;
+ loanData: ILoanRequest;
handleClose: () => void;
};
-type CurrencyOption = {
- name: string;
- value: string;
-};
-
-type LoanFormProps = {
- name: string;
- value: string;
-};
-
-const collateralAmountOptions: CurrencyOption[] = [
- { name: "USDT", value: "usdt" },
- { name: "BTC", value: "btc" },
- { name: "USDC", value: "usdc" },
- { name: "ETH", value: "eth" },
- { name: "MATIC", value: "matic" },
- { name: "SOL", value: "sol" },
-];
const MarketModal = (props: MarketModalProps) => {
- const { open, handleClose } = props;
- const [selectedCollateralAmountOptions, setSelectedCollateralAmountOption] =
- useState(null);
- const [collateralAmount, setCollateralAmount] = useState("");
- const [loanPeriod, setLoanPeriod] = useState("1");
-
- const [loanPeriodValue, setLoanPeriodValue] = useState([
- { name: "1 Year", value: "1" },
- { name: "2 Years", value: "2" },
- { name: "3 Years", value: "3" },
- { name: "4 Years", value: "4" },
- ]);
+ const { open, loanData, handleClose } = props;
- const handleCollateralOptionChange = (
- e: React.ChangeEvent
- ) => {
- const selectedValue = e.target.value;
- const selectedOption = collateralAmountOptions.find(
- (option) => option.value === selectedValue
- );
- setSelectedCollateralAmountOption(selectedOption || null);
- };
+ function calculateCountdown(date: string) {
+ const targetDate = DateTime.fromISO(date);
+ const now = DateTime.now();
+ const diff = targetDate.diff(now, ["days", "hours", "minutes", "seconds"]);
+ const countdown = `${Math.floor(diff.days)}d ${Math.floor(diff.hours)}h ${Math.floor(diff.minutes)}m ${Math.floor(diff.seconds)}s`;
+ return countdown;
+ }
return (
@@ -59,37 +29,15 @@ const MarketModal = (props: MarketModalProps) => {
Supply Loan position
-
-
-======= -->
- >
- - Position Name -
-{`The borrower is seeking a loan of [Insert Requested Tokens] tokens, showcasing a [Insert Risk Factor] risk factor while leveraging a robust [Insert Collateralization Ratio] collateralization ratio. This demonstrates the borrower's intention to secure the loan by offering a substantial collateral base, ensuring a lower risk profile within the lending ecosystem.`}
-
-
-
:
+ -
-
+
-
+ {
+ loanData ?
+ - Auction End In -
-
-
-
+
+
+
+
+
+
-
+
-
- +
+{`The borrower is seeking a loan of ${loanData.loanAmount} ${loanData.loanToken}, showcasing a ${loanData.interestRate}% interest rate while leveraging a robust ${loanData.liquidationThreshold}% collateralization ratio. This demonstrates the borrower's intention to secure the loan by offering a substantial collateral base of ${Number(loanData.collateralAmount).toFixed(4)} ${loanData.collateralToken}, ensuring a lower risk profile within the lending ecosystem.`}
-
- - Required Amount -
-
-
+
- - 3,89 ETH -
++
+
-
+
+ + Auction End In +
+
+
+
+
+ + Required Amount +
+
+
+ + {loanData.loanAmount} {loanData.loanToken} +
+
+
+ APR +
+
+
+ + {loanData.interestRate}% +
+
-
- - APR -
-
-
- {"8,9 %"} +
+
+ Health factor
+
-
- - Health factor -
- -
- Anonther loan
+ Other loans
- {positionCardsData &&
- positionCardsData.map((item, index) => (
-
-
- setIsPositionName(true)}
- onCardClick={() =>
- router.push(`/market/895/details` as Route)
- }
- />
-
- ))}
+ {marketLoans.map((item, index) => (
+
+ setIsPositionName(true)}
+ onCardClick={() =>
+ router.push(`/market/${item.name}/details` as Route)
+ }
+ />
+
+ ))}
-
-
- - Loan Period -
-
-
-
-
-
- - Get Started -
-- Select your wallet -
-- Connecting your wallet is like “logging in” to Web3. Select your - wallet from the options to get started. -
-
- setAgreedToTermsOfServices(e.target.checked)}
- />
-
-
-
-
- {connectors
- .slice(0, 4)
- .filter(
- (connector, index, self) =>
- self.findIndex((c) => c.name === connector.name) === index
- )
- .map((connector) => (
-
- ))}
{title}
By {description.by} - Collateral {description.collateral} +
+
+ Collateral:
+ {description.collateralToken &&