Interface: Set favicon to ship sigil

pkg/interface/src/App.js

@@ -3,10 +3,12 @@ import 'react-hot-loader';
 import * as React from 'react';
 import { BrowserRouter as Router, Route, withRouter, Switch } from 'react-router-dom';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
+import { sigil as sigiljs, stringRenderer } from 'urbit-sigil-js';
 
 import './css/indigo-static.css';
 import './css/fonts.css';
-import { light, dark, inverted, paperDark } from '@tlon/indigo-react';
+import light from './themes/light';
+import dark from './themes/old-dark';
 
 import LaunchApp from './apps/launch/app';
 import ChatApp from './apps/chat/app';
@@ -16,11 +18,13 @@ import LinksApp from './apps/links/app';
 import PublishApp from './apps/publish/app';
 
 import StatusBar from './components/StatusBar';
-import NotFound from './components/404';
+import ErrorComponent from './components/Error';
 
 import GlobalStore from './store/store';
 import GlobalSubscription from './subscription/global';
 import GlobalApi from './api/global';
+import { uxToHex } from './lib/util';
+import { Sigil } from './lib/sigil';
 
 // const Style = createGlobalStyle`
 //   ${cssReset}
@@ -61,6 +65,7 @@ class App extends React.Component {
       new GlobalSubscription(this.store, this.api, this.appChannel);
 
     this.updateTheme = this.updateTheme.bind(this);
+    this.setFavicon = this.setFavicon.bind(this);
   }
 
   componentDidMount() {
@@ -69,23 +74,48 @@ class App extends React.Component {
     this.api.local.setDark(this.themeWatcher.matches);
     this.themeWatcher.addListener(this.updateTheme);
     this.api.local.getBaseHash();
+    this.setFavicon();
   }
 
   componentWillUnmount() {
     this.themeWatcher.removeListener(this.updateTheme);
   }
 
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    this.setFavicon();
+  }
+
   updateTheme(e) {
     this.api.local.setDark(e.matches);
   }
 
+  setFavicon() {
+    if (window.ship.length < 14) {
+      let background = '#ffffff';
+      if (this.state.contacts.hasOwnProperty('/~/default')) {
+        background = `#${uxToHex(this.state.contacts['/~/default'][window.ship].color)}`;
+      }
+      const foreground = Sigil.foregroundFromBackground(background);
+      const svg = sigiljs({
+        patp: window.ship,
+        renderer: stringRenderer,
+        size: 16,
+        colors: [background, foreground]
+      });
+      const dataurl = 'data:image/svg+xml;base64,' + btoa(svg);
+      const favicon = document.querySelector('[rel=icon]');
+      favicon.href = dataurl;
+      favicon.type = 'image/svg+xml';
+    }
+  }
+
   render() {
     const channel = window.channel;
 
     const associations = this.state.associations ? this.state.associations : { contacts: {} };
     const selectedGroups = this.state.selectedGroups ? this.state.selectedGroups : [];
     const { state } = this;
-    const theme = state.dark ? paperDark : light;
+    const theme = state.dark ? dark : light;
 
     return (
       <ThemeProvider theme={theme}>
@@ -161,7 +191,11 @@ class App extends React.Component {
                 />
               )}
               />
-              <Route component={NotFound} />
+              <Route
+                render={(props) => (
+                  <ErrorComponent {...props} code={404} description="Not Found" />
+                )}
+               />
               </Switch>
             </Content>
           </Router>

pkg/interface/src/lib/sigil.js

@@ -2,24 +2,24 @@ import React, { Component } 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;
+
+    return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
+  }
+  
   render() {
     const { props } = this;
 
     const classes = props.classes || '';
 
-    const rgb = {
-      r: parseInt(props.color.slice(1, 3), 16),
-      g: parseInt(props.color.slice(3, 5), 16),
-      b: parseInt(props.color.slice(5, 7), 16)
-    };
-    const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000;
-    const whiteBrightness = 255;
-
-    let foreground = 'white';
-
-    if ((whiteBrightness - brightness) < 50) {
-      foreground = 'black';
-    }
+    const foreground = Sigil.foregroundFromBackground(props.color);
 
     if (props.ship.length > 14) {
       return (