git.iko.soy/bridge
on master help sign in
create Sigil Generator form
1767d41Liam Fitzgerald
src/views/Point.js+3−2
compare with master
unifiedsplit
@@ -13,7 +13,6 @@ import Passport from 'components/Passport';
13import { ForwardButton, BootUrbitOSButton } from 'components/Buttons';
13import { ForwardButton, BootUrbitOSButton } from 'components/Buttons';
14import CopyButton from 'components/CopyButton';
14import CopyButton from 'components/CopyButton';
15import Blinky, { matchBlinky } from 'components/Blinky';
15import Blinky, { matchBlinky } from 'components/Blinky';
16−import DownloadSigilButton from 'components/DownloadSigilButton';
17import BarGraph from 'components/BarGraph';
16import BarGraph from 'components/BarGraph';
18import Chip from 'components/Chip';
17import Chip from 'components/Chip';
19import InviteSigilList from 'components/InviteSigilList';
18import InviteSigilList from 'components/InviteSigilList';
@@ -216,7 +215,9 @@ export default function Point() {
216 </Grid>
215 </Grid>
217 <Grid className="pt2">
216 <Grid className="pt2">
218 {inviteButton}
217 {inviteButton}
219− <Grid.Item full as={ForwardButton} onClick={goSigil} />
218+ <Grid.Item full as={ForwardButton} onClick={goSigil}>
219+ Sigil
220+ </Grid.Item>
220 <Grid.Divider />
221 <Grid.Divider />
221 <Grid.Item
222 <Grid.Item
222 full
223 full
src/views/SigilGenerator.js+96−2
@@ -1,6 +1,100 @@
1import React from 'react';
1import React from 'react';
2+import { Grid, Flex } from 'indigo-react';
3+import * as ob from 'urbit-ob';
4+
5+import { usePointCursor } from 'store/pointCursor';
6+
2−import { View } from 'components/View';
7+import View from 'components/View';
8+import Sigil from 'components/Sigil';
9+
10+import * as need from 'lib/need';
11+import { useLocalRouter } from 'lib/LocalRouter';
12+
13+import { composeValidator, buildNumberValidator } from 'form/validators';
14+import BridgeForm from 'form/BridgeForm';
15+import FormError from 'form/FormError';
16+import SubmitButton from 'form/SubmitButton';
17+import { NumberInput, ColorInput } from 'form/Inputs';
18+
19+const BG_COLORS = [
20+ '#000000',
21+ '#C80F34',
22+ '#EE5432',
23+ '#F8C134',
24+ '#286E55',
25+ '#2AA779',
26+ '#2ED196',
27+ '#190D8D',
28+ '#4330FC',
29+ '#6184FF',
30+ '#83C3FF',
31+ '#903AE6',
32+ '#EC6FF7',
33+ '#FFB0D6',
34+];
35+
36+const FG_COLORS = ['#000000', '#FFFFFF'];
3
37
4export default function SigilGenerator() {
38export default function SigilGenerator() {
39+ const { pop, push, names } = useLocalRouter();
40+ const { pointCursor } = usePointCursor();
41+
42+ const validate = composeValidator({ size: buildNumberValidator(16) });
43+ const point = need.point(pointCursor);
44+ const onSubmit = () => {};
5− return <View></View>;
45+ return (
46+ <View pop={pop}>
47+ <BridgeForm
48+ validate={validate}
49+ initialValues={{
50+ size: 256,
51+ fgColor: '#FFFFFF',
52+ bgColor: '#000000',
53+ }}
54+ onSubmit={onSubmit}>
55+ {({ handleSubmit, values }) => (
56+ <Grid gap={6}>
57+ <Grid.Item full className="f7">
58+ Sigil
59+ </Grid.Item>
60+ <Grid.Item fourth={1}>
61+ <Sigil
62+ size={50}
63+ patp={ob.patp(point)}
64+ colors={[values.bgColor, values.fgColor]}
65+ />
66+ </Grid.Item>
67+
68+ <Grid.Item full as={Flex} col>
69+ <Flex.Item className="mb1">Urbit ID</Flex.Item>
70+ <Flex.Item className="mono">{ob.patp(point)}</Flex.Item>
71+ </Grid.Item>
72+ <Grid.Item full as={NumberInput} name="size" label="Size (px)" />
73+ <Grid.Item
74+ full
75+ as={ColorInput}
76+ name="bgColor"
77+ label="Background Color"
78+ colors={BG_COLORS}
79+ />
80+ <Grid.Item
81+ full
82+ as={ColorInput}
83+ name="fgColor"
84+ label="Foreground Color"
85+ colors={FG_COLORS}
86+ />
87+ <Grid.Item
88+ full
89+ as={SubmitButton}
90+ handleSubmit={handleSubmit}
91+ accessory="↓">
92+ Download Sigil
93+ </Grid.Item>
94+ <Grid.Item full as={FormError} />
95+ </Grid>
96+ )}
97+ </BridgeForm>
98+ </View>
99+ );
6}
100}