LaconicNetwork/mars-v2-frontend
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Mp 3192 disable inputs on transaction initialization (#326)

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

* feat: disabled borrow, lend, vault, deposit, withdraw form inputs when executing transaction
This commit is contained in:
Yusuf Seyrek 2023-07-31 10:57:38 +03:00 committed by GitHub
parent 1eec100907
commit 2611291028
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Modals/AssetAmountSelectActionModal.tsx
View File

@ -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}

2
src/components/Modals/BorrowModal.tsx
View File

@ -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>

1
src/components/Modals/FundWithdraw/FundAndWithdrawModalContent.tsx
View File

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

2
src/components/Modals/LendAndReclaim/index.tsx
View File

@ -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}

12
src/components/Modals/Vault/VaultBorrowings.tsx
View File

@ -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'>

3
src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx
View File

@ -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}

23
src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
View File

@ -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'

15
src/components/Trade/TradeModule/SwapForm/index.tsx
View File

@ -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}
/>
</>
)