@@ -2,8 +2,13 @@ import * as style from './style.css';
2
2
3
3
let widgetData ;
4
4
5
+ const spinner = document . getElementById ( "spinner" ) ;
6
+ const orderKey = document . body . dataset . order ;
7
+ const host = document . body . dataset . host ;
8
+ const currency = document . body . dataset . currency ;
9
+ const OPEN_URL = `${ host } /widget/payment/addresses/order/${ orderKey } ` ;
10
+ let timerId = 1 ;
5
11
6
- //get data from server
7
12
async function getAddressData ( URI ) {
8
13
let response = await fetch ( URI , {
9
14
method : 'GET' ,
@@ -15,14 +20,76 @@ async function getAddressData(URI){
15
20
return await response . json ( ) ;
16
21
}
17
22
23
+ function fetchTransactionData ( ) {
24
+ spinner . setAttribute ( 'hidden' , '' ) ;
25
+ $ . ajax ( {
26
+ url : OPEN_URL ,
27
+ type : 'get' ,
28
+ success : function ( data ) {
29
+ setTimeout ( function ( ) {
30
+ spinner . removeAttribute ( 'hidden' ) ;
31
+
32
+ } , 20000 ) ;
33
+ loadTransactionData ( data ) ;
34
+ } ,
35
+ complete : function ( data ) {
36
+ setTimeout ( fetchTransactionData , 10000 ) ;
37
+ }
38
+ } ) ;
39
+ }
40
+
41
+ function loadTransactionData ( result ) {
42
+
43
+ const amount = document . querySelector ( ".amount" ) ;
44
+ const remaining = document . querySelector ( ".remaining" ) ;
45
+ amount . innerHTML = `${ result . orderAmount } ` ;
46
+ //let leftAmount = Math.ceil(result.orderAmount - result.paid);
47
+ let leftAmount = result . orderAmount - result . paid ;
48
+ remaining . innerHTML = `${ leftAmount } ` ;
49
+
50
+ if ( result . orderAmount <= result . paid ) {
51
+ clearInterval ( timerId ) ;
52
+ const counter = document . getElementById ( "countdown" ) ;
53
+ counter . setAttribute ( 'class' , 'completed' )
54
+ counter . innerHTML = "Order Completed" ;
55
+ }
56
+
57
+ for ( let blockchain of result . wallets ) {
58
+ const tbody = document . querySelector ( "." + `${ blockchain . blockchain + blockchain . address } ` ) ;
59
+ tbody . innerHTML = '' ;
60
+ for ( let trx of blockchain . transactions ) {
61
+ let rowBody = document . createElement ( 'tr' ) ;
62
+ let td_1 = document . createElement ( 'td' ) ;
63
+ td_1 . innerHTML = `${ trx . hash } ` ;
64
+ let td_2 = document . createElement ( 'td' ) ;
65
+ td_2 . innerHTML = `${ trx . from } ` ;
66
+ let td_3 = document . createElement ( 'td' ) ;
67
+ td_3 . innerHTML = `${ trx . amount } ` ;
68
+ let td_4 = document . createElement ( 'td' ) ;
69
+ td_4 . innerHTML = `${ trx . rate } ` ;
70
+
71
+ rowBody . appendChild ( td_1 ) ;
72
+ rowBody . appendChild ( td_2 ) ;
73
+ rowBody . appendChild ( td_3 ) ;
74
+ rowBody . appendChild ( td_4 ) ;
75
+ tbody . appendChild ( rowBody ) ;
76
+ }
77
+ }
78
+ }
79
+
18
80
async function openPaymentWidget ( ) {
19
- const orderKey = document . body . dataset . order ;
20
- const host = document . body . dataset . host ;
21
- const OPEN_URL = `${ host } /widget/payment/addresses/order/${ orderKey } ` ;
22
81
23
82
widgetData = await getAddressData ( OPEN_URL ) ;
24
83
console . log ( widgetData . orderDate ) ;
25
- countdownTimer ( new Date ( `${ widgetData . orderDate } ` ) . getTime ( ) )
84
+
85
+ const amount = document . querySelector ( ".amount" ) ;
86
+ const remaining = document . querySelector ( ".remaining" ) ;
87
+ amount . innerHTML = `${ widgetData . orderAmount } ` ;
88
+ //let leftAmount = Math.ceil(widgetData.orderAmount - widgetData.paid);
89
+ let leftAmount = widgetData . orderAmount - widgetData . paid ;
90
+ remaining . innerHTML = `${ leftAmount } ` ;
91
+
92
+ countdownTimer ( new Date ( `${ widgetData . orderDate } ` ) . getTime ( ) , widgetData . orderAmount , widgetData . paid ) ;
26
93
27
94
const accordion = document . querySelector ( ".accordion" ) ;
28
95
let i = 1 ;
@@ -61,6 +128,7 @@ async function openPaymentWidget(){
61
128
cardDiv . setAttribute ( 'data-parent' , '#accordionExample' ) ;
62
129
let cardDivBody = document . createElement ( 'div' ) ;
63
130
cardDivBody . setAttribute ( 'class' , 'card-body' ) ;
131
+ cardDivBody . setAttribute ( 'id' , `${ blockchain . address } ` ) ;
64
132
let cardDivBodyQrCode = document . createElement ( 'div' ) ;
65
133
66
134
let qrCodeId = 'qrcode' + i + 'b' ;
@@ -76,11 +144,39 @@ async function openPaymentWidget(){
76
144
cardDivBodyAddressHref . innerHTML = blockchain . address ;
77
145
cardDivBodyAddress . appendChild ( cardDivBodyAddressHref ) ;
78
146
cardDivBody . appendChild ( cardDivBodyAddress ) ;
147
+
148
+ ////// Transactions /////
149
+ let cardDivBodyAddressTrx = document . createElement ( 'div' ) ;
150
+ cardDivBodyAddressTrx . setAttribute ( 'class' , 'table-responsive mb-2 mb-md-0' ) ;
151
+ let cardDivBodyAddressTrxTable = document . createElement ( 'table' ) ;
152
+ cardDivBodyAddressTrxTable . setAttribute ( 'class' , 'table table-hover' ) ;
153
+ let cardDivBodyAddressTrxTableHead = document . createElement ( 'thead' ) ;
154
+ cardDivBodyAddressTrxTableHead . setAttribute ( 'class' , 'thead-light' ) ;
155
+ let row = document . createElement ( 'tr' ) ;
156
+ let heading_1 = document . createElement ( 'th' ) ;
157
+ heading_1 . innerHTML = "Txn Hash" ;
158
+ let heading_2 = document . createElement ( 'th' ) ;
159
+ heading_2 . innerHTML = "From" ;
160
+ let heading_3 = document . createElement ( 'th' ) ;
161
+ heading_3 . innerHTML = "Value" ;
162
+ let heading_4 = document . createElement ( 'th' ) ;
163
+ heading_4 . innerHTML = "Rate" ;
164
+ row . appendChild ( heading_1 ) ;
165
+ row . appendChild ( heading_2 ) ;
166
+ row . appendChild ( heading_3 ) ;
167
+ row . appendChild ( heading_4 ) ;
168
+ cardDivBodyAddressTrxTableHead . appendChild ( row ) ;
169
+ let cardDivBodyAddressTrxTableBody = document . createElement ( 'tbody' ) ;
170
+ cardDivBodyAddressTrxTableBody . setAttribute ( 'class' , `${ blockchain . blockchain + blockchain . address } ` ) ;
171
+ cardDivBodyAddressTrxTable . appendChild ( cardDivBodyAddressTrxTableHead ) ;
172
+ cardDivBodyAddressTrxTable . appendChild ( cardDivBodyAddressTrxTableBody ) ;
173
+ cardDivBodyAddressTrx . appendChild ( cardDivBodyAddressTrxTable ) ;
174
+ cardDivBody . appendChild ( cardDivBodyAddressTrx ) ;
175
+ ////////////////////////////////////////////////////
79
176
cardDiv . appendChild ( cardDivBody ) ;
80
177
card . appendChild ( cardDiv ) ;
81
178
82
179
accordion . appendChild ( card ) ;
83
- console . log ( blockchain ) ;
84
180
85
181
new QRCode ( qrCodeId , {
86
182
text : blockchain . address ,
@@ -91,16 +187,24 @@ async function openPaymentWidget(){
91
187
i ++ ;
92
188
93
189
}
190
+
191
+ fetchTransactionData ( ) ;
94
192
}
95
193
96
194
function getBlockchainObject ( blockchain ) {
97
195
let IDs = { } ;
98
- if ( blockchain . blockchain === "BTC " ) {
196
+ if ( blockchain . blockchain === "BitcoinBlockchain " ) {
99
197
IDs [ 'imgSrc' ] = "/static/images/BTC.png" ;
100
198
IDs [ 'title' ] = "Bitcoin" ;
101
- } else if ( blockchain . blockchain === "ETH " ) {
199
+ } else if ( blockchain . blockchain === "EthereumBlockchain " ) {
102
200
IDs [ 'imgSrc' ] = "/static/images/ETH.png" ;
103
201
IDs [ 'title' ] = "Ethereum" ;
202
+ } else if ( blockchain . blockchain === "RopstenBlockchain" ) {
203
+ IDs [ 'imgSrc' ] = "/static/images/ETH.png" ;
204
+ IDs [ 'title' ] = "Ropsten" ;
205
+ } else if ( blockchain . blockchain === "BinanceTestnetBlockchain" ) {
206
+ IDs [ 'imgSrc' ] = "/static/images/BNB.png" ;
207
+ IDs [ 'title' ] = "Binance Test" ;
104
208
} else {
105
209
IDs [ 'imgSrc' ] = "/static/images/BNB.png" ;
106
210
IDs [ 'title' ] = "Binance" ;
@@ -109,9 +213,9 @@ function getBlockchainObject(blockchain){
109
213
return IDs ;
110
214
}
111
215
112
- function countdownTimer ( countDownDate ) {
216
+ function countdownTimer ( countDownDate , amount , paid ) {
113
217
114
- let x = setInterval ( function ( ) {
218
+ timerId = setInterval ( function ( ) {
115
219
116
220
let now = new Date ( ) . getTime ( ) ;
117
221
let distance = countDownDate - now ;
@@ -120,11 +224,17 @@ function countdownTimer(countDownDate){
120
224
let minutes = Math . floor ( ( distance % ( 1000 * 60 * 60 ) ) / ( 1000 * 60 ) ) ;
121
225
let seconds = Math . floor ( ( distance % ( 1000 * 60 ) ) / 1000 ) ;
122
226
123
- document . getElementById ( "countdown" ) . innerHTML = hours + ":" + minutes + ":" + seconds ;
227
+ const counter = document . getElementById ( "countdown" ) ;
228
+ counter . innerHTML = hours + "h:" + minutes + "m:" + seconds + "s" ;
124
229
125
230
if ( distance < 0 ) {
126
- clearInterval ( x ) ;
127
- document . getElementById ( "countdown" ) . innerHTML = "EXPIRED" ;
231
+ clearInterval ( timerId ) ;
232
+ counter . innerHTML = "EXPIRED" ;
233
+ }
234
+ if ( amount <= paid ) {
235
+ clearInterval ( timerId ) ;
236
+ counter . setAttribute ( 'class' , 'completed' )
237
+ counter . innerHTML = "Order Completed" ;
128
238
}
129
239
} , 1000 ) ;
130
240
}
0 commit comments