"Fix FlowSidebar ui loading for Maker when there is no proxy created" (…

…#3961)

* Fix FlowSidebar ui loading for Maker when there is no proxy created

* Fixed type

components/FlowSidebar.tsx

@@ -83,7 +83,6 @@ export function FlowSidebar({
   isUiDataLoading,
   step,
   useHeaderBackBtn,
-  lockUiDataLoading,
 }: CreateDPMAccountViewProps) {
   const { t } = useTranslation()
   const [dpmState, dpmSend] = useActor(internals.dpmMachine)
@@ -126,7 +125,7 @@ export function FlowSidebar({
     return <NoConnectionStateView noConnectionContent={noConnectionContent} />
   }
 
-  if (isUiDataLoading || lockUiDataLoading) {
+  if (isUiDataLoading) {
     return (
       <FlowSidebarSkeleton
         step={step}

features/refinance/controllers/RefinanceFlowSidebarController.tsx

@@ -4,6 +4,7 @@ import { getMakerIsCdpAllowed } from 'features/refinance/helpers/getMakerIsCdpAl
 import { RefinanceSidebarStep } from 'features/refinance/types'
 import { useFlowState } from 'helpers/useFlowState'
 import { zero } from 'helpers/zero'
+import { LendingProtocol } from 'lendingProtocols'
 import React from 'react'
 import { Box } from 'theme-ui'
 
@@ -16,20 +17,23 @@ export const RefinanceFlowSidebarController = () => {
     steps: { setStep, setNextStep },
   } = useRefinanceContext()
 
+  const checkingForCDPAllow = protocol === LendingProtocol.Maker
+
   const flowState = useFlowState({
     pairId,
     protocol,
     networkId: chainInfo.chainId,
     amount: zero,
     token: 'ETH',
-    lockUiDataLoading: true,
+    checkingForCDPAllow,
     // Take only proxies without CreatePosition events
     filterConsumedProxy: async (events) => events.length === 0,
     // will trigger on DPM step
     onEverythingReady: async ({ availableProxies }) => {
       // Check if owner is already dpm and use it as dpm for refinance, if not fallback to first available dpm
       const dpm =
         availableProxies.find((item) => item.address.toLowerCase() === owner) || availableProxies[0]
+      updateState('dpm', dpm)
 
       const isCdpAllowed = await getMakerIsCdpAllowed({
         positionId: positionId.id,
@@ -38,8 +42,6 @@ export const RefinanceFlowSidebarController = () => {
         allowedAddress: dpm.address,
       })
 
-      updateState('dpm', dpm)
-
       // If position owner is dpm that will be used for refinance
       // skip to refinance tx
       if (dpm.address.toLowerCase() === owner) {

helpers/useFlowState.ts

@@ -46,7 +46,7 @@ export type UseFlowStateProps = {
   token?: string
   step?: string
   useHeaderBackBtn?: boolean
-  lockUiDataLoading?: boolean
+  checkingForCDPAllow?: boolean
 }
 
 export function useFlowState({
@@ -63,7 +63,7 @@ export function useFlowState({
   token,
   step,
   useHeaderBackBtn,
-  lockUiDataLoading,
+  checkingForCDPAllow,
 }: UseFlowStateProps) {
   const [isWalletConnected, setWalletConnected] = useState<boolean>(false)
   const [asUserAction, setAsUserAction] = useState<boolean>(false)
@@ -88,7 +88,7 @@ export function useFlowState({
     token,
   )
 
-  const isProxyReady = !!availableProxies.length
+  const isProxyReady = availableProxies.length > 0
   const callbackParams = {
     availableProxies,
     walletAddress,
@@ -304,13 +304,12 @@ export function useFlowState({
     isWalletConnected,
     isAllowanceReady,
     isLoading, // just for the allowance loading state
-    isUiDataLoading,
+    isUiDataLoading: isUiDataLoading || (checkingForCDPAllow ? isProxyReady : false),
     isEverythingReady: isAllowanceReady, // just for convenience, allowance is always the last step
     asUserAction,
     onEverythingReady,
     onGoBack,
     step,
     useHeaderBackBtn,
-    lockUiDataLoading,
   }
 }