938c098 · bridge · git.iko.soy

package-lock.json+6−6

compare with master

unifiedsplit

@@ -7755,9 +7755,9 @@

7755 }

7756 },

7757 "@urbit/roller-api": {

7758− "version": "0.1.6",

7758+ "version": "0.1.7",

7759− "resolved": "https://registry.npmjs.org/@urbit/roller-api/-/roller-api-0.1.6.tgz",

7759+ "resolved": "https://registry.npmjs.org/@urbit/roller-api/-/roller-api-0.1.7.tgz",

7760− "integrity": "sha512-JgZTugNzIPzL9wgvPSTaUu8ts1hi4Rgka4QwxBMGq6qeJo5S3q47cNg+dV+TVYcIYOyoNMAOq+1K9jEyui4ayQ==",

7760+ "integrity": "sha512-XkqiYUBZwWM0xfwONxFyATqylZbx/cFH+ToHssw1lGD9q2UiZOISDBVHULgimQy6zCnxTwvlAvDZ6Eozl0L9RQ==",

7761 "requires": {

7762 "@open-rpc/client-js": "1.7.0",

7763 "@open-rpc/meta-schema": "1.14.2",

@@ -14642,9 +14642,9 @@

14642 "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="

14643 },

14644 "fast-safe-stringify": {

14645− "version": "2.0.8",

14645+ "version": "2.1.1",

14646− "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.0.8.tgz",

14646+ "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",

14647− "integrity": "sha512-lXatBjf3WPjmWD6DpIZxkeSsCOwqI0maYMpgDlx8g4U2qi4lbjA9oH/HD2a87G+KfsUmo5WbJFmqBZlPxtptag=="

14647+ "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA=="

14648 },

14649 "fast-sha256": {

14650 "version": "1.3.0",

package.json+1−1

@@ -32,7 +32,7 @@

32 "@types/styled-components": "^5.1.10",

33 "@types/styled-system": "^5.1.11",

34 "@types/styled-system__css": "^5.0.15",

35− "@urbit/roller-api": "^0.1.6",

35+ "@urbit/roller-api": "^0.1.7",

36 "@walletconnect/client": "^1.6.2",

37 "@walletconnect/qrcode-modal": "^1.6.2",

38 "@welldone-software/why-did-you-render": "^3.2.3",

src/components/L2/Dropdowns/AccountsDropdown.scss+63

@@ -4,6 +4,10 @@

4 font-size: 14px;

5 position: relative;

6

7+ .selector {

8+ font-family: "Source Code Pro", "Roboto mono", "Courier New", monospace;

9+ }

10+

7 .content-border {

11 .content-border {

8 .dropdown-content {

12 .dropdown-content {

9 .entry, .current-address {

13 .entry, .current-address {

@@ -47,3 +51,62 @@

47 }

51 }

48 }

52 }

49}

53}

54+

55+.migrate-modal {

56+ padding: 16px;

57+ background-color: white;

58+ border-radius: $medium-border-radius;

59+ line-height: 24px;

60+ position: relative;

61+ width: 368px;

62+

63+ .close {

64+ position: absolute;

65+ top: 3px;

66+ right: 8px;

67+ font-size: 18px;

68+ font-weight: 200;

69+ cursor: pointer;

70+ }

71+

72+ .title {

73+ font-weight: 700;

74+ }

75+

76+ .message {

77+ width: 340px;

78+ }

79+

80+ .warning {

81+ font-weight: 600;

82+ color: $warning-red;

83+ }

84+

85+ .buttons {

86+ display: flex;

87+ flex-direction: row;

88+ justify-content: flex-end;

89+ margin-top: 24px;

90+

91+ .cancel, .migrate {

92+ border-radius: $medium-border-radius;

93+ border: none;

94+ height: 32px;

95+ font-family: $default-font;

96+

97+ &:hover {

98+ opacity: 0.8;

99+ }

100+ }

101+

102+ .cancel {

103+ margin-right: 8px;

104+ background-color: $washed-gray;

105+ }

106+

107+ .migrate {

108+ background-color: black;

109+ color: white;

110+ }

111+ }

112+}

src/components/L2/Dropdowns/AccountsDropdown.tsx+85−23

@@ -1,43 +1,82 @@

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

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

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

3+import { azimuth } from 'azimuth-js';

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

3−import { Icon, Row, Box } from '@tlon/indigo-react';

5+import { Icon, Row, Box, Button } from '@tlon/indigo-react';

4import { Just } from 'folktale/maybe';

6import { Just } from 'folktale/maybe';

5

7

6import Sigil from 'components/Sigil';

8import Sigil from 'components/Sigil';

7import LayerIndicator from 'components/L2/LayerIndicator';

9import LayerIndicator from 'components/L2/LayerIndicator';

10+import CopiableAddressWrap from 'components/copiable/CopiableAddressWrap';

11+

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

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

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

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

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

14import { usePointCursor } from 'store/pointCursor';

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

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

12import { clearInvitesStorage } from 'store/storage/roller';

16import { clearInvitesStorage } from 'store/storage/roller';

13−import CopiableAddressWrap from 'components/copiable/CopiableAddressWrap';

17+import { useRollerStore } from 'store/roller';

14−import Dropdown from './Dropdown';

15

18

16−import './AccountsDropdown.scss';

17−import { abbreviateAddress } from 'lib/utils/address';

18import { PointLayer } from 'lib/types/PointLayer';

19import { PointLayer } from 'lib/types/PointLayer';

20+import { abbreviateAddress } from 'lib/utils/address';

21+

22+import Dropdown from './Dropdown';

23+import './AccountsDropdown.scss';

24+import Modal from '../Modal';

25+import { convertToInt } from 'lib/convertToInt';

19

26

27+interface AccountsDropdownProps {

28+ showMigrate: boolean;

29+}

30+

20−const AccountsDropdown = () => {

31+const AccountsDropdown = ({ showMigrate = false }: AccountsDropdownProps) => {

21 const [open, setOpen] = useState<boolean>(false);

32 const [open, setOpen] = useState<boolean>(false);

22 const walletInfo: any = useWallet();

33 const walletInfo: any = useWallet();

23 const { push, names, reset }: any = useHistory();

34 const { push, names, reset }: any = useHistory();

24 const { setPointCursor }: any = usePointCursor();

35 const { setPointCursor }: any = usePointCursor();

25 const { controlledPoints }: any = usePointCache();

36 const { controlledPoints }: any = usePointCache();

37+ const { currentL2 } = useRollerStore();

38+ const { getDetails }: any = usePointCache();

39+ const { pointCursor }: any = usePointCursor();

40+ const point = pointCursor.getOrElse(null);

41+

42+ let networkKeysNotSet = true;

43+

44+ if (point) {

45+ const pointSize = azimuth.getPointSize(point);

46+ const details = need.details(getDetails(point));

47+ const isStarOrGalaxy = pointSize !== azimuth.PointSize.Planet;

48+ const networkRevision = convertToInt(details.keyRevisionNumber, 10);

49+ networkKeysNotSet = !currentL2 && isStarOrGalaxy && networkRevision === 0;

50+ }

51+

52+ const [showModal, setShowModal] = useState(false);

26

53

27 const canBitcoin = Just.hasInstance(walletInfo.urbitWallet);

54 const canBitcoin = Just.hasInstance(walletInfo.urbitWallet);

28

55

29− const points = controlledPoints?.value?.value?.pointsWithLayers || [];

56+ const points = (controlledPoints?.value?.value?.pointsWithLayers || []).sort(

57+ (a: PointLayer, b: PointLayer) => a.point - b.point

58+ );

30

59

31 const currentAddress = walletInfo?.wallet?.value?.address || '';

60 const currentAddress = walletInfo?.wallet?.value?.address || '';

32 const displayAddress = abbreviateAddress(currentAddress);

61 const displayAddress = abbreviateAddress(currentAddress);

33

62

34− const selectPoint = (point: number) => () => {

63+ const selectPoint = useCallback(

64+ (point: number) => () => {

35− setPointCursor(Just(point));

65+ setPointCursor(Just(point));

36− push(names.POINT);

66+ push(names.POINT);

37− setOpen(false);

67+ setOpen(false);

38− };

68+ },

39− const goToMigrate = () => push(names.MIGRATE);

69+ [push, names.POINT, setOpen, setPointCursor]

70+ );

71+ const goMigrate = useCallback(() => push(names.MIGRATE_L2), [

72+ names.MIGRATE_L2,

73+ push,

74+ ]);

40− const goToBitcoin = () => push(names.BITCOIN);

75+ const goBitcoin = useCallback(() => push(names.BITCOIN), [

76+ names.BITCOIN,

77+ push,

78+ ]);

79+

41 const onLogout = () => {

80 const onLogout = () => {

42 clearInvitesStorage();

81 clearInvitesStorage();

43 reset();

82 reset();

@@ -74,16 +113,18 @@ const AccountsDropdown = () => {

74 })}

113 })}

75 </Box>

114 </Box>

76 <Box className="divider" />

115 <Box className="divider" />

116+ {(showMigrate || (!currentL2 && !networkKeysNotSet)) && (

77− <Row className="entry" onClick={goToMigrate}>

117+ <Row className="entry" onClick={() => setShowModal(true)}>

78− <Box>Migrate</Box>

118+ <Box>Migrate</Box>

79− <Row className="layer-migration">

119+ <Row className="layer-migration">

80− <LayerIndicator layer={1} size="sm" />

120+ <LayerIndicator layer={1} size="sm" />

81− <Icon icon="ArrowEast" />

121+ <Icon icon="ArrowEast" />

82− <LayerIndicator layer={2} size="sm" />

122+ <LayerIndicator layer={2} size="sm" />

123+ </Row>

83 </Row>

124 </Row>

84− </Row>

125+ )}

85 {canBitcoin && (

126 {canBitcoin && (

86− <Row className="entry" onClick={goToBitcoin}>

127+ <Row className="entry" onClick={goBitcoin}>

87 <Box>Bitcoin</Box>

128 <Box>Bitcoin</Box>

88 <Icon icon="Bitcoin" />

129 <Icon icon="Bitcoin" />

89 </Row>

130 </Row>

@@ -92,6 +133,27 @@ const AccountsDropdown = () => {

92 <Box>Logout</Box>

133 <Box>Logout</Box>

93 <Icon icon="LogOut" />

134 <Icon icon="LogOut" />

94 </Row>

135 </Row>

136+ <Modal show={showModal} hide={() => setShowModal(false)}>

137+ <Box className="migrate-modal">

138+ <Box className="close" onClick={() => setShowModal(false)}>

139+ ×

140+ </Box>

141+ <Box className="title">Migrating to Layer 2</Box>

142+ <Box className="message">

143+ We've upgraded Bridge to support Layer 2 transactions. If you don't

144+ migrate now, you can always do it later.

145+ </Box>

146+ <Box className="warning">Migrating to Layer 2 is irreversible.</Box>

147+ <Row className="buttons">

148+ <Button className="cancel" onClick={() => setShowModal(false)}>

149+ Cancel

150+ </Button>

151+ <Button className="migrate" onClick={goMigrate}>

152+ Migrate

153+ </Button>

154+ </Row>

155+ </Box>

156+ </Modal>

95 </Dropdown>

157 </Dropdown>

96 );

158 );

97};

159};

src/components/L2/Headers/L2BackHeader.tsx+3−1

@@ -47,7 +47,9 @@ const L2BackHeader = ({ back, hideBalance = false }: L2BackHeaderProps) => {

47 const _wallet = wallet.getOrElse(null);

48

49 if (_web3 && _wallet) {

50+ const newBalance = _web3.utils.fromWei(

50− const newBalance = toBN(await _web3.eth.getBalance(_wallet.address));

51+ await _web3.eth.getBalance(_wallet.address)

52+ );

51 setEthBalance(newBalance);

53 setEthBalance(newBalance);

52 }

54 }

53 };

55 };

src/components/L2/Headers/L2PointHeader.scss−59

@@ -47,63 +47,4 @@

47 width: 90px;

48 }

49 }

50−

51− .migrate-modal {

52− padding: 16px;

53− background-color: white;

54− border-radius: $medium-border-radius;

55− line-height: 24px;

56− position: relative;

57− width: 368px;

58−

59− .close {

60− position: absolute;

61− top: 3px;

62− right: 8px;

63− font-size: 18px;

64− font-weight: 200;

65− cursor: pointer;

66− }

67−

68− .title {

69− font-weight: 700;

70− }

71−

72− .message {

73− width: 340px;

74− }

75−

76− .warning {

77− font-weight: 600;

78− color: $warning-red;

79− }

80−

81− .buttons {

82− display: flex;

83− flex-direction: row;

84− justify-content: flex-end;

85− margin-top: 24px;

86−

87− .cancel, .migrate {

88− border-radius: $medium-border-radius;

89− border: none;

90− height: 32px;

91− font-family: $default-font;

92−

93− &:hover {

94− opacity: 0.8;

95− }

96− }

97−

98− .cancel {

99− margin-right: 8px;

100− background-color: $washed-gray;

101− }

102−

103− .migrate {

104− background-color: black;

105− color: white;

106− }

107− }

108− }

109}

50}

src/components/L2/Headers/L2PointHeader.tsx+7−39

@@ -1,13 +1,12 @@

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

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

2import { azimuth } from 'azimuth-js';

3−import { Box, Button, Icon, Row } from '@tlon/indigo-react';

3+import { Box, Row } from '@tlon/indigo-react';

4

5import useRoller from 'lib/useRoller';

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

7import { ReactComponent as InviteIcon } from 'assets/invite.svg';

8import { ReactComponent as HistoryIcon } from 'assets/history.svg';

9import AccountsDropdown from '../Dropdowns/AccountsDropdown';

10−import Modal from '../Modal';

11import { useRollerStore } from 'store/roller';

10import { useRollerStore } from 'store/roller';

12

11

13import './L2PointHeader.scss';

12import './L2PointHeader.scss';

@@ -18,17 +17,18 @@ export interface L2PointHeaderProps {

18 numInvites: number;

17 numInvites: number;

19 hideTimer: boolean;

18 hideTimer: boolean;

20 hideInvites: boolean;

19 hideInvites: boolean;

20+ showMigrate: boolean;

21}

22

23const L2PointHeader = ({

24 hideTimer = false,

25 hideInvites = false,

26+ showMigrate = false,

26 numInvites = 0,

27 numInvites = 0,

27}: L2PointHeaderProps) => {

28}: L2PointHeaderProps) => {

28 const { config } = useRoller();

29 const { config } = useRoller();

29 const { nextRoll, currentL2, pendingTransactions } = useRollerStore();

30 const { nextRoll, currentL2, pendingTransactions } = useRollerStore();

30 const { pointCursor }: any = usePointCursor();

31 const { pointCursor }: any = usePointCursor();

31− const [showModal, setShowModal] = useState(false);

32

33 useEffect(() => {

34 if (isDevelopment) {

@@ -46,10 +46,6 @@ const L2PointHeader = ({

46 names.TRANSACTION_HISTORY,

47 push,

48 ]);

49− const goMigrate = useCallback(() => push(names.MIGRATE_L2), [

50− names.MIGRATE_L2,

51− push,

52− ]);

53

49

54 const isStar =

50 const isStar =

55 pointCursor?.value &&

51 pointCursor?.value &&

@@ -57,9 +53,9 @@ const L2PointHeader = ({

57

53

58 return (

54 return (

59 <Row className="l2-point-header">

55 <Row className="l2-point-header">

60− <AccountsDropdown />

56+ <AccountsDropdown showMigrate={showMigrate} />

61 <Row className="info">

57 <Row className="info">

62− {!hideInvites && (

58+ {!hideInvites && isStar && (

63 <Row onClick={goToInvites} className="invites">

59 <Row onClick={goToInvites} className="invites">

64 <InviteIcon />

60 <InviteIcon />

65 {numInvites}

61 {numInvites}

@@ -70,36 +66,8 @@ const L2PointHeader = ({

70 {nextRoll}

66 {nextRoll}

71 </Box>

67 </Box>

72 )}

68 )}

73− {currentL2 && <HistoryIcon className="history" onClick={goToHistory} />}

69+ <HistoryIcon className="history" onClick={goToHistory} />

74− {!currentL2 && isStar && (

75− <Icon

76− icon="Swap"

77− className="history"

78− onClick={() => setShowModal(true)}

79− />

80− )}

81 </Row>

70 </Row>

82− <Modal show={showModal} hide={() => setShowModal(false)}>

83− <Box className="migrate-modal">

84− <Box className="close" onClick={() => setShowModal(false)}>

85− ×

86− </Box>

87− <Box className="title">Migrating to Layer 2</Box>

88− <Box className="message">

89− We've upgraded Bridge to support Layer 2 transactions. If you don't

90− migrate now, you can always do it later.

91− </Box>

92− <Box className="warning">Migrating to Layer 2 is irreversible.</Box>

93− <Row className="buttons">

94− <Button className="cancel" onClick={() => setShowModal(false)}>

95− Cancel

96− </Button>

97− <Button className="migrate" onClick={goMigrate}>

98− Migrate

99− </Button>

100− </Row>

101− </Box>

102− </Modal>

103 </Row>

71 </Row>

104 );

72 );

105};

73};

src/components/L2/LoadingOverlay.scss+2−1

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

1@import 'style/shared/variables.scss';

2

3.loading-overlay {

4− background-color: rgba(0, 0, 0, 0.3);

4+ background-color: rgba(0, 0, 0, 0);

5 position: fixed;

6 top: 0;

7 bottom: 0;

@@ -14,6 +14,7 @@

14 z-index: 1000;

15

16 svg {

17+ display: none;

17 margin-bottom: 120px;

18 margin-bottom: 120px;

18 height: 60px;

19 height: 60px;

19 width: 60px;

20 width: 60px;

src/lib/useRoller.ts+3−3

@@ -212,8 +212,8 @@ export default function useRoller() {

212

213 const getPendingTransactions = useCallback(async () => {

214 try {

215− const curPoint = need.point(pointCursor);

215+ const curPoint = Number(need.point(pointCursor));

216− const newPending = await api.getPendingByShip(Number(curPoint));

216+ const newPending = await api.getPendingByShip(curPoint);

217 setPendingTransactions(newPending);

218

219 // const allTransactions = await api.getHistory()

@@ -257,7 +257,7 @@ export default function useRoller() {

257 if (_authToken && _contracts) {

258 let possibleMissingInvites: number[] = [];

259 if (isL2) {

260− const allSpawned = await api.getSpawned(Number(curPoint));

260+ const allSpawned = await api.getSpawned(curPoint);

261 const ownedPoints = maybeGetResult(

262 controlledPoints,

263 'ownedPoints',

src/lib/utils/roller.ts+3−2

@@ -2,7 +2,8 @@ export const SECOND = 1000;

2export const MINUTE = SECOND * 60;

3export const HOUR = MINUTE * 60;

4

5−export const padZero = (amount: number) => `${amount < 10 ? '0' : ''}${amount}`;

5+export const padZero = (amount: number) =>

6+ `${amount < 10 && amount > 0 ? '0' : ''}${amount}`;

6

7

7export const getTimeToNextBatch = (nextBatch: number, now: number) => {

8export const getTimeToNextBatch = (nextBatch: number, now: number) => {

8 const toNext = nextBatch - now;

9 const toNext = nextBatch - now;

@@ -12,7 +13,7 @@ export const getTimeToNextBatch = (nextBatch: number, now: number) => {

12 (toNext - hours * HOUR - minutes * MINUTE) / SECOND

13 (toNext - hours * HOUR - minutes * MINUTE) / SECOND

13 );

14 );

14

15

15− return `${hours}h ${padZero(minutes)}m ${padZero(seconds)}s`;

16+ return `${padZero(hours)}h ${padZero(minutes)}m ${padZero(seconds)}s`;

16};

17};

17

18

18export const isL2 = (dom?: string) => dom === 'l2' || dom === 'spawn';

19export const isL2 = (dom?: string) => dom === 'l2' || dom === 'spawn';

src/store/lib/useControlledPointsStore.js+14−18

@@ -53,24 +53,20 @@ export default function useControlledPointsStore() {

53 azimuth.azimuth.getSpawningFor(_contracts, address),

54 ]);

55

56− // const pointsWithLayers = await Promise.all(

56+ const pointsWithLayers = await Promise.all(

57− // ownedPoints.map(async ship => {

57+ ownedPoints.map(async ship => {

58− // try {

58+ try {

59− // const pointInfo = await api.getPoint(Number(ship));

59+ const pointInfo = await api.getPoint(Number(ship));

60− // return {

60+ return {

61− // point: Number(ship),

61+ point: Number(ship),

62− // layer: isL2(pointInfo?.dominion) ? 1 : 2,

62+ layer: isL2(pointInfo?.dominion) ? 2 : 1,

63− // };

63+ };

64− // } catch (error) {

64+ } catch (error) {

65− // console.warn(error);

65+ console.warn(error);

66− // return { point: ship, layer: 1 };

66+ return { point: ship, layer: 1 };

67− // }

67+ }

68− // })

68+ })

69− // );

70− const pointsWithLayers = ownedPoints.map(point => ({

71− point: Number(point),

72− layer: 1,

73− }));

69+ );

74

70

75 if (

71 if (

76 ownedPoints === null &&

72 ownedPoints === null &&

src/views/Invite/Cohort.js+14−38

@@ -14,7 +14,6 @@ import { useLocalRouter } from 'lib/LocalRouter';

14import * as need from 'lib/need';

15import * as wg from 'lib/walletgen';

16import useRoller from 'lib/useRoller';

17−import { convertToInt } from 'lib/convertToInt';

18import { generateUrl } from 'lib/utils/invite';

17import { generateUrl } from 'lib/utils/invite';

19

18

20import { useIssueChild } from 'views/Point/IssueChild';

19import { useIssueChild } from 'views/Point/IssueChild';

@@ -36,7 +35,7 @@ const INVITES_PER_PAGE = 7;

36const DEFAULT_NUM_INVITES = 5;

35const DEFAULT_NUM_INVITES = 5;

37

36

38export default function InviteCohort() {

37export default function InviteCohort() {

39− const { pop, push, names } = useLocalRouter();

38+ const { pop } = useLocalRouter();

40 const { authToken } = useWallet();

39 const { authToken } = useWallet();

41 const {

40 const {

42 nextRoll,

41 nextRoll,

@@ -48,19 +47,11 @@ export default function InviteCohort() {

48 const { generateInviteCodes, getPendingTransactions } = useRoller();

47 const { generateInviteCodes, getPendingTransactions } = useRoller();

49 const { pointCursor } = usePointCursor();

48 const { pointCursor } = usePointCursor();

50 const { contracts } = useNetwork();

49 const { contracts } = useNetwork();

51− const { getDetails, syncControlledPoints } = usePointCache();

50+ const { syncControlledPoints } = usePointCache();

52

51

53 const point = need.point(pointCursor);

52 const point = need.point(pointCursor);

54 const _contracts = need.contracts(contracts);

53 const _contracts = need.contracts(contracts);

55

54

56− const pointSize = azimuth.azimuth.getPointSize(point);

57− const isParent = pointSize !== azimuth.azimuth.PointSize.Planet;

58− const details = need.details(getDetails(point));

59− const networkRevision = convertToInt(details.keyRevisionNumber, 10);

60− const networkKeysNotSet = !currentL2 && isParent && networkRevision === 0;

61−

62− const goUrbitOS = useCallback(() => push(names.URBIT_OS), [push, names]);

63−

64 const [numInvites, setNumInvites] = useState(

55 const [numInvites, setNumInvites] = useState(

65 currentL2 ? DEFAULT_NUM_INVITES : 1

56 currentL2 ? DEFAULT_NUM_INVITES : 1

66 );

57 );

@@ -170,7 +161,7 @@ export default function InviteCohort() {

170 }, [generateInviteCodes, numInvites, getPendingTransactions, point, pop]);

161 }, [generateInviteCodes, numInvites, getPendingTransactions, point, pop]);

171

162

172 const getContent = () => {

163 const getContent = () => {

173− if (hasInvites && !networkKeysNotSet) {

164+ if (hasInvites) {

174 return (

165 return (

175 <>

166 <>

176 <div>

167 <div>

@@ -203,18 +194,6 @@ export default function InviteCohort() {

203 Check back in <span className="timer"> {nextRoll}</span>

194 Check back in <span className="timer"> {nextRoll}</span>

204 </>

195 </>

205 );

196 );

206− } else if (networkKeysNotSet) {

207− return (

208− <>

209− This star's network keys are not set.

210− <br />

211− Either set the network keys or{' '}

212− <span className="migrate" onClick={() => null}>

213− {/* TODO: change this to navigate to migration */}

214− migrate this star to L2.

215− </span>

216− </>

217− );

218 }

197 }

219

198

220 return (

199 return (

@@ -224,7 +203,9 @@ export default function InviteCohort() {

224 {currentL2 && (

203 {currentL2 && (

225 <>

204 <>

226 Generate your codes in

205 Generate your codes in

206+ <br />

227− <span className="timer"> {nextRoll} </span>

207+ <span className="timer">{nextRoll}</span>

208+ <br />

228 to get in the next roll.

209 to get in the next roll.

229 </>

210 </>

230 )}

211 )}

@@ -296,11 +277,16 @@ export default function InviteCohort() {

296 {currentL2 ? (

277 {currentL2 ? (

297 <Button

278 <Button

298 as={'button'}

279 as={'button'}

299− className="generate-codes"

280+ className={`generate-codes ${loading ? 'loading' : ''}`}

300 center

281 center

301 solid

282 solid

283+ disabled={loading}

302 onClick={createInvites}>

284 onClick={createInvites}>

285+ {loading

286+ ? 'Generating...'

287+ : `Generate Planet Code${

303− Generate Planet Code{currentL2 ? `s (${numInvites})` : ''}

288+ currentL2 ? `s (${numInvites})` : ''

289+ }`}

304 </Button>

290 </Button>

305 ) : (

291 ) : (

306 <Grid.Item

292 <Grid.Item

@@ -319,7 +305,7 @@ export default function InviteCohort() {

319 );

305 );

320 }

306 }

321

307

322− const showGenerateButton = !hasPending && !hasInvites && !networkKeysNotSet;

308+ const showGenerateButton = !hasPending && !hasInvites;

323

309

324 return (

310 return (

325 <View

311 <View

@@ -356,16 +342,6 @@ export default function InviteCohort() {

356 Generate Codes

342 Generate Codes

357 </Button>

343 </Button>

358 )}

344 )}

359− {networkKeysNotSet && (

360− <Button

361− as={'button'}

362− className="generate-button"

363− center

364− solid

365− onClick={goUrbitOS}>

366− Set Network Keys

367− </Button>

368− )}

369 {hasInvites && (

345 {hasInvites && (

370 <Paginator

346 <Paginator

371 page={page}

347 page={page}

src/views/Invite/Cohort.scss+4

@@ -175,6 +175,10 @@

175 border: none;

176 margin-top: 8px;

177 padding: 8px;

178+

179+ &.loading {

180+ background-color: $mid-gray;

181+ }

178 }

182 }

179 }

183 }

180 }

184 }

src/views/Point/MigrateL2.tsx+12−4

@@ -87,9 +87,7 @@ export default function MigrateL2() {

87 const [selectedPoint, setSelectedPoint] = useState(point);

88 const [showDropdown, setShowDropdown] = useState(false);

89

90− const points = controlledPoints?.value?.value?.pointsWithLayers || [

90+ const points = controlledPoints?.value?.value?.pointsWithLayers || [];

91− { point, layer: 1 },

92− ];

93 const l1Points = points.filter(

91 const l1Points = points.filter(

94 ({ point, layer }: PointLayer) =>

92 ({ point, layer }: PointLayer) =>

95 layer === 1 &&

93 layer === 1 &&

@@ -140,6 +138,16 @@ export default function MigrateL2() {

140 );

138 );

141

139

142 const getContent = () => {

140 const getContent = () => {

141+ if (l1Points.length === 0) {

142+ return (

143+ <Box className="content">

144+ <Box className="ship-selector">

145+ <Box>All of your ships are already on Layer 2.</Box>

146+ </Box>

147+ </Box>

148+ );

149+ }

150+

143 if (proceed) {

151 if (proceed) {

144 return (

152 return (

145 <Box className="content">

153 <Box className="content">

@@ -163,7 +171,7 @@ export default function MigrateL2() {

163 <Grid.Item

171 <Grid.Item

164 full

172 full

165 as={InlineEthereumTransaction}

173 as={InlineEthereumTransaction}

166− label="Migrate"

174+ label="Migrate to Layer 2"

167 {...bind}

175 {...bind}

168 onReturn={pop}

176 onReturn={pop}

169 />

177 />

src/views/Point/Point.js+55−11

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

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

2import cn from 'classnames';

3−import { Just } from 'folktale/maybe';

4−import { Grid, Flex, Button } from 'indigo-react';

5−import { Icon, Row } from '@tlon/indigo-react';

6import { azimuth } from 'azimuth-js';

3import { azimuth } from 'azimuth-js';

4+import { Just } from 'folktale/maybe';

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

6+import { Box, Icon, Row, Button } from '@tlon/indigo-react';

7

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

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

@@ -32,6 +32,9 @@ import useRoller from 'lib/useRoller';

32import './Point.scss';

33import { isL2 } from 'lib/utils/roller';

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

35+import { convertToInt } from 'lib/convertToInt';

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

37+import Modal from 'components/L2/Modal';

35

38

36function InviteForm({

39function InviteForm({

37 showInviteForm,

40 showInviteForm,

@@ -123,6 +126,7 @@ export default function Point() {

123 const { wallet, authToken } = useWallet();

126 const { wallet, authToken } = useWallet();

124 const { pointCursor } = usePointCursor();

127 const { pointCursor } = usePointCursor();

125 const point = need.point(pointCursor);

128 const point = need.point(pointCursor);

129+ const { getDetails } = usePointCache();

126

130

127 const { api, getInvites } = useRoller();

131 const { api, getInvites } = useRoller();

128 const {

132 const {

@@ -131,9 +135,23 @@ export default function Point() {

131 invites,

135 invites,

132 setCurrentPoint,

136 setCurrentPoint,

133 setPendingTransactions,

137 setPendingTransactions,

138+ currentL2,

134 } = useRollerStore();

139 } = useRollerStore();

135

140

136− const [loaded, setLoaded] = useState(false);

141+ const pointSize = azimuth.getPointSize(point);

142+ const details = need.details(getDetails(point));

143+ const isStarOrGalaxy = pointSize !== azimuth.PointSize.Planet;

144+ const networkRevision = convertToInt(details.keyRevisionNumber, 10);

145+ const networkKeysNotSet =

146+ !currentL2 && isStarOrGalaxy && networkRevision === 0;

147+

148+ const [showModal, setShowModal] = useState(networkKeysNotSet);

149+

150+ useEffect(() => {

151+ if (networkKeysNotSet) {

152+ setShowModal(true);

153+ }

154+ }, [networkKeysNotSet]);

137

155

138 useEffect(() => {

156 useEffect(() => {

139 const loadL2Info = async () => {

157 const loadL2Info = async () => {

@@ -147,14 +165,11 @@ export default function Point() {

147 getInvites(isL2(pointInfo.dominion));

165 getInvites(isL2(pointInfo.dominion));

148 };

166 };

149

167

150− if (!loaded) {

151− getTransactions();

168+ getTransactions();

152− setLoaded(true);

153− }

154 };

169 };

155

170

156 loadL2Info();

171 loadL2Info();

157− }, [api, point, authToken, setPendingTransactions, loaded]); // eslint-disable-line

172+ }, [api, point, authToken, setPendingTransactions]); // eslint-disable-line

158

173

159 const { isParent, canManage, canSpawn, canVote } = useCurrentPermissions();

174 const { isParent, canManage, canSpawn, canVote } = useCurrentPermissions();

160

175

@@ -226,8 +241,13 @@ export default function Point() {

226 pop={pop}

241 pop={pop}

227 inset

242 inset

228 className="point"

243 className="point"

244+ hideBack

229 header={

245 header={

246+ <L2PointHeader

247+ hideTimer={!!numPending}

230− <L2PointHeader hideTimer={!!numPending} numInvites={invites.length} />

248+ numInvites={invites.length}

249+ hideInvites={networkKeysNotSet}

250+ />

231 }>

251 }>

232 <Greeting point={point} />

252 <Greeting point={point} />

233 {!!numPending && (

253 {!!numPending && (

@@ -236,7 +256,10 @@ export default function Point() {

236 <div className="title">

256 <div className="title">

237 {numPending} Planet{numPending > 1 ? 's' : ''} Spawned

257 {numPending} Planet{numPending > 1 ? 's' : ''} Spawned

238 </div>

258 </div>

239− <div className="rollup-timer">{nextRoll}</div>

259+ <div className="rollup-timer">

260+ <Icon icon="Clock" />

261+ {nextRoll}

262+ </div>

240 </Row>

263 </Row>

241 <Row className="info-row">

264 <Row className="info-row">

242 <LayerIndicator layer={2} size="sm" />

265 <LayerIndicator layer={2} size="sm" />

@@ -310,6 +333,27 @@ export default function Point() {

310 )}

333 )}

311 {senateButton}

334 {senateButton}

312 </Grid>

335 </Grid>

336+ <Modal show={showModal} hide={() => setShowModal(false)}>

337+ <Box className="network-keys-modal">

338+ <Box className="close" onClick={() => setShowModal(false)}>

339+ ×

340+ </Box>

341+ <Box className="title">Network Keys Not Set</Box>

342+ <Box className="message">

343+ This point's network keys are not set. The network keys must be set

344+ to spawn points or migrate to Layer 2. Please set them in Urbit OS

345+ Settings.

346+ </Box>

347+ <Row className="buttons">

348+ <Button className="cancel" onClick={() => setShowModal(false)}>

349+ Cancel

350+ </Button>

351+ <Button className="migrate" onClick={goUrbitOS}>

352+ Set Keys

353+ </Button>

354+ </Row>

355+ </Box>

356+ </Modal>

313 </View>

357 </View>

314 );

358 );

315}

359}

src/views/Point/Point.scss+67−2

@@ -22,9 +22,19 @@

22

23 .rollup-timer {

24 background-color: $rollup-yellow;

25− padding: 8px;

25+ padding: 4px 8px;

26− width: 90px;

26+ width: 110px;

27 border-radius: $medium-border-radius;

28+ display: flex;

29+ flex-direction: row;

30+ justify-content: center;

31+ align-items: center;

32+

33+ svg {

34+ height: 14px;

35+ width: 14px;

36+ margin-right: 4px;

37+ }

28 }

38 }

29 }

39 }

30

40

@@ -39,3 +49,58 @@

39 }

49 }

40 }

50 }

41}

51}

52+

53+.network-keys-modal {

54+ padding: 16px;

55+ background-color: white;

56+ border-radius: $medium-border-radius;

57+ line-height: 24px;

58+ position: relative;

59+ width: 368px;

60+

61+ .close {

62+ position: absolute;

63+ top: 3px;

64+ right: 8px;

65+ font-size: 18px;

66+ font-weight: 200;

67+ cursor: pointer;

68+ }

69+

70+ .title {

71+ font-weight: 700;

72+ margin-bottom: 8px;

73+ }

74+

75+ .message {

76+ width: 340px;

77+ }

78+

79+ .buttons {

80+ display: flex;

81+ flex-direction: row;

82+ justify-content: flex-end;

83+ margin-top: 24px;

84+

85+ .cancel, .migrate {

86+ border-radius: $medium-border-radius;

87+ border: none;

88+ height: 32px;

89+ font-family: $default-font;

90+

91+ &:hover {

92+ opacity: 0.8;

93+ }

94+ }

95+

96+ .cancel {

97+ margin-right: 8px;

98+ background-color: $washed-gray;

99+ }

100+

101+ .migrate {

102+ background-color: black;

103+ color: white;

104+ }

105+ }

106+}

src/views/Points.js+1−1

@@ -319,7 +319,7 @@ export default function Points() {

319 inset

320 pop={pop}

321 hideBack

322− header={<L2PointHeader hideTimer hideInvites />}>

322+ header={<L2PointHeader hideTimer hideInvites showMigrate />}>

323 <NavHeader>

324 <CopiableAddress

325 text={address}