09c909e · bridge · git.iko.soy

src/components/L2/Headers/AdvancedOptions.tsx+17

compare with master

unifiedsplit

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

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

2import { Text, Box, Checkbox, Icon, Row } from '@tlon/indigo-react';

3import './AdvancedOptions.scss';

4+import styled from 'styled-components';

4

5

5interface AdvancedOptionsProps {

6interface AdvancedOptionsProps {

6 options: {

7 options: {

@@ -11,6 +12,15 @@ interface AdvancedOptionsProps {

11 }[];

12 }[];

12}

13}

13

14

15+// Hide this input completely

16+const HiddenInput = styled.input`

17+ position: absolute;

18+ opacity: 0;

19+ height: 0;

20+ width: 0;

21+ margin: 0px;

22+`;

23+

14export default function AdvancedOptions({ options }: AdvancedOptionsProps) {

24export default function AdvancedOptions({ options }: AdvancedOptionsProps) {

15 const showingAny = options.reduce(

25 const showingAny = options.reduce(

16 (anySelected, { selected }) => anySelected || selected,

26 (anySelected, { selected }) => anySelected || selected,

@@ -33,6 +43,13 @@ export default function AdvancedOptions({ options }: AdvancedOptionsProps) {

33 <Box className="options">

43 <Box className="options">

34 {options.map((option, ind) => (

44 {options.map((option, ind) => (

35 <Row className="option" key={`adv-opt-${ind}`}>

45 <Row className="option" key={`adv-opt-${ind}`}>

46+ <HiddenInput

47+ checked={option.selected}

48+ name={option.key}

49+ id={option.key}

50+ type="checkbox"

51+ readOnly

52+ />

36 <Checkbox

53 <Checkbox

37 className={`checkbox ${option.selected ? 'checked' : ''}`}

54 className={`checkbox ${option.selected ? 'checked' : ''}`}

38 {...option}

55 {...option}

src/form/SubmitButton.js+12

@@ -15,6 +15,8 @@ export default function SubmitButton({

15 ...rest

16}) {

17 const {

18+ values,

19+ errors,

18 valid,

20 valid,

19 validating,

21 validating,

20 submitting,

22 submitting,

@@ -25,6 +27,16 @@ export default function SubmitButton({

25 submitSucceeded,

27 submitSucceeded,

26 } = useFormState();

28 } = useFormState();

27

29

30+ console.log({

31+ values,

32+ valid,

33+ validating,

34+ submitting,

35+ hasValidationErrors,

36+ errors,

37+ submitErrors,

38+ });

39+

28 const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);

40 const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);

29

41

30 // can submit if:

42 // can submit if:

src/form/validators.js+1

@@ -168,6 +168,7 @@ export const composeValidator = (

168 // that means our `validating` state flickers the UI and it looks pretty bad.

169 // The solution is to conditionally return a promise only when necessary.

170 return values => {

171+ debugger;

171 // ask for field-level errors

172 // ask for field-level errors

172 const errorsOrPromise = fieldLevelValidator(values);

173 const errorsOrPromise = fieldLevelValidator(values);

173

174

src/views/Login/Ticket.tsx+5−1

@@ -61,7 +61,10 @@ export default function Ticket({ className, goHome }: TicketProps) {

61 }

62

63 if (values.useShards) {

64+ errors.ticket = undefined;

65+

64 if (errors.shard1 || errors.shard2 || errors.shard3) {

66 if (errors.shard1 || errors.shard2 || errors.shard3) {

67+ console.log(errors);

65 return errors;

68 return errors;

66 }

69 }

67 const empty = ['shard1', 'shard2', 'shard3'].filter(s => !values[s]);

70 const empty = ['shard1', 'shard2', 'shard3'].filter(s => !values[s]);

@@ -70,6 +73,7 @@ export default function Ticket({ className, goHome }: TicketProps) {

70 empty.forEach(s => {

73 empty.forEach(s => {

71 errors[s] = 'Please provide at least two out of three shards.';

74 errors[s] = 'Please provide at least two out of three shards.';

72 });

75 });

76+ console.log(errors);

73 return errors;

77 return errors;

74 }

78 }

75 } else {

79 } else {

@@ -153,7 +157,7 @@ export default function Ticket({ className, goHome }: TicketProps) {

153 const initialValues = useMemo(

157 const initialValues = useMemo(

154 () => ({

158 () => ({

155 point: impliedPoint || '',

159 point: impliedPoint || '',

156− usePasshrase: false,

160+ usePassphrase: false,

157 useShards: false,

161 useShards: false,

158 ticketHidden: true,

162 ticketHidden: true,

159 useAdvanced: false,

163 useAdvanced: false,

src/views/Points.tsx+4−1

@@ -133,6 +133,8 @@ export default function Points() {

133 [pointList, rejectedPoints]

134 );

135

136+ console.log(allPoints, pointList);

137+

136 // if we can only interact with a single point, jump to the point page.

138 // if we can only interact with a single point, jump to the point page.

137 // if there are any pending transfers, incoming or outgoing, stay on this

139 // if there are any pending transfers, incoming or outgoing, stay on this

138 // page, because those can only be completed/cancelled here.

140 // page, because those can only be completed/cancelled here.

@@ -175,7 +177,8 @@ export default function Points() {

175

177

176 // If the user has any stars or galaxies, give a polite heads up that

178 // If the user has any stars or galaxies, give a polite heads up that

177 // it can take some time for the roller be aware of L1 TXs

179 // it can take some time for the roller be aware of L1 TXs

178− const showMigrateNotice = !displayEmptyState &&

180+ const showMigrateNotice =

181+ !displayEmptyState &&

179 allPoints.some(p => isStar(p.value) || isGalaxy(p.value));

182 allPoints.some(p => isStar(p.value) || isGalaxy(p.value));

180

183

181 const starReleasing = starReleaseDetails

184 const starReleasing = starReleaseDetails