coinbase page html
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
@ -0,0 +1,89 @@
|
||||||
|
<ion-header>
|
||||||
|
<ion-navbar>
|
||||||
|
</ion-navbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
<div *ngIf="!accessToken">
|
||||||
|
<div class="heading">
|
||||||
|
<img src="img/coinbase-logo.png">
|
||||||
|
<div class="integration-onboarding-description" *ngIf="!showOauthForm">Coinbase's exchange service is available in 33 countries, and can take 3-5 days to buy or sell bitcoin.</div>
|
||||||
|
<div class="integration-onboarding-description" *ngIf="showOauthForm">If you have trouble, contact Coinbase support for direct assistance.</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!showOauthForm">
|
||||||
|
<button ion-button block (click)="openAuthenticateWindow()">Connect Coinbase Account</button>
|
||||||
|
<button ion-button block outline (click)="openSupportWindow()">Sign Up for Coinbase</button>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="showOauthForm" class="integration-onboarding-oauthform">
|
||||||
|
<form [formGroup]="oauthCodeForm" (ngSubmit)="submitOauthCode(oauthCodeForm.value.code)">
|
||||||
|
<ion-item>
|
||||||
|
<ion-label stacked translate>OAuth Code</ion-label>
|
||||||
|
<ion-input type="text" formControlName="code" [value]="oauthCodeForm.value.code" placeholder="{{'Enter OAuth Code'}}" required></ion-input>
|
||||||
|
</ion-item>
|
||||||
|
<button ion-button block type="submit" [disabled]="!oauthCodeForm.valid">Connect Coinbase Account</button>
|
||||||
|
</form>
|
||||||
|
<button ion-button block outline (click)="openSupportWindow()">Coinbase Support</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="accessToken">
|
||||||
|
<div class="heading" (click)="updateTransactions()">
|
||||||
|
<img src="assets/img/coinbase-logo.png">
|
||||||
|
</div>
|
||||||
|
<ion-card>
|
||||||
|
<ion-list>
|
||||||
|
<button ion-item (click)="goToBuyCoinbasePage()">
|
||||||
|
<ion-icon item-start>
|
||||||
|
<img src="assets/img/buy-bitcoin.svg" alt="buy bitcoin" class="item-img-buy">
|
||||||
|
</ion-icon>
|
||||||
|
<ion-label>Buy Bitcoin</ion-label>
|
||||||
|
<ion-note *ngIf="buyPrice" item-end>
|
||||||
|
{{buyPrice.amount|currency:'$':2}} {{buyPrice.currency}}/BTC
|
||||||
|
</ion-note>
|
||||||
|
</button>
|
||||||
|
<button ion-item (click)="goToSellCoinbasePage()">
|
||||||
|
<ion-icon item-start>
|
||||||
|
<img src="assets/img/sell-bitcoin.svg" alt="sell bitcoin" class="item-img-sell">
|
||||||
|
</ion-icon>
|
||||||
|
<ion-label>Sell Bitcoin</ion-label>
|
||||||
|
<ion-note *ngIf="sellPrice" item-end>
|
||||||
|
{{sellPrice.amount|currency:'$':2}} {{sellPrice.currency}}/BTC
|
||||||
|
</ion-note>
|
||||||
|
</button>
|
||||||
|
</ion-list>
|
||||||
|
</ion-card>
|
||||||
|
<ion-card>
|
||||||
|
<ion-card-header (click)="updateTransactions()">Activity</ion-card-header>
|
||||||
|
<div *ngIf="pendingTransactions.data && !error">
|
||||||
|
<ion-list *ngFor="let tx in pendingTransactions.data | keys">
|
||||||
|
<button ion-item (click)="openTxModal(tx)">
|
||||||
|
<ion-icon item-start>
|
||||||
|
<img src="img/assets/bought-pending.svg" alt="bought" *ngIf="(tx.type == 'buy' || (tx.to && tx.type == 'send')) && tx.status != 'completed'">
|
||||||
|
<img src="img/assets/bought.svg" alt="bought" *ngIf="(tx.type == 'buy' || (tx.to && tx.type == 'send')) && tx.status == 'completed'">
|
||||||
|
<img src="img/assets/sold-pending.svg" alt="sold" *ngIf="tx.from && tx.type == 'send'">
|
||||||
|
<img src="img/assets/sold.svg" alt="sold" *ngIf="!tx.from && tx.type == 'sell' && tx.status == 'completed'">
|
||||||
|
</ion-icon>
|
||||||
|
<div class="action">
|
||||||
|
<div class="assertive" *ngIf="tx.error || tx.status == 'error'">
|
||||||
|
Error
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!tx.error">
|
||||||
|
<div *ngIf="tx.status == 'completed'">
|
||||||
|
<time *ngIf="tx.created_at">{{tx.created_at | amTimeAgo}}</time>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="tx.status == 'pending'">
|
||||||
|
<span *ngIf="tx.status == 'pending'">Pending</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="details">
|
||||||
|
<span *ngIf="tx.type == 'sell' && tx.status == 'completed'">Sold</span>
|
||||||
|
<span *ngIf="tx.type == 'send' && tx.to && tx.status == 'completed'">Bought</span>
|
||||||
|
<span *ngIf="tx.type == 'sell' || (tx.type == 'send' && tx.from)">-</span>{{tx.amount.amount.replace('-','')}}
|
||||||
|
{{tx.amount.currency}}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</ion-list>
|
||||||
|
</div>
|
||||||
|
</ion-card>
|
||||||
|
</div>
|
||||||
|
</ion-content>
|
|
@ -11,6 +11,7 @@ import { OnGoingProcessProvider } from '../../../providers/on-going-process/on-g
|
||||||
|
|
||||||
//pages
|
//pages
|
||||||
import { CoinbaseTxDetailsPage } from './coinbase-tx-details/coinbase-tx-details';
|
import { CoinbaseTxDetailsPage } from './coinbase-tx-details/coinbase-tx-details';
|
||||||
|
import { AmountPage } from '../../send/amount/amount';
|
||||||
|
|
||||||
import * as _ from 'lodash';
|
import * as _ from 'lodash';
|
||||||
|
|
||||||
|
@ -180,4 +181,12 @@ export class CoinbasePage {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public goToBuyGlideraPage(): void {
|
||||||
|
this.navCtrl.push(AmountPage, { nextPage: 'BuyCoinbasePage', currency: this.currency, coin: 'btc', fixedUnit: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
public goToSellGlideraPage(): void {
|
||||||
|
this.navCtrl.push(AmountPage, { nextPage: 'SellCoinbasePage', currency: this.currency, coin: 'btc', fixedUnit: true })
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<button ion-item *ngIf="account.status.userCanBuy" (click)="goToBuyGlideraPage()">
|
<button ion-item *ngIf="account.status.userCanBuy" (click)="goToBuyGlideraPage()">
|
||||||
<ion-icon item-start>
|
<ion-icon item-start>
|
||||||
<img src="assets/img/glidera/buy-bitcoin.svg" alt="buy bitcoin" class="item-img-buy">
|
<img src="assets/img/buy-bitcoin.svg" alt="buy bitcoin" class="item-img-buy">
|
||||||
</ion-icon>
|
</ion-icon>
|
||||||
<ion-label>Buy Bitcoin</ion-label>
|
<ion-label>Buy Bitcoin</ion-label>
|
||||||
<ion-note *ngIf="account.price && account.price.buy" item-end>
|
<ion-note *ngIf="account.price && account.price.buy" item-end>
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
</button>
|
</button>
|
||||||
<button ion-item *ngIf="account.status.userCanSell" (click)="goToSellGlideraPage()">
|
<button ion-item *ngIf="account.status.userCanSell" (click)="goToSellGlideraPage()">
|
||||||
<ion-icon item-start>
|
<ion-icon item-start>
|
||||||
<img src="assets/img/glidera/sell-bitcoin.svg" alt="buy bitcoin" class="item-img-sell">
|
<img src="assets/img/sell-bitcoin.svg" alt="sell bitcoin" class="item-img-sell">
|
||||||
</ion-icon>
|
</ion-icon>
|
||||||
<ion-label>Sell Bitcoin</ion-label>
|
<ion-label>Sell Bitcoin</ion-label>
|
||||||
<ion-note *ngIf="account.price && account.price.sell" item-end>
|
<ion-note *ngIf="account.price && account.price.sell" item-end>
|
||||||
|
@ -65,10 +65,10 @@
|
||||||
<ion-list *ngFor="let tx of account.txs">
|
<ion-list *ngFor="let tx of account.txs">
|
||||||
<button ion-item (click)="openTxModal(tx)" *ngIf="account.txs && account.txs.length > 0">
|
<button ion-item (click)="openTxModal(tx)" *ngIf="account.txs && account.txs.length > 0">
|
||||||
<ion-icon item-start>
|
<ion-icon item-start>
|
||||||
<img src="assets/img/glidera/bought.svg" alt="bought" width="39" *ngIf="tx.type == 'BUY' && tx.status == 'COMPLETE'">
|
<img src="assets/img/bought.svg" alt="bought" width="39" *ngIf="tx.type == 'BUY' && tx.status == 'COMPLETE'">
|
||||||
<img src="assets/img/glidera/bought-pending.svg" alt="bought" width="33" *ngIf="tx.type == 'BUY' && tx.status == 'PROCESSING'">
|
<img src="assets/img/bought-pending.svg" alt="bought" width="33" *ngIf="tx.type == 'BUY' && tx.status == 'PROCESSING'">
|
||||||
<img src="assets/img/glidera/sold.svg" alt="bought" width="39" *ngIf="tx.type == 'SELL' && tx.status == 'COMPLETE'">
|
<img src="assets/img/sold.svg" alt="bought" width="39" *ngIf="tx.type == 'SELL' && tx.status == 'COMPLETE'">
|
||||||
<img src="assets/img/glidera/sold-pending.svg" alt="bought" width="33" *ngIf="tx.type == 'SELL' && tx.status == 'PROCESSING'">
|
<img src="assets/img/sold-pending.svg" alt="bought" width="33" *ngIf="tx.type == 'SELL' && tx.status == 'PROCESSING'">
|
||||||
</ion-icon>
|
</ion-icon>
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<div *ngIf="tx.status == 'COMPLETE'">
|
<div *ngIf="tx.status == 'COMPLETE'">
|
||||||
|
|