-
- {videoSrc.mov &&
+
+
+
{bigText}
+
{littleText}
+
+
+ {videoSrc.mov &&
);
}
diff --git a/apps/lite/src/components/earn-table.tsx b/apps/lite/src/components/earn-table.tsx
index d7f7553..0c57d6b 100644
--- a/apps/lite/src/components/earn-table.tsx
+++ b/apps/lite/src/components/earn-table.tsx
@@ -11,22 +11,25 @@ import {
TableCell,
Table,
} from "@morpho-org/uikit/components/shadcn/table";
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@morpho-org/uikit/components/shadcn/tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@morpho-org/uikit/components/shadcn/tooltip";
import { useModifierKey } from "@morpho-org/uikit/hooks/use-modifier-key";
import { formatBalanceWithSymbol, Token, formatLtv, abbreviateAddress } from "@morpho-org/uikit/lib/utils";
import { blo } from "blo";
-// @ts-expect-error: this package lacks types
import humanizeDuration from "humanize-duration";
import { ClockAlert, ExternalLink } from "lucide-react";
+import { lazy, useState } from "react";
import { Chain, hashMessage, Address, zeroAddress, formatUnits } from "viem";
-import { EarnSheetContent } from "@/components/earn-sheet-content";
import { ApyTableCell } from "@/components/table-cells/apy-table-cell";
import { type useMerklOpportunities } from "@/hooks/use-merkl-opportunities";
import { MIN_TIMELOCK } from "@/lib/constants";
import { type DisplayableCurators } from "@/lib/curators";
import { getTokenURI } from "@/lib/tokens";
+const EarnSheetContent = lazy(() =>
+ import("@/components/earn-sheet-content").then((mod) => ({ default: mod.EarnSheetContent })),
+);
+
export type Row = {
vault: AccrualVault;
isDeadDepositStateValid: boolean;
@@ -44,51 +47,49 @@ function VaultTableCell({
timelock,
}: Token & { chain: Chain | undefined; timelock: bigint }) {
return (
-
-
-
-
-
-
-
-
- {symbol ?? "－"}
- {timelock < MIN_TIMELOCK && (
-
- )}
-
- e.stopPropagation()}
- >
- Properties
- Timelock: {humanizeDuration(Number(timelock) * 1000)}
+
+
+
+
+
+
+
+ {symbol ?? "－"}
{timelock < MIN_TIMELOCK && (
-
- This timelock seems low. Please exercise caution and ask the curator about it if you have questions.
-
+
+ )}
+
+ e.stopPropagation()}
+ >
+ Properties
+ Timelock: {humanizeDuration(Number(timelock) * 1000)}
+ {timelock < MIN_TIMELOCK && (
+
+ This timelock seems low. Please exercise caution and ask the curator about it if you have questions.
+
+ )}
+
+
+ Vault: {abbreviateAddress(address)}
+
+ {chain?.blockExplorers?.default.url && (
+
+
)}
-
-
-
- Vault: {abbreviateAddress(address)}
-
- {chain?.blockExplorers?.default.url && (
-
-
- )}
-
-
-
-
+
+
);
}
@@ -100,54 +101,52 @@ function CuratorTableCell({
chain,
}: Row["curators"][string] & { chain: Chain | undefined }) {
return (
-
-
-
-
-
-
-
-
- {name}
-
- e.stopPropagation()}
- >
- {/* It's possible for a curator to have no onchain roles. In that case, just show their URL. */}
- {roles.length > 0 && (
- <>
- Roles
- {roles.map((role) => (
-
-
- {role.name}: {abbreviateAddress(role.address)}
-
- {chain?.blockExplorers?.default.url && (
-
-
- )}
-
- {url}
-
- )}
-
-
-
+
+
+
+
+
+
+
+ {name}
+
+ e.stopPropagation()}
+ >
+ {/* It's possible for a curator to have no onchain roles. In that case, just show their URL. */}
+ {roles.length > 0 && (
+ <>
+ Roles
+ {roles.map((role) => (
+
+
+ {role.name}: {abbreviateAddress(role.address)}
+
+ {chain?.blockExplorers?.default.url && (
+
+
+ )}
+
+ {url}
+
+ )}
+
+
);
}
@@ -244,55 +243,63 @@ export function EarnTable({
refetchPositions: () => void;
}) {
const isShiftHeld = useModifierKey("Shift");
+ const [selectedRow, setSelectedRow] = useState(null);
return (
-
-
-
-
- Vault
- Deposits
- Curator
- Collateral
- APY
-
-
-
- {rows.map((row) => {
- const ownerText = abbreviateAddress(row.vault.owner);
- const deposits =
- depositsMode === "userAssets"
- ? row.userShares !== undefined
- ? row.vault.toAssets(row.userShares)
- : undefined
- : row.vault.totalAssets;
+
+
{
+ if (!isOpen) {
+ setSelectedRow(null);
+ // Refetch positions on sidesheet close, since user may have sent txns to modify one
+ void refetchPositions();
+ }
+ }}
+ >
+
+
+
+ Vault
+ Deposits
+ Curator
+ Collateral
+ APY
+
+
+
+ {rows.map((row) => {
+ const ownerText = abbreviateAddress(row.vault.owner);
+ const deposits =
+ depositsMode === "userAssets"
+ ? row.userShares !== undefined
+ ? row.vault.toAssets(row.userShares)
+ : undefined
+ : row.vault.totalAssets;
- const rewardsVault = lendingRewards.get(row.vault.address) ?? [];
- const rewardsMarkets = [...row.vault.allocations.keys()].flatMap((marketId) =>
- (lendingRewards.get(marketId) ?? [])
- .map((opportunity) => {
- const proportion = parseFloat(formatUnits(row.vault.getAllocationProportion(marketId), 18));
- return {
- ...opportunity,
- apr: opportunity.apr * proportion,
- dailyRewards: opportunity.dailyRewards * proportion,
- };
- })
- .filter((opportunity) => opportunity.apr > 0),
- );
- // When a vault has vault-level rewards, use those instead of market-level rewards
- // because vault campaigns are configured specifically for the vault's allocation
- const rewards = rewardsVault.length > 0 ? rewardsVault : rewardsMarkets;
+ const rewardsVault = lendingRewards.get(row.vault.address) ?? [];
+ const rewardsMarkets = [...row.vault.allocations.keys()].flatMap((marketId) =>
+ (lendingRewards.get(marketId) ?? [])
+ .map((opportunity) => {
+ const proportion = parseFloat(formatUnits(row.vault.getAllocationProportion(marketId), 18));
+ return {
+ ...opportunity,
+ apr: opportunity.apr * proportion,
+ dailyRewards: opportunity.dailyRewards * proportion,
+ };
+ })
+ .filter((opportunity) => opportunity.apr > 0),
+ );
+ // When a vault has vault-level rewards, use those instead of market-level rewards
+ // because vault campaigns are configured specifically for the vault's allocation
+ const rewards = rewardsVault.length > 0 ? rewardsVault : rewardsMarkets;
- return (
- {
- // Refetch positions on sidesheet close, since user may have sent txns to modify one
- if (!isOpen) void refetchPositions();
- }}
- >
-
+ return (
+ setSelectedRow(row)}
+ >
-
- );
- })}
-
-
+ );
+ })}
+
+
+ {selectedRow && (
+
+ )}
+
-
+
diff --git a/apps/lite/src/components/table-cells/apy-table-cell.tsx b/apps/lite/src/components/table-cells/apy-table-cell.tsx
index 5558544..22585ea 100644
--- a/apps/lite/src/components/table-cells/apy-table-cell.tsx
+++ b/apps/lite/src/components/table-cells/apy-table-cell.tsx
@@ -1,5 +1,5 @@
import { SafeLink } from "@morpho-org/uikit/components/safe-link";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@morpho-org/uikit/components/shadcn/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@morpho-org/uikit/components/shadcn/tooltip";
import { formatApy, getDomain } from "@morpho-org/uikit/lib/utils";
import { Sparkles, SignalHigh, ExternalLink, DollarSign } from "lucide-react";
import { parseUnits } from "viem";
@@ -27,58 +27,56 @@ export function ApyTableCell({
const netApy = mode === "earn" ? nativeApy - feeApy + rewardsApy : nativeApy + feeApy - rewardsApy;
return (
-
-
-
-
- {formatApy(netApy)}
- {rewards.length > 0 &&
}
+
+
+
+ {formatApy(netApy)}
+ {rewards.length > 0 &&
+
+ e.stopPropagation()}
+ >
+
+
+
+
+ {formatApy(nativeApy)}
-
-
e.stopPropagation()}
- >
-
+ {rewards.map((reward) => (
+
+
+
+ {reward.rewardToken.symbol}
+ {reward.depositUrl && getDomain(reward.depositUrl) !== window.location.hostname && (
+
+ {getDomain(reward.depositUrl)}
+
+ )}
+
+ {mode === "earn" ? "+" : "-"}
+ {formatApy(parseUnits(reward.apr.toFixed(18), 16))}
+
+ ))}
+ {fee > 0n || mode === "earn" ? (
-
- Native APY
+
+ Performance Fee
+
{formatApy(fee)}
- {formatApy(nativeApy)}
+ {formatApy(feeApy)}
- {rewards.map((reward) => (
-
-
-
- {reward.rewardToken.symbol}
- {reward.depositUrl && getDomain(reward.depositUrl) !== window.location.hostname && (
-
- {getDomain(reward.depositUrl)}
-
- )}
-
- {mode === "earn" ? "+" : "-"}
- {formatApy(parseUnits(reward.apr.toFixed(18), 16))}
-
- ))}
- {fee > 0n || mode === "earn" ? (
-
-
-
- Performance Fee
-
{formatApy(fee)}
-
- {formatApy(feeApy)}
-
- ) : undefined}
-
-
-
+ ) : undefined}
+
+
);
}
diff --git a/apps/lite/src/lib/curators.ts b/apps/lite/src/lib/curators.ts
index 3a725c1..8dc8e91 100644
--- a/apps/lite/src/lib/curators.ts
+++ b/apps/lite/src/lib/curators.ts
@@ -108,7 +108,7 @@ export const ADDITIONAL_OFFCHAIN_CURATORS: Record
roles: [],
url: "https://www.cicada.partners/",
imageSrc:
- "https://static.wixstatic.com/media/f9d184_1702c7c11ec647f480ad8e0c8c4859c3~mv2.png/v1/fill/w_120,h_155,al_c,lg_1,q_85,enc_avif,quality_auto/Cicada%20Image_Black%20on%20White_25%25.png",
+ "https://static.wixstatic.com/media/f9d184_1702c7c11ec647f480ad8e0c8c4859c3~mv2.png/v1/fill/w_16,h_16,al_c,lg_1,q_85,enc_avif,quality_auto/Cicada%20Image_Black%20on%20White_25%25.png",
shouldAlwaysShow: true,
},
},
diff --git a/apps/lite/src/main.tsx b/apps/lite/src/main.tsx
index acd16b5..8d516ec 100644
--- a/apps/lite/src/main.tsx
+++ b/apps/lite/src/main.tsx
@@ -1,16 +1,19 @@
import { getChainSlug } from "@morpho-org/uikit/lib/utils";
-import "core-js/stable/array/iterator";
-import { StrictMode } from "react";
+import { StrictMode, lazy } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Navigate, Outlet, Route, Routes } from "react-router";
-import "@/index.css";
-import { BorrowSubPage } from "@/app/dashboard/borrow-subpage.tsx";
-import { EarnSubPage } from "@/app/dashboard/earn-subpage.tsx";
-import Page from "@/app/dashboard/page.tsx";
import App from "@/App.tsx";
import { DEFAULT_CHAIN } from "@/lib/constants";
+const Page = lazy(() => import("@/app/dashboard/page.tsx"));
+const EarnSubPage = lazy(() =>
+ import("@/app/dashboard/earn-subpage.tsx").then((module) => ({ default: module.EarnSubPage })),
+);
+const BorrowSubPage = lazy(() =>
+ import("@/app/dashboard/borrow-subpage.tsx").then((module) => ({ default: module.BorrowSubPage })),
+);
+
createRoot(document.getElementById("root")!).render(
@@ -30,8 +33,6 @@ createRoot(document.getElementById("root")!).render(
-
+
})
-