86d702c · bridge · git.iko.soy

git.iko.soy/bridge

api: use correct params with api

- also, some UX feedback from Jimmy

commit86d702c3cf8676ffd533d9d2411b04803f1a2e59 authortomholford <tomholford@users.noreply.github.com> dateTue 14 Sep 2021, 21:15 (5 years ago) parent7037915

6 files changed+102−90

compare with master

unifiedsplit

src/lib/useRoller.ts+11−9 src/views/Activate/ActivateButton.tsx+9−5 src/views/Activate/ActivateCodeForm.tsx+51−54 src/views/Activate/MasterKeyDownload.tsx+11−11 src/views/Activate/MasterKeyReveal.tsx+11−8 src/views/Activate/MasterKeyTransfer.tsx+9−3

src/lib/useRoller.ts+11−9

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

4949 deriveNetworkSeedFromUrbitWallet,

5050} from './keys';

5151import { convertToInt } from './convertToInt';

52+import { ensureHexPrefix } from 'form/formatters';

5253

5354const spawn = async (

5455 api: any,

@@ -486,17 +487,18 @@ export default function useRoller() {

486487 point: Ship;

487488 to: EthAddress;

488489 ownerAddress: EthAddress;

489− wallet: any; // TODO: wallet type

490+ fromWallet: any; // TODO: wallet type

491+ toWallet: any; // TODO: wallet type

490492 }

491493

492494 const transferPoint = async ({

493495 point,

494496 to,

495497 ownerAddress,

496− wallet,

498+ fromWallet,

499+ toWallet,

497500 }: TransferPointParams) => {

498501 const patp = ob.patp(point);

499− const signingKey = wallet.ownership.keys.private;

500502 const azimuthPoint = await api.getPoint(point);

501503

502504 const { nonce } = getProxyAndNonce(azimuthPoint, ownerAddress);

@@ -508,14 +510,13 @@ export default function useRoller() {

508510 // TODO: extract this to a useRoller#configureKeys function?

509511 const networkRevision = convertToInt(azimuthPoint.network.keys.life, 10);

510512 const nextRevision = networkRevision + 1;

511− const seed = await deriveNetworkSeedFromUrbitWallet(wallet, nextRevision);

513+ const seed = await deriveNetworkSeedFromUrbitWallet(toWallet, nextRevision);

512514 const keys = deriveNetworkKeys(seed.value);

513515 const keysData = {

514− address: ownerAddress,

515− encrypt: keys.crypt.public,

516+ auth: ensureHexPrefix(keys.auth.public),

516517 breach: false,

517− auth: keys.auth.public,

518518 cryptoSuite: CRYPTO_SUITE_VERSION.toString(),

519+ encrypt: ensureHexPrefix(keys.crypt.public),

519520 };

520521 const keysFrom: From = {

521522 ship: patp,

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

530531 );

531532

532533 await api.configureKeys(

533− signTransactionHash(keysHash, Buffer.from(signingKey, 'hex')),

534+ signTransactionHash(keysHash, Buffer.from(keysSigningKey, 'hex')),

534535 keysFrom,

535536 ownerAddress,

536537 keysData

@@ -550,8 +551,9 @@ export default function useRoller() {

550551 transferData

551552 );

552553

554+ const transferSigningKey = toWallet.ownership.keys.private;

553555 const transferTxHash = await api.transferPoint(

554− signTransactionHash(transferHash, Buffer.from(signingKey, 'hex')),

556+ signTransactionHash(transferHash, Buffer.from(transferSigningKey, 'hex')),

555557 transferFrom,

556558 to,

557559 transferData

src/views/Activate/ActivateButton.tsx+9−5

@@ -1,4 +1,4 @@

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

1+import { Button } from '@tlon/indigo-react';

22import { MouseEventHandler } from 'react';

33import withFadeable from './withFadeable';

@@ -16,7 +16,11 @@ const ActivateButton = ({

1616 success = false,

1717 ...rest

1818}: ActivateButtonProps & React.ComponentPropsWithoutRef<'button'>) => {

19− const backgroundColor = success ? '#009F65' : 'black';

19+ const backgroundColor = disabled

20+ ? 'rgba(0,0,0,0.2)'

21+ : success

22+ ? '#009F65'

23+ : 'black';

2024

2125 return (

2226 <Button

@@ -25,11 +29,11 @@ const ActivateButton = ({

2529 color={'white'}

2630 padding={'16px'}

2731 fontFamily="Inter"

28− height={'50px'}

32+ height={'40px'}

2933 fontWeight={'400'}

30− fontSize={'18px'}

34+ fontSize={'14px'}

35+ borderRadius={'4px'}

3136 disabled={disabled}

32− opacity={disabled ? 0.2 : 1.0}

3337 {...rest}>

3438 {children}

3539 </Button>

src/views/Activate/ActivateCodeForm.tsx+51−54

@@ -33,6 +33,7 @@ import { convertToInt } from 'lib/convertToInt';

3333import { Box } from '@tlon/indigo-react';

3434import { timeout } from 'lib/timeout';

3535import withFadeable from './withFadeable';

36+import ActivateButton from './ActivateButton';

3637

3738interface ActivateCodeFormProps {

3839 afterSubmit: VoidFunction;

@@ -185,61 +186,57 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {

185186 flexWrap="nowrap"

186187 height={'100%'}

187188 justifyContent="flex-end">

188− <Grid>

189− <BridgeForm

190− validate={validate}

191− onSubmit={onSubmit}

192− afterSubmit={afterSubmit}

193− initialValues={initialValues}>

194− {({ validating, values, submitting, handleSubmit }) => (

195− <>

196− {!impliedTicket && (

197− <>

198− <Grid.Item

199− full

200− as={TicketInput}

201− type={values.showTicket ? 'text' : 'password'}

202− name="ticket"

203− label="Activation Code"

204− disabled={!activationAllowed}

205− />

206−

207− <Grid.Item

208− full

209− as={CheckboxInput}

210− name="showTicket"

211− label="Show"

212− />

213− </>

214− )}

215−

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

217−

218− <Grid.Item

219− full

220− as={SubmitButton}

221− className="mt4"

222− handleSubmit={handleSubmit}>

223− {isWarning =>

224− validating

225− ? 'Deriving...'

226− : submitting

227− ? 'Generating...'

228− : isWarning

229− ? 'Continue Activation'

230− : 'Claim'

231− }

189+ <BridgeForm

190+ validate={validate}

191+ onSubmit={onSubmit}

192+ afterSubmit={afterSubmit}

193+ initialValues={initialValues}>

194+ {({ valid, validating, values, submitting, handleSubmit }) => (

195+ <>

196+ {!impliedTicket && (

197+ <>

198+ <Grid.Item

199+ full

200+ as={TicketInput}

201+ type={values.showTicket ? 'text' : 'password'}

202+ name="ticket"

203+ label="Activation Code"

204+ disabled={!activationAllowed}

205+ />

206+

207+ <Grid.Item

208+ full

209+ as={CheckboxInput}

210+ name="showTicket"

211+ label="Show"

212+ />

213+ </>

214+ )}

215+

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

217+

218+ <Box

219+ display="flex"

220+ flexDirection="column"

221+ flexWrap="nowrap"

222+ height={'100%'}

223+ width={'100%'}

224+ justifyContent="flex-end">

225+ <ActivateButton

226+ disabled={!valid || submitting}

227+ onClick={handleSubmit}>

228+ {submitting ? 'Generating...' : 'Claim'}

229+ </ActivateButton>

230+ </Box>

231+

232+ {!activationAllowed && (

233+ <Grid.Item full as={WarningBox} className="mt4">

234+ For your security, please access Bridge on a desktop device.

232235 </Grid.Item>

233−

234− {!activationAllowed && (

235− <Grid.Item full as={WarningBox} className="mt4">

236− For your security, please access Bridge on a desktop device.

237− </Grid.Item>

238− )}

239− </>

240− )}

241− </BridgeForm>

242− </Grid>

236+ )}

237+ </>

238+ )}

239+ </BridgeForm>

243240 </Box>

244241 );

245242};

src/views/Activate/MasterKeyDownload.tsx+11−11

@@ -35,7 +35,6 @@ const MasterKeyDownload = () => {

3535

3636 const [paper, setPaper] = useState(Nothing());

3737 const [triggerAnimation, setTriggerAnimation] = useState<boolean>(false);

38− const [downloaded, setDownloaded] = useState<boolean>(false);

3938

4039 const pointAsString = derivedPoint.matchWith({

4140 Nothing: () => '',

@@ -47,8 +46,7 @@ const MasterKeyDownload = () => {

4746 //TODO could be deduplicated with useKeyfileGenerator's logic

4847 const filename = ob.patp(point).slice(1) + '-1.key';

4948 await downloadWallet(paper.getOrElse([]), netkey, filename);

50− setDownloaded(true);

51− }, [paper, wallet, point, setDownloaded]);

49+ }, [paper, wallet, point]);

5250

5351 // sync paper value to activation state

5452 useEffect(

@@ -70,7 +68,7 @@ const MasterKeyDownload = () => {

7068 }, [download, setIsIn, push, names.CONFIRM]);

7169

7270 const header = useMemo(() => {

73− return triggerAnimation ? (

71+ return (

7472 <Box>

7573 <ActivateHeader content={'Backup your Master Key.'} />

7674 <ActivateParagraph

@@ -79,16 +77,16 @@ const MasterKeyDownload = () => {

7977 }

8078 />

8179 </Box>

82− ) : null;

83− }, [triggerAnimation]);

80+ );

81+ }, []);

8482

8583 const footer = useMemo(() => {

86− return triggerAnimation ? (

84+ return (

8785 <ActivateButton onClick={onDownloadClick}>

8886 {'Download Backup (Passport)'}

8987 </ActivateButton>

90− ) : null;

91− }, [onDownloadClick, triggerAnimation]);

88+ );

89+ }, [onDownloadClick]);

9290

9391 const delayedReveal = useCallback(async () => {

9492 setTimeout(() => {

@@ -107,7 +105,9 @@ const MasterKeyDownload = () => {

107105

108106 return (

109107 <>

110− <ActivateView header={header} footer={footer}>

108+ <ActivateView

109+ header={triggerAnimation && header}

110+ footer={triggerAnimation && footer}>

111111 <Box

112112 alignItems={'center'}

113113 display={'flex'}

@@ -119,7 +119,7 @@ const MasterKeyDownload = () => {

119119 <DangerBox>Do not share this with anyone else!</DangerBox>

120120 )}

121121 {ticket && (

122− <MasterKeyPresenter overrideFadeIn={true} ticket={ticket} />

122+ <MasterKeyPresenter ticket={ticket} overrideFadeIn={true} />

123123 )}

124124 {triggerAnimation && <MasterKeyCopy text={ticket} />}

125125 </Box>

src/views/Activate/MasterKeyReveal.tsx+11−8

@@ -22,13 +22,14 @@ const MasterKeyReveal = () => {

2222 }, [names.DOWNLOAD, push]);

2323

2424 const onRevealClick = useCallback(async () => {

25+ setTriggerAnimation(false);

2526 setIsIn(false);

2627 await timeout(DEFAULT_FADE_TIMEOUT); // Pause for UI fade animation

2728 goToDownload();

2829 }, [goToDownload, setIsIn]);

2930

3031 const header = useMemo(() => {

31− return triggerAnimation ? (

32+ return (

3233 <Box>

3334 <ActivateHeader content={'Here is your Master Key.'} />

3435 <ActivateParagraph

@@ -37,11 +38,11 @@ const MasterKeyReveal = () => {

3738 }

3839 />

3940 </Box>

40− ) : null;

41− }, [triggerAnimation]);

41+ );

42+ }, []);

4243

4344 const footer = useMemo(() => {

44− return triggerAnimation ? (

45+ return (

4546 <ActivateButton onClick={onRevealClick}>

4647 <Icon

4748 display="inline-block"

@@ -51,8 +52,8 @@ const MasterKeyReveal = () => {

5152 />

5253   Reveal

5354 </ActivateButton>

54− ) : null;

55− }, [onRevealClick, triggerAnimation]);

55+ );

56+ }, [onRevealClick]);

5657

5758 const delayedFadeIn = useCallback(async () => {

5859 setTimeout(() => {

@@ -71,7 +72,9 @@ const MasterKeyReveal = () => {

7172

7273 return (

7374 <>

74− <ActivateView header={header} footer={footer}>

75+ <ActivateView

76+ header={triggerAnimation && header}

77+ footer={triggerAnimation && footer}>

7578 <Box

7679 alignItems={'center'}

7780 display={'flex'}

@@ -91,7 +94,7 @@ const MasterKeyReveal = () => {

9194 </Box>

9295 </ActivateView>

9396 {triggerAnimation && (

94− <ActivateSteps currentStep={0} totalSteps={4} fadeIn={true} />

97+ <ActivateSteps currentStep={0} totalSteps={4} overrideFadeIn={true} />

9598 )}

9699 </>

97100 );

src/views/Activate/MasterKeyTransfer.tsx+9−3

@@ -14,7 +14,12 @@ import DangerBox from './DangerBox';

1414

1515const MasterKeyTransfer = () => {

1616 const { api, transferPoint } = useRoller();

17− const { derivedPatp, derivedPoint, derivedWallet } = useActivateFlow();

17+ const {

18+ derivedPatp,

19+ derivedPoint,

20+ derivedWallet,

21+ inviteWallet,

22+ } = useActivateFlow();

1823 const [error, setError] = useState();

1924

2025 const claimPoint = useCallback(async () => {

@@ -26,13 +31,14 @@ const MasterKeyTransfer = () => {

2631 point: derivedPoint.value,

2732 to: derivedWallet.value.ownership.address,

2833 ownerAddress: l2point.ownership?.owner?.address!,

29− wallet: derivedWallet.value,

34+ toWallet: derivedWallet.value,

35+ fromWallet: inviteWallet.value,

3036 });

3137 } catch (error) {

3238 console.error(error);

3339 setError(error);

3440 }

35− }, [api, derivedPoint.value, derivedWallet.value, transferPoint]);

41+ }, [api, derivedPoint.value, derivedWallet, inviteWallet, transferPoint]);

3642

3743 useFadeIn();

3844