Mp 3192 disable inputs on transaction initialization (#326)

* feat: inputs are disabled on swap form when executing the transaction

* feat: disabled borrow, lend, vault, deposit, withdraw form inputs when executing transaction

src/components/Modals/AssetAmountSelectActionModal.tsx

@@ -17,9 +17,9 @@ interface Props {
   asset: Asset
   title: string
   coinBalances: Coin[]
-  contentHeader?: JSX.Element
   actionButtonText: string
-  showLoaderInButton: boolean
+  contentHeader?: JSX.Element
+  showProgressIndicator: boolean
   accountSummaryChange?: AccountChange
   onClose: () => void
   onChange: (value: BigNumber) => void
@@ -31,10 +31,10 @@ export default function AssetAmountSelectActionModal(props: Props) {
     asset,
     title,
     coinBalances,
-    contentHeader = null,
     actionButtonText,
-    showLoaderInButton,
     accountSummaryChange,
+    contentHeader = null,
+    showProgressIndicator,
     onClose,
     onChange,
     onAction,
@@ -79,11 +79,12 @@ export default function AssetAmountSelectActionModal(props: Props) {
             max={maxAmount}
             hasSelect
             maxText='Max'
+            disabled={showProgressIndicator}
           />
           <Divider />
           <Button
             onClick={handleActionClick}
-            showProgressIndicator={showLoaderInButton}
+            showProgressIndicator={showProgressIndicator}
             disabled={!amount.toNumber()}
             className='w-full'
             text={actionButtonText}

src/components/Modals/BorrowModal.tsx

@@ -186,6 +186,7 @@ function BorrowModal(props: Props) {
               max={max}
               className='w-full'
               maxText='Max'
+              disabled={isConfirming}
             />
             <Divider className='my-6' />
             <div className='flex flex-1 flex-wrap'>
@@ -199,6 +200,7 @@ function BorrowModal(props: Props) {
                 name='borrow-to-wallet'
                 checked={borrowToWallet}
                 onChange={setBorrowToWallet}
+                disabled={isConfirming}
               />
             </div>
           </div>

src/components/Modals/FundWithdraw/FundAndWithdrawModalContent.tsx

@@ -104,6 +104,7 @@ export default function FundWithdrawModalContent(props: Props) {
           accountId={!props.isFunding ? props.account.id : undefined}
           hasSelect
           maxText='Max'
+          disabled={isConfirming}
         />
         <Divider />
         <Button

src/components/Modals/LendAndReclaim/index.tsx

@@ -69,7 +69,7 @@ function LendAndReclaimModal({ currentAccount, config }: Props) {
       contentHeader={<DetailsHeader data={data} />}
       coinBalances={coinBalances}
       actionButtonText={actionText}
-      showLoaderInButton={isConfirming}
+      showProgressIndicator={isConfirming}
       accountSummaryChange={accountChange}
       title={`${actionText} ${asset.symbol}`}
       onClose={close}

src/components/Modals/Vault/VaultBorrowings.tsx

@@ -158,10 +158,13 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) {
             maxText='Max Borrow'
             onChange={(amount) => updateAssets(coin.denom, amount)}
             onDelete={() => onDelete(coin.denom)}
+            disabled={isConfirming}
           />
         )
       })}
-      {props.borrowings.length === 1 && <Slider onChange={onChangeSlider} value={percentage} />}
+      {props.borrowings.length === 1 && (
+        <Slider onChange={onChangeSlider} value={percentage} disabled={isConfirming} />
+      )}
       {props.borrowings.length === 0 && (
         <div className='flex items-center gap-4 py-2'>
           <div className='w-4'>
@@ -173,7 +176,12 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) {
           </Text>
         </div>
       )}
-      <Button text='Select borrow assets +' color='tertiary' onClick={addAsset} />
+      <Button
+        text='Select borrow assets +'
+        color='tertiary'
+        onClick={addAsset}
+        disabled={isConfirming}
+      />
       <Divider />
       <div className='flex flex-col gap-2'>
         <div className='flex justify-between'>

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}

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) {
       </div>
       <ActionButton
         disabled={routes.length === 0 || buyButtonDisabled}
-        showProgressIndicator={isButtonBusy || isRouteLoading}
+        showProgressIndicator={showProgressIndicator || isRouteLoading}
         text={buttonText}
-        onClick={handleBuyClick}
+        onClick={buyAction}
         size='md'
         color='primary'
         className='w-full'

src/components/Trade/TradeModule/SwapForm/index.tsx

@@ -38,6 +38,7 @@ export default function SwapForm(props: Props) {
   const [focusedInput, setFocusedInput] = useState<'buy' | 'sell' | null>(null)
   const [maxBuyableAmountEstimation, setMaxBuyableAmountEstimation] = useState(BN_ZERO)
   const [selectedOrderType, setSelectedOrderType] = useState<AvailableOrderType>('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}
       />
 
       <RangeInput
-        max={accountSellAssetDeposit.shiftedBy(-sellAsset.decimals).toNumber()}
-        value={sellAssetAmount.shiftedBy(-sellAsset.decimals).toNumber()}
-        onChange={handleRangeInputChange}
-        onBlur={dismissInputFocus}
         wrapperClassName='p-4'
+        onBlur={dismissInputFocus}
+        disabled={isTransactionExecuting}
+        onChange={handleRangeInputChange}
+        value={sellAssetAmount.shiftedBy(-sellAsset.decimals).toNumber()}
+        max={accountSellAssetDeposit.shiftedBy(-sellAsset.decimals).toNumber()}
       />
 
       <AssetAmountInput
@@ -161,6 +166,7 @@ export default function SwapForm(props: Props) {
         containerClassName='mx-3'
         onBlur={dismissInputFocus}
         onFocus={() => setFocusedInput('sell')}
+        disabled={isTransactionExecuting}
       />
 
       <TradeSummary
@@ -169,6 +175,7 @@ export default function SwapForm(props: Props) {
         sellAsset={sellAsset}
         buyAction={handleBuyClick}
         buyButtonDisabled={sellAssetAmount.isZero()}
+        showProgressIndicator={isTransactionExecuting}
       />
     </>
   )