psf/psf-memo-client
1
0
Fork 0
mirror of https://github.com/Permissionless-Software-Foundation/psf-memo-client.git synced 2026-09-21 16:52:02 -07:00
Code Issues Packages Projects Releases Wiki Activity

Final polish

Browse Source
This commit is contained in:
Chris Troutner
2022-06-19 08:18:01 -07:00
parent 4a2eadf80a
commit 29ceeb9aab
7 changed files with 110 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React-Bootstrap CodeSandbox Starter</title>
<title>BCH Web3 Template</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
src/App.js
+23 -21
View File
@@ -10,18 +10,18 @@ import { useQueryParam, StringParam } from 'use-query-params'
// Local libraries
import './App.css'
import LoadScripts from './components/load-scripts'
import NFTs from './components/nfts'
// import NFTs from './components/nfts'
import WaitingModal from './components/waiting-modal'
import AsyncLoad from './services/async-load'
import ServerSelect from './components/servers'
import Footer from './components/footer'
// Token ID for Trout's NFTs
const groupTokenId = '030563ddd65772d8e9b79b825529ed53c7d27037507b57c528788612b4911107'
import GetBalance from './components/balance'
// Default restURL for a back-end server.
let serverURL = 'https://free-bch.fullstack.cash'
let _this
class App extends React.Component {
constructor (props) {
super(props)
@@ -41,6 +41,8 @@ class App extends React.Component {
}
this.cnt = 0
_this = this
}
async componentDidMount () {
@@ -53,26 +55,26 @@ class App extends React.Component {
const wallet = await this.asyncLoad.initWallet(serverURL)
this.addToModal('Getting Group Token Information')
// this.addToModal('Getting Group Token Information')
// Get Group Token info
const groupData = await this.asyncLoad.getGroupData(groupTokenId)
// const groupData = await this.asyncLoad.getGroupData(groupTokenId)
// console.log(`groupData: ${JSON.stringify(groupData, null, 2)}`)
this.addToModal('Getting NFT Information')
// this.addToModal('Getting NFT Information')
/// Get NFT child info
const nftData = []
for (let i = 0; i < groupData.nfts.length; i++) {
const tokenData = await this.asyncLoad.getTokenData(groupData.nfts[i])
nftData.push(tokenData)
}
// const nftData = []
// for (let i = 0; i < groupData.nfts.length; i++) {
// const tokenData = await this.asyncLoad.getTokenData(groupData.nfts[i])
// nftData.push(tokenData)
// }
// console.log(`nft data: ${JSON.stringify(nftData, null, 2)}`)
this.tokenData = {
groupData,
nftData
}
// this.tokenData = {
// groupData,
// nftData
// }
this.setState({
wallet,
@@ -81,7 +83,7 @@ class App extends React.Component {
} catch (err) {
this.modalBody = [
`Error: ${err.message}`,
`Try selecting a different back end server using the drop-down menu at the bottom of the app.`
'Try selecting a different back end server using the drop-down menu at the bottom of the app.'
]
this.setState({
@@ -98,7 +100,7 @@ class App extends React.Component {
<>
<GetRestUrl />
<LoadScripts />
{this.state.walletInitialized ? <InitializedView wallet={this.state.wallet} tokens={this.tokenData} /> : <UninitializedView modalBody={this.state.modalBody} hideSpinner={this.state.hideSpinner}/>}
{this.state.walletInitialized ? <InitializedView wallet={this.state.wallet} tokens={this.tokenData} /> : <UninitializedView modalBody={this.state.modalBody} hideSpinner={this.state.hideSpinner} />}
<ServerSelect />
<Footer />
</>
@@ -125,7 +127,7 @@ function UninitializedView (props) {
<Container style={{ backgroundColor: '#ddd' }}>
<Row style={{ padding: '25px' }}>
<Col>
<h1 className='header'>NFT Explorer</h1>
<h1 className='header'>PSF Web3 Demo</h1>
<WaitingModal heading={heading} body={props.modalBody} hideSpinner={props.hideSpinner} />
</Col>
@@ -141,11 +143,11 @@ function InitializedView (props) {
<Container style={{ backgroundColor: '#ddd' }}>
<Row style={{ padding: '25px' }}>
<Col>
<h1 className='header'>NFT Explorer</h1>
<h1 className='header'>PSF Web3 Demo</h1>
</Col>
</Row>
</Container>
<NFTs wallet={props.wallet} tokens={props.tokens} />
<GetBalance wallet={_this.state.wallet} />
</>
)
}
src/components/balance.js
+82
View File
@@ -0,0 +1,82 @@
/*
Component for looking up the balance of a BCH address.
*/
// Global npm libraries
import React from 'react'
import { Container, Row, Col, Form, Button, Spinner } from 'react-bootstrap'
let _this
class GetBalance extends React.Component {
constructor(props) {
super(props)
this.state = {
balance: '',
textInput: '',
wallet: props.wallet
}
_this = this
}
render () {
return (
<>
<Container>
<Row>
<Col className='text-break' style={{ textAlign: 'center' }}>
<Form>
<Form.Group className='mb-3' controlId='formBasicEmail'>
<Form.Label>Enter a BCH address to check the balance.</Form.Label>
<Form.Control type='text' placeholder='bitcoincash:qqlrzp23w08434twmvr4fxw672whkjy0py26r63g3d' onChange={e => this.setState({textInput: e.target.value})} />
</Form.Group>
<Button variant='primary' onClick={this.getBalance}>
Check Balance
</Button>
</Form>
</Col>
</Row>
<br />
<Row>
<Col style={{ textAlign: 'center' }}>
{this.state.balance}
</Col>
</Row>
</Container>
</>
)
}
async getBalance(event) {
try {
const textInput = _this.state.textInput
// Exit on invalid input
if(!textInput) return
if(!textInput.includes('bitcoincash:')) return
_this.setState({
balance: (<span>Retrieving balance... <Spinner animation='border' /></span>)
})
const balance = await _this.state.wallet.getBalance(textInput)
console.log('balance: ', balance)
const bchBalance = _this.state.wallet.bchjs.BitcoinCash.toBitcoinCash(balance)
_this.setState({
balance: `Balance: ${balance} sats, ${bchBalance} BCH`
})
} catch(err) {
_this.setState({
balance: `Error: ${err.message}`
})
}
}
}
export default GetBalance
src/components/footer.js
+1 -4
View File
@@ -6,7 +6,7 @@
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
const IPFS_CID = 'bafybeiff7sjpdizarbtjgc3ftefyzndggsx3uxqs7l42ruzcwdkbuld6eq'
const IPFS_CID = 'bafybeie6gh5bngwne63tycok3okrh5i6dxt7xaoby62psjkvt7n7pl2ou4'
class Footer extends React.Component {
render () {
@@ -16,13 +16,10 @@ class Footer extends React.Component {
<Col>
<h6>Site Mirrors</h6>
<ul>
<li><a href='https://troutnfts.com' target='_blank' rel='noreferrer'>troutnfts.com</a></li>
<li><a href={`https://${IPFS_CID}.ipfs.dweb.link/`} target='_blank' rel='noreferrer'>Filecoin</a></li>
</ul>
</Col>
<Col />
<Col>
<h6>Source Code</h6>
<ul>
src/components/nfts/index.js
+1 -1
View File
@@ -42,7 +42,7 @@ class NFTs extends React.Component {
<>
<Container>
<Row>
<Col className="text-break" style={{ textAlign: 'center' }}>
<Col className='text-break' style={{ textAlign: 'center' }}>
<p>Loading NFTs associated with Group token{' '}
<a
href={`https://token.fullstack.cash/?tokenid=${this.groupData.tokenId}`}
src/components/servers/index.js
+1 -28
View File
@@ -18,13 +18,6 @@ const defaultOptions = [
{ value: 'https://wa-usa-bch-consumer.fullstackcash.nl', label: 'https://wa-usa-bch-consumer.fullstackcash.nl' }
]
// const defaultOptions = [
// 'https://free-bch.fullstack.cash',
// 'https://bc01-ca-bch-consumer.fullstackcash.nl',
// 'https://pdx01-usa-bch-consumer.fullstackcash.nl',
// 'https://wa-usa-bch-consumer.fullstackcash.nl'
// ]
class ServerSelect extends React.Component {
constructor (props) {
super(props)
@@ -36,15 +29,6 @@ class ServerSelect extends React.Component {
}
}
// async componentDidMount () {
// const servers = await this.getServers()
// // console.log('Server list retrieved from GitHub Gist: ', servers)
//
// this.setState({
// options: servers
// })
// }
// This is called when the a new drop-down item is selected.
selectServer (event) {
console.log('event.target.value: ', event.target.value)
@@ -56,16 +40,6 @@ class ServerSelect extends React.Component {
window.location.href = `/?restURL=${value}`
}
// render() {
// return (
// <div>
// <Select options={this.state.options} onChange={(values) => this.selectServer(values)} />
// <p style={{textAlign: 'center'}}>Having trouble loading the NFTs? If NFTs don't load after a minute, then
// try selecting a different back-end server.</p>
// </div>
// )
// }
render () {
const items = []
for (let i = 0; i < this.state.options.length; i++) {
@@ -81,8 +55,7 @@ class ServerSelect extends React.Component {
<Col>
<br />
<h5 style={{ textAlign: 'center' }}>
Having trouble loading the NFTs? If NFTs don't load after a minute,
then try selecting a different back-end server.
Having trouble loading the Balance? Try selecting a different back-end server.
</h5>
<Form.Select onChange={(values) => this.selectServer(values)}>
<option>Choose a back-end server</option>
src/services/async-load.js
+1 -1
View File
@@ -37,7 +37,7 @@ class AsyncLoad {
const wallet = new this.BchWallet(null, options)
await wallet.walletInfoPromise
console.log(`mnemonic: ${wallet.walletInfo.mnemonic}`)
// console.log(`mnemonic: ${wallet.walletInfo.mnemonic}`)
this.wallet = wallet