+
{depositSuccess ? (
= ({
) : (
@@ -829,7 +1116,7 @@ const DepositView: React.FC = ({
@@ -843,28 +1130,84 @@ const DepositView: React.FC
Amount
- {amount} {depositToken}
+ {amount} {selectedAssetOption.name}
-
-
+
+
{/* Left Card - Deposit Input */}
-
+
+ {/* --- Asset Dropdown & Multi-chain Toggle --- */}
+ {assetOptions.length > 1 && (
+
{/* Right Card - Strategy Info */}
-
- {depositTokenImage && (
+ {selectedAssetOption.image && (
)}
- Deposit {depositToken}
+ Deposit {selectedAssetOption.name}
+0.00 in 1 year
+
+
+
+ )}
+ {/* Multi-chain Toggle (always shown) */}
+
+
+ Multi-chain Deposit
+
+
+
+ {/* Target Chain Selection - Only shown when multi-chain is enabled */}
+ {isMultiChain && (
+
+
+
+
+ )}
+ {/* --- End Asset Dropdown & Multi-chain Toggle --- */}
= ({
)}
+ {/* Bridge Fee Display */}
+ {isMultiChain && (
+
+
+ Bridge Fee:{" "}
+ {isLoadingFee ? (
+
+
+ Loading...
+
+ ) : (
+ {bridgeFee} ETH
+ )}
+
+
+ )}
+
+
+
+
+ You need to have enough ETH in your wallet to cover
+ the bridge fee. The fee will be paid in ETH along
+ with your deposit.
+
+
+
+
{/* Background gradient effect - top */}
@@ -979,7 +1382,7 @@ const DepositView: React.FC = ({
{/* Deposit Cap Progress Bar - Only shown if show_cap is true */}
{showDepositCap && (
-
+
${remainingSpace} Remaining
@@ -1036,7 +1439,7 @@ const DepositView: React.FC = ({
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 3a96d3c..5f8bd0d 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -6,6 +6,7 @@ import {
TooltipTrigger,
TooltipProvider,
} from "@/components/ui/tooltip";
+import { InfoIcon } from "lucide-react";
type DurationType = "30_DAYS" | "60_DAYS" | "180_DAYS" | "PERPETUAL_DURATION";
@@ -26,26 +27,9 @@ interface CustomCardProps {
disableHover?: boolean;
onReset?: () => void;
isComingSoon?: boolean;
+ availableDurations?: DurationType[];
}
-const InfoIcon = () => (
-
-);
-
const formatDuration = (duration: string) => {
if (duration === "PERPETUAL_DURATION") return "Perpetual";
const [number, period] = duration.split("_");
@@ -66,6 +50,7 @@ const CustomCard: React.FC = ({
disableHover,
onReset,
isComingSoon,
+ availableDurations,
...props
}) => {
const handleDurationClick = (duration: DurationType) => {
@@ -78,6 +63,13 @@ const CustomCard: React.FC = ({
e.stopPropagation(); // Stop event from bubbling up to parent card
};
+ // Helper function to check if a duration is available
+ const isDurationAvailable = (duration: DurationType) => {
+ // If availableDurations is not provided, assume all are available
+ if (!availableDurations) return true;
+ return availableDurations.includes(duration);
+ };
+
return (
= ({
{...props}
>
{isStrategyCard ? (
-
+
+ {/* Coming Soon Overlay */}
+ {isComingSoon && (
+
![]()
= ({
Select Duration
)}
diff --git a/src/components/ui/header.tsx b/src/components/ui/header.tsx
index 064d2e3..6830b7d 100644
--- a/src/components/ui/header.tsx
+++ b/src/components/ui/header.tsx
@@ -42,7 +42,7 @@ export function Header({
+ Coming Soon
+
+ )}
{/* Image */}
-
-
-
-
+ {/* 30 Days Button */}
+
+
+
+
+
+ {!isDurationAvailable("30_DAYS") && (
+
+
+ )}
+
+
+
+ {/* 60 Days Button */}
+
+
+
+
+
+ {!isDurationAvailable("60_DAYS") && (
+
+
+ )}
+
+
+
+ {/* 180 Days Button */}
+
+
+
+
+
+ {!isDurationAvailable("180_DAYS") && (
+
+
+ )}
+
+
+
+ {/* Perpetual Button */}
+
+
+
+
+
+ {!isDurationAvailable("PERPETUAL_DURATION") && (
+
+
+ )}
+
+
Coming Soon
+Coming Soon
+Coming Soon
+Coming Soon
+
{shouldShowBanner && (
= ({
return (
@@ -112,7 +112,7 @@ export function Header({
)}
-
+
diff --git a/src/components/ui/markets-table.tsx b/src/components/ui/markets-table.tsx
index b3fc489..c34c69d 100644
--- a/src/components/ui/markets-table.tsx
+++ b/src/components/ui/markets-table.tsx
@@ -145,7 +145,7 @@ const MarketsTable: React.FC
{children}
{/* Table Header */}
-
+
= ({
onRowClick && onRowClick(item)}
- className="cursor-pointer pl-[32px]"
+ className="cursor-pointer px-[16px] sm:pl-[32px]"
>
= ({
{/* Toggle buttons */}
-
+
@@ -250,16 +250,16 @@ const YieldDetailsView: React.FC = ({
);
return (
-
+
-
-
+
-
+
+
{name}
{name}
+
@@ -267,30 +267,38 @@ const YieldDetailsView: React.FC = ({
{/* Stats */}
-
-
-
TVL
- {tvl}
+
+ {/* TVL */}
+
+
- TVL
+ {tvl}
-
Base APY
- {baseApy}
+
+ {/* Base APY */}
+
+
- Base APY
+ {baseApy}
-
Contract Address
-
+
+ {/* Contract Address */}
+
{
const getAssetStrategies = (asset: AssetType) => {
- const strategies: StrategyAsset = {
- USD: USD_STRATEGIES,
- BTC: BTC_STRATEGIES,
- ETH: ETH_STRATEGIES,
- }[asset];
+ const strategies: Record>> = {
+ USD: USD_STRATEGIES as unknown as Partial>,
+ BTC: BTC_STRATEGIES as unknown as Partial>,
+ ETH: ETH_STRATEGIES as unknown as Partial>,
+ };
- // Use the duration as is since it matches the keys in env.ts
- const durationKey = duration;
- const strategy = strategies[durationKey];
+ const strategy = strategies[asset][duration];
if (!strategy) {
console.error(
- `No strategy found for ${asset} with duration ${durationKey}`
+ `No strategy found for ${asset} with duration ${duration}`
);
return {
stable: {
@@ -92,6 +123,7 @@ const getStrategyInfo = (duration: DurationType): StrategyData => {
value: "0%",
info: "-",
},
+ comingSoon: true,
},
};
}
@@ -110,6 +142,7 @@ const getStrategyInfo = (duration: DurationType): StrategyData => {
value: strategy.INCENTIVE.apy,
info: strategy.INCENTIVE.incentives,
},
+ comingSoon: strategy.INCENTIVE.comingSoon,
},
};
};
@@ -117,45 +150,41 @@ const getStrategyInfo = (duration: DurationType): StrategyData => {
return {
stable: {
USD: getAssetStrategies("USD").stable,
- BTC: getAssetStrategies("BTC").stable,
ETH: getAssetStrategies("ETH").stable,
+ BTC: getAssetStrategies("BTC").stable,
},
incentives: {
USD: getAssetStrategies("USD").incentives,
- BTC: getAssetStrategies("BTC").incentives,
ETH: getAssetStrategies("ETH").incentives,
+ BTC: getAssetStrategies("BTC").incentives,
},
};
};
const YieldSubpage: React.FC = ({ depositParams }) => {
const [selectedAsset, setSelectedAsset] = useState(null);
- const [selectedStrategy, setSelectedStrategy] = useState(null);
+ const [selectedStrategy, setSelectedStrategy] = useState(
+ null
+ );
- // Add effect to handle URL parameters or parent navigation
useEffect(() => {
- if (depositParams?.asset && depositParams?.duration) {
+ if (depositParams) {
+ const apy =
+ getStrategyInfo(depositParams.duration as DurationType)[
+ depositParams.strategy === "stable" ? "stable" : "incentives"
+ ][depositParams.asset as AssetType].apy.value;
+
setSelectedAsset({
asset: depositParams.asset,
duration: depositParams.duration as DurationType,
});
- if (depositParams.strategy) {
- const strategyInfo = getStrategyInfo(
- depositParams.duration as DurationType
- );
- const apy =
- strategyInfo[
- depositParams.strategy === "stable" ? "stable" : "incentives"
- ][depositParams.asset as AssetType].apy.value;
-
- setSelectedStrategy({
- type: depositParams.strategy as "stable" | "incentive",
- asset: depositParams.asset,
- duration: depositParams.duration as DurationType,
- apy,
- });
- }
+ setSelectedStrategy({
+ type: depositParams.strategy as "stable" | "incentive",
+ asset: depositParams.asset,
+ duration: depositParams.duration as DurationType,
+ apy,
+ });
}
}, [depositParams]);
@@ -187,7 +216,7 @@ const YieldSubpage: React.FC = ({ depositParams }) => {
// Always render the main content, assuming verification is handled by parent
return (
+
- Contract Address
+
{contractAddress}
-
+
{/* Tabs */}
Network
- {network}
+
+ {/* Network */}
+
+
Network
+ {network}
= ({ depositParams }) => {
/>
) : selectedAsset ? (
-
Select a Yield Source
-
+
= ({ depositParams }) => {
selectedDuration={selectedAsset.duration}
onReset={handleReset}
disableHover={true}
- className="h-[311px]"
+ className="h-[311px] w-full"
/>
-
Select a Yield Source
+
+
@@ -288,10 +334,10 @@ const YieldSubpage: React.FC = ({ depositParams }) => {
) : (
handleStrategySelect(
@@ -256,13 +285,25 @@ const YieldSubpage: React.FC = ({ depositParams }) => {
/>
- handleStrategySelect(
- "incentive",
+ {...(getStrategyInfo(selectedAsset.duration).incentives[
+ selectedAsset.asset as AssetType
+ ].comingSoon
+ ? {}
+ : {
+ onClick: () =>
+ handleStrategySelect(
+ "incentive",
+ selectedAsset.asset as AssetType
+ ),
+ })}
+ className={
+ "group " +
+ (getStrategyInfo(selectedAsset.duration).incentives[
selectedAsset.asset as AssetType
- )
+ ].comingSoon
+ ? "pointer-events-none opacity-60"
+ : "cursor-pointer")
}
- className="cursor-pointer"
>
= ({ depositParams }) => {
}
isStrategyCard={true}
disableHover={true}
+ isComingSoon={
+ getStrategyInfo(selectedAsset.duration).incentives[
+ selectedAsset.asset as AssetType
+ ].comingSoon === true
+ }
/>
-
+
+
Select a asset you want yield on
-
+
= ({ depositParams }) => {
onDurationSelect={(duration: DurationType) =>
handleDurationSelect("USD", duration)
}
+ availableDurations={["PERPETUAL_DURATION"]}
/>
typeof window !== "undefined" && window.innerWidth < 640;
type AssetType = "ALL" | "USD" | "ETH" | "BTC";
@@ -108,6 +111,7 @@ const MarketsSubpage: React.FC = () => {
}
],
};
+ const router = useRouter();
// Fill the "ALL" category
marketData.ALL = [...marketData.ETH, ...marketData.BTC, ...marketData.USD];
@@ -124,7 +128,21 @@ const MarketsSubpage: React.FC = () => {
// Handler for row clicks
const handleRowClick = (item: MarketItem) => {
- setSelectedItem(item);
+ console.log("Row clicked:", item);
+ if (isMobile()) {
+ router.push({
+ pathname: `/yield/${item.id}`,
+ query: {
+ name: item.name,
+ tvl: item.tvl,
+ baseApy: item.baseYield,
+ contractAddress: item.contractAddress || "",
+ network: item.network || ""
+ },
+ });
+ } else {
+ setSelectedItem(item);
+ }
};
// Get sorted data
@@ -172,10 +190,10 @@ const MarketsSubpage: React.FC = () => {
};
return (
-
+
{/* Left side - 50% */}
-
-
+
+
{
{/* Asset Selection */}
-
-
- {
- if (code === process.env.NEXT_PUBLIC_BETA_ACCESS_PUBLIC_CODE) {
- setIsVerified(true);
- setIsCodePopupOpen(false);
- setVerificationError("");
- } else {
- setVerificationError("Incorrect code. Please try again.");
+ // Function to check for an existing session (will need a backend API to read the cookie)
+ const checkSession = async () => {
+ try {
+ const response = await fetch('/api/check-session'); // We will need to create this API route
+ if (response.ok) {
+ const data = await response.json();
+ if (data.isValid) {
+ setIsVerified(true);
+ setIsCodePopupOpen(false);
+ return true;
+ }
+ }
+ } catch (error) {
+ console.error("Error checking session:", error);
+ }
+ setIsVerified(false);
+ setIsCodePopupOpen(true);
+ return false;
+ };
+
+ // useEffect to check session on component mount
+ useEffect(() => {
+ checkSession();
+ }, []); // Run only once on mount
+
+ const handleVerifyCode = async (code: string) => {
+ try {
+ const response = await fetch('/api/verify-code', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ accessCode: code }),
+ });
+
+ if (response.ok) {
+ setIsVerified(true);
+ setIsCodePopupOpen(false);
+ setVerificationError(""); // Clear any previous errors
+ } else {
+ const data = await response.json();
+ setVerificationError(data.message || "Incorrect code. Please try again.");
+ setIsVerified(false);
+ setIsCodePopupOpen(true);
+ }
+ } catch (error) {
+ console.error("Error verifying code:", error);
+ setVerificationError("An error occurred during verification.");
+ setIsVerified(false);
+ setIsCodePopupOpen(true);
}
};
@@ -73,79 +117,147 @@ export default function Page() {
return (
-
-
- {
- setSelectedSubPage(SubPage.Yield);
- setDepositParams(null);
- }}
- >
-
+
{/* Left side - 50% */}
-
-
+
+
{
{/* Asset Selection */}
-
-
-
+
@@ -251,7 +253,7 @@ const MarketsSubpage: React.FC = () => {
{/* Right side - 50% */}
-
+
+
{selectedItem ? (
{
- if (code === process.env.NEXT_PUBLIC_BETA_ACCESS_PUBLIC_CODE) {
- setIsVerified(true);
- setIsCodePopupOpen(false);
- setVerificationError("");
- } else {
- setVerificationError("Incorrect code. Please try again.");
+ // Function to check for an existing session (will need a backend API to read the cookie)
+ const checkSession = async () => {
+ try {
+ const response = await fetch('/api/check-session'); // We will need to create this API route
+ if (response.ok) {
+ const data = await response.json();
+ if (data.isValid) {
+ setIsVerified(true);
+ setIsCodePopupOpen(false);
+ return true;
+ }
+ }
+ } catch (error) {
+ console.error("Error checking session:", error);
+ }
+ setIsVerified(false);
+ setIsCodePopupOpen(true);
+ return false;
+ };
+
+ // useEffect to check session on component mount
+ useEffect(() => {
+ checkSession();
+ }, []); // Run only once on mount
+
+ const handleVerifyCode = async (code: string) => {
+ try {
+ const response = await fetch('/api/verify-code', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ accessCode: code }),
+ });
+
+ if (response.ok) {
+ setIsVerified(true);
+ setIsCodePopupOpen(false);
+ setVerificationError(""); // Clear any previous errors
+ } else {
+ const data = await response.json();
+ setVerificationError(data.message || "Incorrect code. Please try again.");
+ setIsVerified(false);
+ setIsCodePopupOpen(true);
+ }
+ } catch (error) {
+ console.error("Error verifying code:", error);
+ setVerificationError("An error occurred during verification.");
+ setIsVerified(false);
+ setIsCodePopupOpen(true);
}
};
@@ -73,79 +117,147 @@ export default function Page() {
return (
-
-
-
-
- {
- setSelectedSubPage(SubPage.Yield);
- setDepositParams(null);
- }}
- >
-
-