Sebas prompt for api key (#171)

* chore: prompt users when they dont have api key set up

* bump extension version

src/components/WakaTime.tsx

@@ -2,6 +2,9 @@ import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { ApiKeyReducer, ReduxSelector } from '../types/store';
 import { fetchUserData } from '../utils/user';
+import apiKeyInvalid from '../utils/apiKey';
+import config from '../config/config';
+import Alert from './Alert';
 import NavBar from './NavBar';
 import MainList from './MainList';
 
@@ -18,9 +21,19 @@ export default function WakaTime(): JSX.Element {
     void fetchUserData(apiKeyFromRedux, dispatch);
   }, []);
 
+  const isApiKeyValid = apiKeyInvalid(apiKeyFromRedux) === '';
+
   return (
     <div>
       <NavBar />
+      {!isApiKeyValid && (
+        <Alert
+          type={config.alert.failure.type}
+          text={'Please update your api key'}
+          onClick={() => browser.runtime.openOptionsPage()}
+          style={{ cursor: 'pointer' }}
+        />
+      )}
       <div className="container">
         <div className="row">
           <div className="col-md-12">