@@ -21,6 +21,8 @@ import { useLocalRouter } from 'lib/LocalRouter';
2121import useImpliedTicket from 'lib/useImpliedTicket';
2222import timeout from 'lib/timeout';
2323import useHasDisclaimed from 'lib/useHasDisclaimed';
24+import useBreakpoints from 'lib/useBreakpoints';
25+import WarningBox from 'components/WarningBox';
2426
2527import BridgeForm from 'form/BridgeForm';
2628import SubmitButton from 'form/SubmitButton';
@@ -42,6 +44,12 @@ export default function ActivateCode() {
4244 derivedPoint,
4345 setDerivedPoint,
4446 } = useActivateFlow();
47+ // this is a pretty naive way to detect if we're on a mobile device
48+ // (i.e. we're checking the width of the screen)
49+ // but it will suffice for the 99% case and if someone wants to get around it
50+ // well by golly they're allowed to turn their phone into landscape mode
51+ // for this screen
52+ const activationAllowed = useBreakpoints([false, true, true]);
4553
4654 const goToLogin = useCallback(() => history.popAndPush(ROUTE_NAMES.LOGIN), [
4755 history,
@@ -129,6 +137,7 @@ export default function ActivateCode() {
129137 as={TicketInput}
130138 name="ticket"
131139 label="Activation Code"
140+ disabled={!activationAllowed}
132141 />
133142
134143 <Grid.Item full as={FormError} />
@@ -144,6 +153,12 @@ export default function ActivateCode() {
144153 ? 'Generating...'
145154 : 'Go'}
146155 </Grid.Item>
156+
157+ {!activationAllowed && (
158+ <Grid.Item full as={WarningBox} className="mt4">
159+ For your security, please access Bridge on a desktop device.
160+ </Grid.Item>
161+ )}
147162 </>
148163 )}
149164 </BridgeForm>