feat: lock bridge

src/components/Features/ToastProvider/ToastProvider.js

@@ -16,29 +16,37 @@ import {
 } from '../../../enums';
 import {useCompleteTransferToL1, usePrevious, useToastsTranslation} from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
-import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
+import {useIsL1, useIsL2, useBridgeIsFull} from '../../../providers/TransferProvider';
 import {useTransfersLog} from '../../../providers/TransfersLogProvider';
 import {getFullTime} from '../../../utils';
-import {CompleteTransferToL1Toast, ToastBody, TransferToast} from '../../UI';
+import {CompleteTransferToL1Toast, ErrorToast, ToastBody, TransferToast} from '../../UI';
 import styles from './ToastProvider.module.scss';
 
 let toastsMap = {};
 let toastsDismissed = {};
 
+const BRIDGE_FULL_TOAST_ID = 'bridgeFull';
+const ALPHA_DISCLAIMER_TOAST_ID = 'alphaDisclaimer';
+
 export const ToastProvider = () => {
-  const {alphaDisclaimerMsg} = useToastsTranslation();
+  const {alphaDisclaimerNotice, bridgeFullNotice} = useToastsTranslation();
   const {transfers} = useTransfersLog();
   const prevTransfers = usePrevious(transfers);
   const completeTransferToL1 = useCompleteTransferToL1();
   const {showAccountMenu} = useMenu();
   const [, swapToL1] = useIsL1();
   const [, swapToL2] = useIsL2();
   const {breakpoint} = useBreakpoint(Breakpoint);
+  const {bridgeIsFull} = useBridgeIsFull();
 
   useEffect(() => {
     showAlphaDisclaimerToast();
   }, [breakpoint]);
 
+  useEffect(() => {
+    showBridgeFullToast(bridgeIsFull);
+  }, [bridgeIsFull]);
+
   useDeepCompareEffect(() => {
     renderToasts();
   }, [transfers]);
@@ -74,11 +82,39 @@ export const ToastProvider = () => {
   };
 
   const showAlphaDisclaimerToast = () => {
-    toast.success(alphaDisclaimerMsg, {
-      id: 'alphaDisclaimer',
-      position: isMobile(breakpoint) ? 'bottom-center' : 'bottom-left',
-      icon: '❗'
-    });
+    toast.custom(
+      () => (
+        <ErrorToast
+          isCollapsable={false}
+          msg={alphaDisclaimerNotice.bodyTxt}
+          title={alphaDisclaimerNotice.titleTxt}
+        />
+      ),
+      {
+        position: isMobile(breakpoint) ? 'bottom-center' : 'bottom-left',
+        id: ALPHA_DISCLAIMER_TOAST_ID
+      }
+    );
+  };
+
+  const showBridgeFullToast = show => {
+    if (show) {
+      toast.custom(
+        () => (
+          <ErrorToast
+            isCollapsable={true}
+            msg={bridgeFullNotice.bodyTxt}
+            title={bridgeFullNotice.titleTxt}
+          />
+        ),
+        {
+          position: 'top-center',
+          id: BRIDGE_FULL_TOAST_ID
+        }
+      );
+    } else {
+      toast.remove(BRIDGE_FULL_TOAST_ID);
+    }
   };
 
   const showConsumedTransferToast = transfer => {

src/components/Features/Transfer/Transfer.js

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 
 import {ActionType, NetworkType} from '../../../enums';
 import {
+  useIsMaxTotalBalanceExceeded,
   useMaxDeposit,
   useTransferToL1,
   useTransferToL2,
@@ -10,7 +11,13 @@ import {
 } from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useL1Token, useL2Token, useTokens} from '../../../providers/TokensProvider';
-import {useAmount, useIsL1, useIsL2, useTransfer} from '../../../providers/TransferProvider';
+import {
+  useAmount,
+  useIsL1,
+  useIsL2,
+  useBridgeIsFull,
+  useTransfer
+} from '../../../providers/TransferProvider';
 import {afterDecimal, evaluate, isNegative, isZero} from '../../../utils';
 import {
   Loading,
@@ -41,6 +48,7 @@ export const Transfer = () => {
   const {showSelectTokenMenu} = useMenu();
   const {selectToken, selectedToken, action} = useTransfer();
   const {tokens, updateTokenBalance} = useTokens();
+  const {bridgeIsFull} = useBridgeIsFull();
   const transferToL2 = useTransferToL2();
   const transferToL1 = useTransferToL1();
   const getL1Token = useL1Token();
@@ -146,6 +154,7 @@ export const Transfer = () => {
     const tokenData = getL1Token(selectedToken.symbol);
     return (
       <NetworkMenu
+        isDisabled={bridgeIsFull}
         isTarget={!isL1}
         networkData={NetworkType.L1}
         tokenData={tokenData}
@@ -160,6 +169,7 @@ export const Transfer = () => {
     const tokenData = getL2Token(selectedToken.symbol);
     return (
       <NetworkMenu
+        isDisabled={bridgeIsFull}
         isTarget={!isL2}
         networkData={NetworkType.L2}
         tokenData={tokenData}
@@ -175,14 +185,15 @@ export const Transfer = () => {
       <>
         <TokenInput
           hasError={hasInputError}
+          isDisabled={bridgeIsFull}
           tokenData={selectedToken}
           value={amount}
           onInputChange={onInputChange}
           onMaxClick={onMaxClick}
           onTokenSelect={showSelectTokenMenu}
         />
         {hasInputError && <div className={styles.errorMsg}>{errorMsg}</div>}
-        <TransferButton isDisabled={isButtonDisabled} onClick={onTransferClick} />
+        <TransferButton isDisabled={isButtonDisabled || bridgeIsFull} onClick={onTransferClick} />
       </>
     );
   };

src/components/UI/Badge/Badge.js

@@ -1,10 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import {toClasses} from '../../../utils';
 import styles from './Badge.module.scss';
 
-export const Badge = ({text}) => <div className={styles.badge}>{text}</div>;
+export const Badge = ({text, isDisabled}) => (
+  <div className={toClasses(styles.badge, isDisabled && styles.isDisabled)}>{text}</div>
+);
 
 Badge.propTypes = {
-  text: PropTypes.string
+  text: PropTypes.string,
+  isDisabled: PropTypes.bool
 };

src/components/UI/Badge/Badge.module.scss

@@ -10,4 +10,8 @@
   display: inline-block;
   padding: 0 10px;
   margin-bottom: 15px;
+
+  &.isDisabled {
+    opacity: 0.2;
+  }
 }

src/components/UI/CollapseExpand/CollapseExpand.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {ReactComponent as CollapseExpandIcon} from '../../../assets/svg/icons/collapse.svg';
+import {toClasses} from '../../../utils';
+import styles from './CollapseExpand.module.scss';
+
+export const CollapseExpand = ({isCollapsed, size, onClick}) => {
+  return (
+    <CollapseExpandIcon
+      style={{
+        height: `${size}px`,
+        width: `${size}px`
+      }}
+      className={toClasses(styles.collapseExpand, isCollapsed && styles.isCollapsed)}
+      onClick={onClick}
+    />
+  );
+};
+
+CollapseExpand.propTypes = {
+  isCollapsed: PropTypes.bool,
+  onClick: PropTypes.func
+};

src/components/UI/CollapseExpand/CollapseExpand.module.scss

@@ -0,0 +1,8 @@
+.collapseExpand {
+  cursor: pointer;
+  transition: 0.3s ease-in-out;
+
+  &.isCollapsed {
+    transform: scale(1, -1);
+  }
+}

src/components/UI/NetworkMenu/NetworkMenu.js

@@ -7,15 +7,26 @@ import {TokenBalance} from '../TokenBalance/TokenBalance';
 import {Badge} from '../index';
 import styles from './NetworkMenu.module.scss';
 
-export const NetworkMenu = ({networkData, tokenData, isTarget, onRefreshClick, children}) => {
+export const NetworkMenu = ({
+  networkData,
+  tokenData,
+  isTarget,
+  isDisabled,
+  onRefreshClick,
+  children
+}) => {
   const {toTxt, fromTxt} = useTransferTranslation();
 
   return (
     <div className={styles.networkMenu}>
-      <Badge text={isTarget ? toTxt : fromTxt} />
+      <Badge isDisabled={isDisabled} text={isTarget ? toTxt : fromTxt} />
       <div className={styles.networkContainer}>
-        <NetworkTitle networkData={networkData} />
-        <TokenBalance tokenData={tokenData} onRefreshClick={onRefreshClick} />
+        <NetworkTitle isDisabled={isDisabled} networkData={networkData} />
+        <TokenBalance
+          isDisabled={isDisabled}
+          tokenData={tokenData}
+          onRefreshClick={onRefreshClick}
+        />
       </div>
       <div className={styles.transferContainer}>{children}</div>
     </div>
@@ -26,6 +37,7 @@ NetworkMenu.propTypes = {
   networkData: PropTypes.object,
   tokenData: PropTypes.object,
   isTarget: PropTypes.bool,
+  isDisabled: PropTypes.bool,
   onRefreshClick: PropTypes.func,
   children: PropTypes.any
 };

src/components/UI/NetworkTitle/NetworkTitle.js

@@ -1,17 +1,19 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import {toClasses} from '../../../utils';
 import {CryptoLogoSize} from '../CryptoLogo/CryptoLogo';
 import {CryptoLogo} from '../index';
 import styles from './NetworkTitle.module.scss';
 
-export const NetworkTitle = ({networkData}) => (
-  <div className={styles.networkTitle}>
+export const NetworkTitle = ({networkData, isDisabled}) => (
+  <div className={toClasses(styles.networkTitle, isDisabled && styles.isDisabled)}>
     <CryptoLogo size={CryptoLogoSize.MEDIUM} symbol={networkData.symbol} />
     {networkData.name}
   </div>
 );
 
 NetworkTitle.propTypes = {
-  networkData: PropTypes.object
+  networkData: PropTypes.object,
+  isDisabled: PropTypes.bool
 };

src/components/UI/NetworkTitle/NetworkTitle.module.scss

@@ -7,4 +7,8 @@
   font-size: 15px;
   color: $--color-white;
   text-transform: capitalize;
+
+  &.isDisabled {
+    opacity: 0.2;
+  }
 }

src/components/UI/SideButton/SideButton.module.scss

@@ -2,8 +2,9 @@
 
 .sideButton {
   position: absolute;
-  top: 300px;
+  top: 50%;
   right: 0;
+  transform: translateY(-50%);
   background: $--color-beta;
   border: 1px solid $--color-discord;
   padding: 20px 8px;

src/components/UI/Toast/ErrorToast/ErrorToast.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React, {useState} from 'react';
+
+import {ReactComponent as WarningIcon} from '../../../../assets/svg/icons/warning.svg';
+import {toClasses} from '../../../../utils';
+import {CollapseExpand} from '../../CollapseExpand/CollapseExpand';
+import styles from './ErrorToast.module.scss';
+
+export const ErrorToast = ({title, msg, isCollapsable}) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const onCollapseExpandClick = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  return (
+    <div className={toClasses(styles.errorToast, isCollapsed && styles.collapsed)}>
+      <div className={styles.leftBorder} />
+      <div className={styles.container}>
+        <WarningIcon className={styles.warning} />
+        <div className={styles.text}>
+          <div className={styles.title}>{title}</div>
+          {!isCollapsed && <div className={styles.msg}>{msg}</div>}
+        </div>
+        {isCollapsable && (
+          <CollapseExpand isCollapsed={isCollapsed} size={20} onClick={onCollapseExpandClick} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+ErrorToast.propTypes = {
+  title: PropTypes.string,
+  msg: PropTypes.string,
+  isCollapsable: PropTypes.bool
+};