feat: new success page for swaps (#65)

package.json

@@ -32,6 +32,7 @@
     "prop-types": "^15.6.2",
     "qrious": "^4.0.2",
     "react": "^16.7.0",
+    "react-confetti": "^2.3.0",
     "react-dom": "^16.7.0",
     "react-icons": "^3.3.0",
     "react-jss": "^8.6.1",

src/components/confetti/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import injectSheet from 'react-jss';
+import ReactConfetti from 'react-confetti';
+import View from '../../components/view';
+
+const confettiStyles = () => ({
+  wrapper: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: '30px',
+  },
+});
+
+const StyledConfetti = ({ classes }) => (
+  <View className={classes.wrapper}>
+    <ReactConfetti
+      height={window.innerHeight}
+      width={window.innerWidth}
+      numberOfPieces={500}
+      recycle={false}
+    />
+    <span className={classes.text}>Viola! Swap successful!</span>
+  </View>
+);
+
+StyledConfetti.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const Confetti = injectSheet(confettiStyles)(StyledConfetti);
+
+export default Confetti;

src/components/swaptab/index.js

@@ -137,7 +137,7 @@ class SwapTab extends React.Component {
     );
   };
 
-  componentDidUpdate = (prevProps, prevState) => {
+  componentDidUpdate = (_, prevState) => {
     // Update the rate if the request finished or the currencies changed
     if (
       prevState.base !== this.state.base ||
@@ -147,10 +147,13 @@ class SwapTab extends React.Component {
 
       // Swapping from chain to chain or from Lightning to Lightning is not supported right now
       if (this.baseAsset.isLightning !== this.quoteAsset.isLightning) {
-        this.setState({
-          rate,
-          error: false,
-        });
+        this.setState(
+          {
+            rate,
+            error: false,
+          },
+          () => this.updateQuoteAmount(this.state.baseAmount)
+        );
       } else {
         this.setState({
           rate: undefined,
@@ -168,6 +171,7 @@ class SwapTab extends React.Component {
     const rate = new BigNumber(this.state.rate.rate);
     const newBaseAmount = new BigNumber(quoteAmount).dividedBy(rate).toFixed(8);
     const error = !this.checkBaseAmount(newBaseAmount);
+
     this.setState({
       quoteAmount: Number.parseFloat(quoteAmount),
       baseAmount: newBaseAmount,
@@ -179,6 +183,7 @@ class SwapTab extends React.Component {
     const rate = new BigNumber(this.state.rate.rate);
     const newQuoteAmount = new BigNumber(baseAmount).times(rate).toFixed(8);
     const error = !this.checkBaseAmount(baseAmount);
+
     this.setState({
       quoteAmount: newQuoteAmount,
       baseAmount: Number.parseFloat(baseAmount),

src/views/landingpage/landingpageActions.js

@@ -1,7 +1,8 @@
 import axios from 'axios';
+import { Set } from 'core-js';
 import { boltzApi } from '../../constants';
-import * as actionTypes from '../../constants/actions';
 import { splitPairId } from '../../scripts/utils';
+import * as actionTypes from '../../constants/actions';
 
 const pairsRequest = () => ({
   type: actionTypes.PAIRS_REQUEST,
@@ -43,10 +44,18 @@ const getRates = pairs => {
 
 const getCurrencies = pairs => {
   const currencies = [];
+  const contains = new Set();
+
+  const addToArray = currency => {
+    if (!contains.has(currency)) {
+      contains.add(currency);
+      currencies.push(currency);
+    }
+  };
 
   const pushCurrency = currency => {
-    currencies.push(currency);
-    currencies.push(`${currency} ⚡`);
+    addToArray(currency);
+    addToArray(`${currency} ⚡`);
   };
 
   for (const pair in pairs) {

src/views/reverse/reverse.js

@@ -4,8 +4,9 @@ import injectSheet from 'react-jss';
 import View from '../../components/view';
 import Prompt from '../../components/prompt';
 import Controls from '../../components/controls';
-import BackGround from '../../components/background';
+import Confetti from '../../components/confetti';
 import { InputAddress, PayInvoice } from './steps';
+import BackGround from '../../components/background';
 import StepsWizard from '../../components/stepswizard';
 
 const styles = () => ({
@@ -22,6 +23,7 @@ const ReverseSwap = ({
   startReverseSwap,
   completeSwap,
   goHome,
+  nextStage,
   swapInfo,
   swapResponse,
   isFetching,
@@ -32,7 +34,7 @@ const ReverseSwap = ({
       <Prompt />
       <View className={classes.wrapper}>
         <StepsWizard
-          range={2}
+          range={3}
           stage={1}
           id={swapResponse ? swapResponse.id : null}
           onExit={() => {
@@ -61,6 +63,7 @@ const ReverseSwap = ({
                 />
               )}
             />
+            <StepsWizard.Step num={3} render={() => <Confetti />} />
           </StepsWizard.Steps>
           <StepsWizard.Controls>
             <StepsWizard.Control
@@ -84,11 +87,18 @@ const ReverseSwap = ({
                   text={'Done'}
                   loadingText={swapStatus}
                   onPress={() => {
-                    goHome();
+                    completeSwap();
+                    nextStage();
                   }}
                 />
               )}
             />
+            <StepsWizard.Control
+              num={3}
+              render={() => (
+                <Controls text={'Swap Again!'} onPress={() => goHome()} />
+              )}
+            />
           </StepsWizard.Controls>
         </StepsWizard>
       </View>

src/views/reverse/reverseActions.js

@@ -108,6 +108,7 @@ const startListening = (dispatch, swapInfo, response, nextStage) => {
       dispatch(
         broadcastClaim(swapInfo.quote, claimTx.toHex(), () => {
           dispatch(reverseSwapResponse(true, response));
+          nextStage();
         })
       );
     }

src/views/swap/steps/index.js

@@ -1,6 +1,5 @@
 import InputInvoice from './inputInvoice';
-import SendTransaction from './sendTransaction';
 import DownloadRefund from './downloadRefund';
-import CompleteSwap from './completeSwap';
+import SendTransaction from './sendTransaction';
 
-export { InputInvoice, SendTransaction, DownloadRefund, CompleteSwap };
+export { InputInvoice, SendTransaction, DownloadRefund };

src/views/swap/swap.js

@@ -2,17 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import View from '../../components/view';
+import Prompt from '../../components/prompt';
 import Loading from '../../components/loader';
+import Controls from '../../components/controls';
+import Confetti from '../../components/confetti';
 import BackGround from '../../components/background';
 import StepsWizard from '../../components/stepswizard';
-import Controls from '../../components/controls';
-import Prompt from '../../components/prompt';
-import {
-  InputInvoice,
-  SendTransaction,
-  DownloadRefund,
-  CompleteSwap,
-} from './steps';
+import { InputInvoice, SendTransaction, DownloadRefund } from './steps';
 import { FEE } from '../../constants/fees';
 
 const styles = () => ({
@@ -76,7 +72,7 @@ const Swap = ({
                 />
               )}
             />
-            <StepsWizard.Step num={4} render={() => <CompleteSwap />} />
+            <StepsWizard.Step num={4} render={() => <Confetti />} />
           </StepsWizard.Steps>
           <StepsWizard.Controls>
             <StepsWizard.Control

src/views/swap/swapActions.js

@@ -95,7 +95,7 @@ export const startListening = (dispatch, swapId, callback) => {
       message = {
         error: true,
         pending: true,
-        message: 'Boltz failed to confirm the trasnsaction',
+        message: 'Boltz could not find the transaction',
       };
     }