diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index d31239d46fe57893efff5e85f9ab195916983dec..6cb7877b4a96217d05f9e48d0e1d456f81d5809a 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -1,14 +1,13 @@
-import React, { useState, useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppStore } from 'store'
 import { ScaleBand, ScaleLinear } from 'd3-scale'
-import { DateTime } from 'luxon'
 import { detect } from 'detect-browser'
-
 import { FluidType } from 'enum/fluid.enum'
 import { TimeStep } from 'enum/timeStep.enum'
+import { DateTime } from 'luxon'
 import { Dataload } from 'models'
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import DateChartService from 'services/dateChart.service'
+import { AppStore } from 'store'
 import {
   setCurrentDatachartIndex,
   setSelectedDate,
@@ -192,10 +191,7 @@ const Bar = ({
           />
         </g>
       )}
-      {height > 0 &&
-      dataload.value &&
-      dataload.value >= 0 &&
-      isMultiMissingFluid ? (
+      {height > 0 && dataload.value >= 0 && isMultiMissingFluid ? (
         <g
           transform={`translate(${xScaleValue}, ${yScaleValue})`}
           fill="#00000"
@@ -286,38 +282,35 @@ const Bar = ({
         )
       )}
 
-      {showCompare &&
-        compareDataload &&
-        compareDataload.value &&
-        compareDataload.value >= 0 && (
-          <g transform={`translate(${xScaleValue}, ${yScaleCompareValue})`}>
-            <defs>
-              <linearGradient
-                id="gradient-compare"
-                className={compareBarClass}
-                x1="0"
-                x2="0"
-                y1="0"
-                y2="1"
-              >
-                <stop id="stop-compare-color-1" offset="0%" />
-                <stop id="stop-compare-color-2" offset="100%" />
-              </linearGradient>
-            </defs>
-            <path
-              d={topRoundedRect(
-                0,
-                0,
-                getBandWidth(),
-                height - yScaleCompareValue
-              )}
-              fill="url(#gradient-compare)"
+      {showCompare && compareDataload && compareDataload.value >= 0 && (
+        <g transform={`translate(${xScaleValue}, ${yScaleCompareValue})`}>
+          <defs>
+            <linearGradient
+              id="gradient-compare"
               className={compareBarClass}
-              onClick={handleClick}
-              onAnimationEnd={onCompareAnimationEnd}
-            />
-          </g>
-        )}
+              x1="0"
+              x2="0"
+              y1="0"
+              y2="1"
+            >
+              <stop id="stop-compare-color-1" offset="0%" />
+              <stop id="stop-compare-color-2" offset="100%" />
+            </linearGradient>
+          </defs>
+          <path
+            d={topRoundedRect(
+              0,
+              0,
+              getBandWidth(),
+              height - yScaleCompareValue
+            )}
+            fill="url(#gradient-compare)"
+            className={compareBarClass}
+            onClick={handleClick}
+            onAnimationEnd={onCompareAnimationEnd}
+          />
+        </g>
+      )}
     </g>
   )
 }
diff --git a/src/components/Hooks/userInstanceSettings.tsx b/src/components/Hooks/useUserInstanceSettings.tsx
similarity index 80%
rename from src/components/Hooks/userInstanceSettings.tsx
rename to src/components/Hooks/useUserInstanceSettings.tsx
index 4abb7bcf1d1d73f9c3f7549628f4cdebb3223f78..00390b76c4a118c2f33820c0fd8755e923f9f4d1 100644
--- a/src/components/Hooks/userInstanceSettings.tsx
+++ b/src/components/Hooks/useUserInstanceSettings.tsx
@@ -1,11 +1,9 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-// TODO remove the disable and transform it to hooks
 import { useState, useEffect } from 'react'
 import get from 'lodash/get'
 import { useClient } from 'cozy-client'
 import { UserInstanceSettings, UserInstanceSettingsAttributes } from 'models'
 
-const userInstanceSettings = (): UserInstanceSettings => {
+const useUserInstanceSettings = (): UserInstanceSettings => {
   const client = useClient()
   const [settings, setSettings] = useState<UserInstanceSettingsAttributes>({
     public_name: '',
@@ -33,4 +31,4 @@ const userInstanceSettings = (): UserInstanceSettings => {
   }
 }
 
-export default userInstanceSettings
+export default useUserInstanceSettings
diff --git a/src/components/Onboarding/WelcomeModal.spec.tsx b/src/components/Onboarding/WelcomeModal.spec.tsx
index 7b5ac1ddb016e327f90442c446d15c3f1e2dc899..1d6e8a48b841ffaec6a2df04b4bf91eeb0fdc3c7 100644
--- a/src/components/Onboarding/WelcomeModal.spec.tsx
+++ b/src/components/Onboarding/WelcomeModal.spec.tsx
@@ -23,7 +23,7 @@ jest.mock('cozy-client', () => {
     useClient: jest.fn(() => mockClient),
   }
 })
-jest.mock('components/Hooks/userInstanceSettings', () => {
+jest.mock('components/Hooks/useUserInstanceSettings', () => {
   return jest.fn(() => ({
     data: {
       // eslint-disable-next-line camelcase
diff --git a/src/components/Onboarding/WelcomeModal.tsx b/src/components/Onboarding/WelcomeModal.tsx
index 8db78b491ef92dd9f2c9ce847426e075902e0bf7..44dcbdd575a79c718859f12b91af94db9bff2748 100644
--- a/src/components/Onboarding/WelcomeModal.tsx
+++ b/src/components/Onboarding/WelcomeModal.tsx
@@ -1,16 +1,17 @@
+import { Button, Dialog, IconButton } from '@material-ui/core'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import PartnersConsentIcon from 'assets/icons/visu/onboarding/partners_consent.svg'
+import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import React, { useCallback } from 'react'
-import './welcomeModal.scss'
 import { useDispatch } from 'react-redux'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useClient } from 'cozy-client'
-import { Button, Dialog, IconButton } from '@material-ui/core'
-import userInstanceSettings from 'components/Hooks/userInstanceSettings'
 import EnvironmentService from 'services/environment.service'
 import MailService from 'services/mail.service'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import PartnersConsentIcon from 'assets/icons/visu/onboarding/partners_consent.svg'
 import { updateProfile } from 'store/profile/profile.actions'
+import './welcomeModal.scss'
+
 const welcomeTemplate = require('notifications/welcome.hbs')
 const mjml2html = require('mjml-browser')
 
@@ -22,7 +23,7 @@ const WelcomeModal = ({ open }: WelcomeModalProps) => {
   const { t } = useI18n()
   const client = useClient()
   const dispatch = useDispatch()
-  const { data: instanceSettings } = userInstanceSettings()
+  const { data: instanceSettings } = useUserInstanceSettings()
 
   const setWelcomeModalViewed = useCallback(async () => {
     const mailService = new MailService()