diff --git a/apps/finance/app/src/components/AmountInput.js b/apps/finance/app/src/components/AmountInput.js new file mode 100644 index 0000000000..050adb1089 --- /dev/null +++ b/apps/finance/app/src/components/AmountInput.js @@ -0,0 +1,50 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { ButtonBase, TextInput, noop, GU, RADIUS } from '@aragon/ui' + +const MAX_BUTTON_WIDTH = 6 * GU + +const AmountInput = React.forwardRef(function AmountInput( + { showMax, onMaxClick, ...props }, + ref +) { + return ( + + Max + + ) + } + adornmentPosition="end" + adornmentSettings={{ width: MAX_BUTTON_WIDTH, padding: 1 }} + {...props} + /> + ) +}) + +AmountInput.propTypes = { + showMax: PropTypes.bool, + onMaxClick: PropTypes.func, +} + +AmountInput.defaultProps = { + onMaxClick: noop, +} + +export default AmountInput diff --git a/apps/finance/app/src/components/NewTransfer/Deposit.js b/apps/finance/app/src/components/NewTransfer/Deposit.js index 9428551f8f..e321afcb97 100644 --- a/apps/finance/app/src/components/NewTransfer/Deposit.js +++ b/apps/finance/app/src/components/NewTransfer/Deposit.js @@ -26,6 +26,7 @@ import { getTokenSymbol, } from '../../lib/token-utils' import { addressesEqual, isAddress } from '../../lib/web3-utils' +import AmountInput from '../AmountInput' import ToggleContent from '../ToggleContent' import TokenSelector from './TokenSelector' @@ -248,11 +249,17 @@ class Deposit extends React.Component { }) return true } - + setMaxUserBalance = () => { + const { selectedToken, amount } = this.state + const { userBalance, decimals } = selectedToken.data + const adjustedAmount = fromDecimals(userBalance, decimals) + this.setState({ + amount: { ...amount, value: adjustedAmount }, + }) + } render() { const { appAddress, network, title, tokens } = this.props const { amount, reference, selectedToken } = this.state - let errorMessage if (selectedToken.error === TOKEN_NOT_FOUND_ERROR) { errorMessage = 'Token not found' @@ -268,6 +275,7 @@ class Deposit extends React.Component { addressesEqual(selectedToken.value, ETHER_TOKEN_FAKE_ADDRESS) const tokenSelected = selectedToken.value && !ethSelected const isMainnet = network.type === 'main' + const isMaxButtonVisible = selectedToken && selectedToken.data.symbol return (
@@ -279,12 +287,11 @@ class Deposit extends React.Component { /> - diff --git a/apps/finance/app/src/components/NewTransfer/Withdrawal.js b/apps/finance/app/src/components/NewTransfer/Withdrawal.js index 095b5cf6d0..af8d0c93d0 100644 --- a/apps/finance/app/src/components/NewTransfer/Withdrawal.js +++ b/apps/finance/app/src/components/NewTransfer/Withdrawal.js @@ -12,8 +12,9 @@ import { useTheme, } from '@aragon/ui' import LocalIdentitiesAutoComplete from '../LocalIdentitiesAutoComplete/LocalIdentitiesAutoComplete' -import { toDecimals } from '../../lib/math-utils' +import { toDecimals, fromDecimals } from '../../lib/math-utils' import { addressPattern, isAddress } from '../../lib/web3-utils' +import AmountInput from '../AmountInput' const NO_ERROR = Symbol('NO_ERROR') const RECEIPIENT_NOT_ADDRESS_ERROR = Symbol('RECEIPIENT_NOT_ADDRESS_ERROR') @@ -112,6 +113,15 @@ class Withdrawal extends React.Component { onWithdraw(token.address, recipientAddress, adjustedAmount, reference) } + setMaxUserBalance = () => { + const { selectedToken, amount } = this.state + const token = this.nonZeroTokens()[selectedToken] + const adjustedAmount = fromDecimals(token.amount.toString(), token.decimals) + this.setState({ + amount: { ...amount, value: adjustedAmount }, + }) + } + render() { const { title } = this.props const { amount, recipient, reference, selectedToken } = this.state @@ -135,6 +145,8 @@ class Withdrawal extends React.Component { selectedToken === NULL_SELECTED_TOKEN ) + const isVisibleMaxButton = Boolean(selectedToken !== NULL_SELECTED_TOKEN) + return tokens.length ? (

{title}

@@ -156,15 +168,15 @@ class Withdrawal extends React.Component {
- + div:first-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } ` const ValidationError = ({ message }) => { diff --git a/apps/token-manager/app/src/components/AmountInput.js b/apps/token-manager/app/src/components/AmountInput.js new file mode 100644 index 0000000000..050adb1089 --- /dev/null +++ b/apps/token-manager/app/src/components/AmountInput.js @@ -0,0 +1,50 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { ButtonBase, TextInput, noop, GU, RADIUS } from '@aragon/ui' + +const MAX_BUTTON_WIDTH = 6 * GU + +const AmountInput = React.forwardRef(function AmountInput( + { showMax, onMaxClick, ...props }, + ref +) { + return ( + + Max + + ) + } + adornmentPosition="end" + adornmentSettings={{ width: MAX_BUTTON_WIDTH, padding: 1 }} + {...props} + /> + ) +}) + +AmountInput.propTypes = { + showMax: PropTypes.bool, + onMaxClick: PropTypes.func, +} + +AmountInput.defaultProps = { + onMaxClick: noop, +} + +export default AmountInput diff --git a/apps/token-manager/app/src/components/UpdateTokenPanel/UpdateTokenPanel.js b/apps/token-manager/app/src/components/UpdateTokenPanel/UpdateTokenPanel.js index 3d8a94bb3f..b791cda2e3 100644 --- a/apps/token-manager/app/src/components/UpdateTokenPanel/UpdateTokenPanel.js +++ b/apps/token-manager/app/src/components/UpdateTokenPanel/UpdateTokenPanel.js @@ -7,7 +7,6 @@ import { GU, Info, SidePanel, - TextInput, useSidePanelFocusOnReady, } from '@aragon/ui' import { isAddress } from '../../web3-utils' @@ -18,6 +17,7 @@ import { splitDecimalNumber, } from '../../utils' import LocalIdentitiesAutoComplete from '../LocalIdentitiesAutoComplete/LocalIdentitiesAutoComplete' +import AmountInput from '../AmountInput' // Any more and the number input field starts to put numbers in scientific notation const MAX_INPUT_DECIMAL_BASE = 6 @@ -334,15 +334,16 @@ function TokenPanelContent({ : 'Number of tokens to remove' } > - updateAmount(amountField.max)} step={tokenStep} + value={amountField.value} required + showMax wide />