Skip to content

Commit

Permalink
fix(mfi-v2-ui): small ui tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@k0beLeenders
k0beLeenders committed Oct 3, 2023
1 parent 5251faa commit b454518
Show file tree
Hide file tree
Showing 8 changed files with 104 additions and 93 deletions.
54 changes: 26 additions & 28 deletions apps/marginfi-v2-ui/src/components/desktop/Earn/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand All @@ -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": {
Expand All @@ -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
Expand Down Expand Up @@ -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={{
Expand Down
2 changes: 1 addition & 1 deletion apps/marginfi-v2-ui/src/components/mobile/EmissionsBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={
<>
Expand Down
2 changes: 1 addition & 1 deletion .../marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
45 changes: 22 additions & 23 deletions apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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",
Expand Down Expand Up @@ -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)`,
},
});
Expand All @@ -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">
Expand Down
6 changes: 6 additions & 0 deletions apps/marginfi-v2-ui/src/hooks/useEffectOnce.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { EffectCallback, useEffect } from "react";

export function useEffectOnce(effect: EffectCallback) {
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(effect, []);
}
84 changes: 46 additions & 38 deletions apps/marginfi-v2-ui/src/pages/portfolio.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
);

Expand Down Expand Up @@ -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 ? (
Expand All @@ -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>
</>
);
Expand Down

0 comments on commit b454518

Please sign in to comment.