feat: add details about swap to success page (#114)

* feat: add details about swap to success page * refactor: confetti component * refactor: review changes * refactor: swap
BoltzExchange · Mar 4, 2019 · efdaad9 · efdaad9
1 parent 7c75be9
commit efdaad9
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/src/components/confetti/index.js b/src/components/confetti/index.js
@@ -12,11 +12,15 @@ const confettiStyles = () => ({
     justifyContent: 'center',
   },
   text: {
-    fontSize: '30px',
+    fontSize: '40px',
+  },
+  notifie: {
+    fontSize: '25px',
+    fontWeight: 300,
   },
 });
 
-const StyledConfetti = ({ classes }) => (
+const Confetti = ({ classes, notifie }) => (
   <View className={classes.wrapper}>
     <ReactConfetti
       height={window.innerHeight}
@@ -25,13 +29,13 @@ const StyledConfetti = ({ classes }) => (
       recycle={false}
     />
     <span className={classes.text}>Viola! Swap successful!</span>
+    {notifie(classes.notifie)}
   </View>
 );
 
-StyledConfetti.propTypes = {
+Confetti.propTypes = {
   classes: PropTypes.object.isRequired,
+  notifie: PropTypes.func,
 };
 
-const Confetti = injectSheet(confettiStyles)(StyledConfetti);
-
-export default Confetti;
+export default injectSheet(confettiStyles)(Confetti);
diff --git a/src/components/stepswizard/steps.js b/src/components/stepswizard/steps.js
@@ -2,11 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from '../view';
 
-const Step = ({ render, stage, num }) => {
-  if (stage === num) {
-    return render();
-  } else return null;
-};
+const Step = ({ render, stage, num }) => (stage === num ? render() : null);
 
 Step.propTypes = {
   num: PropTypes.number,

diff --git a/src/views/reverse/reverse.js b/src/views/reverse/reverse.js
@@ -104,7 +104,19 @@ class ReverseSwap extends React.Component {
                   />
                 )}
               />
-              <StepsWizard.Step num={4} render={() => <Confetti />} />
+              <StepsWizard.Step
+                num={4}
+                render={() => (
+                  <Confetti
+                    notifie={style => (
+                      <span className={style}>
+                        You sent {swapInfo.baseAmount} {swapInfo.base} and
+                        received {swapInfo.quoteAmount} {swapInfo.quote}
+                      </span>
+                    )}
+                  />
+                )}
+              />
             </StepsWizard.Steps>
             <StepsWizard.Controls>
               <StepsWizard.Control

diff --git a/src/views/swap/swap.js b/src/views/swap/swap.js
@@ -76,7 +76,19 @@ const Swap = ({
                 />
               )}
             />
-            <StepsWizard.Step num={4} render={() => <Confetti />} />
+            <StepsWizard.Step
+              num={4}
+              render={() => (
+                <Confetti
+                  notifie={style => (
+                    <span className={style}>
+                      You sent {swapInfo.baseAmount} {swapInfo.base} and
+                      received {swapInfo.quoteAmount} {swapInfo.quote}
+                    </span>
+                  )}
+                />
+              )}
+            />
           </StepsWizard.Steps>
           <StepsWizard.Controls>
             <StepsWizard.Control