m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

add space between sentences in insufficient currency warning (#14019)

Browse Source 
* add space between sentences in insufficient currency warning and add link to buy modal for all buyable networks
This commit is contained in:
Alex Donesky 2022-03-25 09:02:08 -05:00 committed by GitHub
parent 6688117c7e
commit 3e2506b2e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 112 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/_locales/en/messages.json generated
View File

@ -405,6 +405,10 @@
"buy": {
"message": "Buy"
},
"buyAsset": {
"message": "Buy $1",
"description": "$1 is the ticker symbol of a an asset the user is being prompted to purchase"
},
"buyCryptoWithMoonPay": {
"message": "Buy $1 with MoonPay",
"description": "$1 represents the cypto symbol to be purchased"
@ -420,13 +424,6 @@
"message": "Transak supports credit & debit cards, Apple Pay, MobiKwik, and bank transfers (depending on location) in 100+ countries. $1 deposits directly into your MetaMask account.",
"description": "$1 represents the crypto symbol to be purchased"
},
"buyEth": {
"message": "Buy ETH"
},
"buyOther": {
"message": "Buy $1 or deposit from another account.",
"description": "$1 is a token symbol"
},
"buyWithWyre": {
"message": "Buy ETH with Wyre"
},
@ -1525,9 +1522,13 @@
"insufficientBalance": {
"message": "Insufficient balance."
},
"insufficientCurrency": {
"message": "You do not have enough $1 in your account to pay for transaction fees on $2 network.",
"description": "$1 is currency, $2 is network"
"insufficientCurrencyBuyOrDeposit": {
"message": "You do not have enough $1 in your account to pay for transaction fees on $2 network. $3 or deposit from another account.",
"description": "$1 is the native currency of the network, $2 is the name of the current network, $3 is the key 'buy' + the ticker symbol of the native currency of the chain wrapped in a button"
},
"insufficientCurrencyDeposit": {
"message": "You do not have enough $1 in your account to pay for transaction fees on $2 network. Deposit $1 from another account.",
"description": "$1 is the native currency of the network, $2 is the name of the current network"
},
"insufficientFunds": {
"message": "Insufficient funds."
@ -2279,9 +2280,6 @@
"or": {
"message": "or"
},
"orDeposit": {
"message": "or deposit from another account."
},
"origin": {
"message": "Origin"
},

61
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
View File

@ -10,7 +10,6 @@ import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/erro
import Typography from '../../../ui/typography';
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
import { TRANSACTION_TYPES } from '../../../../../shared/constants/transaction';
import { MAINNET_CHAIN_ID } from '../../../../../shared/constants/network';
import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';
@ -57,6 +56,7 @@ export default class ConfirmPageContainerContent extends Component {
showBuyModal: PropTypes.func,
toAddress: PropTypes.string,
transactionType: PropTypes.string,
isBuyableChain: PropTypes.bool,
};
renderContent() {
@ -132,6 +132,7 @@ export default class ConfirmPageContainerContent extends Component {
showBuyModal,
toAddress,
transactionType,
isBuyableChain,
} = this.props;
const primaryAction = hideUserAcknowledgedGasMissing
@ -196,42 +197,38 @@ export default class ConfirmPageContainerContent extends Component {
)}
{showInsuffienctFundsError && (
<div className="confirm-page-container-content__error-container">
{currentTransaction.chainId === MAINNET_CHAIN_ID ? (
<ActionableMessage
className="actionable-message--warning"
message={
<ActionableMessage
className="actionable-message--warning"
message={
isBuyableChain ? (
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrency', [nativeCurrency, networkName])}
<Button
key="link"
type="secondary"
className="confirm-page-container-content__link"
onClick={showBuyModal}
>
{t('buyEth')}
</Button>
{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
{t('orDeposit')}
<Button
type="inline"
className="confirm-page-container-content__link"
onClick={showBuyModal}
key={`${nativeCurrency}-buy-button`}
>
{t('buyAsset', [nativeCurrency])}
</Button>,
])}
</Typography>
}
useIcon
iconFillColor="#d73a49"
type="danger"
/>
) : (
<ActionableMessage
className="actionable-message--warning"
message={
) : (
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrency', [nativeCurrency, networkName])}
{t('buyOther', [nativeCurrency])}
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])}
</Typography>
}
useIcon
iconFillColor="#d73a49"
type="danger"
/>
)}
)
}
useIcon
iconFillColor="var(--color-error-default)"
type="danger"
/>
</div>
)}

8
ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
View File

@ -100,12 +100,4 @@
&__total-value {
position: relative;
}
&__link {
background: transparent;
border: 0 transparent;
display: inline;
padding: 0;
font-size: $font-size-h7;
}
}

69
ui/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -4,10 +4,7 @@ import PropTypes from 'prop-types';
import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
import { GasFeeContextProvider } from '../../../contexts/gasFee';
import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
import {
NETWORK_TO_NAME_MAP,
MAINNET_CHAIN_ID,
} from '../../../../shared/constants/network';
import { NETWORK_TO_NAME_MAP } from '../../../../shared/constants/network';
import { PageContainerFooter } from '../../ui/page-container';
import Dialog from '../../ui/dialog';
@ -98,6 +95,7 @@ export default class ConfirmPageContainer extends Component {
supportsEIP1559V2: PropTypes.bool,
nativeCurrency: PropTypes.string,
showBuyModal: PropTypes.func,
isBuyableChain: PropTypes.bool,
};
render() {
@ -152,6 +150,7 @@ export default class ConfirmPageContainer extends Component {
supportsEIP1559V2,
nativeCurrency,
showBuyModal,
isBuyableChain,
} = this.props;
const showAddToAddressDialog =
@ -258,47 +257,41 @@ export default class ConfirmPageContainer extends Component {
showBuyModal={showBuyModal}
toAddress={toAddress}
transactionType={currentTransaction.type}
isBuyableChain={isBuyableChain}
/>
)}
{shouldDisplayWarning && errorKey === INSUFFICIENT_FUNDS_ERROR_KEY && (
<div className="confirm-approve-content__warning">
{currentTransaction.chainId === MAINNET_CHAIN_ID ? (
<ActionableMessage
message={
<ActionableMessage
message={
isBuyableChain ? (
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrency', [nativeCurrency, networkName])}
<Button
type="link"
className="page-container__link"
onClick={showBuyModal}
>
{t('buyEth')}
</Button>
{t('orDeposit')}
{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
<Button
type="inline"
className="confirm-page-container-content__link"
onClick={showBuyModal}
key={`${nativeCurrency}-buy-button`}
>
{t('buyAsset', [nativeCurrency])}
</Button>,
])}
</Typography>
}
useIcon
iconFillColor="#d73a49"
type="danger"
/>
) : (
<ActionableMessage
message={
<Typography
variant={TYPOGRAPHY.H7}
align="left"
margin={[0, 0]}
>
{t('insufficientCurrency', [nativeCurrency, networkName])}
{t('buyOther', [nativeCurrency])}
) : (
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])}
</Typography>
}
useIcon
iconFillColor="#d73a49"
type="danger"
/>
)}
)
}
useIcon
iconFillColor="var(--color-error-default)"
type="danger"
/>
</div>
)}
{shouldDisplayWarning && errorKey !== INSUFFICIENT_FUNDS_ERROR_KEY && (

9
ui/components/app/confirm-page-container/confirm-page-container.container.js
View File

@ -1,13 +1,18 @@
import { connect } from 'react-redux';
import { getAccountsWithLabels, getAddressBookEntry } from '../../../selectors';
import {
getAccountsWithLabels,
getAddressBookEntry,
getIsBuyableChain,
} from '../../../selectors';
import { showModal } from '../../../store/actions';
import ConfirmPageContainer from './confirm-page-container.component';
function mapStateToProps(state, ownProps) {
const to = ownProps.toAddress;
const isBuyableChain = getIsBuyableChain(state);
const contact = getAddressBookEntry(state, to);
return {
isBuyableChain,
contact,
toName: contact?.name || ownProps.toName,
isOwnedAccount: getAccountsWithLabels(state)

2
ui/components/ui/button/buttons.scss
View File

@ -302,7 +302,7 @@ input[type="submit"][disabled] {
.btn--inline {
display: inline;
padding: 0 4px;
padding: 0;
font-size: inherit;
width: auto;
color: var(--color-primary-default);

4
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -146,6 +146,7 @@ export default class ConfirmTransactionBase extends Component {
isMultiLayerFeeNetwork: PropTypes.bool,
eip1559V2Enabled: PropTypes.bool,
showBuyModal: PropTypes.func,
isBuyableChain: PropTypes.bool,
};
state = {
@ -326,6 +327,7 @@ export default class ConfirmTransactionBase extends Component {
isMultiLayerFeeNetwork,
nativeCurrency,
showBuyModal,
isBuyableChain,
} = this.props;
const { t } = this.context;
const { userAcknowledgedGasMissing } = this.state;
@ -585,11 +587,11 @@ export default class ConfirmTransactionBase extends Component {
this.setUserAcknowledgedGasMissing()
}
userAcknowledgedGasMissing={userAcknowledgedGasMissing}
chainId={txData.chainId}
nativeCurrency={nativeCurrency}
networkName={networkName}
showBuyModal={showBuyModal}
type={txData.type}
isBuyableChain={isBuyableChain}
/>
<TransactionDetail
disabled={isDisabled()}

4
ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
View File

@ -33,6 +33,7 @@ import {
getTokenList,
getIsMultiLayerFeeNetwork,
getEIP1559V2Enabled,
getIsBuyableChain,
} from '../../selectors';
import { getMostRecentOverviewPage } from '../../ducks/history/history';
import {
@ -76,7 +77,7 @@ const mapStateToProps = (state, ownProps) => {
const isGasEstimatesLoading = getIsGasEstimatesLoading(state);
const gasLoadingAnimationIsShowing = getGasLoadingAnimationIsShowing(state);
const isBuyableChain = getIsBuyableChain(state);
const { confirmTransaction, metamask } = state;
const {
ensResolutionsByAddress,
@ -253,6 +254,7 @@ const mapStateToProps = (state, ownProps) => {
isMultiLayerFeeNetwork,
chainId,
eip1559V2Enabled,
isBuyableChain,
};
};

61
ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
View File

@ -12,12 +12,11 @@ import Button from '../../../components/ui/button';
import Typography from '../../../components/ui/typography';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
import { MAINNET_CHAIN_ID } from '../../../../shared/constants/network';
const TransactionAlerts = ({
userAcknowledgedGasMissing,
setUserAcknowledgedGasMissing,
chainId,
isBuyableChain,
nativeCurrency,
networkName,
showBuyModal,
@ -96,42 +95,36 @@ const TransactionAlerts = ({
type="warning"
/>
)}
{balanceError &&
chainId === MAINNET_CHAIN_ID &&
type === TRANSACTION_TYPES.DEPLOY_CONTRACT ? (
{balanceError && type === TRANSACTION_TYPES.DEPLOY_CONTRACT ? (
<ActionableMessage
className="actionable-message--warning"
message={
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrency', [nativeCurrency, networkName])}{' '}
<Button
type="link"
className="transaction-alerts__link"
onClick={showBuyModal}
>
{t('buyEth')}
</Button>{' '}
{t('orDeposit')}
</Typography>
isBuyableChain ? (
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
<Button
type="inline"
className="confirm-page-container-content__link"
onClick={showBuyModal}
key={`${nativeCurrency}-buy-button`}
>
{t('buyAsset', [nativeCurrency])}
</Button>,
])}
</Typography>
) : (
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])}
</Typography>
)
}
useIcon
iconFillColor="#d73a49"
type="danger"
/>
) : null}
{balanceError &&
chainId !== MAINNET_CHAIN_ID &&
type === TRANSACTION_TYPES.DEPLOY_CONTRACT ? (
<ActionableMessage
className="actionable-message--warning"
message={
<Typography variant={TYPOGRAPHY.H7} align="left">
{t('insufficientCurrency', [nativeCurrency, networkName])}
{t('buyOther', [nativeCurrency])}
</Typography>
}
useIcon
iconFillColor="#d73a49"
iconFillColor="var(--color-error-default)"
type="danger"
/>
) : null}
@ -177,11 +170,11 @@ const TransactionAlerts = ({
TransactionAlerts.propTypes = {
userAcknowledgedGasMissing: PropTypes.bool,
setUserAcknowledgedGasMissing: PropTypes.func,
chainId: PropTypes.string,
nativeCurrency: PropTypes.string,
networkName: PropTypes.string,
showBuyModal: PropTypes.func,
type: PropTypes.string,
isBuyableChain: PropTypes.bool,
};
export default TransactionAlerts;