feat: add a warning when on testnet

app/components/network-message.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Flex, Text, Box } from '@blockstack/ui';
+
+import { ENV } from '../constants/index';
+
+export const NetworkMessage = () => {
+  if (ENV === 'production') return null;
+  return (
+    <Flex width="100%" alignItems="center" justifyContent="center">
+      <Box position="relative" mt="tight">
+        <Box
+          width="8px"
+          height="8px"
+          borderRadius="50%"
+          backgroundColor="#F9A14D"
+          position="absolute"
+          left="-14px"
+          top="9px"
+        />
+        <Text as="h3" textStyle="body.small.medium" color="#F9A14D">
+          Testnet mode
+        </Text>
+      </Box>
+    </Flex>
+  );
+};

app/pages/root.tsx

@@ -2,14 +2,14 @@ import React, { useEffect } from 'react';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import { createGlobalStyle } from 'styled-components';
-import { CSSReset, Box, Text } from '@blockstack/ui';
-import { Link } from 'react-router-dom';
 import { hot } from 'react-hot-loader/root';
 import { History } from 'history';
+import { CSSReset } from '@blockstack/ui';
 
 import { Store } from '../store';
-import { Routes, routerConfig } from '../routes';
+import { Routes } from '../routes';
 import { loadFonts } from '../utils/load-fonts';
+import { NetworkMessage } from '../components/network-message';
 
 const GlobalStyle = createGlobalStyle`
   html, body, #root {
@@ -18,20 +18,6 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export function DevFooter() {
-  return (
-    <Box position="absolute" top="base" left="loose">
-      {routerConfig.map((route, i) => (
-        <Link key={i} to={route.path}>
-          <Text mr="base" fontSize="12px">
-            {route.component.name}
-          </Text>
-        </Link>
-      ))}
-    </Box>
-  );
-}
-
 interface RootProps {
   store: Store;
   history: History;
@@ -46,6 +32,7 @@ function Root({ store, history }: RootProps) {
     <Provider store={store}>
       <CSSReset />
       <GlobalStyle />
+      <NetworkMessage />
       <ConnectedRouter history={history}>
         <Routes />
       </ConnectedRouter>