chore: Update row pool

apps/web/src/views/FixedStaking/components/FixedStakingPosition.tsx → apps/web/src/views/FixedStaking/components/FixedStakingActions.tsx

@@ -36,7 +36,7 @@ import { StakePositionUserInfo } from '../type'
 import { UnlockedFixedTag } from './UnlockedFixedTag'
 import { FixedStakingModal } from './FixedStakingModal'
 
-export function FixedStakingPosition({
+export function FixedStakingActions({
   token,
   stakePositionUserInfo,
   unlockTime,
@@ -168,7 +168,7 @@ export function FixedStakingPosition({
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 APR
               </Text>
-              <Text bold>36%</Text>
+              <Text bold>0%</Text>
             </Flex>
             <Flex alignItems="center" justifyContent="space-between">
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
@@ -180,7 +180,7 @@ export function FixedStakingPosition({
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 Projected Return
               </Text>
-              <Text bold>2.055 {token.symbol}</Text>
+              <Text bold>0 {token.symbol}</Text>
             </Flex>
           </LightCard>
           <PreTitle fontSize="12px" color="textSubtle">
@@ -196,13 +196,13 @@ export function FixedStakingPosition({
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 Withdrawal Commission
               </Text>
-              <Text bold>1.2507 {token.symbol}</Text>
+              <Text bold>0 {token.symbol}</Text>
             </Flex>
             <Flex alignItems="center" justifyContent="space-between">
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 You Will Get
               </Text>
-              <Text bold>1,1410 {token.symbol}</Text>
+              <Text bold>0 {token.symbol}</Text>
             </Flex>
           </LightCard>
           <Button

apps/web/src/views/FixedStaking/components/FixedStakingCard.tsx

@@ -0,0 +1,90 @@
+import { useTranslation } from '@pancakeswap/localization'
+import { CardBody, Flex, Heading, StarFillIcon, Tag, Box, Button } from '@pancakeswap/uikit'
+import { StyledCard } from '@pancakeswap/uikit/src/widgets/Pool'
+import CurrencyLogo from 'components/Logo/CurrencyLogo'
+import BigNumber from 'bignumber.js'
+
+import { FixedStakingCardBody } from './FixedStakingCardBody'
+import { FixedStakingActions } from './FixedStakingActions'
+import { HarvestFixedStaking } from './HarvestFixedStaking'
+import { FixedStakingModal } from './FixedStakingModal'
+import { InlineText } from './InlineText'
+import { FixedStakingPool, StakedPosition } from '../type'
+
+export function FixedStakingCard({
+  pool,
+  stakedPositions,
+}: {
+  pool: FixedStakingPool
+  stakedPositions: StakedPosition[]
+}) {
+  const { t } = useTranslation()
+
+  const stakePosition = stakedPositions.find((position) => position.pool.token.address === pool.token.address)
+
+  return (
+    <StyledCard>
+      <Flex px="24px" pt="24px" alignItems="center" justifyContent="space-between">
+        <>
+          <CurrencyLogo currency={pool.token} size="56px" />
+          <Box>
+            <Heading color="secondary" scale="lg" textAlign="end">
+              {pool.token.symbol}
+            </Heading>
+            {new BigNumber(pool.boostDayPercent).gt(0) ? (
+              <Tag outline variant="success" startIcon={<StarFillIcon width="18px" color="success" />}>
+                vCAKE Boost
+              </Tag>
+            ) : null}
+          </Box>
+        </>
+      </Flex>
+      <CardBody>
+        <FixedStakingCardBody pool={pool}>
+          {stakePosition ? (
+            <>
+              <Box display="inline">
+                <InlineText color="secondary" bold fontSize="12px">
+                  {`${pool.token.symbol} `}
+                </InlineText>
+                <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
+                  {t('Earned')}
+                </InlineText>
+              </Box>
+              <HarvestFixedStaking
+                lockPeriod={pool.lockPeriod}
+                unlockTime={stakePosition.timestampEndLockPeriod}
+                stakePositionUserInfo={stakePosition.userInfo}
+                token={pool.token}
+                poolIndex={pool.poolIndex}
+              />
+            </>
+          ) : null}
+          {stakePosition ? (
+            <>
+              <Box display="inline">
+                <InlineText color="secondary" bold fontSize="12px">
+                  {`${pool.token.symbol} `}
+                </InlineText>
+                <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
+                  {t('Staked')}
+                </InlineText>
+              </Box>
+              <FixedStakingActions
+                poolIndex={pool.poolIndex}
+                lockPeriod={pool.lockPeriod}
+                unlockTime={stakePosition.timestampEndLockPeriod}
+                stakePositionUserInfo={stakePosition.userInfo}
+                token={pool.token}
+              />
+            </>
+          ) : (
+            <FixedStakingModal lockPeriod={pool.lockPeriod} poolIndex={pool.poolIndex} stakingToken={pool.token}>
+              {(openModal) => <Button onClick={openModal}>{t('Stake')}</Button>}
+            </FixedStakingModal>
+          )}
+        </FixedStakingCardBody>
+      </CardBody>
+    </StyledCard>
+  )
+}

apps/web/src/views/FixedStaking/components/FixedStakingCardBody.tsx

@@ -3,8 +3,10 @@ import { useTranslation } from '@pancakeswap/localization'
 
 import { useStablecoinPriceAmount } from 'hooks/useBUSDPrice'
 import { getBalanceAmount } from '@pancakeswap/utils/formatBalance'
+import { ReactNode } from 'react'
 
 import { LockedFixedTag } from './LockedFixedTag'
+import { FixedStakingPool } from '../type'
 
 function OverviewDataRow({ title, detail }) {
   return (
@@ -17,7 +19,7 @@ function OverviewDataRow({ title, detail }) {
   )
 }
 
-export function FixedStakingCardBody({ children, pool }) {
+export function FixedStakingCardBody({ children, pool }: { pool: FixedStakingPool; children: ReactNode }) {
   const { t } = useTranslation()
   const totalStakedAmount = getBalanceAmount(pool.totalDeposited, pool.token.decimals)
 
@@ -27,7 +29,7 @@ export function FixedStakingCardBody({ children, pool }) {
     <>
       <OverviewDataRow
         title={t('APR:')}
-        detail={<Balance fontSize={['14px', '14px', '16px']} value={1} decimals={2} unit="%" fontWeight={[600, 400]} />}
+        detail={<Balance fontSize={['14px', '14px', '16px']} value={0} decimals={2} unit="%" fontWeight={[600, 400]} />}
       />
 
       <OverviewDataRow title={t('Lock Periods:')} detail={<LockedFixedTag>{pool.lockPeriod}D</LockedFixedTag>} />

apps/web/src/views/FixedStaking/components/FixedStakingModal.tsx

@@ -32,6 +32,7 @@ import toNumber from 'lodash/toNumber'
 import { CurrencyLogo } from 'components/Logo'
 import ConnectWalletButton from 'components/ConnectWalletButton'
 import useAccountActiveChain from 'hooks/useAccountActiveChain'
+import { format, add } from 'date-fns'
 
 export function FixedStakingModal({
   stakingToken,
@@ -188,19 +189,19 @@ export function FixedStakingModal({
                 <Text fontSize={12} textTransform="uppercase" color="textSubtle" bold>
                   {t('APR')}
                 </Text>
-                <Text bold>36%</Text>
+                <Text bold>0%</Text>
               </Flex>
               <Flex alignItems="center" justifyContent="space-between">
                 <Text fontSize={12} textTransform="uppercase" color="textSubtle" bold>
                   Unlock On
                 </Text>
-                <Text bold>Sep 16 2023 21:45</Text>
+                <Text bold>{format(add(new Date(), { days: lockPeriod }), 'MMM d, yyyy hh:mm')}</Text>
               </Flex>
               <Flex alignItems="center" justifyContent="space-between">
                 <Text fontSize={12} textTransform="uppercase" color="textSubtle" bold>
                   Projected Return
                 </Text>
-                <Text bold>0.23 BNB</Text>
+                <Text bold>0 {stakingToken.symbol}</Text>
               </Flex>
             </LightGreyCard>
           </Box>
@@ -212,7 +213,7 @@ export function FixedStakingModal({
               }}
               onClick={handleSubmission}
             >
-              {pendingTx ? t('Confirming') : t('Confirm')}
+              {pendingTx ? t('Staking') : t('Stake')}
             </Button>
           ) : (
             <Button