diff --git a/app/discover/defi/constants.tsx b/app/discover/defi/constants.tsx new file mode 100644 index 00000000..9c342329 --- /dev/null +++ b/app/discover/defi/constants.tsx @@ -0,0 +1,82 @@ +import React from "react"; +import { BridgeIcon } from "./icons/bridge"; +import { SwapIcon } from "./icons/swap"; +import { ApyIcon } from "./icons/apy"; +import { AprIcon } from "./icons/apr"; +import { TvlIcon } from "./icons/tvl"; +import { ImpermanentLossIcon } from "./icons/impermanent-loss"; +import { CollateralIcon } from "./icons/collateral"; +import { LendBorrow } from "./icons/lend-borrow"; +import { SupplyIcon } from "./icons/supply"; +import { YieldFarmingIcon } from "./icons/yield-farming"; +import { StakeIcon } from "./icons/stake"; +import { ProvideLiquidityIcon } from "./icons/provide-liquidity"; + +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: , + }, + { + title: "Stake", + description: "Lock tokens to earn passive rewards and voting rights", + icon: , + }, + { + title: "Yield Farming", + description: "Earn additional tokens by participating in DeFi protocols", + icon: , + }, + { + title: "Supply", + description: "Deposit assets into a protocol to earn yield", + icon: , + }, + { + title: "Lend & Borrow", + description: "Supply assets to earn interest or borrow against collateral", + icon: , + }, + { + title: "Collateral", + description: "Assets deposited as security for borrowing", + icon: , + }, + { + title: "Impermanent Loss", + description: "Potential loss when providing liquidity compared to holding", + icon: , + }, + { + title: "TVL", + description: "Total value of assets deposited in a protocol", + icon: , + }, + { + title: "APR", + description: "Simple interest rate earned over one year", + icon: , + }, + { + title: "APY", + description: "Compound interest rate earned over one year", + icon: , + }, + { + title: "Swap", + description: "Exchange one token for another at market price", + icon: , + }, + { + title: "Bridge", + description: "Transfer assets between different blockchains", + icon: , + }, +]; diff --git a/app/discover/defi/icons/apr.tsx b/app/discover/defi/icons/apr.tsx new file mode 100644 index 00000000..a19116c1 --- /dev/null +++ b/app/discover/defi/icons/apr.tsx @@ -0,0 +1,46 @@ +import { FC } from 'react'; + +export const AprIcon:FC = () => ( +
+ + + + + + + + + +
+ ); \ No newline at end of file diff --git a/app/discover/defi/icons/apy.tsx b/app/discover/defi/icons/apy.tsx new file mode 100644 index 00000000..9db47ac8 --- /dev/null +++ b/app/discover/defi/icons/apy.tsx @@ -0,0 +1,82 @@ +import { FC } from 'react'; + +export const ApyIcon:FC = () => ( +
+ + + + + + + + + + + + + + + + + + + + + + +
+ ); \ No newline at end of file diff --git a/app/discover/defi/icons/bridge.tsx b/app/discover/defi/icons/bridge.tsx new file mode 100644 index 00000000..039be0f9 --- /dev/null +++ b/app/discover/defi/icons/bridge.tsx @@ -0,0 +1,26 @@ +import { FC } from 'react'; + +export const BridgeIcon:FC = () => ( +
+ + + + +
+); \ No newline at end of file diff --git a/app/discover/defi/icons/collateral.tsx b/app/discover/defi/icons/collateral.tsx new file mode 100644 index 00000000..c460ea50 --- /dev/null +++ b/app/discover/defi/icons/collateral.tsx @@ -0,0 +1,52 @@ +import { FC } from 'react'; + +export const CollateralIcon:FC = () =>( +
+ + + + + + + + + + + + + + + + + +
+ ); \ No newline at end of file diff --git a/app/discover/defi/icons/impermanent-loss.tsx b/app/discover/defi/icons/impermanent-loss.tsx new file mode 100644 index 00000000..8e5d0f4c --- /dev/null +++ b/app/discover/defi/icons/impermanent-loss.tsx @@ -0,0 +1,65 @@ +import { FC } from 'react'; + +export const ImpermanentLossIcon:FC =()=>( +
+ + + + + + + + + + + + + + + + + + + + +
+ ); \ No newline at end of file diff --git a/app/discover/defi/icons/lend-borrow.tsx b/app/discover/defi/icons/lend-borrow.tsx new file mode 100644 index 00000000..ad6a7764 --- /dev/null +++ b/app/discover/defi/icons/lend-borrow.tsx @@ -0,0 +1,412 @@ +import { FC } from 'react'; + +export const LendBorrow:FC = () => ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); \ No newline at end of file diff --git a/app/discover/defi/icons/provide-liquidity.tsx b/app/discover/defi/icons/provide-liquidity.tsx new file mode 100644 index 00000000..4727d9dc --- /dev/null +++ b/app/discover/defi/icons/provide-liquidity.tsx @@ -0,0 +1,28 @@ +import { FC } from 'react'; + +export const ProvideLiquidityIcon:FC = () =>( +
+ + + + +
+ ); \ No newline at end of file diff --git a/app/discover/defi/icons/stake.tsx b/app/discover/defi/icons/stake.tsx new file mode 100644 index 00000000..0e04406f --- /dev/null +++ b/app/discover/defi/icons/stake.tsx @@ -0,0 +1,47 @@ +import { FC } from 'react'; + +export const StakeIcon:FC = ()=>( +
+ + + + + + + + + + + + + +
+ ); \ No newline at end of file diff --git a/app/discover/defi/icons/supply.tsx b/app/discover/defi/icons/supply.tsx new file mode 100644 index 00000000..3e774917 --- /dev/null +++ b/app/discover/defi/icons/supply.tsx @@ -0,0 +1,47 @@ +import { FC } from 'react'; + +export const SupplyIcon:FC = () =>( +
+ + + + + + + + + + + + + +
+ ); \ No newline at end of file diff --git a/app/discover/defi/icons/swap.tsx b/app/discover/defi/icons/swap.tsx new file mode 100644 index 00000000..cc252910 --- /dev/null +++ b/app/discover/defi/icons/swap.tsx @@ -0,0 +1,38 @@ +import { FC } from 'react'; + +export const SwapIcon:FC = ()=>( +
+ + + + + + + + + + + +
+); \ No newline at end of file diff --git a/app/discover/defi/icons/tvl.tsx b/app/discover/defi/icons/tvl.tsx new file mode 100644 index 00000000..f8aaa2bf --- /dev/null +++ b/app/discover/defi/icons/tvl.tsx @@ -0,0 +1,107 @@ +import { FC } from 'react'; + +export const TvlIcon:FC = () =>( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); \ No newline at end of file diff --git a/app/discover/defi/icons/yield-farming.tsx b/app/discover/defi/icons/yield-farming.tsx new file mode 100644 index 00000000..9b26e974 --- /dev/null +++ b/app/discover/defi/icons/yield-farming.tsx @@ -0,0 +1,63 @@ +import { FC } from 'react'; + +export const YieldFarmingIcon:FC = ()=>( +
+ + + + + + + + + + + + + + + + + +
+ ); \ No newline at end of file diff --git a/app/discover/defi/page.tsx b/app/discover/defi/page.tsx index 6f42478e..c29ae440 100644 --- a/app/discover/defi/page.tsx +++ b/app/discover/defi/page.tsx @@ -1,6 +1,7 @@ "use client"; import DataTable from "@components/discover/defiTable"; +import DeFiConceptCard from "@components/UI/DefiConceptCard"; import { getAltProtocolStats, getDerivatesStats, @@ -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([]); const [loading, setLoading] = React.useState(false); + const fetchPageData = useCallback(async () => { try { setLoading(true); @@ -38,26 +43,32 @@ export default function Page() { useEffect(() => { fetchPageData(); }, []); + return ( -
- {/*
-
- - Starknet Foundation +
+
+ +
+ +
+
+ + Essential DeFi Concepts - - The Start of DeFi Spring - + {DEFI_CONCEPTS.map((concept) => ( + + ))} +
-
*/} -
-
); diff --git a/components/UI/DefiConceptCard.tsx b/components/UI/DefiConceptCard.tsx new file mode 100644 index 00000000..4f8ce587 --- /dev/null +++ b/components/UI/DefiConceptCard.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import Typography from "@components/UI/typography/typography"; +import { TEXT_TYPE } from "@constants/typography"; + +interface DefiConceptCardProps { + title: string; + description: string; + icon: React.ReactNode; +} + +const DefiConceptCard = ({ title, description, icon }: DefiConceptCardProps) => { + return ( +
+
+ {icon} +
+ +
+ + {title} + + + {description} + +
+
+ ); +}; + +export default DefiConceptCard; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ef620e68..4c0260a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16021,4 +16021,4 @@ } } } -} +} \ No newline at end of file