Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
B
Breeze
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
3
Issues
3
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
DeStream-public
Breeze
Commits
74d1abc2
Commit
74d1abc2
authored
Sep 27, 2017
by
dev0tion
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Show confirmations
parent
aedf0226
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
202 additions
and
37 deletions
+202
-37
transaction-info.ts
Breeze.UI/src/app/shared/classes/transaction-info.ts
+20
-0
dashboard.component.html
Breeze.UI/src/app/wallet/dashboard/dashboard.component.html
+14
-7
dashboard.component.ts
Breeze.UI/src/app/wallet/dashboard/dashboard.component.ts
+36
-5
history.component.html
Breeze.UI/src/app/wallet/history/history.component.html
+13
-6
history.component.ts
Breeze.UI/src/app/wallet/history/history.component.ts
+34
-3
transaction-details.component.html
...et/transaction-details/transaction-details.component.html
+17
-11
transaction-details.component.ts
...llet/transaction-details/transaction-details.component.ts
+68
-5
No files found.
Breeze.UI/src/app/shared/classes/transaction-info.ts
0 → 100644
View file @
74d1abc2
export
class
TransactionInfo
{
constructor
(
transactionType
:
string
,
transactionId
:
string
,
transactionAmount
:
number
,
transactionAddress
:
any
,
transactionFee
:
number
,
transactionConfirmedInBlock
:
number
,
transactionTimestamp
:
number
)
{
this
.
transactionType
=
transactionType
;
this
.
transactionId
=
transactionId
;
this
.
transactionAmount
=
transactionAmount
;
this
.
transactionAddress
=
transactionAddress
;
this
.
transactionFee
=
transactionFee
;
this
.
transactionConfirmedInBlock
=
transactionConfirmedInBlock
;
this
.
transactionTimestamp
=
transactionTimestamp
;
}
public
transactionType
:
string
;
public
transactionId
:
string
;
public
transactionAmount
:
number
;
public
transactionAddress
:
string
;
public
transactionFee
:
number
;
public
transactionConfirmedInBlock
?:
number
;
public
transactionTimestamp
:
number
;
}
Breeze.UI/src/app/wallet/dashboard/dashboard.component.html
View file @
74d1abc2
...
...
@@ -9,7 +9,7 @@
<h5>
Active balance
</h5>
<p
class=
"lead"
>
<!--<strong><span class="h2">29</span>.76500293</strong>-->
<strong>
{{confirmedBalance | coinNotation }}
</strong>
<strong>
{{
confirmedBalance | coinNotation }}
</strong>
<!--<small class="text-uppercase">btc</small>-->
</p>
</div>
...
...
@@ -25,7 +25,7 @@
<div
class=
"col-xs-12 col-md-4 text-left"
>
<h5>
Unconfirmed balance
</h5>
<p
class=
"lead"
>
<strong>
{{unconfirmedBalance | coinNotation }}
</strong>
<strong>
{{
unconfirmedBalance | coinNotation }}
</strong>
</p>
</div>
<!-- /col-->
...
...
@@ -46,14 +46,21 @@
<!-- TRANSACTIONS -->
<section
id=
"transaction"
class=
"container"
>
<h5>
Latest Transactions
</h5>
<div
*
ngIf=
"transaction
s
; else noTransactions"
>
<div
*
ngFor=
"let transaction of transaction
s
; let i=index"
>
<div
*
ngIf=
"transaction
Array
; else noTransactions"
>
<div
*
ngFor=
"let transaction of transaction
Array
; let i=index"
>
<div
class=
"card"
*
ngIf=
"i<3"
(
click
)="
openTransactionDetailDialog
(
transaction
)"
>
<div
class=
"card-block text-nowrap"
>
<ul
class=
"list-inline row"
>
<li
class=
"list-inline-item hidden-xs-down col-3 text-uppercase align-bottom"
>
{{ transaction.type }}
</li>
<li
class=
"list-inline-item col-4 amount text-left align-baseline"
>
<!--<span class="text-success">+</span>-->
{{ transaction.amount | coinNotation }}
<!--<small class="text-uppercase">btc</small> <span class="badge badge-danger text-capitalize">unconfirmed</span>-->
</li>
<li
class=
"list-inline-item col text-right align-baseline transactionDate"
>
{{ transaction.timestamp * 1000 | date:'medium' }}
</li>
<li
class=
"list-inline-item hidden-xs-down col-3 text-uppercase align-bottom"
>
{{ transaction.transactionType }}
</li>
<li
class=
"list-inline-item col-4 amount text-left align-baseline"
>
<span
*
ngIf=
"transaction.transactionType == 'received'"
class=
"text-success"
>
+
</span>
<span
*
ngIf=
"transaction.transactionType == 'sent'"
class=
"text-danger"
>
-
</span>
{{ transaction.transactionAmount | coinNotation }}
<!--<small class="text-uppercase">btc</small>-->
<span
*
ngIf=
"transaction.transactionConfirmedInBlock"
class=
"badge badge-success text-capitalize"
>
Confirmed
</span>
<span
*
ngIf=
"!transaction.transactionConfirmedInBlock"
class=
"badge badge-warning text-capitalize"
>
Pending
</span>
</li>
<li
class=
"list-inline-item col text-right align-baseline transactionDate"
>
{{ transaction.transactionTimestamp * 1000 | date:'medium' }}
</li>
</ul>
</div>
</div>
...
...
Breeze.UI/src/app/wallet/dashboard/dashboard.component.ts
View file @
74d1abc2
...
...
@@ -4,6 +4,7 @@ import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import
{
ApiService
}
from
'../../shared/services/api.service'
;
import
{
GlobalService
}
from
'../../shared/services/global.service'
;
import
{
WalletInfo
}
from
'../../shared/classes/wallet-info'
;
import
{
TransactionInfo
}
from
'../../shared/classes/transaction-info'
;
import
{
SendComponent
}
from
'../send/send.component'
;
import
{
ReceiveComponent
}
from
'../receive/receive.component'
;
...
...
@@ -23,7 +24,7 @@ export class DashboardComponent implements OnInit {
public
confirmedBalance
:
number
;
public
unconfirmedBalance
:
number
;
public
transaction
s
:
any
;
public
transaction
Array
:
TransactionInfo
[]
;
private
walletBalanceSubscription
:
Subscription
;
private
walletHistorySubscription
:
Subscription
;
...
...
@@ -43,13 +44,13 @@ export class DashboardComponent implements OnInit {
const
modalRef
=
this
.
modalService
.
open
(
ReceiveComponent
);
};
public
openTransactionDetailDialog
(
transaction
:
any
)
{
public
openTransactionDetailDialog
(
transaction
:
TransactionInfo
)
{
const
modalRef
=
this
.
modalService
.
open
(
TransactionDetailsComponent
);
modalRef
.
componentInstance
.
transaction
=
transaction
;
}
private
getWalletBalance
()
{
let
walletInfo
=
new
WalletInfo
(
this
.
globalService
.
getWalletName
()
,
this
.
globalService
.
getCoinType
())
let
walletInfo
=
new
WalletInfo
(
this
.
globalService
.
getWalletName
()
);
this
.
walletBalanceSubscription
=
this
.
apiService
.
getWalletBalance
(
walletInfo
)
.
subscribe
(
response
=>
{
...
...
@@ -81,14 +82,17 @@ export class DashboardComponent implements OnInit {
;
};
// todo: add history in seperate service to make it reusable
private
getHistory
()
{
let
walletInfo
=
new
WalletInfo
(
this
.
globalService
.
getWalletName
(),
this
.
globalService
.
getCoinType
())
let
walletInfo
=
new
WalletInfo
(
this
.
globalService
.
getWalletName
());
let
historyResponse
;
this
.
walletHistorySubscription
=
this
.
apiService
.
getWalletHistory
(
walletInfo
)
.
subscribe
(
response
=>
{
if
(
response
.
status
>=
200
&&
response
.
status
<
400
)
{
if
(
response
.
json
().
transactionsHistory
.
length
>
0
)
{
this
.
transactions
=
response
.
json
().
transactionsHistory
;
historyResponse
=
response
.
json
().
transactionsHistory
;
this
.
getTransactionInfo
(
historyResponse
);
}
}
},
...
...
@@ -114,6 +118,33 @@ export class DashboardComponent implements OnInit {
;
};
private
getTransactionInfo
(
transactions
:
any
)
{
this
.
transactionArray
=
[];
for
(
let
transaction
of
transactions
)
{
let
transactionType
;
if
(
transaction
.
type
===
"send"
)
{
transactionType
=
"sent"
;
}
else
if
(
transaction
.
type
===
"received"
)
{
transactionType
=
"received"
;
}
let
transactionId
=
transaction
.
id
;
let
transactionAmount
=
transaction
.
amount
;
let
transactionAddress
;
if
(
transaction
.
payments
[
0
])
{
transactionAddress
=
transaction
.
payments
[
0
].
destinationAddress
;
}
else
if
(
transaction
.
toAddress
)
{
transactionAddress
=
transaction
.
toAddress
;
}
let
transactionFee
=
transaction
.
fee
;
let
transactionConfirmedInBlock
=
transaction
.
confirmedInBlock
;
let
transactionTimestamp
=
transaction
.
timestamp
;
let
transactionConfirmed
;
this
.
transactionArray
.
push
(
new
TransactionInfo
(
transactionType
,
transactionId
,
transactionAmount
,
transactionAddress
,
transactionFee
,
transactionConfirmedInBlock
,
transactionTimestamp
));
}
}
private
cancelSubscriptions
()
{
if
(
this
.
walletBalanceSubscription
)
{
this
.
walletBalanceSubscription
.
unsubscribe
();
...
...
Breeze.UI/src/app/wallet/history/history.component.html
View file @
74d1abc2
...
...
@@ -25,12 +25,19 @@
<div
*
ngFor=
"let transaction of transactions"
>
<div
class=
"card"
(
click
)="
openTransactionDetailDialog
(
transaction
)"
>
<div
class=
"card-block text-nowrap"
>
<ul
class=
"list-inline row"
>
<li
class=
"list-inline-item hidden-xs-down col text-uppercase align-bottom"
>
{{ transaction.type }}
</li>
<li
class=
"list-inline-item col-4 amount text-left align-baseline"
>
<!--<span class="text-success">+</span>-->
{{ transaction.amount | coinNotation }}
<!--<small class="text-uppercase">btc</small> <span class="badge badge-danger text-capitalize">unconfirmed</span>-->
</li>
<li
class=
"list-inline-item col text-right align-baseline transactionDate"
>
{{ transaction.timestamp * 1000 | date:'medium' }}
</li>
</ul>
</div>
<ul
class=
"list-inline row"
>
<li
class=
"list-inline-item hidden-xs-down col-3 text-uppercase align-bottom"
>
{{ transaction.transactionType }}
</li>
<li
class=
"list-inline-item col-4 amount text-left align-baseline"
>
<span
*
ngIf=
"transaction.transactionType == 'received'"
class=
"text-success"
>
+
</span>
<span
*
ngIf=
"transaction.transactionType == 'sent'"
class=
"text-danger"
>
-
</span>
{{ transaction.transactionAmount | coinNotation }}
<!--<small class="text-uppercase">btc</small>-->
<span
*
ngIf=
"transaction.transactionConfirmedInBlock"
class=
"badge badge-success text-capitalize"
>
Confirmed
</span>
<span
*
ngIf=
"!transaction.transactionConfirmedInBlock"
class=
"badge badge-warning text-capitalize"
>
Pending
</span>
</li>
<li
class=
"list-inline-item col text-right align-baseline transactionDate"
>
{{ transaction.transactionTimestamp * 1000 | date:'medium' }}
</li>
</ul>
</div>
</div>
</div>
</div>
...
...
Breeze.UI/src/app/wallet/history/history.component.ts
View file @
74d1abc2
...
...
@@ -5,6 +5,7 @@ import { ApiService } from '../../shared/services/api.service';
import
{
GlobalService
}
from
'../../shared/services/global.service'
;
import
{
WalletInfo
}
from
'../../shared/classes/wallet-info'
;
import
{
TransactionInfo
}
from
'../../shared/classes/transaction-info'
;
import
{
Observable
}
from
'rxjs/Rx'
;
import
{
Subscription
}
from
'rxjs/Subscription'
;
...
...
@@ -20,7 +21,7 @@ import { TransactionDetailsComponent } from '../transaction-details/transaction-
export
class
HistoryComponent
{
constructor
(
private
apiService
:
ApiService
,
private
globalService
:
GlobalService
,
private
modalService
:
NgbModal
)
{}
public
transactions
:
any
;
public
transactions
:
TransactionInfo
[]
;
private
errorMessage
:
string
;
private
walletHistorySubscription
:
Subscription
;
...
...
@@ -37,14 +38,17 @@ export class HistoryComponent {
modalRef
.
componentInstance
.
transaction
=
transaction
;
}
// todo: add history in seperate service to make it reusable
private
getHistory
()
{
let
walletInfo
=
new
WalletInfo
(
this
.
globalService
.
getWalletName
(),
this
.
globalService
.
getCoinType
())
let
walletInfo
=
new
WalletInfo
(
this
.
globalService
.
getWalletName
())
let
historyResponse
;
this
.
walletHistorySubscription
=
this
.
apiService
.
getWalletHistory
(
walletInfo
)
.
subscribe
(
response
=>
{
if
(
response
.
status
>=
200
&&
response
.
status
<
400
)
{
if
(
response
.
json
().
transactionsHistory
.
length
>
0
)
{
this
.
transactions
=
response
.
json
().
transactionsHistory
;
historyResponse
=
response
.
json
().
transactionsHistory
;
this
.
getTransactionInfo
(
historyResponse
);
}
}
},
...
...
@@ -70,6 +74,33 @@ export class HistoryComponent {
;
};
private
getTransactionInfo
(
transactions
:
any
)
{
this
.
transactions
=
[];
for
(
let
transaction
of
transactions
)
{
let
transactionType
;
if
(
transaction
.
type
===
"send"
)
{
transactionType
=
"sent"
;
}
else
if
(
transaction
.
type
===
"received"
)
{
transactionType
=
"received"
;
}
let
transactionId
=
transaction
.
id
;
let
transactionAmount
=
transaction
.
amount
;
let
transactionAddress
;
if
(
transaction
.
payments
[
0
])
{
transactionAddress
=
transaction
.
payments
[
0
].
destinationAddress
;
}
else
if
(
transaction
.
toAddress
)
{
transactionAddress
=
transaction
.
toAddress
;
}
let
transactionFee
=
transaction
.
fee
;
let
transactionConfirmedInBlock
=
transaction
.
confirmedInBlock
;
let
transactionTimestamp
=
transaction
.
timestamp
;
let
transactionConfirmed
;
this
.
transactions
.
push
(
new
TransactionInfo
(
transactionType
,
transactionId
,
transactionAmount
,
transactionAddress
,
transactionFee
,
transactionConfirmedInBlock
,
transactionTimestamp
));
}
}
private
cancelSubscriptions
()
{
if
(
this
.
walletHistorySubscription
)
{
this
.
walletHistorySubscription
.
unsubscribe
();
...
...
Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.html
View file @
74d1abc2
...
...
@@ -8,28 +8,34 @@
<h5
class=
"modal-title text-uppercase"
id=
"modalDetail"
>
Transaction Details
</h5>
<ul
class=
"list-inline row"
>
<li
class=
"list-inline-item col blockLabel"
>
Type
</li>
<li
class=
"list-inline-item col-9 blockText text-capitalize"
>
{{ transaction.type }}
</li>
<li
class=
"list-inline-item col-9 blockText text-capitalize"
>
{{ transaction.t
ransactionT
ype }}
</li>
</ul>
<ul
class=
"list-inline row"
>
<li
class=
"list-inline-item col blockLabel"
>
Amount
</li>
<li
class=
"list-inline-item col-9 blockText text-success"
>
{{transaction.amount | coinNotation }}
</li>
<li
*
ngIf=
"transaction.transactionType == 'received'"
class=
"list-inline-item col-9 blockText text-success"
>
{{ transaction.transactionAmount | coinNotation }}
</li>
<li
*
ngIf=
"transaction.transactionType == 'sent'"
class=
"list-inline-item col-9 blockText text-danger"
>
-{{ transaction.transactionAmount | coinNotation }}
</li>
</ul>
<!--<ul class="list-inline row">
<li class="list-inline-item col blockLabel">From</li>
<li class="list-inline-item col-9 blockText"><code>n4kVJQarwwdmsXDdgNnJHgBSpZ8MhSkNBx</code></li>
</ul>-->
<ul
class=
"list-inline row"
>
<li
class=
"list-inline-item col blockLabel"
>
Date
</li>
<li
class=
"list-inline-item col-9 blockText"
>
{{ transaction.timestamp * 1000 | date:'medium' }}
</li>
<li
*
ngIf=
"transaction.transactionType == 'received'"
class=
"list-inline-item col blockLabel"
>
From
</li>
<li
*
ngIf=
"transaction.transactionType == 'sent'"
class=
"list-inline-item col blockLabel"
>
To
</li>
<li
class=
"list-inline-item col-9 blockText"
><code>
{{ transaction.transactionAddress }}
</code></li>
</ul>
<ul
class=
"list-inline row"
>
<li
class=
"list-inline-item col blockLabel"
>
Date
</li>
<li
class=
"list-inline-item col-9 blockText"
>
{{ transaction.transactionTimestamp * 1000 | date:'medium' }}
</li>
</ul>
<ul
*
ngIf=
"transaction.transactionConfirmedInBlock"
class=
"list-inline row"
>
<li
class=
"list-inline-item col blockLabel"
>
Block
</li>
<li
class=
"list-inline-item col-9 blockText"
>
#{{ transaction.confirmedInBlock }}
</li>
<li
class=
"list-inline-item col-9 blockText"
>
#{{ transaction.transactionConfirmedInBlock }}
</li>
</ul>
<ul
class=
"list-inline row"
>
<li
class=
"list-inline-item col blockLabel"
>
Confirmations
</li>
<li
class=
"list-inline-item col-9 blockText"
>
{{ confirmations }}
</li>
</ul>
<ul
class=
"list-inline row"
>
<li
class=
"list-inline-item col blockLabel mb-3"
>
Transaction ID
</li>
<li
class=
"list-inline-item col-10 blockID"
><code>
{{ transaction.
i
d }}
</code></li>
<span
class=
"float-right"
><a
ngxClipboard
[
cbContent
]="
transaction
.
i
d
"
(
click
)="
onCopiedClick
()"
>
copy
</a></span>
<li
class=
"list-inline-item col-10 blockID"
><code>
{{ transaction.
transactionI
d }}
</code></li>
<span
class=
"float-right"
><a
ngxClipboard
[
cbContent
]="
transaction
.
transactionI
d
"
(
click
)="
onCopiedClick
()"
>
copy
</a></span>
<div
class=
"col-12"
>
<span
class=
"badge badge-success list-inline-item col"
*
ngIf=
"copied"
>
The transaction ID has been copied to your clipboard.
</span>
</div>
...
...
Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.ts
View file @
74d1abc2
import
{
Component
,
Input
,
OnInit
}
from
'@angular/core'
;
import
{
Component
,
Input
,
OnInit
,
OnDestroy
}
from
'@angular/core'
;
import
{
NgbModal
,
NgbActiveModal
}
from
'@ng-bootstrap/ng-bootstrap'
;
import
{
Subscription
}
from
'rxjs/Subscription'
;
import
{
WalletInfo
}
from
'../../shared/classes/wallet-info'
;
import
{
TransactionInfo
}
from
'../../shared/classes/transaction-info'
;
import
{
ApiService
}
from
'../../shared/services/api.service'
;
import
{
GlobalService
}
from
'../../shared/services/global.service'
;
@
Component
({
selector
:
'transaction-details'
,
templateUrl
:
'./transaction-details.component.html'
,
styleUrls
:
[
'./transaction-details.component.css'
]
})
export
class
TransactionDetailsComponent
implements
OnInit
{
export
class
TransactionDetailsComponent
implements
OnInit
,
OnDestroy
{
@
Input
()
transaction
;
constructor
(
public
activeModal
:
NgbActiveModal
)
{}
@
Input
()
transaction
:
TransactionInfo
;
constructor
(
p
rivate
apiService
:
ApiService
,
private
globalService
:
GlobalService
,
p
ublic
activeModal
:
NgbActiveModal
)
{}
public
copied
:
boolean
=
false
;
private
generalWalletInfoSubscription
:
Subscription
;
private
lastBlockSyncedHeight
:
number
;
private
confirmations
:
number
;
ngOnInit
()
{
this
.
startSubscriptions
();
}
ngOnDestroy
()
{
this
.
cancelSubscriptions
();
}
public
onCopiedClick
()
{
this
.
copied
=
true
;
}
private
getGeneralWalletInfo
()
{
let
walletInfo
=
new
WalletInfo
(
this
.
globalService
.
getWalletName
())
this
.
generalWalletInfoSubscription
=
this
.
apiService
.
getGeneralInfo
(
walletInfo
)
.
subscribe
(
response
=>
{
if
(
response
.
status
>=
200
&&
response
.
status
<
400
)
{
let
generalWalletInfoResponse
=
response
.
json
();
this
.
lastBlockSyncedHeight
=
generalWalletInfoResponse
.
lastBlockSyncedHeight
;
this
.
getConfirmations
(
this
.
transaction
);
}
},
error
=>
{
console
.
log
(
error
);
if
(
error
.
status
===
0
)
{
alert
(
"Something went wrong while connecting to the API. Please restart the application."
);
}
else
if
(
error
.
status
>=
400
)
{
if
(
!
error
.
json
().
errors
[
0
])
{
console
.
log
(
error
);
}
else
{
if
(
error
.
json
().
errors
[
0
].
description
)
{
alert
(
error
.
json
().
errors
[
0
].
description
);
}
else
{
this
.
cancelSubscriptions
();
this
.
startSubscriptions
();
}
}
}
}
)
;
};
private
getConfirmations
(
transaction
:
TransactionInfo
)
{
if
(
transaction
.
transactionConfirmedInBlock
)
{
this
.
confirmations
=
this
.
lastBlockSyncedHeight
-
Number
(
transaction
.
transactionConfirmedInBlock
)
+
1
;
}
else
{
this
.
confirmations
=
0
;
}
}
private
cancelSubscriptions
()
{
if
(
this
.
generalWalletInfoSubscription
)
{
this
.
generalWalletInfoSubscription
.
unsubscribe
();
}
};
private
startSubscriptions
()
{
this
.
getGeneralWalletInfo
();
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment