feat: add fee percentage (#213)

BoltzExchange · Sep 3, 2019 · 50326d0 · 50326d0
1 parent 016757a
commit 50326d0
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/src/components/swaptab/desktopswaptab.js b/src/components/swaptab/desktopswaptab.js
@@ -32,6 +32,7 @@ const DeskTopSwapTabContent = ({
   shouldSubmit,
   baseStep,
   quoteStep,
+  feePercentage,
 }) => (
   <View className={classes.wrapper}>
     <View className={classes.stats}>
@@ -43,7 +44,10 @@ const DeskTopSwapTabContent = ({
         title="Max amount"
         text={`${formatAmount(maxAmount)} ${base}`}
       />
-      <InfoText title="Fee" text={`${feeAmount} ${base}`} />
+      <InfoText
+        title="Current fee"
+        text={`${feeAmount} ${base} (${feePercentage}%)`}
+      />
       <InfoText title="Rate" text={`${rate}`} />
     </View>
     <View className={classes.options}>
@@ -185,7 +189,7 @@ const styles = theme => ({
 DeskTopSwapTabContent.propTypes = {
   classes: PropTypes.object,
   onPress: PropTypes.func,
-  fees: PropTypes.object.isRequired,
+  feePercentage: PropTypes.number.isRequired,
   limits: PropTypes.object.isRequired,
   currencies: PropTypes.array.isRequired,
   quote: PropTypes.string,

diff --git a/src/components/swaptab/mobileswaptab.js b/src/components/swaptab/mobileswaptab.js
@@ -32,6 +32,7 @@ const MobileSwapTabContent = ({
   shouldSubmit,
   baseStep,
   quoteStep,
+  feePercentage,
 }) => (
   <View className={classes.wrapper}>
     <View className={classes.info}>
@@ -43,7 +44,11 @@ const MobileSwapTabContent = ({
         title="Max amount"
         text={`${formatAmount(maxAmount)} ${base}`}
       />
-      <InfoText title="Fee" text={`${feeAmount} ${base}`} />
+      <InfoText
+        title="Current fee"
+        text={`${feeAmount} ${base}`}
+        lineTwo={`(${feePercentage}%)`}
+      />
       <InfoText title="Rate" text={`${rate}`} />
     </View>
     <View className={classes.inputs}>
@@ -163,6 +168,7 @@ MobileSwapTabContent.propTypes = {
   classes: PropTypes.object,
   onPress: PropTypes.func,
   fees: PropTypes.object.isRequired,
+  feePercentage: PropTypes.number.isRequired,
   limits: PropTypes.object.isRequired,
   currencies: PropTypes.array.isRequired,
   quote: PropTypes.string,

diff --git a/src/components/swaptab/swaptabwrapper.js b/src/components/swaptab/swaptabwrapper.js
@@ -316,7 +316,10 @@ class SwapTabWrapper extends React.Component {
 
   render() {
     const { feeAmount } = this.state;
+    const feePercentage = this.props.fees.percentages[this.getSymbol()];
+
     return this.props.children({
+      feePercentage,
       quote: this.state.quote,
       disabled: this.state.disabled,
       base: this.state.base,
@@ -330,7 +333,6 @@ class SwapTabWrapper extends React.Component {
       baseAmount: this.state.baseAmount.toNumber(),
       classes: this.props.classes,
       onPress: this.props.onPress,
-      fees: this.props.fees,
       limits: this.props.limits,
       currencies: this.props.currencies,
       rate: this.parseRate(),

diff --git a/src/components/text/index.js b/src/components/text/index.js
@@ -36,17 +36,23 @@ const infoTextStyles = () => ({
   },
 });
 
-const StyledInfoText = ({ title, text, classes, style }) => (
+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} />
+    ) : (
+      undefined
+    )}
   </View>
 );
 
 StyledInfoText.propTypes = {
   classes: PropTypes.object.isRequired,
   title: PropTypes.string,
   text: PropTypes.string,
+  lineTwo: PropTypes.string,
   style: PropTypes.object,
 };