-
Pairs
+
+
Pairs
{filteredPairs.slice(0, pairsShown).map((val, ind) => {
const currency0 = new Token(
ChainId.MATIC,
@@ -271,9 +239,7 @@ const Search: React.FC = () => {
history.push(`/analytics/pair/${val.id}`)}
>
{
currency1={currency1}
size={28}
/>
-
+
{val.token0.symbol} - {val.token1.symbol} Pair
-
+
);
})}
-
setPairsShown(pairsShown + 5)}
+ margin='8px 0'
>
- Show More
-
-
Tokens
+
Show More
+
+
Tokens
{filteredTokens.slice(0, tokensShown).map((val, ind) => {
const currency = new Token(
ChainId.MATIC,
@@ -305,25 +271,25 @@ const Search: React.FC = () => {
history.push(`/analytics/token/${val.id}`)}
>
-
- {val.name} {val.symbol}
-
+
+
+ {val.name} {val.symbol}
+
+
);
})}
-
setTokensShown(tokensShown + 5)}
>
- Show More
-
+
Show More
+
)}
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index 671341eac..860ab86c9 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -1,42 +1,7 @@
import React, { useState } from 'react';
import { Box } from '@material-ui/core';
import { ReactComponent as SearchIcon } from 'assets/images/SearchIcon.svg';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
-
-const useStyles = makeStyles(({ palette, breakpoints }) => ({
- searchInput: {
- height: 40,
- border: `1px solid ${palette.secondary.dark}`,
- borderRadius: 10,
- minWidth: 300,
- display: 'flex',
- alignItems: 'center',
- padding: '0 10px',
- width: '100%',
- '& input': {
- background: 'transparent',
- border: 'none',
- boxShadow: 'none',
- outline: 'none',
- marginLeft: 8,
- fontSize: 14,
- fontWeight: 500,
- color: palette.text.primary,
- flex: 1,
- },
- [breakpoints.down('xs')]: {
- minWidth: 'unset',
- marginRight: 0,
- },
- },
- focusedSearchInput: {
- border: `1px solid ${palette.primary.main}`,
- '& svg path': {
- fill: `${palette.text.primary} !important`,
- },
- },
-}));
+import 'components/styles/SearchInput.scss';
interface SearchInputProps {
placeholder: string;
@@ -49,15 +14,9 @@ const SearchInput: React.FC
= ({
value,
setValue,
}) => {
- const classes = useStyles();
const [searchFocused, setSearchFocused] = useState(false);
return (
-
+
({
- slippageButton: {
- width: 62,
- height: 40,
- borderRadius: 10,
- border: `solid 1px ${palette.secondary.light}`,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- cursor: 'pointer',
- marginRight: 16,
- },
- activeSlippageButton: {
- background: palette.primary.main,
- },
- settingsInput: {
- background: 'transparent',
- border: 'none',
- outline: 'none',
- textAlign: 'right',
- flex: 1,
- fontSize: 14,
- color: 'rgba(212, 229, 255, 0.8)',
- fontWeight: 500,
- },
-}));
-
interface SettingsModalProps {
open: boolean;
onClose: () => void;
}
const SettingsModal: React.FC = ({ open, onClose }) => {
- const classes = useStyles();
- const { palette } = useTheme();
const [
userSlippageTolerance,
setUserslippageTolerance,
@@ -138,66 +109,48 @@ const SettingsModal: React.FC = ({ open, onClose }) => {
setExpertConfirm(false)}>
-
- Are you sure?
+
+ Are you sure?
setExpertConfirm(false)}
/>
-
+
Expert mode turns off the confirm transaction prompt and allows
high slippage trades that often result in bad rates and lost
funds.
-
-
- ONLY USE THIS MODE IF YOU KNOW WHAT YOU ARE DOING.
-
-
- Please type the word "confirm" to enable expert mode.
-
+
+
+
+ ONLY USE THIS MODE IF YOU KNOW WHAT YOU ARE DOING.
+
+
+
+
+ Please type the word "confirm" to enable expert mode.
+
+
setExpertConfirmText(e.target.value)}
/>
{
if (expertConfirmText === 'confirm') {
toggleExpertMode();
@@ -205,81 +158,64 @@ const SettingsModal: React.FC = ({ open, onClose }) => {
}
}}
>
- Turn on Expert Mode
+ Turn on Expert Mode
-
- Settings
+
+ Settings
-
-
- Slippage Tolerance
-
+
+
+ Slippage Tolerance
+
-
+
{
setSlippageInput('');
setUserslippageTolerance(10);
}}
>
- 0.1%
+ 0.1%
{
setSlippageInput('');
setUserslippageTolerance(50);
}}
>
- 0.5%
+ 0.5%
{
setSlippageInput('');
setUserslippageTolerance(100);
}}
>
- 1%
+ 1%
{slippageAlert && }
= ({ open, onClose }) => {
fontSize={14}
fontWeight={500}
align='right'
- color='rgba(212, 229, 255, 0.8)'
onBlur={() => {
parseCustomSlippage((userSlippageTolerance / 100).toFixed(2));
}}
onUserInput={(value) => parseCustomSlippage(value)}
/>
- %
+ %
{slippageError && (
-
- {slippageError === SlippageError.InvalidInput
- ? 'Enter a valid slippage percentage'
- : slippageError === SlippageError.RiskyLow
- ? 'Your transaction may fail'
- : 'Your transaction may be frontrun'}
-
+
+
+ {slippageError === SlippageError.InvalidInput
+ ? 'Enter a valid slippage percentage'
+ : slippageError === SlippageError.RiskyLow
+ ? 'Your transaction may fail'
+ : 'Your transaction may be frontrun'}
+
+
)}
-
-
- Transaction Deadline
-
+
+
+ Transaction Deadline
+
-
-
+
+
{
parseCustomDeadline((ttl / 60).toString());
}}
onUserInput={(value) => parseCustomDeadline(value)}
/>
-
- minutes
-
+
+ minutes
+
{deadlineError && (
-
- Enter a valid deadline
-
+
+ Enter a valid deadline
+
)}
-
-
-
- Expert Mode
-
+
+
+ Expert Mode
= ({ open, onClose }) => {
/>
-
- Language
-
- English (default)
+
+ Language
+
+ English (default)
diff --git a/src/components/StakeQuickModal/StakeQuickModal.tsx b/src/components/StakeQuickModal/StakeQuickModal.tsx
index 0cb6ca8eb..92e84d288 100644
--- a/src/components/StakeQuickModal/StakeQuickModal.tsx
+++ b/src/components/StakeQuickModal/StakeQuickModal.tsx
@@ -1,6 +1,5 @@
import React, { useState } from 'react';
-import { Box, Typography, Button } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { Box, Button } from '@material-ui/core';
import { TransactionResponse } from '@ethersproject/providers';
import { CustomModal, ColoredSlider, NumericalInput } from 'components';
import { useDerivedLairInfo } from 'state/stake/hooks';
@@ -15,25 +14,7 @@ import {
useTransactionFinalizer,
} from 'state/transactions/hooks';
import { formatTokenAmount, returnTokenFromKey } from 'utils';
-
-const useStyles = makeStyles(({ palette }) => ({
- stakeButton: {
- backgroundImage:
- 'linear-gradient(104deg, #004ce6 -32%, #0098ff 54%, #00cff3 120%, #64fbd3 198%)',
- backgroundColor: 'transparent',
- height: 48,
- width: '48%',
- borderRadius: 10,
- '& span': {
- fontSize: 16,
- fontWeight: 600,
- },
- '&.Mui-disabled': {
- backgroundImage: 'none',
- backgroundColor: palette.secondary.dark,
- },
- },
-}));
+import 'components/styles/StakeModal.scss';
interface StakeQuickModalProps {
open: boolean;
@@ -41,8 +22,6 @@ interface StakeQuickModalProps {
}
const StakeQuickModal: React.FC = ({ open, onClose }) => {
- const classes = useStyles();
- const { palette } = useTheme();
const [attempting, setAttempting] = useState(false);
const { account } = useActiveWeb3React();
const addTransaction = useTransactionAdder();
@@ -114,28 +93,21 @@ const StakeQuickModal: React.FC = ({ open, onClose }) => {
return (
-
- Stake QUICK
-
+
+ Stake QUICK
+
-
- QUICK
-
- Balance: {formatTokenAmount(quickBalance)}
-
+
+ QUICK
+ Balance: {formatTokenAmount(quickBalance)}
-
+
= ({ open, onClose }) => {
);
}}
/>
- {
setTypedValue(quickBalance ? quickBalance.toExact() : '0');
setStakePercent(100);
}}
>
MAX
-
+
-
+
{
+ handleChange={(evt: any, value) => {
setStakePercent(value as number);
setTypedValue(
quickBalance
@@ -187,41 +154,38 @@ const StakeQuickModal: React.FC = ({ open, onClose }) => {
}}
/>
-
- {Math.min(stakePercent, 100).toLocaleString()}%
-
+ {Math.min(stakePercent, 100).toLocaleString()}%
-
-
+
diff --git a/src/components/StakeSyrupModal/StakeSyrupModal.tsx b/src/components/StakeSyrupModal/StakeSyrupModal.tsx
index b73642507..a02920539 100644
--- a/src/components/StakeSyrupModal/StakeSyrupModal.tsx
+++ b/src/components/StakeSyrupModal/StakeSyrupModal.tsx
@@ -1,6 +1,5 @@
import React, { useState } from 'react';
-import { Box, Typography, Button } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { Box, Button } from '@material-ui/core';
import { TokenAmount } from '@uniswap/sdk';
import { TransactionResponse } from '@ethersproject/providers';
import { CustomModal, ColoredSlider, NumericalInput } from 'components';
@@ -27,25 +26,6 @@ import {
getPartialTokenAmount,
} from 'utils';
-const useStyles = makeStyles(({ palette }) => ({
- stakeButton: {
- backgroundImage:
- 'linear-gradient(104deg, #004ce6 -32%, #0098ff 54%, #00cff3 120%, #64fbd3 198%)',
- backgroundColor: 'transparent',
- height: 48,
- width: '48%',
- borderRadius: 10,
- '& span': {
- fontSize: 16,
- fontWeight: 600,
- },
- '&.Mui-disabled': {
- backgroundImage: 'none',
- backgroundColor: palette.secondary.dark,
- },
- },
-}));
-
interface StakeSyrupModalProps {
open: boolean;
onClose: () => void;
@@ -57,8 +37,6 @@ const StakeSyrupModal: React.FC = ({
onClose,
syrup,
}) => {
- const classes = useStyles();
- const { palette } = useTheme();
const [attempting, setAttempting] = useState(false);
const [hash, setHash] = useState('');
const { account, chainId, library } = useActiveWeb3React();
@@ -175,30 +153,21 @@ const StakeSyrupModal: React.FC = ({
return (
-
-
- Stake {syrup.stakingToken.symbol}
-
-
+
+ Stake {syrup.stakingToken.symbol}
+
-
- {syrup.stakingToken.symbol}
-
- Balance: {formatTokenAmount(maxAmountInput)}
-
+
+ {syrup.stakingToken.symbol}
+ Balance: {formatTokenAmount(maxAmountInput)}
-
+
= ({
}
}}
/>
- {
setTypedValue(maxAmountInput ? maxAmountInput.toExact() : '0');
setStakePercent(100);
}}
>
MAX
-
+
-
+
{
+ handleChange={(_, value) => {
const percent = value as number;
setStakePercent(percent);
setTypedValue(getPartialTokenAmount(percent, maxAmountInput));
}}
/>
-
- {Math.min(stakePercent, 100).toLocaleString()}%
-
+ {Math.min(stakePercent, 100).toLocaleString()}%
-
- Daily Rewards
-
+
+ Daily Rewards
+
{hypotheticalRewardRate
? formatNumber(
Number(hypotheticalRewardRate.toExact()) * getSecondsOneDay(),
)
: '-'}{' '}
{syrup.token.symbol} / day
-
+
-
-
+
diff --git a/src/components/Swap/AdvancedSwapDetails.tsx b/src/components/Swap/AdvancedSwapDetails.tsx
index 39464b12b..e35fa3dbe 100755
--- a/src/components/Swap/AdvancedSwapDetails.tsx
+++ b/src/components/Swap/AdvancedSwapDetails.tsx
@@ -1,7 +1,6 @@
import { Trade, TradeType } from '@uniswap/sdk';
import React, { useState } from 'react';
-import { Box, Typography } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { Box } from '@material-ui/core';
import { useTranslation } from 'react-i18next';
import { Field } from 'state/swap/actions';
import { useUserSlippageTolerance } from 'state/user/hooks';
@@ -18,37 +17,6 @@ import {
import { ReactComponent as EditIcon } from 'assets/images/EditIcon.svg';
import { formatTokenAmount } from 'utils';
-const useStyles = makeStyles(({ palette }) => ({
- summaryRow: {
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'space-between',
- margin: '8px 24px 0',
- '& p': {
- color: '#b6b9cc',
- },
- '& > div': {
- display: 'flex',
- alignItems: 'center',
- '& > div': {
- marginLeft: 4,
- },
- },
- },
- swapRoute: {
- margin: '8px 0',
- '& .header': {
- display: 'flex',
- alignItems: 'center',
- '& p': {
- fontSize: 16,
- lineHeight: '28px',
- marginRight: 4,
- },
- },
- },
-}));
-
interface TradeSummaryProps {
trade: Trade;
allowedSlippage: number;
@@ -59,7 +27,6 @@ export const TradeSummary: React.FC = ({
allowedSlippage,
}) => {
const [openSettingsModal, setOpenSettingsModal] = useState(false);
- const { palette } = useTheme();
const { t } = useTranslation();
const { priceImpactWithoutFee, realizedLPFee } = computeTradePriceBreakdown(
@@ -70,7 +37,6 @@ export const TradeSummary: React.FC = ({
trade,
allowedSlippage,
);
- const classes = useStyles();
const tradeAmount = isExactIn ? trade.outputAmount : trade.inputAmount;
return (
@@ -81,82 +47,64 @@ export const TradeSummary: React.FC = ({
onClose={() => setOpenSettingsModal(false)}
/>
)}
-
-
- Slippage:
+
+
+ Slippage:
setOpenSettingsModal(true)}
- style={{ cursor: 'pointer' }}
+ className='swapSlippage'
>
-
- {allowedSlippage / 100}%
-
-
+ {allowedSlippage / 100}%
+
-
-
-
- {isExactIn ? t('minReceived') : t('maxSold')}:
-
+
+
+ {isExactIn ? t('minReceived') : t('maxSold')}:
-
-
+
+
{formatTokenAmount(
slippageAdjustedAmounts[isExactIn ? Field.OUTPUT : Field.INPUT],
)}{' '}
{tradeAmount.currency.symbol}
-
-
-
-
+
+
-
-
- Price Impact:
+
+
+ Price Impact:
-
-
- Liquidity Provider Fee:
+
+
+ Liquidity Provider Fee:
-
+
{formatTokenAmount(realizedLPFee)} {trade.inputAmount.currency.symbol}
-
+
-
-
-
- Route
-
+
+
+ Route:
{trade.route.path.map((token, i, path) => {
const isLastItem: boolean = i === path.length - 1;
return (
-
-
- {token.symbol}{' '}
- {// this is not to show the arrow at the end of the trade path
- isLastItem ? '' : ' > '}
-
-
+
+ {token.symbol}{' '}
+ {// this is not to show the arrow at the end of the trade path
+ isLastItem ? '' : ' > '}
+
);
})}
diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx
index 14b206e37..1af4d8422 100755
--- a/src/components/Swap/Swap.tsx
+++ b/src/components/Swap/Swap.tsx
@@ -2,8 +2,7 @@ import React, { useState, useMemo, useCallback, useEffect } from 'react';
import { Currency, CurrencyAmount, JSBI, Token, Trade } from '@uniswap/sdk';
import ReactGA from 'react-ga';
import { ArrowDown } from 'react-feather';
-import { Box, Typography, Button, CircularProgress } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Button, CircularProgress } from '@material-ui/core';
import { useWalletModalToggle } from 'state/application/hooks';
import {
useDerivedSwapInfo,
@@ -42,82 +41,13 @@ import {
import { computeTradePriceBreakdown, warningSeverity } from 'utils/prices';
import { ReactComponent as PriceExchangeIcon } from 'assets/images/PriceExchangeIcon.svg';
import { ReactComponent as ExchangeIcon } from 'assets/images/ExchangeIcon.svg';
-
-const useStyles = makeStyles(({ palette }) => ({
- exchangeSwap: {
- cursor: 'pointer',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- margin: '16px auto',
- zIndex: 2,
- position: 'relative',
- },
- swapPrice: {
- display: 'flex',
- justifyContent: 'space-between',
- background: 'rgb(43, 45, 59, 0.2)',
- padding: '8px 24px',
- borderBottomLeftRadius: 10,
- borderBottomRightRadius: 10,
- '& p': {
- display: 'flex',
- alignItems: 'center',
- color: '#b6b9cc',
- '& svg': {
- marginLeft: 8,
- width: 16,
- height: 16,
- cursor: 'pointer',
- },
- },
- },
- swapButtonWrapper: {
- display: 'flex',
- justifyContent: 'space-between',
- marginTop: 20,
- width: '100%',
- '& button': {
- borderRadius: '10px',
- height: 56,
- fontSize: 18,
- fontWeight: 600,
- width: (props: any) => (props.showApproveFlow ? '48%' : '100%'),
- backgroundImage: `linear-gradient(to bottom, ${palette.primary.main}, #004ce6)`,
- '&.Mui-disabled': {
- backgroundImage: `linear-gradient(to bottom, ${palette.secondary.dark}, #1d212c)`,
- color: palette.text.secondary,
- opacity: 0.5,
- },
- '& .content': {
- display: 'flex',
- alignItems: 'center',
- '& > div': {
- color: 'white',
- marginLeft: 6,
- },
- },
- },
- },
- recipientInput: {
- width: '100%',
- '& .header': {
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- padding: '8px 12px',
- '& button': {
- background: 'transparent',
- },
- },
- },
-}));
+import 'components/styles/Swap.scss';
const Swap: React.FC<{
currency0?: Currency;
currency1?: Currency;
- currencyBg?: string;
-}> = ({ currency0, currency1, currencyBg }) => {
+ currencyBgClass?: string;
+}> = ({ currency0, currency1, currencyBgClass }) => {
const { account } = useActiveWeb3React();
const { independentField, typedValue, recipient } = useSwapState();
const {
@@ -210,8 +140,6 @@ const Swap: React.FC<{
(approvalSubmitted && approval === ApprovalState.APPROVED)) &&
!(priceImpactSeverity > 3 && !isExpertMode);
- const classes = useStyles({ showApproveFlow });
-
const toggleWalletModal = useWalletModalToggle();
useEffect(() => {
@@ -547,9 +475,9 @@ const Swap: React.FC<{
handleCurrencySelect={handleCurrencySelect}
amount={formattedAmounts[Field.INPUT]}
setAmount={handleTypeInput}
- bgColor={currencyBg}
+ bgClass={currencyBgClass}
/>
-
+
{trade && trade.executionPrice && (
-
- Price:
-
+
+ Price:
+
1{' '}
{
(mainPrice ? currencies[Field.INPUT] : currencies[Field.OUTPUT])
@@ -587,12 +515,12 @@ const Swap: React.FC<{
setMainPrice(!mainPrice);
}}
/>
-
+
)}
{!showWrap && isExpertMode && (
-
-
+
+
{recipient !== null ? (
) : (
@@ -615,42 +543,48 @@ const Swap: React.FC<{
)}
-
+
{showApproveFlow && (
-
);
diff --git a/src/components/SwapTokenDetails/SwapTokenDetails.tsx b/src/components/SwapTokenDetails/SwapTokenDetails.tsx
index ebee4f16e..5bbb8dec0 100755
--- a/src/components/SwapTokenDetails/SwapTokenDetails.tsx
+++ b/src/components/SwapTokenDetails/SwapTokenDetails.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Box, Grid, Typography } from '@material-ui/core';
+import React, { useEffect, useState } from 'react';
+import { Box, Grid } from '@material-ui/core';
import Skeleton from '@material-ui/lab/Skeleton';
import { ArrowDropUp, ArrowDropDown } from '@material-ui/icons';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
import { CurrencyLogo } from 'components';
import { useBlockNumber, useTokenDetails } from 'state/application/hooks';
import useCopyClipboard from 'hooks/useCopyClipboard';
@@ -20,19 +20,9 @@ import { Token } from '@uniswap/sdk';
import dayjs from 'dayjs';
import { unwrappedToken } from 'utils/wrappedCurrency';
-const useStyles = makeStyles(({ palette }) => ({
- success: {
- color: palette.success.main,
- },
- danger: {
- color: palette.error.main,
- },
-}));
-
const SwapTokenDetails: React.FC<{
token: Token;
}> = ({ token }) => {
- const classes = useStyles();
const currency = unwrappedToken(token);
const tokenAddress = token.address;
const { palette } = useTheme();
@@ -84,30 +74,22 @@ const SwapTokenDetails: React.FC<{
return (
-
-
+
+
- {currency.symbol}
+ {currency.symbol}
{tokenData ? (
-
-
- ${formatNumber(tokenData.priceUSD)}
-
+
+ ${formatNumber(tokenData.priceUSD)}
{priceUp ? : }
- {priceUpPercent}%
+ {priceUpPercent}%
) : (
@@ -132,21 +114,14 @@ const SwapTokenDetails: React.FC<{
)}
-
+
-
+
{tokenData ? (
-
+
TVL: {formatCompact(tokenData?.totalLiquidityUSD)}
-
+
) : (
)}
@@ -155,12 +130,9 @@ const SwapTokenDetails: React.FC<{
{tokenData ? (
-
+
24h VOL: {formatCompact(tokenData?.oneDayVolumeUSD)}
-
+
) : (
)}
@@ -168,26 +140,19 @@ const SwapTokenDetails: React.FC<{
-
+
-
- {shortenAddress(tokenAddress)}
-
+ {shortenAddress(tokenAddress)}
{
setCopied(tokenAddress);
}}
diff --git a/src/components/SyrupCard/SyrupAPR.tsx b/src/components/SyrupCard/SyrupAPR.tsx
index 0a35305ec..923cd23e6 100644
--- a/src/components/SyrupCard/SyrupAPR.tsx
+++ b/src/components/SyrupCard/SyrupAPR.tsx
@@ -1,6 +1,5 @@
import React from 'react';
-import { Box, Typography } from '@material-ui/core';
-import { useTheme } from '@material-ui/core/styles';
+import { Box } from '@material-ui/core';
import { SyrupInfo } from 'types';
import { CurrencyLogo } from 'components';
import { returnTokenFromKey, getTokenAPRSyrup } from 'utils';
@@ -9,31 +8,21 @@ const SyrupAPR: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
syrup,
dQUICKAPY,
}) => {
- const { palette } = useTheme();
const isDQUICKStakingToken = syrup.stakingToken.equals(
returnTokenFromKey('DQUICK'),
);
return (
<>
-
+
{getTokenAPRSyrup(syrup).toLocaleString()}%
-
+
{isDQUICKStakingToken && (
-
-
-
-
- {dQUICKAPY}% APY
-
-
+
+
+
+ {dQUICKAPY}% APY
+
)}
diff --git a/src/components/SyrupCard/SyrupCard.tsx b/src/components/SyrupCard/SyrupCard.tsx
index d07c3cd52..c549ca7ab 100755
--- a/src/components/SyrupCard/SyrupCard.tsx
+++ b/src/components/SyrupCard/SyrupCard.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
-import { Box, Typography, useMediaQuery } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { Box, useMediaQuery } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
import { SyrupInfo } from 'types';
import { unwrappedToken } from 'utils/wrappedCurrency';
import { CurrencyLogo } from 'components';
@@ -8,29 +8,15 @@ import { formatCompact, formatTokenAmount, getEarnedUSDSyrup } from 'utils';
import { KeyboardArrowDown, KeyboardArrowUp } from '@material-ui/icons';
import SyrupAPR from './SyrupAPR';
import SyrupCardDetails from './SyrupCardDetails';
-
-const useStyles = makeStyles(({ palette }) => ({
- syrupCard: {
- background: palette.secondary.dark,
- width: '100%',
- borderRadius: 10,
- marginTop: 24,
- },
- syrupText: {
- fontSize: 14,
- fontWeight: 600,
- color: palette.text.secondary,
- },
-}));
+import 'components/styles/SyrupCard.scss';
const SyrupCard: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
syrup,
dQUICKAPY,
}) => {
- const { palette, breakpoints } = useTheme();
+ const { breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [expanded, setExpanded] = useState(false);
- const classes = useStyles();
const currency = unwrappedToken(syrup.token);
@@ -41,26 +27,14 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
}`;
return (
-
- setExpanded(!expanded)}
- >
+
+ setExpanded(!expanded)}>
{isMobile ? (
<>
-
+
- {currency.symbol}
+ {currency.symbol}
{!expanded && (
@@ -68,69 +42,53 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
)}
-
+
{expanded ? : }
) : (
<>
-
+
- {currency.symbol}
-
-
+ {currency.symbol}
+
+
{syrup.rate >= 1000000
? formatCompact(syrup.rate)
: syrup.rate.toLocaleString()}
-
- {' '}
- / day
-
-
+ / day
+
-
-
+
+
$
{syrup.rewardTokenPriceinUSD
? (
syrup.rate * syrup.rewardTokenPriceinUSD
).toLocaleString()
: '-'}{' '}
- / day
-
+ / day
+
- {depositAmount}
+ {depositAmount}
-
+
-
+
{formatTokenAmount(syrup.earnedAmount)}
-
+
-
+
{getEarnedUSDSyrup(syrup)}
-
+
)}
diff --git a/src/components/SyrupCard/SyrupCardDetails.tsx b/src/components/SyrupCard/SyrupCardDetails.tsx
index 0b95d129e..6b667e842 100755
--- a/src/components/SyrupCard/SyrupCardDetails.tsx
+++ b/src/components/SyrupCard/SyrupCardDetails.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
-import { Box, Typography, Divider, useMediaQuery } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { Box, Divider, useMediaQuery } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
import { TransactionResponse } from '@ethersproject/providers';
import { useTranslation } from 'react-i18next';
import { SyrupInfo } from 'types';
@@ -25,48 +25,17 @@ import SyrupAPR from './SyrupAPR';
import { useUSDCPriceToken } from 'utils/useUSDCPrice';
import { GlobalConst } from 'constants/index';
-const useStyles = makeStyles(({ palette, breakpoints }) => ({
- syrupButton: {
- backgroundImage:
- 'linear-gradient(280deg, #64fbd3 0%, #00cff3 0%, #0098ff 10%, #004ce6 100%)',
- borderRadius: 10,
- cursor: 'pointer',
- width: 134,
- height: 40,
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- [breakpoints.down('xs')]: {
- width: '49%',
- },
- '& p': {
- color: palette.text.primary,
- },
- },
- dailyRateWrapper: {
- display: 'flex',
- alignItems: 'center',
- flexWrap: 'wrap',
- background: palette.secondary.contrastText,
- width: '100%',
- marginTop: 16,
- padding: '8px 16px',
- borderRadius: 10,
- },
-}));
-
const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
syrup,
dQUICKAPY,
}) => {
const syrupCurrency = unwrappedToken(syrup.token);
- const { palette, breakpoints } = useTheme();
+ const { breakpoints } = useTheme();
const { t } = useTranslation();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [attemptingClaim, setAttemptingClaim] = useState(false);
const [attemptingUnstake, setAttemptingUnstake] = useState(false);
const [openStakeModal, setOpenStakeModal] = useState(false);
- const classes = useStyles();
const stakingTokenPrice = useUSDCPriceToken(syrup.stakingToken);
const stakingContract = useStakingContract(syrup?.stakingRewardAddress);
@@ -143,43 +112,34 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
};
const StakeButton = () => (
- setOpenStakeModal(true)}
- >
- Stake
+ setOpenStakeModal(true)}>
+ Stake
);
const UnstakeButton = () => (
{
if (!attemptingUnstake) {
onWithdraw();
}
}}
>
-
- {attemptingUnstake ? 'Unstaking...' : 'Unstake'}
-
+ {attemptingUnstake ? 'Unstaking...' : 'Unstake'}
);
const ClaimButton = () => (
{
if (!attemptingClaim) {
onClaimReward();
}
}}
>
-
- {attemptingClaim ? 'Claiming...' : 'Claim'}
-
+ {attemptingClaim ? 'Claiming...' : 'Claim'}
);
@@ -198,44 +158,28 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
{isMobile && (
-
-
+
+
{syrup.stakingToken.symbol} {t('deposits')}:
-
- {depositAmount}
+
+ {depositAmount}
-
-
- {t('dailyRewards')}:
-
-
+
+ {t('dailyRewards')}:
+
{syrup.rate >= 1000000
? formatCompact(syrup.rate)
: syrup.rate.toLocaleString()}{' '}
{syrup.token.symbol}
-
- {' '}
- / {t('day')}
-
-
+ / {t('day')}
+
-
-
-
- APR:
-
+
+
+ APR:
@@ -247,26 +191,14 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
)}
-
-
- {t('inwallet')}
-
-
-
- {userLiquidityUnstaked
- ? formatTokenAmount(userLiquidityUnstaked)
- : 0}{' '}
- {syrup.stakingToken.symbol}
-
-
+
+ {t('inwallet')}
+
+ {userLiquidityUnstaked
+ ? formatTokenAmount(userLiquidityUnstaked)
+ : 0}{' '}
+ {syrup.stakingToken.symbol}
+
$
{userLiquidityUnstaked
? (
@@ -274,91 +206,56 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
Number(userLiquidityUnstaked.toExact())
).toLocaleString()
: 0}
-
-
+
+
-
-
- {t('staked')}
-
-
-
- {formatTokenAmount(syrup.stakedAmount)}{' '}
- {syrup.stakingToken.symbol}
-
-
+
+ {t('staked')}
+
+ {formatTokenAmount(syrup.stakedAmount)}{' '}
+ {syrup.stakingToken.symbol}
+
{syrup.stakedAmount
? `$${(
stakingTokenPrice * Number(syrup.stakedAmount.toExact())
).toLocaleString()}`
: '-'}
-
-
+
+
-
-
+
+
{t('earned')} {currency?.symbol}
-
-
+
+
-
-
- {formatTokenAmount(syrup.earnedAmount)}
-
-
+
+ {formatTokenAmount(syrup.earnedAmount)}
+
{getEarnedUSDSyrup(syrup)}
-
-
+
+
-
+
{!isMobile && (
)}
{isMobile ? (
<>
{syrup.earnedAmount && syrup.earnedAmount.greaterThan('0') && (
-
+
)}
{!syrup.ended && }
{syrup.stakedAmount &&
@@ -366,7 +263,7 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
) : (
-
+
{!syrup.ended && }
{syrup.stakedAmount && syrup.stakedAmount.greaterThan('0') && (
@@ -382,26 +279,18 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
)}
{syrup.rewardRate?.greaterThan('0') && (
-
-
+
+
-
- {t('yourRate')}:
-
+ {t('yourRate')}:
-
+
{formatMulDivTokenAmount(
syrup.rewardRate,
GlobalConst.utils.ONEDAYSECONDS,
)}{' '}
{syrupCurrency.symbol} / {t('day')}
-
+
)}
diff --git a/src/components/SyrupCard/SyrupTimerLabel.tsx b/src/components/SyrupCard/SyrupTimerLabel.tsx
index 52e972ba0..6644b071e 100644
--- a/src/components/SyrupCard/SyrupTimerLabel.tsx
+++ b/src/components/SyrupCard/SyrupTimerLabel.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
-import { Box, Typography, useMediaQuery } from '@material-ui/core';
+import { Box, useMediaQuery } from '@material-ui/core';
import { useTheme } from '@material-ui/core/styles';
const SyrupTimerLabel: React.FC<{ exactEnd: number; isEnded: boolean }> = ({
@@ -7,7 +7,7 @@ const SyrupTimerLabel: React.FC<{ exactEnd: number; isEnded: boolean }> = ({
isEnded,
}) => {
const [currentTime, setCurrentTime] = useState(Math.floor(Date.now() / 1000));
- const { palette, breakpoints } = useTheme();
+ const { breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const MINUTE = 60;
@@ -43,30 +43,20 @@ const SyrupTimerLabel: React.FC<{ exactEnd: number; isEnded: boolean }> = ({
alignItems='center'
justifyContent='space-between'
>
-
+
Time Remaining
-
-
+
+
{`${days}d ${hours
.toString()
.padStart(2, '0')}h ${minutes
.toString()
.padStart(2, '0')}m ${timeRemaining}s`}
-
+
)}
{(isEnded || !Number.isFinite(timeRemaining)) && (
-
- Rewards Ended
-
+ Rewards Ended
)}
);
diff --git a/src/components/ToggleSwitch/ToggleSwitch.tsx b/src/components/ToggleSwitch/ToggleSwitch.tsx
index 80bf49c87..73983b835 100755
--- a/src/components/ToggleSwitch/ToggleSwitch.tsx
+++ b/src/components/ToggleSwitch/ToggleSwitch.tsx
@@ -1,46 +1,17 @@
import React from 'react';
import { Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles(({ palette }) => ({
- wrapper: {
- width: 40,
- height: 20,
- position: 'relative',
- cursor: 'pointer',
- borderRadius: 10,
- border: (props: any) =>
- props.toggled
- ? '1px solid transparent'
- : `1px solid ${palette.text.disabled}`,
- },
- innerCircle: {
- width: 14,
- height: 14,
- borderRadius: 8,
- backgroundColor: (props: any) =>
- props.toggled ? palette.success.main : palette.text.disabled,
- position: 'absolute',
- top: 2,
- },
-}));
+import 'components/styles/ToggleSwitch.scss';
const ToggleSwitch: React.FC<{ toggled: boolean; onToggle: () => void }> = ({
toggled,
onToggle,
}) => {
- const classes = useStyles({ toggled });
return (
-
+
);
};
diff --git a/src/components/TokensTable/TokensTable.tsx b/src/components/TokensTable/TokensTable.tsx
index 86846ae18..6bee81106 100644
--- a/src/components/TokensTable/TokensTable.tsx
+++ b/src/components/TokensTable/TokensTable.tsx
@@ -1,33 +1,15 @@
import React from 'react';
import { Link } from 'react-router-dom';
-import { Box, Typography, Divider } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { Box, Divider } from '@material-ui/core';
import { getAddress } from '@ethersproject/address';
import { ChainId, Token } from '@uniswap/sdk';
import { CurrencyLogo, CustomTable } from 'components';
import { GlobalConst } from 'constants/index';
-import { formatNumber, getFormattedPrice, getPriceColor } from 'utils';
+import { formatNumber, getFormattedPrice, getPriceClass } from 'utils';
import { useBookmarkTokens } from 'state/application/hooks';
import { ReactComponent as StarChecked } from 'assets/images/StarChecked.svg';
import { ReactComponent as StarUnchecked } from 'assets/images/StarUnchecked.svg';
-
-const useStyles = makeStyles(({}) => ({
- priceChangeWrapper: {
- height: 25,
- padding: '0 12px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- borderRadius: 16,
- },
- mobileRow: {
- width: '100%',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'space-between',
- margin: '8px 0',
- },
-}));
+import 'components/styles/TokensTable.scss';
interface TokensTableProps {
data: any[];
@@ -71,8 +53,6 @@ const liquidityHeadCellIndex = 4;
const TokensTable: React.FC = ({ data }) => {
const tokenHeadCells = headCells();
- const classes = useStyles();
- const { palette } = useTheme();
const {
bookmarkTokens,
addBookmarkToken,
@@ -86,10 +66,10 @@ const TokensTable: React.FC = ({ data }) => {
token.symbol,
token.name,
);
- const priceColor = getPriceColor(Number(token.priceChangeUSD), palette);
+ const priceClass = getPriceClass(Number(token.priceChangeUSD));
return (
-
+
= ({ data }) => {
)}
-
+
-
+
{token.name}{' '}
-
- ({token.symbol})
-
-
+ ({token.symbol})
+
-
- Price
-
- ${formatNumber(token.priceUSD)}
-
+
+ Price
+ ${formatNumber(token.priceUSD)}
-
- 24H %
-
-
- {getFormattedPrice(Number(token.priceChangeUSD))}%
-
+
+ 24H %
+
+ {getFormattedPrice(Number(token.priceChangeUSD))}%
-
- 24H Volume
-
- ${Number(token.oneDayVolumeUSD).toLocaleString()}
-
+
+ 24H Volume
+ ${Number(token.oneDayVolumeUSD).toLocaleString()}
-
- Liquidity
-
- ${Number(token.totalLiquidityUSD).toLocaleString()}
-
+
+ Liquidity
+ ${Number(token.totalLiquidityUSD).toLocaleString()}
);
@@ -171,12 +134,12 @@ const TokensTable: React.FC = ({ data }) => {
token.symbol,
token.name,
);
- const priceColor = getPriceColor(Number(token.priceChangeUSD), palette);
+ const priceClass = getPriceClass(Number(token.priceChangeUSD));
return [
{
html: (
-
+
= ({ data }) => {
)}
-
+
-
+
{token.name}{' '}
-
- ({token.symbol})
-
-
+ ({token.symbol})
+
@@ -220,41 +178,22 @@ const TokensTable: React.FC = ({ data }) => {
{
html: (
- ${Number(token.priceUSD).toLocaleString()}
+ ${Number(token.priceUSD).toLocaleString()}
),
},
{
html: (
-
-
- {getFormattedPrice(Number(token.priceChangeUSD))}%
-
+
+ {getFormattedPrice(Number(token.priceChangeUSD))}%
),
},
{
- html: (
-
-
- ${Number(token.oneDayVolumeUSD).toLocaleString()}
-
-
- ),
+ html: ${Number(token.oneDayVolumeUSD).toLocaleString()}
,
},
{
- html: (
-
-
- ${Number(token.totalLiquidityUSD).toLocaleString()}
-
-
- ),
+ html: ${Number(token.totalLiquidityUSD).toLocaleString()}
,
},
];
};
diff --git a/src/components/TopMovers/TopMovers.tsx b/src/components/TopMovers/TopMovers.tsx
index 6f7d16af9..917508fd8 100755
--- a/src/components/TopMovers/TopMovers.tsx
+++ b/src/components/TopMovers/TopMovers.tsx
@@ -1,32 +1,19 @@
import React, { useEffect, useMemo, useState } from 'react';
-import { Box, Typography, useMediaQuery } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { Box, useMediaQuery } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
import { ArrowDropUp, ArrowDropDown } from '@material-ui/icons';
import Skeleton from '@material-ui/lab/Skeleton';
import { Token, ChainId } from '@uniswap/sdk';
import { getAddress } from '@ethersproject/address';
import { CurrencyLogo } from 'components';
-import { getEthPrice, getTopTokens, getPriceColor, formatNumber } from 'utils';
-
-const useStyles = makeStyles(() => ({
- content: {
- width: '100%',
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- },
-}));
+import { getEthPrice, getTopTokens, getPriceClass, formatNumber } from 'utils';
+import 'components/styles/TopMovers.scss';
interface TopMoversProps {
- background: string;
hideArrow?: boolean;
}
-const TopMovers: React.FC = ({
- background,
- hideArrow = false,
-}) => {
- const classes = useStyles();
- const { palette, breakpoints } = useTheme();
+const TopMovers: React.FC = ({ hideArrow = false }) => {
+ const { breakpoints } = useTheme();
const [topTokens, updateTopTokens] = useState(null);
const smallWindowSize = useMediaQuery(breakpoints.down('xs'));
@@ -47,86 +34,35 @@ const TopMovers: React.FC = ({
}, [updateTopTokens]);
return (
-
-
- 24h TOP MOVERS
-
-
+
+ 24h TOP MOVERS
+
{topMoverTokens ? (
-
- {topMoverTokens.map((token: any, index: number) => {
+
+ {topMoverTokens.map((token: any) => {
const currency = new Token(
ChainId.MATIC,
getAddress(token.id),
token.decimals,
);
- const priceColor = getPriceColor(
- Number(token.priceChangeUSD),
- palette,
- );
+ const priceClass = getPriceClass(Number(token.priceChangeUSD));
const priceUp = Number(token.priceChangeUSD) > 0;
const priceDown = Number(token.priceChangeUSD) < 0;
const priceUpPercent = Number(token.priceChangeUSD).toFixed(2);
return (
-
+
-
- {token.symbol}
-
-
-
- ${formatNumber(token.priceUSD)}
-
-
+ {token.symbol}
+
+ ${formatNumber(token.priceUSD)}
+
{!hideArrow && priceUp && }
{!hideArrow && priceDown && }
-
+
{hideArrow && priceUp ? '+' : ''}
{priceUpPercent}%
-
+
diff --git a/src/components/TransactionConfirmationModal/TransactionConfirmationModal.tsx b/src/components/TransactionConfirmationModal/TransactionConfirmationModal.tsx
index ccaa805e7..af5a1777d 100755
--- a/src/components/TransactionConfirmationModal/TransactionConfirmationModal.tsx
+++ b/src/components/TransactionConfirmationModal/TransactionConfirmationModal.tsx
@@ -1,7 +1,6 @@
import { ChainId } from '@uniswap/sdk';
import React from 'react';
-import { Box, Typography, Button, CircularProgress } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Button, CircularProgress } from '@material-ui/core';
import { CustomModal } from 'components';
import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
import { ReactComponent as TransactionFailed } from 'assets/images/TransactionFailed.svg';
@@ -9,53 +8,7 @@ import { ReactComponent as TransactionSuccess } from 'assets/images/TransactionS
import { getEtherscanLink } from 'utils';
import { useActiveWeb3React } from 'hooks';
import ModalBg from 'assets/images/ModalBG.svg';
-
-const useStyles = makeStyles(({ palette }) => ({
- modalHeader: {
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'flex-end',
- position: 'relative',
- marginBottom: 20,
- '& h5': {
- position: 'absolute',
- width: '100%',
- textAlign: 'center',
- },
- '& svg': {
- cursor: 'pointer',
- position: 'relative',
- zIndex: 3,
- },
- },
- modalBG: {
- position: 'absolute',
- top: 100,
- left: '50%',
- transform: 'translateX(-50%)',
- zIndex: 1,
- },
- modalContent: {
- marginTop: 20,
- padding: '16px 0',
- color: palette.text.primary,
- textAlign: 'center',
- '& p': {
- margin: '16px 0',
- },
- },
- submitButton: {
- width: '100%',
- height: 50,
- fontSize: 14,
- borderRadius: 10,
- color: palette.text.primary,
- background: palette.secondary.dark,
- '&:hover': {
- background: palette.secondary.dark,
- },
- },
-}));
+import 'components/styles/TransactionConfirmationModal.scss';
interface ConfirmationPendingContentProps {
onDismiss: () => void;
@@ -66,21 +19,18 @@ export const ConfirmationPendingContent: React.FC {
- const classes = useStyles();
return (
-
+
-
-
+
+
- Waiting For Confirmation
- {pendingText}
-
- Please confirm this transaction in your wallet.
-
+ Waiting For Confirmation
+ {pendingText}
+ Please confirm this transaction in your wallet.
);
@@ -101,24 +51,21 @@ export const TransactionSubmittedContent: React.FC {
- const classes = useStyles();
return (
-
-
- Transaction {txPending ? 'Submitted' : 'Completed'}
-
+
+ Transaction {txPending ? 'Submitted' : 'Completed'}
{!txPending && (
-
+
)}
-
- {modalContent}
+
+ {modalContent}
-
+
{chainId && hash && (
-
+
)}