git.iko.soy/bridge
on master help sign in
Fixup accept invite flow and animation modes
486832fLiam Fitzgerald
src/components/Passport.js+9−4
compare with master
unifiedsplit
@@ -2,6 +2,7 @@ import React from 'react';
2import { Just, Nothing } from 'folktale/maybe';
2import { Just, Nothing } from 'folktale/maybe';
3import ob from 'urbit-ob';
3import ob from 'urbit-ob';
4import BN from 'bn.js';
4import BN from 'bn.js';
5+import 'style/anim.css';
5
6
6import * as need from 'lib/need';
7import * as need from 'lib/need';
7import { chunkStr, Matrix, walk, rand } from 'lib/card';
8import { chunkStr, Matrix, walk, rand } from 'lib/card';
@@ -74,7 +75,13 @@ const symbols = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
74 * animationMode is 'slide' | 'step' | 'none'
75 * animationMode is 'slide' | 'step' | 'none'
75 *
76 *
76 */
77 */
77−function Passport({ address, point, inverted, animationMode, keyType }) {
78+function Passport({
79+ address,
80+ point,
81+ inverted,
82+ animationMode = 'none',
83+ keyType,
84+}) {
78 const [cols, rows, tile] = [35, 12, 12];
85 const [cols, rows, tile] = [35, 12, 12];
79
86
80 const loading = Nothing.hasInstance(address) || Nothing.hasInstance(point);
87 const loading = Nothing.hasInstance(address) || Nothing.hasInstance(point);
@@ -84,8 +91,6 @@ function Passport({ address, point, inverted, animationMode, keyType }) {
84
91
85 const patp = ob.patp(point.value);
92 const patp = ob.patp(point.value);
86
93
87− console.log(point.value);
88−
89 const makeMatrix = addr => {
94 const makeMatrix = addr => {
90 // remove the 0x
95 // remove the 0x
91 const onlyTheNumberPart = addr.substring(2);
96 const onlyTheNumberPart = addr.substring(2);
@@ -155,7 +160,7 @@ function Passport({ address, point, inverted, animationMode, keyType }) {
155 fontSize: '16px',
160 fontSize: '16px',
156 fontFamily: 'Source Code Pro',
161 fontFamily: 'Source Code Pro',
157 }}>
162 }}>
158− {patp}
163+ {Just.hasInstance(point) && patp}
159 </div>
164 </div>
160 {keyType !== '' ? (
165 {keyType !== '' ? (
161 <div
166 <div
src/style/anim.cssnew file+460
@@ -0,0 +1,460 @@
1+/* @for $i from 0 through 13 {
2+ .anim-s#{$i} {
3+ animation: s#{$i} #{$i*50}ms steps(#{$i}, end) forwards;
4+}
5+} */
6+.step-h-0 {
7+ animation: frame-h-0 0ms steps(0, end) forwards;
8+}
9+
10+.step-h-1 {
11+ animation: frame-h-1 50ms steps(1, end) forwards;
12+}
13+
14+.step-h-2 {
15+ animation: frame-h-2 100ms steps(2, end) forwards;
16+}
17+
18+.step-h-3 {
19+ animation: frame-h-3 150ms steps(3, end) forwards;
20+}
21+
22+.step-h-4 {
23+ animation: frame-h-4 200ms steps(4, end) forwards;
24+}
25+
26+.step-h-5 {
27+ animation: frame-h-5 250ms steps(5, end) forwards;
28+}
29+
30+.step-h-6 {
31+ animation: frame-h-6 300ms steps(6, end) forwards;
32+}
33+
34+.step-h-7 {
35+ animation: frame-h-7 350ms steps(7, end) forwards;
36+}
37+
38+.step-h-8 {
39+ animation: frame-h-8 400ms steps(8, end) forwards;
40+}
41+
42+.step-h-9 {
43+ animation: frame-h-9 450ms steps(9, end) forwards;
44+}
45+
46+.step-h-10 {
47+ animation: frame-h-10 500ms steps(10, end) forwards;
48+}
49+
50+.step-h-11 {
51+ animation: frame-h-11 550ms steps(11, end) forwards;
52+}
53+
54+.step-h-12 {
55+ animation: frame-h-12 600ms steps(12, end) forwards;
56+}
57+
58+.step-h-13 {
59+ animation: frame-h-13 650ms steps(13, end) forwards;
60+}
61+
62+.step-h-14 {
63+ animation: frame-h-14 700ms steps(14, end) forwards;
64+}
65+
66+.step-v-0 {
67+ animation: frame-v-0 0ms steps(0, end) forwards;
68+}
69+
70+.step-v-1 {
71+ animation: frame-v-1 50ms steps(1, end) forwards;
72+}
73+
74+.step-v-2 {
75+ animation: frame-v-2 100ms steps(2, end) forwards;
76+}
77+
78+.step-v-3 {
79+ animation: frame-v-3 150ms steps(3, end) forwards;
80+}
81+
82+.step-v-4 {
83+ animation: frame-v-4 200ms steps(4, end) forwards;
84+}
85+
86+.step-v-5 {
87+ animation: frame-v-5 250ms steps(5, end) forwards;
88+}
89+
90+.step-v-6 {
91+ animation: frame-v-6 300ms steps(6, end) forwards;
92+}
93+
94+.step-v-7 {
95+ animation: frame-v-7 350ms steps(7, end) forwards;
96+}
97+
98+.step-v-8 {
99+ animation: frame-v-8 400ms steps(8, end) forwards;
100+}
101+
102+.step-v-9 {
103+ animation: frame-v-9 450ms steps(9, end) forwards;
104+}
105+
106+.step-v-10 {
107+ animation: frame-v-10 500ms steps(10, end) forwards;
108+}
109+
110+.step-v-11 {
111+ animation: frame-v-11 550ms steps(11, end) forwards;
112+}
113+
114+.step-v-12 {
115+ animation: frame-v-12 600ms steps(12, end) forwards;
116+}
117+
118+.step-v-13 {
119+ animation: frame-v-13 650ms steps(13, end) forwards;
120+}
121+
122+.step-v-14 {
123+ animation: frame-v-14 700ms steps(14, end) forwards;
124+}
125+
126+.slide-h-0 {
127+ animation: frame-h-0 0ms forwards;
128+}
129+
130+.slide-h-1 {
131+ animation: frame-h-1 100ms forwards;
132+}
133+
134+.slide-h-2 {
135+ animation: frame-h-2 200ms forwards;
136+}
137+
138+.slide-h-3 {
139+ animation: frame-h-3 300ms forwards;
140+}
141+
142+.slide-h-4 {
143+ animation: frame-h-4 400ms forwards;
144+}
145+
146+.slide-h-5 {
147+ animation: frame-h-5 500ms forwards;
148+}
149+
150+.slide-h-6 {
151+ animation: frame-h-6 600ms forwards;
152+}
153+
154+.slide-h-7 {
155+ animation: frame-h-7 700ms forwards;
156+}
157+
158+.slide-h-8 {
159+ animation: frame-h-8 800ms forwards;
160+}
161+
162+.slide-h-9 {
163+ animation: frame-h-9 900ms forwards;
164+}
165+
166+.slide-h-10 {
167+ animation: frame-h-10 1000ms forwards;
168+}
169+
170+.slide-h-11 {
171+ animation: frame-h-11 1100ms forwards;
172+}
173+
174+.slide-h-12 {
175+ animation: frame-h-12 1200ms forwards;
176+}
177+
178+.slide-h-13 {
179+ animation: frame-h-13 1300ms forwards;
180+}
181+
182+.slide-h-14 {
183+ animation: frame-h-14 1400ms forwards;
184+}
185+
186+.slide-v-0 {
187+ animation: frame-v-0 0ms forwards;
188+}
189+
190+.slide-v-1 {
191+ animation: frame-v-1 200ms forwards;
192+}
193+
194+.slide-v-2 {
195+ animation: frame-v-2 400ms forwards;
196+}
197+
198+.slide-v-3 {
199+ animation: frame-v-3 600ms forwards;
200+}
201+
202+.slide-v-4 {
203+ animation: frame-v-4 800ms forwards;
204+}
205+
206+.slide-v-5 {
207+ animation: frame-v-5 1000ms forwards;
208+}
209+
210+.slide-v-6 {
211+ animation: frame-v-6 1200ms forwards;
212+}
213+
214+.slide-v-7 {
215+ animation: frame-v-7 1400ms forwards;
216+}
217+
218+.slide-v-8 {
219+ animation: frame-v-8 1600ms forwards;
220+}
221+
222+.slide-v-9 {
223+ animation: frame-v-9 1800ms forwards;
224+}
225+
226+.slide-v-10 {
227+ animation: frame-v-10 2000ms forwards;
228+}
229+
230+.slide-v-11 {
231+ animation: frame-v-11 2200ms forwards;
232+}
233+
234+.slide-v-12 {
235+ animation: frame-v-12 2400ms forwards;
236+}
237+
238+.slide-v-13 {
239+ animation: frame-v-13 2600ms forwards;
240+}
241+
242+.slide-v-14 {
243+ animation: frame-v-14 2800ms forwards;
244+}
245+
246+@keyframes s0 {
247+ to {
248+ background-position: 0px 0px;
249+ }
250+}
251+@keyframes frame-h-0 {
252+ to {
253+ background-position: -0px 0px;
254+ }
255+}
256+@keyframes frame-h-1 {
257+ to {
258+ background-position: -12px 0px;
259+ }
260+}
261+@keyframes frame-h-2 {
262+ to {
263+ background-position: -24px 0px;
264+ }
265+}
266+@keyframes frame-h-3 {
267+ to {
268+ background-position: -36px 0px;
269+ }
270+}
271+@keyframes frame-h-4 {
272+ to {
273+ background-position: -48px 0px;
274+ }
275+}
276+@keyframes frame-h-5 {
277+ to {
278+ background-position: -60px 0px;
279+ }
280+}
281+@keyframes frame-h-6 {
282+ to {
283+ background-position: -72px 0px;
284+ }
285+}
286+@keyframes frame-h-7 {
287+ to {
288+ background-position: -84px 0px;
289+ }
290+}
291+@keyframes frame-h-8 {
292+ to {
293+ background-position: -96px 0px;
294+ }
295+}
296+@keyframes frame-h-9 {
297+ to {
298+ background-position: -108px 0px;
299+ }
300+}
301+@keyframes frame-h-10 {
302+ to {
303+ background-position: -120px 0px;
304+ }
305+}
306+@keyframes frame-h-11 {
307+ to {
308+ background-position: -132px 0px;
309+ }
310+}
311+@keyframes frame-h-12 {
312+ to {
313+ background-position: -144px 0px;
314+ }
315+}
316+@keyframes frame-h-13 {
317+ to {
318+ background-position: -156px 0px;
319+ }
320+}
321+@keyframes frame-h-14 {
322+ to {
323+ background-position: -168px 0px;
324+ }
325+}
326+@keyframes frame-v-14 {
327+ to {
328+ background-position: 0px 0px;
329+ }
330+}
331+@keyframes frame-v-13 {
332+ to {
333+ background-position: 0px 12px;
334+ }
335+}
336+@keyframes frame-v-12 {
337+ to {
338+ background-position: 0px 24px;
339+ }
340+}
341+@keyframes frame-v-11 {
342+ to {
343+ background-position: 0px 36px;
344+ }
345+}
346+@keyframes frame-v-10 {
347+ to {
348+ background-position: 0px 48px;
349+ }
350+}
351+@keyframes frame-v-9 {
352+ to {
353+ background-position: 0px 60px;
354+ }
355+}
356+@keyframes frame-v-8 {
357+ to {
358+ background-position: 0px 72px;
359+ }
360+}
361+@keyframes frame-v-7 {
362+ to {
363+ background-position: 0px 84px;
364+ }
365+}
366+@keyframes frame-v-6 {
367+ to {
368+ background-position: 0px 96px;
369+ }
370+}
371+@keyframes frame-v-5 {
372+ to {
373+ background-position: 0px 108px;
374+ }
375+}
376+@keyframes frame-v-4 {
377+ to {
378+ background-position: 0px 120px;
379+ }
380+}
381+@keyframes frame-v-3 {
382+ to {
383+ background-position: 0px 132px;
384+ }
385+}
386+@keyframes frame-v-2 {
387+ to {
388+ background-position: 0px 144px;
389+ }
390+}
391+@keyframes frame-v-1 {
392+ to {
393+ background-position: 0px 156px;
394+ }
395+}
396+@keyframes frame-v-0 {
397+ to {
398+ background-position: 0px 168px;
399+ }
400+}
401+
402+.blink {
403+ animation: s0 1s steps(2, forwards) infinite;
404+ -webkit-animation: s0 1s steps(2, forwards) infinite;
405+}
406+
407+/* @keyframes blink-animation {
408+ to {
409+ visibility: hidden;
410+ }
411+}
412+@-webkit-keyframes blink-animation {
413+ to {
414+ visibility: hidden;
415+ }
416+} */
417+
418+
419+
420+button {
421+ border: 1px solid #A6A6A6;
422+ padding: 5px 5px;
423+ margin-bottom: 2px;
424+ border-radius: 7px;
425+ font-family: Inter;
426+ outline: none;
427+}
428+
429+button:hover {
430+ cursor: pointer;
431+ /* border: 2px solid #E6E6E6;
432+ background-color: #E6E6E6; */
433+}
434+
435+/*
436+button:active {
437+ background-color: #4330FC;
438+ border: 1px solid #4330FC;
439+ color: white;
440+} */
441+
442+button:active {
443+ background-color: #000;
444+ border: 1px solid #000;
445+ color: white;
446+}
447+
448+button:disabled{
449+ cursor: default;
450+ pointer-events: none;
451+}
452+
453+p {
454+ font-size: 12px;
455+}
456+
457+*{
458+ -moz-osx-font-smoothing: grayscale;
459+ font-smoothing: grayscale;
460+}
src/views/Activate/ActivateCode.js+7−2
@@ -1,5 +1,5 @@
1import React, { useCallback, useMemo, useRef } from 'react';
1import React, { useCallback, useMemo, useRef } from 'react';
2−import { Just } from 'folktale/maybe';
2+import { Just, Nothing } from 'folktale/maybe';
3import * as azimuth from 'azimuth-js';
3import * as azimuth from 'azimuth-js';
4import { Grid, H4, P, CheckboxInput } from 'indigo-react';
4import { Grid, H4, P, CheckboxInput } from 'indigo-react';
5import { FORM_ERROR } from 'final-form';
5import { FORM_ERROR } from 'final-form';
@@ -146,7 +146,12 @@ export default function ActivateCode() {
146 return (
146 return (
147 <View inset>
147 <View inset>
148 <Grid>
148 <Grid>
149+ <Grid.Item
150+ full
151+ as={Passport}
149− <Grid.Item full as={Passport} point={derivedPoint} />
152+ point={derivedPoint}
153+ address={Nothing()}
154+ />
150 <Grid.Item full as={H4} className="mt3">
155 <Grid.Item full as={H4} className="mt3">
151 Activate
156 Activate
152 </Grid.Item>
157 </Grid.Item>
src/views/Point.js+1−1
@@ -96,7 +96,7 @@ export default function Point() {
96 <Passport
96 <Passport
97 point={Just(point)}
97 point={Just(point)}
98 address={Just(address)}
98 address={Just(address)}
99− animationMode={'none'}
99+ animationMode={'slide'}
100 />
100 />
101 <Grid className="pt2">
101 <Grid className="pt2">
102 {inviteButton}
102 {inviteButton}