feat(mfi-v2-ui): Portfolio page

mrgnlabs · Sep 11, 2023 · 4899b14 · 4899b14
1 parent b5cd0d4
commit 4899b14
Show file tree

Hide file tree

Showing 17 changed files with 206 additions and 125 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsCheckingUser.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsCheckingUser.tsx
@@ -5,7 +5,7 @@ interface PointsCheckingUserProps {}
 
 export const PointsCheckingUser: FC<PointsCheckingUserProps> = ({}) => {
   return (
-    <Card className="w-2/3 bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+    <Card className="max-w-[800px] mx-auto w-full bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
       <CardContent>
         <div className="w-full flex flex-col justify-evenly items-center p-2 text-base text-white font-aeonik font-[400] rounded-xl text-center">
           <div>

diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsConnectWallet.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsConnectWallet.tsx
@@ -7,7 +7,7 @@ interface PointsConnectWalletProps {}
 
 export const PointsConnectWallet: FC<PointsConnectWalletProps> = ({}) => {
   return (
-    <Card className="w-2/3 bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+    <Card className="max-w-[800px] mx-auto w-full bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
       <CardContent>
         <div className="w-full flex flex-col justify-evenly items-center p-2 text-base text-white font-aeonik font-[400] rounded-xl text-center">
           <div>

diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsLeaderBoard.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsLeaderBoard.tsx
@@ -6,7 +6,7 @@ import { LeaderboardRow } from "@mrgnlabs/marginfi-v2-ui-state";
 
 interface PointsLeaderBoardProps {
   leaderboardData: LeaderboardRow[];
-  currentUserId: string;
+  currentUserId?: string;
 }
 
 export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ leaderboardData, currentUserId }) => {

diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx
@@ -1,26 +1,20 @@
+import React, { FC } from "react";
 import Image from "next/image";
-import { MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
-import { Card, CardContent, Skeleton, TableCell, TableRow, Typography } from "@mui/material";
-import React, { FC, useCallback, useMemo, useState } from "react";
-import { toast } from "react-toastify";
-import {
-  groupedNumberFormatter,
-  uiToNative,
-  usdFormatter,
-  numeralFormatter,
-  groupedNumberFormatterDyn,
-} from "@mrgnlabs/mrgn-common";
+import { Card, CardContent, Skeleton, Typography } from "@mui/material";
+
+import { numeralFormatter, groupedNumberFormatterDyn } from "@mrgnlabs/mrgn-common";
+import { UserPointsData } from "@mrgnlabs/marginfi-v2-ui-state";
+
 import { MrgnTooltip } from "~/components/common/MrgnTooltip";
-import { AccountSummary, UserPointsData } from "@mrgnlabs/marginfi-v2-ui-state";
 
-interface PointsLeaderBoardProps {
+interface PointsOverviewProps {
   userPointsData: UserPointsData;
 }
 
-export const PointsOverview: FC<PointsLeaderBoardProps> = ({ userPointsData }) => {
+export const PointsOverview: FC<PointsOverviewProps> = ({ userPointsData }) => {
   return (
     <>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 w-2/3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 max-w-[800px] mx-auto w-full">
         <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
           <CardContent>
             <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom>
@@ -65,7 +59,7 @@ export const PointsOverview: FC<PointsLeaderBoardProps> = ({ userPointsData }) =
           </CardContent>
         </Card>
       </div>
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 w-2/3">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 max-w-[800px] mx-auto w-full">
         <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
           <CardContent>
             <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom>

diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignIn.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignIn.tsx
@@ -30,7 +30,7 @@ export const PointsSignIn: FC<PointsSignInProps> = ({}) => {
   }, [connection, useAuthTx, walletContextState]);
 
   return (
-    <Card className="w-2/3 bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+    <Card className="max-w-[800px] mx-auto w-full bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
       <CardContent>
         <div className="w-full flex flex-col justify-evenly items-center p-2 text-base text-white font-aeonik font-[400] rounded-xl text-center">
           <div>

diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignUp.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignUp.tsx
@@ -46,7 +46,7 @@ export const PointsSignUp: FC<PointsSignUpProps> = ({ referralCode }) => {
   }, [connection, finalReferralCode, useAuthTx, walletContextState]);
 
   return (
-    <Card className="w-2/3 bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+    <Card className="max-w-[800px] mx-auto w-full bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
       <CardContent>
         <div className="w-full flex flex-col justify-evenly items-center p-2 text-base text-white font-aeonik font-[400] rounded-xl text-center">
           <div>

diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx
@@ -2,21 +2,13 @@ import React, { FC } from "react";
 import dynamic from "next/dynamic";
 
 import { useMrgnlendStore } from "~/store";
-import { useWalletContext } from "~/hooks/useWalletContext";
-import { UserStats } from "~/components/common/AccountSummary";
 
 const GlobalStats = dynamic(async () => (await import("~/components/common/AccountSummary/GlobalStats")).GlobalStats, {
   ssr: false,
 });
 
 const AccountSummary: FC = () => {
-  const [isStoreInitialized, accountSummary, protocolStats, selectedAccount] = useMrgnlendStore((state) => [
-    state.initialized,
-    state.accountSummary,
-    state.protocolStats,
-    state.selectedAccount,
-  ]);
-  const { connected } = useWalletContext();
+  const [protocolStats] = useMrgnlendStore((state) => [state.protocolStats]);
 
   return (
     <div className="flex flex-col w-full justify-between items-left gap-4">
@@ -29,7 +21,7 @@ const AccountSummary: FC = () => {
             borrows={protocolStats.borrows}
             deposits={protocolStats.deposits}
           />
-        </div>{" "}
+        </div>
       </div>
 
       {/* <div className="flex-1">

diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx
@@ -21,7 +21,7 @@ export const AssetCard: FC<{
   isInLendingMode: boolean;
   isConnected: boolean;
   marginfiAccount: MarginfiAccountWrapper | null;
-  inputRefs: React.MutableRefObject<Record<string, HTMLInputElement | null>>;
+  inputRefs?: React.MutableRefObject<Record<string, HTMLInputElement | null>>;
 }> = ({ bank, nativeSolBalance, isInLendingMode, marginfiAccount, inputRefs }) => {
   const { rateAP, assetWeight, isBankFilled, isBankHigh, bankCap } = useAssetItemData({ bank, isInLendingMode });
   const [mfiClient, fetchMrgnlendState] = useMrgnlendStore((state) => [state.marginfiClient, state.fetchMrgnlendState]);

diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx
@@ -8,10 +8,10 @@ import { useWalletContext } from "~/hooks/useWalletContext";
 
 export const AssetCardActions: FC<{
   bank: ExtendedBankInfo;
-  inputRefs: React.MutableRefObject<Record<string, HTMLInputElement | null>>;
   isBankFilled: boolean;
   isInLendingMode: boolean;
   currentAction: ActionType | "Connect";
+  inputRefs?: React.MutableRefObject<Record<string, HTMLInputElement | null>>;
   onCloseBalance: () => void;
   onBorrowOrLend: (amount: number) => void;
 }> = ({ bank, inputRefs, isBankFilled, currentAction, onCloseBalance, onBorrowOrLend }) => {

diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx
@@ -20,11 +20,6 @@ export const MobileAssetsList: FC = () => {
     state.nativeSolBalance,
     state.selectedAccount,
   ]);
-  const [lendZoomLevel, showBadges, setShowBadges] = useUserProfileStore((state) => [
-    state.lendZoomLevel,
-    state.showBadges,
-    state.setShowBadges,
-  ]);
   const inputRefs = useRef<Record<string, HTMLInputElement | null>>({});
   const [isInLendingMode, setIsInLendingMode] = useState(true);
 

diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MobileNavbar.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MobileNavbar.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import AirdropZone from "./AirdropZone";
+
 import { useUserProfileStore } from "~/store";
 import { useRouter } from "next/router";
 import { useFirebaseAccount } from "~/hooks/useFirebaseAccount";
@@ -40,11 +40,11 @@ const MobileNavbar: FC = () => {
             swap
           </Link>
           <Link
-            href={"/bridge"}
-            className={`${router.pathname === "/bridge" ? "hover-underline-static" : "hover-underline-animation"}`}
+            href={"/portfolio"}
+            className={`${router.pathname === "/portfolio" ? "hover-underline-static" : "hover-underline-animation"}`}
           >
             <Image className="m-auto" src="/pie_chart.svg" alt="wallet icon" width={18.9} height={18.9} />
-            bridge
+            portfolio
           </Link>
 
           {/* <Link

diff --git a/.../marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx b/.../marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx
@@ -1,56 +1,23 @@
-import { FC, useEffect, useMemo } from "react";
-import Link from "next/link";
-import Image from "next/image";
-import { useMrgnlendStore, useUserProfileStore } from "~/store";
-import { useRouter } from "next/router";
-import { useFirebaseAccount } from "~/hooks/useFirebaseAccount";
-import { useWalletContext } from "~/hooks/useWalletContext";
+import React, { FC, useMemo } from "react";
+import { Typography } from "@mui/material";
 
-import { MarginRequirementType, MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
-import { AccountSummary, UserPointsData } from "@mrgnlabs/marginfi-v2-ui-state";
+import { MarginRequirementType } from "@mrgnlabs/marginfi-client-v2";
 import { usdFormatterDyn, usdFormatter, groupedNumberFormatterDyn } from "@mrgnlabs/mrgn-common";
+
+import { useMrgnlendStore, useUserProfileStore } from "~/store";
+
 import { SemiCircleProgress } from "./SemiCircleProgress";
-import { useConnection, useWallet } from "@solana/wallet-adapter-react";
-import { Typography } from "@mui/material";
 
-// @todo implement second pretty navbar row
 export const MobilePortfolioOverview: FC = () => {
-  const [
-    marginfiClient,
-    fetchMrgnlendState,
-    selectedAccount,
-    accountSummary,
-    extendedBankInfos,
-    nativeSolBalance,
-    protocolStats,
-  ] = useMrgnlendStore((state) => [
-    state.marginfiClient,
-    state.fetchMrgnlendState,
-    state.selectedAccount,
-    state.accountSummary,
-    state.extendedBankInfos,
-    state.nativeSolBalance,
-    state.protocolStats,
-  ]);
-  const { wallet } = useWallet();
-  const connection = useConnection();
-
-  useEffect(() => {
-    fetchMrgnlendState();
-    const id = setInterval(() => fetchMrgnlendState().catch(console.error), 30_000);
-    return () => clearInterval(id);
-  }, [wallet]); // eslint-disable-line react-hooks/exhaustive-deps
-  // ^ crucial to omit both `connection` and `fetchMrgnlendState` from the dependency array
-  // TODO: fix...
+  const [selectedAccount, accountSummary] = useMrgnlendStore((state) => [state.selectedAccount, state.accountSummary]);
 
   const [userPointsData, currentFirebaseUser] = useUserProfileStore((state) => [
     state.userPointsData,
     state.currentFirebaseUser,
   ]);
 
-  console.log({ selectedAccount });
-
   const healthFactor = useMemo(() => {
+    console.log({ selectedAccount });
     if (selectedAccount) {
       const { assets, liabilities } = selectedAccount.computeHealthComponents(MarginRequirementType.Maintenance);
       return assets.isZero() ? 100 : assets.minus(liabilities).dividedBy(assets).toNumber() * 100;
@@ -60,10 +27,10 @@ export const MobilePortfolioOverview: FC = () => {
   }, [selectedAccount]);
 
   return (
-    <div className="bg-[#171C1F] rounded-xl p-6 flex flex-col gap-[10px] h-full w-full">
+    <div className="max-w-[800px] mx-auto w-full bg-[#131619] rounded-xl p-6 flex flex-col gap-[10px] h-full">
       <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">Your overview</div>
       <div className="text-center mx-auto">
-        <div className={`text-sm font-normal text-[#868E95] pb-4px`}>Health factor</div>
+        <div className={`text-sm font-normal text-[#868E95] pb-[4px]`}>Health factor</div>
         <SemiCircleProgress amount={healthFactor ?? 0} />
       </div>
       <div className="flex flex-row pt-[10px] flex-wrap gap-[10px]">

diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx
@@ -1,7 +1,8 @@
+import React, { useEffect, useRef, useState } from "react";
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
+
 import { percentFormatter } from "@mrgnlabs/mrgn-common";
-import React, { useEffect, useRef, useState } from "react";
 
 type Props = {
   amount: number;
@@ -55,7 +56,7 @@ export const SemiCircleProgress = ({ amount }: Props) => {
       width: "180px",
       height: "90px",
       borderRadius: "90px",
-      backgroundColor: "#171C1F",
+      backgroundColor: "#131619",
       top: "10px",
       marginLeft: "auto",
       marginRight: "auto",
@@ -84,15 +85,14 @@ export const SemiCircleProgress = ({ amount }: Props) => {
 
     ".rotatingCircleWrap": {
       position: "absolute",
-      backgroundColor: "#171C1F",
+      backgroundColor: "#131619",
       left: "0px",
       width: "200px",
       height: "100px",
       top: "100px",
     },
 
     ".rotatingCircle": {
-      // position: "absolute",
       overflow: "hidden",
       top: "0px",
       left: "0px",

diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/index.ts b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/index.ts
@@ -0,0 +1 @@
+export * from "./MobilePortfolioOverview";
diff --git a/apps/marginfi-v2-ui/src/pages/_app.tsx b/apps/marginfi-v2-ui/src/pages/_app.tsx
@@ -77,8 +77,10 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
             <Footer />
           </Desktop>
           <Mobile>
-            <div className="absolute top-[33px] right-[40px]">
-              <WalletButton />
+            <div className="relative w-full ">
+              <div className="absolute top-[33px] right-[40px]">
+                <WalletButton />
+              </div>
             </div>
             <MobileNavbar />
             <div className="w-full flex flex-col justify-center items-center pt-[24px]">

diff --git a/apps/marginfi-v2-ui/src/pages/index.tsx b/apps/marginfi-v2-ui/src/pages/index.tsx
@@ -1,13 +1,15 @@
-import React, { FC, useEffect } from "react";
-import { Banner } from "~/components/desktop/Banner";
-import { PageHeader } from "~/components/desktop/PageHeader";
-import { useWalletContext } from "~/hooks/useWalletContext";
+import React, { useEffect } from "react";
+import dynamic from "next/dynamic";
+import { useConnection } from "@solana/wallet-adapter-react";
+
 import { shortenAddress } from "@mrgnlabs/mrgn-common";
+
 import config from "~/config/marginfi";
-import { useMrgnlendStore } from "../store";
-import dynamic from "next/dynamic";
+import { useMrgnlendStore } from "~/store";
+import { useWalletContext } from "~/hooks/useWalletContext";
+import { Banner } from "~/components/desktop/Banner";
+import { PageHeader } from "~/components/desktop/PageHeader";
 import { OverlaySpinner } from "~/components/desktop/OverlaySpinner";
-import { useConnection } from "@solana/wallet-adapter-react";
 import { Desktop, Mobile } from "~/mediaQueries";
 
 const DesktopAccountSummary = () => {
@@ -123,7 +125,7 @@ const Home = () => {
 
       <Mobile>
         <PageHeader />
-        <div className="flex flex-col h-full justify-start content-start pt-[16px] w-4/5 max-w-7xl gap-4">
+        <div className="flex flex-col h-full justify-start content-start pt-[16px] w-4/5 max-w-7xl gap-4 mb-20">
           <MobileAccountSummary />
           <MobileAssetsList />
         </div>