729283f · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

Merge pull request #204 from urbit/feat/multi-home

729283fMatt Condon7 years ago

src/Bridge.js+22−12

compare with master

unifiedsplit

@@ -12,8 +12,8 @@ import { ROUTES } from 'lib/router';

12import { NETWORK_TYPES } from 'lib/network';

13import { walletFromMnemonic } from 'lib/wallet';

14import { isDevelopment } from 'lib/flags';

15−import { hasDisclaimed } from 'lib/disclaimerCookie';

16import useImpliedTicket from 'lib/useImpliedTicket';

15import useImpliedTicket from 'lib/useImpliedTicket';

16+import useHasDisclaimed from 'lib/useHasDisclaimed';

18import 'style/index.scss';

@@ -36,19 +36,29 @@ const INITIAL_MNEMONIC = IS_STUBBED

36 : Nothing();

37const INITIAL_POINT_CURSOR = IS_STUBBED ? Just(65792) : Nothing();

39−function Bridge() {

39+function useInitialRoutes() {

40+ const [hasDisclaimed] = useHasDisclaimed();

40− const landingPage = !!useImpliedTicket()

41+ const hasImpliedTicket = !!useImpliedTicket();

42+

43+ if (IS_STUBBED) {

44+ return [

45+ { key: ROUTE_NAMES.LOGIN },

46+ { key: ROUTE_NAMES.POINTS },

47+ { key: ROUTE_NAMES.POINT },

48+ ];

49+ }

50+

51+ const landingPage = hasImpliedTicket

41 ? ROUTE_NAMES.ACTIVATE

52 ? ROUTE_NAMES.ACTIVATE

42 : ROUTE_NAMES.LOGIN;

53 : ROUTE_NAMES.LOGIN;

43− const initialRoutes = IS_STUBBED

54+

44− ? [

45− { key: ROUTE_NAMES.LOGIN },

46− { key: ROUTE_NAMES.POINTS },

47− { key: ROUTE_NAMES.POINT },

48− ]

49− : hasDisclaimed()

50− ? [{ key: landingPage }]

51− : [{ key: landingPage }, { key: ROUTE_NAMES.DISCLAIMER }];

55+ const extraRoutes = !hasDisclaimed ? [{ key: ROUTE_NAMES.DISCLAIMER }] : [];

56+

57+ return [{ key: landingPage }, ...extraRoutes];

58+}

59+

60+function Bridge() {

61+ const initialRoutes = useInitialRoutes();

53 return (

63 return (

54 <Provider

64 <Provider

src/components/InlineEthereumTransaction.js+1−1

@@ -51,7 +51,7 @@ export default function InlineEthereumTransaction({

51 const showConfigureInput = !(signed || broadcasted || confirmed || completed);

52 // show the send/loading button while signed, broadcasting, or confirme

53 const showBroadcastButton = signed || broadcasted || confirmed;

54− const canBroadcast = signed;

54+ const canBroadcast = signed && !needFunds;

55 const isLoading = broadcasted || confirmed;

56 // show signed tx only when signing (for offline usage)

57 const showSignedTx = signed;

src/components/Passport.js+95−12

@@ -1,18 +1,23 @@

1−import React from 'react';

1+import React, { useMemo } from 'react';

2import cn from 'classnames';

3import { Just, Nothing } from 'folktale/maybe';

4import * as ob from 'urbit-ob';

5import { Grid, Flex, Text } from 'indigo-react';

6import { times } from 'lodash';

8+import * as need from 'lib/need';

8import usePointBirthday from 'lib/usePointBirthday';

9import usePointBirthday from 'lib/usePointBirthday';

10−import {

11+import Blinky, {

11 LOADING_CHARACTER,

12 LOADING_CHARACTER,

12 INTERSTITIAL_CHARACTER,

13 INTERSTITIAL_CHARACTER,

13 matchBlinkyDate,

14 matchBlinkyDate,

14} from './Blinky';

15} from './Blinky';

16+import Sigil from './Sigil';

15import MaybeSigil from './MaybeSigil';

17import MaybeSigil from './MaybeSigil';

18+import usePermissionsForPoint from 'lib/usePermissionsForPoint';

19+import { useWallet } from 'store/wallet';

20+import { useSyncOwnedPoints } from 'lib/useSyncPoints';

17const TICKET_CHAR_LENGTH = 30;

22const TICKET_CHAR_LENGTH = 30;

18const TICKET = times(TICKET_CHAR_LENGTH, i =>

23const TICKET = times(TICKET_CHAR_LENGTH, i =>

@@ -25,18 +30,28 @@ const VISIBLE_ADDRESS_CHAR_COUNT = 20;

25const EMPTY_ADDRESS = times(VISIBLE_ADDRESS_CHAR_COUNT, () => '<').join('');

30const EMPTY_ADDRESS = times(VISIBLE_ADDRESS_CHAR_COUNT, () => '<').join('');

26const ADDRESS_BUFFER_CHARS = times(40, () => '<').join('');

31const ADDRESS_BUFFER_CHARS = times(40, () => '<').join('');

33+const INVERTED_COLORWAY = ['#000', '#fff', '#000'];

34+

35+const buildKeyType = permissions => {

36+ if (permissions.isOwner) {

37+ return 'Ownership';

38+ } else if (permissions.isManagementProxy) {

39+ return 'Management';

40+ } else if (permissions.isSpawnProxy) {

41+ return 'Spawn';

42+ } else if (permissions.isVotingProxy) {

43+ return 'Voting';

44+ } else if (permissions.isTransferProxy) {

45+ return 'Transfer';

46+ }

47+};

48+

28/**

49/**

29 * point is Maybe<number>

50 * point is Maybe<number>

30 * ticket is null | boolean

51 * ticket is null | boolean

31 * address is null | Maybe<string>

52 * address is null | Maybe<string>

32 */

53 */

33−export default function Passport({

34− point,

35− className,

36− ticket = null,

37− address = Nothing(),

54+function Passport({ point, className, ticket = null, address = Nothing() }) {

38− mini = false,

39−}) {

40 const birthday = usePointBirthday(point.getOrElse(null));

55 const birthday = usePointBirthday(point.getOrElse(null));

41 const visualBirthday = matchBlinkyDate(birthday);

56 const visualBirthday = matchBlinkyDate(birthday);

@@ -59,7 +74,7 @@ export default function Passport({

60 return (

75 return (

61 <Grid gap={4} className={cn('bg-black r8 p7', className)}>

76 <Grid gap={4} className={cn('bg-black r8 p7', className)}>

62− <Grid.Item cols={[1, 4]} className="bg-green">

77+ <Grid.Item cols={[1, 4]}>

63 <MaybeSigil patp={name} size={64} margin={0} />

78 <MaybeSigil patp={name} size={64} margin={0} />

64 </Grid.Item>

79 </Grid.Item>

65 <Grid.Item as={Flex} cols={[4, 13]} col justify="between">

80 <Grid.Item as={Flex} cols={[4, 13]} col justify="between">

@@ -68,12 +83,12 @@ export default function Passport({

68 <Flex.Item as={Text} className="mono f6 f5-ns gray4 uppercase">

83 <Flex.Item as={Text} className="mono f6 f5-ns gray4 uppercase">

69 Birth Time

84 Birth Time

70 </Flex.Item>

85 </Flex.Item>

71− <Flex.Item as={Text} className="mono f6 f5-ns gray4 ">

86+ <Flex.Item as={Text} className="mono f6 f5-ns gray4 uppercase">

72 {visualBirthday}

87 {visualBirthday}

73 </Flex.Item>

88 </Flex.Item>

74 </Flex.Item>

89 </Flex.Item>

75 </Grid.Item>

90 </Grid.Item>

76− {!mini && showTicket && (

91+ {showTicket && (

77 <Grid.Item full className="mv3" as={Flex} col>

92 <Grid.Item full className="mv3" as={Flex} col>

78 <Flex.Item as={Text} className="mono f6 f5-ns gray4 uppercase">

93 <Flex.Item as={Text} className="mono f6 f5-ns gray4 uppercase">

79 Master Ticket

94 Master Ticket

@@ -94,3 +109,71 @@ export default function Passport({

94 </Grid>

109 </Grid>

95 );

110 );

96}

111}

112+

113+// TODO: Passport.Mini should probably accept Maybe<> for point

114+// in order to display a pretty skeleton loading view

115+// but that requires making usePermissionsForPoint accept a Maybe<point>

116+// and I don't feel like that refactor is worth it right now, and the spec

117+// doesn't call for it, hence the TODO

118+Passport.Mini = function MiniPassport({ point, className, inverted, ...rest }) {

119+ useSyncOwnedPoints([point]);

120+

121+ const { wallet } = useWallet();

122+ const address = need.addressFromWallet(wallet);

123+

124+ const permissions = usePermissionsForPoint(address, point);

125+ const keyType = buildKeyType(permissions);

126+ const name = useMemo(() => ob.patp(point), [point]);

127+

128+ return (

129+ <Grid

130+ gap={4}

131+ className={cn(

132+ 'r8 p4',

133+ {

134+ 'bg-black': !inverted,

135+ 'bg-white b-gray4 b1': inverted,

136+ },

137+ className

138+ )}

139+ {...rest}>

140+ <Grid.Item cols={[1, 4]}>

141+ <Sigil

142+ patp={name}

143+ size={64}

144+ margin={0}

145+ colorway={inverted ? INVERTED_COLORWAY : undefined}

146+ />

147+ </Grid.Item>

148+ <Grid.Item as={Flex} cols={[4, 13]} col justify="between">

149+ <Flex.Item

150+ className={cn('mono f6 pb2', {

151+ white: !inverted,

152+ black: inverted,

153+ })}>

154+ {name}

155+ </Flex.Item>

156+ <Flex.Item as={Flex} col className={cn('mono f6 uppercase')}>

157+ <Flex.Item

158+ as={Text}

159+ className={cn({

160+ gray4: !inverted,

161+ black: inverted,

162+ })}>

163+ Key Type

164+ </Flex.Item>

165+ <Flex.Item

166+ as={Text}

167+ className={cn({

168+ white: !inverted,

169+ black: inverted,

170+ })}>

171+ {keyType || <Blinky />}

172+ </Flex.Item>

173+ </Flex.Item>

174+ </Grid.Item>

175+ </Grid>

176+ );

177+};

178+

179+export default Passport;

src/lib/disclaimerCookie.jsdeleted−9

@@ -1,9 +0,0 @@

1−const COOKIE_ID = 'bridge_disclaimed';

2−

3−export const hasDisclaimed = () => {

4− return document.cookie.includes(COOKIE_ID);

5−};

6−

7−export const setDisclaimerCookie = () => {

8− document.cookie = COOKIE_ID;

9−};

src/lib/routeNames.js−6

@@ -19,13 +19,7 @@ export const ROUTE_NAMES = {

19 VIEW_POINT: Symbol('VIEW_POINT'),

20 POINTS: Symbol('POINTS'),

21 POINT: Symbol('POINT'),

22− SET_MANAGEMENT_PROXY: Symbol('SET_MANAGEMENT_PROXY'),

23− SET_SPAWN_PROXY: Symbol('SET_SPAWN_PROXY'),

24− SET_TRANSFER_PROXY: Symbol('SET_TRANSFER_PROXY'),

25 CREATE_GALAXY: Symbol('CREATE_GALAXY'),

22 CREATE_GALAXY: Symbol('CREATE_GALAXY'),

26 ISSUE_CHILD: Symbol('ISSUE_CHILD'),

23 ISSUE_CHILD: Symbol('ISSUE_CHILD'),

27− SET_KEYS: Symbol('SET_KEYS'),

28− TRANSFER: Symbol('TRANSFER'),

29− GEN_KEYFILE: Symbol('GEN_KEYFILE'),

30 PARTY_SET_POOL_SIZE: Symbol('PARTY_SET_POOL_SIZE'),

24 PARTY_SET_POOL_SIZE: Symbol('PARTY_SET_POOL_SIZE'),

31};

25};

src/lib/router.js+6−1

@@ -11,6 +11,8 @@ import Invite from 'views/Invite';

11import Activate from 'views/Activate';

13import PartySetPoolSize from 'views/Party/PartySetPoolSize';

14+import AcceptTransfer from 'views/AcceptTransfer';

15+import CancelTransfer from 'views/CancelTransfer';

15import { ROUTE_NAMES } from './routeNames';

17import { ROUTE_NAMES } from './routeNames';

@@ -23,8 +25,11 @@ export const ROUTES = {

23 [ROUTE_NAMES.POINT]: Point,

25 [ROUTE_NAMES.POINT]: Point,

24 [ROUTE_NAMES.CREATE_GALAXY]: CreateGalaxy,

26 [ROUTE_NAMES.CREATE_GALAXY]: CreateGalaxy,

25 [ROUTE_NAMES.ISSUE_CHILD]: IssueChild,

27 [ROUTE_NAMES.ISSUE_CHILD]: IssueChild,

26− [ROUTE_NAMES.PARTY_SET_POOL_SIZE]: PartySetPoolSize,

27 [ROUTE_NAMES.INVITE]: Invite,

28 [ROUTE_NAMES.INVITE]: Invite,

28 [ROUTE_NAMES.ADMIN]: Admin,

29 [ROUTE_NAMES.ADMIN]: Admin,

29 // TODO: nest this route under the Party.js router

30 // TODO: nest this route under the Party.js router

31+ [ROUTE_NAMES.PARTY_SET_POOL_SIZE]: PartySetPoolSize,

32+ [ROUTE_NAMES.ACCEPT_TRANSFER]: AcceptTransfer,

33+ // TODO: replace this with deep link to AdminCancelTransfer

34+ [ROUTE_NAMES.CANCEL_TRANSFER]: CancelTransfer,

30};

35};

src/lib/useEthereumTransaction.js+9−4

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

14 hexify,

15} from './txn';

16import * as need from './need';

17−import useLifecycle from './useLifecycle';

18import { ensureFundsFor } from './tank';

17import { ensureFundsFor } from './tank';

19import useDeepEqualReference from './useDeepEqualReference';

18import useDeepEqualReference from './useDeepEqualReference';

@@ -174,9 +173,10 @@ export default function useEthereumTransaction(

174 ]);

173 ]);

175

174

176 const reset = useCallback(() => {

175 const reset = useCallback(() => {

177− setUnsignedTransaction(undefined);

178 setTxHash(undefined);

176 setTxHash(undefined);

179 setSignedTransaction(undefined);

177 setSignedTransaction(undefined);

178+ setNonce(undefined);

179+ setChainId(undefined);

180 setGasPrice(suggestedGasPrice);

181 setState(STATE.NONE);

182 setError(undefined);

@@ -188,7 +188,12 @@ export default function useEthereumTransaction(

188 suggestedGasPrice,

189 ]);

190

191− useLifecycle(() => {

191+ useEffect(() => {

192+ // if nonce or chainId is undefined, re-fetch on-chain info

193+ if (!(nonce === undefined || chainId === undefined)) {

194+ return;

195+ }

196+

192 (async () => {

197 (async () => {

193 try {

198 try {

194 setError(undefined);

199 setError(undefined);

@@ -207,7 +212,7 @@ export default function useEthereumTransaction(

207 setError(error);

212 setError(error);

208 }

213 }

209 })();

214 })();

210− });

215+ }, [_wallet, _web3, setError, nonce, chainId]);

211

216

212 useEffect(() => {

217 useEffect(() => {

213 let cancelled = false;

218 let cancelled = false;

src/lib/useHasDisclaimed.jsnew file+7

@@ -0,0 +1,7 @@

1+import useLocalStorageState from './useLocalStorageState';

3+const HAS_DISCLAIMED_KEY = 'bridge:has-disclaimed';

5+export default function useHasDisclaimed() {

6+ return useLocalStorageState(HAS_DISCLAIMED_KEY, false);

7+}

src/lib/useLocalStorageState.jsnew file+38

@@ -0,0 +1,38 @@

1+import { useState, useEffect } from 'react';

3+/**

4+ * useLocalStorageState is useState but it persists to localStorage

5+ *

6+ * inspired by:

7+ * https://github.com/streamich/react-use/blob/master/src/useLocalStorage.ts

8+ * https://usehooks.com/useLocalStorage/

9+ */

10+export default function useLocalStorageState(key, initialValue) {

11+ const [state, setState] = useState(() => {

12+ try {

13+ const value = localStorage.getItem(key);

14+ if (value === null) {

15+ localStorage.setItem(key, JSON.stringify(initialValue));

16+ return initialValue;

17+ } else {

18+ return JSON.parse(value);

19+ }

20+ } catch {

21+ // if user is in private mode or has storage restriction

22+ // localStorage can throw. JSON.parse and JSON.stringify

23+ // can throw, too.

24+ return initialValue;

25+ }

26+ });

27+

28+ useEffect(() => {

29+ try {

30+ localStorage.setItem(key, JSON.stringify(state));

31+ } catch {

32+ // if user is in private mode or has storage restriction

33+ // localStorage can throw. Also JSON.stringify can throw.

34+ }

35+ }, [key, state]);

36+

37+ return [state, setState];

38+}

src/lib/usePermissionsForPoint.js+6−2

@@ -14,8 +14,10 @@ const NULL_PERMISSIONS = {

14 //

15 isOwner: false,

16 isActiveOwner: false,

17− isTransferProxy: false,

18 isManagementProxy: false,

17 isManagementProxy: false,

18+ isSpawnProxy: false,

19+ isVotingProxy: false,

20+ isTransferProxy: false,

19 //

21 //

20 isManagementProxySet: false,

22 isManagementProxySet: false,

21 isSpawnProxySet: false,

23 isSpawnProxySet: false,

@@ -84,8 +86,10 @@ export default function usePermissionsForPoint(address, point) {

84 //

86 //

85 isOwner,

87 isOwner,

86 isActiveOwner,

88 isActiveOwner,

87− isTransferProxy,

88 isManagementProxy,

89 isManagementProxy,

90+ isSpawnProxy,

91+ isVotingProxy,

92+ isTransferProxy,

89 //

93 //

90 isManagementProxySet,

94 isManagementProxySet,

91 isSpawnProxySet,

95 isSpawnProxySet,

src/lib/useRejectedIncomingPointTransfers.jsnew file+19

@@ -0,0 +1,19 @@

1+import { useCallback } from 'react';

3+import useLocalStorageState from './useLocalStorageState';

5+const REJECTED_POINTS_KEY = 'bridge:rejected-points';

7+export default function useRejectedIncomingPointTransfers() {

8+ const [rejectedPoints, setRejectedPoints] = useLocalStorageState(

9+ REJECTED_POINTS_KEY,

10+ []

11+ );

12+

13+ const addRejectedPoint = useCallback(

14+ point => setRejectedPoints([...rejectedPoints, point]),

15+ [rejectedPoints, setRejectedPoints]

16+ );

17+

18+ return [rejectedPoints, addRejectedPoint];

19+}

src/lib/wallet.js+3

@@ -102,3 +102,6 @@ export const walletFromMnemonic = (mnemonic, hdpath, passphrase) => {

102 const wallet = seed.chain(sd => toWallet(sd, hdpath));

103 return wallet;

104};

105+

106+export const abbreviateAddress = address =>

107+ `${address.slice(0, 4)}…${address.slice(-4)}`;

src/store/lib/useControlledPointsStore.js+40−39

@@ -1,29 +1,15 @@

1−import { useState, useCallback } from 'react';

1+import { useState, useEffect, useCallback } from 'react';

2import { Just, Nothing } from 'folktale/maybe';

3+import Result from 'folktale/result';

3import * as azimuth from 'azimuth-js';

4import * as azimuth from 'azimuth-js';

5import { useNetwork } from '../network';

6import { useNetwork } from '../network';

6import { useWallet } from 'store/wallet';

7import { useWallet } from 'store/wallet';

8−const EMPTY_CONTROLLED_POINTS = {

9− ownedPoints: Nothing(),

10− incomingPoints: Nothing(),

11− managingPoints: Nothing(),

12− votingPoints: Nothing(),

13− spawningPoints: Nothing(),

14−};

15−

16export default function useControlledPointsStore() {

9export default function useControlledPointsStore() {

17 const { contracts } = useNetwork();

10 const { contracts } = useNetwork();

18 const { wallet } = useWallet();

11 const { wallet } = useWallet();

19− const [controlledPointsCache, _setControlledPointsCache] = useState(

12+ const [controlledPoints, _setControlledPoints] = useState(Nothing());

20− EMPTY_CONTROLLED_POINTS

21− );

22−

23− const getControlledPoints = useCallback(

24− () => controlledPointsCache || EMPTY_CONTROLLED_POINTS,

25− [controlledPointsCache]

26− );

28 const syncControlledPoints = useCallback(async () => {

14 const syncControlledPoints = useCallback(async () => {

29 const _contracts = contracts.getOrElse(null);

15 const _contracts = contracts.getOrElse(null);

@@ -32,33 +18,48 @@ export default function useControlledPointsStore() {

32 return;

18 return;

33 }

19 }

21+ _setControlledPoints(Nothing());

22+

35 const address = _wallet.address;

23 const address = _wallet.address;

25+ try {

37− const [

26+ const [

38− ownedPoints,

27+ ownedPoints,

39− incomingPoints,

28+ incomingPoints,

40− managingPoints,

29+ managingPoints,

41− votingPoints,

30+ votingPoints,

42− spawningPoints,

31+ spawningPoints,

43− ] = await Promise.all([

32+ ] = await Promise.all([

44− azimuth.azimuth.getOwnedPoints(_contracts, address),

33+ azimuth.azimuth.getOwnedPoints(_contracts, address),

45− azimuth.azimuth.getTransferringFor(_contracts, address),

34+ azimuth.azimuth.getTransferringFor(_contracts, address),

46− azimuth.azimuth.getManagerFor(_contracts, address),

35+ azimuth.azimuth.getManagerFor(_contracts, address),

47− azimuth.azimuth.getVotingFor(_contracts, address),

36+ azimuth.azimuth.getVotingFor(_contracts, address),

48− azimuth.azimuth.getSpawningFor(_contracts, address),

37+ azimuth.azimuth.getSpawningFor(_contracts, address),

49− ]);

38+ ]);

39+

40+ _setControlledPoints(

41+ Just(

42+ Result.Ok({

43+ ownedPoints,

44+ incomingPoints,

45+ managingPoints,

46+ votingPoints,

47+ spawningPoints,

48+ })

49+ )

50+ );

51+ } catch (error) {

52+ _setControlledPoints(Just(Result.Error(error)));

53+ }

54+ }, [contracts, wallet]);

51− _setControlledPointsCache({

56+ // sync controlled points whenever wallet or contracts changes

52− ownedPoints: Just(ownedPoints),

57+ useEffect(() => {

53− incomingPoints: Just(incomingPoints),

58+ syncControlledPoints();

54− managingPoints: Just(managingPoints),

59+ }, [syncControlledPoints]);

55− votingPoints: Just(votingPoints),

56− spawningPoints: Just(spawningPoints),

57− });

58− }, [contracts, wallet, _setControlledPointsCache]);

60 return {

61 return {

61− getControlledPoints,

62+ controlledPoints,

62 syncControlledPoints,

63 syncControlledPoints,

63 };

64 };

64}

65}

src/views/AcceptTransfer.jsnew file+96

@@ -0,0 +1,96 @@

1+import React, { useCallback } from 'react';

2+import cn from 'classnames';

3+import { Grid, Text } from 'indigo-react';

4+import * as azimuth from 'azimuth-js';

6+import { useNetwork } from 'store/network';

7+import { usePointCursor } from 'store/pointCursor';

8+import { usePointCache } from 'store/pointCache';

9+import { useHistory } from 'store/history';

10+import { useWallet } from 'store/wallet';

11+

12+import * as need from 'lib/need';

13+import useCurrentPointName from 'lib/useCurrentPointName';

14+import useEthereumTransaction from 'lib/useEthereumTransaction';

15+import { GAS_LIMITS } from 'lib/constants';

16+import useLifecycle from 'lib/useLifecycle';

17+

18+import ViewHeader from 'components/ViewHeader';

19+import MiniBackButton from 'components/MiniBackButton';

20+import InlineEthereumTransaction from 'components/InlineEthereumTransaction';

21+import View from 'components/View';

22+

23+function useAcceptTransfer() {

24+ const { contracts } = useNetwork();

25+ const { pointCursor } = usePointCursor();

26+ const { syncOwnedPoint, syncControlledPoints } = usePointCache();

27+ const { wallet } = useWallet();

28+

29+ const _contracts = need.contracts(contracts);

30+ const _point = need.point(pointCursor);

31+ const _address = need.addressFromWallet(wallet);

32+

33+ const { construct, ...rest } = useEthereumTransaction(

34+ useCallback(

35+ () =>

36+ azimuth.ecliptic.transferPoint(

37+ _contracts,

38+ _point,

39+ _address,

40+ /* reset */ true

41+ ),

42+ [_contracts, _point, _address]

43+ ),

44+ useCallback(

45+ () => Promise.all([syncOwnedPoint(_point), syncControlledPoints()]),

46+ [_point, syncControlledPoints, syncOwnedPoint]

47+ ),

48+ GAS_LIMITS.TRANSFER

49+ );

50+

51+ useLifecycle(() => {

52+ construct();

53+ });

54+

55+ return {

56+ ...rest,

57+ };

58+}

59+

60+export default function AcceptTransfer() {

61+ const { pop } = useHistory();

62+

63+ const name = useCurrentPointName();

64+

65+ const { completed, bind } = useAcceptTransfer();

66+

67+ return (

68+ <View inset>

69+ <Grid>

70+ <Grid.Item full as={MiniBackButton} onClick={() => pop()} />

71+

72+ <Grid.Item full as={ViewHeader}>

73+ Accept Transfer

74+ </Grid.Item>

75+

76+ <Grid.Item

77+ full

78+ as={Text}

79+ className={cn('f5', {

80+ green3: completed,

81+ })}>

82+ {completed

83+ ? `${name} has been accepted.`

84+ : `Accept the incoming transfer of ${name}.`}

85+ </Grid.Item>

86+

87+ <Grid.Item

88+ full

89+ as={InlineEthereumTransaction}

90+ {...bind}

91+ onReturn={() => pop()}

92+ />

93+ </Grid>

94+ </View>

95+ );

96+}

src/views/CancelTransfer.jsnew file+21

@@ -0,0 +1,21 @@

1+import React from 'react';

3+import View from 'components/View';

5+import AdminCancelTransfer from './Admin/AdminCancelTransfer';

6+import { LocalRouterProvider } from 'lib/LocalRouter';

7+import { useHistory } from 'store/history';

9+export default function CancelTransfer() {

10+ const history = useHistory();

11+

12+ return (

13+ // TODO: this is a hack so AdminCancelTransfer works unmodified

14+ // TODO: consolidate history & 'local' router providers

15+ <LocalRouterProvider value={history}>

16+ <View inset>

17+ <AdminCancelTransfer />

18+ </View>

19+ </LocalRouterProvider>

20+ );

21+}

src/views/Disclaimer.js+4−3

@@ -4,7 +4,7 @@ import { Grid, H3, B, Text, CheckboxInput } from 'indigo-react';

5import { useCheckboxInput } from 'lib/useInputs';

6import { useHistory } from 'store/history';

7−import { setDisclaimerCookie } from 'lib/disclaimerCookie';

7+import useHasDisclaimed from 'lib/useHasDisclaimed';

9import View from 'components/View';

10import { ForwardButton } from 'components/Buttons';

@@ -14,15 +14,16 @@ const TEXT_STYLE = 'f5';

15export default function ActivateDisclaimer() {

16 const { pop } = useHistory();

17+ const [, setHasDisclaimed] = useHasDisclaimed();

17 const [understoodInput, { data: isUnderstood }] = useCheckboxInput({

18 const [understoodInput, { data: isUnderstood }] = useCheckboxInput({

18 name: 'checkbox',

19 name: 'checkbox',

19 label: 'I acknowledge and understand these rights',

20 label: 'I acknowledge and understand these rights',

20 });

21 });

22 const goToPassport = useCallback(() => {

23 const goToPassport = useCallback(() => {

23− setDisclaimerCookie();

24+ setHasDisclaimed(true);

24 pop();

25 pop();

25− }, [pop]);

26+ }, [pop, setHasDisclaimed]);

27 return (

28 return (

28 <View>

29 <View>

src/views/Points.js+184−151

@@ -1,186 +1,219 @@

1import React from 'react';

2import { Just, Nothing } from 'folktale/maybe';

3−import { H1, H2, P, Grid } from 'indigo-react';

3+import { Grid, H5, H1, HelpText, LinkButton, Flex } from 'indigo-react';

4−

5−import { ROUTE_NAMES } from 'lib/routeNames';

6−import { isZeroAddress } from 'lib/wallet';

7−import useIsEclipticOwner from 'lib/useIsEclipticOwner';

8−import { useSyncKnownPoints } from 'lib/useSyncPoints';

10import { useHistory } from 'store/history';

5import { useHistory } from 'store/history';

11import { useWallet } from 'store/wallet';

6import { useWallet } from 'store/wallet';

12import { usePointCache } from 'store/pointCache';

7import { usePointCache } from 'store/pointCache';

8+import { usePointCursor } from 'store/pointCursor';

10+import * as need from 'lib/need';

11+import { ROUTE_NAMES } from 'lib/routeNames';

12+import { isZeroAddress, abbreviateAddress } from 'lib/wallet';

13+import useIsEclipticOwner from 'lib/useIsEclipticOwner';

14+import { useSyncKnownPoints } from 'lib/useSyncPoints';

14import View from 'components/View';

16import View from 'components/View';

15−import { ForwardButton } from 'components/Buttons';

17+import FooterButton from 'components/FooterButton';

16−import useLifecycle from 'lib/useLifecycle';

18+import Blinky from 'components/Blinky';

19+import Passport from 'components/Passport';

20+import useRejectedIncomingPointTransfers from 'lib/useRejectedIncomingPointTransfers';

21+

22+const getFromMaybe = (obj, key, defaultValue) =>

23+ obj.matchWith({

24+ Nothing: () => defaultValue,

25+ Just: p =>

26+ p.value.matchWith({

27+ Ok: r => r.value[key],

28+ Error: e => defaultValue,

29+ }),

30+ });

18−//TODO new component

32+const hasTransferProxy = (details, point) =>

19−import { usePointCursor } from 'store/pointCursor';

33+ !isZeroAddress(details.transferProxy);

20−import * as ob from 'urbit-ob';

34+

21−const PointList = function(props) {

35+const PointList = function({ points, className, actions, ...rest }) {

22 const { setPointCursor } = usePointCursor();

36 const { setPointCursor } = usePointCursor();

23 const history = useHistory();

37 const history = useHistory();

24− const { points, loading } = props;

38+

25−

26− return points.length === 0 ? (

39+ return (

27− <p>{loading ? 'Loading...' : 'No points to display'}</p>

40+ <Grid gap={3} className={className}>

28− ) : (

29− <>

30− {points.map(point => (

41+ {points.map((point, i) => (

31− <P

32− key={point}

42+ <Grid.Item half={(i % 2) + 1} key={point}>

43+ <Flex col>

44+ <Passport.Mini

45+ point={point}

46+ className="clickable"

33− onClick={() => {

47+ onClick={() => {

34− setPointCursor(Just(point));

48+ setPointCursor(Just(point));

35− history.push(ROUTE_NAMES.POINT);

49+ history.push(history.names.POINT);

36− }}>

50+ }}

37− {ob.patp(point)}

51+ {...rest}

38− </P>

52+ />

53+ {actions && (

54+ <Flex.Item className="mt2">{actions(point, i)}</Flex.Item>

55+ )}

56+ </Flex>

57+ </Grid.Item>

39 ))}

58 ))}

40− </>

59+ </Grid>

41 );

60 );

42};

61};

44−const matchArray = obj =>

63+function ActionButtons({ actions = [] }) {

45− obj.matchWith({ Nothing: () => [], Just: p => p.value });

64+ return (

46−

65+ <Flex row>

47−const hasTransferProxy = (details, point) =>

66+ {actions.map(action => (

48− !isZeroAddress(details.transferProxy);

67+ <Flex.Item

68+ key={action.text}

69+ as={LinkButton}

70+ className="mr3"

71+ onClick={action.onClick}>

72+ {action.text}

73+ </Flex.Item>

74+ ))}

75+ </Flex>

76+ );

77+}

50export default function Points() {

79export default function Points() {

51 const { wallet } = useWallet();

80 const { wallet } = useWallet();

52 const history = useHistory();

81 const history = useHistory();

53− const {

82+ const { setPointCursor } = usePointCursor();

54− getControlledPoints,

55− syncControlledPoints,

56− getDetails,

57− } = usePointCache();

83+ const { controlledPoints, getDetails } = usePointCache();

58− const {

59− ownedPoints,

60− incomingPoints,

61− managingPoints,

62− votingPoints,

63− spawningPoints,

64− } = getControlledPoints(wallet);

65 const isEclipticOwner = useIsEclipticOwner();

84 const isEclipticOwner = useIsEclipticOwner();

66−

85+ const [

67− const owned = matchArray(ownedPoints);

86+ rejectedPoints,

68− const incoming = matchArray(incomingPoints);

87+ addRejectedPoint,

69− const managing = matchArray(managingPoints);

88+ ] = useRejectedIncomingPointTransfers();

70− const voting = matchArray(votingPoints);

89+

71− const spawning = matchArray(spawningPoints);

90+ const address = need.addressFromWallet(wallet);

72−

91+

73− // sync controlled points on mount

74− useLifecycle(() => {

75− syncControlledPoints();

76− });

77−

78− // sync display details for known points

79− useSyncKnownPoints([

80− ...owned,

81− ...incoming,

82− ...managing,

83− ...voting,

84− ...spawning,

85− ]);

86−

87− const loading = Nothing.hasInstance(ownedPoints);

92+ const loading = Nothing.hasInstance(controlledPoints);

88−

93+

94+ const ownedPoints = getFromMaybe(controlledPoints, 'ownedPoints', []);

95+ const incomingPoints = getFromMaybe(

96+ controlledPoints,

97+ 'incomingPoints',

98+ []

99+ ).filter(point => !rejectedPoints.includes(point));

100+ const managingPoints = getFromMaybe(controlledPoints, 'managingPoints', []);

101+ const votingPoints = getFromMaybe(controlledPoints, 'votingPoints', []);

102+ const spawningPoints = getFromMaybe(controlledPoints, 'spawningPoints', []);

89− const outgoing = ownedPoints.filter(point =>

103+ const outgoingPoints = ownedPoints.filter(point =>

90 getDetails(point).matchWith({

104 getDetails(point).matchWith({

91 Nothing: () => false,

105 Nothing: () => false,

92 Just: p => hasTransferProxy(p.value),

106 Just: p => hasTransferProxy(p.value),

93 })

107 })

94 );

108 );

109

110+ const multipassPoints = [

111+ ...ownedPoints,

112+ ...managingPoints,

113+ ...votingPoints,

114+ ...spawningPoints,

115+ ];

116+

117+ // sync display details for known points

118+ useSyncKnownPoints([

119+ ...ownedPoints,

120+ ...incomingPoints,

121+ ...managingPoints,

122+ ...votingPoints,

123+ ...spawningPoints,

124+ ]);

125+

96 return (

126 return (

97 <View>

127 <View>

98− <H1>Points</H1>

99−

100− <P>

101− A point is an identity on the Ethereum blockchain. Points declare keys

102− for ships on the Arvo network.

103− </P>

104−

105− <Grid>

128+ <Grid className="mt6">

106− <Grid.Divider />

107− <Grid.Item full>

129+ <Grid.Item full as={H1} className="f6 mono gray4 mb4">

108− <ForwardButton

130+ {abbreviateAddress(address)}

109− detail="View a point on Azimuth"

110− onClick={() => history.push(ROUTE_NAMES.VIEW_POINT)}>

111− View a point

112− </ForwardButton>

113 </Grid.Item>

131 </Grid.Item>

114− <Grid.Divider />

132+

115− {isEclipticOwner && (

133+ {loading && (

116− <>

134+ <Grid.Item full as={HelpText} className="mt8 t-center">

117− <Grid.Item full>

135+ <Blinky /> Loading...

118− <ForwardButton

136+ </Grid.Item>

119− detail="You have the authority to create a new Galaxy."

137+ )}

120− onClick={() => history.push(ROUTE_NAMES.CREATE_GALAXY)}>

138+

121− Create a galaxy

139+ {incomingPoints.length > 0 && (

122− </ForwardButton>

140+ <Grid.Item full as={Grid} gap={1} className="mb6">

141+ <Grid.Item full as={H5}>

142+ Incoming Transfers

123 </Grid.Item>

143 </Grid.Item>

124− <Grid.Divider />

144+ <Grid.Item

125− </>

145+ full

146+ as={PointList}

147+ points={incomingPoints}

148+ actions={(point, i) => (

149+ <ActionButtons

150+ actions={[

151+ {

152+ text: 'Accept',

153+ onClick: () => {

154+ setPointCursor(Just(point));

155+ history.push(history.names.ACCEPT_TRANSFER);

156+ },

157+ },

158+ {

159+ text: 'Reject',

160+ onClick: () => {

161+ addRejectedPoint(point);

162+ },

163+ },

164+ ]}

165+ />

166+ )}

167+ inverted

168+ />

169+ </Grid.Item>

170+ )}

171+

172+ {outgoingPoints.length > 0 && (

173+ <Grid.Item full as={Grid} gap={1} className="mb6">

174+ <Grid.Item full as={H5}>

175+ Outgoing Transfers

176+ </Grid.Item>

177+ <Grid.Item

178+ full

179+ as={PointList}

180+ points={outgoingPoints}

181+ actions={(point, i) => (

182+ <ActionButtons

183+ actions={[

184+ {

185+ text: 'Cancel',

186+ onClick: () => {

187+ setPointCursor(Just(point));

188+ // TODO: deep linking to fix this duplicate route

189+ history.push(history.names.CANCEL_TRANSFER);

190+ },

191+ },

192+ ]}

193+ />

194+ )}

195+ inverted

196+ />

197+ </Grid.Item>

126 )}

198 )}

127− </Grid>

128

199

129− {incoming.length > 0 && (

200+ {multipassPoints.length > 0 && (

130− <>

201+ <Grid.Item full as={Grid} gap={1}>

131− <H2>Incoming Transfers</H2>

202+ <Grid.Item full as={H5}>

132− <P>

203+ Multipasses

133− You do not own these points until you accept the incoming transfer.

204+ </Grid.Item>

134− You may reject any incoming transfers.

205+ <Grid.Item full as={PointList} points={multipassPoints} />

135− </P>

206+ </Grid.Item>

136− <PointList routeHandler={history.push} points={incoming} />

137− </>

138− )}

139−

140− {outgoing.length > 0 && (

141− <>

142− <H2>Outgoing Transfers</H2>

143− <P>

144− You own these points until the recipient accepts the incoming

145− transfer. You may cancel the transfer until accepted.

146− </P>

147− <PointList routeHandler={history.push} points={outgoing} />

148− </>

149− )}

150−

151− <H2>Your Points</H2>

152−

153− <PointList routeHandler={history.push} points={owned} loading={loading} />

154−

155− {managing.length > 0 && (

156− <>

157− <H2>You Are a Management Proxy For</H2>

158− <P>

159− You can configure or set network keys and conduct sponsorship

160− related operations for these points.

161− </P>

162− <PointList routeHandler={history.push} points={managing} />

163− </>

164− )}

207+ )}

165−

208+

166− {voting.length > 0 && (

209+ {isEclipticOwner && (

167− <>

210+ <FooterButton

168− <H2>You Are a Voting Proxy For</H2>

211+ detail="You have the authority to create a new Galaxy."

169− <P>

212+ onClick={() => history.push(ROUTE_NAMES.CREATE_GALAXY)}>

170− Since you are part of the Galactic Senate, you can cast votes on new

213+ Create a galaxy

171− Azimuth proposals on behalf of these points.

214+ </FooterButton>

172− </P>

215+ )}

173− <PointList routeHandler={history.push} points={voting} />

216+ </Grid>

174− </>

175− )}

176−

177− {spawning.length > 0 && (

178− <>

179− <H2>You Are a Spawn Proxy For</H2>

180− <P>You can create new child points under these points.</P>

181− <PointList routeHandler={history.push} points={spawning} />

182− </>

183− )}

184 </View>

217 </View>

185 );

218 );

186}

219}