Skip to content

Commit

Permalink
Iamoskvin/rewards page improve (#299)
Browse files Browse the repository at this point in the history 
* add liq links

* tooltip on sepolia

* strk logo in the navbar

* proper UI for non-connected and sepolia

* getting allocation only for maiinnet
  • Loading branch information
@iamoskvin
iamoskvin authored May 24, 2024
1 parent d329f44 commit 5baac1d
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 79 deletions.
2 changes: 2 additions & 0 deletions src/components/NavBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
} from './styled'
import { useAccountDetails } from 'hooks/starknet-react'
import { ChainId } from '@vnaysn/jediswap-sdk-core'
import StarkIcon from 'assets/svg/starknet.svg'

const MenuItemLink = ({ to, dataTestId, id, isActive, children }) => {
const Component = isActive ? ActiveMenuItem : MenuItem
Expand Down Expand Up @@ -56,6 +57,7 @@ export const PageTabs = () => {
<Trans>V1</Trans>
</ExternalMenuItemLink>
<MenuItemLink to="/rewards" isActive={pathname.startsWith('/rewards')}>
<img src={StarkIcon} style={{marginRight: '2px'}} alt="starknet_logo" />
<Trans>Rewards</Trans>
</MenuItemLink>
</>
Expand Down
13 changes: 9 additions & 4 deletions src/components/Tooltip/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@ import noop from 'utils/noop';
import Popover, { PopoverProps } from '../Popover';

export enum TooltipSize {
UltraSmall = '135px',
ExtraSmall = '200px',
Small = '256px',
Large = '400px',
}

const getPaddingForSize = (size: TooltipSize) => {
switch (size) {
case TooltipSize.UltraSmall:
return '8px';
case TooltipSize.ExtraSmall:
return '8px';
case TooltipSize.Small:
Expand All @@ -22,7 +25,7 @@ const getPaddingForSize = (size: TooltipSize) => {
}
};

const TooltipContainer = styled.div<{ size: TooltipSize }>`
const TooltipContainer = styled.div<{ size: TooltipSize, borderRadius?: string }>`
max-width: ${({ size }) => size};
width: calc(100vw - 16px);
cursor: default;
Expand All @@ -36,7 +39,7 @@ const TooltipContainer = styled.div<{ size: TooltipSize }>`
word-break: break-word;
background: ${({ theme }) => theme.surface1};
border-radius: 4px;
border-radius: ${({ borderRadius }) => borderRadius || '4px'};
border: 1px solid ${({ theme }) => theme.surface3};
box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
`;
Expand All @@ -48,16 +51,17 @@ type TooltipProps = Omit<PopoverProps, 'content'> & {
size?: TooltipSize
disabled?: boolean
timeout?: number
borderRadius?: string
}

// TODO(WEB-2024)
// Migrate to MouseoverTooltip and move this component inline to MouseoverTooltip
export default function Tooltip({ text, open, close, disabled, size = TooltipSize.Small, ...rest }: TooltipProps) {
export default function Tooltip({ text, open, close, disabled, size = TooltipSize.Small, borderRadius, ...rest }: TooltipProps) {
return (
<Popover
content={
text && (
<TooltipContainer size={size} onMouseEnter={disabled ? noop : open} onMouseLeave={disabled ? noop : close}>
<TooltipContainer size={size} borderRadius={borderRadius} onMouseEnter={disabled ? noop : open} onMouseLeave={disabled ? noop : close}>
{text}
</TooltipContainer>
)
Expand All @@ -73,6 +77,7 @@ type MouseoverTooltipProps = Omit<PopoverProps, 'content' | 'show'> &
PropsWithChildren<{
text: ReactNode
size?: TooltipSize
borderRadius?: string
disabled?: boolean
timeout?: number
placement?: PopoverProps['placement']
Expand Down
205 changes: 130 additions & 75 deletions src/pages/Rewards/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
import React, { MouseEvent, useCallback, useContext, useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import { BodyWrapper } from '../AppBody'
import styled, { ThemeContext, css, keyframes } from 'styled-components'
import { AutoColumn } from 'components/Column'
import StarkIcon from 'assets/svg/starknet.svg'
import WalletIcon from 'assets/wallets/Wallet.png'
import { MouseoverTooltip, TooltipSize } from 'components/Tooltip'
import './style.css'
import { CurrencyAmount, Token } from '@jediswap/sdk'
import { ButtonPrimary, ButtonSecondary } from 'components/Button'
Expand All @@ -26,6 +29,7 @@ import { findClosestAPRPeriod } from 'utils/getClosest'
import { formattedPercent } from 'utils/formattedPercent'
import { apiTimeframeOptions } from 'constants/apiTimeframeOptions'
import { ApolloQueryResult } from '@apollo/client'
import { ChainId } from '@vnaysn/jediswap-sdk-core'

const PageWrapper = styled(AutoColumn)`
max-width: 996px;
Expand Down Expand Up @@ -418,13 +422,54 @@ const MobileWrapper = styled.div`
padding: 0px;
}
`
const ConnectWalletText = styled.div`
font-size: 20px;
font-weight: 600;
font-family: "Avenir LT Std", sans-serif;
max-width: 410px;
text-align: center;
`
const ConnectWalletWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`

const WalletNotConnected = () => {
const toggleWalletDrawer = useToggleAccountDrawer()
return (
<ConnectWalletWrapper>
<img src={WalletIcon} />
<ConnectWalletText>Connect wallet to see your STRK rewards</ConnectWalletText>
<ClaimButtonGradient
onClick={toggleWalletDrawer}
style={{ marginTop: '20px' }}
>
<ClaimText>Connect Wallet</ClaimText>
</ClaimButtonGradient>
</ConnectWalletWrapper>
)
}

const ConnectedToSepolia = () => {
return (
<ConnectWalletWrapper>
<img src={WalletIcon} />
<ConnectWalletText>
Switch your network from Sepolia to Mainnet to see rewards
</ConnectWalletText>
</ConnectWalletWrapper>
)
}

export default function Rewards() {
const [allPools, setAllPools] = useState<any[]>([])
const { address, chainId } = useAccountDetails()
const [poolsLoading, setPoolsLoading] = useState(true)
const STRK_REWARDS_ADDRESS = getStarkRewardAddress(chainId ?? DEFAULT_CHAIN_ID)
const allTokens = useDefaultActiveTokens(DEFAULT_CHAIN_ID)
const isSepoliaSelected = chainId === ChainId.GOERLI
const isMainnetSelected = chainId === ChainId.MAINNET

useEffect(() => {
async function getPairsData() {
Expand Down Expand Up @@ -534,12 +579,11 @@ export default function Rewards() {
const [txPending, setTxPending] = useState(false)
const [attemptingTxn, setAttemptingTxn] = useState(false)

const toggleWalletDrawer = useToggleAccountDrawer()

//fetch allocation data
useEffect(() => {
const getAllocation = async () => {
if (address) {
if (address && isMainnetSelected) {
try {
setAllocationsLoading(true)
const requests = [
Expand Down Expand Up @@ -571,7 +615,7 @@ export default function Rewards() {
}

getAllocation()
}, [address])
}, [address, chainId])

useEffect(() => {
if (callData.length && address) {
Expand Down Expand Up @@ -638,32 +682,47 @@ export default function Rewards() {
const buttonText =
(totalRewardsClaimed && 'Claimed') || (unclaimed_rewards && 'Claim STRK') || (attemptingTxn && 'Claiming...')

const onLinkClick = (e: MouseEvent) => {
if (isSepoliaSelected) {
e.preventDefault()
}
}
const PairListItem = ({ pool }: { pool: any }) => {
const token0 =
pool.token0.symbol === 'ETH' ? pool.token0 : allTokens[validateAndParseAddress(pool.token0.tokenAddress)]
const token1 =
pool.token1.symbol === 'ETH' ? pool.token1 : allTokens[validateAndParseAddress(pool.token1.tokenAddress)]

const token0ForLink = pool.token0.symbol === 'ETH' ? 'ETH' : pool.token0.tokenAddress
const token1ForLink = pool.token1.symbol === 'ETH' ? 'ETH' : pool.token1.tokenAddress
const link = `/add/${token0ForLink}/${token1ForLink}/${pool.fee}`
return (
<Column style={{ padding: 10, flexBasis: '32%', flexGrow: 0 }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<DoubleCurrencyLogo size={24} currency0={token0} currency1={token1} />
</div>
<PairName>
{pool?.token0?.symbol}-{pool?.token1?.symbol}
</PairName>
<TotalAPR>
<div>Total APR:</div>
<div>{pool.displayAprCommon}</div>
</TotalAPR>
<TokenAPR>
<div>Fee APR:</div>
<div>{pool.displayAprFee}</div>
</TokenAPR>
<TokenAPR>
<div>STRK APR:</div>
<div>{pool.displayAprStarknet}</div>
</TokenAPR>
<Link
to={link}
onClick={onLinkClick}
style={{ textDecoration: 'none', cursor: isSepoliaSelected ? 'auto' : 'pointer' }}
>
<MouseoverTooltip disabled={!isSepoliaSelected} text="Switch to Mainnet to add liquidity" style={{ display: 'block' }} placement='bottom' hideArrow offsetY={-20} size={TooltipSize.UltraSmall} borderRadius="8px">
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<DoubleCurrencyLogo size={24} currency0={token0} currency1={token1} />
</div>
<PairName>
{pool?.token0?.symbol}-{pool?.token1?.symbol}
</PairName>
<TotalAPR>
<div>Total APR:</div>
<div>{pool.displayAprCommon}</div>
</TotalAPR>
<TokenAPR>
<div>Fee APR:</div>
<div>{pool.displayAprFee}</div>
</TokenAPR>
<TokenAPR>
<div>STRK APR:</div>
<div>{pool.displayAprStarknet}</div>
</TokenAPR>
</MouseoverTooltip>
</Link>
</Column>
)
}
Expand Down Expand Up @@ -730,58 +789,54 @@ export default function Rewards() {
</ClaimHeader>
</RowBetween>
<CardSection>
<AutoColumn>
<RowBetween>
<StarkRewardsText>Your STRK Rewards</StarkRewardsText>
</RowBetween>

<Container>
<Row>
<Column>
<HeaderText>
<>
<img src={StarkIcon} style={{ marginRight: 5 }} />
STRK ALLOCATED
</>
</HeaderText>
<AmountText>{allocations?.toSignificant() ?? 0}</AmountText>
</Column>
<Column>
<HeaderText>
<>
<img src={StarkIcon} style={{ marginRight: 5 }} />
STRK CLAIMED
</>
</HeaderText>
<AmountText>{formattedClaimRewards?.toSignificant() ?? 0}</AmountText>
</Column>
<Column>
<HeaderText>
<>
<img src={StarkIcon} style={{ marginRight: 5 }} />
STRK UNCLAIMED
</>
</HeaderText>
<ClaimWrapper>
<AmountText>{unclaimed_rewards.toSignificant(5) ?? 0}</AmountText>

{!address ? (
<ClaimButtonGradient
onClick={toggleWalletDrawer}
// disabled={attemptingTxn || totalRewardsClaimed}
>
<ClaimText>Connect Wallet</ClaimText>
</ClaimButtonGradient>
) : allocated && allocations && (totalRewardsClaimed || unclaimed_rewards || attemptingTxn) ? (
<ClaimButtonGradient onClick={onClaim} disabled={attemptingTxn || totalRewardsClaimed}>
<ClaimText>{buttonText}</ClaimText>
</ClaimButtonGradient>
) : null}
</ClaimWrapper>
</Column>
</Row>
</Container>
</AutoColumn>
{
!chainId ? <WalletNotConnected /> : isSepoliaSelected ? <ConnectedToSepolia /> :
<AutoColumn>
<RowBetween>
<StarkRewardsText>Your STRK Rewards</StarkRewardsText>
</RowBetween>

<Container>
<Row>
<Column>
<HeaderText>
<>
<img src={StarkIcon} style={{ marginRight: 5 }} />
STRK ALLOCATED
</>
</HeaderText>
<AmountText>{allocations?.toSignificant() ?? 0}</AmountText>
</Column>
<Column>
<HeaderText>
<>
<img src={StarkIcon} style={{ marginRight: 5 }} />
STRK CLAIMED
</>
</HeaderText>
<AmountText>{formattedClaimRewards?.toSignificant() ?? 0}</AmountText>
</Column>
<Column>
<HeaderText>
<>
<img src={StarkIcon} style={{ marginRight: 5 }} />
STRK UNCLAIMED
</>
</HeaderText>
<ClaimWrapper>
<AmountText>{unclaimed_rewards.toSignificant(5) ?? 0}</AmountText>

{allocated && allocations && (totalRewardsClaimed || unclaimed_rewards || attemptingTxn) ? (
<ClaimButtonGradient onClick={onClaim} disabled={attemptingTxn || totalRewardsClaimed}>
<ClaimText>{buttonText}</ClaimText>
</ClaimButtonGradient>
) : null}
</ClaimWrapper>
</Column>
</Row>
</Container>
</AutoColumn>
}
</CardSection>
</LiquidityWrapperCard>
)
Expand Down

0 comments on commit 5baac1d

Please sign in to comment.