From d0b199c543ea4015cd880570f799b174665cee8f Mon Sep 17 00:00:00 2001 From: gomes <17035424+gomesalexandre@users.noreply.github.com> Date: Wed, 13 Dec 2023 22:59:54 +0400 Subject: [PATCH] feat: revert "fix: add a loading state to the asset dropdown (#5846)" This reverts commit dbbd6c447e703dddb3c4bad09ce9fef63ebdbdbc. --- .../components/AssetChainDropdown.tsx | 3 +-- .../components/AssetSelection.tsx | 11 ++--------- .../components/TradeInput/TradeInput.tsx | 6 ++---- .../Pool/components/Borrow/BorrowInput.tsx | 14 +++----------- .../Pool/components/Repay/RepayInput.tsx | 19 +++---------------- 5 files changed, 11 insertions(+), 42 deletions(-) diff --git a/src/components/MultiHopTrade/components/AssetChainDropdown.tsx b/src/components/MultiHopTrade/components/AssetChainDropdown.tsx index d1d3ae96463..a00ce9238dd 100644 --- a/src/components/MultiHopTrade/components/AssetChainDropdown.tsx +++ b/src/components/MultiHopTrade/components/AssetChainDropdown.tsx @@ -94,8 +94,7 @@ export const AssetChainDropdown: React.FC = ({ borderRadius='full' color='text.base' isDisabled - isLoading={isLoading} - variant={!isLoading ? 'ghost' : undefined} + variant='ghost' _disabled={disabled} _hover={hover} {...buttonProps} diff --git a/src/components/MultiHopTrade/components/AssetSelection.tsx b/src/components/MultiHopTrade/components/AssetSelection.tsx index e052d0f61ed..c1e7304bef5 100644 --- a/src/components/MultiHopTrade/components/AssetSelection.tsx +++ b/src/components/MultiHopTrade/components/AssetSelection.tsx @@ -31,7 +31,6 @@ const TradeAssetAwaitingAsset = () => { type TradeAssetSelectProps = { assetId?: AssetId isReadOnly?: boolean - isLoading: boolean onAssetClick?: () => void onAssetChange: (asset: Asset) => void } @@ -41,16 +40,11 @@ export const TradeAssetSelectWithAsset: React.FC = ({ onAssetChange, assetId, isReadOnly, - isLoading, }) => { const assets = useAppSelector(selectAssets) const asset = useAppSelector(state => selectAssetById(state, assetId ?? '')) - const { - data, - isLoading: isRelatedAssetsLoading, - isError, - } = useGetRelatedAssetIdsQuery(assetId ?? '') + const { data, isLoading, isError } = useGetRelatedAssetIdsQuery(assetId ?? '') const handleAssetChange = useCallback( (assetId: AssetId) => { @@ -86,7 +80,6 @@ export const TradeAssetSelectWithAsset: React.FC = ({ isDisabled={isReadOnly} _disabled={disabledStyle} rightIcon={rightIcon} - isLoading={isLoading || isRelatedAssetsLoading} > {icon} {asset?.symbol} @@ -96,7 +89,7 @@ export const TradeAssetSelectWithAsset: React.FC = ({ assetIds={data} assetId={assetId} onClick={handleAssetChange} - isLoading={isLoading || isRelatedAssetsLoading} + isLoading={isLoading} isError={isError} /> diff --git a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx index 0c54b7ddb8b..7a8c9956bd8 100644 --- a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx +++ b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx @@ -557,10 +557,9 @@ export const TradeInput = memo(() => { assetId={sellAsset.assetId} onAssetClick={handleSellAssetClick} onAssetChange={setSellAsset} - isLoading={isSupportedAssetsLoading} /> ), - [handleSellAssetClick, isSupportedAssetsLoading, sellAsset.assetId, setSellAsset], + [handleSellAssetClick, sellAsset.assetId, setSellAsset], ) const buyTradeAssetSelect = useMemo( @@ -569,10 +568,9 @@ export const TradeInput = memo(() => { assetId={buyAsset.assetId} onAssetClick={handleBuyAssetClick} onAssetChange={setBuyAsset} - isLoading={isSupportedAssetsLoading} /> ), - [buyAsset.assetId, handleBuyAssetClick, isSupportedAssetsLoading, setBuyAsset], + [buyAsset.assetId, handleBuyAssetClick, setBuyAsset], ) return ( diff --git a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx index 5c0fc45f219..8ac7cd8ee33 100644 --- a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx +++ b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx @@ -95,8 +95,7 @@ export const BorrowInput = ({ const translate = useTranslate() const history = useHistory() - const { data: borrowAssets, isLoading: isLendingSupportedAssetsLoading } = - useLendingSupportedAssets({ type: 'borrow' }) + const { data: borrowAssets } = useLendingSupportedAssets({ type: 'borrow' }) const collateralAsset = useAppSelector(state => selectAssetById(state, collateralAssetId)) @@ -347,10 +346,9 @@ export const BorrowInput = ({ onAssetClick={noop} onAssetChange={handleAssetChange} isReadOnly - isLoading={isLendingSupportedAssetsLoading} /> ) - }, [collateralAssetId, handleAssetChange, isLendingSupportedAssetsLoading]) + }, [collateralAssetId, handleAssetChange]) const borrowAssetSelectComponent = useMemo(() => { return ( @@ -358,15 +356,9 @@ export const BorrowInput = ({ assetId={borrowAsset?.assetId ?? ''} onAssetClick={handleBorrowAssetClick} onAssetChange={handleAssetChange} - isLoading={isLendingSupportedAssetsLoading} /> ) - }, [ - borrowAsset?.assetId, - handleAssetChange, - handleBorrowAssetClick, - isLendingSupportedAssetsLoading, - ]) + }, [borrowAsset?.assetId, handleAssetChange, handleBorrowAssetClick]) const quoteErrorTranslation = useMemo(() => { if (_isSmartContractAddress) return 'trade.errors.smartContractWalletNotSupported' diff --git a/src/pages/Lending/Pool/components/Repay/RepayInput.tsx b/src/pages/Lending/Pool/components/Repay/RepayInput.tsx index 36cde195c0c..a088fc2e023 100644 --- a/src/pages/Lending/Pool/components/Repay/RepayInput.tsx +++ b/src/pages/Lending/Pool/components/Repay/RepayInput.tsx @@ -126,8 +126,7 @@ export const RepayInput = ({ const swapIcon = useMemo(() => , []) - const { data: lendingSupportedAssets, isLoading: isLendingSupportedAssetsLoading } = - useLendingSupportedAssets({ type: 'borrow' }) + const { data: lendingSupportedAssets } = useLendingSupportedAssets({ type: 'borrow' }) useEffect(() => { if (!(lendingSupportedAssets && collateralAsset)) return @@ -160,15 +159,9 @@ export const RepayInput = ({ // Users have the possibility to repay in any supported asset, not only their collateral/borrowed asset // https://docs.thorchain.org/thorchain-finance/lending#loan-repayment-closeflow isReadOnly={false} - isLoading={isLendingSupportedAssetsLoading} /> ) - }, [ - handleAssetChange, - handleRepaymentAssetClick, - isLendingSupportedAssetsLoading, - repaymentAsset?.assetId, - ]) + }, [handleAssetChange, handleRepaymentAssetClick, repaymentAsset?.assetId]) const collateralAssetSelectComponent = useMemo(() => { return ( @@ -177,15 +170,9 @@ export const RepayInput = ({ onAssetClick={handleRepaymentAssetClick} onAssetChange={handleAssetChange} isReadOnly - isLoading={isLendingSupportedAssetsLoading} /> ) - }, [ - collateralAssetId, - handleAssetChange, - handleRepaymentAssetClick, - isLendingSupportedAssetsLoading, - ]) + }, [collateralAssetId, handleAssetChange, handleRepaymentAssetClick]) const handleSeenNotice = useCallback(() => setSeenNotice(true), [])