getBalance and getUtxos working. update packages

Author: MattDHill

Diff for: .gitignore

@@ -16,6 +16,7 @@ config.ts
 .env.development.local
 .env.test.local
 .env.production.local
+.vscode
 
 npm-debug.log*
 yarn-debug.log*

Diff for: package-lock.json

@@ -1,29 +1,35 @@
 {
   "name": "borker-app",
   "version": "0.1.0",
-  "private": true,
+  "description": "GUI for censorship-resistant news sharing on Dogecoin",
+  "author": "MattDHill",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:MattDHill/borker-app.git"
+  },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.12",
-    "@fortawesome/free-regular-svg-icons": "^5.6.3",
-    "@fortawesome/free-solid-svg-icons": "^5.6.3",
-    "@fortawesome/react-fontawesome": "^0.1.3",
-    "bignumber.js": "^8.0.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.18",
+    "@fortawesome/free-regular-svg-icons": "^5.8.2",
+    "@fortawesome/free-solid-svg-icons": "^5.8.2",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "bignumber.js": "^8.1.1",
     "borker-rs": "^0.1.6",
     "crypto-js": "^3.1.9-1",
-    "idb-keyval": "^3.1.0",
-    "lighthouse": "^4.0.0-alpha.2-3.2.1",
-    "moment": "^2.22.2",
-    "qrcode.react": "^0.9.1",
-    "react": "^16.7.0",
+    "idb-keyval": "^3.2.0",
+    "lighthouse": "^5.0.0",
+    "moment": "^2.24.0",
+    "qrcode.react": "^0.9.3",
+    "react": "^16.8.6",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.7.0",
+    "react-dom": "^16.8.6",
     "react-modal": "^3.8.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "react-sidebar": "^3.0.2",
-    "react-tabs": "^2.3.0",
+    "react-tabs": "^3.0.0",
     "request": "^2.88.0",
-    "request-promise": "^4.2.2",
+    "request-promise": "^4.2.4",
     "wasm-loader": "^1.3.0"
   },
   "scripts": {
@@ -43,19 +49,19 @@
   ],
   "devDependencies": {
     "@types/crypto-js": "^3.1.43",
-    "@types/jest": "^23.3.10",
-    "@types/node": "^10.12.18",
-    "@types/qrcode.react": "^0.8.1",
-    "@types/react": "^16.7.18",
+    "@types/jest": "^24.0.13",
+    "@types/node": "^12.0.2",
+    "@types/qrcode.react": "^0.8.2",
+    "@types/react": "^16.8.17",
     "@types/react-copy-to-clipboard": "^4.2.6",
-    "@types/react-dom": "^16.0.11",
-    "@types/react-modal": "^3.6.0",
-    "@types/react-router-dom": "^4.3.1",
+    "@types/react-dom": "^16.8.4",
+    "@types/react-modal": "^3.8.2",
+    "@types/react-router-dom": "^4.3.3",
     "@types/react-sidebar": "^3.0.0",
-    "@types/react-tabs": "^2.3.0",
-    "@types/request-promise": "^4.1.42",
-    "node-sass": "^4.10.0",
+    "@types/react-tabs": "^2.3.1",
+    "@types/request-promise": "^4.1.43",
+    "node-sass": "^4.12.0",
     "react-app-rewired": "^1.6.2",
-    "typescript": "^3.1.6"
+    "typescript": "^3.4.5"
   }
 }

Diff for: package.json

@@ -10,6 +10,7 @@ import { faRetweet } from '@fortawesome/free-solid-svg-icons'
 import { faSkullCrossbones } from '@fortawesome/free-solid-svg-icons'
 import CheckoutModal from '../modals/checkout-modal/checkout-modal'
 import { withAppContext, AppProps } from '../../contexts/app-context'
+import BigNumber from 'bignumber.js'
 import '../../App.scss'
 import './bork-buttons.scss'
 
@@ -27,7 +28,7 @@ class BorkButtons extends React.PureComponent<BorkButtonsProps> {
           type: BorkType.rebork,
           parent: {
             txid: this.props.bork.txid,
-            tip: '10',
+            tip: new BigNumber(10),
           },
         }}
       />
@@ -42,7 +43,7 @@ class BorkButtons extends React.PureComponent<BorkButtonsProps> {
         type: BorkType.like,
         parent: {
           txid: this.props.bork.txid,
-          tip: '10',
+          tip: new BigNumber(10),
         },
       }}
       />
@@ -96,7 +97,7 @@ class BorkButtons extends React.PureComponent<BorkButtonsProps> {
               <a onClick={this.flag}>
                 <FontAwesomeIcon
                   icon={faSkullCrossbones}
-                  style={bork.iFlag ? {color: 'red'} : {} }
+                  style={bork.iFlag ? {color: 'black'} : {} }
                 /> {showCount && (bork.flagsCount || 0)}
               </a>
             </td>

Diff for: src/app/components/bork-buttons/bork-buttons.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { BorkType, TxData } from '../../../../types/types'
 import { withAuthContext, AuthProps } from '../../../contexts/auth-context'
 import BigNumber from 'bignumber.js'
 import WebService, { ConstructRequest } from '../../../web-service'
@@ -14,7 +13,6 @@ export interface CheckoutModalProps extends AuthProps {
 }
 
 export interface CheckoutModalState {
-  txDatas: TxData[]
   fees: BigNumber
   tip: BigNumber
   totalCost: BigNumber
@@ -27,7 +25,6 @@ class CheckoutModal extends React.Component<CheckoutModalProps, CheckoutModalSta
   constructor (props: CheckoutModalProps) {
     super(props)
     this.state = {
-      txDatas: [],
       fees: new BigNumber(0),
       tip: new BigNumber(0),
       totalCost: new BigNumber(0),
@@ -37,24 +34,16 @@ class CheckoutModal extends React.Component<CheckoutModalProps, CheckoutModalSta
   }
 
   async componentDidMount () {
-    const txDatas = await this.webService.construct(this.props.data)
+    const { txCount, parent } = this.props.data
 
-    let tip: BigNumber = new BigNumber(0)
-    if ([BorkType.comment, BorkType.like, BorkType.rebork].includes(this.props.data.type)) {
-      tip = new BigNumber(txDatas[0].outputs[1].value)
-    }
-
-    const fees = txDatas.reduce((sum, txData) => {
-      return sum.plus(txData.fee)
-    }, new BigNumber(0))
+    const fees = txCount ? new BigNumber(txCount).times(1) : new BigNumber(1)
 
-    const totalCost = fees.plus(tip)
+    const tip = parent ? parent.tip : new BigNumber(0)
 
     this.setState({
-      txDatas,
-      tip,
       fees,
-      totalCost,
+      tip,
+      totalCost: fees.plus(tip),
     })
   }
 
@@ -64,28 +53,29 @@ class CheckoutModal extends React.Component<CheckoutModalProps, CheckoutModalSta
 
   signAndBroadcast = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
+
+    const utxos = await this.webService.getUtxos(this.state.totalCost.toString())
+
     const encrypted = await Storage.get<string>('wallet')
     const wallet = CryptoJS.AES.decrypt(encrypted, this.state.password)
 
-    const rawTxs = await Promise.all(this.state.txDatas.map(txData => {
-      console.log(wallet)
-      return txData.txHash
-    }))
+    const borkerLib = await import('borker-rs')
+
+    // const rawTxs = new borkerLib.construct(this.props.data, utxos)
+    const rawTxs = ['']
 
     this.webService.signAndBroadcastTx(rawTxs)
   }
 
   render () {
     const { data } = this.props
-    const { txDatas, tip, totalCost, fees, password } = this.state
+    const { tip, totalCost, fees, password } = this.state
 
-    return !txDatas.length ? (
-      <p>Loading</p>
-    ) : (
+    return (
       <div className="checkout-modal-content">
         <h1>Order Summary</h1>
         <p>Transaction Type: <b>{data.type}</b></p>
-        <p>Total Transactions: {txDatas.length}</p>
+        <p>Total Transactions: {data.txCount || 1}</p>
         <p>Fees: {fees.toString()} DOGE</p>
         {tip.isGreaterThan(0) &&
           <p>Tip: {tip.toString()} DOGE</p>

Diff for: src/app/components/modals/checkout-modal/checkout-modal.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import BigNumber from 'bignumber.js'
 import './withdrawal-modal.scss'
+import WebService from '../../../web-service';
 
 export interface WithdrawalModalProps {
   balance: BigNumber
@@ -12,10 +13,15 @@ export interface WithdrawalModalState {
 }
 
 class WithdrawalModal extends React.Component<WithdrawalModalProps, WithdrawalModalState> {
-
-  state = {
-    address: '',
-    amount: '',
+  public webService: WebService
+
+  constructor (props: WithdrawalModalProps) {
+    super(props)
+    this.state = {
+      address: '',
+      amount: '',
+    }
+    this.webService = new WebService()
   }
 
   handleAddressChange = (e: React.BaseSyntheticEvent) => {
@@ -26,20 +32,26 @@ class WithdrawalModal extends React.Component<WithdrawalModalProps, WithdrawalMo
     this.setState({ amount: e.target.value })
   }
 
+  withdraw = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const utxos = await this.webService.getUtxos(this.state.amount)
+    console.log('utxos', utxos)
+  }
+
   fillMax = () => {
-    this.setState({ amount: this.props.balance.toFormat(8) })
+    this.setState({ amount: this.props.balance.dividedBy(100000000).toFixed(8) })
   }
 
   render () {
     const { address, amount } = this.state
     const { balance } = this.props
 
     return (
-      <form onSubmit={e => { e.preventDefault(); alert('withdrawals coming soon') }} className="withdrawal-form">
+      <form onSubmit={this.withdraw} className="withdrawal-form">
         <h2>Withdrawal</h2>
         <input type="text" placeholder="Address" value={address} onChange={this.handleAddressChange} />
         <input type="number" placeholder="Amount" value={amount} onChange={this.handleAmountChange} />
-        <p>Available: <a className={"clickable"} onClick={this.fillMax}>{balance.toFormat(8)}</a></p>
+        <p>Available: <a className={"clickable"} onClick={this.fillMax}>{balance.dividedBy(100000000).toFormat(8)}</a></p>
         <input type="submit" value="Construct Tx" />
       </form>
     )

Diff for: src/app/components/modals/withdrawal-modal/withdrawal-modal.tsx

@@ -59,7 +59,7 @@ class AuthRoutes extends React.Component<AppProps, AuthRoutesState> {
     mql.addListener(this.mediaQueryChanged)
 
     this.setState({
-      balance: await this.webService.getBalance(this.props.address),
+      balance: await this.webService.getBalance(),
     })
   }
 

Diff for: src/app/pages/auth-routes.tsx

@@ -5,6 +5,7 @@ import CheckoutModal from '../../../components/modals/checkout-modal/checkout-mo
 import BorkPreviewComponent from '../../../components/bork-preview/bork-preview';
 import WebService, { ConstructRequest } from '../../../web-service'
 import { BorkType, Bork } from '../../../../types/types'
+import BigNumber from 'bignumber.js'
 import './bork-new.scss'
 import '../../../App.scss'
 
@@ -60,7 +61,7 @@ class NewBorkPage extends React.Component<NewBorkProps, NewBorkState> {
     if (parent) {
       data.parent = {
         txid: parent.txid,
-        tip: '10',
+        tip: new BigNumber(10),
       }
     }
 

Diff for: src/app/pages/borks/bork-new/bork-new.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { AuthProps, withAuthContext } from '../../../contexts/auth-context'
 import CheckoutModal from '../../../components/modals/checkout-modal/checkout-modal'
 import { User, BorkType } from '../../../../types/types'
+import { RouteComponentProps } from 'react-router'
 import './profile-edit.scss'
 import '../../../App.scss'
-import { RouteComponentProps } from 'react-router';
 
 export interface ProfileEditParams {
   type: BorkType.setName | BorkType.setBio | BorkType.setAvatar

Diff for: src/app/pages/profile/profile-edit/profile-edit.tsx

@@ -60,7 +60,7 @@ class ProfileRoutes extends React.Component<ProfileRoutesProps, ProfileRoutesSta
         />
         <Route
           exact
-          path="/profile/:address/edit"
+          path="/profile/:address/set_*"
           render={props => <ProfileEditPage {...props} user={user} />}
         />
         <Route

Diff for: src/app/pages/profile/profile-routes.tsx

@@ -20,8 +20,9 @@ class WalletCreatePage extends React.Component<WalletCreateProps, WalletCreateSt
 
   async componentDidMount () {
     const borkerLib = await import('borker-rs')
-    const wallet = new borkerLib.JsWallet(sampleWords)
-    this.setState({ wallet })
+    this.setState({
+      wallet: new borkerLib.JsWallet(sampleWords),
+    })
   }
 
   render () {

Diff for: src/app/pages/wallet-create/wallet-create.tsx

@@ -21,7 +21,7 @@ class WalletPage extends React.PureComponent<WalletProps> {
       <div className="page-content">
         <div className="wallet-balance">
           <h1>
-            {balance.toFormat(8)}
+            {balance.dividedBy(100000000).toFormat(8)}
           </h1>
         </div>
         <table className="wallet-buttons">

Diff for: src/app/pages/wallet/wallet.tsx

@@ -1,15 +1,17 @@
 import rp from 'request-promise'
 import * as Storage from 'idb-keyval'
 import BigNumber from 'bignumber.js'
-import { BorkType, User, Bork, OrderBy, TxData } from '../types/types'
+import { BorkType, User, Bork, OrderBy, TxData, Utxo } from '../types/types'
 import { FollowsType } from './pages/user-list/user-list'
 import { BorkerConfig } from './pages/settings/settings'
 
 class WebService {
 
   constructor () {}
 
-  async getBalance (address: string): Promise<BigNumber> {
+  async getBalance (): Promise<BigNumber> {
+    const address = await Storage.get<string>('address')
+
     const options: rp.Options = {
       method: 'GET',
       url: `/users/${address}/balance`,
@@ -19,11 +21,13 @@ class WebService {
     return new BigNumber(res)
   }
 
-  async construct (body: ConstructRequest): Promise<TxData[]> {
+  async getUtxos (amount: string): Promise<Utxo[]> {
+    const address = await Storage.get<string>('address')
+
     const options: rp.Options = {
-      method: 'POST',
-      url: `/transactions/construct`,
-      body,
+      method: 'GET',
+      url: `/users/${address}/utxos`,
+      qs: { amount },
     }
 
     return this.request(options)
@@ -168,9 +172,10 @@ export interface IndexTxParams extends IndexParams {
 
 export interface ConstructRequest {
   type: BorkType,
+  txCount?: number
   content?: string
   parent?: {
     txid: string
-    tip: string,
+    tip: BigNumber,
   }
 }