diff --git a/src/components/AnimatedButton/style.ts b/src/components/AnimatedButton/style.ts index a6a7825..4f5b45e 100644 --- a/src/components/AnimatedButton/style.ts +++ b/src/components/AnimatedButton/style.ts @@ -46,6 +46,7 @@ const useStyles = makeStyles()(() => { position: 'relative', overflow: 'hidden', zIndex: 4, + '&:disabled': { background: colors.invariant.light, color: colors.invariant.componentBcg, @@ -63,9 +64,9 @@ const useStyles = makeStyles()(() => { }, buttonRelease: { - background: `${colors.invariant.component} !important`, + background: `${colors.invariant.componentBcg} !important`, '&:hover': { - background: `${colors.invariant.component} !important` + background: `${colors.invariant.componentBcg} !important` } }, background: { diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index d67d539..cc71f0f 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -191,13 +191,6 @@ export const Header: React.FC = ({ rpcStatus={rpcStatus} /> - - - = ({ ]} onSelect={onNetworkSelect} /> + + + void currency: string | null currencyIconSrc?: string + currencyIsUnknown: boolean value?: string placeholder?: string onMaxClick: () => void @@ -28,6 +30,7 @@ interface IProps { export const DepositAmountInput: React.FC = ({ currency, currencyIconSrc, + currencyIsUnknown, value, setValue, placeholder, @@ -44,9 +47,7 @@ export const DepositAmountInput: React.FC = ({ isBalanceLoading, walletUninitialized }) => { - const { classes } = useStyles({ - isSelected: !!currency && !walletUninitialized - }) + const { classes } = useStyles({ isSelected: !!currency && !walletUninitialized }) const inputRef = useRef(null) @@ -109,7 +110,12 @@ export const DepositAmountInput: React.FC = ({ wrap='nowrap'> {currency !== null ? ( <> - currency icon + + currency icon + {currencyIsUnknown && ( + + )} + {currency} ) : ( diff --git a/src/components/Inputs/DepositAmountInput/style.ts b/src/components/Inputs/DepositAmountInput/style.ts index 8378e98..6b4615a 100644 --- a/src/components/Inputs/DepositAmountInput/style.ts +++ b/src/components/Inputs/DepositAmountInput/style.ts @@ -95,12 +95,26 @@ export const useStyles = makeStyles<{ isSelected: boolean }>()((theme: Theme, { color: colors.invariant.Error, backgroundColor: `${colors.invariant.Error}40` }, - currencyIcon: { + imageContainer: { width: 20, height: 20, marginRight: 8, - borderRadius: '100%', - background: colors.white.main + position: 'relative', + display: 'flex', + justifyContent: 'center', + alignItems: 'center' + }, + currencyIcon: { + width: 20, + height: 20, + borderRadius: '100%' + }, + warningIcon: { + position: 'absolute', + width: 12, + height: 12, + bottom: -6, + right: -6 }, currencySymbol: { ...typography.body3, diff --git a/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx b/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx index 2352ab4..647d214 100644 --- a/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx +++ b/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx @@ -2,7 +2,7 @@ import Select from '@components/Inputs/Select/Select' import { OutlinedButton } from '@components/OutlinedButton/OutlinedButton' import { Grid, Input, Tooltip, Typography } from '@mui/material' import loadingAnimation from '@static/gif/loading.gif' -import { formatNumber } from '@utils/utils' +import { formatNumber, trimDecimalZeros } from '@utils/utils' import { SwapToken } from '@store/selectors/wallet' import classNames from 'classnames' import React, { CSSProperties, useRef } from 'react' @@ -141,6 +141,11 @@ export const AmountInput: React.FC = ({ inputProps={{ inputMode: 'decimal' }} + onBlur={() => { + if (value) { + setValue(trimDecimalZeros(value)) + } + }} /> )} diff --git a/src/components/Inputs/Select/Select.tsx b/src/components/Inputs/Select/Select.tsx index 123933c..5a017bb 100644 --- a/src/components/Inputs/Select/Select.tsx +++ b/src/components/Inputs/Select/Select.tsx @@ -3,7 +3,7 @@ import icons from '@static/icons' import classNames from 'classnames' import useStyles from './style' import { blurContent, unblurContent } from '@utils/uiUtils' -import { Button } from '@mui/material' +import { Box, Button } from '@mui/material' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import SelectTokenModal from '@components/Modals/SelectModals/SelectTokenModal/SelectTokenModal' import { SwapToken } from '@store/selectors/wallet' @@ -71,13 +71,16 @@ export const Select: React.FC = ({ onClick={handleClick} startIcon={ !current ? null : ( - {current.name + + {current.name + {current.isUnknown && } + ) } endIcon={} diff --git a/src/components/Inputs/Select/style.ts b/src/components/Inputs/Select/style.ts index cccf025..ccf7c9e 100644 --- a/src/components/Inputs/Select/style.ts +++ b/src/components/Inputs/Select/style.ts @@ -36,12 +36,25 @@ export const useStyles = makeStyles()((theme: Theme) => { top: 1, color: colors.white.main }, + imageContainer: { + minWidth: 20, + maxWidth: 20, + height: 20, + marginRight: 5, + position: 'relative' + }, icon: { marginRight: 5, minWidth: 20, height: 20, - borderRadius: '100%', - background: colors.white.main + borderRadius: '100%' + }, + warningIcon: { + position: 'absolute', + width: 12, + height: 12, + bottom: -6, + right: -6 } } }) diff --git a/src/components/Modals/SelectChain/SelectChain.tsx b/src/components/Modals/SelectChain/SelectChain.tsx index ef68453..1bb87a7 100644 --- a/src/components/Modals/SelectChain/SelectChain.tsx +++ b/src/components/Modals/SelectChain/SelectChain.tsx @@ -47,7 +47,7 @@ export const SelectChain: React.FC = ({ chain.name === activeChain.name ? classes.active : null )} item - key={`chain-${chain.name}`} + key={`chain-${activeChain}`} onClick={() => { onSelect(chain) }}> diff --git a/src/components/Modals/SelectMainnetRPC/SelectMainnetRPC.tsx b/src/components/Modals/SelectMainnetRPC/SelectMainnetRPC.tsx index 7d6901d..ed490d7 100644 --- a/src/components/Modals/SelectMainnetRPC/SelectMainnetRPC.tsx +++ b/src/components/Modals/SelectMainnetRPC/SelectMainnetRPC.tsx @@ -46,13 +46,8 @@ export const SelectMainnetRPC: React.FC = ({ useEffect(() => { if (!open && !customApplied) { setAddress('') - } else { - setCustomApplied(false) - setButtonApplied(false) - setActiveCustom(false) - setAddress('') } - }, [activeRPC]) + }, [open]) useEffect(() => { if (!networks.some(net => net.rpc === activeRPC)) { @@ -60,8 +55,13 @@ export const SelectMainnetRPC: React.FC = ({ setButtonApplied(true) setActiveCustom(true) setAddress(activeRPC) + } else { + setCustomApplied(false) + setButtonApplied(false) + setActiveCustom(false) + setAddress('') } - }, []) + }, [activeRPC]) return ( @@ -291,12 +290,17 @@ export const SelectTokenModal: React.FC = ({ setValue('') handleClose() }}> - {token.name + + {token.name + {token.isUnknown && ( + + )} + = ({ { diff --git a/src/components/Modals/SelectModals/style.ts b/src/components/Modals/SelectModals/style.ts index a7a8b76..3b234bd 100644 --- a/src/components/Modals/SelectModals/style.ts +++ b/src/components/Modals/SelectModals/style.ts @@ -130,8 +130,7 @@ const useStyles = makeStyles()((theme: Theme) => { width: 24, height: 24, borderRadius: '50%', - marginRight: 8, - background: colors.white.main + marginRight: 8 }, tokenList: { background: colors.invariant.component, @@ -215,15 +214,27 @@ const useStyles = makeStyles()((theme: Theme) => { color: colors.invariant.text } }, - + imageContainer: { + minWidth: 30, + maxWidth: 30, + height: 30, + marginRight: 16, + position: 'relative' + }, tokenIcon: { minWidth: 30, maxWidth: 30, height: 30, marginRight: 16, borderRadius: '50%', - boxShadow: '0px 0px 10px rgba(216, 255, 181, 0.5)', - background: colors.white.main + boxShadow: '0px 0px 10px rgba(216, 255, 181, 0.5)' + }, + warningIcon: { + position: 'absolute', + width: 12, + height: 12, + bottom: -6, + right: -6 }, tokenBalance: { ...typography.body2, diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx index ba05034..07023a8 100644 --- a/src/components/NewPosition/DepositSelector/DepositSelector.tsx +++ b/src/components/NewPosition/DepositSelector/DepositSelector.tsx @@ -9,7 +9,8 @@ import { getScaleFromString, parsePathFeeToFeeString, printBigint, - tickerToAddress + tickerToAddress, + trimDecimalZeros } from '@utils/utils' import classNames from 'classnames' import React, { useCallback, useEffect, useState } from 'react' @@ -125,8 +126,6 @@ export const DepositSelector: React.FC = ({ } }, [priceALoading, priceBLoading, priceA, priceB]) - useEffect(() => {}, [priceA, priceB]) - const [hideUnknownTokens, setHideUnknownTokens] = useState(initialHideUnknownTokensValue) const [isLoaded, setIsLoaded] = useState(false) @@ -348,13 +347,16 @@ export const DepositSelector: React.FC = ({ tokenPrice={priceA} currency={tokenA !== null ? tokens[tokenA].symbol : null} currencyIconSrc={tokenA !== null ? tokens[tokenA].logoURI : undefined} + currencyIsUnknown={tokenA !== null ? tokens[tokenA].isUnknown ?? false : false} placeholder='0.0' onMaxClick={() => { if (tokenA === null) { return } - tokenAInputState.setValue(printBigint(tokens[tokenA].balance, tokens[tokenA].decimals)) + tokenAInputState.setValue( + trimDecimalZeros(printBigint(tokens[tokenA].balance, tokens[tokenA].decimals)) + ) }} balanceValue={ tokenA !== null ? printBigint(tokens[tokenA].balance, tokens[tokenA].decimals) : '' @@ -366,6 +368,7 @@ export const DepositSelector: React.FC = ({ if (tokenA !== null && tokenB !== null && tokenAInputState.value.length === 0) { tokenAInputState.setValue('0.0') } + tokenAInputState.setValue(trimDecimalZeros(tokenAInputState.value)) }} {...tokenAInputState} priceLoading={priceALoading} @@ -377,13 +380,16 @@ export const DepositSelector: React.FC = ({ tokenPrice={priceB} currency={tokenB !== null ? tokens[tokenB].symbol : null} currencyIconSrc={tokenB !== null ? tokens[tokenB].logoURI : undefined} + currencyIsUnknown={tokenB !== null ? tokens[tokenB].isUnknown ?? false : false} placeholder='0.0' onMaxClick={() => { if (tokenB === null) { return } - tokenBInputState.setValue(printBigint(tokens[tokenB].balance, tokens[tokenB].decimals)) + tokenBInputState.setValue( + trimDecimalZeros(printBigint(tokens[tokenB].balance, tokens[tokenB].decimals)) + ) }} balanceValue={ tokenB !== null ? printBigint(tokens[tokenB].balance, tokens[tokenB].decimals) : '' @@ -392,6 +398,7 @@ export const DepositSelector: React.FC = ({ if (tokenA !== null && tokenB !== null && tokenBInputState.value.length === 0) { tokenBInputState.setValue('0.0') } + tokenBInputState.setValue(trimDecimalZeros(tokenBInputState.value)) }} {...tokenBInputState} priceLoading={priceBLoading} diff --git a/src/components/NoConnected/NoConnected.stories.tsx b/src/components/NoConnected/NoConnected.stories.tsx index 968aba1..afd138d 100644 --- a/src/components/NoConnected/NoConnected.stories.tsx +++ b/src/components/NoConnected/NoConnected.stories.tsx @@ -13,7 +13,6 @@ type Story = StoryObj export const Primary: Story = { args: { onConnect: () => {}, - descCustomText: 'You have no positions.', - onExplorePools: () => {} + descCustomText: 'You have no positions.' } } diff --git a/src/components/NoConnected/NoConnected.tsx b/src/components/NoConnected/NoConnected.tsx index 82d2b7a..72c3554 100644 --- a/src/components/NoConnected/NoConnected.tsx +++ b/src/components/NoConnected/NoConnected.tsx @@ -2,22 +2,19 @@ import { Button, Grid, Typography } from '@mui/material' import icons from '@static/icons' import classNames from 'classnames' import { useStyles } from './style' +import { useNavigate } from 'react-router-dom' export interface INoConnected { onConnect: () => void title?: string descCustomText?: string - onExplorePools: () => void } -export const NoConnected: React.FC = ({ - onConnect, - title, - descCustomText, - onExplorePools -}) => { +export const NoConnected: React.FC = ({ onConnect, title, descCustomText }) => { const { classes } = useStyles() + const navigate = useNavigate() + return ( <> @@ -29,7 +26,12 @@ export const NoConnected: React.FC = ({ {descCustomText?.length && ( {descCustomText} )} - diff --git a/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx b/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx index 0ff6921..ab78215 100644 --- a/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx +++ b/src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx @@ -205,29 +205,13 @@ const SinglePositionInfo: React.FC = ({ title={'Liquidity'} tokenA={ xToY - ? { - ...tokenX, - value: tokenX.liqValue, - price: tokenXPriceData?.price - } - : { - ...tokenY, - value: tokenY.liqValue, - price: tokenYPriceData?.price - } + ? { ...tokenX, value: tokenX.liqValue, price: tokenXPriceData?.price } + : { ...tokenY, value: tokenY.liqValue, price: tokenYPriceData?.price } } tokenB={ xToY - ? { - ...tokenY, - value: tokenY.liqValue, - price: tokenYPriceData?.price - } - : { - ...tokenX, - value: tokenX.liqValue, - price: tokenXPriceData?.price - } + ? { ...tokenY, value: tokenY.liqValue, price: tokenYPriceData?.price } + : { ...tokenX, value: tokenX.liqValue, price: tokenXPriceData?.price } } showBalance swapHandler={swapHandler} diff --git a/src/components/PositionDetails/SinglePositionInfo/style.ts b/src/components/PositionDetails/SinglePositionInfo/style.ts index da8b344..32c4040 100644 --- a/src/components/PositionDetails/SinglePositionInfo/style.ts +++ b/src/components/PositionDetails/SinglePositionInfo/style.ts @@ -17,7 +17,11 @@ export const useStyles = makeStyles()((theme: Theme) => ({ width: 35, height: 35, borderRadius: '100%', - background: colors.white.main + background: colors.white.main, + + [theme.breakpoints.down('sm')]: { + width: 22 + } }, arrowIcon: { width: 32, diff --git a/src/components/PositionsList/PositionItem/style.tsx b/src/components/PositionsList/PositionItem/style.tsx index 356977d..67a7b4f 100644 --- a/src/components/PositionsList/PositionItem/style.tsx +++ b/src/components/PositionsList/PositionItem/style.tsx @@ -35,13 +35,10 @@ export const useStyles = makeStyles()((theme: Theme) => ({ }, tokenIcon: { width: 40, - height: 40, borderRadius: '100%', - background: colors.white.main, [theme.breakpoints.down('sm')]: { - width: 28, - height: 28 + width: 28 } }, arrows: { diff --git a/src/components/PositionsList/PositionsList.stories.tsx b/src/components/PositionsList/PositionsList.stories.tsx index 4f47834..720483f 100644 --- a/src/components/PositionsList/PositionsList.stories.tsx +++ b/src/components/PositionsList/PositionsList.stories.tsx @@ -103,8 +103,7 @@ export const Primary: Story = { onAddPositionClick: handleClick, itemsPerPage: 5, noConnectedBlockerProps: { - onConnect: () => {}, - onExplorePools: () => {} + onConnect: () => {} }, searchValue: '', searchSetValue: () => {}, diff --git a/src/components/Stats/PoolList/PoolList.tsx b/src/components/Stats/PoolList/PoolList.tsx index 9642b0e..64e5702 100644 --- a/src/components/Stats/PoolList/PoolList.tsx +++ b/src/components/Stats/PoolList/PoolList.tsx @@ -23,7 +23,9 @@ interface PoolListInterface { // fees: number // accumulatedFarmsAvg: number // accumulatedFarmsSingleTick: number - // } + // }, + isUnknownFrom: boolean + isUnknownTo: boolean }> network: Network } @@ -99,6 +101,8 @@ const PoolList: React.FC = ({ data, network }) => { addressFrom={element.addressFrom} addressTo={element.addressTo} network={network} + isUnknownFrom={element.isUnknownFrom} + isUnknownTo={element.isUnknownTo} /> ))} {pages > 1 ? ( diff --git a/src/components/Stats/PoolList/Stats.PoolList.stories.tsx b/src/components/Stats/PoolList/Stats.PoolList.stories.tsx index 6487ca8..0122134 100644 --- a/src/components/Stats/PoolList/Stats.PoolList.stories.tsx +++ b/src/components/Stats/PoolList/Stats.PoolList.stories.tsx @@ -78,7 +78,9 @@ const poolsList = Array(40) volume24: randomVolume24, tvl: randomTvl24, addressFrom: '5Dvb5E8zKU4E9c7YxfNL5VC8YQj4VAFUTCGYY9ayFLnnY3UA', - addressTo: '5Dvb5E8zKU4E9c7YxfNL5VC8YQj4VAFUTCGYY9ayFLnnY3UA' + addressTo: '5Dvb5E8zKU4E9c7YxfNL5VC8YQj4VAFUTCGYY9ayFLnnY3UA', + isUnknownFrom: true, + isUnknownTo: true } }) diff --git a/src/components/Stats/PoolListItem/PoolListItem.tsx b/src/components/Stats/PoolListItem/PoolListItem.tsx index 898653b..bf0b756 100644 --- a/src/components/Stats/PoolListItem/PoolListItem.tsx +++ b/src/components/Stats/PoolListItem/PoolListItem.tsx @@ -32,7 +32,9 @@ interface IProps { // fees: number // accumulatedFarmsAvg: number // accumulatedFarmsSingleTick: number - // } + // }, + isUnknownFrom?: boolean + isUnknownTo?: boolean } const PoolListItem: React.FC = ({ @@ -50,13 +52,15 @@ const PoolListItem: React.FC = ({ hideBottomLine = false, addressFrom, addressTo, - network + network, // apy = 0, // apyData = { // fees: 0, // accumulatedFarmsAvg: 0, // accumulatedFarmsSingleTick: 0 // } + isUnknownFrom, + isUnknownTo }) => { const { classes } = useStyles() @@ -82,6 +86,7 @@ const PoolListItem: React.FC = ({ )}/${addressToTicker(network ?? Network.Testnet, addressTo ?? '')}` ) } + return ( {displayType === 'token' ? ( @@ -93,8 +98,14 @@ const PoolListItem: React.FC = ({ {!isSm && ( - Token from - Token to + + Token from + {isUnknownFrom && } + + + Token to + {isUnknownTo && } + )} diff --git a/src/components/Stats/PoolListItem/style.ts b/src/components/Stats/PoolListItem/style.ts index 0ee5241..e8063d0 100644 --- a/src/components/Stats/PoolListItem/style.ts +++ b/src/components/Stats/PoolListItem/style.ts @@ -34,17 +34,11 @@ export const useStyles = makeStyles()(() => ({ imageContainer: { display: 'flex', - alignItems: 'center', - '& img': { - minWidth: 28, - maxWidth: 28, - height: 28, - marginRight: 3, - borderRadius: '50%' - } + alignItems: 'center' }, iconsWrapper: { + display: 'flex', height: 28 }, @@ -140,8 +134,25 @@ export const useStyles = makeStyles()(() => ({ } } }, - + iconContainer: { + minWidth: 28, + maxWidth: 28, + height: 28, + marginRight: 3, + position: 'relative' + }, tokenIcon: { - background: colors.white.main + minWidth: 28, + maxWidth: 28, + height: 28, + marginRight: 3, + borderRadius: '50%' + }, + warningIcon: { + position: 'absolute', + width: 12, + height: 12, + bottom: -6, + right: -6 } })) diff --git a/src/components/Stats/TokenListItem/TokenListItem.tsx b/src/components/Stats/TokenListItem/TokenListItem.tsx index a620a62..0b634b3 100644 --- a/src/components/Stats/TokenListItem/TokenListItem.tsx +++ b/src/components/Stats/TokenListItem/TokenListItem.tsx @@ -3,9 +3,10 @@ import { colors, theme } from '@static/theme' import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp' import { useStyles } from './style' -import { Grid, Typography, useMediaQuery } from '@mui/material' +import { Box, Grid, Typography, useMediaQuery } from '@mui/material' import { formatNumber } from '@utils/utils' import { SortTypeTokenList } from '@store/consts/static' +import icons from '@static/icons' interface IProps { displayType: string @@ -20,6 +21,7 @@ interface IProps { sortType?: SortTypeTokenList onSort?: (type: SortTypeTokenList) => void hideBottomLine?: boolean + isUnknown?: boolean } const TokenListItem: React.FC = ({ @@ -34,7 +36,8 @@ const TokenListItem: React.FC = ({ TVL = 0, sortType, onSort, - hideBottomLine = false + hideBottomLine = false, + isUnknown }) => { const { classes } = useStyles() // const isNegative = priceChange < 0 @@ -51,7 +54,12 @@ const TokenListItem: React.FC = ({ style={hideBottomLine ? { border: 'none' } : undefined}> {!hideName && !isSm && {itemNumber}} - {!isSm && Token icon} + {!isSm && ( + + Token icon + {isUnknown && } + + )} {hideName ? symbol : name} {!hideName && {` (${symbol})`}} diff --git a/src/components/Stats/TokenListItem/style.ts b/src/components/Stats/TokenListItem/style.ts index 00a76b1..e1ebbab 100644 --- a/src/components/Stats/TokenListItem/style.ts +++ b/src/components/Stats/TokenListItem/style.ts @@ -56,14 +56,6 @@ export const useStyles = makeStyles()((theme: Theme) => ({ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' - }, - - '& img': { - minWidth: 28, - maxWidth: 28, - height: 28, - marginRight: 8, - borderRadius: '50%' } }, @@ -76,8 +68,27 @@ export const useStyles = makeStyles()((theme: Theme) => ({ marginLeft: -4 } }, - + imageContainer: { + minWidth: 28, + maxWidth: 28, + height: 28, + marginRight: 8, + position: 'relative', + display: 'flex', + alignItems: 'center' + }, tokenIcon: { - background: colors.white.main + minWidth: 28, + maxWidth: 28, + height: 28, + marginRight: 8, + borderRadius: '50%' + }, + warningIcon: { + position: 'absolute', + width: 12, + height: 12, + bottom: -6, + right: -6 } })) diff --git a/src/components/Stats/TokensList/Stats.TokenList.stories.tsx b/src/components/Stats/TokensList/Stats.TokenList.stories.tsx index 419ad26..11e08ad 100644 --- a/src/components/Stats/TokensList/Stats.TokenList.stories.tsx +++ b/src/components/Stats/TokensList/Stats.TokenList.stories.tsx @@ -101,7 +101,8 @@ export const Primary: Story = { price: tokenData.price, priceChange: tokenData.priceChange, volume: tokenData.volume24, - TVL: tokenData.tvl + TVL: tokenData.tvl, + isUnknown: true })) } } diff --git a/src/components/Stats/TokensList/TokensList.tsx b/src/components/Stats/TokensList/TokensList.tsx index 0d1112c..590c9d4 100644 --- a/src/components/Stats/TokensList/TokensList.tsx +++ b/src/components/Stats/TokensList/TokensList.tsx @@ -13,6 +13,7 @@ export interface ITokensListData { price: number volume: number TVL: number + isUnknown: boolean } export interface ITokensList { @@ -99,6 +100,7 @@ const TokensList: React.FC = ({ data }) => { volume={token.volume} TVL={token.TVL} hideBottomLine={pages === 1 && index + 1 === data.length} + isUnknown={token.isUnknown} /> ) })} diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx index a6489f1..30227b2 100644 --- a/src/components/Swap/Swap.tsx +++ b/src/components/Swap/Swap.tsx @@ -19,6 +19,7 @@ import { convertBalanceToBigint, printBigint, stringToFixed, + trimDecimalZeros, trimLeadingZeros } from '@utils/utils' import { PoolWithPoolKey } from '@store/reducers/pools' @@ -528,7 +529,11 @@ export const Swap: React.FC = ({ onMaxClick={() => { if (tokenFrom !== null) { setInputRef(inputTarget.FROM) - setAmountFrom(printBigint(tokens[tokenFrom].balance, tokens[tokenFrom].decimals)) + setAmountFrom( + trimDecimalZeros( + printBigint(tokens[tokenFrom].balance, tokens[tokenFrom].decimals) + ) + ) } }} tokens={tokens} @@ -617,7 +622,11 @@ export const Swap: React.FC = ({ onMaxClick={() => { if (tokenFrom !== null) { setInputRef(inputTarget.FROM) - setAmountFrom(printBigint(tokens[tokenFrom].balance, tokens[tokenFrom].decimals)) + setAmountFrom( + trimDecimalZeros( + printBigint(tokens[tokenFrom].balance, tokens[tokenFrom].decimals) + ) + ) } }} tokens={tokens} @@ -645,6 +654,28 @@ export const Swap: React.FC = ({ hiddenUnknownTokens={hideUnknownTokens} /> + + {tokens[tokenFrom ?? '']?.isUnknown && ( + + + {tokens[tokenFrom ?? ''].symbol} is not verified + + + )} + {tokens[tokenTo ?? '']?.isUnknown && ( + + + {tokens[tokenTo ?? ''].symbol} is not verified + + + )} +