From ce3cdbaaf09de4dc111bb4b04dc50dab6326d701 Mon Sep 17 00:00:00 2001 From: WRadoslaw <92513933+WRadoslaw@users.noreply.github.com> Date: Tue, 29 Nov 2022 17:29:03 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=8F=20Onboarding=20wallet=20selection?= =?UTF-8?q?=20without=20RPC=20connection=20(#3886)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Change provider logic * Adapt onboarding components to the new logic * Test fix --- .../OnboardingOverlay/OnBoardingOverlay.tsx | 4 +- .../OnBoardingModal/OnBoardingAccount.tsx | 9 ++++- .../components/NoNodeConnection.tsx | 37 +++++++++++++++++++ .../common/providers/onboarding/provider.tsx | 4 +- .../ui/test/app/OnBoardingOverlay.test.tsx | 8 ++++ .../common/modals/OnBoardingModal.test.tsx | 11 ++++-- 6 files changed, 64 insertions(+), 9 deletions(-) create mode 100644 packages/ui/src/common/modals/OnBoardingModal/components/NoNodeConnection.tsx diff --git a/packages/ui/src/app/components/OnboardingOverlay/OnBoardingOverlay.tsx b/packages/ui/src/app/components/OnboardingOverlay/OnBoardingOverlay.tsx index 3a2553c716..9c81508d71 100644 --- 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('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 index 9936c70cdd..0260c0f6ca 100644 --- 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 + } + if (!hasAccounts) { return } return - }, [hasAccounts]) + }, [hasAccounts, api?.isConnected]) if (isLoading) { return diff --git a/packages/ui/src/common/modals/OnBoardingModal/components/NoNodeConnection.tsx b/packages/ui/src/common/modals/OnBoardingModal/components/NoNodeConnection.tsx new file mode 100644 index 0000000000..5b96c9bf1b --- /dev/null +++ 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 ( + <> + + + Please wait for node connection to continue the process + + + setWallet?.(undefined)}> + Return to wallet selection + + } + /> + + ) +} +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 index b97b29fc88..a627932dd7 100644 --- 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 index bf9465a027..594bed3f88 100644 --- 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 index 2df114087e..eb36e2cd84 100644 --- 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 = { hideModal: jest.fn(), @@ -190,9 +191,11 @@ describe('UI: OnBoardingModal', () => { render( - - - + + + + + )