refactor: use state selectors instead of destructuring for rerender p…

…erformance
curvefi · Jan 10, 2025 · 8b11c1a · 8b11c1a
1 parent c7ad441
commit 8b11c1a
Show file tree

Hide file tree

Showing 70 changed files with 100 additions and 110 deletions.
diff --git a/apps/dao/src/components/ConnectWallet.tsx b/apps/dao/src/components/ConnectWallet.tsx
@@ -13,7 +13,7 @@ type ConnectWalletProps = {
 const ConnectWallet: React.FC<ConnectWalletProps> = ({ description, connectText, loadingText }) => {
   const updateConnectWalletStateKeys = useStore((state) => state.wallet.updateConnectWalletStateKeys)
   const connectState = useStore((state) => state.connectState)
-  const { theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
 
   const loading = isLoading(connectState)
 

diff --git a/apps/dao/src/hooks/usePageOnMount.ts b/apps/dao/src/hooks/usePageOnMount.ts
@@ -27,7 +27,7 @@ function usePageOnMount(params: Params, location: Location, navigate: NavigateFu
   const updateCurveJs = useStore((state) => state.updateCurveJs)
   const updateGlobalStoreByKey = useStore((state) => state.updateGlobalStoreByKey)
 
-  const { setLocale } = useUserProfileStore()
+  const setLocale = useUserProfileStore((state) => state.setLocale)
 
   const walletChainId = getWalletChainId(wallet)
   const walletSignerAddress = getWalletSignerAddress(wallet)

diff --git a/apps/dao/src/layout/Header.tsx b/apps/dao/src/layout/Header.tsx
@@ -30,7 +30,9 @@ export const Header = ({ sections, BannerProps }: HeaderProps) => {
   const routerProps = useStore((state) => state.routerProps)
   const updateConnectState = useStore((state) => state.updateConnectState)
 
-  const { locale, theme, setTheme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
+  const setTheme = useUserProfileStore((state) => state.setTheme)
+  const locale = useUserProfileStore((state) => state.locale)
 
   const location = useLocation()
   const { rLocalePathname } = getLocaleFromUrl()

diff --git a/apps/dao/src/layout/index.tsx b/apps/dao/src/layout/index.tsx
@@ -25,7 +25,7 @@ const BaseLayout = ({ children }: { children: React.ReactNode }) => {
   const updateConnectState = useStore((state) => state.updateConnectState)
   const updateLayoutHeight = useStore((state) => state.updateLayoutHeight)
 
-  const { locale } = useUserProfileStore()
+  const locale = useUserProfileStore((state) => state.locale)
 
   useEffect(() => {
     updateLayoutHeight('globalAlert', globalAlertHeight)

diff --git a/apps/dao/src/pages/_app.tsx b/apps/dao/src/pages/_app.tsx
@@ -46,7 +46,9 @@ function CurveApp({ Component }: AppProps) {
   const onboard = useStore((state) => state.wallet.onboard)
   const isPageVisible = useStore((state) => state.isPageVisible)
 
-  const { locale, setLocale, theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
+  const locale = useUserProfileStore((state) => state.locale)
+  const setLocale = useUserProfileStore((state) => state.setLocale)
 
   const [appLoaded, setAppLoaded] = useState(false)
 

diff --git a/apps/lend/src/components/AdvancedSettings.tsx b/apps/lend/src/components/AdvancedSettings.tsx
@@ -59,7 +59,7 @@ export const AdvancedSettings = ({ className, buttonIcon, maxSlippage }: React.P
   const overlayTriggerState = useOverlayTriggerState({})
   const isMobile = useStore((state) => state.isMobile)
 
-  const { setMaxSlippage } = useUserProfileStore()
+  const setMaxSlippage = useUserProfileStore((state) => state.setMaxSlippage)
 
   const [formValues, setFormValues] = useState(DEFAULT_FORM_VALUES)
 

diff --git a/apps/lend/src/components/ChartOhlcWrapper/index.tsx b/apps/lend/src/components/ChartOhlcWrapper/index.tsx
@@ -39,7 +39,8 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
     (state) => state.loanCollateralRemove.detailInfo[loanCollateralRemoveActiveKey]?.prices ?? null,
   )
 
-  const { isAdvancedMode, theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const isMdUp = useStore((state) => state.layout.isMdUp)
   const {

diff --git a/apps/lend/src/components/ConnectWallet.tsx b/apps/lend/src/components/ConnectWallet.tsx
@@ -17,7 +17,7 @@ const ConnectWallet: React.FC<ConnectWalletProps> = ({ description, connectText,
   const connectState = useStore((state) => state.connectState)
   const loading = isLoading(connectState)
 
-  const { theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
 
   return (
     <ConnectWalletPrompt

diff --git a/apps/lend/src/components/DetailInfoLeverageX.tsx b/apps/lend/src/components/DetailInfoLeverageX.tsx
@@ -15,7 +15,7 @@ const DetailInfoLeverageX = ({
   maxLeverage: string | undefined
   loading: boolean
 }) => {
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   return (
     <DetailInfo label={t`Leverage:`} loading={loading} loadingSkeleton={[50, 20]}>

diff --git a/apps/lend/src/components/DetailInfoLiqRange.tsx b/apps/lend/src/components/DetailInfoLiqRange.tsx
@@ -48,7 +48,7 @@ const DetailInfoLiqRange = ({
   const userDetailsResp = useStore((state) => state.user.loansDetailsMapper[userActiveKey])
   const loanPricesResp = useStore((state) => state.markets.pricesMapper[rChainId]?.[rOwmId])
 
-  const { theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
 
   const { prices: loanPrices } = loanPricesResp ?? {}
   const { prices: currPrices, bands: currBands } = userDetailsResp?.details ?? {}

diff --git a/apps/lend/src/components/DetailsMarket/components/MarketParameters.tsx b/apps/lend/src/components/DetailsMarket/components/MarketParameters.tsx
@@ -27,7 +27,7 @@ const MarketParameters = ({
   const vaultPricePerShareResp = useStore((state) => state.markets.vaultPricePerShare[rChainId]?.[rOwmId])
   const fetchVaultPricePerShare = useStore((state) => state.markets.fetchVaultPricePerShare)
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const { prices, error: pricesError } = loanPricesResp ?? {}
   const { parameters, error: parametersError } = parametersResp ?? {}

diff --git a/apps/lend/src/components/DetailsUser/components/DetailsUserLoan.tsx b/apps/lend/src/components/DetailsUser/components/DetailsUserLoan.tsx
@@ -31,7 +31,7 @@ const DetailsUserLoan = (pageProps: PageContentProps) => {
   const userLoanDetailsResp = useStore((state) => state.user.loansDetailsMapper[userActiveKey])
   const chartExpanded = useStore((state) => state.ohlcCharts.chartExpanded)
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   // TODO: handle error
   const { details: userLoanDetails } = userLoanDetailsResp ?? {}

diff --git a/apps/lend/src/components/DetailsUser/components/DetailsUserLoanChartLiquidationRange.tsx b/apps/lend/src/components/DetailsUser/components/DetailsUserLoanChartLiquidationRange.tsx
@@ -9,7 +9,7 @@ const DetailsUserLoanChartLiquidationRange = ({ rChainId, rOwmId, userActiveKey
   const loanDetailsPrices = useStore((state) => state.markets.pricesMapper[rChainId]?.[rOwmId]?.prices)
   const userLoanDetails = useStore((state) => state.user.loansDetailsMapper[userActiveKey]?.details)
 
-  const { theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
 
   const { prices: currPrices, status } = userLoanDetails ?? {}
 

diff --git a/apps/lend/src/components/PageLoanCreate/LoanFormCreate/components/DetailInfoLeverage.tsx b/apps/lend/src/components/PageLoanCreate/LoanFormCreate/components/DetailInfoLeverage.tsx
@@ -45,10 +45,8 @@ const DetailInfoLeverage = ({
   const isEditLiqRange = useStore((state) => state.loanCreate.isEditLiqRange)
   const liqRanges = useStore((state) => state.loanCreate.liqRanges[activeKeyLiqRange])
 
-  const {
-    isAdvancedMode,
-    maxSlippage: { global: maxSlippage },
-  } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
+  const maxSlippage = useUserProfileStore((state) => state.maxSlippage.global)
 
   const { signerAddress } = api ?? {}
   const { minBands, maxBands, borrowed_token, collateral_token } = market ?? {}

diff --git a/apps/lend/src/components/PageLoanCreate/LoanFormCreate/components/DetailInfoNonLeverage.tsx b/apps/lend/src/components/PageLoanCreate/LoanFormCreate/components/DetailInfoNonLeverage.tsx
@@ -36,7 +36,7 @@ const DetailInfoNonLeverage = ({
   const isEditLiqRange = useStore((state) => state.loanCreate.isEditLiqRange)
   const liqRanges = useStore((state) => state.loanCreate.liqRanges[activeKeyLiqRange])
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const { signerAddress } = api ?? {}
   const { borrowed_token, collateral_token } = market ?? {}

diff --git a/apps/lend/src/components/PageLoanCreate/LoanFormCreate/index.tsx b/apps/lend/src/components/PageLoanCreate/LoanFormCreate/index.tsx
@@ -63,11 +63,8 @@ const LoanCreate = ({ isLeverage = false, ...pageProps }: PageContentProps & { i
   const setFormValues = useStore((state) => state.loanCreate.setFormValues)
   const resetState = useStore((state) => state.loanCreate.resetState)
 
-  const {
-    isAdvancedMode,
-    theme,
-    maxSlippage: { global: maxSlippage },
-  } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
+  const maxSlippage = useUserProfileStore((state) => state.maxSlippage.global)
 
   const [{ isConfirming, confirmedWarning }, setConfirmWarning] = useState(DEFAULT_CONFIRM_WARNING)
   const [healthMode, setHealthMode] = useState(DEFAULT_HEALTH_MODE)

diff --git a/apps/lend/src/components/PageLoanCreate/Page.tsx b/apps/lend/src/components/PageLoanCreate/Page.tsx
@@ -56,7 +56,7 @@ const Page: NextPage = () => {
   const { chartExpanded, setChartExpanded } = useStore((state) => state.ohlcCharts)
   const provider = useStore((state) => state.wallet.getProvider(''))
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const [isLoaded, setLoaded] = useState(false)
   const [initialLoaded, setInitialLoaded] = useState(false)

diff --git a/apps/lend/src/components/PageLoanManage/LoanBorrowMore/components/DetailInfo.tsx b/apps/lend/src/components/PageLoanManage/LoanBorrowMore/components/DetailInfo.tsx
@@ -29,7 +29,7 @@ const DetailInfo = ({
   const formEstGas = useStore((state) => state.loanBorrowMore.formEstGas[activeKey])
   const formValues = useStore((state) => state.loanBorrowMore.formValues)
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const { signerAddress } = api ?? {}
 

diff --git a/apps/lend/src/components/PageLoanManage/LoanBorrowMore/components/DetailInfoLeverage.tsx b/apps/lend/src/components/PageLoanManage/LoanBorrowMore/components/DetailInfoLeverage.tsx
@@ -40,10 +40,8 @@ const DetailInfoLeverage = ({
   const formEstGas = useStore((state) => state.loanBorrowMore.formEstGas[activeKey])
   const formValues = useStore((state) => state.loanBorrowMore.formValues)
 
-  const {
-    isAdvancedMode,
-    maxSlippage: { global: maxSlippage },
-  } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
+  const maxSlippage = useUserProfileStore((state) => state.maxSlippage.global)
 
   const { signerAddress } = api ?? {}
   const { expectedCollateral, routeImage } = detailInfo ?? {}

diff --git a/apps/lend/src/components/PageLoanManage/LoanBorrowMore/index.tsx b/apps/lend/src/components/PageLoanManage/LoanBorrowMore/index.tsx
@@ -62,9 +62,7 @@ const LoanBorrowMore = ({
   const setFormValues = useStore((state) => state.loanBorrowMore.setFormValues)
   const resetState = useStore((state) => state.loanBorrowMore.resetState)
 
-  const {
-    maxSlippage: { global: maxSlippage },
-  } = useUserProfileStore()
+  const maxSlippage = useUserProfileStore((state) => state.maxSlippage.global)
 
   const [{ isConfirming, confirmedWarning }, setConfirmWarning] = useState(DEFAULT_CONFIRM_WARNING)
   const [healthMode, setHealthMode] = useState(DEFAULT_HEALTH_MODE)

diff --git a/apps/lend/src/components/PageLoanManage/LoanCollateralAdd/index.tsx b/apps/lend/src/components/PageLoanManage/LoanCollateralAdd/index.tsx
@@ -47,7 +47,7 @@ const LoanCollateralAdd = ({ rChainId, rOwmId, api, isLoaded, market, userActive
   const setFormValues = useStore((state) => state.loanCollateralAdd.setFormValues)
   const resetState = useStore((state) => state.loanCollateralAdd.resetState)
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const [healthMode, setHealthMode] = useState(DEFAULT_HEALTH_MODE)
   const [steps, setSteps] = useState<Step[]>([])

diff --git a/apps/lend/src/components/PageLoanManage/LoanCollateralRemove/index.tsx b/apps/lend/src/components/PageLoanManage/LoanCollateralRemove/index.tsx
@@ -48,7 +48,7 @@ const LoanCollateralRemove = ({ rChainId, rOwmId, isLoaded, api, market, userAct
   const setFormValues = useStore((state) => state.loanCollateralRemove.setFormValues)
   const resetState = useStore((state) => state.loanCollateralRemove.resetState)
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const [{ confirmedWarning }, setConfirmWarning] = useState(DEFAULT_CONFIRM_WARNING)
   const [healthMode, setHealthMode] = useState(DEFAULT_HEALTH_MODE)

diff --git a/apps/lend/src/components/PageLoanManage/LoanRepay/components/DetailInfo.tsx b/apps/lend/src/components/PageLoanManage/LoanRepay/components/DetailInfo.tsx
@@ -37,10 +37,8 @@ const DetailInfo = ({
   const formEstGas = useStore((state) => state.loanRepay.formEstGas[activeKey])
   const formValues = useStore((state) => state.loanRepay.formValues)
 
-  const {
-    isAdvancedMode,
-    maxSlippage: { global: maxSlippage },
-  } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
+  const maxSlippage = useUserProfileStore((state) => state.maxSlippage.global)
 
   const detailInfo = detailInfoNonLeverage ?? detailInfoLeverage
 

diff --git a/apps/lend/src/components/PageLoanManage/LoanRepay/index.tsx b/apps/lend/src/components/PageLoanManage/LoanRepay/index.tsx
@@ -57,9 +57,7 @@ const LoanRepay = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: P
   const setFormValues = useStore((state) => state.loanRepay.setFormValues)
   const resetState = useStore((state) => state.loanRepay.resetState)
 
-  const {
-    maxSlippage: { global: maxSlippage },
-  } = useUserProfileStore()
+  const maxSlippage = useUserProfileStore((state) => state.maxSlippage.global)
 
   const [{ isConfirming, confirmedWarning }, setConfirmWarning] = useState(DEFAULT_CONFIRM_WARNING)
   const [healthMode, setHealthMode] = useState(DEFAULT_HEALTH_MODE)

diff --git a/apps/lend/src/components/PageLoanManage/LoanSelfLiquidation/index.tsx b/apps/lend/src/components/PageLoanManage/LoanSelfLiquidation/index.tsx
@@ -49,9 +49,7 @@ const LoanSelfLiquidation = ({ rChainId, rOwmId, isLoaded, api, market, userActi
   const notifyNotification = useStore((state) => state.wallet.notifyNotification)
   const resetState = useStore((state) => state.loanSelfLiquidation.resetState)
 
-  const {
-    maxSlippage: { global: maxSlippage },
-  } = useUserProfileStore()
+  const maxSlippage = useUserProfileStore((state) => state.maxSlippage.global)
 
   const [steps, setSteps] = useState<Step[]>([])
   const [txInfoBar, setTxInfoBar] = useState<React.ReactNode | null>(null)

diff --git a/apps/lend/src/components/PageLoanManage/Page.tsx b/apps/lend/src/components/PageLoanManage/Page.tsx
@@ -64,7 +64,7 @@ const Page: NextPage = () => {
   const { chartExpanded, setChartExpanded } = useStore((state) => state.ohlcCharts)
   const provider = useStore((state) => state.wallet.getProvider(''))
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const { signerAddress } = api ?? {}
   const { borrowed_token, collateral_token } = market ?? {}

diff --git a/apps/lend/src/components/PageMarketList/index.tsx b/apps/lend/src/components/PageMarketList/index.tsx
@@ -31,7 +31,7 @@ const MarketList = (pageProps: PageMarketList) => {
   const setFormValues = useStore((state) => state.marketList.setFormValues)
   const { initCampaignRewards, initiated } = useStore((state) => state.campaigns)
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const { signerAddress } = api ?? {}
 

diff --git a/apps/lend/src/components/PageVault/Page.tsx b/apps/lend/src/components/PageVault/Page.tsx
@@ -54,7 +54,7 @@ const Page: NextPage = () => {
   const setMarketsStateKey = useStore((state) => state.markets.setStateByKey)
   const provider = useStore((state) => state.wallet.getProvider(''))
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const { signerAddress } = api ?? {}
   const { borrowed_token } = market ?? {}

diff --git a/apps/lend/src/components/SharedCellData/CellTotalCollateralValue.tsx b/apps/lend/src/components/SharedCellData/CellTotalCollateralValue.tsx
@@ -13,7 +13,7 @@ const CellTotalCollateralValue = ({ rChainId, rOwmId }: { rChainId: ChainId; rOw
   const totalCollateralValue = useStore((state) => state.markets.totalCollateralValuesMapper[rChainId]?.[rOwmId])
   const fetchTotalCollateralValue = useStore((state) => state.markets.fetchTotalCollateralValue)
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const { total = null, tooltipContent = [], error } = totalCollateralValue ?? {}
 

diff --git a/apps/lend/src/hooks/usePageOnMount.ts b/apps/lend/src/hooks/usePageOnMount.ts
@@ -34,7 +34,7 @@ function usePageOnMount(params: Params, location: Location, navigate: NavigateFu
   const updateProvider = useStore((state) => state.wallet.updateProvider)
   const updateGlobalStoreByKey = useStore((state) => state.updateGlobalStoreByKey)
 
-  const { setLocale } = useUserProfileStore()
+  const setLocale = useUserProfileStore((state) => state.setLocale)
 
   const walletChainId = getWalletChainId(wallet)
   const walletSignerAddress = getWalletSignerAddress(wallet)

diff --git a/apps/lend/src/layout/Header.tsx b/apps/lend/src/layout/Header.tsx
@@ -34,7 +34,11 @@ const Header = ({ chainId, sections, BannerProps }: HeaderProps) => {
   const isMdUp = useMediaQuery(isMdUpQuery, { noSsr: true })
   const { data: tvl } = useTvl(chainId)
 
-  const { locale, isAdvancedMode, setAdvancedMode, theme, setTheme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
+  const setTheme = useUserProfileStore((state) => state.setTheme)
+  const locale = useUserProfileStore((state) => state.locale)
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
+  const setAdvancedMode = useUserProfileStore((state) => state.setAdvancedMode)
 
   const location = useLocation()
   const { params: routerParams } = routerProps ?? {}

diff --git a/apps/lend/src/layout/index.tsx b/apps/lend/src/layout/index.tsx
@@ -26,7 +26,7 @@ const BaseLayout = ({ children }: { children: React.ReactNode }) => {
   const setLayoutHeight = useStore((state) => state.layout.setLayoutHeight)
   const updateConnectState = useStore((state) => state.updateConnectState)
 
-  const { locale } = useUserProfileStore()
+  const locale = useUserProfileStore((state) => state.locale)
 
   const [networkSwitch, setNetworkSwitch] = useState('')
 

diff --git a/apps/lend/src/pages/_app.tsx b/apps/lend/src/pages/_app.tsx
@@ -33,7 +33,8 @@ function CurveApp({ Component }: AppProps) {
   const updateGlobalStoreByKey = useStore((state) => state.updateGlobalStoreByKey)
   const updateWalletStateByKey = useStore((state) => state.wallet.setStateByKey)
 
-  const { locale, theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
+  const locale = useUserProfileStore((state) => state.locale)
 
   const [appLoaded, setAppLoaded] = useState(false)
 

diff --git a/apps/loan/src/components/AdvancedSettings.tsx b/apps/loan/src/components/AdvancedSettings.tsx
@@ -59,7 +59,7 @@ export const AdvancedSettings = ({ className, buttonIcon, maxSlippage }: React.P
   const overlayTriggerState = useOverlayTriggerState({})
   const isMobile = useStore((state) => state.isMobile)
 
-  const { setMaxSlippage } = useUserProfileStore()
+  const setMaxSlippage = useUserProfileStore((state) => state.setMaxSlippage)
 
   const [formValues, setFormValues] = useState(DEFAULT_FORM_VALUES)
 

diff --git a/apps/loan/src/components/ChartOhlcWrapper/index.tsx b/apps/loan/src/components/ChartOhlcWrapper/index.tsx
@@ -35,7 +35,8 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, llamma, l
     (state) => state.loanCollateralDecrease.detailInfo[collateralDecreaseActiveKey]?.prices ?? null,
   )
 
-  const { isAdvancedMode, theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const isMdUp = useStore((state) => state.layout.isMdUp)
   const {

diff --git a/apps/loan/src/components/ConnectWallet.tsx b/apps/loan/src/components/ConnectWallet.tsx
@@ -17,7 +17,7 @@ const ConnectWallet: React.FC<ConnectWalletProps> = ({ description, connectText,
   const connectState = useStore((state) => state.connectState)
   const loading = isLoading(connectState)
 
-  const { theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
 
   return (
     <ConnectWalletPrompt

diff --git a/apps/loan/src/components/DetailInfoLiqRange.tsx b/apps/loan/src/components/DetailInfoLiqRange.tsx
@@ -40,7 +40,7 @@ const DetailInfoLiqRange = ({
   userLoanDetails: UserLoanDetails | undefined
   handleLiqRangesEdit?: () => void
 }) => {
-  const { theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
 
   const { userPrices: currPrices, userBands: currBands } = userLoanDetails ?? {}
 

diff --git a/apps/loan/src/components/LoanInfoLlamma/index.tsx b/apps/loan/src/components/LoanInfoLlamma/index.tsx
@@ -23,7 +23,7 @@ const LoanInfoLlamma = (props: Props) => {
   const { rChainId, llamma, llammaId } = props
   const chartExpanded = useStore((state) => state.ohlcCharts.chartExpanded)
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   return (
     <Wrapper>

diff --git a/apps/loan/src/components/LoanInfoUser/components/ChartUserLiquidationRange.tsx b/apps/loan/src/components/LoanInfoUser/components/ChartUserLiquidationRange.tsx
@@ -9,7 +9,7 @@ const ChartUserLiquidationRange = ({ healthMode, llammaId }: { healthMode: Healt
   const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
   const userLoanDetails = useStore((state) => state.loans.userDetailsMapper[llammaId])
 
-  const { theme } = useUserProfileStore()
+  const theme = useUserProfileStore((state) => state.theme)
 
   const { userPrices: currPrices } = userLoanDetails ?? {}
 

diff --git a/apps/loan/src/components/LoanInfoUser/components/UserInfos.tsx b/apps/loan/src/components/LoanInfoUser/components/UserInfos.tsx
@@ -30,7 +30,7 @@ const UserInfos = ({
 }) => {
   const userLoanDetails = useStore((state) => state.loans.userDetailsMapper[llammaId])
 
-  const { isAdvancedMode } = useUserProfileStore()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
 
   const {
     coins: [stablecoin],