@@ -2,8 +2,13 @@ import * as style from './style.css';
22
33let widgetData ;
44
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 ;
511
6- //get data from server
712async function getAddressData ( URI ) {
813 let response = await fetch ( URI , {
914 method : 'GET' ,
@@ -15,14 +20,76 @@ async function getAddressData(URI){
1520 return await response . json ( ) ;
1621}
1722
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+
1880async 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 } ` ;
2281
2382 widgetData = await getAddressData ( OPEN_URL ) ;
2483 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 ) ;
2693
2794 const accordion = document . querySelector ( ".accordion" ) ;
2895 let i = 1 ;
@@ -61,6 +128,7 @@ async function openPaymentWidget(){
61128 cardDiv . setAttribute ( 'data-parent' , '#accordionExample' ) ;
62129 let cardDivBody = document . createElement ( 'div' ) ;
63130 cardDivBody . setAttribute ( 'class' , 'card-body' ) ;
131+ cardDivBody . setAttribute ( 'id' , `${ blockchain . address } ` ) ;
64132 let cardDivBodyQrCode = document . createElement ( 'div' ) ;
65133
66134 let qrCodeId = 'qrcode' + i + 'b' ;
@@ -76,11 +144,39 @@ async function openPaymentWidget(){
76144 cardDivBodyAddressHref . innerHTML = blockchain . address ;
77145 cardDivBodyAddress . appendChild ( cardDivBodyAddressHref ) ;
78146 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+ ////////////////////////////////////////////////////
79176 cardDiv . appendChild ( cardDivBody ) ;
80177 card . appendChild ( cardDiv ) ;
81178
82179 accordion . appendChild ( card ) ;
83- console . log ( blockchain ) ;
84180
85181 new QRCode ( qrCodeId , {
86182 text : blockchain . address ,
@@ -91,16 +187,24 @@ async function openPaymentWidget(){
91187 i ++ ;
92188
93189 }
190+
191+ fetchTransactionData ( ) ;
94192}
95193
96194function getBlockchainObject ( blockchain ) {
97195 let IDs = { } ;
98- if ( blockchain . blockchain === "BTC " ) {
196+ if ( blockchain . blockchain === "BitcoinBlockchain " ) {
99197 IDs [ 'imgSrc' ] = "/static/images/BTC.png" ;
100198 IDs [ 'title' ] = "Bitcoin" ;
101- } else if ( blockchain . blockchain === "ETH " ) {
199+ } else if ( blockchain . blockchain === "EthereumBlockchain " ) {
102200 IDs [ 'imgSrc' ] = "/static/images/ETH.png" ;
103201 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" ;
104208 } else {
105209 IDs [ 'imgSrc' ] = "/static/images/BNB.png" ;
106210 IDs [ 'title' ] = "Binance" ;
@@ -109,9 +213,9 @@ function getBlockchainObject(blockchain){
109213 return IDs ;
110214}
111215
112- function countdownTimer ( countDownDate ) {
216+ function countdownTimer ( countDownDate , amount , paid ) {
113217
114- let x = setInterval ( function ( ) {
218+ timerId = setInterval ( function ( ) {
115219
116220 let now = new Date ( ) . getTime ( ) ;
117221 let distance = countDownDate - now ;
@@ -120,11 +224,17 @@ function countdownTimer(countDownDate){
120224 let minutes = Math . floor ( ( distance % ( 1000 * 60 * 60 ) ) / ( 1000 * 60 ) ) ;
121225 let seconds = Math . floor ( ( distance % ( 1000 * 60 ) ) / 1000 ) ;
122226
123- document . getElementById ( "countdown" ) . innerHTML = hours + ":" + minutes + ":" + seconds ;
227+ const counter = document . getElementById ( "countdown" ) ;
228+ counter . innerHTML = hours + "h:" + minutes + "m:" + seconds + "s" ;
124229
125230 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" ;
128238 }
129239 } , 1000 ) ;
130240}
0 commit comments