From 452f725e029345ef82332e6d9fe0124679e07399 Mon Sep 17 00:00:00 2001 From: zielvna Date: Thu, 19 Sep 2024 12:09:01 +0200 Subject: [PATCH 01/10] replace connect modal for connect button on new position page --- .../DepositSelector.stories.tsx | 6 ++- .../DepositSelector/DepositSelector.tsx | 49 +++++++++++++------ .../NewPosition/DepositSelector/style.ts | 9 ++++ .../NewPosition/NewPosition.stories.tsx | 17 +++---- src/components/NewPosition/NewPosition.tsx | 18 ++++--- .../PositionsList/PositionsList.tsx | 5 +- .../NewPositionWrapper/NewPositionWrapper.tsx | 18 +++---- 7 files changed, 76 insertions(+), 46 deletions(-) diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.stories.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.stories.tsx index 164bee50..d2cf010b 100644 --- a/src/components/NewPosition/DepositSelector/DepositSelector.stories.tsx +++ b/src/components/NewPosition/DepositSelector/DepositSelector.stories.tsx @@ -7,6 +7,7 @@ import { Provider } from 'react-redux' import { store } from '@store/index' import { MemoryRouter } from 'react-router-dom' import { Network } from '@invariant-labs/a0-sdk' +import { Status } from '@store/reducers/wallet' const tokens: Record = { So11111111111111111111111111111111111111112: { @@ -116,7 +117,10 @@ export const Primary: Story = { isGetLiquidityError: false, ticksLoading: false, network: Network.Testnet, - azeroBalance: 20000000000000 as any + azeroBalance: 20000000000000 as any, + walletStatus: Status.Initialized, + onConnectWallet: () => {}, + onDisconnectWallet: () => {} }, render: args => } diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx index 30d4075d..483f1000 100644 --- a/src/components/NewPosition/DepositSelector/DepositSelector.tsx +++ b/src/components/NewPosition/DepositSelector/DepositSelector.tsx @@ -19,6 +19,8 @@ import { PositionOpeningMethod } from '@store/consts/types' import { SwapToken } from '@store/selectors/wallet' import { TooltipHover } from '@components/TooltipHover/TooltipHover' import { Network } from '@invariant-labs/a0-sdk' +import { Status } from '@store/reducers/wallet' +import ChangeWalletButton from '@components/Header/HeaderButton/ChangeWalletButton' export interface InputState { value: string setValue: (value: string) => void @@ -64,6 +66,9 @@ export interface IDepositSelector { ticksLoading: boolean network: Network azeroBalance: bigint + walletStatus: Status + onConnectWallet: () => void + onDisconnectWallet: () => void } export const DepositSelector: React.FC = ({ @@ -98,7 +103,10 @@ export const DepositSelector: React.FC = ({ isGetLiquidityError, ticksLoading, network, - azeroBalance + azeroBalance, + walletStatus, + onConnectWallet, + onDisconnectWallet }) => { const { classes } = useStyles() @@ -387,21 +395,30 @@ export const DepositSelector: React.FC = ({ isBalanceLoading={isBalanceLoading} /> - - { - if (progress === 'none') { - onAddLiquidity() - } - }} - disabled={getButtonMessage() !== 'Add Position'} - content={getButtonMessage()} - progress={progress} - /> + {walletStatus !== Status.Initialized && getButtonMessage() !== 'Loading' ? ( + + ) : ( + { + if (progress === 'none') { + onAddLiquidity() + } + }} + disabled={getButtonMessage() !== 'Add Position'} + content={getButtonMessage()} + progress={progress} + /> + )} ) } diff --git a/src/components/NewPosition/DepositSelector/style.ts b/src/components/NewPosition/DepositSelector/style.ts index fcfc8237..3226aa89 100644 --- a/src/components/NewPosition/DepositSelector/style.ts +++ b/src/components/NewPosition/DepositSelector/style.ts @@ -81,6 +81,15 @@ export const useStyles = makeStyles()(theme => { filter: 'none' } } + }, + connectWalletButton: { + height: '48px !important', + borderRadius: '16px !important', + width: '100%', + + [theme.breakpoints.down('sm')]: { + width: '100% !important' + } } } }) diff --git a/src/components/NewPosition/NewPosition.stories.tsx b/src/components/NewPosition/NewPosition.stories.tsx index 8227702e..92731687 100644 --- a/src/components/NewPosition/NewPosition.stories.tsx +++ b/src/components/NewPosition/NewPosition.stories.tsx @@ -3,6 +3,7 @@ import { fn } from '@storybook/test' import { MemoryRouter } from 'react-router-dom' import NewPosition from './NewPosition' import { Network } from '@invariant-labs/a0-sdk' +import { Status } from '@store/reducers/wallet' const meta = { title: 'PageComponent/NewPosition', @@ -64,10 +65,6 @@ export const Primary: Story = { calcAmount: fn(), loadingTicksAndTickMaps: false, poolKey: '', - noConnectedBlockerProps: { - onConnect: fn(), - descCustomText: 'Cannot add any liquidity.' - }, onRefresh: fn(), isBalanceLoading: false, shouldNotUpdatePriceRange: false, @@ -77,7 +74,10 @@ export const Primary: Story = { setOnlyUserPositions: fn(), network: Network.Testnet, isLoadingTokens: false, - azeroBalance: 20000000000000 as any + azeroBalance: 20000000000000 as any, + walletStatus: Status.Initialized, + onConnectWallet: () => {}, + onDisconnectWallet: () => {} }, render: () => { return ( @@ -125,10 +125,6 @@ export const Primary: Story = { calcAmount={() => 1n} loadingTicksAndTickMaps={false} poolKey='' - noConnectedBlockerProps={{ - onConnect: fn(), - descCustomText: 'Cannot add any liquidity.' - }} onRefresh={fn()} isBalanceLoading={false} shouldNotUpdatePriceRange={false} @@ -139,6 +135,9 @@ export const Primary: Story = { network={Network.Testnet} isLoadingTokens={false} azeroBalance={20000000000000n} + walletStatus={Status.Initialized} + onConnectWallet={() => {}} + onDisconnectWallet={() => {}} /> ) } diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx index 308a373b..5ec1f0b4 100644 --- a/src/components/NewPosition/NewPosition.tsx +++ b/src/components/NewPosition/NewPosition.tsx @@ -1,6 +1,5 @@ import { ProgressState } from '@components/AnimatedButton/AnimatedButton' import Slippage from '@components/Modals/Slippage/Slippage' -import { INoConnected, NoConnected } from '@components/NoConnected/NoConnected' import Refresher from '@components/Refresher/Refresher' import { getMaxTick, getMinTick, Network } from '@invariant-labs/a0-sdk' import { PERCENTAGE_DENOMINATOR } from '@invariant-labs/a0-sdk/target/consts' @@ -34,6 +33,7 @@ import useStyles from './style' import { BestTier, PositionOpeningMethod, TokenPriceData } from '@store/consts/types' import { getConcentrationArray } from '@invariant-labs/a0-sdk/target/utils' import { TooltipHover } from '@components/TooltipHover/TooltipHover' +import { Status } from '@store/reducers/wallet' export interface INewPosition { initialTokenFrom: string @@ -68,8 +68,6 @@ export interface INewPosition { }> ticksLoading: boolean loadingTicksAndTickMaps: boolean - showNoConnected?: boolean - noConnectedBlockerProps: INoConnected progress: ProgressState isXtoY: boolean xDecimal: bigint @@ -106,6 +104,9 @@ export interface INewPosition { network: Network isLoadingTokens: boolean azeroBalance: bigint + walletStatus: Status + onConnectWallet: () => void + onDisconnectWallet: () => void } export const NewPosition: React.FC = ({ @@ -124,8 +125,6 @@ export const NewPosition: React.FC = ({ calcAmount, feeTiers, ticksLoading, - showNoConnected, - noConnectedBlockerProps, isXtoY, xDecimal, yDecimal, @@ -160,7 +159,10 @@ export const NewPosition: React.FC = ({ setOnlyUserPositions, network, isLoadingTokens, - azeroBalance + azeroBalance, + walletStatus, + onConnectWallet, + onDisconnectWallet }) => { const { classes } = useStyles() const navigate = useNavigate() @@ -553,7 +555,6 @@ export const NewPosition: React.FC = ({ /> - {showNoConnected && } = ({ ticksLoading={ticksLoading} network={network} azeroBalance={azeroBalance} + walletStatus={walletStatus} + onConnectWallet={onConnectWallet} + onDisconnectWallet={onDisconnectWallet} /> diff --git a/src/components/PositionsList/PositionsList.tsx b/src/components/PositionsList/PositionsList.tsx index b9e2575c..32bcee51 100644 --- a/src/components/PositionsList/PositionsList.tsx +++ b/src/components/PositionsList/PositionsList.tsx @@ -139,10 +139,7 @@ export const PositionsList: React.FC = ({ - diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx index e82f7e71..46c803be 100644 --- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx +++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx @@ -30,7 +30,7 @@ import { import { actions as poolsActions } from '@store/reducers/pools' import { actions, InitMidPrice, actions as positionsActions } from '@store/reducers/positions' import { actions as snackbarsActions } from '@store/reducers/snackbars' -import { Status, actions as walletActions } from '@store/reducers/wallet' +import { actions as walletActions } from '@store/reducers/wallet' import { networkType } from '@store/selectors/connection' import { isLoadingLatestPoolsForTransaction, @@ -656,14 +656,6 @@ export const NewPositionWrapper: React.FC = ({ }) ) }} - showNoConnected={walletStatus !== Status.Initialized} - noConnectedBlockerProps={{ - onConnect: async () => { - await openWalletSelectorModal() - dispatch(walletActions.connect(false)) - }, - descCustomText: 'Cannot add any liquidity.' - }} poolKey={poolKey} onRefresh={onRefresh} isBalanceLoading={isBalanceLoading} @@ -675,6 +667,14 @@ export const NewPositionWrapper: React.FC = ({ network={network} isLoadingTokens={isCurrentlyLoadingTokens} azeroBalance={azeroBalance} + walletStatus={walletStatus} + onConnectWallet={async () => { + await openWalletSelectorModal() + dispatch(walletActions.connect(false)) + }} + onDisconnectWallet={() => { + dispatch(walletActions.disconnect()) + }} /> ) } From 3ddb49ef0e27355e0bac31c4937ea2d0006709ed Mon Sep 17 00:00:00 2001 From: zielvna Date: Thu, 19 Sep 2024 12:50:24 +0200 Subject: [PATCH 02/10] fix connect wallet button positioning --- src/components/NewPosition/DepositSelector/style.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/NewPosition/DepositSelector/style.ts b/src/components/NewPosition/DepositSelector/style.ts index 3226aa89..098aa807 100644 --- a/src/components/NewPosition/DepositSelector/style.ts +++ b/src/components/NewPosition/DepositSelector/style.ts @@ -59,6 +59,7 @@ export const useStyles = makeStyles()(theme => { } }, addButton: { + height: '48px', width: '100%', margin: '30px 0', cursor: 'default' @@ -84,11 +85,12 @@ export const useStyles = makeStyles()(theme => { }, connectWalletButton: { height: '48px !important', - borderRadius: '16px !important', + borderRadius: '16px', width: '100%', + margin: '30px 0', [theme.breakpoints.down('sm')]: { - width: '100% !important' + width: '100%' } } } From 487cede379da029600b42cf7b0d819cc5d681744 Mon Sep 17 00:00:00 2001 From: zielvna Date: Sat, 21 Sep 2024 15:35:19 +0200 Subject: [PATCH 03/10] fix two buttons shown at the same time --- .../NewPosition/DepositSelector/DepositSelector.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx index af66159f..dba58475 100644 --- a/src/components/NewPosition/DepositSelector/DepositSelector.tsx +++ b/src/components/NewPosition/DepositSelector/DepositSelector.tsx @@ -395,7 +395,7 @@ export const DepositSelector: React.FC = ({ isBalanceLoading={isBalanceLoading} /> - {walletStatus !== Status.Initialized && getButtonMessage() !== 'Loading' ? ( + {walletStatus !== Status.Initialized ? ( = ({ onDisconnect={onDisconnectWallet} className={classes.connectWalletButton} /> - ) : null} - {getButtonMessage() === 'Insufficient AZERO' ? ( + ) : getButtonMessage() === 'Insufficient AZERO' ? ( From 028c423cc3277c0463b992fd11c435c4b8a743ee Mon Sep 17 00:00:00 2001 From: zielvna Date: Sat, 21 Sep 2024 18:53:34 +0200 Subject: [PATCH 04/10] change input when wallet is not connected on new position page --- .../DepositAmountInput/DepositAmountInput.tsx | 16 ++++++++++++---- .../DepositSelector/DepositSelector.tsx | 2 ++ 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx index e79a9c6e..3b87c2d8 100644 --- a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx +++ b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx @@ -22,6 +22,7 @@ interface IProps { disabled?: boolean priceLoading?: boolean isBalanceLoading: boolean + maxDisabled: boolean } export const DepositAmountInput: React.FC = ({ @@ -40,7 +41,8 @@ export const DepositAmountInput: React.FC = ({ balanceValue, disabled = false, priceLoading = false, - isBalanceLoading + isBalanceLoading, + maxDisabled }) => { const { classes } = useStyles({ isSelected: !!currency }) @@ -145,7 +147,11 @@ export const DepositAmountInput: React.FC = ({ {isBalanceLoading ? ( loading ) : balanceValue ? ( - formatNumber(balanceValue || 0) + !maxDisabled ? ( + formatNumber(balanceValue || 0) + ) : ( + '-' + ) ) : ( - )}{' '} @@ -153,14 +159,16 @@ export const DepositAmountInput: React.FC = ({ - {currency ? ( + {currency && !maxDisabled ? ( priceLoading ? ( loading ) : tokenPrice ? ( diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx index dba58475..0a36561d 100644 --- a/src/components/NewPosition/DepositSelector/DepositSelector.tsx +++ b/src/components/NewPosition/DepositSelector/DepositSelector.tsx @@ -368,6 +368,7 @@ export const DepositSelector: React.FC = ({ {...tokenAInputState} priceLoading={priceALoading} isBalanceLoading={isBalanceLoading} + maxDisabled={walletStatus !== Status.Initialized} /> = ({ {...tokenBInputState} priceLoading={priceBLoading} isBalanceLoading={isBalanceLoading} + maxDisabled={walletStatus !== Status.Initialized} /> {walletStatus !== Status.Initialized ? ( From 1c8b25f189a592d7f9d75d64937b4a6fdf279e9c Mon Sep 17 00:00:00 2001 From: zielvna Date: Sat, 21 Sep 2024 22:46:42 +0200 Subject: [PATCH 05/10] fix build --- .../DepositAmountInput/DepositAmountInput.stories.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx index e99b182e..174e0646 100644 --- a/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx +++ b/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx @@ -28,7 +28,8 @@ export const Null: Story = { onBlur: fn(), style: {}, disabled: false, - isBalanceLoading: false + isBalanceLoading: false, + maxDisabled: true } } @@ -49,6 +50,7 @@ export const BTC: Story = { onBlur: fn(), style: {}, disabled: false, - isBalanceLoading: false + isBalanceLoading: false, + maxDisabled: false } } From ed285611854de19d00613dc688e082b1347a860e Mon Sep 17 00:00:00 2001 From: zielvna Date: Mon, 23 Sep 2024 10:30:56 +0200 Subject: [PATCH 06/10] remove token balance loader when wallet is not connected --- .../DepositAmountInput/DepositAmountInput.tsx | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx index 3b87c2d8..140c0deb 100644 --- a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx +++ b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx @@ -44,7 +44,7 @@ export const DepositAmountInput: React.FC = ({ isBalanceLoading, maxDisabled }) => { - const { classes } = useStyles({ isSelected: !!currency }) + const { classes } = useStyles({ isSelected: !!currency && !maxDisabled }) const inputRef = useRef(null) @@ -141,19 +141,15 @@ export const DepositAmountInput: React.FC = ({ container alignItems='center' wrap='nowrap' - onClick={onMaxClick}> + onClick={maxDisabled ? () => {} : onMaxClick}> Balance:{' '} - {isBalanceLoading ? ( + {maxDisabled ? ( + <>- + ) : isBalanceLoading ? ( loading - ) : balanceValue ? ( - !maxDisabled ? ( - formatNumber(balanceValue || 0) - ) : ( - '-' - ) ) : ( - - + <>{formatNumber(balanceValue || 0)} )}{' '} {currency} @@ -162,8 +158,7 @@ export const DepositAmountInput: React.FC = ({ currency && !maxDisabled ? classes.maxButton : `${classes.maxButton} ${classes.maxButtonNotActive}` - } - onClick={onMaxClick}> + }> Max From 93a7d4d286215453e36cb7582bb8dd76a0893bd1 Mon Sep 17 00:00:00 2001 From: zielvna Date: Mon, 23 Sep 2024 14:16:29 +0200 Subject: [PATCH 07/10] rename max disabled prop to wallet uninitialized --- .../DepositAmountInput/DepositAmountInput.tsx | 14 +++++++------- .../DepositSelector/DepositSelector.tsx | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx index 140c0deb..7316f98d 100644 --- a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx +++ b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx @@ -22,7 +22,7 @@ interface IProps { disabled?: boolean priceLoading?: boolean isBalanceLoading: boolean - maxDisabled: boolean + walletUninitialized: boolean } export const DepositAmountInput: React.FC = ({ @@ -42,9 +42,9 @@ export const DepositAmountInput: React.FC = ({ disabled = false, priceLoading = false, isBalanceLoading, - maxDisabled + walletUninitialized }) => { - const { classes } = useStyles({ isSelected: !!currency && !maxDisabled }) + const { classes } = useStyles({ isSelected: !!currency && !walletUninitialized }) const inputRef = useRef(null) @@ -141,10 +141,10 @@ export const DepositAmountInput: React.FC = ({ container alignItems='center' wrap='nowrap' - onClick={maxDisabled ? () => {} : onMaxClick}> + onClick={walletUninitialized ? () => {} : onMaxClick}> Balance:{' '} - {maxDisabled ? ( + {walletUninitialized ? ( <>- ) : isBalanceLoading ? ( loading @@ -155,7 +155,7 @@ export const DepositAmountInput: React.FC = ({ - {currency && !maxDisabled ? ( + {currency && !walletUninitialized ? ( priceLoading ? ( loading ) : tokenPrice ? ( diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx index 0a36561d..0618b8e6 100644 --- a/src/components/NewPosition/DepositSelector/DepositSelector.tsx +++ b/src/components/NewPosition/DepositSelector/DepositSelector.tsx @@ -368,7 +368,7 @@ export const DepositSelector: React.FC = ({ {...tokenAInputState} priceLoading={priceALoading} isBalanceLoading={isBalanceLoading} - maxDisabled={walletStatus !== Status.Initialized} + walletUninitialized={walletStatus !== Status.Initialized} /> = ({ {...tokenBInputState} priceLoading={priceBLoading} isBalanceLoading={isBalanceLoading} - maxDisabled={walletStatus !== Status.Initialized} + walletUninitialized={walletStatus !== Status.Initialized} /> {walletStatus !== Status.Initialized ? ( From bef46b1000dc352781460bbd554b4e2a3493e628 Mon Sep 17 00:00:00 2001 From: zielvna Date: Mon, 23 Sep 2024 14:18:19 +0200 Subject: [PATCH 08/10] fix build --- .../Inputs/DepositAmountInput/DepositAmountInput.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx index 174e0646..5a78d7b6 100644 --- a/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx +++ b/src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx @@ -29,7 +29,7 @@ export const Null: Story = { style: {}, disabled: false, isBalanceLoading: false, - maxDisabled: true + walletUninitialized: true } } @@ -51,6 +51,6 @@ export const BTC: Story = { style: {}, disabled: false, isBalanceLoading: false, - maxDisabled: false + walletUninitialized: false } } From 605edc4b061024f95df9e7bb9315e845497c0674 Mon Sep 17 00:00:00 2001 From: zielvna Date: Tue, 24 Sep 2024 10:20:47 +0200 Subject: [PATCH 09/10] add checks for wallet address in fetch balances saga --- src/store/sagas/wallet.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/store/sagas/wallet.ts b/src/store/sagas/wallet.ts index d8c63723..eb0c6599 100644 --- a/src/store/sagas/wallet.ts +++ b/src/store/sagas/wallet.ts @@ -262,6 +262,10 @@ export function* fetchBalances(tokens: string[]): Generator { const walletAddress = yield* select(address) const psp22 = yield* getPSP22() + if (!walletAddress) { + return + } + yield* put(walletActions.setIsBalanceLoading(true)) const { balance, tokenBalances } = yield* all({ From ef2a6c7eb913fc6d432a216f3d82d29ba02af57f Mon Sep 17 00:00:00 2001 From: zielvna Date: Tue, 24 Sep 2024 10:37:15 +0200 Subject: [PATCH 10/10] align balance styles in swap and new position pages --- .../Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx | 6 ++---- src/components/Inputs/ExchangeAmountInput/style.ts | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx b/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx index 2cfd5bc8..2352ab46 100644 --- a/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx +++ b/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx @@ -1,6 +1,6 @@ import Select from '@components/Inputs/Select/Select' import { OutlinedButton } from '@components/OutlinedButton/OutlinedButton' -import { Box, Grid, Input, Tooltip, Typography } from '@mui/material' +import { Grid, Input, Tooltip, Typography } from '@mui/material' import loadingAnimation from '@static/gif/loading.gif' import { formatNumber } from '@utils/utils' import { SwapToken } from '@store/selectors/wallet' @@ -162,9 +162,7 @@ export const AmountInput: React.FC = ({ {isBalanceLoading ? ( loading ) : hideBalance ? ( - - - - + <>- ) : ( formatNumber(balance || 0) )}{' '} diff --git a/src/components/Inputs/ExchangeAmountInput/style.ts b/src/components/Inputs/ExchangeAmountInput/style.ts index e2a3a3f7..ebfbaaa0 100644 --- a/src/components/Inputs/ExchangeAmountInput/style.ts +++ b/src/components/Inputs/ExchangeAmountInput/style.ts @@ -78,7 +78,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({ BalanceTypography: { color: colors.invariant.lightGrey, ...typography.caption2, - marginRight: 3, + marginRight: 6, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis',