Farms table fixes (pancakeswap#582)

* fix: Liqudity calculation updated * fix: Use Image component * fix: Rm table ref * fix: Cell label update * fix: Middle size viewport row * fix: Add translation to APR and Earned * fix: Translate APR on action panel * feat: Auto reload when app updates (pancakeswap#573) * chore(ifo): Add text to IFO contribute modal (pancakeswap#577) * feat(farm/pool): Add WATCH (pancakeswap#575) * fix: Token decimal value (pancakeswap#580) * fix: Token decimal value * style(ifo): Increased decimal on ifo percentage * chore: Change max input to match balance display * fix(ifo): Remove hasParticipated check * chore: Restored max balance value * fix(ifo): Claim flag * chore: Remove dirty code from pools APY (pancakeswap#572) * fix: TokenPerBlock parsing for APY (pancakeswap#581) * fix: Rm duplicated code Co-authored-by: Chef Hachioji <[email protected]> Co-authored-by: Chef-Chungus <[email protected]> Co-authored-by: RabbitDoge <[email protected]>
igurek79 · Mar 5, 2021 · bf7383e · bf7383e
1 parent c5296eb
commit bf7383e
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 64 deletions.
diff --git a/src/views/Farms/Farms.tsx b/src/views/Farms/Farms.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, useRef } from 'react'
+import React, { useEffect, useCallback, useState } from 'react'
 import { Route, useRouteMatch, useLocation } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 import BigNumber from 'bignumber.js'
@@ -135,8 +135,6 @@ const Farms: React.FC = () => {
   const activeFarms = farmsLP.filter((farm) => farm.pid !== 0 && farm.multiplier !== '0X')
   const inactiveFarms = farmsLP.filter((farm) => farm.pid !== 0 && farm.multiplier === '0X')
 
-  const tableRef = useRef(null)
-
   const stackedOnlyFarms = activeFarms.filter(
     (farm) => farm.userData && new BigNumber(farm.userData.stakedBalance).isGreaterThan(0),
   )
@@ -163,7 +161,7 @@ const Farms: React.FC = () => {
     (farmsToDisplay): FarmWithStakedValue[] => {
       const cakePriceVsBNB = new BigNumber(farmsLP.find((farm) => farm.pid === CAKE_POOL_PID)?.tokenPriceVsQuote || 0)
       let farmsToDisplayWithAPY: FarmWithStakedValue[] = farmsToDisplay.map((farm) => {
-        if (!farm.tokenAmount || !farm.lpTotalInQuoteToken || !farm.lpTotalInQuoteToken) {
+        if (!farm.tokenAmount || !farm.lpTotalInQuoteToken) {
           return farm
         }
         const cakeRewardPerBlock = CAKE_PER_BLOCK.times(farm.poolWeight)
@@ -203,6 +201,10 @@ const Farms: React.FC = () => {
           liquidity = cakePrice.times(farm.lpTotalInQuoteToken)
         }
 
+        if (farm.quoteTokenSymbol === QuoteToken.ETH) {
+          liquidity = ethPriceUsd.times(farm.lpTotalInQuoteToken)
+        }
+
         return { ...farm, apy, liquidity }
       })
 
@@ -280,7 +282,7 @@ const Farms: React.FC = () => {
       const columns = columnSchema.map((column) => ({
         id: column.id,
         name: column.name,
-        label: column.normal,
+        label: column.label,
         sort: (a: RowType<RowProps>, b: RowType<RowProps>) => {
           switch (column.name) {
             case 'farm':
@@ -300,7 +302,7 @@ const Farms: React.FC = () => {
         sortable: column.sortable,
       }))
 
-      return <Table data={rowData} ref={tableRef} columns={columns} />
+      return <Table data={rowData} columns={columns} />
     }
 
     return (

diff --git a/src/views/Farms/components/FarmTable/Actions/ActionPanel.tsx b/src/views/Farms/components/FarmTable/Actions/ActionPanel.tsx
@@ -27,7 +27,7 @@ const Container = styled.div`
   flex-direction: column-reverse;
   padding: 24px;
 
-  ${({ theme }) => theme.mediaQueries.xl} {
+  ${({ theme }) => theme.mediaQueries.lg} {
     flex-direction: row;
     padding: 16px 32px;
   }
@@ -94,7 +94,7 @@ const InfoContainer = styled.div`
 const ValueContainer = styled.div`
   display: block;
 
-  ${({ theme }) => theme.mediaQueries.xl} {
+  ${({ theme }) => theme.mediaQueries.lg} {
     display: none;
   }
 `
@@ -140,7 +140,7 @@ const ActionPanel: React.FunctionComponent<ActionPanelProps> = ({ details, apr,
       </InfoContainer>
       <ValueContainer>
         <ValueWrapper>
-          <Text>APR</Text>
+          <Text>{TranslateString(736, 'APR')}</Text>
           <Apr {...apr} />
         </ValueWrapper>
         <ValueWrapper>

diff --git a/src/views/Farms/components/FarmTable/CellLayout.tsx b/src/views/Farms/components/FarmTable/CellLayout.tsx
@@ -5,7 +5,6 @@ const Label = styled.div`
   font-size: 12px;
   color: ${({ theme }) => theme.colors.textSubtle};
   text-align: left;
-  text-transform: uppercase;
 `
 
 const ContentContainer = styled.div`

diff --git a/src/views/Farms/components/FarmTable/Farm.tsx b/src/views/Farms/components/FarmTable/Farm.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { useFarmUser } from 'state/hooks'
 import useI18n from 'hooks/useI18n'
-import { Text } from '@pancakeswap-libs/uikit'
+import { Text, Image } from '@pancakeswap-libs/uikit'
 import { getBalanceNumber } from 'utils/formatBalance'
 
 export interface FarmProps {
@@ -11,18 +11,12 @@ export interface FarmProps {
   image: string
 }
 
-const Label = styled.span`
-  color: ${({ theme }) => theme.colors.text};
-  font-weight: 600;
-`
-
-const IconImage = styled.img`
-  margin-right: 8px;
-  min-width: 24px;
+const IconImage = styled(Image)`
+  width: 24px;
   height: 24px;
 
   ${({ theme }) => theme.mediaQueries.sm} {
-    min-width: 40px;
+    width: 40px;
     height: 40px;
   }
 `
@@ -56,10 +50,10 @@ const Farm: React.FunctionComponent<FarmProps> = ({ image, label, pid }) => {
 
   return (
     <Container>
-      <IconImage src={`/images/farms/${image}.svg`} alt="icon" />
+      <IconImage src={`/images/farms/${image}.svg`} alt="icon" width={40} height={40} mr="8px" />
       <div>
         {handleRenderFarming()}
-        <Label>{label}</Label>
+        <Text bold>{label}</Text>
       </div>
     </Container>
   )

diff --git a/src/views/Farms/components/FarmTable/FarmTable.tsx b/src/views/Farms/components/FarmTable/FarmTable.tsx
@@ -57,7 +57,7 @@ const ScrollButtonContainer = styled.div`
   padding-bottom: 5px;
 `
 
-export default React.forwardRef((props: ITableProps) => {
+const FarmTable: React.FC<ITableProps> = (props) => {
   const tableWrapperEl = useRef<HTMLDivElement>(null)
   const TranslateString = useI18n()
   const { data, columns } = props
@@ -91,4 +91,6 @@ export default React.forwardRef((props: ITableProps) => {
       </TableContainer>
     </Container>
   )
-})
+}
+
+export default FarmTable
diff --git a/src/views/Farms/components/FarmTable/Row.tsx b/src/views/Farms/components/FarmTable/Row.tsx
@@ -71,14 +71,6 @@ const Row: React.FunctionComponent<RowProps> = (props) => {
     setActionPanelToggled(!actionPanelToggled)
   }
 
-  const cellLabel = (key: string): string => {
-    if (key === 'farm' || key === 'details') {
-      return ''
-    }
-
-    return key
-  }
-
   const { isXl, isXs } = useMatchBreakpoints()
 
   const isMobile = !isXl
@@ -90,7 +82,8 @@ const Row: React.FunctionComponent<RowProps> = (props) => {
       return (
         <StyledTr onClick={toggleActionPanel}>
           {Object.keys(props).map((key) => {
-            if (columnNames.indexOf(key) === -1) {
+            const columnIndex = columnNames.indexOf(key)
+            if (columnIndex === -1) {
               return null
             }
 
@@ -109,7 +102,7 @@ const Row: React.FunctionComponent<RowProps> = (props) => {
                 return (
                   <td key={key}>
                     <CellInner>
-                      <CellLayout label={TranslateString(999, 'Apr')}>
+                      <CellLayout label={TranslateString(736, 'APR')}>
                         <Apr {...props.apr} hideButton={isMobile} />
                       </CellLayout>
                     </CellInner>
@@ -119,7 +112,11 @@ const Row: React.FunctionComponent<RowProps> = (props) => {
                 return (
                   <td key={key}>
                     <CellInner>
-                      <CellLayout label={cellLabel(key)}>{React.createElement(cells[key], props[key])}</CellLayout>
+                      <CellLayout
+                        label={TranslateString(tableSchema[columnIndex].translationId, tableSchema[columnIndex].label)}
+                      >
+                        {React.createElement(cells[key], props[key])}
+                      </CellLayout>
                     </CellInner>
                   </td>
                 )
@@ -141,12 +138,12 @@ const Row: React.FunctionComponent<RowProps> = (props) => {
           </tr>
           <tr>
             <EarnedMobileCell>
-              <CellLayout label={TranslateString(999, 'Earned')}>
+              <CellLayout label={TranslateString(1072, 'Earned')}>
                 <Earned {...props.earned} />
               </CellLayout>
             </EarnedMobileCell>
             <AprMobileCell>
-              <CellLayout label={TranslateString(999, 'Apr')}>
+              <CellLayout label={TranslateString(736, 'APR')}>
                 <Apr {...props.apr} hideButton />
               </CellLayout>
             </AprMobileCell>

diff --git a/src/views/Farms/components/types.ts b/src/views/Farms/components/types.ts
@@ -8,8 +8,7 @@ export type TableProps = {
 
 export type ColumnsDefTypes = {
   id: number
-  bold: string
-  normal: string
+  label: string
   name: string
   translationId: number
   sortable: boolean
@@ -29,89 +28,79 @@ export type TableDataTypes = {
   LINKS: string
 }
 
-export const MobileColumnSchema = [
+export const MobileColumnSchema: ColumnsDefTypes[] = [
   {
     id: 1,
-    bold: '',
-    normal: 'Farm',
     name: 'farm',
     translationId: 999,
     sortable: true,
+    label: '',
   },
   {
     id: 2,
-    bold: 'CAKE',
-    normal: 'EARNED',
     name: 'earned',
-    translationId: 999,
+    translationId: 1072,
     sortable: true,
+    label: 'Earned',
   },
   {
     id: 3,
-    bold: '',
-    normal: 'APR',
     name: 'apr',
-    translationId: 999,
+    translationId: 736,
     sortable: true,
+    label: 'APR',
   },
   {
     id: 6,
-    bold: '',
-    normal: 'DETAILS',
     name: 'details',
     translationId: 999,
     sortable: true,
+    label: '',
   },
 ]
 
 export const DesktopColumnSchema: ColumnsDefTypes[] = [
   {
     id: 1,
-    bold: '',
-    normal: 'Farm',
     name: 'farm',
     translationId: 999,
     sortable: true,
+    label: '',
   },
   {
     id: 2,
-    bold: 'CAKE',
-    normal: 'EARNED',
     name: 'earned',
-    translationId: 999,
+    translationId: 1072,
     sortable: true,
+    label: 'Earned',
   },
   {
     id: 3,
-    bold: '',
-    normal: 'APR',
     name: 'apr',
-    translationId: 999,
+    translationId: 736,
     sortable: true,
+    label: 'APR',
   },
   {
     id: 4,
-    bold: '',
-    normal: 'STAKED',
     name: 'liquidity',
     translationId: 999,
     sortable: true,
+    label: 'Liquidity',
   },
   {
     id: 5,
-    bold: '',
-    normal: 'MULTIPLIER',
     name: 'multiplier',
     translationId: 999,
     sortable: true,
+    label: 'Multiplier',
   },
   {
     id: 6,
-    bold: '',
-    normal: 'DETAILS',
     name: 'details',
     translationId: 999,
     sortable: true,
+    label: '',
   },
 ]