m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 04:20:53 +01:00
Code

Adding usage instructions for Ledger Live users to confirmation screen (#12020)

Browse Source 
* Adding usage instructions for Ledger Live users to confirmation screen

* Using design system components

* Hiding first step on Firefox
This commit is contained in:
ryanml 2021-09-07 14:46:15 -07:00 committed by GitHub
parent dc85f375f8
commit 17fe978c82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/_locales/en/messages.json
View File

@ -1179,6 +1179,18 @@
"ledgerLiveApp": {
"message": "Ledger Live App"
},
"ledgerLiveDialogHeader": {
"message": "Prior to clicking confirm:"
},
"ledgerLiveDialogStepOne": {
"message": "Enable Use Ledger Live under Settings > Advanced"
},
"ledgerLiveDialogStepThree": {
"message": "Plug in your Ledger device and select the Ethereum app"
},
"ledgerLiveDialogStepTwo": {
"message": "Open and unlock Ledger Live App"
},
"ledgerLocked": {
"message": "Cannot connect to Ledger device. Please make sure your device is unlocked and Ethereum app is opened."
},

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

@ -35,10 +35,12 @@ import TransactionDetailItem from '../../components/app/transaction-detail-item/
import InfoTooltip from '../../components/ui/info-tooltip/info-tooltip';
import LoadingHeartBeat from '../../components/ui/loading-heartbeat';
import GasTiming from '../../components/app/gas-timing/gas-timing.component';
import Dialog from '../../components/ui/dialog';
import {
COLORS,
FONT_STYLE,
FONT_WEIGHT,
TYPOGRAPHY,
} from '../../helpers/constants/design-system';
import {
@ -124,6 +126,8 @@ export default class ConfirmTransactionBase extends Component {
baseFeePerGas: PropTypes.string,
isMainnet: PropTypes.bool,
gasFeeIsCustom: PropTypes.bool,
isLedgerAccount: PropTypes.bool.isRequired,
isFirefox: PropTypes.bool.isRequired,
};
state = {
@ -303,6 +307,8 @@ export default class ConfirmTransactionBase extends Component {
maxFeePerGas,
maxPriorityFeePerGas,
isMainnet,
isLedgerAccount,
isFirefox,
} = this.props;
const { t } = this.context;
@ -396,6 +402,51 @@ export default class ConfirmTransactionBase extends Component {
</div>
) : null;
const ledgerInstructionField = isLedgerAccount ? (
<div>
<div className="confirm-detail-row">
<Dialog type="message">
<div className="ledger-live-dialog">
<Typography
boxProps={{ margin: 0 }}
color={COLORS.PRIMARY3}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H7}
>
{t('ledgerLiveDialogHeader')}
</Typography>
{!isFirefox && (
<Typography
boxProps={{ margin: 0 }}
color={COLORS.PRIMARY3}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H7}
>
{`- ${t('ledgerLiveDialogStepOne')}`}
</Typography>
)}
<Typography
boxProps={{ margin: 0 }}
color={COLORS.PRIMARY3}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H7}
>
{`- ${t('ledgerLiveDialogStepTwo')}`}
</Typography>
<Typography
boxProps={{ margin: 0 }}
color={COLORS.PRIMARY3}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H7}
>
{`- ${t('ledgerLiveDialogStepThree')}`}
</Typography>
</div>
</Dialog>
</div>
</div>
) : null;
return (
<div className="confirm-page-container-content__details">
<TransactionDetail
@ -523,6 +574,7 @@ export default class ConfirmTransactionBase extends Component {
]}
/>
{nonceField}
{ledgerInstructionField}
</div>
);
}

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

@ -29,12 +29,16 @@ import {
getShouldShowFiat,
checkNetworkAndAccountSupports1559,
getPreferences,
getAccountType,
} from '../../selectors';
import { getMostRecentOverviewPage } from '../../ducks/history/history';
import {
transactionMatchesNetwork,
txParamsAreDappSuggested,
} from '../../../shared/modules/transaction.utils';
import { KEYRING_TYPES } from '../../../shared/constants/hardware-wallets';
import { getPlatform } from '../../../app/scripts/lib/util';
import { PLATFORM_FIREFOX } from '../../../shared/constants/app';
import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils';
import {
updateTransactionGasFees,
@ -161,6 +165,8 @@ const mapStateToProps = (state, ownProps) => {
const gasFeeIsCustom =
fullTxData.userFeeLevel === 'custom' ||
txParamsAreDappSuggested(fullTxData);
const isLedgerAccount = getAccountType(state) === KEYRING_TYPES.LEDGER;
const isFirefox = getPlatform() === PLATFORM_FIREFOX;
return {
balance,
@ -208,6 +214,8 @@ const mapStateToProps = (state, ownProps) => {
maxPriorityFeePerGas: gasEstimationObject.maxPriorityFeePerGas,
baseFeePerGas: gasEstimationObject.baseFeePerGas,
gasFeeIsCustom,
isLedgerAccount,
isFirefox,
};
};