-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
160 lines (130 loc) · 3.85 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
import React, { Component } from 'react'
import styled from 'styled-components'
import * as RVNBOXSDK from 'rvnbox-sdk/lib/rvnbox-sdk'
import Donation from './components/Donation'
import Footer from './components/Footer'
import { donations as initDonations } from './donations'
// initialise RVNBOX
const RVNBOX = new RVNBOXSDK.default()
// initialise socket connection
const socket = new RVNBOX.Socket()
const Wrapper = styled.div`
padding:0;
margin: 0;
display: flex;
flex:1;
flex-wrap: wrap;
flex-direction: column;
justify-content:center;
align-items: space-between;
min-height: 100vh;
`
const Container = styled.div`
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: normal;
padding: 28px 0;
`
const Title = styled.h1`
text-align: center;
margin: 10px auto;
font-size: 50px;
color: #fff;
text-shadow: 2px 2px 4px #000;
`
// converts legacy addresses to Legacyaddr and returns an array
const getOutputAddresses = (outputs) => {
const addresses = outputs.reduce((prev, curr, idx) => {
const addressArray = curr.scriptPubKey.addresses;
// converts legacy address to Legacyaddr
const value = RVNBOX.RavenCoin.toLegacy(curr.satoshi);
const ret = addressArray.reduce((prev, curr, idx) => {
return { ...prev, [curr]: { value } }
}, {})
return [...prev, { ...ret }]
}, [])
return addresses
}
class App extends Component {
constructor(props) {
super(props)
const donationAddresses = Object.keys(initDonations).reduce((prev, curr, idx) => {
return [...prev, curr]
}, [])
this.state = {
donations: initDonations,
donationAddresses
}
this.handleNewTx = this.handleNewTx.bind(this)
}
componentDidMount() {
const { donationAddresses } = this.state
// create listenner with callback for incomming transactions
socket.listen('transactions', this.handleNewTx)
this.handleUpdateAddressBalance(donationAddresses)
}
handleNewTx(msg) {
const { donations, donationAddresses } = this.state
const json = JSON.parse(msg)
const outputs = json.outputs
const addresses = getOutputAddresses(outputs)
Object.keys(donations).forEach(p => {
addresses.forEach(a => {
const key = Object.keys(a)[0]
if (RVNBOX.Address.toLegacyAddress(p) === key) {
donations[p].lastTip = a[key].value
donations[p].notification = true
this.setState({
donations
})
setTimeout(() => {
donations[p].notification = false
this.setState({
donations
})
}, 5000)
this.handleUpdateAddressBalance(donationAddresses)
}
})
})
}
handleUpdateAddressBalance(addr) {
const { donations } = this.state
// pass array or string and update balances
RVNBOX.Address.details(addr)
.then((result) => {
result.forEach(r => {
Object.keys(donations).forEach(p => {
if (p === r.legacyAddress) donations[p].balance = (r.unconfirmedBalance + r.balance).toFixed(8)
})
})
this.setState({
donations
})
}, (err) => {
console.log(err)
});
}
render() {
const { donations, donationAddresses } = this.state
return (
<Wrapper>
<Title>Donate RVN Please <span style={{ color: "red" }}>❤</span></Title>
<Container>
{donationAddresses.map((address, i) => {
const donation = donations[address]
// converts legacy address to Legacyaddr and passes to donation component for display
const addr = RVNBOX.Address.toLegacyAddress(address)
return (
<Donation key={i} donation={donation} address={addr} />
)
})}
</Container>
<Footer />
</Wrapper>
);
}
}
export default App