From b454518f4fee647273eeb5d53817af1cbbf81d85 Mon Sep 17 00:00:00 2001
From: Kobe Leenders <leenderskobe@gmail.com>
Date: Tue, 3 Oct 2023 03:07:38 +0200
Subject: [PATCH] fix(mfi-v2-ui): small ui tweaks

---
 .../src/components/desktop/Earn/index.tsx     | 54 ++++++------
 .../src/components/mobile/EmissionsBanner.tsx |  2 +-
 .../MobileAccountSummary.tsx                  |  2 +-
 .../AssetCard/AssetCardHeader.tsx             |  2 +-
 .../MobilePortfolioOverview.tsx               |  2 +-
 .../SemiCircleProgress.tsx                    | 45 +++++-----
 .../marginfi-v2-ui/src/hooks/useEffectOnce.ts |  6 ++
 apps/marginfi-v2-ui/src/pages/portfolio.tsx   | 84 ++++++++++---------
 8 files changed, 104 insertions(+), 93 deletions(-)
 create mode 100644 apps/marginfi-v2-ui/src/hooks/useEffectOnce.ts

diff --git a/apps/marginfi-v2-ui/src/components/desktop/Earn/index.tsx b/apps/marginfi-v2-ui/src/components/desktop/Earn/index.tsx
index af09114573..9ff36b8efb 100644
--- a/apps/marginfi-v2-ui/src/components/desktop/Earn/index.tsx
+++ b/apps/marginfi-v2-ui/src/components/desktop/Earn/index.tsx
@@ -209,26 +209,26 @@ const Earn = () => {
 
   return (
     <>
-      <div className="h-full flex flex-col justify-start items-center content-start py-[48px] w-4/5 max-w-7xl gap-4">
-        <div className="w-[360px] flex flex-col items-center gap-6">
-          <div className="w-[300px] h-[100px] flex flex-col gap-5 justify-center">
-            <div className="flex flex-col gap-1 w-full justify-center">
-              {connected && (
-                <div className="text-2xl flex justify-center gap-2" style={{ fontWeight: 400 }}>
-                  Your total deposits:
-                  <span style={{ color: "#51B56A" }}>
-                    {
-                      // Since users will only be able to deposit to the LIP,
-                      // the balance of their account should match total deposits.
-                    }
-                    {usdFormatter.format(lipAccount?.getTotalBalance().toNumber() || 0)}
-                  </span>
-                </div>
-              )}
-            </div>
-            <div className="relative col-span-full flex flex-col justify-center items-center">
+      <div className="h-full flex flex-col justify-start items-center content-start max-w-7xl gap-4 px-[32px] py-[24px] rounded-xl mt-10">
+        <div className="flex flex-col items-center gap-6">
+          <div className="flex flex-col gap-1 w-full justify-center">
+            {connected && (
+              <div className="text-2xl flex justify-center gap-2 " style={{ fontWeight: 400 }}>
+                Your total deposits:
+                <span style={{ color: "#51B56A" }}>
+                  {
+                    // Since users will only be able to deposit to the LIP,
+                    // the balance of their account should match total deposits.
+                  }
+                  {usdFormatter.format(lipAccount?.getTotalBalance().toNumber() || 0)}
+                </span>
+              </div>
+            )}
+          </div>
+          <div className="px-10 w-full mb-7 mt-3">
+            <div className="relative w-full flex flex-col justify-center items-center">
               <LinearProgress
-                className="h-1 w-[300px] rounded-lg"
+                className="h-1 w-full rounded-lg"
                 variant="determinate"
                 color="inherit"
                 value={progressPercent}
@@ -239,13 +239,11 @@ const Earn = () => {
                   },
                 }}
               />
-              <div className="flex absolute w-[300px] justify-between">
-                <Marks marks={marks} />
-              </div>
+              <Marks marks={marks} />
             </div>
           </div>
 
-          <div className="w-[300px] flex flex-col my-4 justify-cen dter font-[rgb(227, 227, 227)]">
+          <div className="flex flex-col">
             <div className="flex justify-center gap-2 text-[#484848] text-xl" style={{ fontWeight: 400 }}>
               FUNDS WILL BE LOCKED FOR:
             </div>
@@ -291,7 +289,7 @@ const Earn = () => {
           </div>
         </div>
       </div>
-      {lipAccount && (
+      {lipAccount?.deposits.length > 0 && (
         <>
           <div className="text-2xl flex justify-center gap-2 mb-[40px]" style={{ fontWeight: 400 }}>
             Your deposits
@@ -470,7 +468,7 @@ const AssetSelection: FC<AssetSelectionProps> = ({ whitelistedCampaigns, setSele
   const defaultCampaign = whitelistedCampaigns[0];
 
   return (
-    <FormControl className="min-w-[360px] w-[360px]">
+    <FormControl className="w-full">
       <RadioGroup
         defaultValue={defaultCampaign.campaign.publicKey.toBase58()}
         className="flex flex-col justify-center items-center gap-2"
@@ -487,7 +485,7 @@ const AssetSelection: FC<AssetSelectionProps> = ({ whitelistedCampaigns, setSele
               value={campaign.publicKey.toBase58()}
               control={
                 <Radio
-                  className="bg-[#1E1E1E] mr-2"
+                  className="bg-[#0f1111] mr-2"
                   sx={{
                     color: "#1E1E1E",
                     "&.Mui-checked": {
@@ -497,7 +495,7 @@ const AssetSelection: FC<AssetSelectionProps> = ({ whitelistedCampaigns, setSele
                 />
               }
               label={
-                <div className="w-[295px] flex justify-between items-center">
+                <div className="w-[295px] flex justify-between items-center ">
                   <div>{getTokenSymbol(campaign.bank, bankMetadataMap || {})}</div>
                   <div className="flex gap-4 justify-center items-center">
                     <div
@@ -626,7 +624,7 @@ export const EarnAction: FC<EarnActionProps> = ({ children, spinning, disabled,
 
   return connected ? (
     <Button
-      className={`bg-white text-black normal-case text-sm min-w-[360px] w-[360px] h-12 rounded-[100px] ${
+      className={`bg-white text-black normal-case text-sm min-w-[360px] w-[360px] h-12 ${
         disabled && "cursor-not-allowed"
       }`}
       style={{
diff --git a/apps/marginfi-v2-ui/src/components/mobile/EmissionsBanner.tsx b/apps/marginfi-v2-ui/src/components/mobile/EmissionsBanner.tsx
index 4cf3df2ba5..db99739e47 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/EmissionsBanner.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/EmissionsBanner.tsx
@@ -27,7 +27,7 @@ const EmissionsBanner: FC = () => {
 
   return (
     <button
-      className="btn-gleam w-1/2 h-12 flex items-center justify-center px-2 bg-gradient-to-tr from-[#DCE85DBB] to-[#22282C] rounded-md outline outline-2 outline-offset-2 outline-[#DCE85DBB]"
+      className="btn-gleam w-1/2 h-12 flex items-center justify-center px-2 bg-gradient-to-tr from-[#DCE85DBB] to-[#22282C] rounded-md outline outline-2 outline-offset-2 outline-[#DCE85DBB] max-w-[260px]"
       onClick={async () => {
         if (!wallet || !selectedAccount || bankAddressesWithEmissions.length === 0) return;
         await collectRewardsBatch(connection, wallet, selectedAccount, bankAddressesWithEmissions);
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx
index 0aa0fb1592..7dab08c9f0 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx
@@ -11,7 +11,7 @@ const AccountSummary: FC = () => {
   const [protocolStats] = useMrgnlendStore((state) => [state.protocolStats]);
 
   return (
-    <div className="flex flex-col w-full justify-between items-left gap-4">
+    <div className="flex flex-col w-full justify-between items-left gap-4  max-w-[900px]">
       <div className="lg:block flex-1">
         <div className="h-full rounded-xl">
           <GlobalStats
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardHeader.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardHeader.tsx
index 3bf5e3c71e..9f6e05cf9c 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardHeader.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardHeader.tsx
@@ -29,7 +29,7 @@ export const AssetCardHeader: FC<{
       <div className={`${isInLendingMode ? "text-[#75ba80]" : "text-[#e07d6f]"} text-base my-auto flex gap-2 items-center`}>
         <div>
           {bank.meta.tokenSymbol === "UXD" && isInLendingMode && (
-            <div className="flex justify-center sm:justify-end mt-[1px]">
+            <div className="flex justify-center justify-end mt-[1px]">
               <MrgnTooltip
                 title={
                   <>
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx
index f2cd799f0e..dc64057bd2 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx
@@ -26,7 +26,7 @@ export const MobilePortfolioOverview: FC = () => {
   }, [selectedAccount]);
 
   return (
-    <div className="max-w-[800px] mx-auto w-full bg-[#1A1F22] rounded-xl px-6 flex flex-col gap-[10px] h-full">
+    <div className="max-w-[800px] mx-auto w-full bg-[#1A1F22] 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>
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx
index d591bf7eaa..b595edb369 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
-import { keyframes } from "@emotion/react";
+import React, { useMemo, useRef } from "react";
 import styled from "@emotion/styled";
 import { percentFormatter } from "@mrgnlabs/mrgn-common";
 
@@ -8,33 +7,35 @@ type Props = {
 };
 
 export const SemiCircleProgress = ({ amount }: Props) => {
-  const rotationAnimation = useRef(null);
-  const [progressColor, setProgressColor] = useState<string>("#75BA80");
+  const rotateAnimation = useRef(null);
 
-  useEffect(() => {
+  const progressColor = useMemo(() => {
     if (amount) {
-      let color;
-
       if (amount >= 50) {
-        color = "#75ba80"; // green color
+        return "#75ba80"; // green color
       } else if (amount >= 25) {
-        color = "#FABD12"; // yellow color
+        return "#FABD12"; // yellow color
       } else {
-        color = "#E06D6F"; // red color
+        return "#E06D6F"; // red color
       }
-
-      setProgressColor(color);
     }
   }, [amount]);
 
-  const rotateAnimation = keyframes`
-    0% {
-      transform: translateY(-50px) rotate(0deg) translateY(50px);
-    }
-    100% {
-      transform: translateY(-50px) rotate(${(amount / 100) * 180}deg) translateY(50px);
-    }
-    `;
+  // Bugged annimation
+  // useEffectOnce(() => {
+  //   if (!rotateAnimation.current) {
+  //     console.log("how?");
+  //     const castAmount = amount.toString();
+  //     rotateAnimation.current = keyframes`
+  //       0% {
+  //         transform: translateY(-50px) rotate(0deg) translateY(50px);
+  //       }
+  //       100% {
+  //         transform: translateY(-50px) rotate(${(Number(castAmount) / 100) * 180}deg) translateY(50px);
+  //       }
+  //     `;
+  //   }
+  // });
 
   const SemiCircleWrapper = styled.div({
     position: "relative",
@@ -101,8 +102,6 @@ export const SemiCircleProgress = ({ amount }: Props) => {
       width: "200px",
       height: "100px",
       backgroundColor: progressColor,
-      animation: rotateAnimation,
-      animationDuration: "1s",
       transform: `translateY(-50px) rotate(${(amount / 100) * 180}deg) translateY(50px)`,
     },
   });
@@ -111,7 +110,7 @@ export const SemiCircleProgress = ({ amount }: Props) => {
     <SemiCircleWrapper>
       <div className="exteriorCircle">
         <div className="rotatingCircleWrap">
-          <div className="rotatingCircle" ref={rotationAnimation} color={progressColor} />
+          <div className="rotatingCircle" />
         </div>
 
         <div className="interiorCircle">
diff --git a/apps/marginfi-v2-ui/src/hooks/useEffectOnce.ts b/apps/marginfi-v2-ui/src/hooks/useEffectOnce.ts
new file mode 100644
index 0000000000..287d7336c4
--- /dev/null
+++ b/apps/marginfi-v2-ui/src/hooks/useEffectOnce.ts
@@ -0,0 +1,6 @@
+import { EffectCallback, useEffect } from "react";
+
+export function useEffectOnce(effect: EffectCallback) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(effect, []);
+}
diff --git a/apps/marginfi-v2-ui/src/pages/portfolio.tsx b/apps/marginfi-v2-ui/src/pages/portfolio.tsx
index 1dd953df93..20ce11cb42 100644
--- a/apps/marginfi-v2-ui/src/pages/portfolio.tsx
+++ b/apps/marginfi-v2-ui/src/pages/portfolio.tsx
@@ -44,25 +44,29 @@ const PortfolioPage = () => {
 
   const lendingBanks = useMemo(
     () =>
-      sortedBanks && isStoreInitialized ?
-      sortedBanks
-        .filter((b) => b.info.rawBank.config.assetWeightInit.toNumber() > 0)
-        .filter((b) => b.isActive && b.position.isLending)
-        .sort(
-          (a, b) => b.info.state.totalDeposits * b.info.state.price - a.info.state.totalDeposits * a.info.state.price
-        ) : [],
+      sortedBanks && isStoreInitialized
+        ? sortedBanks
+            .filter((b) => b.info.rawBank.config.assetWeightInit.toNumber() > 0)
+            .filter((b) => b.isActive && b.position.isLending)
+            .sort(
+              (a, b) =>
+                b.info.state.totalDeposits * b.info.state.price - a.info.state.totalDeposits * a.info.state.price
+            )
+        : [],
     [sortedBanks, isStoreInitialized]
   );
 
   const borrowingBanks = useMemo(
     () =>
-      sortedBanks && isStoreInitialized ?
-      sortedBanks
-        .filter((b) => b.info.rawBank.config.assetWeightInit.toNumber() > 0)
-        .filter((b) => b.isActive && !b.position.isLending)
-        .sort(
-          (a, b) => b.info.state.totalDeposits * b.info.state.price - a.info.state.totalDeposits * a.info.state.price
-        ) : [],
+      sortedBanks && isStoreInitialized
+        ? sortedBanks
+            .filter((b) => b.info.rawBank.config.assetWeightInit.toNumber() > 0)
+            .filter((b) => b.isActive && !b.position.isLending)
+            .sort(
+              (a, b) =>
+                b.info.state.totalDeposits * b.info.state.price - a.info.state.totalDeposits * a.info.state.price
+            )
+        : [],
     [sortedBanks, isStoreInitialized]
   );
 
@@ -149,7 +153,7 @@ const PortfolioPage = () => {
           </div>
         </div>
         {sortedBanks && (
-          <div className="col-span-full">
+          <div className="col-span-full w-full max-w-[900px]">
             <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">Lending positions</div>
             <div className="flex flew-row flex-wrap gap-4">
               {isStoreInitialized ? (
@@ -176,31 +180,35 @@ const PortfolioPage = () => {
           </div>
         )}
 
-        <div className="col-span-full">
-          <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">Borrowing positions</div>
-          <div className="flex flew-row flex-wrap gap-4">
-            {isStoreInitialized ? (
-              borrowingBanks.length > 0 ? (
-                borrowingBanks.map((bank) => (
-                  <AssetCard
-                    key={bank.meta.tokenSymbol}
-                    nativeSolBalance={nativeSolBalance}
-                    bank={bank}
-                    isInLendingMode={false}
-                    isConnected={connected}
-                    marginfiAccount={selectedAccount}
-                  />
-                ))
+        {sortedBanks && (
+          <div className="col-span-full w-full max-w-[900px]">
+            <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">
+              Borrowing positions
+            </div>
+            <div className="flex flew-row flex-wrap gap-4">
+              {isStoreInitialized ? (
+                borrowingBanks.length > 0 ? (
+                  borrowingBanks.map((bank) => (
+                    <AssetCard
+                      key={bank.meta.tokenSymbol}
+                      nativeSolBalance={nativeSolBalance}
+                      bank={bank}
+                      isInLendingMode={false}
+                      isConnected={connected}
+                      marginfiAccount={selectedAccount}
+                    />
+                  ))
+                ) : (
+                  <Typography color="#868E95" className="font-aeonik font-[300] text-sm flex gap-1" gutterBottom>
+                    No borrowing positions found.
+                  </Typography>
+                )
               ) : (
-                <Typography color="#868E95" className="font-aeonik font-[300] text-sm flex gap-1" gutterBottom>
-                  No borrowing positions found.
-                </Typography>
-              )
-            ) : (
-              <Skeleton sx={{ bgcolor: "grey.900" }} variant="rounded" width={390} height={215} />
-            )}
+                <Skeleton sx={{ bgcolor: "grey.900" }} variant="rounded" width={390} height={215} />
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </>
   );