@@ -1,4 +1,4 @@
1−import React, { useCallback, useMemo } from 'react';
1+import React, { useCallback, useMemo, useState } from 'react';
22import * as need from 'lib/need';
33
44import ActivateView from './ActivateView';
@@ -29,14 +29,16 @@ const MasterKeyConfirm = () => {
2929 const { push, names } = useLocalRouter();
3030 const STUB_VERIFY_TICKET = isDevelopment;
3131 const ticketSegments = useMemo(() => ticketToSegments(ticket), [ticket]);
32+ const [showError, setShowError] = useState<boolean>(false);
3233
3334 const onValues = useCallback(({ valid, values, form }) => {
3435 const { ticket0, ticket1, ticket2, ticket3 } = values;
36+ const tickets = [ticket0, ticket1, ticket2, ticket3];
37+ const allTicketsPopulated = tickets.every(t => t?.length === 6);
3538
36− form.change(
37− 'ticket',
38− ticketFromSegments([ticket0, ticket1, ticket2, ticket3])
39− );
39+ setShowError(!valid && allTicketsPopulated);
40+
41+ form.change('ticket', ticketFromSegments(tickets));
4042 }, []);
4143
4244 const validate = useMemo(
@@ -139,11 +141,17 @@ const MasterKeyConfirm = () => {
139141 height={'100%'}
140142 alignItems={'center'}
141143 justifyContent={'center'}>
144+ {showError && (
145+ <Box height={'24px'}>
146+ {/* this is a flexbox placeholder to balance the error message below*/}
147+ </Box>
148+ )}
142149 <Box
143150 display={'flex'}
144151 flexDirection={'row'}
145152 width={'80%'}
146153 height={'min-content'}
154+ marginY={'16px'}
147155 flexWrap={'nowrap'}
148156 justifyContent={'center'}>
149157 {ticketSegments.map((segment, i) => {
@@ -161,6 +169,11 @@ const MasterKeyConfirm = () => {
161169 fontFamily={'Source Code Pro'}
162170 borderRadius={'5px'}
163171 border={'solid 1px rgba(0,0,0,0.25)'}
172+ borderColor={
173+ showError ? '#FF4136' : 'rgba(0,0,0,0.25)'
174+ }
175+ color={showError ? '#FF4136' : 'rgba(0,0,0,0.95)'}
176+ backgroundColor={showError ? '#FF41360D' : '#FFF'}
164177 name={`ticket${i}`}
165178 autoFocus={i === 0}
166179 />
@@ -177,6 +190,18 @@ const MasterKeyConfirm = () => {
177190 );
178191 })}
179192 </Box>
193+ {showError && (
194+ <Box>
195+ <Text
196+ color={'#FF4136'}
197+ fontFamily={'Inter'}
198+ fontSize={'14px'}
199+ fontWeight={'600'}
200+ lineHeight={'24px'}>
201+ The Master Ticket you entered is incorrect
202+ </Text>
203+ </Box>
204+ )}
180205 </Box>
181206
182207 <Box