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: implement harvest time #116

Closed
wants to merge 9 commits into from
Closed

feat: implement harvest time #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
82ca11d
feat: harvest time ui
Iwueseiter Sep 6, 2024
604ffd8
feat: implement api integretion
Iwueseiter Sep 16, 2024
f02c748
feat: display API data
Iwueseiter Sep 16, 2024
56a7b75
fix: imports
Iwueseiter Sep 16, 2024
808a4f5
fix: lint
Iwueseiter Sep 16, 2024
b607e86
fix: remove mock contract
Iwueseiter Sep 17, 2024
9c1bb35
fix: remove mock contract
Iwueseiter Sep 17, 2024
c41bba7
fix: change query
Iwueseiter Sep 24, 2024
8fe8490
fix: resolve conflict
Iwueseiter Sep 24, 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
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
"@nikolovlazar/chakra-ui-prose": "1.2.1",
"@prisma/client": "5.18.0",
"@starknet-react/chains": "0.1.7",
"@apollo/client": "^3.11.8",
"graphql": "^16.9.0",
"@starknet-react/core": "2.8.0",
"@tanstack/query-core": "5.28.0",
"@types/mixpanel-browser": "2.49.0",
Expand Down
145 changes: 5 additions & 140 deletions src/app/strategy/[strategyId]/_components/Strategy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,34 @@ import {
Avatar,
Box,
Card,
Center,
Flex,
Grid,
GridItem,
Link,
ListItem,
OrderedList,
Spinner,
Stat,
StatHelpText,
StatLabel,
StatNumber,
Tab,
TabIndicator,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
Tooltip,
VStack,
Wrap,
WrapItem,
} from '@chakra-ui/react';
import { useAccount } from '@starknet-react/core';
import { atom, useAtomValue, useSetAtom } from 'jotai';
import mixpanel from 'mixpanel-browser';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { isMobile } from 'react-device-detect';

import Deposit from '@/components/Deposit';
import CONSTANTS from '@/constants';
import { DUMMY_BAL_ATOM } from '@/store/balance.atoms';
import { StrategyInfo, strategiesAtom } from '@/store/strategies.atoms';
import { transactionsAtom, TxHistoryAtom } from '@/store/transactions.atom';
import HarvestTime from '@/components/HarvestTime';
import {
capitalize,
getTokenInfoFromAddr,
getUniqueById,
shortAddress,
timeAgo,
} from '@/utils';
Expand Down Expand Up @@ -177,139 +166,14 @@ const Strategy = ({ params }: StrategyParams) => {
{strategy ? strategy.name : 'Strategy Not found'}
</Text>
</Flex>

{strategy && (
<VStack width={'100%'}>
<Grid width={'100%'} templateColumns="repeat(5, 1fr)" gap={2}>
<GridItem display="flex" colSpan={colSpan1}>
<Card width="100%" padding={'15px'} color="white" bg="highlight">
<Box display={{ base: 'block', md: 'flex' }}>
<Box width={{ base: '100%', md: '80%' }} float={'left'}>
<Text
fontSize={'20px'}
marginBottom={'0px'}
fontWeight={'bold'}
>
How does it work?
</Text>
<Text
color="light_grey"
marginBottom="5px"
fontSize={'15px'}
>
{strategy.description}
</Text>
<Wrap>
{getUniqueById(
strategy.actions.map((p) => ({
id: p.pool.protocol.name,
logo: p.pool.protocol.logo,
})),
).map((p) => (
<WrapItem marginRight={'10px'} key={p.id}>
<Center>
<Avatar
size="2xs"
bg={'black'}
src={p.logo}
marginRight={'2px'}
/>
<Text marginTop={'2px'}>{p.id}</Text>
</Center>
</WrapItem>
))}
</Wrap>
</Box>
<Box
width={{ base: '100%', md: '20%' }}
float={'left'}
marginTop={{ base: '10px' }}
>
<Stat>
<StatLabel textAlign={{ base: 'left', md: 'right' }}>
APY
</StatLabel>
<StatNumber
color="cyan"
textAlign={{ base: 'left', md: 'right' }}
>
{(strategy.netYield * 100).toFixed(2)}%
</StatNumber>
<StatHelpText textAlign={{ base: 'left', md: 'right' }}>
{strategy.leverage.toFixed(2)}x boosted
</StatHelpText>
</Stat>
</Box>
</Box>
<Box
padding={'10px'}
borderRadius={'10px'}
bg={'bg'}
marginTop={'20px'}
>
{!balData.isLoading &&
!balData.isError &&
!balData.isPending &&
balData.data &&
balData.data.tokenInfo && (
<Flex width={'100%'} justifyContent={'space-between'}>
<Box>
<Text>
<b>Your Holdings </b>
</Text>
<Text color="cyan">
{address
? Number(
balData.data.amount.toEtherToFixedDecimals(
balData.data.tokenInfo?.displayDecimals ||
2,
),
) == 0
? '-'
: `${balData.data.amount.toEtherToFixedDecimals(balData.data.tokenInfo?.displayDecimals || 2)} ${balData.data.tokenInfo?.name}`
: isMobile
? CONSTANTS.MOBILE_MSG
: 'Connect wallet'}
</Text>
</Box>
<Tooltip label="Life time earnings">
<Box>
<Text textAlign={'right'} fontWeight={'none'}>
<b>Net earnings</b>
</Text>
<Text
textAlign={'right'}
color={profit >= 0 ? 'cyan' : 'red'}
>
{address && profit != 0
? `${profit?.toFixed(balData.data.tokenInfo?.displayDecimals || 2)} ${balData.data.tokenInfo?.name}`
: '-'}
</Text>
</Box>
</Tooltip>
</Flex>
)}
{(balData.isLoading ||
balData.isPending ||
!balData.data?.tokenInfo) && (
<Text>
<b>Your Holdings: </b>
{address ? (
<Spinner size="sm" marginTop={'5px'} />
) : isMobile ? (
CONSTANTS.MOBILE_MSG
) : (
'Connect wallet'
)}
</Text>
)}
{balData.isError && (
<Text>
<b>Your Holdings: Error</b>
</Text>
)}
</Box>
</Card>
<HarvestTime strategy={strategy} balData={balData} />
</GridItem>

<GridItem display="flex" colSpan={colSpan2}>
<Card width="100%" padding={'15px'} color="white" bg="highlight">
<Tabs position="relative" variant="unstyled" width={'100%'}>
Expand Down Expand Up @@ -370,6 +234,7 @@ const Strategy = ({ params }: StrategyParams) => {
</Card>
</GridItem>
</Grid>

<Card width={'100%'} color="white" bg="highlight" padding={'15px'}>
<Text fontSize={'20px'} marginBottom={'0px'} fontWeight={'bold'}>
Behind the scenes
Expand Down
Loading