From 23d732135d949f897c16700ecffcf2386ad0eaf9 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Wed, 7 Jul 2021 10:16:54 +0100
Subject: [PATCH] Fix react warning in settings tab

---
 .../settings/src/lib/remix-ui-settings.tsx    | 70 +++++++++++--------
 1 file changed, 39 insertions(+), 31 deletions(-)

diff --git a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
index adf92ae393..2d20ecf83c 100644
--- a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
+++ b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
@@ -71,39 +71,47 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     }
   }
 
-  const generalConfig = () => (
-    <div className="$border-top">
-      <div className="card-body pt-3 pb-2">
-        <h6 className="card-title">General settings</h6>
-        <div className="mt-2 custom-control custom-checkbox mb-1">
-          <input onChange={onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" className="custom-control-input" name="contractMetadata" checked = { props.config.get('settings/generate-contract-metadata') }/>
-          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/generate-contract-metadata')}`} data-id="settingsTabGenerateContractMetadataLabel" htmlFor="generatecontractmetadata">{generateContractMetadataText}</label>
-        </div>
-        <div className="fmt-2 custom-control custom-checkbox mb-1">
-          <input onChange={onchangeOption} className="custom-control-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox" name="ethereumVM" checked={ props.config.get('settings/always-use-vm') }/>
-          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/always-use-vm')}`} htmlFor="alwaysUseVM">{ethereunVMText}</label>
-        </div>
-        <div className="mt-2 custom-control custom-checkbox mb-1">
-          <input id="editorWrap" className="custom-control-input" type="checkbox" onChange={textWrapEvent} checked = { props.config.get('settings/text-wrap')}/>
-          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/text-wrap')}`} htmlFor="editorWrap">{wordWrapText}</label>
-        </div>
-        <div className="custom-control custom-checkbox mb-1">
-          <input onChange={onchangePersonal} id="personal" type="checkbox" className="custom-control-input" checked = { props.config.get('settings/personal-mode')}/>
-          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/personal-mode')}`} htmlFor="personal">
-            <i className="fas fa-exclamation-triangle text-warning" aria-hidden="true"></i> <span>   </span>
-            <span>   </span>{enablePersonalModeText} {warnText}
-          </label>
-        </div>
-        <div className="custom-control custom-checkbox mb-1">
-          <input onChange={onchangeMatomoAnalytics} id="settingsMatomoAnalytics" type="checkbox" className="custom-control-input" checked={ props.config.get('settings/matomo-analytics')}/>
-          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/matomo-analytics')}`} htmlFor="settingsMatomoAnalytics">
-            <span>{matomoAnalytics}</span>
-            <a href="https://medium.com/p/66ef69e14931/" target="_blank"> Analytics in Remix IDE</a> <span>&</span> <a target="_blank" href="https://matomo.org/free-software">Matomo</a>
-          </label>
+  const generalConfig = () => {
+    const isMetadataChecked = (props.config.get('settings/generate-contract-metadata') === null) || (props.config.get('settings/generate-contract-metadata') === undefined) ? false : props.config.get('settings/generate-contract-metadata')
+    const isEthereumVMChecked = (props.config.get('settings/always-use-vm') === null) || (props.config.get('settings/always-use-vm') === undefined) ? false : props.config.get('settings/always-use-vm')
+    const isEditorWrapChecked = (props.config.get('settings/text-wrap') === null) || (props.config.get('settings/text-wrap') === undefined) ? false : props.config.get('settings/text-wrap')
+    const isPersonalChecked = (props.config.get('settings/personal-mode') === null) || (props.config.get('settings/personal-mode') === undefined) ? false : props.config.get('settings/personal-mode')
+    const isMatomoChecked = (props.config.get('settings/matomo-analytics') === null) || (props.config.get('settings/matomo-analytics') === undefined) ? false : props.config.get('settings/matomo-analytics')
+
+    return (
+      <div className="$border-top">
+        <div className="card-body pt-3 pb-2">
+          <h6 className="card-title">General settings</h6>
+          <div className="mt-2 custom-control custom-checkbox mb-1">
+            <input onChange={onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" className="custom-control-input" name="contractMetadata" checked = { isMetadataChecked }/>
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/generate-contract-metadata')}`} data-id="settingsTabGenerateContractMetadataLabel" htmlFor="generatecontractmetadata">{generateContractMetadataText}</label>
+          </div>
+          <div className="fmt-2 custom-control custom-checkbox mb-1">
+            <input onChange={onchangeOption} className="custom-control-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox" name="ethereumVM" checked={ isEthereumVMChecked }/>
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/always-use-vm')}`} htmlFor="alwaysUseVM">{ethereunVMText}</label>
+          </div>
+          <div className="mt-2 custom-control custom-checkbox mb-1">
+            <input id="editorWrap" className="custom-control-input" type="checkbox" onChange={textWrapEvent} checked = { isEditorWrapChecked }/>
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/text-wrap')}`} htmlFor="editorWrap">{wordWrapText}</label>
+          </div>
+          <div className="custom-control custom-checkbox mb-1">
+            <input onChange={onchangePersonal} id="personal" type="checkbox" className="custom-control-input" checked = { isPersonalChecked }/>
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/personal-mode')}`} htmlFor="personal">
+              <i className="fas fa-exclamation-triangle text-warning" aria-hidden="true"></i> <span>   </span>
+              <span>   </span>{enablePersonalModeText} {warnText}
+            </label>
+          </div>
+          <div className="custom-control custom-checkbox mb-1">
+            <input onChange={onchangeMatomoAnalytics} id="settingsMatomoAnalytics" type="checkbox" className="custom-control-input" checked={ isMatomoChecked }/>
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/matomo-analytics')}`} htmlFor="settingsMatomoAnalytics">
+              <span>{matomoAnalytics}</span>
+              <a href="https://medium.com/p/66ef69e14931/" target="_blank"> Analytics in Remix IDE</a> <span>&</span> <a target="_blank" href="https://matomo.org/free-software">Matomo</a>
+            </label>
+          </div>
         </div>
       </div>
-    </div>
-  )
+    )
+  }
 
   const saveToken = () => {
     saveTokenToast(props.config, dispatchToast, tokenValue)