🧏 Onboarding wallet selection without RPC connection (Joystream#3886)

* Change provider logic * Adapt onboarding components to the new logic * Test fix
traumschule · Nov 29, 2022 · ce3cdba · ce3cdba
1 parent 46eb6c5
commit ce3cdba
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 9 deletions.
diff --git a/packages/ui/src/app/components/OnboardingOverlay/OnBoardingOverlay.tsx b/packages/ui/src/app/components/OnboardingOverlay/OnBoardingOverlay.tsx
@@ -3,6 +3,7 @@ import React, { useCallback } from 'react'
 import styled from 'styled-components'
 
 import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
+import { useApi } from '@/api/hooks/useApi'
 import { BenefitsTable } from '@/app/components/OnboardingOverlay/components/BenefitsTable'
 import { DrawerContainer } from '@/app/components/OnboardingOverlay/components/DrawerContainer'
 import { ButtonPrimary } from '@/common/components/buttons'
@@ -73,6 +74,7 @@ export const asOnBoardingSteps = (steps: StepperStep[], status: OnBoardingStatus
 }
 
 export const OnBoardingOverlay = () => {
+  const { api } = useApi()
   const { showModal } = useModal()
   const { wallet } = useMyAccounts()
   const [selectedWallet] = useLocalStorage<Wallet | undefined>('recentWallet')
@@ -84,7 +86,7 @@ export const OnBoardingOverlay = () => {
     showModal({ modal: 'OnBoardingModal' })
   }, [wallet, selectedWallet])
 
-  if (isLoading || !status || status === 'finished') {
+  if (isLoading || !status || status === 'finished' || !api?.isConnected) {
     return null
   }
 

diff --git a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingAccount.tsx b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingAccount.tsx
@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react'
 
 import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
+import { useApi } from '@/api/hooks/useApi'
 import { Loading } from '@/common/components/Loading'
 import { NoAccountStep } from '@/common/modals/OnBoardingModal/components/NoAccountStep'
+import { NoNodeConnection } from '@/common/modals/OnBoardingModal/components/NoNodeConnection'
 import { SelectAccountStep } from '@/common/modals/OnBoardingModal/components/SelectAccountStep'
 
 interface Props {
@@ -11,14 +13,19 @@ interface Props {
 
 export const OnBoardingAccount = ({ onAccountSelect }: Props) => {
   const { hasAccounts, isLoading } = useMyAccounts()
+  const { api } = useApi()
 
   const step = useMemo(() => {
+    if (!api?.isConnected) {
+      return <NoNodeConnection />
+    }
+
     if (!hasAccounts) {
       return <NoAccountStep />
     }
 
     return <SelectAccountStep onAccountSelect={onAccountSelect} />
-  }, [hasAccounts])
+  }, [hasAccounts, api?.isConnected])
 
   if (isLoading) {
     return <Loading />

diff --git a/packages/ui/src/common/modals/OnBoardingModal/components/NoNodeConnection.tsx b/packages/ui/src/common/modals/OnBoardingModal/components/NoNodeConnection.tsx
@@ -0,0 +1,37 @@
+import { styled } from '@storybook/theming'
+import React from 'react'
+
+import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
+import { ButtonPrimary } from '@/common/components/buttons'
+import { ScrolledModalBody } from '@/common/components/Modal'
+import { TextHuge } from '@/common/components/typography'
+import { OnBoardingTextFooter } from '@/common/modals/OnBoardingModal'
+
+export const NoNodeConnection = () => {
+  const { setWallet } = useMyAccounts()
+
+  return (
+    <>
+      <ScrolledModalBody>
+        <Wrapper>
+          <TextHuge>Please wait for node connection to continue the process</TextHuge>
+        </Wrapper>
+      </ScrolledModalBody>
+      <OnBoardingTextFooter
+        text="Please reload the page after account creation!"
+        button={
+          <ButtonPrimary size="medium" onClick={() => setWallet?.(undefined)}>
+            Return to wallet selection
+          </ButtonPrimary>
+        }
+      />
+    </>
+  )
+}
+const Wrapper = styled.div`
+  padding: 32px;
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
diff --git a/packages/ui/src/common/providers/onboarding/provider.tsx b/packages/ui/src/common/providers/onboarding/provider.tsx
@@ -3,7 +3,6 @@ import React from 'react'
 import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
 import { useMyTotalBalances } from '@/accounts/hooks/useMyTotalBalances'
 import { Account } from '@/accounts/types'
-import { useApi } from '@/api/hooks/useApi'
 import { useLocalStorage } from '@/common/hooks/useLocalStorage'
 import { OnBoardingContext } from '@/common/providers/onboarding/context'
 import { UseOnBoarding } from '@/common/providers/onboarding/types'
@@ -22,7 +21,6 @@ const hasAccount = (allAccounts: Account[], address: string) => {
 }
 
 const useOnBoarding = (): UseOnBoarding => {
-  const { isConnected } = useApi()
   const { isLoading: isLoadingAccounts, error: accountsError, hasAccounts, allAccounts, wallet } = useMyAccounts()
   const { total: totalBalance } = useMyTotalBalances()
   const { isLoading: isLoadingMembers, hasMembers } = useMyMemberships()
@@ -32,7 +30,7 @@ const useOnBoarding = (): UseOnBoarding => {
     return { isLoading: false, status: 'finished' }
   }
 
-  if (!isConnected || isLoadingAccounts || isLoadingMembers) {
+  if (isLoadingAccounts || isLoadingMembers) {
     return { isLoading: true }
   }
 

diff --git a/packages/ui/test/app/OnBoardingOverlay.test.tsx b/packages/ui/test/app/OnBoardingOverlay.test.tsx
@@ -17,6 +17,14 @@ jest.mock('@/common/hooks/useOnBoarding', () => ({
   useOnBoarding: () => mockOnBoarding,
 }))
 
+jest.mock('@/api/hooks/useApi', () => ({
+  useApi: () => ({
+    api: {
+      isConnected: true,
+    },
+  }),
+}))
+
 describe('OnBoardingOverlay', () => {
   afterEach(cleanup)
 

diff --git a/packages/ui/test/common/modals/OnBoardingModal.test.tsx b/packages/ui/test/common/modals/OnBoardingModal.test.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 import { act } from 'react-dom/test-utils'
 import { MemoryRouter } from 'react-router'
 
+import { ApiContext } from '@/api/providers/context'
 import { Colors } from '@/common/constants'
 import { OnBoardingModal } from '@/common/modals/OnBoardingModal'
 import { ModalContext } from '@/common/providers/modal/context'
@@ -38,7 +39,7 @@ jest.mock('injectweb3-connect', () => ({
 }))
 
 describe('UI: OnBoardingModal', () => {
-  stubApi()
+  const api = stubApi()
 
   const useModal: UseModal<any> = {
     hideModal: jest.fn(),
@@ -190,9 +191,11 @@ describe('UI: OnBoardingModal', () => {
     render(
       <MemoryRouter>
         <MockApolloProvider>
-          <ModalContext.Provider value={useModal}>
-            <OnBoardingModal />
-          </ModalContext.Provider>
+          <ApiContext.Provider value={api}>
+            <ModalContext.Provider value={useModal}>
+              <OnBoardingModal />
+            </ModalContext.Provider>
+          </ApiContext.Provider>
         </MockApolloProvider>
       </MemoryRouter>
     )