Merge pull request #1629 from KyberNetwork/develop

Merge Develop to Staging

.travis/build_swap.sh

@@ -9,10 +9,7 @@ if [[ "$TRAVIS_BRANCH" == "develop" ]]; then
 elif [[ "$TRAVIS_BRANCH" == "staging" ]]; then
   npm run build_auto_staging_limit_order
 elif [[ "$TRAVIS_BRANCH" == "master" ]]; then
-  npm run build_auto_ropsten
   npm run build_auto_production
-  npm run build-ropsten
-  npm run build-staging
 else
     echo "Branch is not set for auto-build."
     exit 0

env/config-env/dev.json

@@ -25,6 +25,7 @@
         "maxPercentTriggerRate": 900,
         "page_size": 50
     },
+    "autoEnableRRThreshold": 20,
     "promo_token": "PT",
     "wrapETHToken": "WETH",
     "tokens": {

env/config-env/production.json

@@ -36,6 +36,7 @@
         "maxPercentTriggerRate": 900,
         "page_size": 50
     },
+    "autoEnableRRThreshold": 20,
     "promo_token": "PT",
     "wrapETHToken": "WETH",
     "tokens": {

env/config-env/ropsten.json

@@ -26,6 +26,7 @@
         "maxPercentTriggerRate": 900,
         "page_size": 50
     },
+    "autoEnableRRThreshold": 1,
     "wrapETHToken": "WETH",
     "tokens": {
         "ETH": {

env/config-env/semi_production.json

@@ -25,6 +25,7 @@
         "maxPercentTriggerRate": 900,
         "page_size": 50
     },
+    "autoEnableRRThreshold": 20,
     "promo_token": "PT",
     "wrapETHToken": "WETH",
     "tokens": {

env/config-env/staging.json

@@ -25,6 +25,7 @@
         "maxPercentTriggerRate": 900,
         "page_size": 50
     },
+    "autoEnableRRThreshold": 1,
     "promo_token": "PT",
     "wrapETHToken": "WETH",
     "tokens": {

env/config-env/staging_limit_order.json

@@ -36,6 +36,7 @@
         "maxPercentTriggerRate": 900,
         "page_size": 50
     },
+    "autoEnableRRThreshold": 1,
     "promo_token": "PT",
     "wrapETHToken": "WETH",
     "tokens": {

lang/cn.json

@@ -307,7 +307,13 @@
     "warning": "请不要发送以太或代币到以上的任何地址.<br></br>他们都是测试网络的地址！",
     "here": "这里",
     "please_give_feedback": "Please give us <a target='_blank' href='${link}'>feedback</a> on our new features so that we can serve you better",
-    "slippage_warning": "滑点很高。为了得到更好的汇率，您可能需要减少兑换金额或分成多次兑换"
+    "slippage_warning": "滑点很高。为了得到更好的汇率，您可能需要减少兑换金额或分成多次兑换",
+    "reserve_routing": "使用储备库路由来节省gas费用",
+    "reserve_routing_used": "在该笔交易中使用储备库路由来降低gas费用",
+    "reserve_routing_explain": "通过将您的交易发送到预定义的储备库来降低gas费用。",
+    "reserve_routing_explain_2": "通过将您的交易发送到预定义的储备库来降低gas费用。这是所有小于20 ETH交易的默认选项",
+    "gas_fee": "燃料费用费是您支付给矿工（而不是支付给KyberSwap）以在区块链上进行交易的费用。燃料的价格通常反映了您希望一笔交易的开采速度有多快。",
+    "max_gas_fee": "The actual cost of the transaction is generally lower than the maximum estimated cost"
   },
   "footer": {
     "info": "信息",

lang/en.json

@@ -44,7 +44,7 @@
     "amount": "amount",
     "select_token": "Select token",
     "advanced": "Advanced",
-    "transaction_fee": "Transaction Fee",
+    "transaction_fee": "Max Transaction Fee",
     "address_balance": "Address Balance",
     "balance": "Balance",
     "password_needed_exchange": "Password is needed for every exchange transaction",
@@ -310,7 +310,13 @@
     "warning": "DO NOT send real ethers or tokens to any of the addresses above.<br></br>They\nare testnet addresses only!",
     "here": "here",
     "please_give_feedback": "Please give us <a target='_blank' href='${link}'>feedback</a> on our new features so that we can serve you better",
-    "slippage_warning": "Slippage is high. You may want to reduce your swap amount and do multiple swaps for a better rate."
+    "slippage_warning": "Slippage is high. You may want to reduce your swap amount and do multiple swaps for a better rate.",
+    "reserve_routing": "Use reserve routing to enjoy gas savings",
+    "reserve_routing_used": "Reserve routing is used in this transaction to reduce gas costs",
+    "reserve_routing_explain": "Reduce gas costs by routing your trade to predefined reserves. This is the default option for all trades",
+    "reserve_routing_explain_2": "Reduce gas costs by routing your trade to predefined reserves. This is the default option for all trades approximately <20 ETH",
+    "gas_fee": "Gas fee is the fee you pay to the miner (not to KyberSwap) to mine your transaction on blockchain. The price of gas generally reflect how fast you want a transaction mined.",
+    "max_gas_fee": "The actual cost of the transaction is generally lower than the maximum estimated cost"
   },
   "footer": {
     "info": "Info",

lang/kr.json

@@ -308,7 +308,13 @@
     "warning": "위의 주소 있는 주소들에게 실제 이더나 토큰을 보내지 마십시오. <br> </ br> 그들은 testnet 주소입니다!",
     "here": "여기",
     "please_give_feedback": "새로운 기능에 대한 <a target='_blank' href='${link}'>피드백</a>을 주시면, 서비스 개선에 도움이 됩니다. 감사합니다.",
-    "slippage_warning": "슬리피지(손해)가 높습니다. 더 나은 비율을 갖기 위해 교환할 양을 줄이거나 여러번에 나눠서 교환하는 게 좋습니다."
+    "slippage_warning": "슬리피지(손해)가 높습니다. 더 나은 비율을 갖기 위해 교환할 양을 줄이거나 여러번에 나눠서 교환하는 게 좋습니다.",
+    "reserve_routing": "가스비 절약을 위해 리저브 라우팅을 사용하세요",
+    "reserve_routing_used": "가스비 절감을 위해 당 거래에서는 리저브 라우팅이 사용됩니다.",
+    "reserve_routing_explain": "미리 지정된 리저브로 거래를 라우팅하여 가스비를 절감하세요.",
+    "reserve_routing_explain_2": "미리 지정된 리저브로 거래를 라우팅하여 가스비를 절감하세요. 20이더 미만의 거래는 해당 옵션이 기본적으로 적용됩니다.",
+    "gas_fee": "가스비는 블록체인에서 거래를 채굴하기 위해 (카이버 스왑이 아닌) 채굴자에게 지불되는 비용입니다. 보통 가스의 가격은 원하는 거래 속도에 비례하여 반영됩니다.",
+    "max_gas_fee": "The actual cost of the transaction is generally lower than the maximum estimated cost"
   },
   "footer": {
     "info": "정보",

lang/ru.json

@@ -306,7 +306,13 @@
     "warning": "НЕ отправляйте реальный ETH на любой из адресов выше.<br></br>Они\nявляются исключительно тестовыми!",
     "here": "здесь",
     "please_give_feedback": "Please give us <a target='_blank' href='${link}'>feedback</a> on our new features so that we can serve you better",
-    "slippage_warning": "Slippage is high. You may want to reduce your swap amount and do multiple swaps for a better rate."
+    "slippage_warning": "Slippage is high. You may want to reduce your swap amount and do multiple swaps for a better rate.",
+    "reserve_routing": "Use reserve routing to enjoy gas savings",
+    "reserve_routing_used": "Reserve routing is used in this transaction to reduce gas costs",
+    "reserve_routing_explain": "Reduce gas costs by routing your trade to predefined reserves. This is the default option for all trades",
+    "reserve_routing_explain_2": "Reduce gas costs by routing your trade to predefined reserves. This is the default option for all trades <20 ETH",
+    "gas_fee": "Gas fee is the fee you pay to the miner (not to KyberSwap) to mine your transaction on blockchain. The price of gas generally reflect how fast you want a transaction mined.",
+    "max_gas_fee": "The actual cost of the transaction is generally lower than the maximum estimated cost"
   },
   "footer": {
     "info": "Информация",

lang/vi.json

@@ -307,7 +307,13 @@
     "warning": "Không nên chuyển bất kỳ ether nào cho các địa chỉ phía trên.</br>Các địa\nchỉ trên chỉ sử dụng trong môi trường thử nghiệm và chúng tôi có khả năng không\nsử dụng trong phiên bản chính thức.",
     "here": "tại đây",
     "please_give_feedback": "Hãy cho chúng tôi <a target='_blank' href='${link}'>ý kiến phản hồi</a> về những tính năng mới để chúng tôi có thể cải thiện chất lượng dịch vụ tốt hơn. Cảm ơn.",
-    "slippage_warning": "Mức trượt giá đang cao. Bạn có thể giảm lượng giao dịch hoặc chia nhỏ lệnh của bạn để có tỉ giá tốt hơn"
+    "slippage_warning": "Mức trượt giá đang cao. Bạn có thể giảm lượng giao dịch hoặc chia nhỏ lệnh của bạn để có tỉ giá tốt hơn",
+    "reserve_routing": "Sử dụng Reserve routing để giảm thiểu phí gas",
+    "reserve_routing_used": "Reserve routing is used in this transaction to reduce gas costs",
+    "reserve_routing_explain": "Giảm phí gas bằng cách giao dịch với các quỹ được chọn trước. Đây là tùy chọn mặc định cho tất cả các giao dịch",
+    "reserve_routing_explain_2": "Giảm phí gas bằng cách giao dịch với các quỹ được chọn trước. Đây là tùy chọn mặc định cho các giao dịch < 20 ETH",
+    "gas_fee": "Phí gas là phí bạn phải trả cho miner (không phải KyberSwap) để họ xác nhận giao dịch của bạn trên blockchain. Phí gas bạn chọn sẽ ảnh hưởng đến tốc độ giao dịch.",
+    "max_gas_fee": "The actual cost of the transaction is generally lower than the maximum estimated cost"
   },
   "footer": {
     "info": "Thông tin",

src/assets/css/advance_config.scss

@@ -50,18 +50,6 @@
     width: 0;
     height: 0;    
   }
-
-  .__react_component_tooltip{
-    z-index: 1 !important;
-    background-color: #FFCAD1;
-    width: 100% !important;
-    max-width: 200px;
-
-    >div {
-      color: #222;
-      font-size: 11px;
-    }
-  }
 
   &__radio {
     position: absolute;
@@ -159,6 +147,12 @@
     color: $grey-darker;
   }
 
+  &__checkbox {
+    border-top: 1px solid transparent;
+    margin-top: 15px;
+    padding-top: 13px;
+  }
+
   @include screen-max-width(mid-small) {
     &__option {
       &-container--rate {

src/assets/css/commons/commons.scss

@@ -302,6 +302,88 @@
       opacity: 0.7;
     }
   }
+
+  &__checkbox {
+    font-size: 12px;
+    font-weight: 400;
+    cursor: pointer;
+    margin-bottom: 10px;
+    padding-left: 20px;
+    position: relative;
+    text-align: left;
+    display: block;
+
+    &-input {
+      visibility: hidden;
+      pointer-events: none;
+      margin: 0;
+      width: 0;
+      height: 0;
+
+      &:checked {
+        ~ .common__checkbox-checkmark {
+          border: solid 1px $text-orange;
+          background-color: $text-orange;
+
+          &::after {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &-checkmark {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 12px;
+      height: 12px;
+      border: solid 1px #d1d8dd;
+      border-radius: 2px;
+      transform: translateY(-50%);
+      transition: all .3s;
+
+      &::after {
+        content: '';
+        display: block;
+        border-width: 0 1px 1px 0;
+        border-style: solid;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        opacity: 0;
+        width: 4px;
+        height: 7px;
+        transform: translateX(-50%) translateY(-65%) rotate(45deg);
+      }
+    }
+  }
+
+  &__info-icon {
+    position: relative;
+    top: 2px;
+    left: 7px;
+
+    img {
+      vertical-align: initial;
+    }
+  }
+
+  &__tooltip {
+    opacity: 1;
+    z-index: 1 !important;
+    width: 100% !important;
+    max-width: 250px;
+    box-shadow: 0 0 3px $grey;
+    height: auto;
+    white-space: initial;
+    padding: 10px 16px;
+
+    > div {
+      color: #222;
+      font-size: 11px;
+    }
+  }
 }
 
 .text-center {

src/assets/css/modals.scss

@@ -222,20 +222,22 @@ $divider-color: darken($title-background-color, 5);
       font-size: 14px;
       line-height: 1.7;
     }
-    .gas-configed{
+    .gas-configed {
       max-width: 100%;
       white-space: nowrap;
       text-align: left;
       font-size: 0.8rem;
       margin-top: 1rem;
       margin-bottom: 1rem;
+
       >div{
         &:first-child{
           font-size: 14px;
           font-weight: 400;
           margin-bottom: 7px;
         }
       }
+
       .total-fee {
         font-size: 16px;
         color: #141927;
@@ -259,6 +261,30 @@ $divider-color: darken($title-background-color, 5);
           }
         }
       }
+
+      .fee-info {
+        font-size: 13px;
+        font-weight: 400;
+        padding: 5px 15px 5px 35px;
+        color: #4e9336;
+        background-color: #e0f4e2;
+        border-radius: 3px;
+        margin-top: 20px;
+        display: inline-block;
+        white-space: initial;
+        position: relative;
+
+        &::before {
+          content: '';
+          display: inline-block;
+          position: absolute;
+          top: 4px;
+          left: 12px;
+          width: 16px;
+          height: 16px;
+          background-image: url($image-path + 'icons/saving.svg');
+        }
+      }
     }
 
     .tx-fee-warning {

src/assets/css/themes/_dark.scss

@@ -290,5 +290,11 @@
       }
     }
   }
+
+  .theme__checkbox {
+    .common__checkbox-checkmark::after {
+      border-color: black;
+    }
+  }
 }
 

src/assets/css/themes/_light.scss

@@ -287,5 +287,11 @@
       }
     }
   }
+
+  .theme__checkbox {
+    .common__checkbox-checkmark::after {
+      border-color: white;
+    }
+  }
 }
 

src/js/actions/exchangeActions.js

@@ -351,3 +351,10 @@ export function setPlatformFee(fee) {
     payload: fee
   }
 }
+
+export function setReserveRoutingEnabled(isEnabled, isTouched = false) {
+  return {
+    type: "EXCHANGE.SET_RESERVE_ROUTING_ENABLED",
+    payload: { isEnabled, isTouched }
+  }
+}

src/js/components/CommonElement/FeeDetail.js

@@ -1,16 +1,26 @@
 import React from "react"
 import { calculateGasFee } from "../../utils/converter"
+import ReactTooltip from "react-tooltip";
 
 const FeeDetail = (props) => {
   const totalGas = +calculateGasFee(props.gasPrice, props.gas);
 
   return (
     <div className="gas-configed theme__text-4">
-      <div className={"title-fee theme__text-5"}>{props.translate("transaction.transaction_fee") || 'Transaction Fee'}</div>
+      <div className={"title-fee theme__text-5"}>
+        {props.translate("transaction.transaction_fee") || 'Max Transaction Fee'}
+        <span className="common__info-icon" data-tip={props.translate("info.max_gas_fee")} data-for="max-gas-info">
+          <img src={require('../../../assets/img/common/blue-indicator.svg')} alt=""/>
+        </span>
+        <ReactTooltip className="common__tooltip" place="top" id="max-gas-info" type="light"/>
+      </div>
       <div className={"total-fee"}>
         <span className={"total-fee__number theme__text"}>{totalGas.toString()} ETH</span>
         <span className={"total-fee__formula theme__text-6"}>{props.gasPrice} Gwei (Gas Price) * {props.gas} (Gas Limit)</span>
       </div>
+      {props.reserveRoutingEnabled && (
+        <div className="fee-info">{props.translate("info.reserve_routing_used")}</div>
+      )}
     </div>
   )
 }