Skip to content

Commit

Permalink
Merge pull request #223 from mrgnlabs/man0s/ui-touch-ups
Browse files Browse the repository at this point in the history 
Man0s/UI touch ups
  • Loading branch information
@losman0s
losman0s authored Sep 7, 2023
2 parents 3f1143a + c83c70a commit 3c52ab9
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 71 deletions.
27 changes: 0 additions & 27 deletions apps/marginfi-v2-ui/src/components/AssetsList/AssetRow/AssetRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ import { useWalletContext } from "~/components/useWalletContext";

const CLOSE_BALANCE_TOAST_ID = "close-balance";
const BORROW_OR_LEND_TOAST_ID = "borrow-or-lend";
const REFRESH_ACCOUNT_TOAST_ID = "refresh-account";

const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} />
Expand Down Expand Up @@ -140,23 +139,10 @@ const AssetRow: FC<{

setBorrowOrLendAmount(0);

toast.loading("Refreshing state", { toastId: REFRESH_ACCOUNT_TOAST_ID });
try {
setIsRefreshingStore(true);
await fetchMrgnlendState();
toast.update(REFRESH_ACCOUNT_TOAST_ID, {
render: "Refreshing state 👍",
type: toast.TYPE.SUCCESS,
autoClose: 2000,
isLoading: false,
});
} catch (error: any) {
toast.update(REFRESH_ACCOUNT_TOAST_ID, {
render: `Error while reloading state: ${error.message}`,
type: toast.TYPE.ERROR,
autoClose: 5000,
isLoading: false,
});
console.log("Error while reloading state");
console.log(error);
}
Expand Down Expand Up @@ -290,23 +276,10 @@ const AssetRow: FC<{
setBorrowOrLendAmount(0);

// -------- Refresh state
toast.loading("Refreshing state", { toastId: REFRESH_ACCOUNT_TOAST_ID });
try {
setIsRefreshingStore(true);
await fetchMrgnlendState();
toast.update(REFRESH_ACCOUNT_TOAST_ID, {
render: "Refreshing state 👍",
type: toast.TYPE.SUCCESS,
autoClose: 2000,
isLoading: false,
});
} catch (error: any) {
toast.update(REFRESH_ACCOUNT_TOAST_ID, {
render: `Error while reloading state: ${error.message}`,
type: toast.TYPE.ERROR,
autoClose: 5000,
isLoading: false,
});
console.log("Error while reloading state");
console.log(error);
}
Expand Down
24 changes: 12 additions & 12 deletions apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,9 @@ const Navbar: FC = () => {

return (
<header>
<nav className="fixed w-full top-0 h-[64px] z-20 bg-[#0F1111]">
<div className="w-full top-0 flex justify-between items-center h-16 text-2xl z-10 border-b-[0.5px] border-[#1C2125] px-4">
<div className="h-full w-1/2 flex justify-start items-center z-10 text-base font-[300] gap-4 lg:gap-8">
<nav className="fixed w-full top-0 h-[64px] z-20">
<div className="w-full top-0 flex justify-between items-center h-16 text-sm font-[500] text-[#868E95] z-10 border-b-[0.5px] border-[#1C2125] px-4">
<div className="h-full w-1/2 flex justify-start items-center z-10 gap-4 lg:gap-8">
<Link
href={"https://app.marginfi.com"}
className="h-[35.025px] w-[31.0125px] min-h-[35.025px] min-w-[31.0125px] flex justify-center items-center"
Expand All @@ -133,7 +133,7 @@ const Navbar: FC = () => {
badgeContent={"l"}
invisible={!showBadges}
>
<Link href={"/"} className="glow-on-hover hidden md:block">
<Link href={"/"} className={`${router.pathname === "/" ? "hover-underline-static" : "hover-underline-animation"} hidden md:block`}>
lend
</Link>
</Badge>
Expand All @@ -152,7 +152,7 @@ const Navbar: FC = () => {
badgeContent={"s"}
invisible={!showBadges}
>
<Link href={"/swap"} className="glow-on-hover">
<Link href={"/swap"} className={`${router.pathname === "/swap" ? "hover-underline-static" : "hover-underline-animation"}`}>
swap
</Link>
</Badge>
Expand All @@ -170,7 +170,7 @@ const Navbar: FC = () => {
badgeContent={"b"}
invisible={!showBadges}
>
<Link href={"/bridge"} className="glow-on-hover">
<Link href={"/bridge"} className={`${router.pathname === "/bridge" ? "hover-underline-static" : "hover-underline-animation"}`}>
bridge
</Link>
</Badge>
Expand All @@ -190,7 +190,7 @@ const Navbar: FC = () => {
invisible={!showBadges}
className="hidden md:block"
>
<Link href={"/earn"} className="glow-on-hover hidden md:block">
<Link href={"/earn"} className={`${router.pathname === "/earn" ? "hover-underline-static" : "hover-underline-animation"} hidden md:block`}>
earn
</Link>
</Badge>
Expand All @@ -210,15 +210,15 @@ const Navbar: FC = () => {
invisible={!showBadges}
className="hidden md:block"
>
<Link href={"https://omni.marginfi.com"} className="glow-on-hover hidden md:block">
<Link href={"https://omni.marginfi.com"} className="hover-underline-animation hidden md:block">
omni
</Link>
</Badge>
{process.env.NEXT_PUBLIC_MARGINFI_FEATURES_AIRDROP === "true" && connected && <AirdropZone />}
</div>
<div className="h-full w-1/2 flex justify-end items-center z-10 text-base font-[300] gap-4 lg:gap-8">
<div className="h-full w-1/2 flex justify-end items-center z-10 gap-4 lg:gap-8 text-[#868E95]">
<div
className="glow-uxd whitespace-nowrap cursor-pointer hidden md:block"
className="whitespace-nowrap cursor-pointer hidden md:block"
onClick={() => {
if (selectedAccount && extendedBankInfos?.find((b) => b.meta.tokenSymbol === "UXD")?.info.rawBank) {
selectedAccount!.withdrawEmissions(
Expand All @@ -236,10 +236,10 @@ const Navbar: FC = () => {
} UXP`}
</div>

<Link href={"/points"} className="glow whitespace-nowrap">
<Link href={"/points"} className="whitespace-nowrap">
{connected && currentFirebaseUser
? `${groupedNumberFormatterDyn.format(Math.round(userPointsData.totalPoints))} points`
: "P...P...POINTS!"}
: "points"}
</Link>

<WalletButton />
Expand Down
29 changes: 1 addition & 28 deletions apps/marginfi-v2-ui/src/components/UserPositions/UserPositionRow/UserPositionRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { ActiveBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";

const CLOSE_BALANCE_TOAST_ID = "close-balance";
const WITHDRAW_OR_REPAY_TOAST_ID = "withdraw-or-repay";
const REFRESH_ACCOUNT_TOAST_ID = "refresh-account";

interface UserPositionRowProps {
activeBankInfo: ActiveBankInfo;
Expand Down Expand Up @@ -67,22 +66,9 @@ const UserPositionRow: FC<UserPositionRowProps> = ({ activeBankInfo, marginfiAcc

setWithdrawOrRepayAmount(0);

toast.loading("Refreshing state", { toastId: REFRESH_ACCOUNT_TOAST_ID });
try {
await reloadPositions();
toast.update(REFRESH_ACCOUNT_TOAST_ID, {
render: "Refreshing state 👍",
type: toast.TYPE.SUCCESS,
autoClose: 2000,
isLoading: false,
});
} catch (error: any) {
toast.update(REFRESH_ACCOUNT_TOAST_ID, {
render: `Error while reloading state: ${error.message}`,
type: toast.TYPE.ERROR,
autoClose: 5000,
isLoading: false,
});
console.log("Error while reloading state");
console.log(error);
}
Expand Down Expand Up @@ -135,22 +121,9 @@ const UserPositionRow: FC<UserPositionRowProps> = ({ activeBankInfo, marginfiAcc

setWithdrawOrRepayAmount(0);

toast.loading("Refreshing state", { toastId: REFRESH_ACCOUNT_TOAST_ID });
try {
await reloadPositions();
toast.update(REFRESH_ACCOUNT_TOAST_ID, {
render: "Refreshing state 👍",
type: toast.TYPE.SUCCESS,
autoClose: 2000,
isLoading: false,
});
} catch (error: any) {
toast.update(REFRESH_ACCOUNT_TOAST_ID, {
render: `Error while reloading state: ${error.message}`,
type: toast.TYPE.ERROR,
autoClose: 5000,
isLoading: false,
});
console.log("Error while reloading state");
console.log(error);
}
Expand Down Expand Up @@ -208,7 +181,7 @@ const UserPositionRow: FC<UserPositionRowProps> = ({ activeBankInfo, marginfiAcc
</TableCell>

<TableCell className="text-white font-aeonik p-0 border-none" align="right">
<div className="h-full w-full flex justify-end items-center ml-2 xl:ml-0 pl-2 sm:px-2">
<div className="h-full w-full flex justify-end items-center pl-2 sm:px-2">
<UserPositionRowAction
onClick={isDust ? closeBalance : withdrawOrRepay}
disabled={
Expand Down
6 changes: 3 additions & 3 deletions apps/marginfi-v2-ui/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,11 @@ const Home = () => {
<>
<PageHeader />
<div className="flex flex-col h-full justify-start content-start pt-[64px] sm:pt-[16px] w-4/5 max-w-7xl gap-4">
{walletAddress && wallet && selectedAccount && !selectedAccount.authority.equals(walletAddress) && (
{walletAddress && selectedAccount && isOverride && (
<Banner
text={`Read-only view of ${shortenAddress(walletAddress)}'s account ${shortenAddress(
text={`Read-only view of ${shortenAddress(
selectedAccount.address.toBase58()
)}`}
)} (owner: ${shortenAddress(walletAddress)}) - All actions are simulated`}
backgroundColor="#7fff00"
/>
)}
Expand Down
43 changes: 42 additions & 1 deletion apps/marginfi-v2-ui/src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,47 @@ a {
fill: #DCE85D !important;
}

.hover-underline-static {
display: inline-block;
position: relative;
}

.hover-underline-static::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(1);
height: 2px;
bottom: 0;
left: 0;
background-color: #7fff00;
transform-origin: center;
transition: transform 0.25s ease-out;
}

.hover-underline-animation {
display: inline-block;
position: relative;
}

.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #7fff00;
transform-origin: center;
transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: center;
}

.glow {
text-shadow: 0 0 10px #DCE85D, 0 0 30px #DCE85D;
color: #DCE85D !important;
Expand All @@ -81,4 +122,4 @@ a {
width: 420px;
padding-left: 0px;
padding-right: 0px;
}
}

1 comment on commit 3c52ab9

@vercel
Copy link

@vercel vercel bot commented on 3c52ab9 Sep 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

marginfi-v2-ui – ./apps/marginfi-v2-ui

mrgn-ts-marginfi-v2-ui.vercel.app
marginfi-v2-ui-git-production-mrgn.vercel.app
mfi.gg
app.marginfi.com
www.mfi.gg
marginfi-v2-ui-mrgn.vercel.app

Please sign in to comment.