Merge pull request #729 from gre/fix-confettis

Fix confettis to go under the ledger logo. fix flow

src/components/ConfettiParty/Confetti.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { PureComponent } from 'react'
 import Animated from 'animated/lib/targets/react-dom'
 
@@ -13,7 +14,7 @@ class Confetti extends PureComponent<
     delta: [number, number],
   },
   {
-    value: *,
+    progress: Animated.Value,
   },
 > {
   state = {

src/components/ConfettiParty/index.js

@@ -1,3 +1,5 @@
+// @flow
+
 import React, { PureComponent } from 'react'
 import { i } from 'helpers/staticPath'
 import Confetti from './Confetti'
@@ -9,22 +11,68 @@ const shapes = [
   i('confetti-shapes/4.svg'),
 ]
 
-class ConfettiParty extends PureComponent<{}> {
+let id = 1
-  state = {
+
-    confettis: Array(64)
+const nextConfetti = (mode: ?string) =>
-      .fill(null)
+  mode === 'emit'
-      .map((_, i) => ({
+    ? {
-        id: i,
+        id: id++,
         shape: shapes[Math.floor(shapes.length * Math.random())],
         initialRotation: 360 * Math.random(),
-        initialYPercent: -0.2 + 0.1 * Math.random(),
+        initialYPercent: -0.05,
+        initialXPercent:
+          0.5 + 0.5 * Math.cos(Date.now() / 1000) * (0.5 + 0.5 * Math.sin(Date.now() / 6000)),
+        initialScale: 1,
+        rotations: 4 * Math.random() - 2,
+        delta: [(Math.random() - 0.5) * 200, 600 + 200 * Math.random()],
+        duration: 10000,
+      }
+    : {
+        id: id++,
+        shape: shapes[Math.floor(shapes.length * Math.random())],
+        initialRotation: 360 * Math.random(),
+        initialYPercent: -0.15 * Math.random(),
         initialXPercent: 0.2 + 0.6 * Math.random(),
         initialScale: 1,
-        rotations: 4 + 4 * Math.random(),
+        rotations: 8 * Math.random() - 4,
         delta: [(Math.random() - 0.5) * 600, 300 + 300 * Math.random()],
         duration: 6000 + 5000 * Math.random(),
-      })),
+      }
+
+class ConfettiParty extends PureComponent<{ emit: boolean }, { confettis: Array<Object> }> {
+  state = {
+    // $FlowFixMe
+    confettis: Array(64)
+      .fill(null)
+      .map(nextConfetti),
+  }
+
+  componentDidMount() {
+    this.setEmit(this.props.emit)
+  }
+
+  componentDidUpdate(prevProps: *) {
+    if (this.props.emit !== prevProps.emit) {
+      this.setEmit(this.props.emit)
+    }
+  }
+
+  componentWillUnmount() {
+    this.setEmit(false)
+  }
+
+  setEmit(on: boolean) {
+    if (on) {
+      this.interval = setInterval(() => {
+        this.setState(({ confettis }) => ({
+          confettis: confettis.slice(confettis.length > 200 ? 1 : 0).concat(nextConfetti('emit')),
+        }))
+      }, 40)
+    } else {
+      clearInterval(this.interval)
+    }
   }
+  interval: *
 
   render() {
     const { confettis } = this.state

src/components/Onboarding/helperComponents.js

@@ -61,10 +61,10 @@ export const LiveLogoContainer = styled(Box).attrs({
   alignItems: 'center',
   justifyContent: 'center',
 })`
+  background-color: white;
   box-shadow: 0 2px 24px 0 #00000014;
   width: ${p => (p.width ? p.width : 80)}
   height: ${p => (p.height ? p.height : 80)}
-
 `
 
 // INSTRUCTION LIST

src/components/Onboarding/steps/Finish.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react'
+import React, { Component } from 'react'
 import { shell } from 'electron'
 import styled from 'styled-components'
 import { i } from 'helpers/staticPath'
@@ -48,39 +48,63 @@ const socialMedia = [
   },
 ]
 
-export default (props: StepProps) => {
+export default class Finish extends Component<StepProps, *> {
-  const { finish, t } = props
+  state = { emit: false }
-  return (
+  onMouseUp = () => this.setState({ emit: false })
-    <Box sticky justifyContent="center">
+  onMouseDown = () => {
-      <ConfettiLayer>
+    this.setState({ emit: true })
-        <ConfettiParty />
+  }
-      </ConfettiLayer>
+  onMouseLeave = () => {
-      <Box alignItems="center">
+    this.setState({ emit: false })
-        <Box style={{ position: 'relative' }}>
+  }
-          <LiveLogo
+  render() {
-            style={{ width: 64, height: 64 }}
+    const { finish, t } = this.props
-            icon={<img alt="" src={i('ledgerlive-logo.svg')} width={40} height={40} />}
+    const { emit } = this.state
-          />
+    return (
-          <Box color="positiveGreen" style={{ position: 'absolute', right: 0, bottom: 0 }}>
+      <Box sticky justifyContent="center">
-            <IconCheckFull size={18} />
+        <ConfettiLayer>
+          <ConfettiParty emit={emit} />
+        </ConfettiLayer>
+        <Box alignItems="center">
+          <Box
+            style={{ position: 'relative' }}
+            onMouseDown={this.onMouseDown}
+            onMouseUp={this.onMouseUp}
+            onMouseLeave={this.onMouseLeave}
+          >
+            <LiveLogo
+              style={{ width: 64, height: 64 }}
+              icon={
+                <img
+                  draggable="false"
+                  alt=""
+                  src={i('ledgerlive-logo.svg')}
+                  width={40}
+                  height={40}
+                />
+              }
+            />
+            <Box color="positiveGreen" style={{ position: 'absolute', right: 0, bottom: 0 }}>
+              <IconCheckFull size={18} />
+            </Box>
           </Box>
-        </Box>
 
-        <Box pt={5} align="center">
+          <Box pt={5} align="center">
-          <Title>{t('onboarding:finish.title')}</Title>
+            <Title>{t('onboarding:finish.title')}</Title>
-          <Description>{t('onboarding:finish.desc')}</Description>
+            <Description>{t('onboarding:finish.desc')}</Description>
-        </Box>
+          </Box>
-        <Box p={5}>
+          <Box p={5}>
-          <Button primary padded onClick={() => finish()}>
+            <Button primary padded onClick={() => finish()}>
-            {t('onboarding:finish.openAppButton')}
+              {t('onboarding:finish.openAppButton')}
-          </Button>
+            </Button>
-        </Box>
+          </Box>
-        <Box horizontal mt={3} flow={5} color="grey">
+          <Box horizontal mt={3} flow={5} color="grey">
-          {socialMedia.map(socMed => <SocialMediaBox key={socMed.key} socMed={socMed} />)}
+            {socialMedia.map(socMed => <SocialMediaBox key={socMed.key} socMed={socMed} />)}
+          </Box>
         </Box>
       </Box>
-    </Box>
+    )
-  )
+  }
 }
 
 type SocMed = {