MetaMask mascot support for provided directions targets and toggling followMouse (#9166)

* MetaMask mascot support for provided directions targets and toggling followMouse

* Fixes for mascot.component.js

* Update metamask-logo version to 2.4.0

* Lint fix

* Fix mouse follow updating

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

* Improve mascot story name

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

* Update package.json

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

* Lint fix

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

package.json

@@ -127,7 +127,7 @@
     "lodash": "^4.17.19",
     "loglevel": "^1.4.1",
     "luxon": "^1.24.1",
-    "metamask-logo": "^2.1.4",
+    "metamask-logo": "^2.4.1",
     "multihashes": "^0.4.12",
     "nanoid": "^2.1.6",
     "nonce-tracker": "^1.0.0",

ui/app/components/ui/mascot/mascot.component.js

@@ -3,20 +3,43 @@ import React, { createRef, Component } from 'react'
 import metamaskLogo from 'metamask-logo'
 import { debounce } from 'lodash'
 
+const directionTargetGenerator = ({ top, left, height, width }) => {
+  const horizontalMiddle = left + (width / 2)
+  const verticalMiddle = top + (height / 2)
+  return {
+    up: { x: horizontalMiddle, y: top - height },
+    down: { x: horizontalMiddle, y: top + (height * 2) },
+    left: { x: left - width, y: verticalMiddle },
+    right: { x: left + (width * 2), y: verticalMiddle },
+    middle: { x: horizontalMiddle, y: verticalMiddle },
+  }
+}
+
 export default class Mascot extends Component {
   static propTypes = {
     animationEventEmitter: PropTypes.object.isRequired,
     width: PropTypes.string,
     height: PropTypes.string,
+    followMouse: PropTypes.bool,
+    lookAtTarget: PropTypes.object,
+    lookAtDirection: PropTypes.oneOf(['up', 'down', 'left', 'right', 'middle']),
+  }
+
+  static defaultProps = {
+    width: '200',
+    height: '200',
+    followMouse: true,
+    lookAtTarget: {},
+    lookAtDirection: '',
   }
 
   constructor (props) {
     super(props)
 
-    const { width = '200', height = '200' } = props
+    const { width, height, followMouse } = props
 
     this.logo = metamaskLogo({
-      followMouse: true,
+      followMouse,
       pxNotRatio: true,
       width,
       height,
@@ -46,6 +69,30 @@ export default class Mascot extends Component {
 
   componentDidMount () {
     this.mascotContainer.current.appendChild(this.logo.container)
+    this.directionTargetMap = directionTargetGenerator(this.mascotContainer.current.getBoundingClientRect())
+
+    const { lookAtTarget, lookAtDirection } = this.props
+
+    if (lookAtTarget?.x && lookAtTarget?.y) {
+      this.logo.lookAtAndRender(lookAtTarget)
+    } else if (lookAtDirection) {
+      this.logo.lookAtAndRender(this.directionTargetMap[lookAtDirection])
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    const { lookAtTarget: prevTarget = {}, lookAtDirection: prevDirection = '', followMouse: prevFollowMouse } = prevProps
+    const { lookAtTarget = {}, followMouse, lookAtDirection } = this.props
+
+    if (lookAtDirection && prevDirection !== lookAtDirection) {
+      this.logo.lookAtAndRender(this.directionTargetMap[lookAtDirection])
+    } else if (lookAtTarget?.x !== prevTarget?.x || lookAtTarget?.y !== prevTarget?.y) {
+      this.logo.lookAtAndRender(lookAtTarget)
+    }
+    if (prevFollowMouse !== followMouse) {
+      this.unfollowMouse()
+      followMouse && this.refollowMouse()
+    }
   }
 
   componentWillUnmount () {

ui/app/components/ui/mascot/mascot.stories.js

@@ -0,0 +1,98 @@
+import EventEmitter from 'events'
+import React, { useState } from 'react'
+import Button from '../button'
+import ButtonGroup from '../button-group'
+import Mascot from './mascot.component'
+
+const animationEventEmitter = new EventEmitter()
+
+const containerStyle = {
+  height: '600px',
+  width: '357px',
+  border: '1px solid black',
+  display: 'flex',
+  flexFlow: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+}
+
+const buttonStyle = {
+  marginTop: '16px',
+}
+
+export default {
+  title: 'Mascot',
+}
+
+export function Demo () {
+  const [lookAtDirection, setLookAtDirection] = useState(null)
+  const [followMouseMode, setFollowMouseMode] = useState(false)
+  const [clickToLookMode, setClickToLookMode] = useState(false)
+  const [clickedTarget, setClickedTarget] = useState(null)
+
+  const createDirectionOnClick = (direction) => () => {
+    setFollowMouseMode(false)
+    setClickToLookMode(false)
+    setLookAtDirection(direction)
+  }
+
+  return (
+    <div
+      style={containerStyle}
+      onClick={(event) => {
+        const isButtonClick = event.target.classList.contains('button-group__button')
+        if (clickToLookMode && !isButtonClick) {
+          setLookAtDirection(null)
+          setClickedTarget({ x: event.clientX, y: event.clientY })
+        }
+      }}
+    >
+      <Mascot
+        animationEventEmitter={animationEventEmitter}
+        width="120"
+        height="120"
+        followMouse={followMouseMode}
+        lookAtTarget={clickedTarget}
+        lookAtDirection={lookAtDirection}
+      />
+      <div style={buttonStyle}>
+        <ButtonGroup
+          style={{ width: '300px', flexFlow: 'column' }}
+          defaultActiveButtonIndex={4}
+        >
+          <Button onClick={createDirectionOnClick('up')}>
+            Up
+          </Button>
+          <Button onClick={createDirectionOnClick('down')}>
+            Down
+          </Button>
+          <Button onClick={createDirectionOnClick('left')}>
+            Left
+          </Button>
+          <Button onClick={createDirectionOnClick('right')}>
+            Right
+          </Button>
+          <Button onClick={createDirectionOnClick('middle')}>
+            Middle
+          </Button>
+          <Button
+            onClick={() => {
+              setFollowMouseMode(true)
+              setClickToLookMode(false)
+            }}
+          >
+            Follow Mouse mode
+          </Button>
+          <Button
+            onClick={() => {
+              setFollowMouseMode(false)
+              setClickToLookMode(true)
+            }}
+          >
+            Look a clicked location mode
+          </Button>
+        </ButtonGroup>
+      </div>
+    </div>
+  )
+}

yarn.lock

@@ -18044,10 +18044,10 @@ mersenne-twister@^1.0.1, mersenne-twister@^1.1.0:
   resolved "https://registry.yarnpkg.com/mersenne-twister/-/mersenne-twister-1.1.0.tgz#f916618ee43d7179efcf641bec4531eb9670978a"
   integrity sha1-+RZhjuQ9cXnvz2Qb7EUx65Zwl4o=
 
-metamask-logo@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/metamask-logo/-/metamask-logo-2.1.4.tgz#0612b2b0ffc7eeb6be480c310785426ad9599e3c"
-  integrity sha512-hg/FzMfijpzGgLdZWH+KJKS56cRYaMEwcOq8UcnL/MznpgK4OMlJEaIfO8lg7P2F4Z74Ki+ulrTrFW6jf9L2bw==
+metamask-logo@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/metamask-logo/-/metamask-logo-2.4.1.tgz#7b51456358e2d8b4576a1487640b7da304ddae87"
+  integrity sha512-JPMCLs/p3RTL/pLpbofV69kPn/AKJrpIdtFBZd9d+3p3f/HydT9tply2SWBr+8RjnsUaNmUoaBBZilvlPzcTDg==
   dependencies:
     gl-mat4 "1.1.4"
     gl-vec3 "1.0.3"