diff --git a/package.json b/package.json index babb60e1e..25ea73dd5 100644 --- a/package.json +++ b/package.json @@ -330,7 +330,6 @@ "ses": "^0.12.4", "single-call-balance-checker-abi": "^1.0.0", "swappable-obj-proxy": "^1.1.0", - "textarea-caret": "^3.0.1", "unicode-confusables": "^0.1.1", "uuid": "^8.3.2", "valid-url": "^1.0.9", diff --git a/ui/components/ui/mascot/mascot.component.js b/ui/components/ui/mascot/mascot.component.js index ee6e03096..a339352ec 100644 --- a/ui/components/ui/mascot/mascot.component.js +++ b/ui/components/ui/mascot/mascot.component.js @@ -72,7 +72,7 @@ export default class Mascot extends Component { lookAt(target) { this.unfollowMouse(); - this.logo.lookAt(target); + this.logo.lookAtAndRender(target); this.refollowMouse(); } diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js index 996ba04f8..e7bc6ade0 100644 --- a/ui/pages/unlock-page/unlock-page.component.js +++ b/ui/pages/unlock-page/unlock-page.component.js @@ -1,7 +1,6 @@ import { EventEmitter } from 'events'; import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import getCaretCoordinates from 'textarea-caret'; import Button from '../../components/ui/button'; import TextField from '../../components/ui/text-field'; import Mascot from '../../components/ui/mascot'; @@ -13,6 +12,7 @@ import { } from '../../../shared/constants/metametrics'; import { SUPPORT_LINK } from '../../../shared/lib/ui-utils'; import { isBeta } from '../../helpers/utils/build-types'; +import { getCaretCoordinates } from './unlock-page.util'; export default class UnlockPage extends Component { static contextTypes = { @@ -34,7 +34,7 @@ export default class UnlockPage extends Component { */ onRestore: PropTypes.func, /** - * onSumbit handler when form is submitted + * onSubmit handler when form is submitted */ onSubmit: PropTypes.func, /** @@ -124,7 +124,6 @@ export default class UnlockPage extends Component { handleInputChange({ target }) { this.setState({ password: target.value, error: null }); - // tell mascot to look at page action if (target.getBoundingClientRect) { const element = target; diff --git a/ui/pages/unlock-page/unlock-page.test.js b/ui/pages/unlock-page/unlock-page.test.js index 79fc1f119..04e0c7a12 100644 --- a/ui/pages/unlock-page/unlock-page.test.js +++ b/ui/pages/unlock-page/unlock-page.test.js @@ -19,6 +19,7 @@ jest.mock('@metamask/logo', () => () => { setFollowMouse: jest.fn(), stopAnimation: jest.fn(), lookAt: jest.fn(), + lookAtAndRender: jest.fn(), }; }); diff --git a/ui/pages/unlock-page/unlock-page.util.js b/ui/pages/unlock-page/unlock-page.util.js new file mode 100644 index 000000000..2babfeafb --- /dev/null +++ b/ui/pages/unlock-page/unlock-page.util.js @@ -0,0 +1,17 @@ +export function getCaretCoordinates(element, position) { + const div = document.createElement('div'); + div.id = 'password-mirror-div'; + document.body.appendChild(div); + const computed = window.getComputedStyle(element); + div.textContent = new Array(position + 1).join('•'); + const span = document.createElement('span'); + span.textContent = '•'; + div.appendChild(span); + + const coordinates = { + top: span.offsetTop + parseInt(computed.borderTopWidth, 10), + left: span.offsetLeft + parseInt(computed.borderLeftWidth, 10), + }; + document.body.removeChild(div); + return coordinates; +} diff --git a/yarn.lock b/yarn.lock index 5a7103b8a..4bc799567 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23058,7 +23058,6 @@ __metadata: stylelint: ^13.6.1 swappable-obj-proxy: ^1.1.0 terser: ^5.7.0 - textarea-caret: ^3.0.1 through2: ^4.0.2 ts-node: ^10.5.0 ttest: ^2.1.1 @@ -31385,13 +31384,6 @@ __metadata: languageName: node linkType: hard -"textarea-caret@npm:^3.0.1": - version: 3.0.2 - resolution: "textarea-caret@npm:3.0.2" - checksum: 804d391177969ecbbdbb303cbe6cabfb7d04b1a5fbb6b33860539ac775cd702687947815bd0f6422db8887a59b21333b5a1b9b1d8c50e3ab37187c3b3163e4ea - languageName: node - linkType: hard - "thread-stream@npm:^0.15.1": version: 0.15.2 resolution: "thread-stream@npm:0.15.2"