on 05c1914 help sign in
bridge/src/components/ValidatedSigil.js
79 lines 1.5 kB history raw
1import React from 'react'
2import PropTypes from 'prop-types'
4import { pour } from 'sigil-js'
5import * as ob from 'urbit-ob'
6import ReactSVGComponents from '../components/ReactSVGComponents'
8const isValidPatp = patp => {
9 let isValid = false
10 try {
11 isValid = ob.isValidPatp(patp)
12 } catch(err) {
13 return isValid
14 }
15 return isValid
19const ValidatedSigil = ({
20 className,
21 children,
22 style,
23 color,
24 patp,
25 size,
26 margin,
27 displayPass,
28 displayFailure,
29 focussed,
30 beenFocussed
31}) => {
33 const colorStyle = styleSelector(displayPass, displayFailure, focussed);
35 return (
36 <div className={`${className}`} style={style}>
37 {
38 isValidPatp(patp)
39 ? pour({
40 patp: patp,
41 renderer: ReactSVGComponents,
42 size: size,
43 colorway: colorStyle,
44 margin: margin,
45 })
46 : <div className={'bg-transparent'} style={{
47 width: size,
48 height: size,
49 }} />
50 }
51 {
52 children
53 }
54 </div>
55 )
58const styleSelector = (pass, fail, focus) => {
59 if (fail === true) return ['#FFFFFF', '#F8C134'];
60 if (pass === true) return ['#FFFFFF', '#2AA779'];
61 if (focus === true) return ['#FFFFFF', '#4330FC'];
62 return ['#FFFFFF', '#7F7F7F'];
66ValidatedSigil.propTypes = {
67 className: PropTypes.string,
68 children: PropTypes.node,
69 style: PropTypes.object,
70};
73ValidatedSigil.defaultProps = {
74 className: '',
75 style: {},
76};
79export default ValidatedSigil;