Feat/coinbase integration (#4012)
* Oauth2 and first view * Connect with Coinbase using mobile * Buy and Sell through Coinbase * Fix buy * Receive and send bitcoin to Coinbase account * Receive bitcoin from Coinbase to Copay * Complete user and account information. Connection errors * Improves error handler * Removes console.log * Coinbase background color. Send to Coinbase form validation * Fix send from different wallet * Send and receive using Coinbase * Pagination activity * Fix Buy and Sell * One option in the sidebar to Buy and Sell * Native balance on Coinbase homepage * Rename receive and send * Auto-close window after authenticate * Reorder * Get payment methods * Fix when token expired * Fix token expired * Integration: sell and send to Coinbase * Store pending transaction before sell * Sell flow completed * Removing files * Fix sell * Fix sell * Fix sell * Sell completed * Buy bitcoin through coinbase * Buy auto * Currency set to USD * Select payment methods. Limits * Removes payment methods from preferences * Fix signs. Tx ordered by updated. Minor fixes * Removes console.log * Improving ux-language things * Fix selectedpaymentmethod if not verified * Set error if tx not found * Price sensitivity. Minor fixes * Adds coinbase api key to gitignore * Coinbase production ready * Fix sell in usd * Bug fixes * New Sensitivity step * Refresh token with a simple click * Refresh token * Refactor * Fix auto reconnect if token expired Signed-off-by: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com> * Fix calls if token expired
This commit is contained in:
Gustavo Maximiliano Cortez
Matias Alejo Garcia
parent
b011df787c
commit
d0dbd85711
39 changed files with 2365 additions and 55 deletions
BIN
public/img/coinbase-logo-inverse.png
Normal file
BIN
public/img/coinbase-logo-inverse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
public/img/coinbase-logo.png
Normal file
BIN
public/img/coinbase-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
20
public/views/buyAndSell.html
Normal file
20
public/views/buyAndSell.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div
|
||||
class="topbar-container"
|
||||
ng-include="'views/includes/topbar.html'"
|
||||
ng-init="titleSection='Buy & Sell Bitcoin'; closeToHome = true; noColor = true">
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<ul class="no-bullet manage text-center">
|
||||
<li class="white m20t" ng-show="index.glideraEnabled">
|
||||
<a ng-click="$root.go('glidera')">
|
||||
<img src="img/glidera-logo.png" width="150">
|
||||
</a>
|
||||
</li>
|
||||
<li class="white m20t" ng-show="index.coinbaseEnabled">
|
||||
<a ng-click="$root.go('coinbase')">
|
||||
<img src="img/coinbase-logo.png" width="150">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
183
public/views/buyCoinbase.html
Normal file
183
public/views/buyCoinbase.html
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
<div
|
||||
class="topbar-container"
|
||||
ng-include="'views/includes/topbar.html'"
|
||||
ng-init="titleSection='Buy'; goBackToState = 'coinbase'; noColor = true">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content coinbase" ng-controller="buyCoinbaseController as buy">
|
||||
|
||||
<div class="onGoingProcess" ng-show="buy.loading">
|
||||
<div class="onGoingProcess-content" ng-style="{'background-color': '#2b71b1'}">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
<span>{{buy.loading}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m20t" ng-show="buy.error || index.coinbaseError" ng-click="buy.error = null">
|
||||
<div class="columns">
|
||||
<div class="box-notification">
|
||||
<ul class="no-bullet m0 size-12 text-warning">
|
||||
<li ng-repeat="err in (buy.error.errors || index.coinbaseError.errors)" ng-bind-html="err.message"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m20t"
|
||||
ng-show="index.coinbaseAccount && !buy.buyInfo && !buy.receiveInfo">
|
||||
<div class="columns">
|
||||
|
||||
<form name="buyCoinbaseForm"
|
||||
ng-submit="buy.buyRequest(index.coinbaseToken, index.coinbaseAccount)" novalidate>
|
||||
|
||||
<div ng-if="index.coinbaseToken" ng-init="buy.getPaymentMethods(index.coinbaseToken)">
|
||||
<label>Payment method</label>
|
||||
<select
|
||||
ng-model="selectedPaymentMethod.id"
|
||||
ng-options="item.id as item.name for item in buy.paymentMethods">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label>Amount
|
||||
<span
|
||||
ng-if="index.coinbaseToken"
|
||||
ng-init="buy.getPrice(index.coinbaseToken)"
|
||||
ng-show="buy.buyPrice"
|
||||
class="size-11 text-light right">
|
||||
1 BTC <i class="icon-arrow-right"></i> {{buy.buyPrice.amount}} {{buy.buyPrice.currency}}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div class="input">
|
||||
<input ng-show="!showAlternative" type="number" id="amount"
|
||||
name="amount" ng-attr-placeholder="{{'Amount in ' + (showAlternative ? 'USD' : 'BTC')}}"
|
||||
ng-minlength="0.00000001" ng-maxlength="10000000000"
|
||||
ng-model="amount" autocomplete="off" ng-disabled="buy.loading">
|
||||
|
||||
<input ng-show="showAlternative" type="number" id="fiat"
|
||||
name="fiat" ng-attr-placeholder="{{'Amount in ' + (showAlternative ? 'USD' : 'BTC')}}"
|
||||
ng-model="fiat" autocomplete="off" ng-disabled="buy.loading">
|
||||
|
||||
<a ng-show="!showAlternative" class="postfix button"
|
||||
ng-click="showAlternative = true; amount = null">BTC</a>
|
||||
<a ng-show="showAlternative" class="postfix button black"
|
||||
ng-click="showAlternative = false; fiat = null">USD</a>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-gray size-12 m10b">
|
||||
<span ng-show="!(amount || fiat)">
|
||||
Enter the amount to get the exchange rate
|
||||
</span>
|
||||
<span ng-show="!buy.buyPrice && (amount || fiat)">
|
||||
Not available
|
||||
</span>
|
||||
<span ng-show="buy.buyPrice && amount && !fiat">
|
||||
~ {{buy.buyPrice.amount * amount | currency : 'USD ' : 2}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<i class="db fi-arrow-down size-24 m10v"></i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ng-if="index.coinbaseToken"
|
||||
ng-init="buy.init(index.coinbaseTestnet)"
|
||||
ng-click="openWalletsModal(buy.otherWallets)">
|
||||
<label>Copay Wallet</label>
|
||||
<div class="input">
|
||||
<input type="text" id="address" name="address" ng-disabled="buy.selectedWalletId"
|
||||
ng-attr-placeholder="{{'Choose a wallet to receive bitcoin'}}" ng-model="buy.selectedWalletName" required>
|
||||
<a class="postfix size-12 m0 text-gray">
|
||||
<i class="icon-wallet size-18"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input m20t">
|
||||
<input class="button black expand round"
|
||||
ng-disabled="buy.loading || (!amount && !fiat) || !selectedPaymentMethod"
|
||||
ng-style="{'background-color': '#2b71b1'}"
|
||||
type="submit" value="{{'Continue'}}">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m20t row" ng-show="buy.receiveInfo && !buy.sellInfo && !buy.success">
|
||||
<div class="columns">
|
||||
<h1>Funds sent to Copay Wallet</h1>
|
||||
<p class="size-12 text-gray">
|
||||
Buy confirmed. Funds will be send soon to your selected Copay Wallet
|
||||
</p>
|
||||
<button class="m20t outline black round expand"
|
||||
ng-style="{'background-color': '#2b71b1'}"
|
||||
ng-click="$root.go('coinbase')">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="buy.buyInfo && !buy.receiveInfo && !buy.success">
|
||||
<h4 class="title">Confirm transaction</h4>
|
||||
|
||||
<ul class="no-bullet m10t size-12 white">
|
||||
<li class="line-b line-t p15">
|
||||
<span class="m10 text-normal text-bold">Amount</span>
|
||||
<span class="right text-gray">{{buy.buyInfo.amount.amount}} {{buy.buyInfo.amount.currency}}</span>
|
||||
</li>
|
||||
<li class="line-b oh p15">
|
||||
<span class="m10 text-normal text-bold">Fees</span>
|
||||
<span class="right text-gray">
|
||||
<div ng-repeat="fee in buy.buyInfo.fees">
|
||||
<b>{{fee.type}}</b> {{fee.amount.amount}} {{fee.amount.currency}}
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<li class="line-b p15">
|
||||
<span class="m10 text-normal text-bold">Subtotal</span>
|
||||
<span class="right text-gray">{{buy.buyInfo.subtotal.amount}} {{buy.buyInfo.subtotal.currency}}</span>
|
||||
</li>
|
||||
<li class="line-b p15">
|
||||
<span class="m10 text-normal text-bold">Total</span>
|
||||
<span class="right text-gray">{{buy.buyInfo.total.amount}} {{buy.buyInfo.total.currency}}</span>
|
||||
</li>
|
||||
<li class="line-b p15">
|
||||
<span class="m10 text-normal text-bold">Payout at</span>
|
||||
<span class="right text-gray">{{buy.buyInfo.payout_at | amCalendar}}</span>
|
||||
</li>
|
||||
<li class="line-b p15">
|
||||
<span class="m10 text-normal text-bold">Deposit into Copay Wallet</span>
|
||||
<span class="right text-gray">{{buy.selectedWalletName}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="columns">
|
||||
<button class="button black round expand"
|
||||
ng-style="{'background-color': '#2b71b1'}"
|
||||
ng-click="buy.confirmBuy(index.coinbaseToken, index.coinbaseAccount, buy.buyInfo)"
|
||||
ng-disabled="buy.loading">
|
||||
Buy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m20t row text-center" ng-show="buy.success">
|
||||
<div class="columns">
|
||||
<h1>Purchase initiated</h1>
|
||||
<p class="text-gray">
|
||||
Bitcoin purchase completed. Coinbase has queued the transfer to your selected Copay wallet.
|
||||
</p>
|
||||
|
||||
<button class="outline dark-gray round expand"
|
||||
ng-click="$root.go('coinbase')">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="extra-margin-bottom"></div>
|
||||
186
public/views/coinbase.html
Normal file
186
public/views/coinbase.html
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
|
||||
<div class="topbar-container">
|
||||
<nav ng-controller="topbarController as topbar"
|
||||
class="tab-bar"
|
||||
ng-style="{'background-color': '#2b71b1'}">
|
||||
<section class="left-small">
|
||||
<a class="p10"
|
||||
fast-click callback-fn="topbar.goHome()">
|
||||
<span class="text-close">{{'Close'|translate}}</span>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="right-small">
|
||||
<a class="p10" fast-click callback-fn="$root.go('preferencesCoinbase')">
|
||||
<i class="fi-widget size-24"></i>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="middle tab-bar-section">
|
||||
<h1 class="title ellipsis">
|
||||
Buy & Sell Bitcoin
|
||||
</h1>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="content coinbase p20b" ng-controller="coinbaseController as coinbase">
|
||||
|
||||
<div class="onGoingProcess" ng-show="coinbase.loading || index.coinbaseLoading">
|
||||
<div class="onGoingProcess-content" ng-style="{'background-color': '#2b71b1'}">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
<span ng-show="coinbase.loading">Connecting to Coinbase...</span>
|
||||
<span ng-show="index.coinbaseLoading">{{index.coinbaseLoading}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="index.coinbaseError || (index.coinbaseToken && !index.coinbaseAccount)">
|
||||
<div class="m20b box-notification" ng-show="index.coinbaseError">
|
||||
<ul class="no-bullet m0 text-warning size-12">
|
||||
<li ng-repeat="err in index.coinbaseError.errors" ng-bind-html="err.message"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m20b box-notification" ng-show="index.coinbaseToken && !index.coinbaseAccount">
|
||||
<div class="text-warning">
|
||||
<span>Your primary account should be a WALLET. Set your wallet account as primary and try again.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m10t text-center">
|
||||
<button
|
||||
class="dark-gray outline round tiny"
|
||||
ng-click="index.initCoinbase(index.coinbaseToken)">
|
||||
Reconnect
|
||||
</button>
|
||||
<div class="m20t size-12">
|
||||
Or go to <a class="text-gray" ng-click="$root.go('preferencesCoinbase')">Preferences</a> and log out manually.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="!index.coinbaseToken && !index.coinbaseLoading && !index.coinbaseError" class="row">
|
||||
<div class="box-notification text-center size-12 text-warning" ng-show="index.coinbaseTestnet">
|
||||
<i class="fi-info"></i>
|
||||
Testnet wallets only work with Coinbase Sandbox Accounts
|
||||
</div>
|
||||
<div class="columns" ng-init="showOauthForm = false">
|
||||
<div class="text-center m20v">
|
||||
<img src="img/coinbase-logo.png" width="200">
|
||||
</div>
|
||||
<div class="text-center small-10 small-centered columns" ng-show="!showOauthForm">
|
||||
|
||||
<p class="m20t text-gray size-12">Connect your Coinbase account to get started</p>
|
||||
|
||||
<a class="button light-gray outline round small"
|
||||
ng-click="coinbase.openAuthenticateWindow(); showOauthForm = true">
|
||||
Connect to Coinbase
|
||||
</a>
|
||||
<div>
|
||||
<a href ng-click="showOauthForm = true" class="text-gray size-12">
|
||||
Do you already have the Oauth Code?
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center" ng-show="showOauthForm">
|
||||
<div class="text-left box-notification" ng-show="coinbase.error">
|
||||
<ul class="no-bullet m0 text-warning size-12">
|
||||
<li ng-repeat="err in coinbase.error.errors" ng-bind-html="err.message"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<form name="oauthCodeForm" ng-submit="coinbase.submitOauthCode(code)" novalidate>
|
||||
<label>OAuth Code</label>
|
||||
<input type="text" ng-model="code" ng-disabled="coinbase.loading"
|
||||
ng-attr-placeholder="{{'Paste the authorization code here'}}" required>
|
||||
<input
|
||||
class="button expand round"
|
||||
ng-style="{'background-color': '#2b71b1'}"
|
||||
type="submit" value="Get started" ng-disabled="oauthCodeForm.$invalid || coinbase.loading">
|
||||
</form>
|
||||
<button class="button light-gray expand outline round"
|
||||
ng-click="showOauthForm = false; index.coinbaseError = null; coinbase.error = null">
|
||||
<i class="fi-arrow-left"></i> <span class="tu">Back</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="index.coinbaseToken && index.coinbaseAccount && !index.coinbaseError">
|
||||
|
||||
<div class="p20v text-center" ng-show="index.coinbaseAccount" ng-click="index.updateCoinbase({updateAccount: true})">
|
||||
<img src="img/coinbase-logo.png" width="100">
|
||||
</div>
|
||||
|
||||
<ul ng-show="index.coinbaseAccount" class="no-bullet m0 size-12">
|
||||
<li class="line-b line-t p15 pointer"
|
||||
ng-click="$root.go('buyCoinbase')">
|
||||
<img src="img/buy-bitcoin.svg" alt="buy bitcoin" width="30">
|
||||
<span class="m10 text-normal text-bold">Buy Bitcoin</span>
|
||||
<span class="right text-gray">
|
||||
<i class="icon-arrow-right3 size-24 right"></i>
|
||||
</span>
|
||||
</li>
|
||||
<li class="line-b p15 pointer"
|
||||
ng-click="$root.go('sellCoinbase')">
|
||||
<img src="img/sell-bitcoin.svg" alt="sell bitcoin" width="30">
|
||||
<span class="m10 text-normal text-bold">Sell Bitcoin</span>
|
||||
<span class="right text-gray">
|
||||
<i class="icon-arrow-right3 size-24 right"></i>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div ng-show="index.coinbasePendingTransactions && !index.coinbaseError">
|
||||
<h4 class="title">Activity</h4>
|
||||
<div class="m20b box-notification" ng-show="index.coinbasePendingError">
|
||||
<ul class="no-bullet m0 text-warning size-12">
|
||||
<li ng-repeat="err in index.coinbasePendingError.errors" ng-bind-html="err.message"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div ng-repeat="(id, tx) in index.coinbasePendingTransactions | orderObjectBy:'updated_at':true track by $index"
|
||||
ng-click="coinbase.openTxModal(tx)"
|
||||
class="row collapse last-transactions-content">
|
||||
<div class="large-2 medium-2 small-2 columns">
|
||||
<img src="img/bought-pending.svg" alt="bought" width="24" ng-show="(tx.type == 'buy' || (tx.to && tx.type == 'send')) && tx.status != 'completed'">
|
||||
<img src="img/bought.svg" alt="bought" width="30" ng-show="(tx.type == 'buy' || (tx.to && tx.type == 'send')) && tx.status == 'completed'">
|
||||
<img src="img/sold-pending.svg" alt="sold" width="24" ng-show="tx.from && tx.type == 'send'">
|
||||
<img src="img/sold.svg" alt="sold" width="30" ng-show="!tx.from && tx.type == 'sell' && tx.status == 'completed'">
|
||||
</div>
|
||||
|
||||
<div class="large-5 medium-5 small-5 columns">
|
||||
<div class="size-12 m5t">
|
||||
<span ng-show="tx.type == 'sell' && tx.status == 'completed'">Sold</span>
|
||||
<span ng-show="tx.type == 'buy' && tx.status == 'completed'">Bought</span>
|
||||
<span class="text-bold">
|
||||
<span ng-if="tx.type == 'sell' || (tx.type == 'send' && tx.from)">-</span>{{tx.amount.amount.replace('-','')}}
|
||||
{{tx.amount.currency}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-4 medium-4 small-4 columns text-right">
|
||||
<div ng-show="tx.error" class="m5t size-12 text-warning">
|
||||
Error
|
||||
</div>
|
||||
<div ng-show="!tx.error" class="m5t size-12 text-gray">
|
||||
<div ng-show="tx.status == 'completed'">
|
||||
<time ng-if="tx.created_at">{{tx.created_at | amTimeAgo}}</time>
|
||||
</div>
|
||||
<div ng-show="tx.status == 'pending'">
|
||||
<span class="label outline gray radius text-gray text-info" ng-if="tx.status == 'pending'">Pending</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-1 medium-1 small-1 columns text-right">
|
||||
<i class="icon-arrow-right3 size-18"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="extra-margin-bottom"></div>
|
||||
</div>
|
||||
35
public/views/coinbaseUri.html
Normal file
35
public/views/coinbaseUri.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<div
|
||||
class="topbar-container"
|
||||
ng-include="'views/includes/topbar.html'"
|
||||
ng-init="titleSection='Coinbase'; closeToHome = true">
|
||||
</div>
|
||||
|
||||
<div class="content coinbase" ng-controller="coinbaseUriController as coinbase" ng-init="coinbase.checkCode()">
|
||||
|
||||
<div class="onGoingProcess" ng-show="coinbase.loading">
|
||||
<div class="onGoingProcess-content" ng-style="{'background-color':index.backgroundColor}">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
<span ng-show="coinbase.loading">Connecting to Coinbase...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m20t">
|
||||
<div class="large-12 columns">
|
||||
<div class="text-center">
|
||||
<img src="img/coinbase-logo.png"
|
||||
ng-click="index.updateCoinbase()" width="100">
|
||||
</div>
|
||||
|
||||
<div class="m10t text-center" ng-show="coinbase.error">
|
||||
<div class="notification m10b size-12 text-warning">{{coinbase.error}}</div>
|
||||
<button class="outline dark-gray tiny round" ng-click="coinbase.submitOauthCode(coinbase.code)">Try again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="confirmTxModal" ng-controller="confirmTxController as confirm" ng-init="tx = index.confirmTx.txp">
|
||||
|
||||
<div class="confirmHead" ng-style="{'background-color':index.backgroundColor}">
|
||||
<h1 class="m0 text-center text-white size-18" translate>Confirm transaction</h1>
|
||||
<h1 class="m0 text-center text-white size-18" translate>Send bitcoin</h1>
|
||||
</div>
|
||||
<div class="p10">
|
||||
<div class="size-36">{{tx.amountStr}}</div>
|
||||
|
|
|
|||
|
|
@ -28,14 +28,13 @@
|
|||
<div translate>Create, join or import</div>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-show="index.glideraEnabled && index.isComplete">
|
||||
<a ng-click="sidebar.closeMenu(); $root.go('glidera')" class="oh">
|
||||
<li ng-show="index.isComplete && (index.glideraEnabled || index.coinbaseEnabled)">
|
||||
<a ng-click="sidebar.closeMenu(); $root.go('buyandsell')" class="oh">
|
||||
<i class="icon-arrow-right3 size-18 right m10t vm"></i>
|
||||
<i class="icon-bank size-24 icon vm"></i>
|
||||
<div class="tu text-bold">
|
||||
<div class="tu text-bold m5t">
|
||||
<span class="size-12" translate>Buy & Sell Bitcoin</span>
|
||||
</div>
|
||||
<div>Glidera</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
|
|||
16
public/views/modals/coinbase-confirmation.html
Normal file
16
public/views/modals/coinbase-confirmation.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<div class="m20tp text-center">
|
||||
<div class="row">
|
||||
<h1 class="text-center m20b p20h">Are you sure you would like to log out of your Coinbase account?</h1>
|
||||
<p class="text-gray p20h">You will need to log back in to buy or sell bitcoin in Copay.</p>
|
||||
<div class="large-6 medium-6 small-6 columns">
|
||||
<button class="button light-gray expand outline round" ng-click="cancel()">
|
||||
<i class="fi-arrow-left"></i> <span class="tu">Back</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="large-6 medium-6 small-6 columns">
|
||||
<button class="button warning expand round" ng-click="ok()">
|
||||
<span>Log out</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
107
public/views/modals/coinbase-tx-details.html
Normal file
107
public/views/modals/coinbase-tx-details.html
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<nav class="tab-bar">
|
||||
<section class="left-small">
|
||||
<a ng-click="cancel()">
|
||||
<i class="icon-arrow-left3 icon-back"></i>
|
||||
<span class="text-back">Back</span>
|
||||
</a>
|
||||
</section>
|
||||
<section class="middle tab-bar-section">
|
||||
<h1 class="title ellipsis">
|
||||
Details
|
||||
</h1>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
<div class="modal-content fix-modals-touch"
|
||||
ng-swipe-disable-mouse
|
||||
ng-swipe-right="cancel()">
|
||||
<div class="header-modal bg-gray text-center">
|
||||
<div class="p20">
|
||||
<img src="img/bought.svg" alt="bought" width="65" ng-show="(tx.type == 'buy' || (tx.type == 'send' && tx.to)) && tx.status == 'completed'">
|
||||
<img src="img/bought-pending.svg" alt="bought" width="65"
|
||||
ng-show="(tx.type == 'buy' || (tx.type == 'send' && tx.to)) && tx.status != 'completed'">
|
||||
<img src="img/sold.svg" alt="bought" width="65" ng-show="tx.type == 'sell' && tx.status == 'completed'">
|
||||
<img src="img/sold-pending.svg" alt="bought" width="65"
|
||||
ng-show="(tx.type == 'sell' || (tx.type == 'send' && tx.from)) && tx.status != 'completed'">
|
||||
</div>
|
||||
<div ng-show="tx.status == 'completed'">
|
||||
<span ng-show="tx.type == 'buy' || tx.type == 'send'">Bought</span>
|
||||
<span ng-show="tx.type == 'sell'">Sold</span>
|
||||
</div>
|
||||
<div ng-show="tx.type == 'send' && (tx.to || tx.from) && tx.status != 'completed'">
|
||||
<span ng-show="tx.to">Receiving purchased bitcoin</span>
|
||||
<span ng-show="tx.from">Sending bitcoin to sell</span>
|
||||
</div>
|
||||
<div ng-show="(tx.type == 'sell' || tx.type == 'buy') && tx.status != 'completed'">
|
||||
<span ng-show="tx.type == 'buy'">Buying bitcoin</span>
|
||||
<span ng-show="tx.type == 'sell'">Selling bitcoin</span>
|
||||
</div>
|
||||
<div class="size-24 text-bold">
|
||||
<span ng-if="tx.type == 'sell' || (tx.type == 'send' && tx.from)">-</span>{{tx.amount.amount.replace('-','')}}
|
||||
{{tx.amount.currency}}
|
||||
</div>
|
||||
<div class="label gray radius m10b">
|
||||
<span ng-if="tx.type == 'sell' || (tx.type == 'send' && tx.from)">-</span>{{tx.native_amount.amount.replace('-','')}}
|
||||
{{tx.native_amount.currency}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="m20b box-notification" ng-show="tx.error">
|
||||
<ul class="no-bullet m0 text-warning size-12">
|
||||
<li ng-repeat="err in tx.error.errors" ng-bind-html="err.message"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="no-bullet size-14">
|
||||
|
||||
<li ng-show="tx.details && tx.status != 'pending'" class="line-b p10 oh">
|
||||
<span class="text-gray">{{tx.details.title}}</span>
|
||||
<span class="right">{{tx.details.subtitle}}</span>
|
||||
</li>
|
||||
|
||||
<li class="line-b p10 oh">
|
||||
<span class="text-gray">Status</span>
|
||||
<span class="text-success right" ng-if="tx.status == 'completed'">Completed</span>
|
||||
<span class="text-info right" ng-if="tx.status == 'pending'">Pending</span>
|
||||
<span class="text-warning right" ng-if="tx.status == 'error'">Error</span>
|
||||
</li>
|
||||
|
||||
<li ng-show="tx.created_at" class="line-b p10 oh">
|
||||
<span class="text-gray">Date</span>
|
||||
<span class="right">{{tx.created_at | amCalendar}}</span>
|
||||
</li>
|
||||
|
||||
<li ng-show="tx.price_sensitivity" class="line-b p10 oh">
|
||||
<span class="text-gray">Price Sensitivity</span>
|
||||
<span class="right">{{tx.price_sensitivity.name}}</span>
|
||||
</li>
|
||||
|
||||
<li ng-show="tx.sell_price_amount" class="line-b p10 oh">
|
||||
<span class="text-gray">Sell Price</span>
|
||||
<span class="right">{{tx.sell_price_amount}} {{tx.sell_price_currency}}</span>
|
||||
</li>
|
||||
|
||||
<li ng-show="tx.description" class="line-b p10 oh">
|
||||
<span class="text-gray" ng-show="tx.from && tx.type == 'send'">Sent bitcoin from</span>
|
||||
<span class="text-gray" ng-show="tx.to && tx.type == 'send'">Receive bitcoin in</span>
|
||||
<span class="right text-bold">{{tx.description}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="row m20t p20t line-t" ng-show="tx.status == 'error'">
|
||||
<div class="columns">
|
||||
<p class="text-center size-12 text-gray">
|
||||
This action will remove the transaction.
|
||||
</p>
|
||||
<button class="button outline round dark-gray expand tiny"
|
||||
ng-click="remove(tx);"
|
||||
ng-disabled="loading">
|
||||
<i class="fi-x"></i>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="extra-margin-bottom"></div>
|
||||
</div>
|
||||
|
|
@ -7,8 +7,8 @@
|
|||
|
||||
<section class="middle tab-bar-section">
|
||||
<h1 class="title ellipsis">
|
||||
<span ng-show="type == 'BUY'">Choose your destination wallet</span>
|
||||
<span ng-show="type == 'SELL'">Choose your source wallet</span>
|
||||
<span ng-show="type == 'BUY' || type == 'RECEIVE'">Choose your destination wallet</span>
|
||||
<span ng-show="type == 'SELL' || type == 'SEND'">Choose your source wallet</span>
|
||||
</h1>
|
||||
</section>
|
||||
</nav>
|
||||
60
public/views/preferencesCoinbase.html
Normal file
60
public/views/preferencesCoinbase.html
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<div
|
||||
class="topbar-container"
|
||||
ng-include="'views/includes/topbar.html'"
|
||||
ng-init="titleSection='Preferences'; goBackToState = 'coinbase'; noColor = true">
|
||||
</div>
|
||||
|
||||
<div class="content preferences" ng-controller="preferencesCoinbaseController as coinbase">
|
||||
|
||||
<ul ng-if="index.coinbaseAccount && !index.coinbaseError" class="no-bullet m0">
|
||||
<h4 class="title m0">Account</h4>
|
||||
<li>
|
||||
<span>ID</span>
|
||||
<span class="right text-gray enable_text_select">
|
||||
{{index.coinbaseAccount.id}}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Name</span>
|
||||
<span class="right text-gray">
|
||||
{{index.coinbaseAccount.name}}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Balance</span>
|
||||
<span class="right text-gray">
|
||||
{{index.coinbaseAccount.balance.amount}} {{index.coinbaseAccount.balance.currency}}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Native Balance</span>
|
||||
<span class="right text-gray">
|
||||
{{index.coinbaseAccount.native_balance.amount}} {{index.coinbaseAccount.native_balance.currency}}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<h4 class="title m0">User Information</h4>
|
||||
<li>
|
||||
<span>ID</span>
|
||||
<span class="right text-gray enable_text_select">
|
||||
{{index.coinbaseUser.id}}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Email</span>
|
||||
<span class="right text-gray">
|
||||
{{index.coinbaseUser.email}}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="no-bullet m0">
|
||||
<h4></h4>
|
||||
<li ng-click="coinbase.revokeToken(index.coinbaseTestnet)">
|
||||
<i class="icon-arrow-right3 size-24 right text-gray"></i>
|
||||
<span class="text-warning">Log out</span>
|
||||
</li>
|
||||
</ul>
|
||||
<h4></h4>
|
||||
|
||||
</div>
|
||||
<div class="extra-margin-bottom"></div>
|
||||
|
|
@ -63,13 +63,13 @@
|
|||
<switch id="glidera-enabled" name="glideraEnabled" ng-model="glideraEnabled" class="green right"></switch>
|
||||
<div>Enable Glidera Service</div>
|
||||
</li>
|
||||
|
||||
<!-- Disabled for testnet
|
||||
<li ng-show="glideraEnabled">
|
||||
<span>Glidera Sandbox</span>
|
||||
<switch id="glidera-testnet" name="glideraTestnet" ng-model="glideraTestnet" class="green right"></switch>
|
||||
</ul>
|
||||
<h4></h4>
|
||||
<ul class="no-bullet m0">
|
||||
<li>
|
||||
<switch id="coinbase-enabled" name="coinbaseEnabled" ng-model="coinbaseEnabled" class="green right"></switch>
|
||||
<div>Enable Coinbase Service</div>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
<h4></h4>
|
||||
<ul class="no-bullet m0">
|
||||
|
|
|
|||
215
public/views/sellCoinbase.html
Normal file
215
public/views/sellCoinbase.html
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
<div
|
||||
class="topbar-container"
|
||||
ng-include="'views/includes/topbar.html'"
|
||||
ng-init="titleSection='Sell'; goBackToState = 'coinbase'; noColor = true">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content coinbase" ng-controller="sellCoinbaseController as sell">
|
||||
|
||||
<div class="onGoingProcess" ng-show="sell.loading">
|
||||
<div class="onGoingProcess-content" ng-style="{'background-color': '#2b71b1'}">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
<span>{{sell.loading}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m20t" ng-show="sell.error || index.coinbaseError" ng-click="sell.error = null">
|
||||
<div class="columns">
|
||||
<div class="box-notification">
|
||||
<ul class="no-bullet m0 size-12 text-warning">
|
||||
<li ng-repeat="err in (sell.error.errors || index.coinbaseError.errors)" ng-bind-html="err.message"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m20t"
|
||||
ng-show="index.coinbaseAccount && !sell.sellInfo && !sell.sendInfo">
|
||||
<div class="columns">
|
||||
<form
|
||||
name="sellCoinbaseForm"
|
||||
ng-submit="sell.depositFunds(index.coinbaseToken, index.coinbaseAccount)"
|
||||
novalidate>
|
||||
|
||||
|
||||
<div ng-show="!showPriceSensitivity">
|
||||
|
||||
<div
|
||||
ng-if="index.coinbaseToken"
|
||||
ng-init="sell.init(index.coinbaseTestnet)"
|
||||
ng-click="openWalletsModal(sell.otherWallets)">
|
||||
<label>Copay Wallet</label>
|
||||
<div class="input">
|
||||
<input type="text" id="address" name="address" ng-disabled="sell.selectedWalletId"
|
||||
ng-attr-placeholder="{{'Choose your source wallet'}}"
|
||||
ng-model="sell.selectedWalletName" required>
|
||||
<a class="postfix size-12 m0 text-gray">
|
||||
<i class="icon-wallet size-18"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
Amount
|
||||
<span
|
||||
ng-if="index.coinbaseToken"
|
||||
ng-init="sell.getPrice(index.coinbaseToken)"
|
||||
ng-show="sell.sellPrice"
|
||||
class="size-11 text-light right">
|
||||
1 BTC <i class="icon-arrow-right"></i> {{sell.sellPrice.amount}} {{sell.sellPrice.currency}}
|
||||
</span>
|
||||
</label>
|
||||
<div class="input">
|
||||
<input ng-show="!showAlternative" type="number" id="amount"
|
||||
name="amount" ng-attr-placeholder="{{'Amount in ' + (showAlternative ? 'USD' : 'BTC')}}"
|
||||
ng-minlength="0.00000001" ng-maxlength="10000000000"
|
||||
ng-model="amount" autocomplete="off" ng-disabled="sell.loading">
|
||||
|
||||
<input ng-show="showAlternative" type="number" id="fiat"
|
||||
name="fiat" ng-attr-placeholder="{{'Amount in ' + (showAlternative ? 'USD' : 'BTC')}}"
|
||||
ng-model="fiat" autocomplete="off" ng-disabled="sell.loading">
|
||||
|
||||
<a ng-show="!showAlternative" class="postfix button"
|
||||
ng-click="showAlternative = true; amount = null">BTC</a>
|
||||
<a ng-show="showAlternative" class="postfix button black"
|
||||
ng-click="showAlternative = false; fiat = null">USD</a>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-gray size-12 m10b">
|
||||
<span ng-show="!(amount || fiat)">
|
||||
Enter the amount to get the exchange rate
|
||||
</span>
|
||||
<span ng-show="!sell.sellPrice && (amount || fiat)">
|
||||
Not available
|
||||
</span>
|
||||
<span ng-show="sell.sellPrice && amount && !fiat">
|
||||
~ {{sell.sellPrice.amount * amount | currency : 'USD ' : 2}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<i class="db fi-arrow-down size-24 m10v"></i>
|
||||
</div>
|
||||
|
||||
<div ng-if="index.coinbaseToken" ng-init="sell.getPaymentMethods(index.coinbaseToken)">
|
||||
<label>Deposit into</label>
|
||||
<select
|
||||
ng-model="selectedPaymentMethod.id"
|
||||
ng-options="item.id as item.name for item in sell.paymentMethods">
|
||||
</select>
|
||||
</div>
|
||||
<div class="input m20t">
|
||||
<a href class="button black expand round"
|
||||
ng-disabled="sell.loading || (!amount && !fiat)"
|
||||
ng-style="{'background-color': '#2b71b1'}"
|
||||
ng-click="showPriceSensitivity = true">Continue</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="showPriceSensitivity">
|
||||
<h1>Price Sensitivity</h1>
|
||||
<p class="size-14 text-gray">
|
||||
Coinbase has not yet implemented an immediate method to sell bitcoin from a wallet. To make this sale, funds
|
||||
will be sent to your Coinbase account, and sold when Coinbase accepts the transaction (usually one
|
||||
hour).
|
||||
</p>
|
||||
<label>At what percentage lower price would you accept to sell?</label>
|
||||
<select
|
||||
ng-model="selectedPriceSensitivity"
|
||||
ng-options="item as item.name for item in priceSensitivity track by item.value">
|
||||
</select>
|
||||
<p class="size-12 text-gray">
|
||||
Estimated sale value: {{sell.sellPrice.amount * amount | currency : 'USD ' : 2}} <br>
|
||||
Still sell if price fall until:
|
||||
{{(sell.sellPrice.amount - (selectedPriceSensitivity.value / 100) * sell.sellPrice.amount) * amount | currency : 'USD ' : 2}}
|
||||
</p>
|
||||
|
||||
<div class="input m20t row">
|
||||
<div class="columns large-6 medium-6 small-6">
|
||||
<a href class="button outline dark-gray expand round" ng-click="showPriceSensitivity = false">Back</a>
|
||||
</div>
|
||||
<div class="columns large-6 medium-6 small-6">
|
||||
<input class="button black expand round"
|
||||
ng-disabled="sell.loading || (!amount && !fiat)"
|
||||
ng-style="{'background-color': '#2b71b1'}"
|
||||
type="submit" value="Confirm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m20t row" ng-show="sell.sendInfo && !sell.sellInfo && !sell.success">
|
||||
<div class="columns">
|
||||
<h1>Funds sent to Coinbase Account</h1>
|
||||
<p class="size-12 text-gray">
|
||||
The transaction is not yet confirmed, and will show as "Processing" in your Activity. The bitcoin sale will be completed automatically once it is confirmed by Coinbase.
|
||||
</p>
|
||||
<button class="m20t outline black round expand"
|
||||
ng-style="{'background-color': '#2b71b1'}"
|
||||
ng-click="$root.go('coinbase')">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="sell.sellInfo && !sell.sendInfo && !sell.success">
|
||||
<h4 class="title">Confirm transaction</h4>
|
||||
|
||||
<ul class="no-bullet m10t size-12 white">
|
||||
<li class="line-b line-t p15">
|
||||
<span class="m10 text-normal text-bold">Amount</span>
|
||||
<span class="right text-gray">{{sell.sellInfo.amount.amount}} {{sell.sellInfo.amount.currency}}</span>
|
||||
</li>
|
||||
<li class="line-b oh p15">
|
||||
<span class="m10 text-normal text-bold">Fees</span>
|
||||
<span class="right text-gray">
|
||||
<div ng-repeat="fee in sell.sellInfo.fees">
|
||||
<b>{{fee.type}}</b> {{fee.amount.amount}} {{fee.amount.currency}}
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<li class="line-b p15">
|
||||
<span class="m10 text-normal text-bold">Subtotal</span>
|
||||
<span class="right text-gray">{{sell.sellInfo.subtotal.amount}} {{sell.sellInfo.subtotal.currency}}</span>
|
||||
</li>
|
||||
<li class="line-b p15">
|
||||
<span class="m10 text-normal text-bold">Total</span>
|
||||
<span class="right text-gray">{{sell.sellInfo.total.amount}} {{sell.sellInfo.total.currency}}</span>
|
||||
</li>
|
||||
<li class="line-b p15">
|
||||
<span class="m10 text-normal text-bold">Payout at</span>
|
||||
<span class="right text-gray">{{sell.sellInfo.payout_at | amCalendar}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="columns">
|
||||
<button class="button black round expand"
|
||||
ng-style="{'background-color': '#2b71b1'}"
|
||||
ng-click="sell.confirmSell(index.coinbaseToken, index.coinbaseAccount, sell.sellInfo)"
|
||||
ng-disabled="sell.loading">
|
||||
Sell
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m20t row text-center" ng-show="sell.success">
|
||||
<div class="columns">
|
||||
<h1>Sale initiated</h1>
|
||||
<p class="text-gray">
|
||||
A transfer has been initiated to your bank account and should arrive at {{sell.success.payout_at | amCalendar}}.
|
||||
</p>
|
||||
|
||||
<button class="outline dark-gray round expand"
|
||||
ng-click="$root.go('coinbase')">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="extra-margin-bottom"></div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue