Delay GetEpoch request until needed

.changelog/2064.internal.md

@@ -0,0 +1 @@
+Delay GetEpoch request until needed

src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap

@@ -316,14 +316,16 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
           >
             <span
               class="c5"
-            />
+            >
+              TEST
+            </span>
           </div>
           <input
             autocomplete="off"
             class="c6"
             data-testid="amount"
             id="amount-id"
-            min="0"
+            min="100"
             name="amount"
             placeholder="common.amount"
             required=""
@@ -356,7 +358,7 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
                   class="notranslate"
                   translate="no"
                 >
-
+                   TEST
                 </span>
               </span>
             </span>

src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap

@@ -435,7 +435,9 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
           >
             <span
               class="c5"
-            />
+            >
+              TEST
+            </span>
           </div>
           <input
             autocomplete="off"
@@ -476,7 +478,7 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
                   class="notranslate"
                   translate="no"
                 >
-
+                   TEST
                 </span>
               </span>
             </span>

src/app/components/TimeToEpoch/__tests__/index.test.tsx

@@ -1,34 +1,16 @@
-import * as React from 'react'
 import { render } from '@testing-library/react'
-import { Provider } from 'react-redux'
-import { configureAppStore } from 'store/configureStore'
-import { NetworkState } from 'app/state/network/types'
 
 import { TimeToEpoch } from '..'
 
-const renderComponent = (store: any, epoch: number) =>
-  render(
-    <Provider store={store}>
-      <TimeToEpoch epoch={epoch} />
-    </Provider>,
-  )
+const renderComponent = (currentEpoch: number, epoch: number) =>
+  render(<TimeToEpoch currentEpoch={currentEpoch} epoch={epoch} />)
 
 describe('<TimeToEpoch />', () => {
-  let store: ReturnType<typeof configureAppStore>
-
-  beforeEach(() => {
-    store = configureAppStore({
-      network: {
-        epoch: 10000,
-      } as NetworkState,
-    })
-  })
-
   it('should estimate debonding times', () => {
-    expect(renderComponent(store, 10336).container.textContent).toEqual('in 14 days')
-    expect(renderComponent(store, 10306).container.textContent).toEqual('in 13 days')
-    expect(renderComponent(store, 10086).container.textContent).toEqual('in 4 days')
-    expect(renderComponent(store, 10047).container.textContent).toEqual('in 47 hours')
-    expect(renderComponent(store, 10001).container.textContent).toEqual('in 1 hour')
+    expect(renderComponent(10000, 10336).container.textContent).toEqual('in 14 days')
+    expect(renderComponent(10000, 10306).container.textContent).toEqual('in 13 days')
+    expect(renderComponent(10000, 10086).container.textContent).toEqual('in 4 days')
+    expect(renderComponent(10000, 10047).container.textContent).toEqual('in 47 hours')
+    expect(renderComponent(10000, 10001).container.textContent).toEqual('in 1 hour')
   })
 })

src/app/components/TimeToEpoch/index.tsx

@@ -1,8 +1,7 @@
-import { selectEpoch } from 'app/state/network/selectors'
-import { useSelector } from 'react-redux'
 import * as React from 'react'
 
 interface Props {
+  currentEpoch?: number
   epoch: number
 }
 
@@ -11,8 +10,10 @@ const estimatedEpochsPerHour = 1
 const relativeFormat = new Intl.RelativeTimeFormat(process?.env?.NODE_ENV === 'test' ? 'en-US' : undefined)
 
 export function TimeToEpoch(props: Props) {
-  const currentEpoch = useSelector(selectEpoch)
-  const remainingHours = (props.epoch - currentEpoch) / estimatedEpochsPerHour
+  if (!props.currentEpoch) {
+    return null
+  }
+  const remainingHours = (props.epoch - props.currentEpoch) / estimatedEpochsPerHour
 
   // TODO: add more thresholds if used for other than debonding
   const formattedRemainingTime =

src/app/components/Toolbar/Features/Account/__tests__/__snapshots__/Account.test.tsx.snap

@@ -531,7 +531,7 @@ exports[`<Account  /> should match snapshot 1`] = `
                     class="notranslate"
                     translate="no"
                   >
-
+                     TEST
                   </span>
                 </span>
               </span>

src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap

@@ -750,7 +750,7 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
                         class="notranslate"
                         translate="no"
                       >
-
+                         TEST
                       </span>
                     </span>
                   </span>

src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap

@@ -966,7 +966,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                     class="notranslate"
                     translate="no"
                   >
-
+                     TEST
                   </span>
                 </span>
               </span>
@@ -989,7 +989,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                     class="notranslate"
                     translate="no"
                   >
-
+                     TEST
                   </span>
                 </span>
               </span>
@@ -1013,7 +1013,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                     class="notranslate"
                     translate="no"
                   >
-
+                     TEST
                   </span>
                 </span>
               </span>
@@ -1036,7 +1036,7 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                     class="notranslate"
                     translate="no"
                   >
-
+                     TEST
                   </span>
                 </span>
               </span>
@@ -1123,7 +1123,9 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                       >
                         <span
                           class="c15"
-                        />
+                        >
+                          TEST
+                        </span>
                       </div>
                       <input
                         autocomplete="off"
@@ -1185,4 +1187,4 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
 </div>
 `;
 
-exports[`<AccountPage  /> with missing delegations 1`] = `"Total-Available100.0  Staked-Debonding-"`;
+exports[`<AccountPage  /> with missing delegations 1`] = `"Total-Available100.0 TEST Staked-Debonding-"`;

src/app/pages/OpenWalletPage/Features/FromMnemonic/__tests__/index.test.tsx

@@ -7,6 +7,12 @@ import { Provider } from 'react-redux'
 import { ThemeProvider } from 'styles/theme/ThemeProvider'
 import { FromMnemonic } from '..'
 
+const mockDispatch = jest.fn()
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+}))
+
 const renderPage = (store: any) =>
   render(
     <Provider store={store}>
@@ -58,14 +64,17 @@ describe('<FromMnemonic/>', () => {
     expect(errorElem).toBeNull()
   })
 
-  it('should display account selection modal window', async () => {
+  it('should call the success handler and dispatch Redux action', async () => {
     renderPage(store)
     const textbox = screen.getByRole('textbox') as HTMLInputElement
     const button = screen.getByRole('button', { name: 'openWallet.mnemonic.import' })
 
     await userEvent.type(textbox, 'echo toward hold roast rather reduce cute civil equal whale wait conduct')
     await userEvent.click(button)
 
-    expect(await screen.findByText('openWallet.importAccounts.selectWallets')).toBeInTheDocument()
+    expect(mockDispatch).toHaveBeenCalledWith({
+      payload: 'echo toward hold roast rather reduce cute civil equal whale wait conduct',
+      type: 'importAccounts/enumerateAccountsFromMnemonic',
+    })
   })
 })

src/app/pages/StakingPage/Features/CommissionBounds/__tests__/index.test.tsx

@@ -21,7 +21,11 @@ describe('<CommissionBounds  />', () => {
   let store: ReturnType<typeof configureAppStore>
 
   beforeEach(() => {
-    store = configureAppStore()
+    store = configureAppStore({
+      network: {
+        epoch: 0,
+      } as NetworkState,
+    })
   })
 
   it('should match snapshot when empty', () => {
@@ -43,7 +47,7 @@ describe('<CommissionBounds  />', () => {
     store = configureAppStore()
     const component = renderComponent(store, [{ epochStart: 0, lower: 0.1, upper: 0.2, epochEnd: 100 }])
     act(() => {
-      store.dispatch(networkActions.networkSelected({ epoch: 50 } as NetworkState))
+      store.dispatch(networkActions.setEpoch(50))
     })
     expect(component.baseElement).toMatchSnapshot()
   })

src/app/pages/StakingPage/Features/CommissionBounds/index.tsx

@@ -14,7 +14,9 @@ interface CommissionBoundProps {
 const CommissionBound = memo((props: CommissionBoundProps) => {
   const { t } = useTranslation()
   const epoch = useSelector(selectEpoch)
-
+  if (typeof epoch !== 'number') {
+    return null
+  }
   const bound = props.bound
   const isCurrentBounds = epoch > bound.epochStart && (!bound.epochEnd || epoch < bound.epochEnd)
 

src/app/pages/StakingPage/Features/DelegationList/DebondingDelegationList.tsx

@@ -1,18 +1,28 @@
+import { useEffect } from 'react'
 import { selectDebondingDelegations } from 'app/state/staking/selectors'
 import { Box } from 'grommet/es6/components/Box'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { DelegationList } from '.'
 import { StakeSubnavigation } from '../../../AccountPage/Features/StakeSubnavigation'
+import { networkActions } from '../../../../../app/state/network'
+import { selectEpoch } from '../../../../../app/state/network/selectors'
 
 export const DebondingDelegationList = () => {
+  const dispatch = useDispatch()
   const delegations = useSelector(selectDebondingDelegations)
+  const currentEpoch = useSelector(selectEpoch)
+
+  useEffect(() => {
+    dispatch(networkActions.getEpoch())
+  }, [dispatch, currentEpoch])
+
   return (
     <>
       <StakeSubnavigation />
       <Box as="section" data-testid="debonding-delegations">
         <Box pad="medium" background="background-front">
-          <DelegationList type="debonding" delegations={delegations ?? []} />
+          <DelegationList currentEpoch={currentEpoch} type="debonding" delegations={delegations ?? []} />
         </Box>
       </Box>
     </>

src/app/pages/StakingPage/Features/DelegationList/__tests__/DebondingDelegationList.test.tsx

@@ -7,6 +7,7 @@ import { Provider } from 'react-redux'
 import { DebondingDelegationList } from '../DebondingDelegationList'
 import { configureAppStore } from 'store/configureStore'
 import { stakingActions } from 'app/state/staking'
+import { NetworkState } from '../../../../../../app/state/network/types'
 import { ThemeProvider } from '../../../../../../styles/theme/ThemeProvider'
 import { MemoryRouter } from 'react-router-dom'
 
@@ -25,7 +26,12 @@ describe('<DebondingDelegationList  />', () => {
   let store: ReturnType<typeof configureAppStore>
 
   beforeEach(() => {
-    store = configureAppStore()
+    store = configureAppStore({
+      network: {
+        ticker: 'TEST',
+        epoch: 4,
+      } as NetworkState,
+    })
   })
 
   it('should match snapshot', () => {

src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap

@@ -608,7 +608,7 @@ exports[`<ActiveDelegationList  /> should match snapshot 1`] = `
                         class="notranslate"
                         translate="no"
                       >
-
+                         TEST
                       </span>
                     </span>
                   </span>

src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap

@@ -594,7 +594,7 @@ exports[`<DebondingDelegationList  /> should match snapshot 1`] = `
                         class="notranslate"
                         translate="no"
                       >
-
+                         TEST
                       </span>
                     </span>
                   </span>

src/app/pages/StakingPage/Features/DelegationList/index.tsx

@@ -30,6 +30,7 @@ type Props =
     }
   | {
       type: 'debonding'
+      currentEpoch?: number
       delegations: DebondingDelegation[]
     }
 
@@ -141,7 +142,13 @@ export const DelegationList = memo((props: Props) => {
       id: 'debondingTimeEnd',
       selector: 'epoch',
       sortable: true,
-      cell: datum => <TimeToEpoch epoch={(datum as DebondingDelegation).epoch} />,
+      cell: datum => {
+        if ('currentEpoch' in props) {
+          return (
+            <TimeToEpoch currentEpoch={props.currentEpoch} epoch={(datum as DebondingDelegation).epoch} />
+          )
+        }
+      },
     },
   }
 

src/app/state/network/index.ts

@@ -17,16 +17,24 @@ export const networkSlice = createSlice({
     initializeNetwork() {},
     selectNetwork(state, action: PayloadAction<NetworkType>) {
       state.chainContext = initialState.chainContext
+      state.epoch = initialState.epoch
     },
     initialNetworkSelected(state, action: PayloadAction<NetworkState>) {
       Object.assign(state, action.payload)
     },
     networkSelected(state, action: PayloadAction<NetworkState>) {
-      Object.assign(state, action.payload, { chainContext: initialState.chainContext })
+      Object.assign(state, action.payload, {
+        chainContext: initialState.chainContext,
+        epoch: initialState.epoch,
+      })
     },
     setChainContext(state, action: PayloadAction<string>) {
       state.chainContext = action.payload
     },
+    setEpoch(state, action: PayloadAction<number>) {
+      state.epoch = action.payload
+    },
+    getEpoch(state) {},
   },
 })