src/renderer/js/component/shapeShift/internal/active-shift.jsx

@@ -5,6 +5,7 @@ import * as statuses from "constants/shape_shift";
 import Address from "component/address";
 import Link from "component/link";
 import type { Dispatch } from "redux/actions/shape_shift";
+import ShiftMarketInfo from "./market_info";
 
 type Props = {
   shiftState: ?string,
@@ -16,6 +17,10 @@ type Props = {
   clearShapeShift: Dispatch,
   doShowSnackBar: Dispatch,
   getActiveShift: Dispatch,
+  shapeShiftRate: ?number,
+  originCoinDepositMax: ?number,
+  originCoinDepositFee: ?number,
+  originCoinDepositMin: ?string,
 };
 
 class ActiveShapeShift extends React.PureComponent<Props> {
@@ -63,6 +68,9 @@ class ActiveShapeShift extends React.PureComponent<Props> {
       originCoinDepositMax,
       clearShapeShift,
       doShowSnackBar,
+      shapeShiftRate,
+      originCoinDepositFee,
+      originCoinDepositMin,
     } = this.props;
 
     return (
@@ -76,6 +84,13 @@ class ActiveShapeShift extends React.PureComponent<Props> {
               </span>{" "}
               to the address below.
             </p>
+            <ShiftMarketInfo
+              originCoin={shiftCoinType}
+              shapeShiftRate={shapeShiftRate}
+              originCoinDepositFee={originCoinDepositFee}
+              originCoinDepositMin={originCoinDepositMin}
+              originCoinDepositMax={originCoinDepositMax}
+            />
 
             <div className="shapeshift__deposit-address-wrapper">
               <Address address={shiftDepositAddress} showCopyButton />

src/renderer/js/component/shapeShift/internal/form.jsx

@@ -3,6 +3,7 @@ import Link from "component/link";
 import { getExampleAddress } from "util/shape_shift";
 import { Submit, FormRow } from "component/form";
 import type { ShapeShiftFormValues, Dispatch } from "redux/actions/shape_shift";
+import ShiftMarketInfo from "./market_info";
 
 type ShapeShiftFormErrors = {
   returnAddress?: string,
@@ -24,6 +25,7 @@ type Props = {
   originCoinDepositFee: number,
   originCoinDepositMin: string,
   originCoinDepositMax: number,
+  shapeShiftRate: number,
 };
 
 export default (props: Props) => {
@@ -43,6 +45,7 @@ export default (props: Props) => {
     originCoinDepositMax,
     originCoinDepositMin,
     originCoinDepositFee,
+    shapeShiftRate,
   } = props;
   return (
     <form onSubmit={handleSubmit}>
@@ -63,18 +66,18 @@ export default (props: Props) => {
           ))}
         </select>
         <span> {__("for LBC")}</span>
-        <p className="shapeshift__tx-info help">
+        <div className="shapeshift__tx-info">
           {!updating &&
             originCoinDepositMax && (
-              <span>
+              <ShiftMarketInfo
-                {__("Exchange max")}: {originCoinDepositMax} {originCoin}
+                originCoin={originCoin}
-                <br />
+                shapeShiftRate={shapeShiftRate}
-                {__("Exchange minimun")}: {originCoinDepositMin} {originCoin}
+                originCoinDepositFee={originCoinDepositFee}
-                <br />
+                originCoinDepositMin={originCoinDepositMin}
-                {__("Fee")}: {originCoinDepositFee} LBC
+                originCoinDepositMax={originCoinDepositMax}
-              </span>
+              />
             )}
-        </p>
+        </div>
       </div>
 
       <FormRow

src/renderer/js/component/shapeShift/internal/market_info.jsx

@@ -0,0 +1,34 @@
+// @flow
+import React from "react";
+
+type Props = {
+  shapeShiftRate: ?number,
+  originCoin: ?string,
+  originCoinDepositFee: ?number,
+  originCoinDepositMax: ?number,
+  originCoinDepositMin: ?string,
+};
+
+export default (props: Props) => {
+  const {
+    shapeShiftRate,
+    originCoin,
+    originCoinDepositFee,
+    originCoinDepositMax,
+    originCoinDepositMin,
+  } = props;
+
+  return (
+    <div>
+      <span className="help">
+        {__("Receive")} {shapeShiftRate} LBC
+        {" / "}
+        {"1"} {originCoin} {__("less")} {originCoinDepositFee} LBC {__("fee")}.
+        <br />
+        {__("Exchange max")}: {originCoinDepositMax} {originCoin}
+        <br />
+        {__("Exchange min")}: {originCoinDepositMin} {originCoin}
+      </span>
+    </div>
+  );
+};

src/renderer/js/component/shapeShift/view.jsx

@@ -65,6 +65,7 @@ class ShapeShift extends React.PureComponent<Props> {
       shiftCoinType,
       shiftOrderId,
       shiftState,
+      shapeShiftRate,
     } = shapeShift;
 
     const initialFormValues: ShapeShiftFormValues = {
@@ -116,6 +117,8 @@ class ShapeShift extends React.PureComponent<Props> {
                     originCoinDepositMax={originCoinDepositMax}
                     originCoinDepositMin={originCoinDepositMin}
                     originCoinDepositFee={originCoinDepositFee}
+                    shapeShiftRate={shapeShiftRate}
+                    updating={updating}
                   />
                 )}
               />
@@ -131,6 +134,11 @@ class ShapeShift extends React.PureComponent<Props> {
               shiftState={shiftState}
               clearShapeShift={clearShapeShift}
               doShowSnackBar={doShowSnackBar}
+              originCoinDepositMax={originCoinDepositMax}
+              originCoinDepositMin={originCoinDepositMin}
+              originCoinDepositFee={originCoinDepositFee}
+              shapeShiftRate={shapeShiftRate}
+              updating={updating}
             />
           )}
         </div>

src/renderer/js/redux/reducers/shape_shift.js

@@ -21,6 +21,7 @@ export type ShapeShiftState = {
   // using Number(x) or parseInt(x) will either change it back to scientific notation or round to zero
   originCoinDepositMin: ?string,
   originCoinDepositFee: ?number,
+  shapeShiftRate: ?number,
 };
 
 // All ShapeShift actions that will have some payload
@@ -63,6 +64,7 @@ type ShapeShiftMarketInfo = {
   limit: number,
   minimum: number,
   minerFee: number,
+  rate: number,
 };
 
 type ActiveShiftInfo = {
@@ -91,6 +93,7 @@ const defaultState: ShapeShiftState = {
   originCoinDepositMax: undefined,
   originCoinDepositMin: undefined,
   originCoinDepositFee: undefined,
+  shapeShiftRate: undefined,
 };
 
 export default handleActions(
@@ -149,6 +152,7 @@ export default handleActions(
           .toFixed(10)
           .replace(/\.?0+$/, ""),
         originCoinDepositFee: marketInfo.minerFee,
+        shapeShiftRate: marketInfo.rate,
       };
     },
     [actions.GET_COIN_STATS_FAIL]: (