feat: add refunds (#10)

* feat: add refunds

* feat: add file uploads via file inputs

* refactor: style and flow fixes

* feat: show loading when waiting for requests

* feat: clean state when exiting

package.json

@@ -1,21 +1,6 @@
 {
   "name": "boltz-frontend",
   "version": "1.0.0",
-  "dependencies": {
-    "axios": "^0.18.0",
-    "bitcoinjs-lib": "^4.0.2",
-    "prop-types": "^15.6.2",
-    "qrious": "^4.0.2",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "react-icons": "^3.2.2",
-    "react-jss": "^8.6.1",
-    "react-redux": "^5.1.1",
-    "react-scripts": "2.1.1",
-    "redux": "^4.0.1",
-    "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0"
-  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -33,6 +18,27 @@
     "not ie <= 11",
     "not op_mini all"
   ],
+  "license": "AGPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BoltzExchange/boltz-frontend.git"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "bitcoinjs-lib": "^4.0.2",
+    "boltz-core": "0.0.3",
+    "prop-types": "^15.6.2",
+    "qrious": "^4.0.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-icons": "^3.2.2",
+    "react-jss": "^8.6.1",
+    "react-redux": "^5.1.1",
+    "react-scripts": "2.1.1",
+    "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0"
+  },
   "devDependencies": {
     "@babel/plugin-syntax-decorators": "^7.1.0",
     "babel-eslint": "^10.0.1",

src/components/dropzone/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import View from '../view';
+import { readFile } from '../../scripts/utils';
 
 class DropZone extends React.Component {
   constructor(props) {
@@ -10,24 +11,29 @@ class DropZone extends React.Component {
     };
     this.ref = React.createRef();
   }
+
   componentDidMount() {
     this.ref.current.addEventListener('mouseup', this.onDragLeave);
     this.ref.current.addEventListener('dragenter', this.onDragEnter);
     this.ref.current.addEventListener('dragover', this.onDragOver);
     this.ref.current.addEventListener('drop', this.onDrop);
   }
+
   componentWillUnmount() {
     this.ref.current.removeEventListener('mouseup', this.onDragLeave);
     this.ref.current.removeEventListener('dragenter', this.onDragEnter);
     this.ref.current.addEventListener('dragover', this.onDragOver);
     this.ref.current.removeEventListener('drop', this.onDrop);
   }
 
-  // TODO: Extract data from files.
   onDrop = e => {
     e.preventDefault();
-    const files = e.dataTransfer.files;
-    window.alert(`Files dropped: ${files}`);
+    const file = e.dataTransfer.items[0].getAsFile();
+
+    readFile(file, content => {
+      this.props.onFileRead(content);
+    });
+
     this.setState({ active: false });
     return false;
   };
@@ -80,6 +86,7 @@ DropZone.protoTypes = {
   style: PropTypes.object,
   width: PropTypes.number,
   height: PropTypes.number,
+  onFileRead: PropTypes.func.isRequired,
 };
 
 export default DropZone;

src/components/fileupload/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
+import { readFile } from '../../scripts/utils';
 
 const fileBtnStyles = theme => ({
   wrapper: {
@@ -31,16 +32,25 @@ const fileBtnStyles = theme => ({
   },
 });
 
-const FileUpload = ({ classes, text }) => (
+const FileUpload = ({ classes, text, onFileRead }) => (
   <div className={classes.wrapper}>
     {text}
-    <input className={classes.input} type="file" />
+    <input
+      className={classes.input}
+      onChange={event => {
+        readFile(event.target.files[0], content => {
+          onFileRead(content);
+        });
+      }}
+      type="file"
+    />
   </div>
 );
 
 FileUpload.propTypes = {
   classes: PropTypes.object.isRequired,
   text: PropTypes.string.isRequired,
+  onFileRead: PropTypes.func.isRequired,
 };
 
 export default injectSheet(fileBtnStyles)(FileUpload);

src/components/view/index.js

@@ -8,6 +8,7 @@ const View = ({ children, style, className, inputRef, ...otherProps }) => {
   if (style !== undefined) {
     newStyle = { ...newStyle, ...style };
   }
+
   return (
     <div className={className} style={newStyle} ref={inputRef} {...otherProps}>
       {children}

src/constants/actions/index.js

@@ -16,4 +16,11 @@ export const SWAP_RESPONSE = 'SWAP_RESPONSE';
 /**
  * Refund actions
  */
-export const ENTER_REFUND_MODE = 'ENTER_REFUND_MODE';
+export const COMPLETE_REFUND = 'COMPLETE_REFUND';
+export const SET_REFUND_FILE = 'SET_REFUND_FILE';
+export const SET_REFUND_TXHASH = 'SET_REFUND_TXHASH';
+export const SET_REFUND_DESTINATION = 'SET_REFUND_DESTINATION';
+export const SET_REFUND_TRANSACTION = 'SET_REFUND_TRANSACTION';
+export const SET_REFUND_TRANSACTION_HASH = 'SET_REFUND_TRANSACTION_HASH';
+export const REFUND_REQUEST = 'REFUND_REQUEST';
+export const REFUND_RESPONSE = 'REFUND_RESPONSE';

src/constants/index.js

@@ -0,0 +1 @@
+export const boltzApi = 'http://localhost:9001';

src/scripts/utils.js

@@ -9,11 +9,37 @@ export const getHexString = input => {
 };
 
 /**
- * Convert BTC to Satoshi.
+ * Convert BTC to satoshi
  *
  * @param btc btc
- * @returns satoshi
+ * @returns amount in satoshi
  */
 export const toSatoshi = btc => {
   return btc * 100000000;
 };
+
+/**
+ * Get a hex encoded Buffer from a string
+ *
+ * @param input {string} input
+ * @returns a hex encoded Buffer
+ */
+export const getHexBuffer = input => {
+  return Buffer.from(input, 'hex');
+};
+
+/**
+ * Read the content of a file
+ *
+ * @param file file that should be read
+ * @param cb callback that will be called once the file is read
+ */
+export const readFile = (file, cb) => {
+  const reader = new window.FileReader();
+
+  reader.onload = () => {
+    cb(reader.result);
+  };
+
+  reader.readAsText(file);
+};

src/views/refund/index.js

@@ -4,12 +4,25 @@ import * as actions from './refundActions';
 import { nav } from '../../action';
 
 const mapStateToProps = state => ({
-  inRefundMode: state.refundReducer.inRefundMode,
+  refundFile: state.refundReducer.refundFile,
+  transactionHash: state.refundReducer.transactionHash,
+  destinationAddress: state.refundReducer.destinationAddress,
+  refundTransaction: state.refundReducer.refundTransaction,
+  refundTransactionHash: state.refundReducer.refundTransactionHash,
+  isFetching: state.refundReducer.isFetching,
 });
 
 const mapDispatchToProps = dispatch => ({
-  toggleRefundMode: () => dispatch(actions.toggleRefundMode()),
   goHome: () => dispatch(nav.goHome()),
+  setRefundFile: file => dispatch(actions.setRefundFile(file)),
+  setTransactionHash: hash => dispatch(actions.setTransactionHash(hash)),
+  setDestinationAddress: address =>
+    dispatch(actions.setDestinationAddress(address)),
+  startRefund: (refundFile, transactionHash, destinationAddress, cb) =>
+    dispatch(
+      actions.startRefund(refundFile, transactionHash, destinationAddress, cb)
+    ),
+  completeRefund: () => dispatch(actions.completeRefund()),
 });
 
 export default connect(