New Design for Table component on Farms page #482

plind-dm · 2021-02-18T06:34:25Z

fix: add defaultProps for Cell component

…ke-frontend into table-update

…ontend into feature/farms-table

RabbitDoge · 2021-03-01T04:44:35Z

src/views/Farms/components/FarmCard/StakeAction.tsx

@@ -17,13 +17,36 @@ interface FarmCardActionsProps {
  addLiquidityUrl?: string
 }

+const StyledHeading = styled(Heading)`
+  margin-right: 48px;


Instead of creating a component for this, you can use the prop mr on Heading

RabbitDoge · 2021-03-01T04:47:04Z

src/views/Farms/components/Table/Actions/HarvestAction.tsx

+    end: earningsBusd,
+    duration: 1,
+    separator: ',',
+    // eslint-disable-next-line no-nested-ternary


remove this please

RabbitDoge · 2021-03-01T04:48:02Z

src/views/Farms/components/Table/Actions/styles.ts

+export const Staked = styled.div`
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.textSubtle};
+`


this file hasn't been prettified

RabbitDoge · 2021-03-01T04:50:07Z

src/views/Farms/components/Table/Links.tsx

+  info: string
+}
+
+const StyledLinkExternal = styled(LinkExternal)`


if you don't want to display the svg, use the Link component , with the external props

RabbitDoge · 2021-03-01T04:50:22Z

src/views/Farms/components/Table/Links.tsx

+  const TranslateString = useI18n()
+
+  return (
+    <>


unnecessary fragment

RabbitDoge · 2021-03-01T04:52:27Z

src/views/Farms/components/Table/Table.tsx

@@ -0,0 +1,94 @@
+import React, { useRef } from 'react'


Why this component is here and not in the uikit ?

RabbitDoge · 2021-03-01T04:55:12Z

src/views/Farms/components/Table/Actions/HarvestAction.tsx


 import { ActionContainer, ActionTitles, Title, Subtle, ActionContent, Earned, Staked } from './styles'

+const HarvestButton = styled(Button)`


you don't need to create a new component for this.
Most of the uikit component use the space API from styled-system
which means you can use <Button ml="4px">....</Button> instead of this

hachiojidev · 2021-03-01T05:05:35Z

src/views/Farms/components/FarmCard/ApyButton.tsx

@@ -15,8 +15,13 @@ const ApyButton: React.FC<ApyButtonProps> = ({ lpLabel, cakePrice, apy, addLiqui
    <ApyCalculatorModal lpLabel={lpLabel} cakePrice={cakePrice} apy={apy} addLiquidityUrl={addLiquidityUrl} />,
  )

+  const handleClickButton = (event): void => {
+    event.stopPropagation()


Is this necessary?

hachiojidev · 2021-03-01T05:06:29Z

src/views/Farms/components/FarmCard/StakeAction.tsx

+  button {
+    width: 32px;
+    height: 32px;
+
+    svg {
+      width: 20px;
+    }


Can you not use the <IconButton /> component?

hachiojidev · 2021-03-01T05:07:11Z

src/views/Farms/components/SearchInput.tsx

+
+const StyledInput = styled(Input)`
+  border-radius: 16px;
+  transition: 0.3s;


What is this transition for? Try and avoid setting transition for every property.

hachiojidev · 2021-03-01T05:07:49Z

src/views/Farms/components/SearchInput.tsx

+  ${({ theme }) => theme.mediaQueries.sm} {
+    width: 100% !important;
+    padding: 0 1rem !important;
+    opacity: 1 !important;


Please double check why !important is necessary. In principal if we need an !important on our own code then we did something wrong to begin with.

hachiojidev · 2021-03-01T05:09:06Z

src/views/Farms/components/Select/Select.tsx

+
+const ListItem = styled.li`
+  list-style: none;
+  padding: 6px 16px;


Padding should be a multiple of 4px, please double check.

hachiojidev · 2021-03-01T05:10:02Z

src/views/Farms/components/Table/Actions/ActionPanel.tsx

+  const bsc = `https://bscscan.com/address/${farm.lpAddresses[process.env.REACT_APP_CHAIN_ID]}`
+  const info = `https://pancakeswap.info/pair/${farm.lpAddresses[process.env.REACT_APP_CHAIN_ID]}`


Please put the chain id in a variable at the top of the file if we are using it more than once.

hachiojidev · 2021-03-01T05:12:19Z

src/views/Farms/components/Table/Actions/StakedAction.tsx

+  if (account) {
+    if (isApproved) {
+      if (rawStakedBalance) {


I think there is a cleaner way to represent this. Avoid using many nested if blocks. Maybe before this block you can do something like

if (!account) { return ( <ActionContainer> <ActionTitles> <Subtle>{TranslateString(999, 'START FARMING')}</Subtle> </ActionTitles> <ActionContent> <UnlockButton fullWidth /> </ActionContent> </ActionContainer> ) }

hachiojidev · 2021-03-01T05:15:02Z

src/views/Farms/components/Table/Tags.tsx

+  }
+`
+
+const Tags: React.FunctionComponent<FarmWithStakedValue> = ({ tokenSymbol, dual }) => {


hachiojidev · 2021-03-01T05:15:53Z

src/views/Farms/components/Tooltip/Tooltip.tsx

+  bottom: calc(100% + 16px);
+  transform: translate(34px, 0);
+  right: 0;
+  max-width: 246px;


This number seems pretty arbitrary. It is okay for now but please try and void numbers like these.

* feat: create table component for farm page * feat: add scrollbar option and complete header * chore: Prettier * wip * feat: complete farm table * Update Cell.tsx fix: add defaultProps for Cell component * feat: integrate API into table * feat: table mobile * style: lint * style: lint * build: update table component pack * sort * feat: call-to-action * feat: black theme table * feat: search & toggle * feat: sticky table header and coin column * feat: mobile search * fix: uncomment * wip * conflicts resolved * Wip * build: Uikit package updated * fix: Sort * fix: Apr styling * build: Uikit * build: Uikit revert * build: Yarn lock * fix: Styling * refactor: gitignore * build: Revert npm packages * style: Package.json * style: Rm comment * styling: Rem to px * styling: Lowered to loweredcaseQuery * styling: Tags * fix: Rm unused styling * feat: farm header * feat: Mobile view * feat: Select component * Conflicts resolved * feat: New table * feat: Multiplier styling * feat: Update select to use theme color * style: Rm unused component * feat: Localization * style: Rm unused * style: Rem to px * style: Rm unused * style: Rm unused * feat: Select updated * feat: Select update * feat: Select arrow prerender * feat: Smaller viewport row * fix: Ios styling fixed * build: Uikit update * feat: Responsive styling * feat: Select transition * build: Uikit updated * fix: Actions spacing on smaller viewport * fix: Responsive styling Co-authored-by: CBunnyDev <59729252+ranon127@users.noreply.github.com> Co-authored-by: hachiojidev <hachiojidev@protonmail.com>

plind-dm and others added 30 commits January 12, 2021 11:24

feat: create table component for farm page

9bf3d0c

feat: add scrollbar option and complete header

37898cd

chore: Prettier

8340951

wip

2ba295f

feat: complete farm table

8d9e889

Update Cell.tsx

3e089f4

fix: add defaultProps for Cell component

Merge branch 'develop' into table-update

e7a1b47

conflitcs resolved

58b48f5

forte: sort & search

c270281

forte: sort & search

ad08e00

Merge branch 'table-update' of github.com-cbunnydev:pancakeswap/panca…

aa9cd9f

…ke-frontend into table-update

feat: integrate API into table

2987575

feat: table mobile

708a4cb

style: lint

a397239

conflicts resolved

9ad70a4

style: lint

17b0016

build: update table component pack

347d99a

sort

cf65a79

style: conflicts resolved

81ffc37

feat: call-to-action

f40ea5a

feat: black theme table

e12373f

conflicts resolved

9405ea4

feat: search & toggle

2bac343

feat: sticky table header and coin column

3d3091c

feat: mobile search

c51ed68

fix: uncomment

c208560

wip

86014a8

conflicts resolved

e33b7e9

Merge branch 'develop' of github.com-cbunnydev:pancakeswap/pancake-fr…

b7cd828

…ontend into feature/farms-table

conflicts resolved

766aaff

RabbitDoge mentioned this pull request Feb 24, 2021

Table component on /farms page #336

Closed

plind-dm added 2 commits February 24, 2021 12:11

feat: Smaller viewport row

105a62b

fix: Ios styling fixed

54c91cc

plind-dm marked this pull request as ready for review February 24, 2021 21:19

plind-dm requested review from Chef-Chungus, hachiojidev, pancake-swap and RabbitDoge as code owners February 24, 2021 21:19

plind-dm added 5 commits February 24, 2021 20:42

build: Uikit update

338877e

feat: Responsive styling

5159d22

feat: Select transition

48f4b1c

build: Uikit updated

0a56473

fix: Actions spacing on smaller viewport

350b9b0

RabbitDoge reviewed Mar 1, 2021

View reviewed changes

fix: Responsive styling

e50be37

RabbitDoge reviewed Mar 1, 2021

View reviewed changes

src/views/Farms/components/Table/Links.tsx Outdated

const TranslateString = useI18n()

return (

<>

Copy link

Contributor

RabbitDoge Mar 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unnecessary fragment

RabbitDoge reviewed Mar 1, 2021

View reviewed changes

hachiojidev suggested changes Mar 1, 2021

View reviewed changes

plind-dm force-pushed the feature/farms-table-new branch from 3355709 to e50be37 Compare March 3, 2021 02:09

refactor: Used uikit props

5f414c4

RabbitDoge approved these changes Mar 3, 2021

View reviewed changes

hachiojidev approved these changes Mar 3, 2021

View reviewed changes

Chef-Chungus approved these changes Mar 3, 2021

View reviewed changes

hachiojidev merged commit 589ca6c into develop Mar 3, 2021

hachiojidev deleted the feature/farms-table-new branch March 3, 2021 05:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Design for Table component on Farms page #482

New Design for Table component on Farms page #482

plind-dm commented Feb 18, 2021 •

edited by RabbitDoge

RabbitDoge Mar 1, 2021

RabbitDoge Mar 1, 2021

RabbitDoge Mar 1, 2021

RabbitDoge Mar 1, 2021

RabbitDoge Mar 1, 2021

RabbitDoge Mar 1, 2021

RabbitDoge Mar 1, 2021

hachiojidev Mar 1, 2021

hachiojidev Mar 1, 2021

hachiojidev Mar 1, 2021

hachiojidev Mar 1, 2021

hachiojidev Mar 1, 2021

hachiojidev Mar 1, 2021

hachiojidev Mar 1, 2021

hachiojidev Mar 1, 2021

hachiojidev Mar 1, 2021


		import { ActionContainer, ActionTitles, Title, Subtle, ActionContent, Earned, Staked } from './styles'

		const HarvestButton = styled(Button)`

		const bsc = `https://bscscan.com/address/${farm.lpAddresses[process.env.REACT_APP_CHAIN_ID]}`
		const info = `https://pancakeswap.info/pair/${farm.lpAddresses[process.env.REACT_APP_CHAIN_ID]}`

New Design for Table component on Farms page #482

New Design for Table component on Farms page #482

Conversation

plind-dm commented Feb 18, 2021 • edited by RabbitDoge

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

plind-dm commented Feb 18, 2021 •

edited by RabbitDoge