Skip to content

Commit a0756ef

Browse files
author
MattDHill
committed
mock broadcasting
1 parent 809f71c commit a0756ef

File tree

12 files changed

+197
-80
lines changed

12 files changed

+197
-80
lines changed

‎src/app/components/block-button/block-button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@ class BlockButton extends React.PureComponent<BlockButtonProps> {
1616
null
1717
) : this.props.user.iBlock ? (
1818
<button
19-
onClick={() => this.props.toggleModal(<CheckoutModal type={BorkType.unblock} txCount={1} />)}
19+
onClick={() => this.props.toggleModal(<CheckoutModal data={{ type: BorkType.unblock, content: this.props.user.address }} />)}
2020
className="unblock-button"
2121
>
2222
Blocking
2323
</button>
2424
) : (
25-
<button onClick={() => this.props.toggleModal(<CheckoutModal type={BorkType.block} txCount={1} />)}>Block</button>
25+
<button onClick={() => this.props.toggleModal(<CheckoutModal data={{ type: BorkType.block, content: this.props.user.address }} />)}>Block</button>
2626
)
2727
}
2828
}

‎src/app/components/bork-buttons/bork-buttons.tsx

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,42 @@ class BorkButtons extends React.PureComponent<BorkButtonsProps> {
2222

2323
rebork = () => {
2424
const modal = (
25-
<CheckoutModal type={BorkType.rebork} txCount={1} />
25+
<CheckoutModal
26+
data={{
27+
type: BorkType.rebork,
28+
parent: {
29+
txid: this.props.bork.txid,
30+
tip: '10',
31+
},
32+
}}
33+
/>
2634
)
2735
this.props.toggleModal(modal)
2836
}
2937

3038
like = () => {
3139
const modal = (
32-
<CheckoutModal type={BorkType.like} txCount={1} />
40+
<CheckoutModal
41+
data={{
42+
type: BorkType.like,
43+
parent: {
44+
txid: this.props.bork.txid,
45+
tip: '10',
46+
},
47+
}}
48+
/>
3349
)
3450
this.props.toggleModal(modal)
3551
}
3652

3753
flag = () => {
3854
const modal = (
39-
<CheckoutModal type={BorkType.flag} txCount={1} />
55+
<CheckoutModal
56+
data={{
57+
type: BorkType.flag,
58+
content: this.props.bork.txid,
59+
}}
60+
/>
4061
)
4162
this.props.toggleModal(modal)
4263
}

‎src/app/components/follow-button/follow-button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@ class FollowButton extends React.PureComponent<FollowButtonProps> {
1616
null
1717
) : this.props.user.iFollow ? (
1818
<button
19-
onClick={() => this.props.toggleModal(<CheckoutModal type={BorkType.unfollow} txCount={1} />)}
19+
onClick={() => this.props.toggleModal(<CheckoutModal data={{ type: BorkType.unfollow, content: this.props.user.address }} />)}
2020
className="unfollow-button"
2121
>
2222
Following
2323
</button>
2424
) : (
25-
<button onClick={() => this.props.toggleModal(<CheckoutModal type={BorkType.follow} txCount={1} />)}>Follow</button>
25+
<button onClick={() => this.props.toggleModal(<CheckoutModal data={{ type: BorkType.follow, content: this.props.user.address }} />)}>Follow</button>
2626
)
2727
}
2828
}

‎src/app/components/modals/checkout-modal/checkout-modal.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,10 @@
22
& button {
33
margin-top: 20px;
44
}
5-
}
5+
}
6+
7+
.checkout-form input[type=password] {
8+
width: 100%;
9+
margin-bottom: 14px;
10+
box-sizing: border-box;
11+
}

‎src/app/components/modals/checkout-modal/checkout-modal.tsx

Lines changed: 71 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,104 @@
11
import React from 'react'
2-
import { BorkType } from '../../../../types/types'
2+
import { BorkType, TxData } from '../../../../types/types'
3+
import { withAuthContext, AuthProps } from '../../../contexts/auth-context'
34
import BigNumber from 'bignumber.js'
4-
import WebService from '../../../web-service'
5+
import WebService, { ConstructRequest } from '../../../web-service'
6+
import { JsWallet } from 'borker-rs'
7+
import * as CryptoJS from 'crypto-js'
8+
import * as Storage from 'idb-keyval'
59
import '../../../App.scss'
610
import './checkout-modal.scss'
711

8-
export interface CheckoutModalProps {
9-
txCount: number
10-
type: BorkType
12+
export interface CheckoutModalProps extends AuthProps {
13+
data: ConstructRequest
1114
}
1215

1316
export interface CheckoutModalState {
14-
txFee: BigNumber
17+
txDatas: TxData[]
18+
fees: BigNumber
19+
tip: BigNumber
20+
totalCost: BigNumber
21+
password: string
1522
}
1623

1724
class CheckoutModal extends React.Component<CheckoutModalProps, CheckoutModalState> {
1825
public webService: WebService
1926

2027
constructor (props: CheckoutModalProps) {
2128
super(props)
22-
this.state = { txFee: new BigNumber(0) }
29+
this.state = {
30+
txDatas: [],
31+
fees: new BigNumber(0),
32+
tip: new BigNumber(0),
33+
totalCost: new BigNumber(0),
34+
password: '',
35+
}
2336
this.webService = new WebService()
2437
}
2538

2639
async componentDidMount () {
40+
const txDatas = await this.webService.construct(this.props.data)
41+
42+
let tip: BigNumber = new BigNumber(0)
43+
if ([BorkType.comment, BorkType.like, BorkType.rebork].includes(this.props.data.type)) {
44+
tip = new BigNumber(txDatas[0].outputs[1].value)
45+
}
46+
47+
const fees = txDatas.reduce((sum, txData) => {
48+
return sum.plus(txData.fee)
49+
}, new BigNumber(0))
50+
51+
const totalCost = fees.plus(tip)
52+
2753
this.setState({
28-
txFee: await this.webService.getTxFee(),
54+
txDatas,
55+
tip,
56+
fees,
57+
totalCost,
2958
})
3059
}
3160

32-
broadcast = async () => {
33-
alert ('broadcasts coming soon!')
61+
handlePasswordChange = (e: React.BaseSyntheticEvent) => {
62+
this.setState({ password: e.target.value })
63+
}
64+
65+
signAndBroadcast = async (e: React.FormEvent<HTMLFormElement>) => {
66+
e.preventDefault()
67+
const encrypted = await Storage.get<string>('wallet')
68+
const wallet = CryptoJS.AES.decrypt(encrypted, this.state.password)
69+
70+
const rawTxs = await Promise.all(this.state.txDatas.map(txData => {
71+
console.log(wallet)
72+
return txData.txHash
73+
}))
74+
75+
this.webService.signAndBroadcastTx(rawTxs)
3476
}
3577

3678
render () {
37-
const { txCount, type } = this.props
38-
const { txFee } = this.state
39-
const cost = txFee.times(txCount).integerValue(BigNumber.ROUND_CEIL).toString()
40-
const newType = type === BorkType.setName ||
41-
type === BorkType.setBio ||
42-
type === BorkType.setAvatar ?
43-
'Profile Update' : type
44-
45-
return (
79+
const { data } = this.props
80+
const { txDatas, tip, totalCost, fees, password } = this.state
81+
82+
return !txDatas.length ? (
83+
<p>Loading</p>
84+
) : (
4685
<div className="checkout-modal-content">
4786
<h1>Order Summary</h1>
48-
<p>Transaction Type: <b>{newType}</b></p>
49-
<p>Total Transactions: {txCount}</p>
50-
<p>Total Cost: <b>{cost} DOGE</b></p>
51-
<button onClick={this.broadcast}>Broadcast!</button>
87+
<p>Transaction Type: <b>{data.type}</b></p>
88+
<p>Total Transactions: {txDatas.length}</p>
89+
<p>Fees: {fees.toString()} DOGE</p>
90+
{tip.isGreaterThan(0) &&
91+
<p>Tip: {tip.toString()} DOGE</p>
92+
}
93+
<br></br>
94+
<p>Total Cost: <b>{totalCost.toString()} DOGE</b></p>
95+
<form onSubmit={this.signAndBroadcast} className="checkout-form">
96+
<input type="password" placeholder="Password or Pin" value={password} onChange={this.handlePasswordChange} />
97+
<input type="submit" value="Sign and Broadcast!" />
98+
</form>
5299
</div>
53100
)
54101
}
55102
}
56103

57-
export default CheckoutModal
104+
export default withAuthContext(CheckoutModal)

‎src/app/pages/auth-routes.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { AuthContext } from '../contexts/auth-context'
1313
import borkButton from '../../assets/bork-button.png'
1414
import BigNumber from 'bignumber.js'
1515
import WebService from '../web-service'
16+
import { withAppContext, AppProps } from '../contexts/app-context'
1617

1718
export interface AuthRoutesState {
1819
title: string
@@ -39,10 +40,10 @@ const styles = {
3940

4041
const mql = window.matchMedia(`(min-width: 800px)`)
4142

42-
class AuthRoutes extends React.Component<{}, AuthRoutesState> {
43+
class AuthRoutes extends React.Component<AppProps, AuthRoutesState> {
4344
public webService: WebService
4445

45-
constructor (props: {}) {
46+
constructor (props: AppProps) {
4647
super(props)
4748
this.state = {
4849
title: '',
@@ -58,7 +59,7 @@ class AuthRoutes extends React.Component<{}, AuthRoutesState> {
5859
mql.addListener(this.mediaQueryChanged)
5960

6061
this.setState({
61-
balance: await this.webService.getBalance(),
62+
balance: await this.webService.getBalance(this.props.address),
6263
})
6364
}
6465

@@ -156,4 +157,4 @@ class AuthRoutes extends React.Component<{}, AuthRoutesState> {
156157
}
157158
}
158159

159-
export default AuthRoutes
160+
export default withAppContext(AuthRoutes)

‎src/app/pages/borks/bork-new/bork-new.tsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { RouteComponentProps } from 'react-router'
33
import { AuthProps, withAuthContext } from '../../../contexts/auth-context'
44
import CheckoutModal from '../../../components/modals/checkout-modal/checkout-modal'
55
import BorkPreviewComponent from '../../../components/bork-preview/bork-preview';
6-
import WebService from '../../../web-service'
6+
import WebService, { ConstructRequest } from '../../../web-service'
77
import { BorkType, Bork } from '../../../../types/types'
88
import './bork-new.scss'
99
import '../../../App.scss'
@@ -53,18 +53,27 @@ class NewBorkPage extends React.Component<NewBorkProps, NewBorkState> {
5353
const charCount = body.length
5454
const txCount = charCount === 0 ? 0 : charCount > 77 ? Math.ceil(1 + (charCount - 77) / 76) : 1
5555

56+
const data: ConstructRequest = {
57+
type: parent ? BorkType.comment : BorkType.bork,
58+
content: body,
59+
}
60+
if (parent) {
61+
data.parent = {
62+
txid: parent.txid,
63+
tip: '10',
64+
}
65+
}
66+
5667
const modal = (
57-
<CheckoutModal type={parent ? BorkType.comment : BorkType.bork} txCount={txCount} />
68+
<CheckoutModal data={data} />
5869
)
5970

6071
return (
6172
<div className="page-content">
6273
{parent &&
6374
<div className="commenting-on">
6475
<b>Commenting On:</b>
65-
<BorkPreviewComponent
66-
bork={parent}
67-
/>
76+
<BorkPreviewComponent bork={parent} />
6877
</div>
6978
}
7079
<form onSubmit={(e) => { e.preventDefault(); this.props.toggleModal(modal) }} className="bork-form">

‎src/app/pages/profile/profile-edit/profile-edit.tsx

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,45 @@ import CheckoutModal from '../../../components/modals/checkout-modal/checkout-mo
44
import { User, BorkType } from '../../../../types/types'
55
import './profile-edit.scss'
66
import '../../../App.scss'
7+
import { RouteComponentProps } from 'react-router';
78

8-
export interface ProfileEditProps extends AuthProps {
9+
export interface ProfileEditParams {
10+
type: BorkType.setName | BorkType.setBio | BorkType.setAvatar
11+
}
12+
13+
14+
export interface ProfileEditProps extends AuthProps, RouteComponentProps<ProfileEditParams> {
915
user: User
1016
}
1117

1218
export interface ProfileEditState {
13-
name: string
14-
bio: string
19+
previousValue: string
20+
value: string
1521
}
1622

1723
class ProfileEditPage extends React.Component<ProfileEditProps, ProfileEditState> {
1824

1925
constructor (props: ProfileEditProps) {
2026
super(props)
2127
this.state = {
22-
name: props.user.name,
23-
bio: props.user.bio,
28+
previousValue: props.match.params.type === BorkType.setName ? props.user.name :
29+
BorkType.setBio ? props.user.bio :
30+
BorkType.setAvatar ? props.user.avatarLink : '',
31+
value: '',
2432
}
2533
}
2634

2735
async componentDidMount () {
2836
this.props.setTitle('Edit Profile')
2937
this.props.setShowFab(false)
30-
}
31-
32-
handleNameChange = (e: React.BaseSyntheticEvent) => {
3338
this.setState({
34-
name: e.target.value,
39+
value: this.state.previousValue,
3540
})
3641
}
3742

38-
handleBioChange = (e: React.BaseSyntheticEvent) => {
43+
handleValueChange = (e: React.BaseSyntheticEvent) => {
3944
this.setState({
40-
bio: e.target.value,
45+
value: e.target.value,
4146
})
4247
}
4348

@@ -46,25 +51,19 @@ class ProfileEditPage extends React.Component<ProfileEditProps, ProfileEditState
4651
}
4752

4853
render () {
49-
const { name, bio } = this.state
50-
51-
const nameTxCount = this.props.user.name === name ? 0 : 1
52-
const bioTxCount = this.props.user.bio === bio ? 0 : 1
53-
54-
const txCount = nameTxCount + bioTxCount
54+
const { type } = this.props.match.params
55+
const { previousValue, value } = this.state
5556

5657
const modal = (
57-
<CheckoutModal type={BorkType.setName} txCount={txCount} />
58+
<CheckoutModal data={{ type, content: value }} />
5859
)
5960

6061
return (
6162
<div className="page-content">
6263
<form onSubmit={(e) => { e.preventDefault(); this.props.toggleModal(modal) }} className="profile-edit-form">
63-
<label>Name</label>
64-
<input type="text" value={name} maxLength={77} onChange={this.handleNameChange} />
65-
<label>Bio</label>
66-
<input type="text" value={bio} maxLength={77} onChange={this.handleBioChange} />
67-
<input type="submit" value="Checkout" disabled={!txCount} />
64+
<label>Value</label>
65+
<input type="text" value={name} maxLength={77} onChange={this.handleValueChange} />
66+
<input type="submit" value="Checkout" disabled={previousValue === value} />
6867
</form>
6968
</div>
7069
)

0 commit comments

Comments
 (0)