diff --git a/src/components/Liquidity/LiquidityTable.tsx b/src/components/Liquidity/LiquidityTable.tsx index 68622eb5..12b3167a 100644 --- a/src/components/Liquidity/LiquidityTable.tsx +++ b/src/components/Liquidity/LiquidityTable.tsx @@ -100,42 +100,40 @@ const LiquidityTable: React.FC = (props) => { - - - {options.loading ? ( - - ) : ( - - {options[type].map((option) => { - const tableColumns: TableColumns = formatTableColumns(option) - const hasPosition = - positions.options - .map((pos) => { - return pos.attributes.entity - ? pos.attributes.entity.address === - option.entity.address && - BigNumber.from(pos.lp.toString()).gt(0) - : false - }) - .indexOf(true) !== -1 - - if ( - +new Date() / 1000 >= option.entity.expiryValue && - !hasPosition - ) - return null - return ( - updateItem(option, Operation.NONE)} - columns={tableColumns} - /> - ) - })} - - )} - - + + {options.loading ? ( + + ) : ( + + {options[type].map((option) => { + const tableColumns: TableColumns = formatTableColumns(option) + const hasPosition = + positions.options + .map((pos) => { + return pos.attributes.entity + ? pos.attributes.entity.address === + option.entity.address && + BigNumber.from(pos.lp.toString()).gt(0) + : false + }) + .indexOf(true) !== -1 + + if ( + +new Date() / 1000 >= option.entity.expiryValue && + !hasPosition + ) + return null + return ( + updateItem(option, Operation.NONE)} + columns={tableColumns} + /> + ) + })} + + )} +
@@ -145,15 +143,12 @@ const LiquidityTable: React.FC = (props) => { ) } -export const LiquidityTableContainer = styled.div` +export const LiquidityTableContent = styled.div` position: relative; display: flex; flex-direction: column; overflow-x: show; -` - -export const LiquidityTableContent = styled.div` - width: ${(props) => props.theme.flexboxgrid.container.md}rem; + width: 1200px; ` const ScrollBody = styled(TableBody)` @@ -161,6 +156,7 @@ const ScrollBody = styled(TableBody)` ` const OptionsContainer = styled.div` + display: block; margin-left: 3em; margin-top: 0em; min-height: 80vh; diff --git a/src/components/Liquidity/LiquidityTable/LiquidityTableHeader/LiquidityTableHeader.tsx b/src/components/Liquidity/LiquidityTable/LiquidityTableHeader/LiquidityTableHeader.tsx index b07c2688..f930d785 100644 --- a/src/components/Liquidity/LiquidityTable/LiquidityTableHeader/LiquidityTableHeader.tsx +++ b/src/components/Liquidity/LiquidityTable/LiquidityTableHeader/LiquidityTableHeader.tsx @@ -7,10 +7,7 @@ import Tooltip from '@/components/Tooltip' import TableRow from '@/components/TableRow' import Button from '@/components/Button' -import { - LiquidityTableContainer, - LiquidityTableContent, -} from '../../LiquidityTable' +import { LiquidityTableContent } from '../../LiquidityTable' export const headers = [ { @@ -42,35 +39,33 @@ export const headers = [ const LiquidityTableHeader: React.FC = () => { return ( - - - - {headers.map((header, index) => { - if (index === headers.length - 1) { - return ( - <> - - - - - - - ) - } - if (header.tip) { - return ( - - {header.name} + + + {headers.map((header, index) => { + if (index === headers.length - 1) { + return ( + <> + + + + - ) - } - return {header.name} - })} - - - - - + + ) + } + if (header.tip) { + return ( + + {header.name} + + ) + } + return {header.name} + })} + + + + ) }