Skip to content

Commit eed7d8d

Browse files
EjembiEmmanuelEjembiEmmanuel
committed
ui: strategy page
1 parent 3bd8319 commit eed7d8d

File tree

2 files changed

+427
-173
lines changed

2 files changed

+427
-173
lines changed

‎src/app/strategy/[strategyId]/_components/Strategy.tsx‎

Lines changed: 142 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import { RiskTab } from './RiskTab';
5050
import { DetailsTab } from './DetailsTab';
5151
import { FAQTab } from './FAQTab';
5252
import { TransactionsTab } from './TransactionsTab';
53+
import MobileHarvestTime from '@/components/MobileHarvestTime';
5354

5455
const Strategy = ({ params }: StrategyParams) => {
5556
const address = useAtomValue(addressAtom);
@@ -619,214 +620,183 @@ const Strategy = ({ params }: StrategyParams) => {
619620
display={{ base: 'flex', md: 'none' }}
620621
flexDirection="column"
621622
width="100%"
622-
bg="bg_2"
623-
px={3}
624-
py={3}
625623
>
626-
<Flex width="100%" justifyContent="center" mb={3}>
627-
<Box
628-
border="1px solid #39395A"
629-
borderRadius="12px"
630-
p="8px 24px"
631-
bg="transparent"
632-
display="flex"
633-
alignItems="center"
634-
justifyContent="center"
635-
>
624+
<Box
625+
display="flex"
626+
flexDirection="column"
627+
gap="16px"
628+
bg="#1B1724"
629+
paddingTop="24px"
630+
paddingLeft="8px"
631+
paddingRight="8px"
632+
paddingBottom="16px"
633+
>
634+
<Flex width="100%" justifyContent="center">
636635
<Button
637636
leftIcon={<ArrowBackIcon />}
638637
variant="ghost"
639638
color="white"
640639
fontWeight="bold"
641640
fontSize="18px"
641+
padding="12px 16px"
642+
borderWidth="1px"
643+
borderColor="#CFCFEA"
644+
borderRadius="12px"
642645
_hover={{ bg: 'transparent', color: 'white' }}
643646
onClick={() => router.push('/?tab=strategies')}
644-
p={0}
645-
m={0}
646647
height="auto"
647-
minW={0}
648648
>
649649
Back
650650
</Button>
651+
</Flex>
652+
653+
<Box
654+
borderRadius="12px"
655+
display="flex"
656+
gap="16px"
657+
alignItems="center"
658+
justifyContent="center"
659+
>
660+
<Avatar src={strategy?.holdingTokens[0]?.logo || ''} size="lg" />
661+
<Text fontWeight="600" fontSize="32px" color="white">
662+
{strategy?.name}
663+
</Text>
664+
{strategy?.settings.isAudited && (
665+
<Box
666+
width="24px"
667+
height="24px"
668+
display="flex"
669+
alignItems="center"
670+
justifyContent="center"
671+
backgroundColor="#1AFCA0"
672+
borderRadius="full"
673+
>
674+
<Image src={shield.src} alt="badge" />
675+
</Box>
676+
)}
651677
</Box>
652-
</Flex>
653678

654-
<Box
655-
borderRadius="12px"
656-
p={4}
657-
mb={3}
658-
display="flex"
659-
alignItems="center"
660-
gap={3}
661-
>
662-
<Avatar
663-
src={strategy?.holdingTokens[0]?.logo || ''}
664-
size="xl"
665-
borderWidth="2px"
666-
borderColor="#232336"
667-
/>
668-
<Text fontWeight="extrabold" fontSize="32px" color="white" flex={1}>
669-
{strategy?.name}
670-
</Text>
671-
{strategy?.settings.isAudited && (
672-
<Box
673-
width="32px"
674-
height="32px"
679+
<Box
680+
display="flex"
681+
flexDirection="column"
682+
gap="8px"
683+
alignItems="center"
684+
>
685+
<Flex align="center" gap="4px">
686+
<Box
687+
bg="#181824"
688+
display="flex"
689+
alignItems="center"
690+
padding="8px"
691+
borderRadius="8px"
692+
borderColor="#2D2D3D"
693+
borderWidth="1px"
694+
>
695+
<Text
696+
color="border_light"
697+
fontWeight="bold"
698+
fontSize="16px"
699+
mr={1}
700+
>
701+
APY
702+
</Text>
703+
<Text color="light_green" fontWeight="bold" fontSize="22px">
704+
{strategyCached?.apySplit?.baseApy
705+
? `${(strategyCached.apySplit.baseApy * 100).toFixed(2)}%`
706+
: '23.94%'}
707+
</Text>
708+
</Box>
709+
<Box
710+
bg="black"
711+
color="white"
712+
display="flex"
713+
alignItems="center"
714+
fontSize="14px"
715+
fontWeight="500"
716+
padding="4px 8px"
717+
borderRadius="20px"
718+
>
719+
<span role="img" aria-label="fire">
720+
🔥
721+
</span>
722+
{`${strategyCached?.leverage?.toFixed(2)}x boosted`}
723+
</Box>
724+
</Flex>
725+
<Link
726+
href={strategy?.metadata.auditUrl || '#'}
727+
color="#8E8E8E"
728+
fontSize="14px"
675729
display="flex"
676730
alignItems="center"
731+
gap="4px"
732+
isExternal
733+
fontWeight="600"
677734
justifyContent="center"
678-
backgroundColor="#1AFCA0"
679-
borderRadius="full"
680-
ml={1}
681735
>
682-
<Image src={shield.src} alt="badge" />
683-
</Box>
684-
)}
685-
</Box>
736+
Contract details <ExternalLinkIcon />
737+
</Link>
738+
</Box>
686739

687-
<Box
688-
border="1px solid #39395A"
689-
borderRadius="12px"
690-
p={3}
691-
mb={3}
692-
display="flex"
693-
flexDirection="column"
694-
alignItems="center"
695-
>
696-
<Flex gap={2} mb={2} align="center">
740+
<Flex width="100%" gap={3} mb={3}>
697741
<Box
698-
bg="#232336"
699-
borderRadius="8px"
700-
px={3}
701-
py={1}
742+
flex="1"
743+
bg="#1A1A27"
744+
padding="16px"
745+
textAlign="center"
702746
display="flex"
747+
flexDirection="column"
748+
gap="4px"
703749
alignItems="center"
704-
gap={1}
750+
justifyContent="center"
751+
borderWidth="1px"
752+
borderColor="#CFCFEA4D"
753+
borderRadius="12px"
705754
>
706-
<Text
707-
color="border_light"
708-
fontWeight="bold"
709-
fontSize="16px"
710-
mr={1}
711-
>
712-
APY
755+
<Text color="#CFCFEA" fontSize="14px">
756+
Your holdings:
713757
</Text>
714-
<Text color="light_green" fontWeight="bold" fontSize="22px">
715-
{strategyCached?.apySplit?.baseApy
716-
? `${(strategyCached.apySplit.baseApy * 100).toFixed(2)}%`
717-
: '23.94%'}
758+
<Text color="white" fontWeight="extrabold" fontSize="22px">
759+
{address && balData && balData.data && balData.data.tokenInfo
760+
? `${balData.data.amount.toEtherToFixedDecimals(balData.data.tokenInfo?.displayDecimals || 2)} ${balData.data.tokenInfo?.name}`
761+
: '-'}
718762
</Text>
719763
</Box>
720764
<Box
721-
bg="black"
722-
color="white"
723-
borderRadius="8px"
724-
px={3}
725-
py={1}
765+
flex="1"
766+
bg="#1A1A27"
767+
padding="16px"
768+
textAlign="center"
726769
display="flex"
770+
flexDirection="column"
771+
gap="4px"
727772
alignItems="center"
728-
gap={1}
729-
fontSize="16px"
730-
fontWeight="bold"
773+
justifyContent="center"
774+
borderWidth="1px"
775+
borderColor="#CFCFEA4D"
776+
borderRadius="12px"
731777
>
732-
<span role="img" aria-label="fire">
733-
🔥
734-
</span>
735-
{strategyCached?.leverage
736-
? `${strategyCached.leverage.toFixed(2)}x boosted`
737-
: '1.96x boosted'}
778+
<Text color="#CFCFEA" fontSize="14px">
779+
Net earnings:
780+
</Text>
781+
<Text
782+
color={profit > 0 ? 'cyan' : profit < 0 ? 'red' : 'text'}
783+
fontWeight="extrabold"
784+
fontSize="22px"
785+
>
786+
{address &&
787+
profit !== 0 &&
788+
!strategy?.isRetired() &&
789+
balData.data &&
790+
balData.data.tokenInfo
791+
? `${profit?.toFixed(balData.data.tokenInfo?.displayDecimals || 2)} ${balData.data.tokenInfo?.name}`
792+
: '-'}
793+
</Text>
738794
</Box>
739795
</Flex>
740-
<Link
741-
href={strategy?.metadata.auditUrl || '#'}
742-
color="border_light"
743-
fontSize="18px"
744-
display="flex"
745-
alignItems="center"
746-
gap={1}
747-
isExternal
748-
fontWeight="bold"
749-
justifyContent="center"
750-
>
751-
Contract details <ExternalLinkIcon />
752-
</Link>
753-
</Box>
754796

755-
<Flex width="100%" gap={3} mb={3}>
756-
<Box
757-
flex={1}
758-
border="1px solid #39395A"
759-
borderRadius="12px"
760-
p={3}
761-
textAlign="center"
762-
display="flex"
763-
flexDirection="column"
764-
alignItems="center"
765-
justifyContent="center"
766-
>
767-
<Text color="border_light" fontSize="16px" mb={1}>
768-
Your holdings:
769-
</Text>
770-
<Text color="white" fontWeight="extrabold" fontSize="22px">
771-
{address && balData && balData.data && balData.data.tokenInfo
772-
? `${balData.data.amount.toEtherToFixedDecimals(balData.data.tokenInfo?.displayDecimals || 2)}${balData.data.tokenInfo?.name}`
773-
: '-'}
774-
</Text>
775-
</Box>
776-
<Box
777-
flex={1}
778-
border="1px solid #39395A"
779-
borderRadius="12px"
780-
p={3}
781-
textAlign="center"
782-
display="flex"
783-
flexDirection="column"
784-
alignItems="center"
785-
justifyContent="center"
786-
>
787-
<Text color="border_light" fontSize="16px" mb={1}>
788-
Your earnings:
789-
</Text>
790-
<Text color="light_green" fontWeight="extrabold" fontSize="22px">
791-
{address && profit !== 0 && balData.data && balData.data.tokenInfo
792-
? `${profit?.toFixed(balData.data.tokenInfo?.displayDecimals || 2)} ${balData.data.tokenInfo?.name}`
793-
: '-'}
794-
</Text>
795-
</Box>
796-
</Flex>
797-
798-
{/* Next Harvest card with countdown only */}
799-
{/* <Box
800-
border="1px solid #39395A"
801-
borderRadius="12px"
802-
p={3}
803-
mb={3}
804-
textAlign="center"
805-
>
806-
<Text color="border_light" fontSize="16px" mb={2} fontWeight="bold">
807-
Next Harvest in:
808-
</Text>
809-
<Box display="flex" justifyContent="center" gap={2}>
810-
<HarvestTime strategy={strategy!} balData={balData} />
811-
</Box>
812-
</Box> */}
813-
814-
{/* Harvest stats card (only once, at the bottom) */}
815-
<Box
816-
border="1px solid #39395A"
817-
borderRadius="12px"
818-
p={3}
819-
textAlign="center"
820-
>
821-
<Text color="border_light" fontSize="16px">
822-
Total rewards harvested: <b>$50 0</b>
823-
</Text>
824-
<Text color="border_light" fontSize="16px">
825-
Total number of times harvested: <b>48</b>
826-
</Text>
797+
{strategy && <MobileHarvestTime strategy={strategy} />}
827798
</Box>
828799

829-
{/* <Box bg="dark_bg"> */}
830800
{/* Mobile vertical accordion for sections */}
831801
<Accordion
832802
index={accordionIndex}
@@ -945,7 +915,6 @@ const Strategy = ({ params }: StrategyParams) => {
945915
</AccordionItem>
946916
</Accordion>
947917
</Box>
948-
{/* </Box> */}
949918
</>
950919
);
951920
};

0 commit comments

Comments
 (0)