fix some UI issues kyberdao

KyberNetwork · Dec 11, 2023 · 21c6d05 · 21c6d05
1 parent e292fab
commit 21c6d05
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 28 deletions.
diff --git a/src/pages/KyberDAO/StakeKNC/YourTransactionsModal.tsx b/src/pages/KyberDAO/StakeKNC/YourTransactionsModal.tsx
@@ -32,7 +32,7 @@ const Wrapper = styled.div`
   width: 100%;
   padding: 20px;
 `
-const gridTemplate = `5fr 3fr 3fr 3fr`
+const gridTemplate = `5fr 3fr 3fr 200px`
 const gridTemplateMobile = '1fr 1fr'
 const TableWrapper = styled.div`
   display: flex;
@@ -283,7 +283,7 @@ export default function YourTransactionsModal() {
                           </Row>
                         </TableCell>
                         <TableCell>
-                          <AutoColumn justify="flex-end" style={{ width: '100%' }}>
+                          <AutoColumn justify="flex-end" style={{ width: '100%', flexShrink: 0 }}>
                             {action.description}
                           </AutoColumn>
                         </TableCell>

diff --git a/src/pages/KyberDAO/Vote/ProposalItem/VoteInformation.tsx b/src/pages/KyberDAO/Vote/ProposalItem/VoteInformation.tsx
@@ -32,16 +32,6 @@ const InfoRow = styled(RowBetween)`
   padding: 6px 0;
 `
 
-function getEpochInformation(
-  epochPeriodInSeconds: number,
-  firstEpochStartTimestamp: number,
-  proposalStartTimestamp: number,
-) {
-  const epochNumber = Math.floor((proposalStartTimestamp - firstEpochStartTimestamp) / epochPeriodInSeconds)
-  const epochStartTimestamp = firstEpochStartTimestamp + epochNumber * epochPeriodInSeconds
-  return { epochNumber, epochStartTimestamp }
-}
-
 export default function VoteInformation({ proposal }: { proposal: ProposalDetail }) {
   const theme = useTheme()
   const { account } = useActiveWeb3React()
@@ -60,11 +50,18 @@ export default function VoteInformation({ proposal }: { proposal: ProposalDetail
   )
     .multiply(proposal.executor_minimum_quorum)
     .divide(BIPS_BASE)
-  const { epochNumber, epochStartTimestamp } = getEpochInformation(
-    daoInfo.epoch_period_in_seconds,
-    daoInfo.first_epoch_start_timestamp,
-    proposal.start_timestamp,
-  )
+
+  const epochNumber = useMemo(() => {
+    return daoInfo && proposal
+      ? Math.floor((proposal.start_timestamp - daoInfo.first_epoch_start_timestamp) / daoInfo.epoch_period_in_seconds)
+      : undefined
+  }, [daoInfo, proposal])
+
+  const epochStartTimestamp = useMemo(() => {
+    return epochNumber && daoInfo
+      ? daoInfo.first_epoch_start_timestamp + epochNumber * daoInfo.epoch_period_in_seconds
+      : undefined
+  }, [epochNumber, daoInfo])
 
   return (
     <Wrapper>
@@ -104,9 +101,11 @@ export default function VoteInformation({ proposal }: { proposal: ProposalDetail
       </InfoRow>
       <InfoRow>
         <Text color={theme.subText}>
-          <Trans>Epoch {epochNumber} Start Date</Trans>
+          <Trans>Epoch {epochNumber || '--'} Start Date</Trans>
+        </Text>
+        <Text color={theme.text}>
+          {epochStartTimestamp ? dayjs(epochStartTimestamp * 1000).format('DD MMMM YYYY') : '--'}
         </Text>
-        <Text color={theme.text}>{dayjs(epochStartTimestamp * 1000).format('DD MMMM YYYY')}</Text>
       </InfoRow>
       <InfoRow>
         <Text color={theme.subText}>

diff --git a/src/pages/KyberDAO/Vote/index.tsx b/src/pages/KyberDAO/Vote/index.tsx
@@ -336,24 +336,23 @@ export default function Vote() {
                           </AutoColumn>
                         }
                       />
-                    ) : null}
-                    {totalStakedAmount && stakerInfo?.stake_amount === 0 && !isDelegated ? (
+                    ) : totalStakedAmount && stakerInfo?.stake_amount === 0 && !isDelegated ? (
                       <InfoHelper
                         fontSize={12}
                         size={14}
                         color={theme.subText}
                         placement="top"
                         text={t`You can only vote from the next Epoch onward`}
                       />
+                    ) : !totalStakedAmount ? (
+                      <InfoHelper
+                        fontSize={12}
+                        size={14}
+                        placement="top"
+                        text={t`You have to stake KNC to be able to vote and earn voting reward.`}
+                      />
                     ) : null}
                   </Text>
-                  {!totalStakedAmount ? (
-                    <InfoHelper
-                      placement="top"
-                      fontSize={12}
-                      text={t`You have to stake KNC to be able to vote and earn voting reward.`}
-                    />
-                  ) : null}
                 </RowFit>
                 {isDelegated && (
                   <MouseoverTooltip