0e2963e · bridge · git.iko.soy

git.iko.soy/bridge

feat: extract point state

commit0e2963e5b4a00be23ea9e97dff00e8a7ba72965a authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateMon 17 Jun 2019, 11:41 (7 years ago) parent2bfe551

19 files changed+151−61

compare with master

unifiedsplit

src/bridge/Bridge.js+6−35 src/bridge/components/Header.js+6−4 src/bridge/components/PointList.js+5−2 src/bridge/lib/router.js+1−1 src/bridge/store/pointCache.js+39 src/bridge/store/pointCursor.js+36 src/bridge/views/AcceptTransfer.js+3−1 src/bridge/views/CancelTransfer.js+7−1 src/bridge/views/GenKeyfile.js+5−1 src/bridge/views/InvitesManage.js+5−1 src/bridge/views/InvitesSend.js+3−1 src/bridge/views/IssueChild.js+5−1 src/bridge/views/Point.js+7−7 src/bridge/views/Points.js+3−1 src/bridge/views/SentTransaction.js+2−1 src/bridge/views/SetKeys.js+3−1 src/bridge/views/SetProxy.js+5−1 src/bridge/views/Transfer.js+5−1 src/bridge/views/ViewPoint.js+5−1

src/bridge/Bridge.js+6−35

@@ -17,6 +17,7 @@ import { TxnConfirmationsProvider } from './store/txnConfirmations';

1717import { OnlineProvider } from './store/online';

1818import { NetworkProvider } from './store/network';

1919import { WalletProvider } from './store/wallet';

20+import { PointCursorProvider } from './store/pointCursor';

2021

2122const kInitialNetworkType = isDevelopment

2223 ? NETWORK_TYPES.LOCAL

@@ -45,6 +46,7 @@ const kInitialWallet = kIsStubbed

4546const kInitialMnemonic = kIsStubbed

4647 ? process.env.REACT_APP_DEV_MNEMONIC

4748 : Nothing();

49+const kInitialPointCursor = kIsStubbed ? Just(0) : Nothing();

4850

4951// the router itself is just a component that renders a specific view

5052// depending on the history

@@ -83,6 +85,7 @@ const AllProviders = nest([

8385 OnlineProvider,

8486 NetworkProvider,

8587 WalletProvider,

88+ PointCursorProvider,

8689]);

8790

8891class Bridge extends React.Component {

@@ -91,30 +94,13 @@ class Bridge extends React.Component {

9194

9295 this.state = {

9396 networkSeedCache: null,

94− // point

95− pointCursor: Nothing(),

96− pointCache: {},

9797 // txn

9898 txnHashCursor: Nothing(),

9999 txnConfirmations: {},

100100 };

101101

102− this.setPointCursor = this.setPointCursor.bind(this);

103102 this.setTxnHashCursor = this.setTxnHashCursor.bind(this);

104103 this.setNetworkSeedCache = this.setNetworkSeedCache.bind(this);

105− this.addToPointCache = this.addToPointCache.bind(this);

106− }

107−

108− componentDidMount() {

109− // NB (jtobin, shrugs):

110− //

111− // If running in development, the following can be tweaked to get you set

112− // up with a desirable initial state.

113− if (kIsStubbed) {

114− this.setState({

115− pointCursor: Just(0),

116− });

117− }

118104 }

119105

120106 setNetworkSeedCache(networkSeed, revision) {

@@ -124,16 +110,6 @@ class Bridge extends React.Component {

124110 });

125111 }

126112

127− setPointCursor(pointCursor) {

128− this.setState({ pointCursor });

129− }

130−

131− addToPointCache(entry) {

132− this.setState((state, _) => ({

133− pointCache: Object.assign(state.pointCache, entry),

134− }));

135− }

136−

137113 setTxnHashCursor(txnHashCursor) {

138114 this.setState({ txnHashCursor });

139115 }

@@ -142,8 +118,6 @@ class Bridge extends React.Component {

142118 const {

143119 networkSeedCache,

144120 networkRevisionCache,

145− pointCursor,

146− pointCache,

147121 txnHashCursor,

148122 } = this.state;

149123

@@ -152,18 +126,15 @@ class Bridge extends React.Component {

152126 initialRoutes={kInitialRoutes}

153127 initialNetworkType={kInitialNetworkType}

154128 initialWallet={kInitialWallet}

155− initialMnemonic={kInitialMnemonic}>

129+ initialMnemonic={kInitialMnemonic}

130+ initialPointCursor={kInitialPointCursor}>

156131 <Container>

157132 <Row>

158133 <VariableWidthColumn>

159− <Header pointCursor={pointCursor} />

134+ <Header />

160135

161136 <Row className={'row wrapper'}>

162137 <Router

163− setPointCursor={this.setPointCursor}

164− addToPointCache={this.addToPointCache}

165− pointCursor={pointCursor}

166− pointCache={pointCache}

167138 networkSeedCache={networkSeedCache}

168139 networkRevisionCache={networkRevisionCache}

169140 setNetworkSeedCache={this.setNetworkSeedCache}

src/bridge/components/Header.js+6−4

@@ -7,19 +7,21 @@ import { useHistory } from '../store/history';

77import { isLast } from '../lib/lib';

88import { useNetwork } from '../store/network';

99import { useWallet } from '../store/wallet';

10+import { usePointCursor } from '../store/pointCursor';

1011

1112// hook to create a breadcrumb builder function based on the current

1213// global states

13−function useRouteBreadcrumbBuilder(props) {

14+function useRouteBreadcrumbBuilder() {

1415 const { networkType } = useNetwork();

1516 const { wallet } = useWallet();

17+ const { pointCursor } = usePointCursor();

1618

17− return getRouteBreadcrumb({ ...props, networkType, wallet });

19+ return getRouteBreadcrumb({ pointCursor, networkType, wallet });

1820}

1921

2022function Crumbs(props) {

2123 const history = useHistory();

22− const breadcrumbBuilder = useRouteBreadcrumbBuilder(props);

24+ const breadcrumbBuilder = useRouteBreadcrumbBuilder();

2325

2426 return (

2527 <>

@@ -53,7 +55,7 @@ function Header(props) {

5355 if (showCrumbs) {

5456 return (

5557 <div className={'flex items-center h-10'}>

56− <Crumbs pointCursor={props.pointCursor} />

58+ <Crumbs />

5759 </div>

5860 );

5961 }

src/bridge/components/PointList.js+5−2

@@ -1,11 +1,14 @@

11import React from 'react';

22import { chunk } from 'lodash';

4+import { usePointCursor } from '../store/pointCursor';

46import { Row } from './Base';

57import RenderedPoint from './RenderedPoint';

7−const PointList = props => {

8− const { setPointCursor, routeHandler, points, loading } = props;

9+const PointList = function(props) {

10+ const { setPointCursor } = usePointCursor();

11+ const { routeHandler, points, loading } = props;

912 const chunks = chunk(points, 3);

1013

1114 return points.length === 0 ? (

src/bridge/lib/router.js+1−1

@@ -68,9 +68,9 @@ const ROUTES = {

6868};

6969

7070export const getRouteBreadcrumb = ({

71+ pointCursor,

7172 networkType,

7273 wallet,

73− pointCursor,

7474}) => route => {

7575 switch (route.name) {

7676 case ROUTE_NAMES.INVITE_TICKET:

src/bridge/store/pointCache.jsnew file+39

@@ -0,0 +1,39 @@

1+import React, { createContext, forwardRef, useContext, useState } from 'react';

2+import Maybe from 'folktale/maybe';

4+export const PointCacheContext = createContext(null);

6+function _usePointCache(initialPointCache = Maybe.Nothing()) {

7+ const [pointCache, _setPointCache] = useState(initialPointCache);

9+ const addToPointCache = entry =>

10+ _setPointCache(cache => ({ ...cache, entry }));

11+

12+ return {

13+ pointCache,

14+ addToPointCache,

15+ };

16+}

17+

18+export function PointCacheProvider({ initialPointCache, children }) {

19+ const pointCache = _usePointCache(initialPointCache);

20+

21+ return (

22+ <PointCacheContext.Provider value={pointCache}>

23+ {children}

24+ </PointCacheContext.Provider>

25+ );

26+}

27+

28+// Hook version

29+export function usePointCache() {

30+ return useContext(PointCacheContext);

31+}

32+

33+// HOC version

34+export const withPointCache = Component =>

35+ forwardRef((props, ref) => (

36+ <PointCacheContext.Consumer>

37+ {pointCache => <Component ref={ref} {...pointCache} {...props} />}

38+ </PointCacheContext.Consumer>

39+ ));

src/bridge/store/pointCursor.jsnew file+36

@@ -0,0 +1,36 @@

1+import React, { createContext, forwardRef, useContext, useState } from 'react';

2+import Maybe from 'folktale/maybe';

4+export const PointCursorContext = createContext(null);

6+function _usePointCursor(initialPointCursor = Maybe.Nothing()) {

7+ const [pointCursor, setPointCursor] = useState(initialPointCursor);

9+ return {

10+ pointCursor,

11+ setPointCursor,

12+ };

13+}

14+

15+export function PointCursorProvider({ initialPointCursor, children }) {

16+ const pointCursor = _usePointCursor(initialPointCursor);

17+

18+ return (

19+ <PointCursorContext.Provider value={pointCursor}>

20+ {children}

21+ </PointCursorContext.Provider>

22+ );

23+}

24+

25+// Hook version

26+export function usePointCursor() {

27+ return useContext(PointCursorContext);

28+}

29+

30+// HOC version

31+export const withPointCursor = Component =>

32+ forwardRef((props, ref) => (

33+ <PointCursorContext.Consumer>

34+ {pointCursor => <Component ref={ref} {...pointCursor} {...props} />}

35+ </PointCursorContext.Consumer>

36+ ));

src/bridge/views/AcceptTransfer.js+3−1

@@ -17,6 +17,7 @@ import { isValidAddress } from '../lib/wallet';

1717import { withNetwork } from '../store/network';

1818import { compose } from '../lib/lib';

1919import { withWallet } from '../store/wallet';

20+import { withPointCursor } from '../store/pointCursor';

2021

2122class AcceptTransfer extends React.Component {

2223 constructor(props) {

@@ -122,5 +123,6 @@ class AcceptTransfer extends React.Component {

122123

123124export default compose(

124125 withNetwork,

125− withWallet

126+ withWallet,

127+ withPointCursor

126128)(AcceptTransfer);

src/bridge/views/CancelTransfer.js+7−1

@@ -9,6 +9,8 @@ import StatelessTransaction from '../components/StatelessTransaction';

99import { ETH_ZERO_ADDR } from '../lib/wallet';

1010import { withNetwork } from '../store/network';

1111import { compose } from '../lib/lib';

12+import { withPointCursor } from '../store/pointCursor';

13+import { withPointCache } from '../store/pointCache';

1214

1315class CancelTransfer extends React.Component {

1416 constructor(props) {

@@ -75,4 +77,8 @@ class CancelTransfer extends React.Component {

7577 }

7678}

7779

78−export default compose(withNetwork)(CancelTransfer);

80+export default compose(

81+ withNetwork,

82+ withPointCursor,

83+ withPointCache

84+)(CancelTransfer);

src/bridge/views/GenKeyfile.js+5−1

@@ -13,6 +13,7 @@ import { attemptSeedDerivation, genKey } from '../lib/keys';

1313import { addHexPrefix } from '../lib/wallet';

1414import { compose } from '../lib/lib';

1515import { withWallet } from '../store/wallet';

16+import { withPointCursor } from '../store/pointCursor';

1617

1718class GenKeyfile extends React.Component {

1819 constructor(props) {

@@ -134,4 +135,7 @@ class GenKeyfile extends React.Component {

134135 }

135136}

136137

137−export default compose(withWallet)(GenKeyfile);

138+export default compose(

139+ withWallet,

140+ withPointCursor

141+)(GenKeyfile);

src/bridge/views/InvitesManage.js+5−1

@@ -16,6 +16,7 @@ import {

1616import StatelessTransaction from '../components/StatelessTransaction';

1717import { withNetwork } from '../store/network';

1818import { compose } from '../lib/lib';

19+import { withPointCursor } from '../store/pointCursor';

1920

2021class InvitesManage extends React.Component {

2122 constructor(props) {

@@ -184,4 +185,7 @@ class InvitesManage extends React.Component {

184185 }

185186}

186187

187−export default compose(withNetwork)(InvitesManage);

188+export default compose(

189+ withNetwork,

190+ withPointCursor

191+)(InvitesManage);

src/bridge/views/InvitesSend.js+3−1

@@ -22,6 +22,7 @@ import * as tank from '../lib/tank';

2222import { withNetwork } from '../store/network';

2323import { compose } from '../lib/lib';

2424import { withWallet } from '../store/wallet';

25+import { withPointCursor } from '../store/pointCursor';

2526

2627const GAS_PRICE_GWEI = 20; // we pay the premium for faster ux

2728const GAS_LIMIT = 350000;

@@ -496,5 +497,6 @@ class InvitesSend extends React.Component {

496497

497498export default compose(

498499 withNetwork,

499− withWallet

500+ withWallet,

501+ withPointCursor

500502)(InvitesSend);

src/bridge/views/IssueChild.js+5−1

@@ -26,6 +26,7 @@ import { canDecodePatp } from '../lib/txn';

2626import { isValidAddress } from '../lib/wallet';

2727import { withNetwork } from '../store/network';

2828import { compose } from '../lib/lib';

29+import { withPointCursor } from '../store/pointCursor';

2930

3031const setFind = (set, pred) => {

3132 for (const e of set) {

@@ -255,4 +256,7 @@ class IssueChild extends React.Component {

255256 }

256257}

257258

258−export default compose(withNetwork)(IssueChild);

259+export default compose(

260+ withNetwork,

261+ withPointCursor

262+)(IssueChild);

src/bridge/views/Point.js+7−7

@@ -14,6 +14,8 @@ import { withHistory } from '../store/history';

1414import { withNetwork } from '../store/network';

1515import { compose } from '../lib/lib';

1616import { withWallet } from '../store/wallet';

17+import { withPointCursor } from '../store/pointCursor';

18+import { withPointCache } from '../store/pointCache';

1719

1820class Point extends React.Component {

1921 constructor(props) {

@@ -77,7 +79,7 @@ class Point extends React.Component {

7779 };

7880

7981 render() {

80− const { web3, history, wallet, setPointCursor, pointCache } = this.props;

82+ const { web3, history, wallet, pointCache } = this.props;

8183

8284 const { spawned } = this.state;

8385

@@ -105,11 +107,7 @@ class Point extends React.Component {

105107 <div>

106108 <H3>{'Issued Points'}</H3>

107109

108− <PointList

109− setPointCursor={setPointCursor}

110− routeHandler={history.popAndPush}

111− points={spawned}

112− />

110+ <PointList routeHandler={history.popAndPush} points={spawned} />

113111 </div>

114112 );

115113

@@ -140,5 +138,7 @@ class Point extends React.Component {

140138export default compose(

141139 withNetwork,

142140 withHistory,

143− withWallet

141+ withWallet,

142+ withPointCursor,

143+ withPointCache

144144)(Point);

src/bridge/views/Points.js+3−1

@@ -11,6 +11,7 @@ import { ETH_ZERO_ADDR, eqAddr } from '../lib/wallet';

1111import { withNetwork } from '../store/network';

1212import { compose } from '../lib/lib';

1313import { withWallet } from '../store/wallet';

14+import { withPointCache } from '../store/pointCache';

1415

1516const hasTransferProxy = (cache, point) =>

1617 point in cache ? !eqAddr(cache[point].transferProxy, ETH_ZERO_ADDR) : false;

@@ -260,5 +261,6 @@ class Points extends React.Component {

260261export default compose(

261262 withNetwork,

262263 withHistory,

263− withWallet

264+ withWallet,

265+ withPointCache

264266)(Points);

src/bridge/views/SentTransaction.js+2−1

@@ -10,6 +10,7 @@ import { BRIDGE_ERROR, renderTxnError } from '../lib/error';

1010import { NETWORK_TYPES } from '../lib/network';

1111import { useTxnConfirmations } from '../store/txnConfirmations';

1212import { useNetwork } from '../store/network';

13+import { usePointCursor } from '../store/pointCursor';

1314

1415class Success extends React.Component {

1516 constructor(props) {

@@ -113,10 +114,10 @@ const Failure = props => (

113114function SentTransaction(props) {

114115 const history = useHistory();

115116 const { txnConfirmations } = useTxnConfirmations();

117+ const { setPointCursor, pointCursor } = usePointCursor();

116118 const { web3 } = useNetwork();

117119

118120 const { txnHashCursor, networkType } = props;

119− const { setPointCursor, pointCursor } = props;

120121

121122 const promptKeyfile = history.data && history.data.promptKeyfile;

122123

src/bridge/views/SetKeys.js+3−1

@@ -14,6 +14,7 @@ import { compose } from '../lib/lib';

1414

1515import { withNetwork } from '../store/network';

1616import { withWallet } from '../store/wallet';

17+import { withPointCursor } from '../store/pointCursor';

1718

1819class SetKeys extends React.Component {

1920 constructor(props) {

@@ -201,5 +202,6 @@ class SetKeys extends React.Component {

201202

202203export default compose(

203204 withNetwork,

204− withWallet

205+ withWallet,

206+ withPointCursor

205207)(SetKeys);

src/bridge/views/SetProxy.js+5−1

@@ -24,6 +24,7 @@ import StatelessTransaction from '../components/StatelessTransaction';

2424import { isValidAddress } from '../lib/wallet';

2525import { withNetwork } from '../store/network';

2626import { compose } from '../lib/lib';

27+import { withPointCursor } from '../store/pointCursor';

2728

2829class _SetProxy extends React.Component {

2930 constructor(props) {

@@ -169,7 +170,10 @@ class _SetProxy extends React.Component {

169170 }

170171}

171172

172−const SetProxy = compose(withNetwork)(_SetProxy);

173+const SetProxy = compose(

174+ withNetwork,

175+ withPointCursor

176+)(_SetProxy);

173177

174178export const SetManagementProxy = props => (

175179 <SetProxy {...props} proxyType={PROXY_TYPE.MANAGEMENT_PROXY} />

src/bridge/views/Transfer.js+5−1

@@ -21,6 +21,7 @@ import { NETWORK_TYPES } from '../lib/network';

2121import { isValidAddress } from '../lib/wallet';

2222import { withNetwork } from '../store/network';

2323import { compose } from '../lib/lib';

24+import { withPointCursor } from '../store/pointCursor';

2425

2526class Transfer extends React.Component {

2627 constructor(props) {

@@ -132,4 +133,7 @@ class Transfer extends React.Component {

132133 }

133134}

134135

135−export default compose(withNetwork)(Transfer);

136+export default compose(

137+ withNetwork,

138+ withPointCursor

139+)(Transfer);

src/bridge/views/ViewPoint.js+5−1

@@ -9,6 +9,7 @@ import { InnerLabel, PointInput, ValidatedSigil } from '../components/Base';

99import { ROUTE_NAMES } from '../lib/routeNames';

1010import { withHistory } from '../store/history';

1111import { compose } from '../lib/lib';

12+import { withPointCursor } from '../store/pointCursor';

1213

1314class ViewPoint extends React.Component {

1415 constructor(props) {

@@ -81,4 +82,7 @@ class ViewPoint extends React.Component {

8182 }

8283}

8384

84−export default compose(withHistory)(ViewPoint);

85+export default compose(

86+ withHistory,

87+ withPointCursor

88+)(ViewPoint);