@@ -1,8 +1,8 @@
1−import React from 'react';
1+import React, { useEffect, useState } from 'react';
2+import { Just } from 'folktale/maybe';
23import * as ob from 'urbit-ob';
34
4−import Sigil from './Sigil';
5−import AspectRatio from './AspectRatio';
5+import MaybeSigil from './MaybeSigil';
66
77const selectColorway = (pass, fail, focused) => {
88 if (pass) {
@@ -29,12 +29,21 @@ export default function InputSigil({
2929 focused,
3030 ...rest
3131}) {
32− const colorway = selectColorway(pass, error, focused);
33− const valid = ob.isValidPatp(patp);
32+ const [lastValidPatp, setLastValidPatp] = useState(patp);
3433
35− return valid ? (
36− <Sigil patp={patp} size={size} colorway={colorway} margin={0} {...rest} />
37− ) : (
38− <AspectRatio aspectRatio={1} />
34+ useEffect(() => {
35+ if (ob.isValidPatp(patp)) {
36+ setLastValidPatp(patp);
37+ }
38+ }, [patp]);
39+
40+ return (
41+ <MaybeSigil
42+ patp={Just(lastValidPatp)}
43+ size={size}
44+ colors={selectColorway(pass, error, focused)}
45+ margin={0}
46+ {...rest}
47+ />
3948 );
4049}