Added useFormat hook to format special values.

components/metrics/BrowsersTable.js

@@ -1,16 +1,17 @@
+import { useRouter } from 'next/router';
 import FilterLink from 'components/common/FilterLink';
 import MetricsTable from 'components/metrics/MetricsTable';
-import { BROWSERS } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
-import { useRouter } from 'next/router';
+import useFormat from 'hooks/useFormat';
 
 export function BrowsersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
   const { basePath } = useRouter();
+  const { formatBrowser } = useFormat();
 
   function renderLink({ x: browser }) {
     return (
-      <FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser}>
+      <FilterLink id="browser" value={browser} label={formatBrowser(browser)}>
         <img
           src={`${basePath}/images/browsers/${browser || 'unknown'}.png`}
           alt={browser}