on master help sign in
bridge: use @tlon/indigo-react Checkbox

fixes urbit/bridge#871

commitadd836dac7c34c476c29d45eb0920c65c290655a authorJames Acklin <james@tlon.io> dateSat 22 Jan 2022, 20:11 (5 years ago) parent08328b6
4 files changed+70−46
src/Bridge.js+6−1 src/components/L2/Headers/AdvancedOptions.tsx+4−2 src/indigo-react/components/CheckboxInput.js+4−17 src/views/Disclaimer.js+56−26
src/Bridge.js+6−1
@@ -16,6 +16,9 @@ import useImpliedTicket from 'lib/useImpliedTicket';
1616import useHasDisclaimed from 'lib/useHasDisclaimed';
1717
1818import 'style/index.scss';
19+import { ThemeProvider } from 'styled-components';
20+import light from '@tlon/indigo-light';
21+
1922import WithErrorBoundary from 'components/WithErrorBoundary';
2023import GlobalErrorBoundary from 'components/GlobalErrorBoundary';
2124import Modal from 'components/L2/Modal';
@@ -94,7 +97,9 @@ function Bridge() {
9497 initialMnemonic={INITIAL_MNEMONIC}
9598 initialPointCursor={INITIAL_POINT_CURSOR}>
9699 <IndigoApp>
97− <Router />
100+ <ThemeProvider theme={light}>
101+ <Router />
102+ </ThemeProvider>
98103 </IndigoApp>
99104 <Modal show={modalText !== undefined} hide={() => setModalText()}>
100105 <Box width="280px">{modalText}</Box>
src/components/L2/Headers/AdvancedOptions.tsx+4−2
@@ -1,5 +1,5 @@
11import React, { useState } from 'react';
2−import { Box, Checkbox, Icon, Row } from '@tlon/indigo-react';
2+import { Text, Box, Checkbox, Icon, Row } from '@tlon/indigo-react';
33import './AdvancedOptions.scss';
44
55interface AdvancedOptionsProps {
@@ -39,7 +39,9 @@ export default function AdvancedOptions({ options }: AdvancedOptionsProps) {
3939 height="16px"
4040 width="16px"
4141 />
42− <Box className="text">{option.label}</Box>
42+ <Box className="text">
43+ <Text style={{ fontSize: '14px' }}>{option.label}</Text>
44+ </Box>
4345 </Row>
4446 ))}
4547 </Box>
src/indigo-react/components/CheckboxInput.js+4−17
@@ -3,6 +3,7 @@ import cn from 'classnames';
33
44import Flex from './Flex';
55import { useField } from 'react-final-form';
6+import { Checkbox } from '@tlon/indigo-react';
67
78export default function CheckboxInput({
89 // visuals
@@ -47,24 +48,10 @@ export default function CheckboxInput({
4748 { mr3: !inline },
4849 'lh-tall us-none pointer flex-row align-center'
4950 )}
50− style={{fontSize: '14px'}}
51+ style={{ fontSize: '14px' }}
5152 htmlFor={name}>
52− <Flex
53− justify="center"
54− align="center"
55− className={cn('b1 p1', {
56− mr3: !inline,
57− mr1: inline,
58− 'bg-gray1': disabled,
59− 'bg-black white b-black': !disabled && (input.checked || white),
60− 'bg-white black b-black': !disabled && !input.checked,
61− })}
62− style={{
63− height: '14px',
64− width: '14px',
65− ...style,
66− }}>
67− {input.checked && '✓'}
53+ <Flex style={{ marginRight: '8px' }}>
54+ <Checkbox selected={input.checked} />
6855 </Flex>
6956 {label}
7057 </Flex.Item>
src/views/Disclaimer.js+56−26
@@ -6,16 +6,15 @@ import useHasDisclaimed from 'lib/useHasDisclaimed';
66import { useLocalRouter } from 'lib/LocalRouter';
77
88import View from 'components/View';
9−import WarningBox from 'components/WarningBox';
109import BridgeForm from 'form/BridgeForm';
1110import SubmitButton from 'form/SubmitButton';
1211import { composeValidator, buildCheckboxValidator } from 'form/validators';
1312
1413const textProps = {
15− fontFamily: "Inter",
14+ fontFamily: 'Inter',
1615 fontSize: '14px',
17− lineHeight: '20px'
18−}
16+ lineHeight: '20px',
17+};
1918
2019export default function ActivateDisclaimer() {
2120 const { pop, popAndPush, data } = useLocalRouter();
@@ -41,45 +40,76 @@ export default function ActivateDisclaimer() {
4140 <View>
4241 <Grid gap={2} className="mt8 mb10">
4342 <Grid.Item full>
44− <Text as='h3' style={{...textProps, fontSize: '16px', fontWeight: 'bold'}}>Disclaimer</Text>
43+ <Text
44+ as="h3"
45+ style={{ ...textProps, fontSize: '16px', fontWeight: 'bold' }}>
46+ Disclaimer
47+ </Text>
4548 </Grid.Item>
4649 <Grid.Item full>
47− <Text as='p' style={textProps}>
48− Welcome to Bridge. Please read this information. Your Urbit ID is considered a digital asset. You must secure it. If you do not pay attention to these warnings, your digital assets could be stolen or compromised.
50+ <Text as="p" style={textProps}>
51+ Welcome to Bridge. Please read this information. Your Urbit ID is
52+ considered a digital asset. You must secure it. If you do not pay
53+ attention to these warnings, your digital assets could be stolen or
54+ compromised.
4955 </Text>
5056
51− <Text as='p' style={textProps}>
52− <strong>You own and control your assets. We do not.</strong> If you send your assets to another address, we cannot get them back for you.
57+ <Text as="p" style={textProps}>
58+ <strong>You own and control your assets. We do not.</strong> If you
59+ send your assets to another address, we cannot get them back for
60+ you.
5361 </Text>
5462
55− <Text as='p' style={textProps}>Please understand that nobody can:</Text>
63+ <Text as="p" style={textProps}>
64+ Please understand that nobody can:
65+ </Text>
5666
57− <Text as={'ol'} style={{paddingLeft: '1em'}}>
58− <Text as='li' style={textProps}>Access your assets for you;</Text>
59− <Text as='li' style={textProps}>Recover, reset, or modify ANY of your information;</Text>
60− <Text as='li' style={textProps}>Reverse, cancel, or refund transactions;</Text>
61− <Text as='li' style={textProps}>Hold, back-up, or access your keys</Text>
67+ <Text as={'ol'} style={{ paddingLeft: '1em' }}>
68+ <Text as="li" style={textProps}>
69+ Access your assets for you;
70+ </Text>
71+ <Text as="li" style={textProps}>
72+ Recover, reset, or modify ANY of your information;
73+ </Text>
74+ <Text as="li" style={textProps}>
75+ Reverse, cancel, or refund transactions;
76+ </Text>
77+ <Text as="li" style={textProps}>
78+ Hold, back-up, or access your keys
79+ </Text>
6280 </Text>
6381
64− <Text as='p' style={{...textProps, fontWeight: 'bold'}}>
65− You are responsible for keeping your information safe. This includes:
82+ <Text as="p" style={{ ...textProps, fontWeight: 'bold' }}>
83+ You are responsible for keeping your information safe. This
84+ includes:
6685 </Text>
6786
68− <Text as={'ol'} style={{paddingLeft: '1em'}}>
69− <Text as='li' style={textProps}>Private Keys/Mnemonic Phrases and passwords;</Text>
70− <Text as='li' style={textProps}>JSON files; </Text>
71− <Text as='li' style={textProps}>Hardware wallet PINs; </Text>
72− <Text as='li' style={textProps}>Downloading this software from a reliable site, and ensuring it has not been tampered with</Text>
87+ <Text as={'ol'} style={{ paddingLeft: '1em' }}>
88+ <Text as="li" style={textProps}>
89+ Private Keys/Mnemonic Phrases and passwords;
90+ </Text>
91+ <Text as="li" style={textProps}>
92+ JSON files;{' '}
93+ </Text>
94+ <Text as="li" style={textProps}>
95+ Hardware wallet PINs;{' '}
96+ </Text>
97+ <Text as="li" style={textProps}>
98+ Downloading this software from a reliable site, and ensuring it
99+ has not been tampered with
100+ </Text>
73101 </Text>
74102
75− <Text as='p' style={{...textProps, fontWeight: 'bold'}}>To be clear:</Text>
103+ <Text as="p" style={{ ...textProps, fontWeight: 'bold' }}>
104+ To be clear:
105+ </Text>
76106
77− <Text as='p' style={textProps}>
107+ <Text as="p" style={textProps}>
78108 This software is provided “as is” without warranties of any kind and
79109 our liability to you in connection with the same is limited;
80110 </Text>
81−
82− <Text as='p' style={textProps}>
111+
112+ <Text as="p" style={textProps}>
83113 We have no liability for any security problems or incidents that you
84114 may experience, including any loss or theft of your keys or any
85115 problems that may arise in connection with your wallet.