diff --git a/pkg/interface/src/logic/lib/sigil.js b/pkg/interface/src/logic/lib/sigil.js
index bcdee52bb..8e5066eec 100644
--- a/pkg/interface/src/logic/lib/sigil.js
+++ b/pkg/interface/src/logic/lib/sigil.js
@@ -1,48 +1,39 @@
-import React, { Component } from 'react';
+import React, { memo } from 'react';
import { sigil, reactRenderer } from 'urbit-sigil-js';
-export class Sigil extends Component {
- static foregroundFromBackground(background) {
- const rgb = {
- r: parseInt(background.slice(1, 3), 16),
- g: parseInt(background.slice(3, 5), 16),
- b: parseInt(background.slice(5, 7), 16)
- };
- const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000;
- const whiteBrightness = 255;
+export const foregroundFromBackground = (background) => {
+ const rgb = {
+ r: parseInt(background.slice(1, 3), 16),
+ g: parseInt(background.slice(3, 5), 16),
+ b: parseInt(background.slice(5, 7), 16)
+ };
+ const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000;
+ const whiteBrightness = 255;
- return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
- }
-
- render() {
- const { props } = this;
-
- const classes = props.classes || '';
-
- const foreground = Sigil.foregroundFromBackground(props.color);
-
- if (props.ship.length > 14) {
- return (
-
- );
- } else {
- return (
-
- {sigil({
- patp: props.ship,
- renderer: reactRenderer,
- size: props.size,
- colors: [props.color, foreground],
- class: props.svgClass
- })}
-
- );
- }
- }
+ return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
}
+
+export const Sigil = memo(({ classes = '', color, ship, size, svgClass = '' }) => {
+ return ship.length > 14
+ ? (
+
)
+ : (
+ {sigil({
+ patp: ship,
+ renderer: reactRenderer,
+ size: size,
+ colors: [
+ color,
+ foregroundFromBackground(color)
+ ],
+ class: svgClass
+ })}
+
)
+})
+
+export default Sigil;
\ No newline at end of file
diff --git a/pkg/interface/src/views/App.js b/pkg/interface/src/views/App.js
index 2b6c9e650..dbe6cc88a 100644
--- a/pkg/interface/src/views/App.js
+++ b/pkg/interface/src/views/App.js
@@ -22,7 +22,7 @@ import GlobalStore from '~/logic/store/store';
import GlobalSubscription from '~/logic/subscription/global';
import GlobalApi from '~/logic/api/global';
import { uxToHex } from '~/logic/lib/util';
-import { Sigil } from '~/logic/lib/sigil';
+import { foregroundFromBackground } from '~/logic/lib/sigil';
const Root = styled.div`
font-family: ${p => p.theme.fonts.sans};
@@ -85,7 +85,7 @@ class App extends React.Component {
if (this.state.contacts.hasOwnProperty('/~/default')) {
background = `#${uxToHex(this.state.contacts['/~/default'][window.ship].color)}`;
}
- const foreground = Sigil.foregroundFromBackground(background);
+ const foreground = foregroundFromBackground(background);
const svg = sigiljs({
patp: window.ship,
renderer: stringRenderer,