mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Ensure sign message button is only enabled on scroll (#13645)
* Ensure sign message button is only enabled on scroll * Add button for message scrolling to signature request screen * lint fix * Only show scroll button if message is scrollable Co-authored-by: ryanml <ryanlanese@gmail.com>
This commit is contained in:
parent
40269ad13c
commit
d1c5274738
@ -66,10 +66,9 @@ describe('Sign Typed Data V4 Signature Request', function () {
|
|||||||
);
|
);
|
||||||
assert.equal(await message.getText(), 'Hello, Bob!');
|
assert.equal(await message.getText(), 'Hello, Bob!');
|
||||||
// Approve signing typed data
|
// Approve signing typed data
|
||||||
await driver.executeScript(`
|
await driver.clickElement(
|
||||||
const lastNodeInMessage = document.querySelectorAll('.signature-request-message--node')[7];
|
'[data-testid="signature-request-scroll-button"]',
|
||||||
lastNodeInMessage.scrollIntoView();
|
);
|
||||||
`);
|
|
||||||
await driver.delay(regularDelayMs);
|
await driver.delay(regularDelayMs);
|
||||||
await driver.clickElement({ text: 'Sign', tag: 'button' });
|
await driver.clickElement({ text: 'Sign', tag: 'button' });
|
||||||
await driver.waitUntilXWindowHandles(2);
|
await driver.waitUntilXWindowHandles(2);
|
||||||
|
@ -9,10 +9,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button:first-child {
|
button:first-child {
|
||||||
margin-left: 1rem;
|
flex: 1 1 100%;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:last-child {
|
button:last-child {
|
||||||
|
flex: 1 1 100%;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__tooltip {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
max-height: 250px;
|
max-height: 250px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
@include H6;
|
@include H6;
|
||||||
@ -57,4 +58,16 @@
|
|||||||
&--node-leaf {
|
&--node-leaf {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__scroll-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: var(--Grey-500);
|
||||||
|
position: absolute;
|
||||||
|
right: 24px;
|
||||||
|
bottom: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -8,24 +8,24 @@ export default class SignatureRequestMessage extends PureComponent {
|
|||||||
data: PropTypes.object.isRequired,
|
data: PropTypes.object.isRequired,
|
||||||
onMessageScrolled: PropTypes.func,
|
onMessageScrolled: PropTypes.func,
|
||||||
setMessageRootRef: PropTypes.func,
|
setMessageRootRef: PropTypes.func,
|
||||||
|
messageRootRef: PropTypes.object,
|
||||||
|
messageIsScrollable: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
t: PropTypes.func,
|
t: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
messageAreaRef;
|
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
messageIsScrolled: false,
|
messageIsScrolled: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
setMessageIsScrolled = () => {
|
setMessageIsScrolled = () => {
|
||||||
if (!this.messageAreaRef || this.state.messageIsScrolled) {
|
if (!this.props.messageRootRef || this.state.messageIsScrolled) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { scrollTop, offsetHeight, scrollHeight } = this.messageAreaRef;
|
const { scrollTop, offsetHeight, scrollHeight } = this.props.messageRootRef;
|
||||||
const isAtBottom = scrollTop + offsetHeight >= scrollHeight;
|
const isAtBottom = scrollTop + offsetHeight >= scrollHeight;
|
||||||
|
|
||||||
if (isAtBottom) {
|
if (isAtBottom) {
|
||||||
@ -63,17 +63,36 @@ export default class SignatureRequestMessage extends PureComponent {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
renderScrollButton() {
|
||||||
const { data } = this.props;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
onScroll={this.onScroll}
|
onClick={() => {
|
||||||
ref={(ref) => {
|
this.setState({ messageIsScrolled: true });
|
||||||
this.messageAreaRef = ref;
|
this.props.onMessageScrolled();
|
||||||
|
this.props.messageRootRef.scrollTo(
|
||||||
|
0,
|
||||||
|
this.props.messageRootRef.scrollHeight,
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
className="signature-request-message"
|
className="signature-request-message__scroll-button"
|
||||||
|
data-testid="signature-request-scroll-button"
|
||||||
>
|
>
|
||||||
|
<img
|
||||||
|
src="./images/icons/down-arrow.svg"
|
||||||
|
width="28"
|
||||||
|
height="28"
|
||||||
|
alt={this.context.t('scrollDown')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { data, messageIsScrollable } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div onScroll={this.onScroll} className="signature-request-message">
|
||||||
|
{messageIsScrollable ? this.renderScrollButton() : null}
|
||||||
<div className="signature-request-message__title">
|
<div className="signature-request-message__title">
|
||||||
{this.context.t('signatureRequest1')}
|
{this.context.t('signatureRequest1')}
|
||||||
</div>
|
</div>
|
||||||
|
@ -139,6 +139,8 @@ export default class SignatureRequest extends PureComponent {
|
|||||||
data={sanitizeMessage(message, primaryType, types)}
|
data={sanitizeMessage(message, primaryType, types)}
|
||||||
onMessageScrolled={() => this.setState({ hasScrolledMessage: true })}
|
onMessageScrolled={() => this.setState({ hasScrolledMessage: true })}
|
||||||
setMessageRootRef={this.setMessageRootRef.bind(this)}
|
setMessageRootRef={this.setMessageRootRef.bind(this)}
|
||||||
|
messageRootRef={this.messageRootRef}
|
||||||
|
messageIsScrollable={messageIsScrollable}
|
||||||
/>
|
/>
|
||||||
<Footer
|
<Footer
|
||||||
cancelAction={onCancel}
|
cancelAction={onCancel}
|
||||||
|
Loading…
Reference in New Issue
Block a user