Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat/fixed and improved pool page #698

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat/fixed and improved pool page #698

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fc2e6f4
completed setup and started restructuring page.
Prosper1218 Mar 5, 2025
578a62d
removed overflows, restyled input and changed breakpoints. cleaned up…
Prosper1218 Mar 5, 2025
2fdb26e
attended to requested changes
Prosper1218 Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8,774 changes: 8,774 additions & 0 deletions margin_frontend/package-lock.json
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions margin_frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,3 +99,12 @@
--text-header-text-size: 64px;
--leading-header-text-lineheight: 68.35px;
}
#root{
overflow-x: hidden;
}
.bricolage{
font-family: var(--font-bricolageGrotesque), sans-serif;
}



2 changes: 1 addition & 1 deletion margin_frontend/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const Route = createRootRouteWithContext<{
function RootComponent() {
return (
<>
<div className="flex flex-col w-screen min-h-screen bg-pageBg md:justify-between">
<div className="flex flex-col w-screen min-h-screen bg-[#101110] md:justify-between overflow-x-hidden">
<Header />
<Outlet />
<Footer />
Expand Down
91 changes: 29 additions & 62 deletions margin_frontend/src/routes/pool.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import { createFileRoute } from "@tanstack/react-router";
import { Input } from "../ui/core/input";
import PoolCard from "../ui/core/pool-card";
import PoolTable from "../ui/core/pool-table";
import { Footer } from "../ui/layout/footer";
import { Header } from "../ui/layout/header";
import { Tabs } from "../ui/core/tab";
import { Button } from "../ui/core/button";
export const Route = createFileRoute("/pool")({
component: Pool,
});

function Pool() {
const [activeTab, setActiveTab] = useState("all");


// Sample pool data
const pools = Array(8)
Expand All @@ -27,94 +27,61 @@ function Pool() {
riskLevel: "Low",
isDegen: true,
}));

const Tab = [
{
label: 'All',
content:<PoolTable pools={pools}/>
},
{
label: 'Stable',
content: 'to be replced with stable component'
},
{
label: 'Volatile',
content: 'to be replaced with volatile component'
},
]
return (
<div className="flex-1 max-w-7xl mx-auto w-full px-4 py-6">
<div className="flex lg:hidden items-center justify-between mb-8">
<div className="flex-1 max-w-7xl mx-auto w-full px-4 pb-6 pt-2 " >
<div className="flex md:hidden items-center justify-between mb-8">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#848484]" />
<Input
placeholder="Search..."
className="pl-10 h-12 w-full bg-[#1a1a1a] border-[#333] rounded-full text-[#848484]"
className="pl-10 h-[48px] w-full max-w-[305px] text-[#848484] bg-transparent border-[#191819] border-solid border-[1px] rounded-[8px] text-[#848484] bricolage"
/>
</div>
<button className="ml-4 text-gray-400 lg:hidden">
<button className="ml-4 text-gray-400 md:hidden">
<Menu size={24} />
</button>
</div>

<div className="my-8 max-w-[400px]">
<h1 className="text-4xl font-bold mb-3 text-btnBorderColor">POOLS</h1>
<p className="text-baseWhite ">
<h1 className="text-[26px] font-[700] mb-3 text-btnBorderColor bricolage">POOLS</h1>
<p className="text-baseWhite bricolage text-[14px] font-[400]">
Earn passive income by providing liquidity to top trading pairs. Choose a pool, deposit funds, and start
earning.
</p>
</div>

<div className="hidden lg:grid grid-cols-7 gap-4">
<div className=" col-span-5">
<div className="border-b border-[#333] mb-6">
<div className="flex">
<button
onClick={() => {
setActiveTab("all");
}}
className={`px-6 py-4 font-medium text-sm relative ${
activeTab === "all" ? "text-white" : "text-gray-400"
}`}
>
All
{activeTab === "all" && <span className="absolute bottom-0 left-0 w-full h-[2px] bg-white"></span>}
</button>
<button
onClick={() => {
setActiveTab("stable");
}}
className={`px-6 py-4 font-medium text-sm relative ${
activeTab === "stable" ? "text-white" : "text-gray-400"
}`}
>
Stable
{activeTab === "stable" && <span className="absolute bottom-0 left-0 w-full h-[2px] bg-white"></span>}
</button>
<button
onClick={() => {
setActiveTab("volatile");
}}
className={`px-6 py-4 font-medium text-sm relative ${
activeTab === "volatile" ? "text-white" : "text-gray-400"
}`}
>
Volatile
{activeTab === "volatile" && <span className="absolute bottom-0 left-0 w-full h-[2px] bg-white"></span>}
</button>
</div>
</div>
<div className="hidden lg:block">
<PoolTable pools={pools} />
</div>{" "}
<div className="grid lg:grid-cols-7 gap-4">
<div className="col-span-5">
<Tabs defaultActiveIndex={0} tabs={Tab} />
</div>
<div className="col-span-2">
<div className="col-span-2 hidden lg:block">
<div className="flex items-center justify-between mb-8">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#848484]" />
<Input
placeholder="Search..."
className="pl-10 h-12 w-full bg-[#1a1a1a] border-[#333] rounded-full text-[#848484]"
className="pl-10 h-[48px] w-full max-w-[305px] text-[#848484] bg-transparent border-[#191819] border-solid border-[1px] rounded-[8px] text-[#848484] bricolage"
/>
</div>
<button className="ml-4 text-gray-400 lg:hidden">
<Menu size={24} />
</button>
</div>
</div>
</div>

<div className="lg:hidden space-y-4">
{pools.map((pool) => (
<PoolCard key={pool.id} pool={pool} />
))}
</div>

</div>
);
}
2 changes: 1 addition & 1 deletion margin_frontend/src/ui/core/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border:none",
className,
)}
ref={ref}
Expand Down
14 changes: 7 additions & 7 deletions margin_frontend/src/ui/core/pool-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ interface PoolCardProps {

export default function PoolCard({ pool }: PoolCardProps) {
return (
<div className="bg-[#1a1a1a] rounded-lg p-5 text-baseWhite">
<div className="flex items-center justify-between mb-4">
<div className="bg-[#090a08] bricolage rounded-lg p-5 text-baseWhite">
<div className="flex items-center justify-between mb-2 border-b-solid border-b-[1px] border-b-[#191b19] py-2">
<div className="flex items-center">
<div className="relative flex mr-3">
<div className="h-10 w-10 rounded-full overflow-hidden border-2 border-[#1a1a1a] bg-blue-900">
Expand All @@ -36,19 +36,19 @@ export default function PoolCard({ pool }: PoolCardProps) {
</div>
</div>

{pool.isDegen && <div className="bg-[#333] px-2 py-1 rounded text-xs text-gray-300">Degen</div>}
{pool.isDegen && <div className="bg-[#333] px-2 py-1 rounded text-xs text-gray-300 flex flex-row items-center gap-1"> <div className="h-[8px] w-[8px] bg-[#898989] rounded-[2px]"></div>Degen</div>}
Copy link
Collaborator

Choose a reason for hiding this comment

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

sizes can be set with size-2, instead of arbitrary values, also colros should be put into theme inside index.css

</div>

<div className="grid grid-cols-3 gap-4 mb-4">
<div className="grid grid-cols-3 gap-4 mb-4 justify-between">
<div>
<div className="text-gray-400 text-sm mb-1">Liquidity</div>
<div className="font-bold">{pool.liquidity}</div>
</div>
<div>
<div className="text-center">
<div className="text-gray-400 text-sm mb-1">APY</div>
<div className="font-bold text-green-500">{pool.totalApy}</div>
<div className="font-bold text-[#58c15d]">{pool.totalApy}</div>
</div>
<div>
<div className=" text-end">
<div className="text-gray-400 text-sm mb-1">Risk Level</div>
<div className="font-bold">{pool.riskLevel}</div>
</div>
Expand Down
129 changes: 70 additions & 59 deletions margin_frontend/src/ui/core/pool-table.tsx
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

check font sizes, do not match figma

Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Button } from "./button";

import { useIsMobile } from '../hooks/use-mobile'
import PoolCard from "./pool-card";
interface Pool {
id: number;
name: string;
Expand All @@ -15,67 +16,77 @@ interface PoolTableProps {
pools: Pool[];
}


export default function PoolTable({ pools }: PoolTableProps) {
const IsMobile = useIsMobile()
return (
<div className="overflow-x-auto">
<table className="w-full border-collapse">
<thead>
<tr className="text-left text-gray-400">
<th className="pb-4 font-medium">Pool</th>
<th className="pb-4 font-medium">APY %</th>
<th className="pb-4 font-medium">Risk Level</th>
<th className="pb-4 font-medium">Liquidity</th>
<th className="pb-4 font-medium"></th>
</tr>
</thead>
<tbody className="divide-y divide-[#333] text-baseWhite">
{pools.map((pool) => (
<tr key={pool.id} className="hover:bg-[#1a1a1a]">
<td className="py-4">
<div className="flex items-center">
<div className="relative flex mr-3">
<div className="h-10 w-10 rounded-full overflow-hidden border-2 border-[#1a1a1a] bg-blue-900">
<img
src="src/assets/img/strkLogo.png"
alt="STRK Token"
width={40}
height={40}
className="object-cover"
/>
</div>
<div className="h-10 w-10 rounded-full overflow-hidden border-2 border-[#1a1a1a] bg-gray-800 -ml-2">
<img
src="src/assets/img/ethLogo.png"
alt="ETH Token"
width={40}
height={40}
className="object-cover"
/>
</div>
</div>
<div>
<div className="font-bold">{pool.name}</div>
<div className="text-sm text-gray-400">
{pool.type} • {pool.baseApy}
<div className="overflow-x-hidden">
{
IsMobile ?
<div className="lg:hidden space-y-4">
{pools.map((pool) => (
<PoolCard key={pool.id} pool={pool} />
))}
</div>
:
<table className="w-full border-collapse bricolage table-fixed" >
<thead className="">
<tr className="text-left text-gray-400">
<th className="pb-4 font-medium w-1/4 pl-4">Pool</th>
<th className="pb-4 font-medium">APY %</th>
<th className="pb-4 font-medium">Risk Level</th>
<th className="pb-4 font-medium">Liquidity</th>
<th className="pb-4 font-medium"></th>
</tr>
</thead>
<tbody className="divide-y divide-[#333] text-baseWhite border-[#333]/40 border-solid border-[1px]">
{pools.map((pool) => (
<tr key={pool.id} className="hover:bg-[#1a1a1a]">
<td className="py-4">
<div className="flex items-center pl-4">
<div className="relative flex mr-3">
<div className="h-10 w-10 rounded-full overflow-hidden border-2 border-[#1a1a1a] bg-blue-900">
<img
src="src/assets/img/strkLogo.png"
alt="STRK Token"
width={40}
height={40}
className="object-cover"
/>
</div>
<div className="h-10 w-10 rounded-full overflow-hidden border-2 border-[#1a1a1a] bg-gray-800 -ml-2">
<img
src="src/assets/img/ethLogo.png"
alt="ETH Token"
width={40}
height={40}
className="object-cover"
/>
</div>
</div>
<div>
<div className="font-bold">{pool.name}</div>
<div className="text-sm text-gray-400">
{pool.type} • {pool.baseApy}
</div>
</div>
</div>
</div>
{pool.isDegen && <div className="ml-2 bg-[#333] px-2 py-1 rounded text-xs text-gray-300">Degen</div>}
</div>
</td>
<td className="py-4">
<span className="font-bold text-green-500">{pool.totalApy}</span>
</td>
<td className="py-4">{pool.riskLevel}</td>
<td className="py-4">{pool.liquidity}</td>
<td className="py-4">
<Button variant="outline" className="bg-transparent border-[#333] hover:bg-[#333] text-white py-2 px-6">
DEPOSIT
</Button>
</td>
</tr>
))}
</tbody>
</table>
</td>
<td className="py-4">
<span className="font-bold text-[#58c15d]">{pool.totalApy}</span>
</td>
<td className="py-4">{pool.riskLevel}</td>
<td className="py-4">{pool.liquidity}</td>
<td className="py-4">
<Button variant="outline" className="bg-transparent border-[#272b26] hover:bg-[#333] text-white py-2 min-w-[142px] h-[37px]">
DEPOSIT
</Button>
</td>
</tr>
))}
</tbody>
</table>
}
</div>
);
}
13 changes: 6 additions & 7 deletions margin_frontend/src/ui/core/tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,14 @@ export function Tabs({ tabs, defaultActiveIndex = 0, className = "" }: TabsProps

return (
<div className={`w-full ${className}`}>
<div className="flex border-b border-inactiveTab bg-pageBg">
<div className="flex border-b border-inactiveTab bg-pageBg bricolage h-[48px] bg-transparent ">
{tabs.map((tab, index) => (
<button
key={index}
className={`p-4 text-sm font-medium focus:outline-none transition-colors min-w-[100px] ${
activeIndex === index
? " rounded-t-lg text-baseWhite bg-navbg border-b border-activeTab "
: "text-tabText hover:text-baseWhite "
}`}
className={`p-4 text-[16px] font-[400] focus:outline-none transition-colors w-full max-w-[142px] ${activeIndex === index
Copy link
Collaborator

Choose a reason for hiding this comment

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

font-[400] can be replaced with tailwind utility, as well as text-[16px]

? " rounded-t-lg h-[48px] text-baseWhite bg-navbg border-b border-[#434343] "
: "text-[#B1B1B1] hover:text-baseWhite "
}`}
onClick={() => {
setActiveIndex(index);
}}
Expand All @@ -33,7 +32,7 @@ export function Tabs({ tabs, defaultActiveIndex = 0, className = "" }: TabsProps
</button>
))}
</div>
<div className="p-4">{tabs[activeIndex]?.content}</div>
<div className="pt-4">{tabs[activeIndex]?.content}</div>
</div>
);
}
Loading