chore: add banner to legacy site, disable start streams

src/components/layout/Banner/index.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { FontIcon, FontIconName } from 'components/common/FontIcon';
+import styles from './styles.module.scss';
+
+export const Banner: FC = () => {
+	return (
+		<div className={styles.banner}>
+			<FontIcon name={FontIconName.Warning} size={12} />
+			<span>
+				Version 3 REX Markets are live! Please close your streams and visit{' '}
+				<a href="https://app.ricochet.exchange">app.ricochet.exchange</a> to start using the new version.
+			</span>
+		</div>
+	);
+};

src/components/layout/Banner/styles.module.scss

@@ -0,0 +1,32 @@
+@import "../../../assets/styles/mixins";
+
+.banner {
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 100000;
+  position: fixed;
+  background-color: var(--color-red);
+  color: var(--color-black-dark);
+  margin: auto;
+  padding: 4px;
+  -moz-box-flex: 1;
+  flex-grow: 1;
+  -moz-box-pack: center;
+  justify-content: center;
+  -moz-box-align: center;
+  align-items: center;
+  text-align: center;
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1.66;
+  letter-spacing: 0.03333em;
+
+  @include tablet {
+    padding: 8px 45px;
+  }
+
+  i {
+    margin-right: 5px;
+  }
+}

src/components/layout/CoinRateForm/index.tsx

@@ -58,35 +58,24 @@ export const CoinRateForm: FC<IProps> = ({
 							color="primary"
 							onClick={onClickStart}
 							className={styles.start}
-							disabled={
-								isReadOnly ||
-								isLoading ||
-								!Boolean(parseInt(coinBalanceA ?? '') > 0) ||
-								!value ||
-								((Math.floor(((parseFloat(value) / 2592000) * 1e18) / shareScaler) * shareScaler) /
-									1e18) *
-									2592000 ===
-									0
-							}
+							disabled={true}
 							isLoading={isLoading}
 						>
 							{t('Start')}/{t('Edit')}
 						</ButtonNew>
 					</span>
 				</div>
 				<div className={styles.stop_wrap}>
-					{parseFloat(personalFlow) > 0 && (
-						<ButtonNew
-							loaderColor="#363B55"
-							color="secondary"
-							onClick={onClickStop}
-							className={styles.stop}
-							disabled={isReadOnly || isLoading}
-							isLoading={isLoading}
-						>
-							{t('Stop')}
-						</ButtonNew>
-					)}
+					<ButtonNew
+						loaderColor="#363B55"
+						color="secondary"
+						onClick={onClickStop}
+						className={styles.stop}
+						disabled={isReadOnly || isLoading}
+						isLoading={isLoading}
+					>
+						{t('Stop')}
+					</ButtonNew>
 				</div>
 				<div style={{ flexBasis: '100%', height: '0' }}> </div>
 

src/components/layout/PanelChange/index.tsx

@@ -427,32 +427,6 @@ export const PanelChange: FC<IProps> = ({
 											{`$${totalFlow && getFlowUSDValue(totalFlow)}`}
 										</span>
 										{t('per month')}
-										{fireIconsCheck(coinA, coinB) ? (
-											<span>
-												<span
-													data-tip
-													data-for={`depositTooltipTotal-${uuid}`}
-													style={{ marginLeft: '6px' }}
-												>
-													🔥
-												</span>
-												<ReactTooltip
-													id={`depositTooltipTotal-${uuid}`}
-													place="right"
-													effect="solid"
-													multiline
-													className={styles.depositTooltip}
-												>
-													<span className={styles.depositTooltip_span}>
-														Total rewards: {emissionRate} RIC/mo.
-														<br />
-														Your rewards: {userRewards} RIC/mo.
-													</span>
-												</ReactTooltip>
-											</span>
-										) : (
-											<span />
-										)}
 									</span>
 									<span className={styles.token_amounts}>
 										<span>{`${totalFlow && totalFlow} ${coinA}x / ${t('Month')}`}</span>

src/containers/MainLayout/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useShallowSelector } from 'hooks/useShallowSelector';
 import { selectMain } from 'store/main/selectors';
+import { Banner } from 'components/layout/Banner';
 import { HeaderContainer } from 'containers/main/HeaderContainer';
 import { InvestNav } from 'components/layout/InvestNav';
 import { RICAddress } from 'constants/polygon_config';
@@ -14,6 +15,7 @@ export const MainLayout: React.FC<IProps> = ({ children }) => {
 	return (
 		<div className={styles.container}>
 			<div className={styles.header}>
+				<Banner />
 				<HeaderContainer balance={balances && balances[RICAddress]} address={address || 'Connect Wallet'} />
 			</div>
 

src/containers/MainLayout/styles.module.scss

@@ -4,6 +4,10 @@
 	width: 100%;
 }
 
+.header {
+	margin-top: 25px;
+}
+
 .content {
 	grid-area: content;
 	width: 100%;
@@ -17,6 +21,9 @@
 		height: 80px;
 		margin-top: 10vh;
 	}
+	.header {
+		margin-top: 25px;
+	}
 	.content {
 		max-width: 100vw;
 	}