Fix crash when currency exchange endpoint down, add ‘i’ button for DI…

…CE ID turning off

#6888
#6887

src/shared/components/Settings/Account/Security/index.jsx

@@ -4,12 +4,14 @@ import _ from 'lodash';
 import { config } from 'topcoder-react-utils';
 import QRCode from 'react-qr-code';
 import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
+import Tooltip from 'components/Tooltip';
 import MfaImage from 'assets/images/account/security/mfa.svg';
 import DiceLogo from 'assets/images/account/security/dicelogo.png';
 import DiceLogoBig from 'assets/images/account/security/dicelogobig.png';
 import GooglePlay from 'assets/images/account/security/google-play.png';
 import AppleStore from 'assets/images/account/security/apple-store.svg';
 import UnsuccessfulIcon from 'assets/images/account/security/unsuccessful.svg';
+import TooltipInfo from 'assets/images/tooltip-info.svg';
 import Modal from './Modal';
 import VerificationListener from './VerificationListener';
 
@@ -25,6 +27,12 @@ export default function Security({
   const [connVerifyCounter, setConnVerifyCounter] = useState(0);
   const [isVerificationProcessing, setIsVerificationProcessing] = useState(false);
   const diceVerifyUrl = config.DICE_VERIFY_URL;
+
+  const diceTip = (
+    <div styleName="tctooltiptext">
+      <p>Please reach out to [email protected] for deactivating Dice ID</p>
+    </div>
+  );
   const useInterval = (callback, delay) => {
     const savedCallback = useRef();
 
@@ -359,7 +367,7 @@ export default function Security({
             </div>
             <div styleName="info">
               <div styleName="info-first-line">
-                DICE ID Authenticator App
+                <span>DICE ID Authenticator App</span>
               </div>
               <div styleName="info-second-line dice-info">
                 DICE ID authentication application
@@ -370,22 +378,31 @@ export default function Security({
             </div>
             {diceChecked
               ? (
-                <div className="onoffswitch" styleName="dice-switch">
-                  <input
-                    type="checkbox"
-                    name="pre-onoffswitch-dice"
-                    id="pre-onoffswitch-dice"
-                    value="diceEnabled"
-                    checked
-                    onChange={() => { }}
-                    className="onoffswitch-checkbox"
-                    disabled
-                  />
-                  <label htmlFor="pre-onoffswitch-dice" className="onoffswitch-label" styleName="disabled-toggle">
-                    <span className="onoffswitch-inner" />
-                    <span className="onoffswitch-switch" />
-                    <input type="hidden" />
-                  </label>
+                <div styleName="dice-switch">
+                  <div className="onoffswitch">
+                    <input
+                      type="checkbox"
+                      name="pre-onoffswitch-dice"
+                      id="pre-onoffswitch-dice"
+                      value="diceEnabled"
+                      checked
+                      onChange={() => { }}
+                      className="onoffswitch-checkbox"
+                      disabled
+                    />
+                    <label htmlFor="pre-onoffswitch-dice" className="onoffswitch-label" styleName="disabled-toggle">
+                      <span className="onoffswitch-inner" />
+                      <span className="onoffswitch-switch" />
+                      <input type="hidden" />
+                    </label>
+                  </div>
+                  <Tooltip
+                    id="DICE-ID-Authenticator-App-tip"
+                    content={diceTip}
+                    trigger={['hover', 'focus']}
+                  >
+                    <TooltipInfo />
+                  </Tooltip>
                 </div>
               )
               : (

src/shared/components/Settings/Account/Security/styles.scss

@@ -137,6 +137,9 @@
     }
 
     .dice-switch {
+      display: flex;
+      align-items: center;
+
       @media (max-width: #{$screen-md - 1px}) {
         display: none;
       }
@@ -280,3 +283,18 @@
   color: #767676;
   margin-top: auto;
 }
+
+.tctooltiptext {
+  background: $tooltip-gray;
+  color: $tc-white;
+  border-radius: 8px;
+  padding: 10px;
+
+  p {
+    @include roboto-medium;
+
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}

src/shared/services/money.js

@@ -36,7 +36,11 @@ async function updateCache() {
   fx.rates = cache.rates;
 }
 
-updateCache();
+try {
+  updateCache();
+} catch (error) {
+  // exchange-rates failed, reason: socket hang up
+}
 
 /**
  * Converts specified amount of money to another currency.
@@ -48,7 +52,11 @@ updateCache();
  *  operations necessary to update the cached currency rates.
  */
 export async function convert(amount, to, from = 'USD') {
-  await updateCache();
+  try {
+    await updateCache();
+  } catch (error) {
+    // exchange-rates failed, reason: socket hang up
+  }
   return fx.convert(amount, { from, to });
 }
 
@@ -63,7 +71,11 @@ export async function convert(amount, to, from = 'USD') {
  * @return {Number}
  */
 export function convertNow(amount, to, from = 'USD') {
-  updateCache();
+  try {
+    updateCache();
+  } catch (error) {
+    // exchange-rates failed, reason: socket hang up
+  }
   return fx.convert(amount, { from, to });
 }
 
@@ -72,7 +84,11 @@ export function convertNow(amount, to, from = 'USD') {
  * @return {Promise}
  */
 export async function getRates() {
-  await updateCache();
+  try {
+    await updateCache();
+  } catch (error) {
+    // exchange-rates failed, reason: socket hang up
+  }
   return _.cloneDeep(cache);
 }
 
@@ -81,6 +97,10 @@ export async function getRates() {
  * @return {Promise}
  */
 export function getRatesNow() {
-  updateCache();
+  try {
+    updateCache();
+  } catch (error) {
+    // exchange-rates failed, reason: socket hang up
+  }
   return _.cloneDeep(cache);
 }