btc: add USD currency conversion rate fetching

This commit is contained in:
pkova 2021-04-16 15:00:17 +03:00 committed by ixv
parent 44767c00dd
commit c8c1bdf0be
2 changed files with 123 additions and 115 deletions

View File

@ -44,6 +44,14 @@ export default class Balance extends Component {
}
}
componentDidMount() {
fetch('https://blockchain.info/tobtc?currency=USD&value=1')
.then(res => res.json())
.then(n => {
this.setState({conversion: {USD: 1/n, CAD: 70000, BTC: 1}});
});
}
render() {
const sats = (this.props.state.wallet) ?

View File

@ -43,123 +43,123 @@ export default class Send extends Component {
return (
<>
{ signing ?
<Invoice
api={api}
stopSending={stopSending}
payee={payee}
denomination={denomination}
denomAmount={denomAmount}
satsAmount={satsAmount}
/> :
<Col
height='400px'
width='100%'
backgroundColor='white'
borderRadius='32px'
mb={5}
p={5}
>
<Row
justifyContent='space-between'
alignItems='center'
{ signing ?
<Invoice
api={api}
stopSending={stopSending}
payee={payee}
denomination={denomination}
denomAmount={denomAmount}
satsAmount={satsAmount}
/> :
<Col
height='400px'
width='100%'
backgroundColor='white'
borderRadius='32px'
mb={5}
p={5}
>
<Text highlight color='blue' fontSize={1}>Send BTC</Text>
<Text highlight color='blue' fontSize={1}>{value}</Text>
<Icon
icon='X'
cursor='pointer'
onClick={() => stopSending()}
/>
</Row>
<Row
alignItems='center'
mt={6}
justifyContent='space-between'>
<Text
gray
fontSize={1}
width='40%'
fontWeight='600'
<Row
justifyContent='space-between'
alignItems='center'
>
To
</Text>
<Input
width='100%'
fontSize='14px'
placeholder='~sampel-palnet or BTC address'
value={payee}
onChange={e => {
this.setState({payee: e.target.value});
}}
/>
</Row>
<Row
alignItems='center'
mt={4}
justifyContent='space-between'>
<Text
gray
fontSize={1}
width='40%'
fontWeight='600'
>Amount</Text>
<Input
fontSize='14px'
width='100%'
type='number'
border='none'
value={denomAmount}
onChange={e => {
this.setState({
denomAmount: e.target.value,
satsAmount: parseFloat(e.target.value) * conversion[denomination]
});
}}
/>
<Text gray fontSize={1}>{denomination}</Text>
</Row>
<Row
alignItems='center'
mt={2}
justifyContent='space-between'>
{/* yes this is a hack */}
<Box width='40%' />
<Input
fontSize='14px'
width='100%'
type='number'
border='none'
value={satsAmount}
onChange={e => {
this.setState({
denomAmount: parseFloat(e.target.value) / conversion[denomination],
satsAmount: e.target.value
});
}}
/>
<Text gray fontSize={1}>sats</Text>
</Row>
<Row
flexDirection='row-reverse'
mt={8}
>
<Button
children='Sign Transaction' mr={3}
fontSize={1}
color='white'
backgroundColor='blue'
borderColor='none'
borderRadius='24px'
py='24px'
px='24px'
onClick={() =>{
this.initPayment()
}}
/>
</Row>
</Col>
}
<Text highlight color='blue' fontSize={1}>Send BTC</Text>
<Text highlight color='blue' fontSize={1}>{value}</Text>
<Icon
icon='X'
cursor='pointer'
onClick={() => stopSending()}
/>
</Row>
<Row
alignItems='center'
mt={6}
justifyContent='space-between'>
<Text
gray
fontSize={1}
width='40%'
fontWeight='600'
>
To
</Text>
<Input
width='100%'
fontSize='14px'
placeholder='~sampel-palnet or BTC address'
value={payee}
onChange={e => {
this.setState({payee: e.target.value});
}}
/>
</Row>
<Row
alignItems='center'
mt={4}
justifyContent='space-between'>
<Text
gray
fontSize={1}
width='40%'
fontWeight='600'
>Amount</Text>
<Input
fontSize='14px'
width='100%'
type='number'
border='none'
value={denomAmount}
onChange={e => {
this.setState({
denomAmount: e.target.value,
satsAmount: Math.round(parseFloat(e.target.value) / conversion[denomination] * 100000000)
});
}}
/>
<Text gray fontSize={1}>{denomination}</Text>
</Row>
<Row
alignItems='center'
mt={2}
justifyContent='space-between'>
{/* yes this is a hack */}
<Box width='40%' />
<Input
fontSize='14px'
width='100%'
type='number'
border='none'
value={satsAmount}
onChange={e => {
this.setState({
denomAmount: parseFloat(e.target.value) * (conversion[denomination] / 100000000),
satsAmount: e.target.value
});
}}
/>
<Text gray fontSize={1}>sats</Text>
</Row>
<Row
flexDirection='row-reverse'
mt={8}
>
<Button
children='Sign Transaction' mr={3}
fontSize={1}
color='white'
backgroundColor='blue'
borderColor='none'
borderRadius='24px'
py='24px'
px='24px'
onClick={() =>{
this.initPayment()
}}
/>
</Row>
</Col>
}
</>
);
}