1 files changed, 12 insertions, 6 deletions
diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js
index ddd51f8ba..f2b00262b 100644
--- a/ui/app/components/mascot.js
+++ b/ui/app/components/mascot.js
@@ -14,8 +14,9 @@ function Mascot () {
     pxNotRatio: true,
     width: 200,
     height: 200,
+    staticImage: './images/icon-512.png',
   })
-  if (!this.logo) return
+  if (!this.logo.webGLSupport) return
   this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
   this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
 }
@@ -34,19 +35,24 @@ Mascot.prototype.render = function () {
 }
 
 Mascot.prototype.componentDidMount = function () {
-  if (!this.logo) return
   var targetDivId = 'metamask-mascot-container'
   var container = document.getElementById(targetDivId)
-  container.appendChild(this.logo.canvas)
+  if (!this.logo.webGLSupport) {
+    var staticLogo = this.logo.staticLogo
+    staticLogo.style.marginBottom = '40px'
+    container.appendChild(staticLogo)
+  } else {
+    container.appendChild(this.logo.canvas)
+  }
 }
 
 Mascot.prototype.componentWillUnmount = function () {
-  if (!this.logo) return
+  if (!this.logo.webGLSupport) return
   this.logo.canvas.remove()
 }
 
 Mascot.prototype.handleAnimationEvents = function () {
-  if (!this.logo) return
+  if (!this.logo.webGLSupport) return
   // only setup listeners once
   if (this.animations) return
   this.animations = this.props.animationEventEmitter
@@ -55,7 +61,7 @@ Mascot.prototype.handleAnimationEvents = function () {
 }
 
 Mascot.prototype.lookAt = function (target) {
-  if (!this.logo) return
+  if (!this.logo.webGLSupport) return
   this.unfollowMouse()
   this.logo.lookAt(target)
   this.refollowMouse()