-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #127 from happyleow/feat/staking-ui
Add staking UI & Subgraph
- Loading branch information
Showing
37 changed files
with
2,652 additions
and
782 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { Card } from "@/components/ui"; | ||
| import { FC, useEffect, useRef } from "react"; | ||
| import { AppStakingPane } from "./AppStakingPane"; | ||
| import { AppStakingDescription } from "./AppStakingDescription"; | ||
| import { AppStakingPools } from "./AppStakingPools"; | ||
| import { useContractAddress } from "@/hooks/useContractAddress"; | ||
| import { useAccount, usePublicClient } from "wagmi"; | ||
| import { zeroAddress } from "viem"; | ||
| import { useReadLdyBalanceOf, useReadLdyDecimals } from "@/generated"; | ||
| import { useQueryClient } from "@tanstack/react-query"; | ||
| import { useGetStakingAprById } from "@/services/graph"; | ||
| import { STAKING_APR_INFO_ID } from "@/constants/staking"; | ||
| import { STAKING_APR_INFO_QUERY } from "@/services/graph/queries"; | ||
|
|
||
| export const AppStaking: FC = () => { | ||
| const queryClient = useQueryClient(); | ||
| const account = useAccount(); | ||
| const publicClient = usePublicClient(); | ||
| const ldySymbol = "LDY"; | ||
| const ldyTokenAddress = useContractAddress(ldySymbol); | ||
|
|
||
| const { data: ldyBalance, queryKey: ldyBalanceQuery } = useReadLdyBalanceOf({ | ||
| args: [account.address || zeroAddress], | ||
| }); | ||
|
|
||
| const { data: ldyDecimals } = useReadLdyDecimals(); | ||
|
|
||
| const { | ||
| data: stakingAprInfo, | ||
| refetch: refetchStakingAPR, | ||
| isFetching: isFetchingAPR, | ||
| } = useGetStakingAprById(STAKING_APR_INFO_ID); | ||
|
|
||
| // Refetch LdyBalance & APR from contract on network/wallet change | ||
| const queryKeys = [ldyBalanceQuery, [STAKING_APR_INFO_QUERY]]; | ||
| useEffect(() => { | ||
| queryKeys.forEach((k) => queryClient.invalidateQueries({ queryKey: k })); | ||
| }, [account.address, publicClient]); | ||
|
|
||
| // Refetch stakingAPR on ldyBalance change. | ||
| useEffect(() => { | ||
| // Refetch after 3 seconds due to subgraph latency | ||
| const timeoutId = setTimeout(() => { | ||
| queryClient.invalidateQueries({ queryKey: [STAKING_APR_INFO_QUERY] }); | ||
| }, 3000); | ||
| return () => clearTimeout(timeoutId); | ||
| }, [ldyBalance]); | ||
|
|
||
| return ( | ||
| <section className="lg:w-[1080px] grid grid-cols-12 gap-5 pb-10 w-full h-full px-2"> | ||
| <Card | ||
| circleIntensity={0.07} | ||
| defaultGradient={true} | ||
| className="w-full flex flex-col col-span-12 xl:col-span-6 gap-2 p-2" | ||
| > | ||
| <AppStakingPane | ||
| ldyTokenSymbol={ldySymbol} | ||
| ldyTokenAddress={ldyTokenAddress} | ||
| ldyTokenBalance={ldyBalance || 0n} | ||
| ldyTokenDecimals={ldyDecimals} | ||
| stakingAprInfo={stakingAprInfo ? stakingAprInfo.stakingAPRInfo || undefined : undefined} | ||
| /> | ||
| </Card> | ||
| <Card | ||
| circleIntensity={0.07} | ||
| defaultGradient={true} | ||
| className="w-full flex flex-col col-span-12 xl:col-span-6 gap-8 p-2" | ||
| > | ||
| <AppStakingDescription /> | ||
| </Card> | ||
| <Card | ||
| circleIntensity={0.07} | ||
| defaultGradient={false} | ||
| className="w-full flex flex-col gap-8 col-span-12 before:bg-primary p-2" | ||
| > | ||
| <AppStakingPools | ||
| ldyTokenDecimals={ldyDecimals} | ||
| ldyTokenBalanceQuery={ldyBalanceQuery || []} | ||
| stakingAprInfo={stakingAprInfo ? stakingAprInfo.stakingAPRInfo || undefined : undefined} | ||
| /> | ||
| </Card> | ||
| </section> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { FC } from "react"; | ||
|
|
||
| export const AppStakingDescription: FC = () => { | ||
| return ( | ||
| <div className="flex flex-col justify-start gap-y-2 p-4"> | ||
| <div className="font-heading font-bold text-xl">YOUR PERKS</div> | ||
| <div className="font-heading font-semibold text-lg py-2"> | ||
| Stake at least 1000 $LDY for 12months | ||
| </div> | ||
| <div className="font-medium flex items-center"> | ||
| <i className="ri-checkbox-circle-line text-xl" /> | ||
| <span className="mx-1">Protocol profits sharing</span> | ||
| </div> | ||
| <div className="font-medium flex items-center"> | ||
| <i className="ri-checkbox-circle-line text-xl" /> | ||
| <span className="mx-1">0x Withdrawal fees</span> | ||
| </div> | ||
| <div className="font-medium flex items-center"> | ||
| <i className="ri-checkbox-circle-line text-xl" /> | ||
| <span className="mx-1">Access to Leverage Vault</span> | ||
| </div> | ||
| <div className="font-medium flex items-center"> | ||
| <i className="ri-checkbox-circle-line text-xl" /> | ||
| <span className="mx-1">Access to L-Boost Vault</span> | ||
| </div> | ||
| <div className="font-medium flex items-center"> | ||
| <i className="ri-checkbox-circle-line text-xl" /> | ||
| <span className="mx-1">Voting power</span> | ||
| </div> | ||
| <div className="font-medium flex items-center"> | ||
| <i className="ri-checkbox-circle-line text-xl" /> | ||
| <span className="mx-1">Visibility on the portfolio of RWA</span> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.