import React from 'react' ; import { Route , Switch , useRouteMatch } from 'react-router-dom' ; import { useWallet } from 'use-wallet' ; import styled from 'styled-components' ; import Button from '../../components/Button' ; import Page from '../../components/Page' ; import PageHeader from '../../components/PageHeader' ; import WalletProviderModal from '../../components/WalletProviderModal' ; import useModal from '../../hooks/useModal' ; import Farm from '../Farm' ; import FarmCards from './components/FarmCards' ; const Farms = ( ) => { const { path } = useRouteMatch ( ) ; const { account } = useWallet ( ) ; const [ onPresentWalletProviderModal ] = useModal ( < WalletProviderModal />); return ( < Switch > < Page > { ! ! account ? ( < > < Route exact path = { path } > < PageHeader title = "Select Your Farm" subtitle = "Earn LTO tokens by staking Uniswap V2 LP Tokens." / > < StyledFarms > < StyledCardsWrapper > < StyledCardWrapper > < FarmCards /> < /StyledCardWrapper> < /StyledCardsWrapper> < /StyledFarms> < /Route> < Route path = { `${ path }/:farmId` } > < Farm /> < /Route> < />) : (<div style={{ alignItems : 'center' , display : 'flex' , flex : 1 , justifyContent : 'center' , } } > < Button onClick = { onPresentWalletProviderModal } text = "🔓 Unlock Wallet" / > < /div>)} < /Page> < /Switch>); } ; const StyledFarms = styled . div `
  margin-top: -70px;
  align-items: center;
  display: flex;
  flex-direction: column;
  @media (max-width: 768px) {
    width: 100%;
  }
` ; const StyledCardsWrapper = styled . div `
  display: flex;
  width: 600px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
` ; const StyledCardWrapper = styled . div `
  display: flex;
  flex: 1;
  flex-direction: column;
  @media (max-width: 768px) {
    width: 80%;
  }
` ; export default Farms ;