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

Fix: add defi concept cards below the table #960

Merged
merged 10 commits into from
Nov 26, 2024
Merged

Fix: add defi concept cards below the table #960

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
303810a
Fix: add defi concept cards below the table
omsant02 Nov 23, 2024
a90a60c
fixes
omsant02 Nov 24, 2024
e99df2e
Improvements
omsant02 Nov 24, 2024
adf7ec0
fix ui
omsant02 Nov 24, 2024
c79972e
fix icon
omsant02 Nov 24, 2024
2dacf22
card hover effect
omsant02 Nov 24, 2024
498aad8
fix responsiveness
omsant02 Nov 25, 2024
64e0841
make code modular
omsant02 Nov 26, 2024
f56e49c
ai suggestions
omsant02 Nov 26, 2024
1abc85c
ai suggestions
omsant02 Nov 26, 2024
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
297 changes: 297 additions & 0 deletions app/discover/defi/constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,297 @@
import React from "react";

interface DefiConcept {
title: string;
description: string;
icon: JSX.Element;
}

export const DEFI_CONCEPTS: DefiConcept[] = [
{
title: "Provide liquidity",
description: "Add token pairs to pools and earn fees from trades",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-blue-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Make SVG aria-labels more descriptive.

The current aria-label "[concept] icon" is generic. Each icon should have a specific label describing the concept it represents.

Example fix for the first few concepts:

-aria-label="[concept] icon"
+aria-label="provide liquidity icon"
-aria-label="[concept] icon"
+aria-label="stake icon"
-aria-label="[concept] icon"
+aria-label="yield farming icon"

Also applies to: 47-47, 66-66, 91-91, 115-115, 139-139, 162-162, 187-187, 211-211, 235-235, 260-260, 285-285

>
<path
d="M10 2L3 6V14L10 18L17 14V6L10 2Z"
stroke="#3B82F6"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
),
},
{
title: "Stake",
description: "Lock tokens to earn passive rewards and voting rights",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-orange-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<circle cx="10" cy="10" r="8" stroke="#F97316" strokeWidth="2" />
</svg>
</div>
),
},
{
title: "Yield Farming",
description: "Earn additional tokens by participating in DeFi protocols",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-green-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<path
d="M2 10L6 6M6 6L10 2L14 6M6 6V18M14 6L18 10M14 6V18"
stroke="#22C55E"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
),
},
{
title: "Supply",
description: "Deposit assets into a protocol to earn yield",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-cyan-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<path
d="M17 6H3M12 10H3M12 14H3"
stroke="#06B6D4"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
</div>
),
},
{
title: "Lend & Borrow",
description: "Supply assets to earn interest or borrow against collateral",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-yellow-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<path
d="M2 10H18M2 10V16H18V10M2 10V4H18V10"
stroke="#EAB308"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
</div>
),
},
{
title: "Collateral",
description: "Assets deposited as security for borrowing",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-indigo-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<path
d="M4 9V6C4 3.79086 5.79086 2 8 2H12C14.2091 2 16 3.79086 16 6V9M4 9H16M4 9V16C4 17.1046 4.89543 18 6 18H14C15.1046 18 16 17.1046 16 16V9"
stroke="#6366F1"
strokeWidth="2"
/>
</svg>
</div>
),
},
{
title: "Impermanent Loss",
description: "Potential loss when providing liquidity compared to holding",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-red-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<path
d="M18 6L10 14L6 10L2 14M18 6H14M18 6V10"
stroke="#EF4444"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
),
},
{
title: "TVL",
description: "Total value of assets deposited in a protocol",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-blue-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<path
d="M2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18"
stroke="#3B82F6"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
</div>
),
},
{
title: "APR",
description: "Simple interest rate earned over one year",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-green-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<path
d="M2 18L18 2M2 2L18 18"
stroke="#22C55E"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
</div>
),
},
{
title: "APY",
description: "Compound interest rate earned over one year",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-teal-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<path
d="M2 18L18 2M2 10L10 2L18 10L10 18L2 10Z"
stroke="#14B8A6"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
),
},
{
title: "Swap",
description: "Exchange one token for another at market price",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-purple-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<path
d="M2 5H18M2 5L5 2M2 5L5 8M18 15H2M18 15L15 12M18 15L15 18"
stroke="#A855F7"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
),
},
{
title: "Bridge",
description: "Transfer assets between different blockchains",
icon: (
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-yellow-500/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="[concept] icon"
>
<path
d="M4 10H16M4 10V18M4 10V2M16 10V18M16 10V2M2 2H18M2 18H18"
stroke="#EAB308"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
</div>
),
},
];
25 changes: 25 additions & 0 deletions app/discover/defi/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import DataTable from "@components/discover/defiTable";
import DeFiConceptCard from "@components/UI/DefiConceptCard";
import {
getAltProtocolStats,
getDerivatesStats,
Expand All @@ -9,10 +10,14 @@ import {
} from "@services/apiService";
import { formatStatsData } from "@utils/defi";
import React, { useEffect, useCallback } from "react";
import Typography from "@components/UI/typography/typography";
import { TEXT_TYPE } from "@constants/typography";
import { DEFI_CONCEPTS } from "./constants";

export default function Page() {
const [data, setData] = React.useState<TableInfo[]>([]);
const [loading, setLoading] = React.useState<boolean>(false);

const fetchPageData = useCallback(async () => {
try {
setLoading(true);
Expand All @@ -38,6 +43,7 @@ export default function Page() {
useEffect(() => {
fetchPageData();
}, []);

return (
<div className="flex w-full flex-col mt-24 gap-8 items-center">
{/* <div
Expand All @@ -59,6 +65,25 @@ export default function Page() {
<div className="mx-4 p-6 border-[1px] border-[#f4faff4d] rounded-xl w-full lg:w-3/4">
<DataTable loading={loading} data={data} />
</div>

<div className="mx-4 w-full lg:w-3/4">
<Typography type={TEXT_TYPE.H2} className="mb-6 text-white font-bold">
Essential DeFi Concepts
</Typography>
<div
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
aria-label="DeFi concept cards grid"
>
{DEFI_CONCEPTS.map((concept, index) => (
<DeFiConceptCard
key={concept.title}
title={concept.title}
description={concept.description}
icon={concept.icon}
/>
))}
</div>
</div>
</div>
);
}
33 changes: 33 additions & 0 deletions components/UI/DefiConceptCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import Typography from "@components/UI/typography/typography";
import { TEXT_TYPE } from "@constants/typography";

type DeFiConceptCardProps = {
title: string;
description: string;
icon: React.ReactNode;
};

const DeFiConceptCard = ({ title, description, icon }: DeFiConceptCardProps) => {
return (
<div className="bg-[#1A1B1F] rounded-xl p-6">
<div className="mb-3">
{icon}
</div>
<Typography
type={TEXT_TYPE.H3}
className="mb-2 text-white"
>
{title}
</Typography>
<Typography
type={TEXT_TYPE.BODY_DEFAULT}
className="text-gray-400"
>
{description}
</Typography>
</div>
);
};

export default DeFiConceptCard;
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.