@@ -173,7 +176,12 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) {
diff --git a/src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx b/src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx
index 5bb23ecf..4796b313 100644
--- a/src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx
@@ -9,6 +9,7 @@ interface Props {
max: BigNumber
asset: Asset
amount: BigNumber
+ disabled: boolean
maxButtonLabel: string
assetUSDValue: BigNumber
amountValueText?: string
@@ -24,6 +25,7 @@ export default function AssetAmountInput(props: Props) {
label,
amount,
asset,
+ disabled,
setAmount,
assetUSDValue,
maxButtonLabel,
@@ -52,6 +54,7 @@ export default function AssetAmountInput(props: Props) {
className={className.input}
maxDecimals={asset.decimals}
max={max}
+ disabled={disabled}
onChange={setAmount}
onFocus={onFocus}
onBlur={onBlur}
diff --git a/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx b/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
index e986ab45..ea8f8062 100644
--- a/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
@@ -10,15 +10,22 @@ import { formatAmountWithSymbol } from 'utils/formatters'
interface Props {
buyAsset: Asset
sellAsset: Asset
- containerClassName?: string
buyButtonDisabled: boolean
+ containerClassName?: string
+ showProgressIndicator: boolean
buyAction: () => void
}
export default function TradeSummary(props: Props) {
- const { containerClassName, buyAsset, sellAsset, buyAction, buyButtonDisabled } = props
+ const {
+ buyAsset,
+ sellAsset,
+ buyAction,
+ buyButtonDisabled,
+ containerClassName,
+ showProgressIndicator,
+ } = props
const { data: routes, isLoading: isRouteLoading } = useSwapRoute(sellAsset.denom, buyAsset.denom)
- const [isButtonBusy, setButtonBusy] = useState(false)
const parsedRoutes = useMemo(() => {
if (!routes.length) return '-'
@@ -29,12 +36,6 @@ export default function TradeSummary(props: Props) {
return routeSymbols.join(' -> ')
}, [routes, sellAsset.symbol])
- const handleBuyClick = useCallback(async () => {
- setButtonBusy(true)
- await buyAction()
- setButtonBusy(false)
- }, [buyAction])
-
const buttonText = useMemo(
() => (routes.length ? `Buy ${buyAsset.symbol}` : 'No route found'),
[buyAsset.symbol, routes],
@@ -55,9 +56,9 @@ export default function TradeSummary(props: Props) {
(null)
const [maxBuyableAmountEstimation, setMaxBuyableAmountEstimation] = useState(BN_ZERO)
const [selectedOrderType, setSelectedOrderType] = useState('Market')
+ const [isTransactionExecuting, setTransactionExecuting] = useState(false)
const accountSellAssetDeposit = useMemo(
() => account?.deposits.find(byDenom(sellAsset.denom))?.amount || BN_ZERO,
@@ -98,6 +99,7 @@ export default function SwapForm(props: Props) {
const handleBuyClick = useCallback(async () => {
if (account?.id) {
+ setTransactionExecuting(true)
const isSucceeded = await swap({
fee: hardcodedFee,
accountId: account.id,
@@ -109,6 +111,7 @@ export default function SwapForm(props: Props) {
setSellAssetAmount(BN_ZERO)
setBuyAssetAmount(BN_ZERO)
}
+ setTransactionExecuting(false)
}
}, [account?.id, buyAsset.denom, sellAsset.denom, sellAssetAmount, slippage, swap])
@@ -140,14 +143,16 @@ export default function SwapForm(props: Props) {
containerClassName='mx-3 my-6'
onBlur={dismissInputFocus}
onFocus={() => setFocusedInput('buy')}
+ disabled={isTransactionExecuting}
/>
setFocusedInput('sell')}
+ disabled={isTransactionExecuting}
/>
>
)