git.iko.soy/bridge
on dc70bbd help sign in
bridge/src/views/SigilGenerator.js
126 lines 3.5 kB history raw
1import React, { useRef, useCallback } from 'react';
2import { Grid, Flex } from 'indigo-react';
3import * as ob from 'urbit-ob';
4import { FORM_ERROR } from 'final-form';
5import { colors } from 'indigo-tokens';
7import { usePointCursor } from 'store/pointCursor';
9import View from 'components/View';
10import Sigil from 'components/Sigil';
12import * as need from 'lib/need';
13import { useLocalRouter } from 'lib/LocalRouter';
14import useSigilDownloader from 'lib/useSigilDownloader';
16import { composeValidator, buildNumberValidator } from 'form/validators';
17import BridgeForm from 'form/BridgeForm';
18import FormError from 'form/FormError';
19import SubmitButton from 'form/SubmitButton';
20import { NumberInput } from 'form/Inputs';
21import ColorInput from 'form/ColorInput';
23const BG_COLORS = [
24 colors.black,
25 colors.white,
26 colors.blue,
27 colors.blueLight,
28 colors.blueDark,
29 colors.redLight,
30 colors.red,
31 colors.redDark,
32 colors.greenLight,
33 colors.green,
34 colors.greenDark,
35 colors.yellowLight,
36 colors.yellow,
37 colors.yellowDark,
38];
40const FG_COLORS = [colors.black, colors.white];
42export default function SigilGenerator() {
43 const { pop } = useLocalRouter();
44 const { pointCursor } = usePointCursor();
46 const validate = composeValidator({ size: buildNumberValidator(16) });
47 const point = need.point(pointCursor);
49 const canvasRef = useRef(null);
51 const { downloadSigil } = useSigilDownloader(canvasRef);
52 const onSubmit = useCallback(
53 async (values, form) => {
54 const colors = [values.bgColor, values.fgColor];
55 const error = await downloadSigil(point, colors, values.size);
56 if (error) {
57 return { [FORM_ERROR]: error };
58 }
59 // reset on next tick
60 setTimeout(() => form.reset(values));
61 },
62 [point, downloadSigil]
63 );
64 return (
65 <View pop={pop}>
66 <BridgeForm
67 validate={validate}
68 initialValues={{
69 size: 256,
70 fgColor: '#FFFFFF',
71 bgColor: '#000000',
72 }}
73 onSubmit={onSubmit}>
74 {({ handleSubmit, values }) => (
75 <Grid gap={6}>
76 <Grid.Item full className="f7">
77 Sigil
78 </Grid.Item>
79 <Grid.Item fourth={1}>
80 <Sigil
81 size={50}
82 patp={ob.patp(point)}
83 colors={[values.bgColor, values.fgColor]}
84 />
85 </Grid.Item>
87 <Grid.Item full as={Flex} col>
88 <Flex.Item className="mb1">Urbit ID</Flex.Item>
89 <Flex.Item className="mono">{ob.patp(point)}</Flex.Item>
90 </Grid.Item>
91 <Grid.Item
92 fourth={1}
93 as={NumberInput}
94 name="size"
95 label="Size (px)"
96 />
97 <Grid.Item
98 full
99 as={ColorInput}
100 name="bgColor"
101 label="Background Color"
102 colors={BG_COLORS}
103 />
104 <Grid.Item
105 full
106 as={ColorInput}
107 name="fgColor"
108 label="Foreground Color"
109 colors={FG_COLORS}
110 />
111 <Grid.Item
112 full
113 as={SubmitButton}
114 handleSubmit={handleSubmit}
115 accessory="↓">
116 Download Sigil
117 </Grid.Item>
118 <Grid.Item full as={FormError} />
119 </Grid>
120 )}
121 </BridgeForm>
123 <canvas style={{ display: 'none' }} ref={canvasRef} />
124 </View>
125 );