mirror of
https://github.com/fullstack-cash/fullstack-gatsby-theme-bch-wallet.git
synced 2026-09-21 16:52:06 -07:00
Merge pull request #20 from Permissionless-Software-Foundation/ct-unstable
Removing features from bch-dex
This commit is contained in:
Chris Troutner
@@ -1,188 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Row, Col, Box, Button } from 'adminlte-2-react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
// import JSONPretty from "react-json-pretty"
|
||||
|
||||
let _this
|
||||
class Details extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
_this = this
|
||||
|
||||
this.state = {
|
||||
order: {}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { order } = _this.state
|
||||
return (
|
||||
<>
|
||||
<Row>
|
||||
<Col sm={12}>
|
||||
<Box className=' border-none mt-2' loaded={!this.state.inFetch}>
|
||||
<Row className='text-center'>
|
||||
<Col sm={12}>
|
||||
<h1 id='SendTokens'>
|
||||
<FontAwesomeIcon
|
||||
className='title-icon'
|
||||
size='xs'
|
||||
icon='info-circle'
|
||||
/>
|
||||
<span>Details</span>
|
||||
</h1>
|
||||
{order._id && (
|
||||
<Box className='border-none details-data-content'>
|
||||
<p>
|
||||
<b>Message Type: </b>
|
||||
{order.messageType}
|
||||
</p>
|
||||
<p>
|
||||
<b>Message Class: </b>
|
||||
{order.messageClass}
|
||||
</p>
|
||||
<p>
|
||||
<b>Create At: </b>
|
||||
{new Date(order.localTimestamp).toLocaleString()}
|
||||
</p>
|
||||
<p>
|
||||
<b>ID: </b>
|
||||
{order._id}
|
||||
</p>
|
||||
<p>
|
||||
<b>Token Id: </b>
|
||||
{order.tokenId}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>Order Type : </b>
|
||||
{order.buyOrSell}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>Rate in Stats : </b>
|
||||
{order.rateInSats}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>Min. Sats to Exchange : </b>
|
||||
{order.minSatsToExchange}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>Num Tokens: </b>
|
||||
{order.numTokens}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>Utxo TxId: </b>
|
||||
{order.utxoTxid}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>Utxo Vout: </b>
|
||||
{order.utxoVout}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>Tx Hex : </b>
|
||||
{order.txHex}
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Timestamp : </b>
|
||||
{order.timestamp}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>LocalTimestamp : </b>
|
||||
{order.localTimestamp}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>p2wdbHash : </b>
|
||||
{order.p2wdbHash}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>Offer Hash : </b>
|
||||
{order.offerHash}
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<b>Address References : </b>
|
||||
{order.addrReferences}
|
||||
|
||||
</p>
|
||||
</Box>
|
||||
)}
|
||||
</Col>
|
||||
<Col sm={12}>
|
||||
<div className='btn-wrapper'>
|
||||
<Button
|
||||
text='Take'
|
||||
type='primary'
|
||||
className='btn-lg on-click-event mr-1 ml-1 mt-1 take-btn-lg'
|
||||
onClick={() => _this.props.onTake({ data: order })}
|
||||
/>
|
||||
<Button
|
||||
text='Close'
|
||||
type='primary'
|
||||
className='btn-lg btn-close-entry mr-1 ml-1 mt-1'
|
||||
onClick={_this.handleClose}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Box>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
_this.handleData()
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (_this.props.order._id !== _this.state.order._id) {
|
||||
_this.handleData()
|
||||
}
|
||||
}
|
||||
|
||||
handleData () {
|
||||
try {
|
||||
const { order } = _this.props
|
||||
console.log('order', order)
|
||||
_this.setState({
|
||||
order: order.data
|
||||
})
|
||||
} catch (err) {
|
||||
console.warn('Error in handleData()', err)
|
||||
}
|
||||
}
|
||||
|
||||
handleClose () {
|
||||
_this.props.onClose()
|
||||
}
|
||||
|
||||
// Detects if the input is a string and converts to json object
|
||||
isJson (data) {
|
||||
try {
|
||||
JSON.parse(data)
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
Details.propTypes = {
|
||||
order: PropTypes.object,
|
||||
onClose: PropTypes.func,
|
||||
onTake: PropTypes.func
|
||||
}
|
||||
export default Details
|
||||
@@ -1,322 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Row, Col, Content, Box, DataTable, Button } from 'adminlte-2-react'
|
||||
import Details from './details'
|
||||
import './orders.css'
|
||||
import Spinner from '../../../images/loader.gif'
|
||||
// const { Text } = Inputs
|
||||
|
||||
const axios = require('axios').default
|
||||
const siteConfig = require('../../site-config')
|
||||
|
||||
const SERVER = siteConfig.bchDexUrl
|
||||
|
||||
// const EXPLORER_URL = 'https://explorer.bitcoin.com/bch/tx/'
|
||||
|
||||
let _this
|
||||
class Orders extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
_this = this
|
||||
this.state = {
|
||||
showEntry: false,
|
||||
data: [],
|
||||
orders: [],
|
||||
orderData: null,
|
||||
showTakeModal: false,
|
||||
takeInput: ''
|
||||
}
|
||||
|
||||
this.firstColumns = [
|
||||
{ title: 'Ticker', data: 'ticker' },
|
||||
{
|
||||
title: 'Token Id',
|
||||
data: 'tokenId',
|
||||
render: id => (
|
||||
<a href={`https://simpleledger.info/token/${id.tokenId}`} target='_blank' rel='noreferrer'>{id.subString}</a>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Type',
|
||||
data: 'buyOrSell'
|
||||
},
|
||||
{
|
||||
title: 'Offer hash',
|
||||
data: 'offerHash',
|
||||
render: hash => (
|
||||
<span className='on-click-event action-handler'>{hash.subString}</span>
|
||||
)
|
||||
},
|
||||
{ title: 'Qty', data: 'qty' },
|
||||
{ title: 'Sats Each', data: 'satsEach' },
|
||||
{ title: 'Sats Total', data: 'satsTotal' },
|
||||
{ title: 'USD Total', data: 'usdTotal' },
|
||||
{
|
||||
title: '',
|
||||
data: 'take',
|
||||
// render: order => (order.data.orderStatus === 'posted'
|
||||
// ? (
|
||||
// <div className='take-btn-table-wrapper'>
|
||||
// <Button
|
||||
// text='Take'
|
||||
// type='primary'
|
||||
// className='btn-lg on-click-event take-btn'
|
||||
// onClick={_this.handleTake}
|
||||
// />
|
||||
// </div>
|
||||
// )
|
||||
// : <p />
|
||||
// )
|
||||
render: order => (
|
||||
<div className='take-btn-table-wrapper'>
|
||||
<Button
|
||||
text='Take'
|
||||
type='primary'
|
||||
className='btn-lg on-click-event take-btn'
|
||||
onClick={_this.handleTake}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
render () {
|
||||
const { data, orderData } = _this.state
|
||||
return (
|
||||
<>
|
||||
<Content
|
||||
title='BCH Orders'
|
||||
subTitle='BCH Orders List'
|
||||
browserTitle='BCH Orders List'
|
||||
>
|
||||
<Row>
|
||||
{orderData && (
|
||||
<Col xs={12}>
|
||||
<Details order={orderData} onClose={_this.handleClose} onTake={_this.handleTake} />
|
||||
</Col>
|
||||
)}
|
||||
<Col xs={12}>
|
||||
<Box title='Order List'>
|
||||
<DataTable
|
||||
id='OrdersTable'
|
||||
className='order-table'
|
||||
columns={_this.firstColumns}
|
||||
data={data}
|
||||
options={{
|
||||
paging: true,
|
||||
lengthChange: false,
|
||||
searching: false,
|
||||
ordering: false,
|
||||
info: true,
|
||||
autoWidth: false
|
||||
}}
|
||||
onClickEvents={{
|
||||
onClickEvent: (data, rowIdx, rowData) => {
|
||||
console.log(data)
|
||||
if (data.key === 'hashHandler') { _this.handleHashClick(data) }
|
||||
|
||||
if (data.key === 'takeHandler') { _this.handleTake(data) }
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Col>
|
||||
</Row>
|
||||
</Content>
|
||||
{
|
||||
_this.state.showTakeModal && (
|
||||
<Content
|
||||
title='Taking order...'
|
||||
modal
|
||||
show={_this.state.showTakeModal}
|
||||
modalCloseButton
|
||||
onHide={_this.handleClose}
|
||||
>
|
||||
<div className='take-form-wrapper'>
|
||||
<div className='spinner'>
|
||||
<img alt='Loading...' src={Spinner} width={100} /><br />
|
||||
<p>Taking the other side of the trade...</p>
|
||||
</div>
|
||||
</div>
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
async componentDidMount () {
|
||||
_this.handleOrders()
|
||||
|
||||
// Get data and update the table
|
||||
// every 20 seconds
|
||||
setInterval(() => {
|
||||
_this.handleOrders()
|
||||
}, 30000)
|
||||
}
|
||||
|
||||
async handleOrders () {
|
||||
const orders = await _this.getOrders()
|
||||
await _this.generateDataTable(orders)
|
||||
}
|
||||
|
||||
// REST petition to Get data fron the pw2db
|
||||
async getOrders () {
|
||||
try {
|
||||
// console.log('SERVER: ', SERVER)
|
||||
|
||||
const options = {
|
||||
method: 'GET',
|
||||
url: `${SERVER}/offer/list/`,
|
||||
data: {}
|
||||
}
|
||||
const result = await axios.request(options)
|
||||
// console.log('result.data', result.data)
|
||||
|
||||
_this.setState({
|
||||
orders: result.data
|
||||
})
|
||||
|
||||
return result.data
|
||||
} catch (err) {
|
||||
console.warn('Error in getOrders() ', err)
|
||||
}
|
||||
}
|
||||
|
||||
// Generate table content
|
||||
async generateDataTable (dataArr = []) {
|
||||
try {
|
||||
const data = []
|
||||
// console.log(`dataArr: ${JSON.stringify(dataArr, null, 2)}`)
|
||||
|
||||
if (!this.props.bchWallet) {
|
||||
console.log('BCH wallet is not initialized. Can not calculate price of BCH or tokens.')
|
||||
return
|
||||
}
|
||||
|
||||
// Get the spot price for BCH.
|
||||
const bchSpotPrice = await this.props.bchWallet.getUsd()
|
||||
|
||||
// console.log('bchSpotPrice: ', bchSpotPrice)
|
||||
|
||||
for (let i = 0; i < dataArr.length; i++) {
|
||||
const order = dataArr[i]
|
||||
// console.log(`order: ${JSON.stringify(order, null, 2)}`)
|
||||
|
||||
const satsTotal = Math.ceil(order.numTokens * order.rateInBaseUnit)
|
||||
console.log(`satsTotal: ${satsTotal}`)
|
||||
let usdTotal = bchSpotPrice * this.props.bchWallet.bchjs.BitcoinCash.toBitcoinCash(satsTotal)
|
||||
usdTotal = `$${this.props.bchWallet.bchjs.Util.floor8(usdTotal)}`
|
||||
|
||||
const row = {
|
||||
ticker: order.ticker,
|
||||
tokenId: {
|
||||
tokenId: order.tokenId,
|
||||
subString: _this.cutString(order.tokenId)
|
||||
},
|
||||
// createdAt row data
|
||||
createdAt: new Date(order.timestamp).toLocaleString(),
|
||||
// Transaction id row data
|
||||
buyOrSell: order.buyOrSell,
|
||||
// Hash row data
|
||||
offerHash: {
|
||||
key: 'hashHandler',
|
||||
subString: _this.cutString(order.p2wdbHash),
|
||||
order: order.p2wdbHash,
|
||||
data: order
|
||||
},
|
||||
qty: order.numTokens,
|
||||
satsEach: order.rateInBaseUnit,
|
||||
satsTotal,
|
||||
usdTotal,
|
||||
orderStatus: order.offerStatus,
|
||||
take: {
|
||||
key: 'takeHandler',
|
||||
data: order
|
||||
}
|
||||
}
|
||||
data.push(row)
|
||||
}
|
||||
|
||||
_this.setState({ data })
|
||||
} catch (err) {
|
||||
console.warn('Error in generateDataTable() ', err)
|
||||
}
|
||||
}
|
||||
|
||||
cutString (txid) {
|
||||
try {
|
||||
const subTxid = txid.slice(0, 4)
|
||||
const subTxid2 = txid.slice(-4)
|
||||
return `${subTxid}...${subTxid2}`
|
||||
} catch (err) {
|
||||
console.warn('Error in cutString() ', err)
|
||||
}
|
||||
}
|
||||
|
||||
handleHashClick (data) {
|
||||
try {
|
||||
// data.isValid = data.isValid.toString()
|
||||
_this.setState({
|
||||
orderData: data
|
||||
})
|
||||
} catch (err) {
|
||||
_this.setState({
|
||||
orderData: null
|
||||
})
|
||||
console.warn('Error in handleHashClick() ', err)
|
||||
}
|
||||
}
|
||||
|
||||
handleClose () {
|
||||
_this.setState({
|
||||
orderData: null,
|
||||
showTakeModal: false
|
||||
})
|
||||
}
|
||||
|
||||
async handleTake (order) {
|
||||
console.log('handleTake() order: ', order)
|
||||
|
||||
const offerCid = order.data.p2wdbHash
|
||||
console.log('offerCid: ', offerCid)
|
||||
|
||||
// if (!order.data.status === 'posted') return
|
||||
|
||||
// TODO: Future functionality.
|
||||
// Throw up a modal to query how much they want to take.
|
||||
// _this.setState({
|
||||
// tankenInput: '',
|
||||
// showTakeModal: true
|
||||
// })
|
||||
|
||||
// Show the modal
|
||||
_this.setState({
|
||||
showTakeModal: true
|
||||
})
|
||||
|
||||
const options = {
|
||||
method: 'POST',
|
||||
url: `${SERVER}/offer/take/`,
|
||||
data: {
|
||||
offerCid
|
||||
}
|
||||
}
|
||||
const result = await axios.request(options)
|
||||
console.log('result of taking offer: ', result)
|
||||
|
||||
// Hide the modal
|
||||
_this.setState({
|
||||
showTakeModal: false
|
||||
})
|
||||
}
|
||||
|
||||
handleModalInputs (event) {
|
||||
const value = event.target.value
|
||||
_this.setState({
|
||||
[event.target.name]: value
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default Orders
|
||||
@@ -1,29 +0,0 @@
|
||||
.btn-close-entry{
|
||||
width: 150px;
|
||||
}
|
||||
.action-handler{
|
||||
color: #3c8dbc;
|
||||
cursor: pointer;
|
||||
}
|
||||
.details-data-content{
|
||||
text-align: left;
|
||||
}
|
||||
.take-form-wrapper{
|
||||
/* display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column; */
|
||||
text-align: center;
|
||||
}
|
||||
#OrdersTable> tbody >.odd{
|
||||
height: 55px!important;
|
||||
}
|
||||
#OrdersTable> tbody > .even{
|
||||
height: 55px!important;
|
||||
}
|
||||
.take-btn-lg{
|
||||
width: 150px;
|
||||
}
|
||||
.take-btn-table-wrapper{
|
||||
text-align: end;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
|
||||
import { Content, Row, Col, Box, Button } from 'adminlte-2-react'
|
||||
import TokenCard from './token-card'
|
||||
import TokenModal from './token-modal'
|
||||
import SellModal from './sell-modal'
|
||||
import Spinner from '../../../images/loader.gif'
|
||||
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import SendTokens from './send-tokens'
|
||||
@@ -22,7 +21,6 @@ class Tokens extends React.Component {
|
||||
tokens: [],
|
||||
selectedTokenToView: '',
|
||||
showModal: false,
|
||||
showSellModal: false,
|
||||
inFetch: true,
|
||||
errMsg: '',
|
||||
selectedTokenToSend: '',
|
||||
@@ -54,7 +52,7 @@ class Tokens extends React.Component {
|
||||
<a
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
href={`${_this.state.explorerURL}/${_this.state.txId}`}
|
||||
href={`${_this.state.explorerURL}${_this.state.txId}`}
|
||||
>
|
||||
{_this.state.txId}
|
||||
</a>
|
||||
@@ -106,7 +104,6 @@ class Tokens extends React.Component {
|
||||
id={`token-${i}`}
|
||||
token={val}
|
||||
showToken={_this.showToken}
|
||||
showSellModal={_this.showSellModal}
|
||||
selectToken={_this.selectToken}
|
||||
/>
|
||||
</Col>
|
||||
@@ -132,23 +129,12 @@ class Tokens extends React.Component {
|
||||
show={_this.state.showModal}
|
||||
explorerURL={_this.state.explorerURL}
|
||||
/>
|
||||
|
||||
<SellModal
|
||||
bchWallet={_this.props.bchWallet}
|
||||
token={
|
||||
_this.state.selectedTokenToView
|
||||
? _this.state.selectedTokenToView
|
||||
: {}
|
||||
}
|
||||
handleOnHide={_this.onHandleToggleSellModal}
|
||||
show={_this.state.showSellModal}
|
||||
explorerURL={_this.state.explorerURL}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
setTxId (txId = null) {
|
||||
console.log(`Setting txid to ${txId}`)
|
||||
_this.setState({
|
||||
txId: txId
|
||||
})
|
||||
@@ -217,14 +203,6 @@ class Tokens extends React.Component {
|
||||
_this.onHandleToggleModal()
|
||||
}
|
||||
|
||||
// This is called by the token-card when the 'Sell' button is clicked.
|
||||
showSellModal (selectedTokenToView) {
|
||||
_this.setState({
|
||||
selectedTokenToView
|
||||
})
|
||||
_this.onHandleToggleSellModal()
|
||||
}
|
||||
|
||||
selectToken (selectedTokenToSend) {
|
||||
_this.setState({
|
||||
selectedTokenToSend
|
||||
@@ -244,15 +222,6 @@ class Tokens extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
onHandleToggleSellModal (refresh = null) {
|
||||
_this.setState({
|
||||
showSellModal: !_this.state.showSellModal
|
||||
})
|
||||
if (refresh) {
|
||||
_this.handleGetTokens(true)
|
||||
}
|
||||
}
|
||||
|
||||
handleError (error) {
|
||||
let errMsg = ''
|
||||
if (error.message) {
|
||||
@@ -296,9 +265,9 @@ class Tokens extends React.Component {
|
||||
let explorerURL
|
||||
|
||||
if (bchjs.restURL.includes('abc.fullstack')) {
|
||||
explorerURL = 'https://explorer.be.cash/tx'
|
||||
explorerURL = 'https://explorer.be.cash/tx/'
|
||||
} else {
|
||||
explorerURL = 'https://blockchair.com/bitcoin-cash/transaction'
|
||||
explorerURL = 'https://token.fullstack.cash/transactions/?txid='
|
||||
}
|
||||
_this.setState({
|
||||
explorerURL
|
||||
|
||||
@@ -1,429 +0,0 @@
|
||||
/*
|
||||
This modal controlls the selling of tokens.
|
||||
It was adapted from token-modal.js and contains references to 'burn' tokens.
|
||||
*/
|
||||
|
||||
// Global npm libraries
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Content, Row, Col, Box, Button, Inputs } from 'adminlte-2-react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import axios from 'axios'
|
||||
|
||||
// Local libraries
|
||||
import './token.css'
|
||||
const siteConfig = require('../../site-config')
|
||||
|
||||
let _this
|
||||
const { Text } = Inputs
|
||||
|
||||
class SellModal extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
_this = this
|
||||
this.state = {
|
||||
copySuccess: '',
|
||||
isBurnView: false,
|
||||
txId: '',
|
||||
errMsg: '',
|
||||
inFetch: false,
|
||||
sellQty: 1,
|
||||
pricePerToken: 0.02
|
||||
}
|
||||
|
||||
this.modalFooter = (
|
||||
<>
|
||||
<Button text='Close' pullLeft onClick={this.handleModal} />
|
||||
<Button
|
||||
type='primary'
|
||||
text='Sell'
|
||||
pullRight
|
||||
onClick={this.handleConfirm}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
this.confirmFooter = (
|
||||
<>
|
||||
<Button text='No' pullLeft onClick={() => this.sellTokens(false)} />
|
||||
<Button
|
||||
type='primary'
|
||||
text='Yes'
|
||||
pullRight
|
||||
onClick={() => this.sellTokens(true)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
this.onDoneFooter = (
|
||||
<>
|
||||
<Button
|
||||
text='Close'
|
||||
pullLeft
|
||||
onClick={() => this.sellTokens(false)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
const token = _this.props.token
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Content
|
||||
title={_this.state.isBurnView ? `Sell ${token.name}` : token.name}
|
||||
modal
|
||||
modalFooter={
|
||||
!_this.state.isBurnView
|
||||
? this.modalFooter
|
||||
: _this.state.txId || _this.state.errMsg
|
||||
? this.onDoneFooter
|
||||
: this.confirmFooter
|
||||
}
|
||||
show={_this.props.show}
|
||||
modalCloseButton
|
||||
onHide={_this.handleModal}
|
||||
>
|
||||
<Row>
|
||||
<Col sm={12}>
|
||||
{_this.state.isBurnView && !_this.state.txId && (
|
||||
<Box loaded={!_this.state.inFetch} className='border-none'>
|
||||
<p>
|
||||
Are you sure you want to sell {`${this.state.sellQty} `}
|
||||
tokens at {`$${this.state.pricePerToken} `} per token?
|
||||
</p>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{_this.state.isBurnView && _this.state.txId && (
|
||||
<div className='text-center '>
|
||||
<p>Order Submitted</p>
|
||||
<p>P2WDB entry CID:</p>
|
||||
<a
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
href={`https://p2wdb.fullstack.cash/entry/hash/${_this.state.txId}`}
|
||||
>
|
||||
{_this.state.txId}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{_this.state.isBurnView && _this.state.errMsg && (
|
||||
<div className='text-center'>
|
||||
<p className='error-color'> {_this.state.errMsg}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!_this.state.isBurnView && (
|
||||
<Box className=' border-none '>
|
||||
<Row>
|
||||
<Col
|
||||
sm={12}
|
||||
className='text-center tokenModal-info-container'
|
||||
>
|
||||
|
||||
<Row className='tokenModal-info-content mt-1 text-left'>
|
||||
<Col xs={12}>
|
||||
<Row>
|
||||
<Col xs={12} sm={3}>
|
||||
<b>TokenId:</b>
|
||||
</Col>
|
||||
<Col xs={9} sm={7}>
|
||||
{token.tokenId}
|
||||
</Col>
|
||||
<Col
|
||||
xs={3}
|
||||
sm={2}
|
||||
className={
|
||||
_this.state.copySuccess ? 'nopadding' : ''
|
||||
}
|
||||
>
|
||||
{_this.state.copySuccess === 'tokenId'
|
||||
? (
|
||||
<div className='copied-text'>
|
||||
<span>Copied!</span>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<FontAwesomeIcon
|
||||
className='icon btn-animation'
|
||||
style={{ cssFloat: 'right' }}
|
||||
size='lg'
|
||||
onClick={() =>
|
||||
_this.copyToClipBoard('tokenId')}
|
||||
icon='copy'
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className='tokenModal-info-content mt-1 text-left'>
|
||||
<Col xs={12}>
|
||||
<Row>
|
||||
<Col xs={12} sm={3}>
|
||||
<b>Ticker:</b>
|
||||
</Col>
|
||||
<Col xs={12} sm={9}>
|
||||
{token.ticker}
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className='tokenModal-info-content mt-1 text-left'>
|
||||
<Col xs={12}>
|
||||
<Row>
|
||||
<Col xs={12} sm={3}>
|
||||
<b>Balance:</b>
|
||||
</Col>
|
||||
<Col xs={12} sm={9}>
|
||||
{token.qty}
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className='tokenModal-info-content mt-1 text-left'>
|
||||
<Col xs={12}>
|
||||
<Row>
|
||||
<Col xs={12} sm={3}>
|
||||
<b>Sell Qty:</b>
|
||||
</Col>
|
||||
<Col xs={12} sm={9}>
|
||||
<Text
|
||||
id='sellQty'
|
||||
name='sellQty'
|
||||
placeholder='1'
|
||||
label=''
|
||||
labelPosition='below'
|
||||
onChange={_this.handleSellQty}
|
||||
className='title-icon'
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className='tokenModal-info-content mt-1 text-left'>
|
||||
<Col xs={12}>
|
||||
<Row>
|
||||
<Col xs={12} sm={3}>
|
||||
<b>Price Per<br />Token (USD):</b>
|
||||
</Col>
|
||||
<Col xs={12} sm={9}>
|
||||
<Text
|
||||
id='pricePerToken'
|
||||
name='pricePerTOken'
|
||||
placeholder='0.02'
|
||||
label=''
|
||||
labelPosition='below'
|
||||
onChange={_this.handlePricePerToken}
|
||||
className='title-icon'
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</Box>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Content>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// Update the quantity of tokens to sell
|
||||
handleSellQty (event) {
|
||||
const value = event.target.value
|
||||
// console.log('value: ', value)
|
||||
|
||||
_this.setState({
|
||||
sellQty: parseFloat(value)
|
||||
})
|
||||
|
||||
// console.log('_this.state.sellQty: ', _this.state.sellQty)
|
||||
}
|
||||
|
||||
handlePricePerToken (event) {
|
||||
const value = event.target.value
|
||||
// console.log('value: ', value)
|
||||
|
||||
_this.setState({
|
||||
pricePerToken: parseFloat(value)
|
||||
})
|
||||
}
|
||||
|
||||
// copy info to clipboard
|
||||
copyToClipBoard (key) {
|
||||
const val = _this.props.token[key]
|
||||
const textArea = document.createElement('textarea')
|
||||
textArea.value = val // copyText.textContent;
|
||||
document.body.appendChild(textArea)
|
||||
textArea.select()
|
||||
document.execCommand('Copy')
|
||||
textArea.remove()
|
||||
|
||||
_this.handleCopySuccess(key)
|
||||
}
|
||||
|
||||
handleCopySuccess (key) {
|
||||
_this.setState({
|
||||
copySuccess: key
|
||||
})
|
||||
setTimeout(() => {
|
||||
_this.setState({
|
||||
copySuccess: ''
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// This is called when the user clicks the 'Sell' button to place their order.
|
||||
handleConfirm () {
|
||||
// Verify that inputs are valid.
|
||||
if (isNaN(_this.state.sellQty)) {
|
||||
alert('Token quantity must be a number.')
|
||||
return
|
||||
}
|
||||
if (isNaN(_this.state.pricePerToken)) {
|
||||
alert('Price per token must be a number.')
|
||||
return
|
||||
}
|
||||
|
||||
_this.setState({
|
||||
isBurnView: true
|
||||
})
|
||||
}
|
||||
|
||||
handleModal () {
|
||||
// if txId exist refresh tokens on close
|
||||
_this.props.handleOnHide(_this.state.txId)
|
||||
|
||||
setTimeout(() => {
|
||||
_this.setState({
|
||||
isBurnView: false,
|
||||
txId: '',
|
||||
errMsg: '',
|
||||
inFetch: false
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
|
||||
async sellTokens (isConfirmed) {
|
||||
try {
|
||||
// Dismiss
|
||||
if (!isConfirmed) {
|
||||
_this.handleModal()
|
||||
return
|
||||
}
|
||||
|
||||
console.log('Putting in order to sell tokens...')
|
||||
|
||||
// Throw up spinny-waiting-gif
|
||||
_this.setState({
|
||||
inFetch: true
|
||||
})
|
||||
|
||||
const { bchWallet, token } = _this.props
|
||||
console.log('token: ', token)
|
||||
|
||||
// Error if trying to sell more tokens than the wallet holds.
|
||||
if (token.qty < _this.state.sellQty) {
|
||||
alert(`Error: The wallet has ${token.qty} tokens, which is less than the ${_this.state.sellQty} tokens you are trying to sell.`)
|
||||
}
|
||||
|
||||
console.log(`bch-dex server: ${siteConfig.bchDexUrl}`)
|
||||
|
||||
// Convert the dollar amount of tokens to sats.
|
||||
const bchSpotPrice = await bchWallet.getUsd()
|
||||
console.log('bchSpotPrice: ', bchSpotPrice)
|
||||
const bchPerToken = _this.state.pricePerToken / bchSpotPrice
|
||||
console.log('bchPerToken: ', bchPerToken)
|
||||
const satsPerToken = Math.floor(bchWallet.bchjs.BitcoinCash.toSatoshi(bchPerToken))
|
||||
console.log('satsPerToken: ', satsPerToken)
|
||||
|
||||
const orderObj = {
|
||||
order: {
|
||||
lokadId: 'SWP',
|
||||
messageType: 1,
|
||||
messageClass: 1,
|
||||
tokenId: token.tokenId,
|
||||
buyOrSell: 'sell',
|
||||
numTokens: _this.state.sellQty,
|
||||
rateInBaseUnit: satsPerToken,
|
||||
minUnitsToExchange: satsPerToken * _this.state.sellQty
|
||||
}
|
||||
}
|
||||
|
||||
const result = await axios.post(`${siteConfig.bchDexUrl}/order`, orderObj)
|
||||
console.log('result.data: ', result.data)
|
||||
|
||||
// console.log('starting sleep')
|
||||
// await bchWallet.bchjs.Util.sleep(5000)
|
||||
// console.log('ended sleep')
|
||||
|
||||
// Remove spinny-waiting-gif and display the TXID of the transaction.
|
||||
_this.setState({
|
||||
txId: result.data.hash,
|
||||
inFetch: false
|
||||
})
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
_this.setState({
|
||||
errMsg: error.message,
|
||||
inFetch: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Deprecated. This handled the burn API call.
|
||||
async handleBurnAll (isConfirmed) {
|
||||
try {
|
||||
// Dismiss
|
||||
if (!isConfirmed) {
|
||||
_this.handleModal()
|
||||
return
|
||||
}
|
||||
|
||||
/**
|
||||
* BURN ALL
|
||||
*
|
||||
*/
|
||||
_this.setState({
|
||||
inFetch: true
|
||||
})
|
||||
const { bchWallet, token } = _this.props
|
||||
|
||||
const result = await bchWallet.burnAll(token.tokenId)
|
||||
console.log('burn txid: ', result)
|
||||
_this.setState({
|
||||
txId: result,
|
||||
inFetch: false
|
||||
})
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
_this.setState({
|
||||
errMsg: error.message,
|
||||
inFetch: false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SellModal.propTypes = {
|
||||
token: PropTypes.object.isRequired,
|
||||
show: PropTypes.bool.isRequired,
|
||||
handleOnHide: PropTypes.func.isRequired,
|
||||
bchWallet: PropTypes.object, // get minimal-slp-wallet instance
|
||||
explorerURL: PropTypes.string
|
||||
}
|
||||
|
||||
export default SellModal
|
||||
@@ -102,7 +102,7 @@ class SendTokens extends React.Component {
|
||||
{_this.state.errMsg && (
|
||||
<p className='error-color'>{_this.state.errMsg}</p>
|
||||
)}
|
||||
{/* {_this.state.txId && (
|
||||
{_this.state.txId && (
|
||||
<p className=''>
|
||||
Transaction ID:
|
||||
<a
|
||||
@@ -113,7 +113,7 @@ class SendTokens extends React.Component {
|
||||
{_this.state.txId}
|
||||
</a>
|
||||
</p>
|
||||
)} */}
|
||||
)}
|
||||
{name && (
|
||||
<span>
|
||||
Selected Token : <b>{name}</b>
|
||||
@@ -216,16 +216,16 @@ class SendTokens extends React.Component {
|
||||
|
||||
// Send token.
|
||||
const result = await bchWalletLib.sendTokens(receiver, 5.0)
|
||||
// console.log('result: ', result)
|
||||
console.log('txid: ', result)
|
||||
|
||||
if (siteConfig.interface === 'consumer-api') {
|
||||
_this.setState({
|
||||
txId: result.txid,
|
||||
txId: result,
|
||||
inFetch: false
|
||||
})
|
||||
|
||||
// Set the transaction ID in Tokens state
|
||||
_this.props.setTxId(result.txid)
|
||||
_this.props.setTxId(result)
|
||||
} else {
|
||||
_this.setState({
|
||||
txId: result,
|
||||
|
||||
@@ -44,7 +44,7 @@ class TokenCard extends React.Component {
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={4} className='text-center mb-1'>
|
||||
<Col xs={6} className='text-center mb-1'>
|
||||
<Button
|
||||
text='Info'
|
||||
type='primary'
|
||||
@@ -55,18 +55,7 @@ class TokenCard extends React.Component {
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col xs={4} className='text-center mb-1'>
|
||||
<Button
|
||||
text='Sell'
|
||||
type='primary'
|
||||
className='btn-lg max-width'
|
||||
onClick={() => {
|
||||
_this.props.showSellModal(token)
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col xs={4} className='text-center'>
|
||||
<Col xs={6} className='text-center'>
|
||||
<Button
|
||||
text='Send'
|
||||
type='primary'
|
||||
|
||||
@@ -5,7 +5,6 @@ import Wallet from './admin-lte/wallet'
|
||||
import Tokens from './admin-lte/tokens'
|
||||
import Configure from './admin-lte/configure'
|
||||
import SendReceive from './admin-lte/send-receive'
|
||||
import Orders from './admin-lte/orders'
|
||||
|
||||
const { Item } = Sidebar
|
||||
|
||||
@@ -13,11 +12,6 @@ const MenuComponents = props => {
|
||||
return [
|
||||
{
|
||||
active: true,
|
||||
key: 'Orders',
|
||||
component: <Orders key='Orders' {...props} />,
|
||||
menuItem: <Item icon='fas-coins' key='Orders' text='Orders' />
|
||||
},
|
||||
{
|
||||
key: 'Tokens',
|
||||
component: <Tokens key='Tokens' {...props} />,
|
||||
menuItem: (
|
||||
|
||||
Reference in New Issue
Block a user