Skip to content

Commit

Permalink
feat: pool sort / filter layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@chambaz
chambaz committed Nov 24, 2023
1 parent 110a762 commit 53424a0
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 73 deletions.
127 changes: 68 additions & 59 deletions apps/marginfi-v2-ui/src/components/common/AssetList/AssetListFilters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ import { MrgnContainedSwitch } from "~/components/common/MrgnContainedSwitch";
import { NewAssetBanner } from "~/components/common/AssetList";

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
import { IconFilter, IconSortAscending, IconSortDescending } from "~/components/ui/icons";

import { LendingModes, PoolTypes, SortType, SortAssetOption } from "~/types";
import { LendingModes, PoolTypes, SortType, sortDirection, SortAssetOption } from "~/types";

export const AssetListFilters = () => {
const { connected } = useWalletContext();
Expand Down Expand Up @@ -38,74 +39,82 @@ export const AssetListFilters = () => {

return (
<div className="col-span-full w-full space-y-5">
<div className="flex items-center justify-between">
<div className="flex w-[150px] h-[42px]">
<div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:gap-8">
<div className="flex w-[150px] h-[42px] mr-auto">
<MrgnLabeledSwitch
labelLeft="Lend"
labelRight="Borrow"
checked={lendingMode === LendingModes.BORROW}
onClick={() => setLendingMode(lendingMode === LendingModes.LEND ? LendingModes.BORROW : LendingModes.LEND)}
/>
</div>
<div className="space-y-2">
Filter
<Select
value={poolFilter}
onValueChange={(value) => {
setPoolFilter(value as PoolTypes);
}}
>
<SelectTrigger className="w-[180px]">
<SelectValue defaultValue="allpools" placeholder="Select pools" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All pools</SelectItem>
<SelectItem value="isolated">Isolated pools</SelectItem>
</SelectContent>
</Select>
<div
className={cn("flex items-center gap-1 text-sm", !connected && "opacity-50")}
onClick={(e) => {
e.stopPropagation();
if (connected) return;
setIsWalletAuthDialogOpen(true);
}}
>
<MrgnContainedSwitch
checked={isFilteredUserPositions}
onChange={() => setIsFilteredUserPositions(!isFilteredUserPositions)}
inputProps={{ "aria-label": "controlled" }}
className={cn(!connected && "pointer-events-none")}
/>
<div>Filter my positions</div>
</div>
<div className="space-y-2">
Sort
<Select
value={sortOption.value}
onValueChange={(value) => setSortOption(SORT_OPTIONS_MAP[value as SortType])}
>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Order by" />
</SelectTrigger>
<SelectContent>
{Object.values(SORT_OPTIONS_MAP).map((option) => {
const opt = option as SortAssetOption;
return (
<SelectItem key={opt.value} value={opt.value}>
<div className="flex items-center gap-2">
{lendingMode === LendingModes.LEND || !opt.borrowLabel ? opt.label : opt.borrowLabel}
</div>
</SelectItem>
);
})}
</SelectContent>
</Select>
<div className="flex flex-col md:flex-row md:items-center gap-3">
<div className="space-y-2 w-full md:w-auto">
<Select
value={poolFilter}
onValueChange={(value) => {
setPoolFilter(value as PoolTypes);
}}
>
<SelectTrigger className="md:w-[180px]">
<div className="flex items-center gap-2">
<IconFilter size={18} />
<SelectValue defaultValue="allpools" placeholder="Select pools" />
</div>
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All pools</SelectItem>
<SelectItem value="isolated">Isolated pools</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2 w-full md:w-auto">
<Select
value={sortOption.value}
onValueChange={(value) => setSortOption(SORT_OPTIONS_MAP[value as SortType])}
>
<SelectTrigger className="md:w-[220px]">
<div className="flex items-center gap-2">
{sortOption.direction === sortDirection.ASC ? (
<IconSortAscending size={18} />
) : (
<IconSortDescending size={18} />
)}
<SelectValue placeholder="Order by" />
</div>
</SelectTrigger>
<SelectContent>
{Object.values(SORT_OPTIONS_MAP).map((option) => {
const opt = option as SortAssetOption;
return (
<SelectItem key={opt.value} value={opt.value}>
<div className="flex items-center gap-2">
{lendingMode === LendingModes.LEND || !opt.borrowLabel ? opt.label : opt.borrowLabel}
</div>
</SelectItem>
);
})}
</SelectContent>
</Select>
</div>
</div>
</div>

<div
className={cn("flex items-center gap-1", !connected && "opacity-50")}
onClick={(e) => {
e.stopPropagation();
if (connected) return;
setIsWalletAuthDialogOpen(true);
}}
>
<MrgnContainedSwitch
checked={isFilteredUserPositions}
onChange={() => setIsFilteredUserPositions(!isFilteredUserPositions)}
inputProps={{ "aria-label": "controlled" }}
className={cn(!connected && "pointer-events-none")}
/>
<div>Filter my positions</div>
</div>

<NewAssetBanner asset="jlp" image="https://static.jup.ag/jlp/icon.png" />
</div>
);
Expand Down
20 changes: 6 additions & 14 deletions apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ import { Skeleton, Typography } from "@mui/material";
import { useMrgnlendStore, useUiStore } from "~/store";
import { useWalletContext } from "~/hooks/useWalletContext";

import { MrgnLabeledSwitch, MrgnTooltip } from "~/components/common";
import { MrgnTooltip } from "~/components/common";
import { LSTDialog, LSTDialogVariants, AssetListFilters, sortApRate, sortTvl } from "~/components/common/AssetList";
import { AssetCard } from "~/components/mobile/MobileAssetsList/AssetCard";

import { LendingModes } from "~/types";

export const MobileAssetsList = () => {
const { connected } = useWalletContext();

Expand All @@ -22,14 +24,15 @@ export const MobileAssetsList = () => {
state.selectedAccount,
]);

const [isFilteredUserPositions, sortOption, poolFilter] = useUiStore((state) => [
const [lendingMode, isFilteredUserPositions, sortOption, poolFilter] = useUiStore((state) => [
state.lendingMode,
state.isFilteredUserPositions,
state.sortOption,
state.poolFilter,
]);

const isInLendingMode = React.useMemo(() => lendingMode === LendingModes.LEND, [lendingMode]);
const inputRefs = React.useRef<Record<string, HTMLInputElement | null>>({});
const [isInLendingMode, setIsInLendingMode] = React.useState(true);
const [isLSTDialogOpen, setIsLSTDialogOpen] = React.useState(false);
const [lstDialogVariant, setLSTDialogVariant] = React.useState<LSTDialogVariants | null>(null);
const [lstDialogCallback, setLSTDialogCallback] = React.useState<(() => void) | null>(null);
Expand Down Expand Up @@ -78,17 +81,6 @@ export const MobileAssetsList = () => {
return (
<>
<AssetListFilters />
<div className="flex justify-between items-center">
<div className="flex w-[150px] h-[42px]">
<MrgnLabeledSwitch
labelLeft="Lend"
labelRight="Borrow"
checked={!isInLendingMode}
onClick={() => setIsInLendingMode(!isInLendingMode)}
/>
</div>
</div>

<div className="pb-2">
{poolFilter !== "isolated" && (
<div className="w-full">
Expand Down
6 changes: 6 additions & 0 deletions apps/marginfi-v2-ui/src/components/ui/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import {
IconExternalLink,
IconUserPlus,
IconClockHour4,
IconFilter,
IconSortAscending,
IconSortDescending,
} from "@tabler/icons-react";
import { cn } from "~/utils/themeUtils";

Expand Down Expand Up @@ -397,6 +400,9 @@ export {
IconUserPlus,
IconBrandDiscordFilled,
IconClockHour4,
IconFilter,
IconSortAscending,
IconSortDescending,

// customed icons
IconBrandGoogle,
Expand Down

0 comments on commit 53424a0

Please sign in to comment.