Fix default pair

src/actions/swapActions.js

@@ -30,6 +30,11 @@ export const setSwapInvoice = (invoice, error) => ({
   },
 });
 
+export const backup = (error) => ({
+  type: actionTypes.BACKUP,
+  payload: error,
+});
+
 export const setSwapStatus = status => ({
   type: actionTypes.SET_SWAP_STATUS,
   payload: status,

src/components/background/index.js

@@ -7,7 +7,7 @@ const styles = theme => ({
   wrapper: {
     flex: '1 0',
     minHeight: '100vh',
-    backgroundImage: 'linear-gradient(to bottom, #114357, #f29492)',
+    backgroundImage: 'linear-gradient(to bottom, #17a2b8, #17a2b8)',
     flexDirection: 'column',
     overflowY: 'auto',
   },

src/components/navigationbar/desktopnavigationbar.js

@@ -37,29 +37,29 @@ const DeskTopNavigationBar = ({ classes }) => (
         text="FAQ"
         onPress={() => navigation.navFaq()}
       />
-      <Button
+      {/* <Button
         className={classes.responsiveBtn}
         external
         text="Onion URL"
         to={boltzOnion}
-      />
-      <Button
+      /> */}
+      {/* <Button
         className={classes.responsiveBtn}
         external
         text="Twitter"
         to="https://twitter.com/boltzhq"
-      />
+      /> */}
       <Button
         className={classes.responsiveBtn}
         external
         text="API"
-        to="https://docs.boltz.exchange/en/latest/"
+        to="https://boltz-backend-diamondhands.readthedocs.io/en/latest/"
       />
       <Button
         className={classes.responsiveBtn}
         external
         text="Github"
-        to="https://github.com/BoltzExchange"
+        to="https://github.com/diamondhands-dev"
       />
     </View>
   </View>

src/components/navigationbar/mobilenavigationbar.js

@@ -60,29 +60,29 @@ class MobileNavigationBar extends React.Component {
               text="FAQ"
               onPress={() => navigation.navFaq()}
             />
-            <Button
+            {/* <Button
               className={classes.btn}
               external
               text="Onion URL"
               to={boltzOnion}
-            />
-            <Button
+            /> */}
+            {/* <Button
               className={classes.btn}
               external
               text="Twitter"
               to="https://twitter.com/boltzhq"
-            />
+            /> */}
             <Button
               className={classes.responsiveBtn}
               external
               text="API"
-              to="https://docs.boltz.exchange/en/latest/"
+              to="https://boltz-backend-diamondhands.readthedocs.io/en/latest/"
             />
             <Button
               className={classes.btn}
               external
               text="Github"
-              to="https://github.com/BoltzExchange"
+              to="https://github.com/diamondhands-dev"
             />
           </View>
         ) : (

src/components/stepswizard/index.js

@@ -27,12 +27,12 @@ const styles = theme => ({
   },
   content: {
     width: '100%',
-    height: '75%',
+    height: '95%',
   },
   controls: {
     width: '100%',
     height: '15%',
-    backgroundColor: theme.colors.matisseBlue,
+    backgroundColor: theme.colors.selectiveYellow,
     '&:hover': {
       cursor: 'pointer',
     },

src/components/swaptab/desktopswaptab.js

@@ -13,6 +13,9 @@ import { formatAmount } from '../../utils';
 const DeskTopSwapTabContent = ({
   classes,
   feeAmount,
+  minerFeeAmount,
+  serviceFeeAmount,
+  feerate,
   minAmount,
   maxAmount,
   inputError,
@@ -46,7 +49,8 @@ const DeskTopSwapTabContent = ({
       />
       <InfoText
         title="Current fee"
-        text={`${feeAmount} ${base} (${feePercentage}%)`}
+        text={`${feeAmount} ${base} total fee (${(feeAmount / baseAmount * 100).toFixed(2)}%) *`}
+        lineTwo={`${minerFeeAmount} ${base} on-chain fee (${feerate} sat/vBytes)\n${serviceFeeAmount} ${base} service fee (${feePercentage.toFixed(2)}%)`}
       />
       <InfoText title="Rate" text={`${rate}`} />
     </View>
@@ -90,6 +94,9 @@ const DeskTopSwapTabContent = ({
           onChange={e => updatePair(e, base)}
         />
       </View>
+      <View className={classes.reward}>
+        <Text text={`${(base.lastIndexOf('⚡') !== -1) ? ' ' : ('+ ' + (baseAmount * 0.006).toFixed(8) + ' BTC ⚡ swapin reward (0.6%) **')}`} />
+      </View>
     </View>
     <View className={classes.next}>
       <Controls
@@ -99,11 +106,16 @@ const DeskTopSwapTabContent = ({
         errorText={errorMessage}
       />
     </View>
+    <View className={classes.terms}>
+      <Text text="* In addition to the total fee, routing fee or miner fee will be charged when you swap in or swap out respectively." />
+      <Text text="** Swap in, provide the DH node with onchain liquidity and earn sats. Note: Rewards distributed via keysend. Only available for non-custodial nodes such as Umbrel." />
+    </View>
   </View>
 );
 
 const styles = theme => ({
   wrapper: {
+    borderRadius: '15px 15px 0 0',
     margin: '15px',
     height: '400px',
     width: '600px',
@@ -125,11 +137,11 @@ const styles = theme => ({
     },
   },
   stats: {
-    backgroundColor: theme.colors.white,
+    //backgroundColor: theme.colors.white,
     height: '15%',
     width: '100%',
     justifyContent: 'space-around',
-    alignItems: 'center',
+    //alignItems: 'center',
   },
   options: {
     flex: '1 0 70%',
@@ -141,7 +153,7 @@ const styles = theme => ({
     justifyContent: 'space-around',
   },
   next: {
-    backgroundColor: theme.colors.matisseBlue,
+    backgroundColor: theme.colors.selectiveYellow,
     flex: '1 0 15%',
     justifyContent: 'center',
     alignItems: 'center',
@@ -184,6 +196,23 @@ const styles = theme => ({
       color: theme.colors.hoverGrey,
     },
   },
+  terms: {
+    borderRadius: '0 0 15px 15px',
+    color: 'grey',
+    fontSize: '12px',
+    fontWeight: 400,
+    padding: '10px',
+    display: 'flex',
+    flexFlow: 'column',
+    backgroundColor: theme.colors.white,
+  },
+  reward: {
+    fontSize: '15px',
+    fontWeight: 400,
+    padding: '0 0 15px 0',
+    margin: 'auto',
+    whiteSpace: 'pre-wrap',
+  },
 });
 
 DeskTopSwapTabContent.propTypes = {
@@ -197,6 +226,9 @@ DeskTopSwapTabContent.propTypes = {
   error: PropTypes.bool,
   errorMessage: PropTypes.string,
   feeAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minerFeeAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  serviceFeeAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  feerate: PropTypes.string,
   minAmount: PropTypes.number,
   maxAmount: PropTypes.number,
   inputError: PropTypes.bool,

src/components/swaptab/mobileswaptab.js

@@ -13,6 +13,9 @@ import SwapTabWrapper from './swaptabwrapper';
 const MobileSwapTabContent = ({
   classes,
   feeAmount,
+  minerFeeAmount,
+  serviceFeeAmount,
+  feerate,
   minAmount,
   maxAmount,
   rate,
@@ -46,8 +49,8 @@ const MobileSwapTabContent = ({
       />
       <InfoText
         title="Current fee"
-        text={`${feeAmount} ${base}`}
-        lineTwo={`(${feePercentage}%)`}
+        text={`${feeAmount} ${base} total fee (${(feeAmount / baseAmount * 100).toFixed(2)}%) *`}
+        lineTwo={`${minerFeeAmount} ${base} on-chain fee (${feerate} sat/vBytes)\n${serviceFeeAmount} ${base} service fee (${feePercentage.toFixed(2)}%)`}
       />
       <InfoText title="Rate" text={`${rate}`} />
     </View>
@@ -95,6 +98,9 @@ const MobileSwapTabContent = ({
           />
         </View>
       </View>
+      <View className={classes.reward}>
+        <Text text={`${(base.lastIndexOf('⚡') !== -1) ? ' ' : ('+ ' + (baseAmount * 0.006).toFixed(8) + ' BTC ⚡ swapin reward (0.6%) **')}`} />
+      </View>
     </View>
     <View className={classes.next}>
       <Controls
@@ -105,6 +111,10 @@ const MobileSwapTabContent = ({
         errorText={errorMessage}
       />
     </View>
+    <View className={classes.terms}>
+      <Text text="* In addition to the total fee, routing fee or miner fee will be charged when you swap in or swap out respectively." />
+      <Text text="** Swap in, provide the DH node with onchain liquidity and earn sats. Note: Rewards distributed via keysend. Only available for non-custodial nodes such as Umbrel." />
+    </View>
   </View>
 );
 
@@ -147,7 +157,7 @@ const styles = theme => ({
     justifyContent: 'space-around',
   },
   next: {
-    backgroundColor: theme.colors.matisseBlue,
+    backgroundColor: theme.colors.selectiveYellow,
   },
   arrows: {
     height: '30px',
@@ -162,6 +172,22 @@ const styles = theme => ({
       color: theme.colors.hoverGrey,
     },
   },
+  terms: {
+    color: 'grey',
+    fontSize: '12px',
+    fontWeight: 400,
+    padding: '10px',
+    display: 'flex',
+    flexFlow: 'column',
+    backgroundColor: theme.colors.white,
+  },
+  reward: {
+    fontSize: '15px',
+    fontWeight: 400,
+    padding: '0 0 15px 0',
+    margin: 'auto',
+    whiteSpace: 'pre-wrap',
+  },
 });
 
 MobileSwapTabContent.propTypes = {
@@ -176,6 +202,9 @@ MobileSwapTabContent.propTypes = {
   error: PropTypes.bool,
   errorMessage: PropTypes.string,
   feeAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minerFeeAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  serviceFeeAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  feerate: PropTypes.string,
   minAmount: PropTypes.number,
   maxAmount: PropTypes.number,
   inputError: PropTypes.bool,

src/components/swaptab/swaptabwrapper.js

@@ -21,13 +21,15 @@ class SwapTabWrapper extends React.Component {
       disabled: false,
       error: false,
       inputError: false,
-      base: 'LTC',
+      base: 'BTC',
       quote: 'BTC ⚡',
       minAmount: new BigNumber('0'),
       maxAmount: new BigNumber('0'),
       baseAmount: new BigNumber('0.05'),
       quoteAmount: new BigNumber('0'),
       feeAmount: new BigNumber('0'),
+      minerFeeAmount: new BigNumber('0'),
+      serviceFeeAmount: new BigNumber('0'),
       errorMessage: '',
     };
   }
@@ -235,10 +237,14 @@ class SwapTabWrapper extends React.Component {
     const newBaseWithFee = fee.plus(newBase);
     const inputError = !this.checkBaseAmount(newBaseWithFee);
 
+    const minerFee = new BigNumber(this.calculateMinerFee()).dividedBy(decimals);
+
     this.setState({
       quoteAmount: amount,
       baseAmount: new BigNumber(newBaseWithFee.toFixed(8)),
       feeAmount: fee,
+      minerFeeAmount: minerFee,
+      serviceFeeAmount: amount.times(this.state.feePercentage),
       inputError,
       errorMessage: 'Invalid amount',
     });
@@ -263,11 +269,15 @@ class SwapTabWrapper extends React.Component {
       newQuote = new BigNumber('0');
     }
 
+    const minerFee = new BigNumber(this.calculateMinerFee()).dividedBy(decimals);
+
     const inputError = !this.checkBaseAmount(amount);
     this.setState({
       quoteAmount: newQuote,
       baseAmount: amount,
       feeAmount: fee,
+      minerFeeAmount: minerFee,
+      serviceFeeAmount: amount.times(this.state.feePercentage),
       inputError,
       errorMessage: 'Invalid amount',
     });
@@ -315,11 +325,17 @@ class SwapTabWrapper extends React.Component {
   };
 
   render() {
-    const { feeAmount } = this.state;
+    const { feeAmount, minerFeeAmount, serviceFeeAmount } = this.state;
     const feePercentage = this.props.fees.percentages[this.getSymbol()] * 100;
 
+    // TODO: avoid hard coding transaction size
+    const { minerFees } = this.props.fees;
+    const fee = minerFees[this.baseAsset.symbol].normal;
+    const feerate = new BigNumber(fee).dividedBy(170).toFixed(0);
+
     return this.props.children({
       feePercentage,
+      feerate,
       quote: this.state.quote,
       disabled: this.state.disabled,
       base: this.state.base,
@@ -329,6 +345,8 @@ class SwapTabWrapper extends React.Component {
       minAmount: this.state.minAmount.toNumber(),
       maxAmount: this.state.maxAmount.toNumber(),
       feeAmount: feeAmount.isZero() ? 0 : feeAmount.toFixed(8),
+      minerFeeAmount: minerFeeAmount.isZero() ? 0 : minerFeeAmount.toFixed(8),
+      serviceFeeAmount: serviceFeeAmount.isZero() ? 0 : serviceFeeAmount.toFixed(8),
       quoteAmount: this.state.quoteAmount.toNumber(),
       baseAmount: this.state.baseAmount.toNumber(),
       classes: this.props.classes,

src/components/text/index.js

@@ -34,14 +34,20 @@ const infoTextStyles = () => ({
     fontSize: '12px',
     fontWeight: 400,
   },
+  textTwo: {
+    color: 'grey',
+    fontSize: '12px',
+    fontWeight: 400,
+    whiteSpace: 'pre-wrap'
+  },
 });
 
 const StyledInfoText = ({ title, text, lineTwo, classes, style }) => (
   <View className={classes.wrapper}>
     <Text text={`${title}:`} className={classes.title} style={style} />
     <Text text={text} className={classes.text} style={style} />
     {lineTwo !== undefined ? (
-      <Text text={lineTwo} className={classes.text} style={style} />
+      <Text text={lineTwo} className={classes.textTwo} style={style} />
     ) : (
       undefined
     )}