a388dea · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

Updated network seed page

a388deaWill Galebach5 years ago

src/components/Buttons.js+4−6

compare with master

unifiedsplit

@@ -6,19 +6,17 @@ import { blinkIf } from './Blinky';

7// NOTE: the -> is correct because inter recognizes the pair

8export const ForwardButton = ({ loading, ...props }) => (

9− <Button accessory={blinkIf(loading, '->')} {...props} center />

9+ <Button accessory={blinkIf(loading, '->')} {...props} />

10);

11export const DownloadButton = ({ loading, ...props }) => (

12− <Button accessory={blinkIf(loading, '↓')} {...props} center />

12+ <Button accessory={blinkIf(loading, '↓')} {...props} />

13−);

14−export const RestartButton = props => (

15− <Button accessory="↺" {...props} center />

16);

13);

14+export const RestartButton = props => <Button accessory="↺" {...props} />;

17export const GenerateButton = ({ loading, ...props }) => (

15export const GenerateButton = ({ loading, ...props }) => (

18 <Button accessory={blinkIf(loading, '○')} solid {...props} />

16 <Button accessory={blinkIf(loading, '○')} solid {...props} />

19);

17);

20export const OutButton = props => (

18export const OutButton = props => (

21− <Button as="a" target="_blank" accessory="↗" {...props} center />

19+ <Button as="a" target="_blank" accessory="↗" {...props} />

22);

20);

24export const OfflineButton = props => (

22export const OfflineButton = props => (

src/components/InlineEthereumTransaction.js+5

@@ -99,6 +99,7 @@ export default function InlineEthereumTransaction({

99 full

100 as={RestartButton}

101 solid

102+ center

102 onClick={() => reset()}>

103 onClick={() => reset()}>

103 Reset Transaction

104 Reset Transaction

104 </Grid.Item>

105 </Grid.Item>

@@ -111,6 +112,7 @@ export default function InlineEthereumTransaction({

111 className="eth-tx-button"

112 className="eth-tx-button"

112 full

113 full

113 as={RestartButton}

114 as={RestartButton}

115+ center

114 onClick={onReturn}>

116 onClick={onReturn}>

115 Return

117 Return

116 </Grid.Item>

118 </Grid.Item>

@@ -141,6 +143,7 @@ export default function InlineEthereumTransaction({

141 as={ForwardButton}

143 as={ForwardButton}

142 solid

144 solid

143 success

145 success

146+ center

144 disabled={!canBroadcast}

147 disabled={!canBroadcast}

145 onClick={() => broadcast()}>

148 onClick={() => broadcast()}>

146 Send Transaction

149 Send Transaction

@@ -152,6 +155,7 @@ export default function InlineEthereumTransaction({

152 className="ph4 eth-tx-button"

155 className="ph4 eth-tx-button"

153 full

156 full

154 as={ProgressButton}

157 as={ProgressButton}

158+ center

155 success

159 success

156 disabled

160 disabled

157 progress={confirmationProgress}>

161 progress={confirmationProgress}>

@@ -164,6 +168,7 @@ export default function InlineEthereumTransaction({

164 className="ph4 eth-tx-button"

168 className="ph4 eth-tx-button"

165 full

169 full

166 as={GenerateButton}

170 as={GenerateButton}

171+ center

167 onClick={generateAndSign}

172 onClick={generateAndSign}

168 disabled={!canSign}

173 disabled={!canSign}

169 loading={!canSign && initializing}>

174 loading={!canSign && initializing}>

src/views/Party/PartySetPoolSize.js+2−2

@@ -120,8 +120,8 @@ export default function PartySetPoolSize() {

120

121 {!hasKeysSet && (

122 <Grid.Item full as={WarningBox} className="mb4 f6">

123− Network keys must be configured for invitations to be available

123+ Network keys must be configured for invitations to be available for

124− for use.

124+ use.

125 </Grid.Item>

126 )}

127

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

@@ -65,8 +65,8 @@

65 width: 16px;

67 svg {

68− width: 16px;

68+ width: 18px;

69− height: 16px;

69+ height: 18px;

70 color: white;

71 }

72 }

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

@@ -77,8 +77,8 @@

77 width: 16px;

79 svg {

80− width: 16px;

80+ width: 18px;

81− height: 16px;

81+ height: 18px;

82 color: white;

83 }

84 }

src/views/Point/UrbitOS.js+1−1

@@ -9,7 +9,7 @@ import View from 'components/View';

9import L2BackHeader from 'components/L2/Headers/L2BackHeader';

11import UrbitOSHome from '../UrbitOS/Home';

12−import UrbitOSNetworkKeys from '../UrbitOS/NetworkKeys';

12+import UrbitOSNetworkKeys from '../UrbitOS/NetworkKeys.tsx';

13import UrbitOSChangeSponsor from '../UrbitOS/ChangeSponsor';

15const NAMES = {

src/views/UrbitOS/Home.tsx+1−3

@@ -83,9 +83,7 @@ export default function UrbitOSHome() {

83 <Box>

84 <Box>Network Keys</Box>

85 <Box

86− className={`subtitle ${

87− !hasSetNetworkKeys ? 'error-text' : ''

86+ className={`subtitle ${!hasSetNetworkKeys ? 'error-text' : ''}`}>

88− }`}>

89 {hasSetNetworkKeys

87 {hasSetNetworkKeys

90 ? `Revision: ${point.keyRevisionNumber}`

88 ? `Revision: ${point.keyRevisionNumber}`

91 : 'No network keys found'}

89 : 'No network keys found'}

src/views/UrbitOS/NetworkKeys.scssnew file+37

@@ -0,0 +1,37 @@

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

3+.network-keys {

4+ font-size: 14px;

6+ .body-pane {

7+ .contents {

8+ height: 448px;

9+ width: 100%;

10+ display: flex;

11+ flex-direction: column;

12+ justify-content: space-between;

13+

14+ .check-row {

15+ margin-top: 8px;

16+ font-weight: 500;

17+

18+ .checkbox {

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

20+ height: 16px;

21+ width: 16px;

22+ margin-right: 14px;

23+

24+ svg {

25+ height: 18px;

26+ width: 18px;

27+ }

28+ }

29+ }

30+

31+ .info-text {

32+ color: $dark-gray;

33+ margin: 8px 0px 24px 32px;

34+ }

35+ }

36+ }

37+}

src/views/UrbitOS/NetworkKeys.js → src/views/UrbitOS/NetworkKeys.tsxrenamed+79−65

@@ -6,9 +6,10 @@ import React, {

6 useState,

7} from 'react';

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

9−import { Grid, ToggleInput, CheckboxInput, Button } from 'indigo-react';

9+import { Grid, Button } from 'indigo-react';

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

11import { randomHex } from 'web3-utils';

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

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

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

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

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

@@ -41,26 +42,29 @@ import {

41 buildHexValidator,

42 buildHexValidator,

42} from 'form/validators';

43} from 'form/validators';

43import BridgeForm from 'form/BridgeForm';

44import BridgeForm from 'form/BridgeForm';

44−import Condition from 'form/Condition';

45import FormError from 'form/FormError';

46import { convertToInt } from 'lib/convertToInt';

47import Window from 'components/L2/Window/Window';

48import HeaderPane from 'components/L2/Window/HeaderPane';

49import BodyPane from 'components/L2/Window/BodyPane';

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

51+import './NetworkKeys.scss';

52+

52−function useSetKeys(manualNetworkSeed, setManualNetworkSeed) {

53+function useSetKeys(

54+ manualNetworkSeed: string,

55+ setManualNetworkSeed: (seed: string) => void

56+) {

53− const { urbitWallet, wallet, authMnemonic, authToken } = useWallet();

57+ const { urbitWallet, wallet, authMnemonic, authToken }: any = useWallet();

54− const { pointCursor } = usePointCursor();

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

55− const { syncDetails, syncRekeyDate, getDetails } = usePointCache();

59+ const { syncDetails, syncRekeyDate, getDetails }: any = usePointCache();

56− const { contracts } = useNetwork();

60+ const { contracts }: any = useNetwork();

58 const _point = need.point(pointCursor);

62 const _point = need.point(pointCursor);

59 const _contracts = need.contracts(contracts);

63 const _contracts = need.contracts(contracts);

60 const _details = need.details(getDetails(_point));

64 const _details = need.details(getDetails(_point));

62 const networkRevision = convertToInt(_details.keyRevisionNumber, 10);

66 const networkRevision = convertToInt(_details.keyRevisionNumber, 10);

63− const randomSeed = useRef();

67+ const randomSeed = useRef<string | null>();

65 const {

69 const {

66 available: keyfileAvailable,

70 available: keyfileAvailable,

@@ -112,7 +116,7 @@ function useSetKeys(manualNetworkSeed, setManualNetworkSeed) {

112

116

113 const { completed: _completed, ...rest } = useEthereumTransaction(

117 const { completed: _completed, ...rest } = useEthereumTransaction(

114 useCallback(

118 useCallback(

115− async (manualSeed, isDiscontinuity) => {

119+ async (manualSeed: string, isDiscontinuity: boolean) => {

116 const seed = await buildNetworkSeed(manualSeed);

120 const seed = await buildNetworkSeed(manualSeed);

117 const pair = deriveNetworkKeys(seed);

121 const pair = deriveNetworkKeys(seed);

118

122

@@ -148,8 +152,11 @@ function useSetKeys(manualNetworkSeed, setManualNetworkSeed) {

148export default function UrbitOSNetworkKeys({

152export default function UrbitOSNetworkKeys({

149 manualNetworkSeed,

153 manualNetworkSeed,

150 setManualNetworkSeed,

154 setManualNetworkSeed,

155+}: {

156+ manualNetworkSeed: string;

157+ setManualNetworkSeed: (seed: string) => void;

151}) {

158}) {

152− const { pop } = useLocalRouter();

159+ const { pop }: any = useLocalRouter();

153 const { point, setLoading } = useRollerStore();

160 const { point, setLoading } = useRollerStore();

154 const {

161 const {

155 configureNetworkKeys,

162 configureNetworkKeys,

@@ -157,6 +164,7 @@ export default function UrbitOSNetworkKeys({

157 checkForUpdates,

164 checkForUpdates,

158 } = useRoller();

165 } = useRoller();

159 const [breach, setBreach] = useState(false);

166 const [breach, setBreach] = useState(false);

167+ const [useCustomSeed, setUseCustomSeed] = useState(false);

160

168

161 const hasKeys = point.networkKeysSet;

169 const hasKeys = point.networkKeysSet;

162

170

@@ -200,12 +208,9 @@ export default function UrbitOSNetworkKeys({

200 const onValues = useCallback(

208 const onValues = useCallback(

201 ({ valid, values, form }) => {

209 ({ valid, values, form }) => {

202 if (valid) {

210 if (valid) {

203− construct(

204− values.useNetworkSeed ? values.networkSeed : undefined,

211+ const networkSeed = useCustomSeed ? values.networkSeed : undefined;

205− values.useDiscontinuity

212+ construct(networkSeed, breach);

206− );

207− setBreach(values.useDiscontinuity);

208− setManualNetworkSeed(values.useNetworkSeed);

213+ setManualNetworkSeed(networkSeed);

209 } else {

214 } else {

210 unconstruct();

215 unconstruct();

211 }

216 }

@@ -216,7 +221,14 @@ export default function UrbitOSNetworkKeys({

216 setManualNetworkSeed('');

221 setManualNetworkSeed('');

217 }

222 }

218 },

223 },

224+ [

225+ construct,

226+ unconstruct,

227+ breach,

219− [construct, unconstruct, setManualNetworkSeed, setBreach]

228+ setManualNetworkSeed,

229+ setBreach,

230+ useCustomSeed,

231+ ]

220 );

232 );

221

233

222 const setNetworkKeys = useCallback(async () => {

234 const setNetworkKeys = useCallback(async () => {

@@ -224,10 +236,10 @@ export default function UrbitOSNetworkKeys({

224 try {

236 try {

225 await configureNetworkKeys({

237 await configureNetworkKeys({

226 breach,

238 breach,

227− manualNetworkSeed,

239+ customNetworkSeed: manualNetworkSeed,

228 });

240 });

229 // TODO: just use the tx hash instead?

241 // TODO: just use the tx hash instead?

230− getPendingTransactions(point);

242+ getPendingTransactions();

231 // TODO: this is just so we get visual feedback that the tx has gone through

243 // TODO: this is just so we get visual feedback that the tx has gone through

232 // but this should be addressed with the new UI flow (-> download keyfile)

244 // but this should be addressed with the new UI flow (-> download keyfile)

233 //

245 //

@@ -264,26 +276,17 @@ export default function UrbitOSNetworkKeys({

264 []

276 []

265 );

277 );

266

278

267− const viewTitle = completed

279+ const viewTitle = completed ? 'Network Keys are now set' : 'Set Network Keys';

268− ? 'Network Keys are now set'

269− : 'Set Network Keys';

270

280

271 const usageMessage =

281 const usageMessage =

272 'You need this keyfile to authenticate with your OS. Please Download.';

282 'You need this keyfile to authenticate with your OS. Please Download.';

273

283

274 return (

284 return (

275− <Window>

285+ <Window className="network-keys">

276 <HeaderPane>

286 <HeaderPane>

277− <Row className="header-row">

278− <h5>{viewTitle}</h5>

287+ <h5>{viewTitle}</h5>

279− </Row>

280 </HeaderPane>

288 </HeaderPane>

281 <BodyPane>

289 <BodyPane>

282− {!completed && (

283− <Grid.Item className="gray4 f5 mv2 align-self-start" full>

284− Network Keys authenticate Urbit ID with Urbit OS.

285− </Grid.Item>

286− )}

287 {completed && (

290 {completed && (

288 <>

291 <>

289 <Grid.Item

292 <Grid.Item

@@ -304,43 +307,54 @@ export default function UrbitOSNetworkKeys({

304 onValues={onValues}

307 onValues={onValues}

305 initialValues={initialValues}>

308 initialValues={initialValues}>

306 {() => (

309 {() => (

307− <Box width="100%">

310+ <Box className="contents">

308 {!completed && (

311 {!completed && (

309− <>

312+ <Box>

310− <Grid.Item

313+ <Row className="check-row" onClick={() => setBreach(!breach)}>

311− full

314+ <Checkbox

312− as={ToggleInput}

315+ className="checkbox"

313− name="useNetworkSeed"

316+ selected={breach}

314− label="Use Custom Network Seed"

315− inverseLabel="Back to Derived Network Seed"

316− disabled={inputsLocked}

317− />

318− <Condition when="useNetworkSeed" is={true}>

319− <Grid.Item full as={NoticeBox} className="mb2">

320− When using a custom network seed, you'll need to download

321− your Arvo keyfile immediately after this transaction as

322− Bridge does not store your seed.

323− </Grid.Item>

324− <Grid.Item

325− full

326− as={HexInput}

327− name="networkSeed"

328− label="Network Seed (32 bytes)"

329 disabled={inputsLocked}

317 disabled={inputsLocked}

330− className="mb6"

331 />

318 />

332− </Condition>

319+ Factory Reset

333− <Grid.Item

320+ </Row>

321+ <Box className="info-text">

322+ Use if your ship is corrupted, you lost your files, or

323+ <br />

324+ you want to erase your data

325+ </Box>

326+ <Row

327+ className="check-row"

328+ onClick={() => setUseCustomSeed(!useCustomSeed)}>

329+ <Checkbox

330+ className="checkbox"

331+ selected={useCustomSeed}

332+ disabled={inputsLocked}

333+ />

334+ Custom Network Seed

335+ </Row>

336+ <Box className="info-text">

337+ Enter your own custom network seed to derive from

338+ </Box>

339+ {useCustomSeed && (

340+ <>

341+ <Grid.Item full as={NoticeBox} className="mb2">

342+ When using a custom network seed, you'll need to

343+ download your Arvo keyfile immediately after this

344+ transaction as Bridge does not store your seed.

345+ </Grid.Item>

346+ <Grid.Item

334− full

347+ full

335− as={CheckboxInput}

348+ as={HexInput}

336− name="useDiscontinuity"

349+ name="networkSeed"

337− label="Breach Continuity"

350+ label="Network Seed (32 bytes)"

338− disabled={inputsLocked}

351+ disabled={inputsLocked}

339− className="mb6"

352+ className="mb5"

340− />

353+ />

341−

354+ </>

355+ )}

342 <Grid.Item full as={FormError} />

356 <Grid.Item full as={FormError} />

343− </>

357+ </Box>

344 )}

358 )}

345

359

346 {point.isL2 ? (

360 {point.isL2 ? (