Revert "Feat: Remove BetaCautionAlert"

This reverts commit 7b7217c.

src/modules/core/components/BetaCautionAlert/BetaCautionAlert.css

@@ -0,0 +1,39 @@
+.container {
+  display: flex;
+  padding: 2px;
+  height: 54px;
+  width: 143px;
+  position: fixed;
+  bottom: 12px;
+  left: 60px;
+  border-radius: var(--radius-normal);
+  background-color: var(--grey-blue-2);
+  box-shadow: 0px 4px 27px color-mod(var(--temp-grey-8) alpha(25%));
+}
+
+.pinkStripe {
+  margin-right: 13px;
+  height: 50px;
+  width: 4px;
+  border-radius: var(--radius-normal);
+  background-color: var(--pink);
+}
+
+.betaText {
+  padding-top: 6px;
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+}
+
+.cautionText {
+  font-size: var(--size-tiny);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
+}
+
+.link {
+  margin: 18px 0;
+  width: 100%;
+  font-size: var(--size-tiny);
+  text-align: center;
+}

src/modules/core/components/BetaCautionAlert/BetaCautionAlert.css.d.ts

@@ -0,0 +1,5 @@
+export const container: string;
+export const pinkStripe: string;
+export const betaText: string;
+export const cautionText: string;
+export const link: string;

src/modules/core/components/BetaCautionAlert/BetaCautionAlert.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import ExternalLink from '~core/ExternalLink';
+
+import { BETA_DISCLAIMER } from '~externalUrls';
+
+import styles from './BetaCautionAlert.css';
+
+const MSG = {
+  beta: {
+    id: 'BetaCautionAlert.beta',
+    defaultMessage: 'BETA 🤓',
+  },
+  cautionText: {
+    id: 'BetaCautionAlert.cautionText',
+    defaultMessage: 'Use with caution!',
+  },
+};
+
+const BetaCautionAlert = () => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const toggleHover = (hasHover) => setIsHovered(hasHover);
+
+  return (
+    <div
+      className={styles.container}
+      onMouseEnter={() => toggleHover(true)}
+      onMouseLeave={() => toggleHover(false)}
+    >
+      {isHovered ? (
+        <ExternalLink
+          text={{ id: 'text.learnMore' }}
+          className={styles.link}
+          href={BETA_DISCLAIMER}
+        />
+      ) : (
+        <>
+          <div className={styles.pinkStripe} />
+          <div>
+            <div className={styles.betaText}>
+              <FormattedMessage {...MSG.beta} />
+            </div>
+            <div className={styles.cautionText}>
+              <FormattedMessage {...MSG.cautionText} />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default BetaCautionAlert;

src/modules/core/components/BetaCautionAlert/index.ts

@@ -0,0 +1 @@
+export { default } from './BetaCautionAlert';

src/routes/AlwaysAccesibleRoute.tsx

@@ -1,6 +1,7 @@
 import React, { ComponentType } from 'react';
 import { Route, RouteProps } from 'react-router-dom';
 
+import BetaCautionAlert from '~core/BetaCautionAlert';
 import FeedbackWidget from '~core/FeedbackWidget';
 import { RouteComponentProps } from '~pages/RouteLayouts';
 
@@ -29,6 +30,7 @@ const AlwaysAccesibleRoute = ({
       return (
         <Layout routeProps={passedDownRouteProps} {...props}>
           <Component routeProps={passedDownRouteProps} {...props} />
+          <BetaCautionAlert />
           <FeedbackWidget />
         </Layout>
       );

src/routes/WalletRequiredRoute.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react-router-dom';
 import { StaticContext } from 'react-router';
 
+import BetaCautionAlert from '~core/BetaCautionAlert';
 import FeedbackWidget from '~core/FeedbackWidget';
 import { RouteComponentProps } from '~pages/RouteLayouts';
 
@@ -42,6 +43,7 @@ const WalletRequiredRoute = ({
   const RouteComponent = ({ ...props }) => (
     <Layout routeProps={routeProps} {...props}>
       <Component routeProps={routeProps} {...props} />
+      <BetaCautionAlert />
       <FeedbackWidget />
     </Layout>
   );
@@ -139,6 +141,7 @@ const WalletRequiredRoute = ({
             return (
               <Layout routeProps={routeProps} {...props}>
                 <Component routeProps={routeProps} {...props} />
+                <BetaCautionAlert />
                 <FeedbackWidget />
               </Layout>
             );