feat: indicate refund file upload (#36)

* feat: indicate upload * chore: remove typo * refactor: change style
BoltzExchange · Dec 31, 2018 · 964455e · 964455e
1 parent 54b499d
commit 964455e
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 26 deletions.
diff --git a/src/components/controls/index.js b/src/components/controls/index.js
@@ -1,37 +1,56 @@
 import React from 'react';
+import injectSheet from 'react-jss';
 import PropTypes from 'prop-types';
 import View from '../view';
 import { MdArrowForward } from 'react-icons/md';
 
-const styles = {
-  wrapper: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+const styles = theme => ({
+  wrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: p => (p.loading ? theme.colors.tundoraGrey : 'none'),
+  },
   controls: { flex: 2, justifyContent: 'center', alignItems: 'center' },
-  loading: { color: '#fff', fontWeight: '300' },
+  text: { color: '#fff', fontWeight: '300' },
   nextIcon: {
     paddingRight: '10px',
     height: '30px',
     width: '30px',
-    color: '#fff',
+    color: theme.colors.white,
   },
-};
+});
 
-const Controls = ({ text, onPress, loading }) => (
-  <View style={styles.wrapper} onClick={loading ? null : () => onPress()}>
-    <View style={styles.controls}>
-      {loading ? (
-        <h1 style={styles.loading}>Loading...</h1>
-      ) : (
-        <h1 style={styles.loading}>{text}</h1>
-      )}
+const Controls = ({
+  classes,
+  text,
+  onPress,
+  loading,
+  loadingText,
+  loadingStyle,
+}) => {
+  return (
+    <View
+      className={classes.wrapper}
+      onClick={loading ? null : () => onPress()}
+    >
+      <View className={classes.controls}>
+        <h1 className={loading ? loadingStyle : classes.text}>
+          {loading ? loadingText : text}
+        </h1>
+      </View>
+      <MdArrowForward className={classes.nextIcon} />
     </View>
-    <MdArrowForward style={styles.nextIcon} />
-  </View>
-);
+  );
+};
 
 Controls.propTypes = {
+  classes: PropTypes.object.isRequired,
   text: PropTypes.string,
   onPress: PropTypes.func,
   loading: PropTypes.bool,
+  loadingText: PropTypes.string,
+  loadingStyle: PropTypes.string,
 };
 
-export default Controls;
+export default injectSheet(styles)(Controls);
diff --git a/src/views/refund/refund.js b/src/views/refund/refund.js
@@ -8,12 +8,16 @@ import Prompt from '../../components/prompt';
 import View from '../../components/view';
 import { StepOne, StepTwo, StepThree } from './steps';
 
-const styles = () => ({
+const styles = theme => ({
   wrapper: {
     height: '100%',
     alignItems: 'center',
     justifyContent: 'center',
   },
+  fileUpload: {
+    color: theme.colors.white,
+    fontWeight: '300',
+  },
 });
 
 const Refund = ({
@@ -60,7 +64,10 @@ const Refund = ({
             <StepsWizard.Step
               num={2}
               render={() => (
-                <StepTwo setDestinationAddress={setDestinationAddress} />
+                <StepTwo
+                  currency={refundFile.currency}
+                  setDestinationAddress={setDestinationAddress}
+                />
               )}
             />
             <StepsWizard.Step
@@ -78,7 +85,13 @@ const Refund = ({
               num={1}
               action={true}
               render={props => (
-                <Controls text={'Next'} onPress={() => props.nextStage()} />
+                <Controls
+                  text={'Next'}
+                  onPress={() => props.nextStage()}
+                  loadingText={'Upload refund file'}
+                  loadingStyle={classes.fileUpload}
+                  loading={Object.keys(refundFile).length === 0}
+                />
               )}
             />
             <StepsWizard.Control

diff --git a/src/views/refund/refundActions.js b/src/views/refund/refundActions.js
@@ -5,16 +5,30 @@ import * as actionTypes from '../../constants/actions';
 import { boltzApi, bitcoinNetwork, litecoinNetwork } from '../../constants';
 import { getHexBuffer } from '../../scripts/utils';
 
+const verifyRefundFile = (fileJSON, keys) => {
+  const verify = keys.every(key => fileJSON.hasOwnProperty(key));
+  return verify;
+};
+
 export const completeRefund = () => {
   return {
     type: actionTypes.COMPLETE_REFUND,
   };
 };
 
-export const setRefundFile = file => ({
-  type: actionTypes.SET_REFUND_FILE,
-  payload: JSON.parse(file),
-});
+export const setRefundFile = file => {
+  const fileJSON = JSON.parse(file);
+  const verifyFile = verifyRefundFile(fileJSON, [
+    'currency',
+    'redeemScript',
+    'privateKey',
+    'timeoutBlockHeight',
+  ]);
+  return {
+    type: actionTypes.SET_REFUND_FILE,
+    payload: verifyFile ? fileJSON : {},
+  };
+};
 
 export const setTransactionHash = hash => ({
   type: actionTypes.SET_REFUND_TXHASH,

diff --git a/src/views/refund/steps.js b/src/views/refund/steps.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import injectSheet from 'react-jss';
 import PropTypes from 'prop-types';
+import { getCurrencyName } from '../../scripts/utils';
 import View from '../../components/view';
 import { FaCheckCircle } from 'react-icons/fa';
 import DropZone from '../../components/dropzone';
@@ -74,9 +75,11 @@ const stepTwoStyles = theme => ({
   },
 });
 
-const StyledStepTwo = ({ classes, setDestinationAddress }) => (
+const StyledStepTwo = ({ classes, setDestinationAddress, currency }) => (
   <View className={classes.wrapper}>
-    <p className={classes.info}>Destination address</p>
+    <p className={classes.info}>
+      {getCurrencyName(currency)} Destintion Address
+    </p>
     <InputArea
       height={150}
       width={500}
@@ -88,6 +91,7 @@ const StyledStepTwo = ({ classes, setDestinationAddress }) => (
 
 StyledStepTwo.propTypes = {
   classes: PropTypes.object.isRequired,
+  currency: PropTypes.string.isRequired,
   setDestinationAddress: PropTypes.func.isRequired,
 };