@@ -4,7 +4,7 @@ import { WARNING } from 'form/helpers';
44import { FORM_ERROR } from 'final-form';
55import { Just } from 'folktale/maybe';
66import BridgeForm from 'form/BridgeForm';
7−import { TicketInput } from 'form/Inputs';
7+import { PLACEHOLDER_PLANET, PLACEHOLDER_TICKET, TicketInput } from 'form/Inputs';
88import {
99 composeValidator,
1010 buildPatqValidator,
@@ -12,7 +12,7 @@ import {
1212 buildCheckboxValidator,
1313} from 'form/validators';
1414import FormError from 'form/FormError';
15−import { CheckboxInput, Grid } from 'indigo-react';
15+import { Grid } from 'indigo-react';
1616import { useCallback, useMemo, useRef } from 'react';
1717import { useActivateFlow } from './ActivateFlow';
1818import WarningBox from 'components/WarningBox';
@@ -21,13 +21,15 @@ import useImpliedTicket from 'lib/useImpliedTicket';
2121import { generateWallet } from 'lib/walletgen';
2222import { urbitWalletFromTicket, walletFromMnemonic } from 'lib/wallet';
2323import { DEFAULT_HD_PATH, POINT_PROXIES } from 'lib/constants';
24−import useBreakpoints from 'lib/useBreakpoints';
24+import useBreakpoints from 'lib/useBreakpoints.tsx';
2525import { Ship } from '@urbit/roller-api';
2626import { convertToInt } from 'lib/convertToInt';
2727import { Box } from '@tlon/indigo-react';
2828import { timeout } from 'lib/timeout';
2929import withFadeable from './withFadeable';
3030import ActivateButton from './ActivateButton';
31+import TicketInputAccessory from 'components/form/TicketInputAccessory';
32+import { validateActivationTicket } from 'lib/validators';
3133
3234interface ActivateCodeFormProps {
3335 afterSubmit: VoidFunction;
@@ -46,7 +48,7 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {
4648 setInviteWallet,
4749 setIsIn,
4850 setSendWallet,
49− } = useActivateFlow();
51+ }: any = useActivateFlow();
5052
5153 // this is a pretty naive way to detect if we're on a mobile device
5254 // (i.e. we're checking the width of the screen)
@@ -69,12 +71,20 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {
6971 const validate = useMemo(
7072 () =>
7173 composeValidator(
72− { ticket: buildPatqValidator(), showTicket: buildCheckboxValidator() },
74+ {
75+ ticket: buildPatqValidator([validateActivationTicket]),
76+ showTicket: buildCheckboxValidator(),
77+ },
7378 validateForm
7479 ),
7580 [validateForm]
7681 );
7782
83+ const hasInitialValues = useMemo(
84+ () => Boolean(impliedTicket && impliedPatp),
85+ [impliedTicket, impliedPatp]
86+ );
87+
7888 const getTicketAndPoint = useCallback(
7989 (invite: string) => {
8090 const segments = invite.split('-');
@@ -164,20 +174,24 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {
164174 setDerivedWallet,
165175 setInviteWallet,
166176 setIsIn,
177+ setSendWallet,
167178 ]
168179 );
169180
170181 const initialValues = useMemo(
171− () => ({ ticket: impliedTicket || '', showTicket: true }),
172− [impliedTicket]
182+ () => ({
183+ ticket: hasInitialValues
184+ ? `${impliedTicket}-${impliedPatp?.slice(1)}`
185+ : '',
186+ showTicket: true,
187+ }),
188+ [impliedTicket, impliedPatp, hasInitialValues]
173189 );
174190
175191 return (
176192 <Box
177− display="flex"
178− flexDirection="column"
193+ className="w-full h-full flex-col"
179194 flexWrap="nowrap"
180− height={'100%'}
181195 justifyContent="flex-end">
182196 <BridgeForm
183197 validate={validate}
@@ -186,41 +200,28 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {
186200 initialValues={initialValues}>
187201 {({ valid, validating, values, submitting, handleSubmit }) => (
188202 <>
189− {!impliedTicket && (
190− <>
191− <Grid.Item
192− full
193− as={TicketInput}
194− type={values.showTicket ? 'text' : 'password'}
195− name="ticket"
196− label="Activation Code"
197− disabled={!activationAllowed}
198− />
199−
200− <Grid.Item
201− full
202− as={CheckboxInput}
203− name="showTicket"
204− label="Show"
205− />
206− </>
203+ {!hasInitialValues && (
204+ <Grid.Item
205+ full
206+ className="mb2"
207+ as={TicketInput}
208+ accessory={<TicketInputAccessory name="showTicket" />}
209+ type={values.showTicket ? 'text' : 'password'}
210+ name="ticket"
211+ disabled={!activationAllowed}
212+ placeholder={`${PLACEHOLDER_TICKET}-${PLACEHOLDER_PLANET.slice(
213+ 1
214+ )}`}
215+ />
207216 )}
208217
209− <Grid.Item full as={FormError} />
210−
211− <Box
212− display="flex"
213− flexDirection="column"
214− flexWrap="nowrap"
215− height={'100%'}
216− width={'100%'}
217− justifyContent="flex-end">
218− <ActivateButton
219− disabled={!valid || submitting}
220− onClick={handleSubmit}>
221− {submitting ? 'Generating...' : 'Claim'}
222− </ActivateButton>
223− </Box>
218+ <Grid.Item full as={FormError} className="mb2" />
219+
220+ <ActivateButton
221+ disabled={(!valid && !hasInitialValues) || submitting}
222+ onClick={handleSubmit}>
223+ {submitting ? 'Activating...' : 'Activate'}
224+ </ActivateButton>
224225
225226 {!activationAllowed && (
226227 <Grid.Item full as={WarningBox} className="mt4">