chore: minor improvement

src/components/NetworkModal/index.tsx

@@ -10,6 +10,7 @@ import { useActiveWeb3React } from 'hooks'
 import { useActiveNetwork } from 'hooks/useActiveNetwork'
 import { ApplicationModal } from 'state/application/actions'
 import { useModalOpen, useNetworkModalToggle } from 'state/application/hooks'
+import { useIsDarkMode } from 'state/user/hooks'
 
 import { MAINNET_NETWORKS, NETWORKS_INFO, SUPPORTED_NETWORKS } from '../../constants/networks'
 
@@ -81,6 +82,7 @@ export default function NetworkModal(): JSX.Element | null {
   const networkModalOpen = useModalOpen(ApplicationModal.NETWORK)
   const toggleNetworkModal = useNetworkModalToggle()
   const { changeNetwork } = useActiveNetwork()
+  const isDarkMode = useIsDarkMode()
 
   return (
     <Modal isOpen={networkModalOpen} onDismiss={toggleNetworkModal} maxWidth={624}>
@@ -101,7 +103,11 @@ export default function NetworkModal(): JSX.Element | null {
                 <SelectNetworkButton key={i} padding="0">
                   <ListItem selected>
                     <img
-                      src={NETWORKS_INFO[key].icon}
+                      src={
+                        isDarkMode && !!NETWORKS_INFO[key].iconDark
+                          ? NETWORKS_INFO[key].iconDark
+                          : NETWORKS_INFO[key].icon
+                      }
                       alt="Switch Network"
                       style={{ width: '24px', marginRight: '8px' }}
                     />
@@ -122,7 +128,11 @@ export default function NetworkModal(): JSX.Element | null {
               >
                 <ListItem>
                   <img
-                    src={NETWORKS_INFO[key].icon}
+                    src={
+                      isDarkMode && !!NETWORKS_INFO[key].iconDark
+                        ? NETWORKS_INFO[key].iconDark
+                        : NETWORKS_INFO[key].icon
+                    }
                     alt="Switch Network"
                     style={{ width: '24px', marginRight: '8px' }}
                   />

src/components/Web3Network/index.tsx

@@ -1,5 +1,5 @@
 import { ChainId, CurrencyAmount } from '@kyberswap/ks-sdk-core'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import styled from 'styled-components'
 
 import { ReactComponent as DropdownSvg } from 'assets/svg/down.svg'
@@ -8,6 +8,7 @@ import Row from 'components/Row'
 import { nativeOnChain } from 'constants/tokens'
 import { useActiveWeb3React } from 'hooks'
 import { ApplicationModal } from 'state/application/actions'
+import { useIsDarkMode } from 'state/user/hooks'
 import { useETHBalances } from 'state/wallet/hooks'
 
 import { NETWORKS_INFO } from '../../constants/networks'
@@ -65,6 +66,7 @@ const DropdownIcon = styled(DropdownSvg)<{ open: boolean }>`
 function Web3Network(): JSX.Element | null {
   const { chainId, account } = useActiveWeb3React()
   const networkModalOpen = useModalOpen(ApplicationModal.NETWORK)
+  const isDarkMode = useIsDarkMode()
   const toggleNetworkModal = useNetworkModalToggle()
   const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
   const labelContent = useMemo(() => {
@@ -86,7 +88,11 @@ function Web3Network(): JSX.Element | null {
       <NetworkSwitchContainer>
         <Row>
           <img
-            src={NETWORKS_INFO[chainId].icon}
+            src={
+              isDarkMode && NETWORKS_INFO[chainId].iconDark
+                ? NETWORKS_INFO[chainId].iconDark
+                : NETWORKS_INFO[chainId].icon
+            }
             alt="Switch Network"
             style={{ width: 20, height: 20, marginRight: '12px' }}
           />

src/components/Web3Status/index.tsx

@@ -2,7 +2,7 @@ import { Trans, t } from '@lingui/macro'
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { darken, lighten } from 'polished'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Activity } from 'react-feather'
 import { useMedia } from 'react-use'
 import styled from 'styled-components'

src/components/YieldPools/FarmGuide.tsx

@@ -54,8 +54,8 @@ function FarmGuide({ farmType }: { farmType: VERSION }) {
           {farmType === VERSION.ELASTIC ? (
             <>
               <Trans>
-                Deposit your liquidity from the Elastic Pools here, and then stake it to earn even more attractive
-                farming rewards.
+                Deposit your liquidity position (NFT token) from the Elastic Pools here, and then stake it to earn even
+                more attractive farming rewards.
               </Trans>
 
               {(!upToMedium || !show) && (

src/components/YieldPools/ProMMFarmGroup.tsx

@@ -23,7 +23,7 @@ import Withdraw from 'components/Icons/Withdraw'
 import InfoHelper from 'components/InfoHelper'
 import Loader from 'components/Loader'
 import Modal from 'components/Modal'
-import { MouseoverTooltip } from 'components/Tooltip'
+import { MouseoverTooltip, MouseoverTooltipDesktopOnly } from 'components/Tooltip'
 import { ELASTIC_BASE_FEE_UNIT, ZERO_ADDRESS } from 'constants/index'
 import { VERSION } from 'constants/v2'
 import { useActiveWeb3React } from 'hooks'
@@ -667,8 +667,13 @@ function ProMMFarmGroup({
           <Flex flexDirection="column">
             <Text fontSize="12px" color={theme.subText}>
               <Trans>Deposited Liquidity</Trans>
+              <InfoHelper
+                text={t`Dollar value of NFT tokens you've deposited. NFT tokens represent your liquidity position`}
+              ></InfoHelper>
             </Text>
+
             <HoverDropdown
+              style={{ padding: '8px 0' }}
               content={formatDollarAmount(depositedUsd)}
               dropdownContent={
                 Object.values(userDepositedTokenAmounts).some(amount => amount.greaterThan(0)) ? (
@@ -712,24 +717,32 @@ function ProMMFarmGroup({
               )
             ) : (
               <Flex sx={{ gap: '12px' }} alignItems="center">
-                <BtnLight onClick={() => onOpenModal('deposit')} disabled={tab === 'ended'}>
-                  <Deposit width={20} height={20} />
-                  {above768 && (
-                    <Text fontSize="14px" marginLeft="4px">
-                      <Trans>Deposit</Trans>
-                    </Text>
-                  )}
-                </BtnLight>
-
-                {canWithdraw ? (
-                  <ButtonOutlined padding="8px 12px" onClick={() => onOpenModal('withdraw')}>
-                    <Withdraw width={20} height={20} />
+                <MouseoverTooltipDesktopOnly
+                  text={t`Deposit your liquidity (the NFT tokens that represent your liquidity position)`}
+                >
+                  <BtnLight onClick={() => onOpenModal('deposit')} disabled={tab === 'ended'}>
+                    <Deposit width={20} height={20} />
                     {above768 && (
                       <Text fontSize="14px" marginLeft="4px">
-                        <Trans>Withdraw</Trans>
+                        <Trans>Deposit</Trans>
                       </Text>
                     )}
-                  </ButtonOutlined>
+                  </BtnLight>
+                </MouseoverTooltipDesktopOnly>
+
+                {canWithdraw ? (
+                  <MouseoverTooltipDesktopOnly
+                    text={t`Withdraw your liquidity (the NFT tokens that represent your liquidity position)`}
+                  >
+                    <ButtonOutlined padding="8px 12px" onClick={() => onOpenModal('withdraw')}>
+                      <Withdraw width={20} height={20} />
+                      {above768 && (
+                        <Text fontSize="14px" marginLeft="4px">
+                          <Trans>Withdraw</Trans>
+                        </Text>
+                      )}
+                    </ButtonOutlined>
+                  </MouseoverTooltipDesktopOnly>
                 ) : (
                   <BtnPrimary disabled width="fit-content" padding="8px 12px">
                     <Withdraw width={20} height={20} />
@@ -763,6 +776,7 @@ function ProMMFarmGroup({
             </Text>
 
             <HoverDropdown
+              style={{ padding: '8px 0' }}
               content={formatDollarAmount(totalUserReward.totalUsdValue)}
               dropdownContent={
                 totalUserReward.amounts.length ? (

src/components/YieldPools/ProMMFarmModals/DepositModal.tsx

@@ -1,7 +1,7 @@
 import { Position } from '@kyberswap/ks-sdk-elastic'
 import { Trans } from '@lingui/macro'
 import { BigNumber } from 'ethers'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Info, X } from 'react-feather'
 import { useMedia } from 'react-use'
 import { Flex, Text } from 'rebass'
@@ -257,8 +257,8 @@ function ProMMDepositNFTModal({
 
         <Text fontSize="12px" marginTop="20px" color={theme.subText}>
           <Trans>
-            Deposit your liquidity first to enable farming. Only your in range liquidity positions will earn you farming
-            rewards
+            Deposit your liquidity positions (NFT tokens) first to enable farming. Only your in range liquidity
+            positions (NFT tokens) will earn you farming rewards
           </Trans>
         </Text>
 

src/components/YieldPools/ProMMFarmModals/StakeModal.tsx

@@ -271,13 +271,13 @@ function StakeModal({
         <Text fontSize="12px" marginTop="20px" color={theme.subText}>
           {type === 'stake' ? (
             <Trans>
-              Stake your liquidity positions into the farms to start earning rewards. Only your in-range positions will
-              earn rewards
+              Stake your deposited liquidity positions (NFT tokens) into the farms to start earning rewards. Only your
+              in-range positions will earn rewards
             </Trans>
           ) : (
             <Trans>
-              Unstake your liquidity positions from the farm. You will no longer earn rewards on these positions once
-              unstaked
+              Unstake your liquidity positions (NFT tokens) from the farm. You will no longer earn rewards on these
+              positions once unstaked
             </Trans>
           )}
         </Text>
@@ -292,11 +292,15 @@ function StakeModal({
               marginTop="20px"
             >
               <Info size="48px" />
-              <Text marginTop="16px" textAlign="center" maxWidth="480px" lineHeight={1.5}>
+              <Text marginTop="16px" textAlign="center" lineHeight={1.5}>
                 <Trans>
-                  You dont have any relevant liquidity positions yet.
-                  <br /> Add liquidity to the farming pools first. Check out our{' '}
-                  <StyledInternalLink to="/pools">Pools.</StyledInternalLink>
+                  You haven&apos;t deposited any liquidity positions (NFT tokens) for this farming pair yet.
+                  <br />
+                  <br />
+                  Add liquidity to this pool first in our <StyledInternalLink to="/pools">
+                    Pools
+                  </StyledInternalLink>{' '}
+                  page. If you&apos;ve done that, deposit your liquidity position (NFT tokens) before you stake
                 </Trans>
               </Text>
             </Flex>

src/components/YieldPools/ProMMFarmModals/WithdrawModal.tsx

@@ -281,7 +281,10 @@ function WithdrawModal({ selectedFarmAddress, onDismiss }: { onDismiss: () => vo
         </Flex>
 
         <Text fontSize="12px" marginTop="20px" color={theme.subText}>
-          <Trans>You will need to unstake your liquidity first before withdrawing it back to your wallet</Trans>
+          <Trans>
+            You will need to unstake your liquidity positions (NFT tokens) first before withdrawing it back to your
+            wallet
+          </Trans>
         </Text>
 
         {!above768 && filterComponent}

src/constants/networks/cronos-testnet.ts

@@ -1,6 +1,7 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 
-import CRONOS from 'assets/networks/cronos-network.png'
+import CRONOS_DARK from 'assets/networks/cronos-network-dark.svg'
+import CRONOS from 'assets/networks/cronos-network.svg'
 import CronosLogo from 'assets/svg/cronos-token-logo.svg'
 import { createClient } from 'utils/client'
 
@@ -15,6 +16,7 @@ const cronosTestnetInfo: NetworkInfo = {
   route: 'cronos-testnet',
   name: 'Cronos Testnet',
   icon: CRONOS,
+  iconDark: CRONOS_DARK,
   classicClient: createClient(
     'https://testnet-cronos-subgraph.knstats.com/subgraphs/name/dynamic-amm/dmm-exchange-cronos-testnet',
   ),

src/constants/networks/cronos.ts

@@ -1,6 +1,7 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 
-import CRONOS from 'assets/networks/cronos-network.png'
+import CRONOS_DARK from 'assets/networks/cronos-network-dark.svg'
+import CRONOS from 'assets/networks/cronos-network.svg'
 import CronosLogo from 'assets/svg/cronos-token-logo.svg'
 import { createClient } from 'utils/client'
 
@@ -15,6 +16,7 @@ const cronosInfo: NetworkInfo = {
   route: 'cronos',
   name: 'Cronos',
   icon: CRONOS,
+  iconDark: CRONOS_DARK,
   classicClient: createClient(
     'https://cronos-graph.kyberengineering.io/subgraphs/name/kybernetwork/kyberswap-exchange-cronos',
   ),

src/constants/type.ts

@@ -6,6 +6,7 @@ export type NetworkInfo = {
   readonly route: string
   readonly name: string
   readonly icon: string
+  readonly iconDark?: string
   readonly classicClient: ApolloClient<NormalizedCacheObject>
   readonly elasticClient: ApolloClient<NormalizedCacheObject>
   readonly blockClient: ApolloClient<NormalizedCacheObject>

src/pages/Campaign/CampaignButtonWithOptions.tsx

@@ -150,7 +150,7 @@ export default function CampaignButtonWithOptions({
       {isClaimingThisCampaignRewards && <Dots />}
       <ChevronDown style={{ position: 'absolute', top: '50%', right: '12px', transform: 'translateY(-50%)' }} />
       {isShowNetworks && (
-        <OptionsContainer style={{ margin: '0 12px', width: 'calc(100% - 24px)' }}>
+        <OptionsContainer>
           {chainIds.map(chainId => {
             return (
               <Flex

src/pages/Campaign/EnterNowOrClaimButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useSelector } from 'react-redux'
 
 import { BIG_INT_ZERO } from 'constants/index'

src/pages/SwapV2/index.tsx

@@ -736,7 +736,10 @@ export default function Swap({ history }: RouteComponentProps) {
                       </StyledActionButtonSwapForm>
                     }
                   />
-                  <MobileTokenInfo currencies={currencies} onClick={() => setActiveTab(TAB.INFO)} />
+                  <MobileTokenInfo
+                    currencies={currencies}
+                    onClick={() => setActiveTab(prev => (prev === TAB.INFO ? TAB.SWAP : TAB.INFO))}
+                  />
                   <ShareButtonWithModal
                     url={shareUrl}
                     onShared={() => {
@@ -745,11 +748,7 @@ export default function Swap({ history }: RouteComponentProps) {
                   />
                   <StyledActionButtonSwapForm
                     active={activeTab === TAB.SETTINGS}
-                    onClick={() => {
-                      if (activeTab === TAB.SETTINGS) {
-                        setActiveTab(TAB.SWAP)
-                      } else setActiveTab(TAB.SETTINGS)
-                    }}
+                    onClick={() => setActiveTab(prev => (prev === TAB.SETTINGS ? TAB.SWAP : TAB.SETTINGS))}
                     aria-label="Swap Settings"
                   >
                     <MouseoverTooltip

src/pages/TrueSight/styled.tsx

@@ -1,5 +1,5 @@
 import { rgba } from 'polished'
-import { Flex, Text } from 'rebass'
+import { Text } from 'rebass'
 import styled from 'styled-components'
 
 import { ButtonEmpty, ButtonPrimary } from 'components/Button'
@@ -67,19 +67,21 @@ export const TrueSightFilterBarLayoutMobile = styled.div`
   position: relative;
 `
 
-export const OptionsContainer = styled(Flex)`
+export const OptionsContainer = styled.div`
+  display: flex;
   position: absolute;
-  bottom: -4px;
+  bottom: -6px;
   right: 0;
-  border-radius: 20px;
+  border-radius: 16px;
   flex-direction: column;
   background: ${({ theme }) => theme.tableHeader};
   overflow: hidden;
   z-index: 9999;
   width: 100%;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  transform: translate(0, 100%);
-  min-width: max-content !important;
+  left: 50%;
+  transform: translate(-50%, 100%);
+  min-width: max-content;
 
   & > * {
     cursor: pointer;