diff --git a/app/images/logo-shapeshift.svg b/app/images/logo-shapeshift.svg new file mode 100644 index 0000000000..6cdbce03bc --- /dev/null +++ b/app/images/logo-shapeshift.svg @@ -0,0 +1,147 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/images/shapeshift-dark.svg b/app/images/shapeshift-dark.svg new file mode 100644 index 0000000000..bec6eeed1d --- /dev/null +++ b/app/images/shapeshift-dark.svg @@ -0,0 +1 @@ +shapeshift_logo \ No newline at end of file diff --git a/app/includes/footer.tpl b/app/includes/footer.tpl index a32c017935..6f5c1ed73d 100644 --- a/app/includes/footer.tpl +++ b/app/includes/footer.tpl @@ -50,6 +50,8 @@

Consider using our affiliate links to...

Swap ETH/BTC/EUR/CHF via Bity.com + Swap Tokens via ShapeShift.com +

Buy a...

diff --git a/app/includes/swap-stage-1.tpl b/app/includes/swap-stage-1.tpl index 6006480d53..45c09a5c90 100644 --- a/app/includes/swap-stage-1.tpl +++ b/app/includes/swap-stage-1.tpl @@ -1,91 +1,157 @@ -
- - -
-
Current Rates
-
- - - -
-
-

- - ETH = {{bity.curRate.ETHBTC*priceTicker.ETHBTC | number: 6}} BTC -

-

- - ETH = {{bity.curRate.ETHREP*priceTicker.ETHREP | number: 6}} REP -

-
-
-

- - BTC = {{bity.curRate.BTCETH*priceTicker.BTCETH | number: 6}} ETH -

-

- - BTC = {{bity.curRate.BTCREP*priceTicker.BTCREP | number: 6}} REP -

-
- -
- +
+ + +
+
Current Rates
+
+ + + +
+ +
+
+

+ + ETH = {{bity.curRate.ETHBTC*priceTicker.ETHBTC | number: 6}} BTC +

+

+ + ETH = {{bity.curRate.ETHREP*priceTicker.ETHREP | number: 6}} REP +

+
+
+

+ + BTC = {{bity.curRate.BTCETH*priceTicker.BTCETH | number: 6}} ETH +

+

+ + BTC = {{bity.curRate.BTCREP*priceTicker.BTCREP | number: 6}} REP +

+
+
+
+
+

+ + ETH = {{shapeShiftCoinData[getOrSetRandomShapeShiftRateToken(0)]['RATES']['ETH'].rate}} {{getOrSetRandomShapeShiftRateToken(0)}} +

+

+ + ETH = {{shapeShiftCoinData[getOrSetRandomShapeShiftRateToken(1)]['RATES']['ETH'].rate}} {{getOrSetRandomShapeShiftRateToken(1)}} +

+
+
+

+ + ETH = {{shapeShiftCoinData[getOrSetRandomShapeShiftRateToken(2)]['RATES']['ETH'].rate}} {{getOrSetRandomShapeShiftRateToken(2)}} +

+

+ + ETH = {{shapeShiftCoinData[getOrSetRandomShapeShiftRateToken(3)]['RATES']['ETH'].rate}} {{getOrSetRandomShapeShiftRateToken(3)}} +

+
+
+ + +
+ +
+
+ + +
+
+
- +
+

New Feature: Exchange coins & tokens

+ +
diff --git a/app/includes/swap-stage-2.tpl b/app/includes/swap-stage-2.tpl index cf75de6bbd..4afdbe6155 100644 --- a/app/includes/swap-stage-2.tpl +++ b/app/includes/swap-stage-2.tpl @@ -1,58 +1,70 @@ -
- - - -
-
Your Information
-
- -
-
- - - - -
-
-

{{swapOrder.fromVal}} {{swapOrder.fromCoin}}

-

Amount to send

-
-
-

{{swapOrder.toVal}} {{swapOrder.toCoin}}

-

Amount to receive

-
-
-

{{swapOrder.swapRate}} {{swapOrder.swapPair}}

-

Your rate

-
-
- - - - -
+
+ + +
-
- -
- +
Your Information
+
+ + + +
+
+
- -
- - -
- Start Swap + + + + +
+
+

{{swapOrder.fromVal}} {{swapOrder.fromCoin}}

+

Amount to send

+
+
+

{{swapOrder.toVal}} {{swapOrder.toCoin}}

+

Amount to receive

+
+
+

{{swapOrder.swapRate}} {{swapOrder.swapPair}}

+

Your rate

+
+
+ + + + +
+
+
+ +
+ +
+ +
+
+ + +
+ +
+
- -
diff --git a/app/includes/swap-stage-3-shapeshift.tpl b/app/includes/swap-stage-3-shapeshift.tpl new file mode 100644 index 0000000000..48ac8b84a1 --- /dev/null +++ b/app/includes/swap-stage-3-shapeshift.tpl @@ -0,0 +1,144 @@ +
+ + + +
+
Start New Swap
+
Your Information
+
+
+
+ + + +
+
+

{{orderResult.orderId}}

+

Your reference number

+
+
+

{{orderResult.expirationFormatted}}

+

Time remaining to send

+
+
+

{{orderResult.withdrawalAmount}} {{orderResult.pair.split('_')[1].toUpperCase()}}

+

Amount to receive

+
+
+

{{swapOrder.swapRate}} {{swapOrder.swapPair}}

+

Your rate

+
+
+ + + +
+
+
+
1
+

Order Initiated

+
+
+
2
+

Waiting for your {{orderResult.inputCurrency}}...

+
+
+
3
+

{{orderResult.inputCurrency}} Received!

+
+ +
+
4
+

+ Sending your {{orderResult.outputCurrency}}
+

+
+ Waiting for confirmation... +
+
+ +
+
5
+

Order Complete

+
+
+ +
+ +
+

Your order has expired!

+
+ + + + + +
+

+ Please send + {{orderResult.depositAmount}} {{orderResult.inputCurrency}} + to address
+ {{orderResult.deposit}} +

+
+ + + +
+
+ +
+ + +
+ Warning! You are not connected to an ETH node.
+ Please use the node switcher in the top-right corner to switch to an ETH node. We do + not + support swapping ETC or Testnet ETH. +
+ +
+ @@if (site === 'mew' ) { @@include( './sendTx-content.tpl', { "site": "mew" } ) } + @@if (site === 'cx' ) { @@include( './sendTx-content.tpl', { "site": "cx" } ) } + + @@if (site === 'mew' ) { @@include( './sendTx-modal.tpl', { "site": "mew" } ) } + @@if (site === 'cx' ) { @@include( './sendTx-modal.tpl', { "site": "cx" } ) } +
+
+ + + + + +
+ +
+
+

+ Orders that take too long will have to be processed manually & and may delay the amount of time it + takes + to receive your coins. +
+ Please use the + recommended TX fees seen here. +

+ +
+ +
+ + +
+

Your shift encountered an error! Please contact support using the orange button below

+
+ + +
diff --git a/app/includes/swap-stage-3.tpl b/app/includes/swap-stage-3.tpl index 839effdb72..80f1e59cbc 100644 --- a/app/includes/swap-stage-3.tpl +++ b/app/includes/swap-stage-3.tpl @@ -1,7 +1,8 @@ -
+
- + +
Start New Swap
Your Information
diff --git a/app/includes/swap.tpl b/app/includes/swap.tpl index 98e8a3afa4..52b21d698a 100644 --- a/app/includes/swap.tpl +++ b/app/includes/swap.tpl @@ -1,20 +1,28 @@ -
+
- @@if (site === 'mew' ) { @@include( '../includes/swap-stage-1.tpl', { "site": "mew" } ) } - @@if (site === 'cx' ) { @@include( '../includes/swap-stage-1.tpl', { "site": "cx" } ) } + @@if (site === 'mew' ) { @@include( '../includes/swap-stage-1.tpl', { "site": "mew" } ) } + @@if (site === 'cx' ) { @@include( '../includes/swap-stage-1.tpl', { "site": "cx" } ) } - @@if (site === 'mew' ) { @@include( '../includes/swap-stage-2.tpl', { "site": "mew" } ) } - @@if (site === 'cx' ) { @@include( '../includes/swap-stage-2.tpl', { "site": "cx" } ) } + @@if (site === 'mew' ) { @@include( '../includes/swap-stage-2.tpl', { "site": "mew" } ) } + @@if (site === 'cx' ) { @@include( '../includes/swap-stage-2.tpl', { "site": "cx" } ) } - @@if (site === 'mew' ) { @@include( '../includes/swap-stage-3.tpl', { "site": "mew" } ) } - @@if (site === 'cx' ) { @@include( '../includes/swap-stage-3.tpl', { "site": "cx" } ) } + @@if (site === 'mew' ) { @@include( '../includes/swap-stage-3-shapeshift.tpl', { "site": "mew" } ) } + @@if (site === 'mew' ) { @@include( '../includes/swap-stage-3.tpl', { "site": "mew" } ) } + @@if (site === 'cx' ) { @@include( '../includes/swap-stage-3.tpl', { "site": "cx" } ) } -
-

Issue with your Swap? Contact support

-

Click here if link doesn't work

- -
+
+ +
+

Issue with your Swap? Contact support

+

+ Click here if link doesn't work +

+ +
+ diff --git a/app/scripts/controllers/swapCtrl.js b/app/scripts/controllers/swapCtrl.js index bb01d4668d..ad5baf9070 100644 --- a/app/scripts/controllers/swapCtrl.js +++ b/app/scripts/controllers/swapCtrl.js @@ -1,226 +1,767 @@ 'use strict'; -var swapCtrl = function($scope, $sce, walletService) { - var lStorageKey = "swapOrder"; - $scope.ajaxReq = ajaxReq; - $scope.showedMinMaxError = false; - $scope.Validator = Validator; - $scope.bity = new bity(); +let swapCtrl = function($scope, shapeShiftService) { + let lStorageKey = 'swapOrder'; + $scope.isBitySwap = true; + $scope.ajaxReq = ajaxReq; + $scope.showedMinMaxError = false; + $scope.shapeShiftCoinData = null; + $scope.originRateError = null; + $scope.destinationRateError = null; + $scope.loadedBityRates = false; + $scope.loadedShapeShiftRates = false; + $scope.Validator = Validator; + $scope.bity = new bity(); + $scope.priceTicker = { + ETHBTC: 1, + ETHREP: 1, + BTCREP: 1, + BTCETH: 1, + REPBTC: 1, + REPETH: 1 + }; + $scope.allAvailableDestinationCoins = []; + $scope.originKindCoins = ['ETH', 'BTC']; + $scope.shapeShiftWhitelistCoins = [ + 'ETC', + 'ZRX', + 'SNT', + 'ANT', + 'BAT', + 'GNT', + 'BNT', + 'REP', + 'ETH', + 'BTC' + ]; + $scope.randomRatesTokens = { + 0: null, + 1: null, + 2: null, + 3: null + }; + $scope.canShowSwap = false; + $scope.shapeShiftProgressStep = null; + $scope.shapeShiftStatus = { + status: null + }; + $scope.failedShift = false; + + $scope.navigateTo = function(url) { + let win = window.open(url, '_blank'); + win.focus(); + }; + + $scope.navigateToSend = function() { + let href = location.protocol + '//' + location.host + location.pathname; + let replaced = href + '#send-transaction'; + $scope.navigateTo(replaced); + return false; + }; + + $scope.getShapeShiftProgressClass = function(index) { + if (index === $scope.shapeShiftProgressStep) { + return 'progress-active'; + } else if (index < $scope.shapeShiftProgressStep) { + return 'progress-true'; + } else { + return ''; + } + }; + + function pickRandomProperty(obj) { + let result; + let count = 0; + for (let prop in obj) if (Math.random() < 1 / ++count) result = prop; + return result; + } + + $scope.getOrSetRandomShapeShiftRateToken = function(index) { + if (!$scope.randomRatesTokens[index]) { + while (true) { + let tokenSymbol = pickRandomProperty($scope.shapeShiftCoinData); + if (tokenSymbol !== 'ETH') { + if (!(Object.values($scope.randomRatesTokens).indexOf(tokenSymbol) > -1)) { + $scope.randomRatesTokens[index] = tokenSymbol; + return tokenSymbol; + } + } + } + } else { + return $scope.randomRatesTokens[index]; + } + }; + + $scope.getNameFromSymbol = function(symbol) { + if (symbol === 'BTC') { + return 'Bitcoin'; + } else if (symbol === 'ETH') { + return 'Ethereum'; + // shortend from Golem-Network-Tokens + } else if (symbol === 'GNT') { + return 'Golem'; + } else { + return $scope.shapeShiftCoinData[symbol].name; + } + }; + + $scope.flip = function(val) { + $scope[val] = !$scope[val]; + }; + + let timeOutMessage = + "Time has run out. If you have already sent, please wait 1 hour. If your order has not be processed after 1 hour, please press the orange 'Issue with your Swap?' button."; + + let checkCanShowRates = function() { + if ($scope.loadedShapeShiftRates && $scope.loadedBityRates) { + $scope.canShowSwap = true; + if (!$scope.$$phase) { + $scope.$apply(); + } + } + }; + + function handleBityRatesRequest() { $scope.bity.refreshRates(function() { - $scope.setOrderCoin(true, "ETH"); + if (!$scope.loadedBityRates) { + $scope.allAvailableDestinationCoins = $scope.allAvailableDestinationCoins.concat( + $scope.originKindCoins + ); + } + if (!$scope.loadedBityRates && $scope.showStage1) { + $scope.setOrderCoin(true, 'ETH'); + } + $scope.loadedBityRates = true; + checkCanShowRates(); }); - setInterval(function() { - $scope.bity.refreshRates(); - }, 30000); - $scope.priceTicker = { ETHBTC: 1, ETHREP: 1, BTCREP: 1, BTCETH: 1, REPBTC: 1, REPETH: 1 }; - $scope.availableCoins = ["ETH", "BTC", "REP"]; - var initValues = function() { - $scope.showStage1 = true; - $scope.showStage2 = $scope.showStage3Eth = $scope.showStage3Btc = false; - $scope.orderResult = null; - $scope.swapOrder = { - fromCoin: "ETH", - toCoin: "BTC", - isFrom: true, - fromVal: '', - toVal: '', - toAddress: '', - swapRate: '', - swapPair: '' - } + } + + handleBityRatesRequest(); + setInterval(function() { + handleBityRatesRequest(); + }, 30000); + + $scope.getAvailableShapeShiftCoins = function() { + shapeShiftService + .getAvailableCoins($scope.shapeShiftWhitelistCoins) + .then(function(shapeShiftCoinData) { + $scope.shapeShiftCoinData = shapeShiftCoinData; + $scope.loadedShapeShiftRates = true; + // not shapeShiftWhitelistCoins in case coin is not returned by `getcoins` + $scope.allAvailableDestinationCoins = Object.keys(shapeShiftCoinData); + $scope.originKindCoins = Object.keys(shapeShiftCoinData); + checkCanShowRates(); + }) + .catch(function(err) { + $scope.loadedShapeShiftRates = true; + checkCanShowRates(); + $scope.notifier.danger('ShapeShift swaps are currently unavailable.', 0); + }); + }; + + let swapProvider = function(originKind, destinationKind) { + let provider; + if (originKind === 'ETH' && destinationKind === 'BTC') { + provider = 'BITY'; + } else if (originKind === 'BTC' && destinationKind === 'ETH') { + provider = 'BITY'; + } else if ((originKind === 'BTC' || originKind === 'ETH') && destinationKind === 'REP') { + provider = 'BITY'; + } else { + provider = 'SHAPESHIFT'; } - $scope.verifyMinMaxValues = function() { - if($scope.swapOrder.toVal=='' || $scope.swapOrder.fromVal == '' || $scope.swapOrder.toVal=='0' || $scope.swapOrder.fromVal == '0' || $scope.showedMinMaxError ) return false; - var errors = { - priceNotLoaded: 0, - lessThanMin: 1, - greaterThanMax: 2, - noErrors: 3 + return provider; + }; + + let checkIfBitySwap = function() { + $scope.isBitySwap = swapProvider($scope.swapOrder.fromCoin, $scope.swapOrder.toCoin) === 'BITY'; + }; + + let initValues = function() { + $scope.showStage1 = true; + $scope.showStage2 = $scope.showStage3Eth = $scope.showStage3Btc = false; + $scope.showStage3ShapeShift = false; + $scope.showStage3Bity = false; + $scope.orderResult = null; + $scope.isBitySwap = true; + $scope.swapOrder = { + fromCoin: 'ETH', + toCoin: 'BTC', + isFrom: true, + fromVal: '', + toVal: '', + toAddress: '', + swapRate: '', + swapPair: '' + }; + $scope.shapeShiftStatus = { + status: null + }; + $scope.orderIsExpired = false; + $scope.failedShift = false; + $scope.getAvailableShapeShiftCoins(); + }; + + function roundNumber(rnum, rlength) { + return Math.round(rnum * Math.pow(10, rlength)) / Math.pow(10, rlength); + } + + $scope.verifyMinMaxValuesBity = function() { + if (!$scope.showStage3ShapeShift && !$scope.showStage3Bity) { + let BTCMinimum = bity.min; + let BTCMaximum = bity.max; + if ($scope.swapOrder.fromCoin === 'BTC') { + if ($scope.swapOrder.fromVal < BTCMinimum) { + $scope.originRateError = `Minimum BTC amount is ${BTCMinimum}`; + return false; } - var verify = function() { - if (!$scope.bity.priceLoaded) return errors.priceNotLoaded; - else if ($scope.swapOrder.toVal < bity.min || $scope.swapOrder.fromVal < bity.min) return errors.lessThanMin; - else if (($scope.swapOrder.toCoin == "BTC" && $scope.swapOrder.toVal > bity.max) || ($scope.swapOrder.fromCoin == "BTC" && $scope.swapOrder.fromVal > bity.max)) return errors.greaterThanMax; - else if (($scope.swapOrder.toCoin == "ETH" && $scope.swapOrder.toVal * $scope.bity.curRate['ETHBTC'] > bity.max) || ($scope.swapOrder.fromCoin == "ETH" && $scope.swapOrder.fromVal * $scope.bity.curRate['ETHBTC'] > bity.max)) return errors.greaterThanMax; - else if (($scope.swapOrder.toCoin == "REP" && $scope.swapOrder.toVal * $scope.bity.curRate['REPBTC'] > bity.max) || ($scope.swapOrder.fromCoin == "REP" && $scope.swapOrder.fromVal * $scope.bity.curRate['REPBTC'] > bity.max)) return errors.greaterThanMax; - return errors.noErrors; + if ($scope.swapOrder.fromVal > BTCMaximum) { + $scope.originRateError = `Maximum BTC amount is ${BTCMaximum}`; + return false; } - var vResult = verify(); - if (vResult == errors.noErrors) return true; - else if (vResult == errors.priceNotLoaded) return false; - else if (vResult == errors.lessThanMin || vResult == errors.greaterThanMax) { - if (!isStorageOrderExists()) { - uiFuncs.notifier.danger((globalFuncs.errorMsgs[27] + bity.max + " BTC, " + (bity.max / $scope.bity.curRate['ETHBTC']).toFixed(3) + " ETH, or " + (bity.max / $scope.bity.curRate['REPBTC']).toFixed(3) + " REP"), 2500); - $scope.showedMinMaxError = true; - } - return false; + $scope.originRateError = null; + $scope.destinationRateError = null; + return true; + } else if ($scope.swapOrder.fromCoin === 'ETH') { + let ETHMinimum = BTCMinimum / $scope.bity.curRate['ETHBTC']; + let ETHMinimumWithBuffer = ETHMinimum + 0.3 * ETHMinimum; + let ETHMinimumRounded = roundNumber(ETHMinimumWithBuffer, 3); + + let ETHMaximum = BTCMaximum / $scope.bity.curRate['ETHBTC']; + let ETHMaximumWithBuffer = ETHMaximum - 0.2 * ETHMinimum; + let ETHMaximumRounded = roundNumber(ETHMaximumWithBuffer, 3); + + if ($scope.swapOrder.fromVal < ETHMinimumRounded) { + $scope.originRateError = `Minimum ETH amount is ${ETHMinimumRounded}`; + return false; } - } - $scope.setOrderCoin = function(isFrom, coin) { - if (isFrom) $scope.swapOrder.fromCoin = coin; - else $scope.swapOrder.toCoin = coin; - if ($scope.swapOrder.fromCoin == $scope.swapOrder.toCoin) - for (var i in $scope.availableCoins) - if ($scope.availableCoins[i] != $scope.swapOrder.fromCoin) { - $scope.swapOrder.toCoin = $scope.availableCoins[i]; - break; - } - $scope.swapOrder.swapRate = $scope.bity.curRate[$scope.swapOrder.fromCoin + $scope.swapOrder.toCoin]; - $scope.swapOrder.swapPair = $scope.swapOrder.fromCoin + "/" + $scope.swapOrder.toCoin; - $scope.updateEstimate(isFrom); - $scope.dropdownFrom = $scope.dropdownTo = false; - } - $scope.updateEstimate = function(isFrom) { - if (isFrom) $scope.swapOrder.toVal = parseFloat(($scope.bity.curRate[$scope.swapOrder.fromCoin + $scope.swapOrder.toCoin] * $scope.swapOrder.fromVal).toFixed(bity.decimals)); - else $scope.swapOrder.fromVal = parseFloat(($scope.swapOrder.toVal / $scope.bity.curRate[$scope.swapOrder.fromCoin + $scope.swapOrder.toCoin]).toFixed(bity.decimals)); - $scope.swapOrder.isFrom = isFrom; - } - $scope.setFinalPrices = function() { - $scope.showedMinMaxError = false; - try { - - if (!$scope.Validator.isPositiveNumber($scope.swapOrder.fromVal) || !$scope.Validator.isPositiveNumber($scope.swapOrder.toVal)) throw globalFuncs.errorMsgs[0]; - else if (!$scope.verifyMinMaxValues()) throw globalFuncs.errorMsgs[27]; - $scope.updateEstimate($scope.swapOrder.isFrom); - $scope.showStage1 = false; - $scope.showStage2 = true; - } catch (e) { - $scope.notifier.danger(e); + if ($scope.swapOrder.fromVal > ETHMaximumRounded) { + $scope.originRateError = `Maximum ETH amount is ${ETHMaximumRounded}`; + return false; } + $scope.originRateError = null; + $scope.destinationRateError = null; + return true; + } + } + }; + $scope.verifyMinMaxValuesShapeShift = function() { + let shapeShiftPairMarketData = + $scope.shapeShiftCoinData[$scope.swapOrder.toCoin]['RATES'][$scope.swapOrder.fromCoin]; + let minimum = shapeShiftPairMarketData['min']; + let maximum = shapeShiftPairMarketData['maxLimit']; + if ($scope.swapOrder.fromVal < minimum) { + $scope.originRateError = `Minimum ${$scope.swapOrder.fromCoin} amount is ${minimum}`; + return false; + } + if ($scope.swapOrder.fromVal > maximum) { + $scope.originRateError = `Maximum ${$scope.swapOrder.fromCoin} amount is ${maximum}`; + return false; } - var getProgressBarArr = function(index, len) { - var tempArr = []; - for (var i = 0; i < len; i++) { - if (i < index) tempArr.push('progress-true'); - else if (i == index) tempArr.push('progress-active'); - else tempArr.push(''); + $scope.originRateError = null; + $scope.destinationRateError = null; + return true; + }; + + let checkInputValuesValidity = function() { + return ( + $scope.swapOrder.toVal == '' || + $scope.swapOrder.fromVal == '' || + $scope.swapOrder.toVal == '0' || + $scope.swapOrder.fromVal == '0' || + $scope.showedMinMaxError + ); + }; + + $scope.verifyMinMaxValues = function() { + if (checkInputValuesValidity() && (!$scope.showStage3ShapeShift && !$scope.showStage3Bity)) { + $scope.originRateError = null; + $scope.destinationRateError = null; + return false; + } else { + if ($scope.isBitySwap) { + return $scope.verifyMinMaxValuesBity(); + } else { + return $scope.verifyMinMaxValuesShapeShift(); + } + } + }; + + $scope.handleMatchingToAndFromCoins = function() { + for (let i in $scope.originKindCoins) + if ($scope.originKindCoins[i] !== $scope.swapOrder.fromCoin) { + $scope.swapOrder.toCoin = $scope.originKindCoins[i]; + break; + } + }; + + $scope.setOrderCoin = function(isFrom, coin) { + if ($scope.showStage1) { + if ($scope.swapOrder) { + if (isFrom) { + $scope.swapOrder.fromCoin = coin; + } else { + $scope.swapOrder.toCoin = coin; + } + if ($scope.swapOrder.fromCoin === $scope.swapOrder.toCoin) { + $scope.handleMatchingToAndFromCoins(); } - return tempArr; + checkIfBitySwap(); + $scope.swapOrder.swapPair = $scope.swapOrder.fromCoin + '/' + $scope.swapOrder.toCoin; + if ($scope.isBitySwap) { + $scope.swapOrder.swapRate = + $scope.bity.curRate[$scope.swapOrder.fromCoin + $scope.swapOrder.toCoin]; + } else { + $scope.swapOrder.swapRate = + $scope.shapeShiftCoinData[$scope.swapOrder.toCoin]['RATES'][ + $scope.swapOrder.fromCoin + ].rate; + } + $scope.updateEstimate(isFrom); + $scope.verifyMinMaxValues(); + $scope.dropdownFrom = false; + $scope.dropdownTo = false; + } } - var isStorageOrderExists = function() { - var order = globalFuncs.localStorage.getItem(lStorageKey, null); - return order && $scope.Validator.isJSON(order); + }; + + let updateEstimateBity = function(isFrom) { + let cost; + if (isFrom) { + cost = + $scope.bity.curRate[$scope.swapOrder.fromCoin + $scope.swapOrder.toCoin] * + $scope.swapOrder.fromVal; + $scope.swapOrder.toVal = parseFloat(cost.toFixed(bity.decimals)); + } else { + cost = + $scope.swapOrder.toVal / + $scope.bity.curRate[$scope.swapOrder.fromCoin + $scope.swapOrder.toCoin]; + $scope.swapOrder.fromVal = parseFloat(cost.toFixed(bity.decimals)); } - var setOrderFromStorage = function() { - var order = JSON.parse(globalFuncs.localStorage.getItem(lStorageKey, null)); - $scope.orderResult = order; - $scope.swapOrder = order.swapOrder; - processOrder(); + }; + + let updateEstimateShapeShift = function(isFrom) { + let cost; + let rate = + $scope.shapeShiftCoinData[$scope.swapOrder.toCoin]['RATES'][$scope.swapOrder.fromCoin].rate; + if (isFrom) { + cost = rate * $scope.swapOrder.fromVal; + $scope.swapOrder.toVal = parseFloat(cost.toFixed(bity.decimals)); + } else { + cost = $scope.swapOrder.toVal / rate; + $scope.swapOrder.fromVal = parseFloat(cost.toFixed(bity.decimals)); } - var saveOrderToStorage = function(order) { - globalFuncs.localStorage.setItem(lStorageKey, JSON.stringify(order)); - } - var processOrder = function() { - var orderResult = $scope.orderResult; - orderResult.progress = { - status: "OPEN", - bar: getProgressBarArr(1, 5), - showTimeRem: true, - timeRemaining: '10:00', - secsRemaining: orderResult.validFor - parseInt((new Date().getTime() - new Date(orderResult.timestamp_created).getTime()) / 1000), - pendingStatusReq: false, - checkDelay: 1000 - }; - var timeRem = setInterval(function() { - if (!orderResult) clearInterval(timeRem); - if (orderResult.progress.secsRemaining > 0) { - if (orderResult.progress.status == "OPEN") - orderResult.progress.secsRemaining--; - else - orderResult.progress.secsRemaining++; - var minutes = Math.floor(orderResult.progress.secsRemaining / 60); - var seconds = orderResult.progress.secsRemaining - minutes * 60; - minutes = minutes < 10 ? '0' + minutes : minutes; - seconds = seconds < 10 ? '0' + seconds : seconds; - orderResult.progress.timeRemaining = minutes + ':' + seconds; - if (!$scope.$$phase) $scope.$apply(); - } else { - orderResult.progress.timeRemaining = "00:00"; - clearInterval(timeRem); + }; + + $scope.updateEstimate = function(isFrom) { + if ($scope.isBitySwap) { + updateEstimateBity(isFrom); + } else { + updateEstimateShapeShift(isFrom); + } + $scope.swapOrder.isFrom = isFrom; + }; + + $scope.setFinalPrices = function() { + if ( + $scope.originRateError || + $scope.destinationRateError || + !($scope.Validator.isPositiveNumber($scope.swapOrder.toVal) && $scope.verifyMinMaxValues()) + ) { + return false; + } + $scope.showedMinMaxError = false; + try { + if ( + !$scope.Validator.isPositiveNumber($scope.swapOrder.fromVal) || + !$scope.Validator.isPositiveNumber($scope.swapOrder.toVal) + ) + throw globalFuncs.errorMsgs[0]; + if ($scope.verifyMinMaxValues()) { + $scope.updateEstimate($scope.swapOrder.isFrom); + $scope.showStage1 = false; + $scope.showStage2 = true; + } + } catch (e) { + $scope.notifier.danger(e); + } + }; + + let getProgressBarArr = function(index, len) { + let tempArr = []; + for (let i = 0; i < len; i++) { + if (i < index) tempArr.push('progress-true'); + else if (i == index) tempArr.push('progress-active'); + else tempArr.push(''); + } + return tempArr; + }; + + let isStorageOrderExists = function() { + let order = globalFuncs.localStorage.getItem(lStorageKey, null); + return order && $scope.Validator.isJSON(order); + }; + + let setOrderFromStorage = function() { + let order = JSON.parse(globalFuncs.localStorage.getItem(lStorageKey, null)); + if (order.provider === 'BITY') { + $scope.orderResult = order; + $scope.swapOrder = order.swapOrder; + processOrderBity(); + } else { + $scope.isBitySwap = swapProvider(order.inputCurrency, order.outputCurrency) === 'BITY'; + $scope.swapOrder = order; + $scope.orderResult = order; + $scope.showStage2 = false; + $scope.showStage1 = false; + $scope.showStage3ShapeShift = true; + if (order.inputCurrency === 'BTC') { + $scope.showStage3Eth = false; + $scope.showStage3Btc = true; + } else { + $scope.showStage3Eth = true; + $scope.showStage3Btc = false; + } + $scope.swapOrder.swapPair = + $scope.swapOrder.inputCurrency + '/' + $scope.swapOrder.outputCurrency; + $scope.swapOrder.swapRate = $scope.swapOrder.quotedRate; + processOrderShapeShift(); + } + }; + + let saveOrderToStorage = function(order) { + globalFuncs.localStorage.setItem(lStorageKey, JSON.stringify(order)); + }; + + let makeTransactionNotificationElement = function(url) { + return " View your transaction "; + }; + + let processOrderBity = function() { + $scope.showStage3Bity = true; + let orderResult = $scope.orderResult; + orderResult.progress = { + status: 'OPEN', + bar: getProgressBarArr(1, 5), + showTimeRem: true, + timeRemaining: '10:00', + secsRemaining: + orderResult.validFor - + parseInt( + (new Date().getTime() - new Date(orderResult.timestamp_created).getTime()) / 1000 + ), + pendingStatusReq: false, + checkDelay: 1000 + }; + let timeRem = setInterval(function() { + if (!orderResult) clearInterval(timeRem); + if (orderResult.progress.secsRemaining > 0) { + if (orderResult.progress.status == 'OPEN') { + orderResult.progress.secsRemaining--; + } else { + orderResult.progress.secsRemaining++; + } + let minutes = Math.floor(orderResult.progress.secsRemaining / 60); + let seconds = orderResult.progress.secsRemaining - minutes * 60; + minutes = minutes < 10 ? '0' + minutes : minutes; + seconds = seconds < 10 ? '0' + seconds : seconds; + orderResult.progress.timeRemaining = minutes + ':' + seconds; + if (!$scope.$$phase) { + $scope.$apply(); + } + } else { + orderResult.progress.timeRemaining = '00:00'; + clearInterval(timeRem); + } + }, 1000); + let progressCheck = setInterval(function() { + if (!orderResult) { + clearInterval(progressCheck); + } + if (!orderResult.progress.pendingStatusReq) { + orderResult.progress.pendingStatusReq = true; + $scope.bity.getStatus({ orderid: orderResult.id }, function(data) { + if (data.error) { + $scope.notifier.danger(data.msg); + } else { + data = data.data; + if (bity.validStatus.indexOf(data.status) != -1) { + orderResult.progress.status = 'RCVE'; } - }, 1000); - var progressCheck = setInterval(function() { - if (!orderResult) clearInterval(progressCheck); - if (!orderResult.progress.pendingStatusReq) { - orderResult.progress.pendingStatusReq = true; - $scope.bity.getStatus({ orderid: orderResult.id }, function(data) { - if (data.error) $scope.notifier.danger(data.msg); - else { - data = data.data; - if (bity.validStatus.indexOf(data.status) != -1) orderResult.progress.status = "RCVE"; - if (orderResult.progress.status == "OPEN" && bity.validStatus.indexOf(data.input.status) != -1) { - orderResult.progress.secsRemaining = 1; - orderResult.progress.showTimeRem = false; - orderResult.progress.status = "RCVE"; - orderResult.progress.bar = getProgressBarArr(3, 5); - } else if (orderResult.progress.status == "RCVE" && bity.validStatus.indexOf(data.output.status) != -1) { - - orderResult.progress.status = "FILL"; - orderResult.progress.bar = getProgressBarArr(5, 5); - orderResult.progress.showTimeRem = false; - var url = orderResult.output.currency == 'BTC' ? bity.btcExplorer.replace("[[txHash]]", data.output.reference) : bity.ethExplorer.replace("[[txHash]]", data.output.reference) - var bExStr = " View your transaction "; - $scope.notifier.success(globalFuncs.successMsgs[2] + data.output.reference + "
" + bExStr); - clearInterval(progressCheck); - clearInterval(timeRem); - } else if (bity.invalidStatus.indexOf(data.status) != -1) { - orderResult.progress.status = "CANC"; - orderResult.progress.bar = getProgressBarArr(-1, 5); - $scope.notifier.danger("Time has run out. If you have already sent, please wait 1 hour. If your order has not be processed after 1 hour, please press the orange 'Issue with your Swap?' button."); - orderResult.progress.secsRemaining = 0; - clearInterval(progressCheck); - } - if (!$scope.$$phase) $scope.$apply(); - } - orderResult.progress.pendingStatusReq = false; - }); + if ( + orderResult.progress.status == 'OPEN' && + bity.validStatus.indexOf(data.input.status) != -1 + ) { + orderResult.progress.secsRemaining = 1; + orderResult.progress.showTimeRem = false; + orderResult.progress.status = 'RCVE'; + orderResult.progress.bar = getProgressBarArr(3, 5); + } else if ( + orderResult.progress.status == 'RCVE' && + bity.validStatus.indexOf(data.output.status) != -1 + ) { + orderResult.progress.status = 'FILL'; + orderResult.progress.bar = getProgressBarArr(5, 5); + orderResult.progress.showTimeRem = false; + let url = orderResult.output.currency == 'BTC' + ? bity.btcExplorer.replace('[[txHash]]', data.output.reference) + : bity.ethExplorer.replace('[[txHash]]', data.output.reference); + let bExStr = makeTransactionNotificationElement(url); + $scope.notifier.success( + globalFuncs.successMsgs[2] + data.output.reference + '
' + bExStr + ); + clearInterval(progressCheck); + clearInterval(timeRem); + } else if (bity.invalidStatus.indexOf(data.status) != -1) { + orderResult.progress.status = 'CANC'; + orderResult.progress.bar = getProgressBarArr(-1, 5); + $scope.notifier.danger(timeOutMessage); + orderResult.progress.secsRemaining = 0; + clearInterval(progressCheck); } - }, orderResult.progress.checkDelay); - $scope.showStage2 = false; - if ($scope.orderResult.input.currency == 'BTC') $scope.showStage3Btc = true; - else { - $scope.parentTxConfig = { - to: ethUtil.toChecksumAddress($scope.orderResult.payment_address), - value: $scope.orderResult.input.amount, - sendMode: $scope.orderResult.input.currency == 'ETH' ? 'ether' : 'token', - tokensymbol: $scope.orderResult.input.currency == 'ETH' ? '' : $scope.orderResult.input.currency, - readOnly: true + if (!$scope.$$phase) { + $scope.$apply(); } - new Modal(document.getElementById('sendTransaction')); - $scope.showStage3Eth = true; + } + orderResult.progress.pendingStatusReq = false; + }); + } + }, orderResult.progress.checkDelay); + $scope.showStage2 = false; + if ($scope.orderResult.input.currency == 'BTC') { + $scope.showStage3Btc = true; + } else { + $scope.parentTxConfig = { + to: ethUtil.toChecksumAddress($scope.orderResult.payment_address), + value: $scope.orderResult.input.amount, + sendMode: $scope.orderResult.input.currency == 'ETH' ? 'ether' : 'token', + tokensymbol: $scope.orderResult.input.currency == 'ETH' + ? '' + : $scope.orderResult.input.currency, + readOnly: true + }; + new Modal(document.getElementById('sendTransaction')); + $scope.showStage3Eth = true; + } + }; + + let processOrder = function() { + if ($scope.isBitySwap) { + processOrderBity(); + } else { + processOrderShapeShift(); + } + }; + + let isValidAddress = function() { + return ( + ($scope.swapOrder.toCoin != 'BTC' && + $scope.Validator.isValidAddress($scope.swapOrder.toAddress)) || + ($scope.swapOrder.toCoin == 'BTC' && + $scope.Validator.isValidBTCAddress($scope.swapOrder.toAddress)) + ); + }; + + let openOrderBity = function() { + let order = { + amount: $scope.swapOrder.isFrom ? $scope.swapOrder.fromVal : $scope.swapOrder.toVal, + mode: $scope.swapOrder.isFrom ? 0 : 1, + pair: $scope.swapOrder.fromCoin + $scope.swapOrder.toCoin, + destAddress: $scope.swapOrder.toAddress + }; + $scope.bity.openOrder(order, function(data) { + if (!data.error) { + $scope.orderResult = data.data; + $scope.orderResult.swapOrder = $scope.swapOrder; + $scope.orderResult.provider = 'BITY'; + saveOrderToStorage($scope.orderResult); + if (!$scope.$$phase) { + $scope.$apply(); } + processOrder(); + $scope.orderOpenLoading = false; + } else { + $scope.notifier.danger(data.msg); + $scope.orderOpenLoading = false; + } + if (!$scope.$$phase) { + $scope.$apply(); + } + }); + }; + + let formattedTimeRemainingFromEpoch = function(endEpoch) { + let currentTimeInEpoch = new Date().getTime(); + let remainingTimeMili = endEpoch - currentTimeInEpoch; + let remainingTimeSec = remainingTimeMili / 1000; + let remainingTimeSecRounded = roundNumber(remainingTimeSec, 0); + return formattedTimeFromSeconds(remainingTimeSecRounded); + }; + + let formattedTimeFromSeconds = function(secondsRemaining) { + if (secondsRemaining <= 0) { + shapeShiftOrderStatusChecking($scope.orderResult.deposit).then(function() { + if ($scope.shapeShiftStatus.status !== 'complete') { + $scope.notifier.danger(timeOutMessage, 0); + } + }); + return '00:00'; + } + if (secondsRemaining || secondsRemaining === 0) { + let minutes = Math.floor(secondsRemaining / 60); + let seconds = secondsRemaining - minutes * 60; + let stringMinutes = minutes < 10 ? '0' + minutes : minutes; + let stringSeconds = seconds < 10 ? '0' + seconds : seconds; + return stringMinutes + ':' + stringSeconds; + } else { + throw Error('secondsRemaining must be a number'); } - $scope.openOrder = function() { + }; - if (($scope.swapOrder.toCoin != 'BTC' && $scope.Validator.isValidAddress($scope.swapOrder.toAddress)) || ($scope.swapOrder.toCoin == 'BTC' && $scope.Validator.isValidBTCAddress($scope.swapOrder.toAddress))) { - var order = { - amount: $scope.swapOrder.isFrom ? $scope.swapOrder.fromVal : $scope.swapOrder.toVal, - mode: $scope.swapOrder.isFrom ? 0 : 1, - pair: $scope.swapOrder.fromCoin + $scope.swapOrder.toCoin, - destAddress: $scope.swapOrder.toAddress + let shapeShiftIntervalDecrease = function() { + $scope.shapeShiftIntervalDecreaseTimeRem = setInterval(function() { + if ($scope.showStage3ShapeShift) { + let expirationFormatted = formattedTimeRemainingFromEpoch($scope.orderResult.expiration); + if (expirationFormatted === '00:00') { + shapeShiftOrderStatusChecking($scope.orderResult.deposit).then(function() { + if ($scope.shapeShiftStatus.status !== 'complete') { + $scope.orderIsExpired = true; + $scope.shapeShiftProgressStep = null; } - $scope.bity.openOrder(order, function(data) { - if (!data.error) { - $scope.orderResult = data.data; - $scope.orderResult.swapOrder = $scope.swapOrder; - var orderResult = $scope.orderResult; - saveOrderToStorage(orderResult); - processOrder(); - } else $scope.notifier.danger(data.msg); - if (!$scope.$$phase) $scope.$apply(); - }); - } else { - $scope.notifier.danger(globalFuncs.errorMsgs[5]); + clearInterval($scope.shapeShiftIntervalDecreaseTimeRem); + }); + } + $scope.orderResult.expirationFormatted = expirationFormatted; + if (!$scope.$$phase) { + $scope.$apply(); } + } else { + clearInterval($scope.shapeShiftIntervalDecreaseTimeRem); + } + }, 1000); + }; + + function sleep(time) { + return new Promise(resolve => setTimeout(resolve, time)); + } + + function handleShapeShiftStatusCheck(resp) { + if (resp.status === 'no_deposits') { + $scope.shapeShiftProgressStep = 1; + } else if (resp.status === 'received') { + $scope.shapeShiftProgressStep = 2; + } else if (resp.status === 'complete') { + $scope.shapeShiftProgressStep = 5; + } else if (resp.status === 'failed') { + $scope.failedShift = true; + } + } + + let shapeShiftOrderStatusChecking = function(shapeShiftAddress) { + if ($scope.showStage3ShapeShift) { + return shapeShiftService + .checkStatus(shapeShiftAddress) + .then(function(data) { + handleShapeShiftStatusCheck(data); + if (!$scope.$$phase) { + $scope.$apply(); + } + if (data.status !== 'complete') { + if (data.status !== 'failed') { + if (!$scope.orderIsExpired) { + sleep(10000).then(function() { + shapeShiftOrderStatusChecking(shapeShiftAddress); + }); + } else { + clearInterval($scope.shapeShiftIntervalDecreaseTimeRem); + } + } + } else { + $scope.shapeShiftStatus = data; + clearInterval($scope.shapeShiftIntervalDecreaseTimeRem); + $scope.orderResult.expirationFormatted = '-'; + } + }) + .catch(function(err) { + // TODO - implement error handling here; + }); } - $scope.newSwap = function() { - globalFuncs.localStorage.setItem(lStorageKey, ''); - initValues(); + }; + + $scope.getExplorerInfo = function() { + if ($scope.shapeShiftStatus.status === 'complete') { + let txHref = $scope.shapeShiftStatus.outputCurrency === 'BTC' + ? bity.btcExplorer.replace('[[txHash]]', $scope.shapeShiftStatus.transaction) + : bity.ethExplorer.replace('[[txHash]]', $scope.shapeShiftStatus.transaction); + + return { + txHref: txHref, + transaction: $scope.shapeShiftStatus.transaction + }; } - initValues(); - if (isStorageOrderExists()) { - $scope.showStage1 = false; - setOrderFromStorage(); + }; + + let processOrderShapeShift = function() { + shapeShiftIntervalDecrease(); + shapeShiftOrderStatusChecking($scope.orderResult.deposit); + }; + + let openOrderShapeShift = function() { + shapeShiftService + .sendAmount( + $scope.swapOrder.toAddress, + $scope.swapOrder.fromCoin, + $scope.swapOrder.toCoin, + $scope.swapOrder.toVal + ) + .then(function(orderInfo) { + $scope.orderOpenLoading = false; + $scope.showStage2 = false; + $scope.showStage3ShapeShift = true; + if ($scope.swapOrder.fromCoin === 'BTC') { + $scope.showStage3Eth = false; + $scope.showStage3Btc = true; + } else { + $scope.showStage3Btc = false; + $scope.showStage3Eth = true; + } + $scope.orderResult = orderInfo; + $scope.orderResult.provider = 'SHAPESHIFT'; + $scope.orderResult.inputCurrency = orderInfo.pair.split('_')[0].toUpperCase(); + $scope.orderResult.outputCurrency = orderInfo.pair.split('_')[1].toUpperCase(); + saveOrderToStorage($scope.orderResult); + processOrder(); + }) + .catch(function(err) { + // TODO - show error notification here + $scope.orderOpenLoading = false; + }); + }; + + $scope.openOrder = function() { + if (isValidAddress()) { + $scope.orderOpenLoading = true; + if ($scope.isBitySwap) { + openOrderBity(); + } else { + openOrderShapeShift(); + } + } else { + $scope.notifier.danger(globalFuncs.errorMsgs[5]); } + }; + + $scope.newSwap = function() { + globalFuncs.localStorage.setItem(lStorageKey, ''); + initValues(); + }; + + if (isStorageOrderExists()) { + $scope.showStage1 = false; + setOrderFromStorage(); + } else { + initValues(); + } }; + module.exports = swapCtrl; diff --git a/app/scripts/controllers/tabsCtrl.js b/app/scripts/controllers/tabsCtrl.js index 91c83e3450..300a4ac536 100644 --- a/app/scripts/controllers/tabsCtrl.js +++ b/app/scripts/controllers/tabsCtrl.js @@ -199,8 +199,14 @@ var tabsCtrl = function($scope, globalService, $translate, $sce) { $scope.tabClick = function(id) { globalService.tokensLoaded = false $scope.activeTab = globalService.currentTab = id; + // swap tab + if (id === 4) { + globalFuncs.localStorage.setItem('seenSwap', true) + } for (var key in $scope.tabNames) { - if ($scope.tabNames[key].id == id) location.hash = $scope.tabNames[key].url; + if ($scope.tabNames[key].id == id) { + location.hash = $scope.tabNames[key].url; + } } } diff --git a/app/scripts/directives/balanceDrtv.html b/app/scripts/directives/balanceDrtv.html index 63f2fbc747..040f3672b8 100644 --- a/app/scripts/directives/balanceDrtv.html +++ b/app/scripts/directives/balanceDrtv.html @@ -113,10 +113,21 @@
Swap BTC <-> ETH
+ +
+
Exchange coins & tokens
+
+
+ +
+ +
• • • + •
diff --git a/app/scripts/main.js b/app/scripts/main.js index c35c5a089c..eb7b084ed4 100644 --- a/app/scripts/main.js +++ b/app/scripts/main.js @@ -93,6 +93,7 @@ var walletBalanceCtrl = require('./controllers/walletBalanceCtrl'); var helpersCtrl = require('./controllers/helpersCtrl'); var globalService = require('./services/globalService'); var walletService = require('./services/walletService'); +var shapeShiftService = require('./services/shapeShiftService'); var blockiesDrtv = require('./directives/blockiesDrtv'); var addressFieldDrtv = require('./directives/addressFieldDrtv'); var QRCodeDrtv = require('./directives/QRCodeDrtv'); @@ -118,8 +119,9 @@ app.config(['$translateProvider', function($translateProvider) { app.config(['$animateProvider', function($animateProvider) { $animateProvider.classNameFilter(/^no-animate$/); }]); -app.factory('globalService', ['$http', '$httpParamSerializerJQLike', globalService]); +app.factory('globalService', ['$http', '$httpParamSerializerJQLike', '$rootScope', globalService]); app.factory('walletService', walletService); +app.factory('shapeShiftService', ['$http', shapeShiftService]); app.directive('blockieAddress', blockiesDrtv); app.directive('addressField', ['$compile', addressFieldDrtv]); app.directive('qrCode', QRCodeDrtv); @@ -136,7 +138,7 @@ app.controller('decryptWalletCtrl', ['$scope', '$sce', 'walletService', decryptW app.controller('viewWalletCtrl', ['$scope', 'walletService', viewWalletCtrl]); app.controller('txStatusCtrl', ['$scope', txStatusCtrl]); app.controller('sendTxCtrl', ['$scope', '$sce', 'walletService', '$rootScope', sendTxCtrl]); -app.controller('swapCtrl', ['$scope', '$sce', 'walletService', swapCtrl]); +app.controller('swapCtrl', ['$scope', 'shapeShiftService', swapCtrl]); app.controller('signMsgCtrl', ['$scope', '$sce', 'walletService', signMsgCtrl]); app.controller('contractsCtrl', ['$scope', '$sce', 'walletService', contractsCtrl]); app.controller('ensCtrl', ['$scope', '$sce', 'walletService', ensCtrl]); diff --git a/app/scripts/services/globalService.js b/app/scripts/services/globalService.js index 8a188db8da..a73078f7e4 100644 --- a/app/scripts/services/globalService.js +++ b/app/scripts/services/globalService.js @@ -1,6 +1,6 @@ 'use strict' -var globalService = function($http, $httpParamSerializerJQLike) { - +var globalService = function($http, $httpParamSerializerJQLike, $rootScope) { + $rootScope.seenSwap = !(globalFuncs.localStorage.getItem('seenSwap')); globalFuncs.checkAndRedirectHTTPS() ajaxReq.http = $http ajaxReq.postSerializer = $httpParamSerializerJQLike @@ -40,6 +40,7 @@ var globalService = function($http, $httpParamSerializerJQLike) { id: 4, name: "NAV_Swap", url: "swap", + badge: $rootScope.seenSwap, mew: true, cx: true }, diff --git a/app/scripts/services/shapeShiftService.js b/app/scripts/services/shapeShiftService.js new file mode 100644 index 0000000000..28f4fb9c79 --- /dev/null +++ b/app/scripts/services/shapeShiftService.js @@ -0,0 +1,188 @@ +'use strict'; + +let SOFT_MIN_CAP_ETH = 0.0001; +let SOFT_MIN_CAP_BTC = 0.00001; +let API_KEY = + '0ca1ccd50b708a3f8c02327f0caeeece06d3ddc1b0ac749a987b453ee0f4a29bdb5da2e53bc35e57fb4bb7ae1f43c93bb098c3c4716375fc1001c55d8c94c160'; +let SHAPE_SHIFT_BASE_URL = 'https://shapeshift.io'; + +var shapeShiftService = function($http) { + return { + // Status: No Deposits Received + // { + // status:"no_deposits", + // address:[address] //matches address submitted + // } + // + // Status: Received (we see a new deposit but have not finished processing it) + // { + // status:"received", + // address:[address] //matches address submitted + // } + // + // Status: Complete + // { + // status : "complete", + // address: [address], + // withdraw: [withdrawal address], + // incomingCoin: [amount deposited], + // incomingType: [coin type of deposit], + // outgoingCoin: [amount sent to withdrawal address], + // outgoingType: [coin type of withdrawal], + // transaction: [transaction id of coin sent to withdrawal address] + // } + // + // Status: Failed + // { + // status : "failed", + // error: [Text describing failure] + // } + checkStatus: function(address) { + return $http.get(`${SHAPE_SHIFT_BASE_URL}/txStat/${address}`).then(function(resp) { + return resp.data; + }); + }, + + // pair: [pair], + // withdrawal: [Withdrawal Address], //-- will match address submitted in post + // withdrawalAmount: [Withdrawal Amount], // Amount of the output coin you will receive + // deposit: [Deposit Address (or memo field if input coin is BTS / BITUSD)], + // depositAmount: [Deposit Amount], // Exact amount of input coin to send in + // expiration: [timestamp when this will expire], + // quotedRate: [the exchange rate to be honored] + // apiPubKey: [public API attached to this shift, if one was given] + sendAmount: function(withdrawal, originKind, destinationKind, destinationAmount) { + let pair = originKind.toLowerCase() + '_' + destinationKind.toLowerCase(); + return $http({ + url: `${SHAPE_SHIFT_BASE_URL}/sendamount`, + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + data: { withdrawal: withdrawal, pair: pair, amount: destinationAmount, apiKey: API_KEY } + }).then(function(resp) { + return resp.data.success; + }); + }, + + getMarketInfo: function() { + return $http.get(`${SHAPE_SHIFT_BASE_URL}/marketinfo`).then(function(resp) { + return resp.data; + }); + }, + + getPairRateFromMarketInfo: function(originKind, destinationKind, marketInfo) { + let pair = originKind.toUpperCase() + '_' + destinationKind.toUpperCase(); + let filteredArray = marketInfo.filter(function(obj) { + return obj.pair === pair; + }); + if (filteredArray.length > 0) { + let pairData = filteredArray[0]; + if (originKind === 'ETH') { + if (pairData.min < SOFT_MIN_CAP_ETH) { + pairData.min = SOFT_MIN_CAP_ETH; + } + } + if (originKind === 'BTC') { + if (pairData.min < SOFT_MIN_CAP_BTC) { + pairData.min = SOFT_MIN_CAP_BTC; + } + } + return pairData; + } else { + return { + min: 0, + limit: 0, + maxLimit: 0, + rate: 0, + pair: pair + } + } + }, + + getTimeRemaining: function(address) { + return $http.get(`${SHAPE_SHIFT_BASE_URL}/timeremaining/${address}`).then(function(resp) { + return resp.data; + }); + }, + + onlyAvailableCoins: function(coinsObj) { + let coinObjCopy = angular.copy(coinsObj); + Object.keys(coinObjCopy).forEach(function(key) { + if (!(coinObjCopy[key].status === 'available')) { + delete coinObjCopy[key]; + } + }); + return coinObjCopy; + }, + + getAvailableCoins: function(whiteListSymbolArray) { + let that = this; + return $http.get(`${SHAPE_SHIFT_BASE_URL}/getcoins`).then(function(resp) { + let availableCoins = that.onlyAvailableCoins(resp.data); + let whiteListedAvailableCoins = that.getWhiteListedCoins( + availableCoins, + whiteListSymbolArray + ); + return that + .attachRatesToCoins(whiteListedAvailableCoins, Object.keys(whiteListedAvailableCoins)) + .then(function(coinDataWithRates) { + return coinDataWithRates; + }); + }); + }, + + getWhiteListedCoins: function(coinsObj, whiteListSymbolArray) { + let filteredObj = {}; + whiteListSymbolArray.forEach(function(each) { + let coin = coinsObj[each]; + if (coin) { + filteredObj[each] = coin; + } + }); + return filteredObj; + }, + + attachRateToCoin: function(coinsObj, coinSymbol, originKind, marketInfo) { + let destinationKind = coinsObj[coinSymbol].symbol; + let pairRate = this.getPairRateFromMarketInfo(originKind, destinationKind, marketInfo); + if (!coinsObj[coinSymbol]['RATES']) { + coinsObj[coinSymbol]['RATES'] = {}; + } + coinsObj[coinSymbol]['RATES'][originKind] = pairRate; + }, + + clean: function(obj) { + for (var propName in obj) { + if (obj[propName] === null || obj[propName] === undefined) { + delete obj[propName]; + } + } + }, + + attachRatesToCoins: function(coinsObj, originKindArray) { + let defaultOrigin = ['BTC', 'ETH']; + if (!originKindArray) { + originKindArray = ['BTC', 'ETH']; + } + let that = this; + return this.getMarketInfo().then(function(marketInfo) { + Object.keys(coinsObj).forEach(function(coinSymbol) { + originKindArray.forEach(function(originKind) { + if (originKind !== coinSymbol) { + that.attachRateToCoin(coinsObj, coinSymbol, originKind, marketInfo); + that.clean(coinsObj[coinSymbol]['RATES'][originKind]); + } + }); + defaultOrigin.forEach(function(defaultOriginKind) { + if (defaultOriginKind !== coinSymbol) { + that.attachRateToCoin(coinsObj, coinSymbol, defaultOriginKind, marketInfo); + } + that.clean(coinsObj[coinSymbol]['RATES'][defaultOriginKind]); + }); + }); + return coinsObj; + }); + } + }; +}; + +module.exports = shapeShiftService; diff --git a/app/styles/bootstrap/dropdowns.less b/app/styles/bootstrap/dropdowns.less index e77e35fe74..4a785ec46e 100644 --- a/app/styles/bootstrap/dropdowns.less +++ b/app/styles/bootstrap/dropdowns.less @@ -23,7 +23,7 @@ // Prevent the focus on the dropdown toggle when closing dropdowns .dropdown-toggle { - margin-top: 0; + margin-top: -2px; font-size: @font-size-base; padding: @space-sm @space; } diff --git a/app/styles/bootstrap/forms.less b/app/styles/bootstrap/forms.less index 650fc7834f..9e6dda35a2 100644 --- a/app/styles/bootstrap/forms.less +++ b/app/styles/bootstrap/forms.less @@ -109,7 +109,7 @@ label + textarea, .form-control { display: block; width: 100%; - height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + height: 40px; // Make inputs at least the height of their button counterpart (base line-height + padding + border) padding: .25rem 1rem; font-size: @font-size-base; line-height: 2; diff --git a/app/styles/etherwallet-nav.less b/app/styles/etherwallet-nav.less index 9bcd4e0999..5155c7ed18 100644 --- a/app/styles/etherwallet-nav.less +++ b/app/styles/etherwallet-nav.less @@ -122,6 +122,22 @@ .nav-item { display: inline-block; font-size: 0; + position: relative; + .badge { + display: block; + position: absolute; + top: 0px; + right: -8px; + font-size: 9px; + letter-spacing: 1px; + font-weight: 400; + color: white; + padding: 0px 4px; + border-radius: 3px; + background-image: linear-gradient(-180deg,#ff1a1a 0%,#e60000 100%); + box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1), inset 0 0 3px 0 rgba(0,0,0,0.1); + pointer-events: none; + } &.NAV_Swap a:before { content:""; display: inline-block; diff --git a/app/styles/etherwallet-new.less b/app/styles/etherwallet-new.less index f3efdd792d..ed60438606 100644 --- a/app/styles/etherwallet-new.less +++ b/app/styles/etherwallet-new.less @@ -290,10 +290,12 @@ a.footer__pill { .swap--usd, .swap--btc, -.swap--hw { +.swap--hw, +.swap--ss { text-align:center; display: flex; padding: 1rem .15rem; + min-height: 105px; .col-sm-7 { display: flex; flex-direction: column; @@ -330,6 +332,20 @@ a.footer__pill { } } +.swap--ss { + .block--text-white(); + background-color: #3a526d; + .swap-flag--bal, + .swap-flag--price { + background-color: #5478a0; + } + .swap__logo { + position: relative; + top: 50%; + transform: translatey(-50%); + } +} + .swap-flag--bal, .swap-flag--price { background-color: @brand-success; diff --git a/app/styles/etherwallet-swap.less b/app/styles/etherwallet-swap.less index ee0b7f8f67..05a5692194 100644 --- a/app/styles/etherwallet-swap.less +++ b/app/styles/etherwallet-swap.less @@ -13,6 +13,31 @@ vertical-align: middle; } + .new-feature-banner { + display: block; + width: fit-content; + margin: auto; + margin-top: 16px; + margin-bottom: -28px; + padding: 0px 16px; + background-color: #3a526d; + border-radius: 3px; + box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1), inset 0 0 3px 0 rgba(0,0,0,0.1); + p { + display: inline-block; + color: white; + vertical-align: middle; + margin-bottom: 0px; + } + img { + display: inline-block; + height: 32px; + padding: 8px; + box-sizing: content-box; + margin-left: 16px; + } + } + .swap-rates { text-align: center; .order-panel { @@ -77,10 +102,37 @@ margin-right: 0; } .dropdown { + vertical-align: middle; + margin-top: -2px; margin-left: 0; } } + .swap-panel-input-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + .spacer { + flex-grow: 1; + @media screen and (max-width: 710px) { + flex-grow: 0; + } + } + .swap-panel-input-container-text, + .swap-panel-input { + margin: 0px; + padding: 0px 16px; + @media screen and (max-width: 710px) { + flex-grow: 1; + width: 100% + } + } + .swap-panel-input-container-text > h1 { + margin: 0px; + line-height: unset; + } + } + .swap-address { text-align: center; padding: @space*3 @space;