git.iko.soy/bridge
on master help sign in
bridge: use @tlon/indigo-react Checkbox
add836dJames Acklin
src/Bridge.js+6−1
compare with master
unifiedsplit
@@ -16,6 +16,9 @@ import useImpliedTicket from 'lib/useImpliedTicket';
16import useHasDisclaimed from 'lib/useHasDisclaimed';
16import useHasDisclaimed from 'lib/useHasDisclaimed';
17
17
18import 'style/index.scss';
18import 'style/index.scss';
19+import { ThemeProvider } from 'styled-components';
20+import light from '@tlon/indigo-light';
21+
19import WithErrorBoundary from 'components/WithErrorBoundary';
22import WithErrorBoundary from 'components/WithErrorBoundary';
20import GlobalErrorBoundary from 'components/GlobalErrorBoundary';
23import GlobalErrorBoundary from 'components/GlobalErrorBoundary';
21import Modal from 'components/L2/Modal';
24import Modal from 'components/L2/Modal';
@@ -94,7 +97,9 @@ function Bridge() {
94 initialMnemonic={INITIAL_MNEMONIC}
97 initialMnemonic={INITIAL_MNEMONIC}
95 initialPointCursor={INITIAL_POINT_CURSOR}>
98 initialPointCursor={INITIAL_POINT_CURSOR}>
96 <IndigoApp>
99 <IndigoApp>
100+ <ThemeProvider theme={light}>
97− <Router />
101+ <Router />
102+ </ThemeProvider>
98 </IndigoApp>
103 </IndigoApp>
99 <Modal show={modalText !== undefined} hide={() => setModalText()}>
104 <Modal show={modalText !== undefined} hide={() => setModalText()}>
100 <Box width="280px">{modalText}</Box>
105 <Box width="280px">{modalText}</Box>
src/components/L2/Headers/AdvancedOptions.tsx+4−2
@@ -1,5 +1,5 @@
1import React, { useState } from 'react';
1import 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';
3import './AdvancedOptions.scss';
3import './AdvancedOptions.scss';
4
4
5interface AdvancedOptionsProps {
5interface AdvancedOptionsProps {
@@ -39,7 +39,9 @@ export default function AdvancedOptions({ options }: AdvancedOptionsProps) {
39 height="16px"
39 height="16px"
40 width="16px"
40 width="16px"
41 />
41 />
42− <Box className="text">{option.label}</Box>
42+ <Box className="text">
43+ <Text style={{ fontSize: '14px' }}>{option.label}</Text>
44+ </Box>
43 </Row>
45 </Row>
44 ))}
46 ))}
45 </Box>
47 </Box>
src/indigo-react/components/CheckboxInput.js+4−17
@@ -3,6 +3,7 @@ import cn from 'classnames';
3
3
4import Flex from './Flex';
4import Flex from './Flex';
5import { useField } from 'react-final-form';
5import { useField } from 'react-final-form';
6+import { Checkbox } from '@tlon/indigo-react';
6
7
7export default function CheckboxInput({
8export default function CheckboxInput({
8 // visuals
9 // visuals
@@ -47,24 +48,10 @@ export default function CheckboxInput({
47 { mr3: !inline },
48 { mr3: !inline },
48 'lh-tall us-none pointer flex-row align-center'
49 'lh-tall us-none pointer flex-row align-center'
49 )}
50 )}
50− style={{fontSize: '14px'}}
51+ style={{ fontSize: '14px' }}
51 htmlFor={name}>
52 htmlFor={name}>
52− <Flex
53+ <Flex style={{ marginRight: '8px' }}>
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 && '✓'}
54+ <Checkbox selected={input.checked} />
68 </Flex>
55 </Flex>
69 {label}
56 {label}
70 </Flex.Item>
57 </Flex.Item>
src/views/Disclaimer.js+56−26
@@ -6,16 +6,15 @@ import useHasDisclaimed from 'lib/useHasDisclaimed';
6import { useLocalRouter } from 'lib/LocalRouter';
6import { useLocalRouter } from 'lib/LocalRouter';
7
7
8import View from 'components/View';
8import View from 'components/View';
9−import WarningBox from 'components/WarningBox';
10import BridgeForm from 'form/BridgeForm';
9import BridgeForm from 'form/BridgeForm';
11import SubmitButton from 'form/SubmitButton';
10import SubmitButton from 'form/SubmitButton';
12import { composeValidator, buildCheckboxValidator } from 'form/validators';
11import { composeValidator, buildCheckboxValidator } from 'form/validators';
13
12
14const textProps = {
13const textProps = {
15− fontFamily: "Inter",
14+ fontFamily: 'Inter',
16 fontSize: '14px',
15 fontSize: '14px',
17− lineHeight: '20px'
16+ lineHeight: '20px',
18−}
17+};
19
18
20export default function ActivateDisclaimer() {
19export default function ActivateDisclaimer() {
21 const { pop, popAndPush, data } = useLocalRouter();
20 const { pop, popAndPush, data } = useLocalRouter();
@@ -41,45 +40,76 @@ export default function ActivateDisclaimer() {
41 <View>
40 <View>
42 <Grid gap={2} className="mt8 mb10">
41 <Grid gap={2} className="mt8 mb10">
43 <Grid.Item full>
42 <Grid.Item full>
43+ <Text
44+ as="h3"
44− <Text as='h3' style={{...textProps, fontSize: '16px', fontWeight: 'bold'}}>Disclaimer</Text>
45+ style={{ ...textProps, fontSize: '16px', fontWeight: 'bold' }}>
46+ Disclaimer
47+ </Text>
45 </Grid.Item>
48 </Grid.Item>
46 <Grid.Item full>
49 <Grid.Item full>
47− <Text as='p' style={textProps}>
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
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.
53+ attention to these warnings, your digital assets could be stolen or
54+ compromised.
49 </Text>
55 </Text>
50
56
51− <Text as='p' style={textProps}>
57+ <Text as="p" style={textProps}>
58+ <strong>You own and control your assets. We do not.</strong> If you
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.
59+ send your assets to another address, we cannot get them back for
60+ you.
53 </Text>
61 </Text>
54
62
63+ <Text as="p" style={textProps}>
55− <Text as='p' style={textProps}>Please understand that nobody can:</Text>
64+ Please understand that nobody can:
65+ </Text>
56
66
57− <Text as={'ol'} style={{paddingLeft: '1em'}}>
67+ <Text as={'ol'} style={{ paddingLeft: '1em' }}>
58− <Text as='li' style={textProps}>Access your assets for you;</Text>
68+ <Text as="li" style={textProps}>
69+ Access your assets for you;
70+ </Text>
71+ <Text as="li" style={textProps}>
59− <Text as='li' style={textProps}>Recover, reset, or modify ANY of your information;</Text>
72+ Recover, reset, or modify ANY of your information;
73+ </Text>
74+ <Text as="li" style={textProps}>
60− <Text as='li' style={textProps}>Reverse, cancel, or refund transactions;</Text>
75+ Reverse, cancel, or refund transactions;
76+ </Text>
77+ <Text as="li" style={textProps}>
61− <Text as='li' style={textProps}>Hold, back-up, or access your keys</Text>
78+ Hold, back-up, or access your keys
79+ </Text>
62 </Text>
80 </Text>
63
81
64− <Text as='p' style={{...textProps, fontWeight: 'bold'}}>
82+ <Text as="p" style={{ ...textProps, fontWeight: 'bold' }}>
65− You are responsible for keeping your information safe. This includes:
83+ You are responsible for keeping your information safe. This
84+ includes:
66 </Text>
85 </Text>
67
86
68− <Text as={'ol'} style={{paddingLeft: '1em'}}>
87+ <Text as={'ol'} style={{ paddingLeft: '1em' }}>
88+ <Text as="li" style={textProps}>
69− <Text as='li' style={textProps}>Private Keys/Mnemonic Phrases and passwords;</Text>
89+ Private Keys/Mnemonic Phrases and passwords;
90+ </Text>
70− <Text as='li' style={textProps}>JSON files; </Text>
91+ <Text as="li" style={textProps}>
92+ JSON files;{' '}
93+ </Text>
71− <Text as='li' style={textProps}>Hardware wallet PINs; </Text>
94+ <Text as="li" style={textProps}>
95+ Hardware wallet PINs;{' '}
96+ </Text>
97+ <Text as="li" style={textProps}>
72− <Text as='li' style={textProps}>Downloading this software from a reliable site, and ensuring it has not been tampered with</Text>
98+ Downloading this software from a reliable site, and ensuring it
99+ has not been tampered with
100+ </Text>
73 </Text>
101 </Text>
74
102
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>
76
106
77− <Text as='p' style={textProps}>
107+ <Text as="p" style={textProps}>
78 This software is provided “as is” without warranties of any kind and
108 This software is provided “as is” without warranties of any kind and
79 our liability to you in connection with the same is limited;
109 our liability to you in connection with the same is limited;
80 </Text>
110 </Text>
81−
111+
82− <Text as='p' style={textProps}>
112+ <Text as="p" style={textProps}>
83 We have no liability for any security problems or incidents that you
113 We have no liability for any security problems or incidents that you
84 may experience, including any loss or theft of your keys or any
114 may experience, including any loss or theft of your keys or any
85 problems that may arise in connection with your wallet.
115 problems that may arise in connection with your wallet.