From 4889412f3f524188b09879a90a6c8343de733484 Mon Sep 17 00:00:00 2001 From: ~latter-bolden Date: Fri, 18 Oct 2024 13:27:50 -0400 Subject: [PATCH 1/3] add designed onboarding loader --- apps/tlon-mobile/src/App.main.tsx | 2 +- .../screens/Onboarding/ReserveShipScreen.tsx | 106 +++++++++++++++--- packages/app/contexts/signup.tsx | 42 ++++--- packages/app/hooks/useBootSequence.ts | 4 +- packages/app/lib/bootHelpers.ts | 30 +++-- packages/ui/src/assets/arvos_discussing.svg | 1 + .../ui/src/components/ArvosDiscussing.tsx | 17 +++ packages/ui/src/index.tsx | 1 + 8 files changed, 160 insertions(+), 43 deletions(-) create mode 100644 packages/ui/src/assets/arvos_discussing.svg create mode 100644 packages/ui/src/components/ArvosDiscussing.tsx diff --git a/apps/tlon-mobile/src/App.main.tsx b/apps/tlon-mobile/src/App.main.tsx index 9f46e66379..5dc76b7cde 100644 --- a/apps/tlon-mobile/src/App.main.tsx +++ b/apps/tlon-mobile/src/App.main.tsx @@ -73,7 +73,7 @@ const App = () => { - ) : isAuthenticated && !signupContext.isOngoing ? ( + ) : isAuthenticated && !signupContext.didBeginSignup ? ( ) : ( diff --git a/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx b/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx index fa3eff19ac..ba9785a709 100644 --- a/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx +++ b/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx @@ -1,8 +1,18 @@ import type { NativeStackScreenProps } from '@react-navigation/native-stack'; import { useSignupContext } from '@tloncorp/app/contexts/signup'; -import { BootPhaseExplanations } from '@tloncorp/app/lib/bootHelpers'; -import { Spinner, Text, View, YStack } from '@tloncorp/ui'; -import { useEffect } from 'react'; +import { NodeBootPhase } from '@tloncorp/app/lib/bootHelpers'; +import { + ArvosDiscussing, + IconType, + ListItem, + LoadingSpinner, + OnboardingTextBlock, + ScreenHeader, + View, + YStack, +} from '@tloncorp/ui'; +import { useLureMetadata } from 'packages/app/contexts/branch'; +import { useEffect, useMemo } from 'react'; import type { OnboardingStackParamList } from '../../types'; @@ -10,6 +20,7 @@ type Props = NativeStackScreenProps; export const ReserveShipScreen = ({ navigation }: Props) => { const signupContext = useSignupContext(); + const lureMeta = useLureMetadata(); // Disable back button once you reach this screen useEffect( @@ -27,17 +38,84 @@ export const ReserveShipScreen = ({ navigation }: Props) => { }, [signupContext]); return ( - - - - - Booting your new P2P node for the first time... - - {/* TOOD: add back in when design is ready */} - {/* - {BootPhaseExplanations[signupContext.bootPhase]} - */} - + + + + + + ); }; + +interface DisplayStep { + description: string; + icon: IconType; + startExclusive: NodeBootPhase; + endInclusive: NodeBootPhase; +} +function BootStepDisplay(props: { + bootPhase: NodeBootPhase; + withInvites: boolean; +}) { + const displaySteps = useMemo(() => { + const steps: DisplayStep[] = [ + { + description: 'Unboxing your new peer', + icon: 'Gift', + startExclusive: NodeBootPhase.IDLE, + endInclusive: NodeBootPhase.BOOTING, + }, + { + description: 'Connecting to the network', + icon: 'Link', + startExclusive: NodeBootPhase.BOOTING, + endInclusive: NodeBootPhase.CONNECTING, + }, + ]; + + if (props.withInvites) { + steps.push({ + description: 'Finding peers on the network', + icon: 'ChannelGalleries', + startExclusive: NodeBootPhase.CONNECTING, + endInclusive: NodeBootPhase.ACCEPTING_INVITES, + }); + } + + return steps; + }, [props.withInvites]); + + return ( + + {displaySteps.map((step, index) => { + const isOnStep = + props.bootPhase > step.startExclusive && + props.bootPhase <= step.endInclusive; + const hasCompleted = props.bootPhase > step.endInclusive; + return ( + + + + {step.description} + + + {isOnStep && } + {hasCompleted && } + + + ); + })} + + ); +} diff --git a/packages/app/contexts/signup.tsx b/packages/app/contexts/signup.tsx index 67b46bde2c..19d236d76d 100644 --- a/packages/app/contexts/signup.tsx +++ b/packages/app/contexts/signup.tsx @@ -130,23 +130,31 @@ export const SignupProvider = ({ children }: { children: React.ReactNode }) => { values.didCompleteSignup && bootPhase === NodeBootPhase.READY ) { - logger.log('running post-signup actions'); - const postSignupParams = { - nickname: values.nickname, - telemetry: values.telemetry, - notificationToken: values.notificationToken, - }; - handlePostSignup(postSignupParams); - clear(); - logger.trackEvent('hosted signup report', { - bootDuration: bootReport - ? bootReport.completedAt - bootReport.startedAt - : null, - userSatWaitingFor: values.userWasReadyAt - ? Date.now() - values.userWasReadyAt - : null, - timeUnit: 'ms', - }); + try { + logger.log('running post-signup actions'); + const postSignupParams = { + nickname: values.nickname, + telemetry: values.telemetry, + notificationToken: values.notificationToken, + }; + handlePostSignup(postSignupParams); + logger.trackEvent('hosted signup report', { + bootDuration: bootReport + ? bootReport.completedAt - bootReport.startedAt + : null, + userSatWaitingFor: values.userWasReadyAt + ? Date.now() - values.userWasReadyAt + : null, + timeUnit: 'ms', + }); + } catch (e) { + logger.trackError('post signup error', { + errorMessage: e.message, + errorStack: e.stack, + }); + } finally { + setTimeout(() => clear(), 2000); + } } }, [values, bootPhase, clear, bootReport]); diff --git a/packages/app/hooks/useBootSequence.ts b/packages/app/hooks/useBootSequence.ts index 77a4779eb9..e060d43f32 100644 --- a/packages/app/hooks/useBootSequence.ts +++ b/packages/app/hooks/useBootSequence.ts @@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useLureMetadata } from '../contexts/branch'; import { useShip } from '../contexts/ship'; -import { NodeBootPhase } from '../lib/bootHelpers'; +import { BootPhaseNames, NodeBootPhase } from '../lib/bootHelpers'; import BootHelpers from '../lib/bootHelpers'; import { getShipFromCookie } from '../utils/ship'; import { useConfigureUrbitClient } from './useConfigureUrbitClient'; @@ -264,7 +264,7 @@ export function useBootSequence({ lastRunPhaseRef.current = bootPhase; lastRunErrored.current = false; - logger.log(`running boot sequence phase: ${bootPhase}`); + logger.log(`running boot sequence phase: ${BootPhaseNames[bootPhase]}`); const nextBootPhase = await runBootPhase(); setBootPhase(nextBootPhase); diff --git a/packages/app/lib/bootHelpers.ts b/packages/app/lib/bootHelpers.ts index 4c0dfa47f7..60866871c9 100644 --- a/packages/app/lib/bootHelpers.ts +++ b/packages/app/lib/bootHelpers.ts @@ -7,15 +7,15 @@ import { trackOnboardingAction } from '../utils/posthog'; import { getShipFromCookie, getShipUrl } from '../utils/ship'; export enum NodeBootPhase { - IDLE = 'idle', - RESERVING = 'reserving', - BOOTING = 'booting', - AUTHENTICATING = 'authenticating', - CONNECTING = 'connecting', - CHECKING_FOR_INVITE = 'checking-for-invite', - ACCEPTING_INVITES = 'accepting-invites', - READY = 'ready', - ERROR = 'error', + IDLE = 1, + RESERVING = 2, + BOOTING = 3, + AUTHENTICATING = 4, + CONNECTING = 5, + CHECKING_FOR_INVITE = 6, + ACCEPTING_INVITES = 7, + READY = 200, + ERROR = 400, } export const BootPhaseExplanations: Record = { @@ -31,6 +31,18 @@ export const BootPhaseExplanations: Record = { [NodeBootPhase.ERROR]: 'Your node errored while initializing', }; +export const BootPhaseNames: Record = { + [NodeBootPhase.IDLE]: 'Idle', + [NodeBootPhase.RESERVING]: 'Reserving', + [NodeBootPhase.BOOTING]: 'Booting', + [NodeBootPhase.AUTHENTICATING]: 'Authenticating', + [NodeBootPhase.CONNECTING]: 'Connecting', + [NodeBootPhase.CHECKING_FOR_INVITE]: 'Checking for Invites', + [NodeBootPhase.ACCEPTING_INVITES]: 'Accepting Invites', + [NodeBootPhase.READY]: 'Ready', + [NodeBootPhase.ERROR]: 'Error', +}; + export default { NodeBootPhase, reserveNode, diff --git a/packages/ui/src/assets/arvos_discussing.svg b/packages/ui/src/assets/arvos_discussing.svg new file mode 100644 index 0000000000..51621d4a80 --- /dev/null +++ b/packages/ui/src/assets/arvos_discussing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/src/components/ArvosDiscussing.tsx b/packages/ui/src/components/ArvosDiscussing.tsx new file mode 100644 index 0000000000..2af393d78d --- /dev/null +++ b/packages/ui/src/components/ArvosDiscussing.tsx @@ -0,0 +1,17 @@ +import { styled } from 'tamagui'; + +import ArvosDiscussingSvg from '../assets/arvos_discussing.svg'; + +export const ArvosDiscussing = styled( + ArvosDiscussingSvg, + { + color: '$primaryText', + }, + { + accept: { + color: 'color', + width: 'size', + height: 'size', + }, + } +); diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx index 7d4a1e50e2..646066520e 100644 --- a/packages/ui/src/index.tsx +++ b/packages/ui/src/index.tsx @@ -74,6 +74,7 @@ export * from './components/UserProfileScreenView'; export * from './components/View'; export * from './components/WelcomeSheet'; export * from './components/Image'; +export * from './components/ArvosDiscussing'; export * as Form from './components/Form'; export * from './contexts'; export * from './tamagui.config'; From fbe096366e1e4229d12d6d240a99c580e8e98b99 Mon Sep 17 00:00:00 2001 From: ~latter-bolden Date: Fri, 18 Oct 2024 13:32:30 -0400 Subject: [PATCH 2/3] too much excite --- apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx b/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx index ba9785a709..dd7f317257 100644 --- a/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx +++ b/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx @@ -43,7 +43,7 @@ export const ReserveShipScreen = ({ navigation }: Props) => { title={ signupContext.bootPhase < NodeBootPhase.READY ? "We're setting you up" - : 'Setup complete!!' + : 'Setup complete!' } showSessionStatus={false} /> From ab1e639df6d8e78765494de3ca9dcfdce7ff0f61 Mon Sep 17 00:00:00 2001 From: ~latter-bolden Date: Fri, 18 Oct 2024 13:39:37 -0400 Subject: [PATCH 3/3] bad import --- apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx b/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx index dd7f317257..747b9daef8 100644 --- a/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx +++ b/apps/tlon-mobile/src/screens/Onboarding/ReserveShipScreen.tsx @@ -1,4 +1,5 @@ import type { NativeStackScreenProps } from '@react-navigation/native-stack'; +import { useLureMetadata } from '@tloncorp/app/contexts/branch'; import { useSignupContext } from '@tloncorp/app/contexts/signup'; import { NodeBootPhase } from '@tloncorp/app/lib/bootHelpers'; import { @@ -11,7 +12,6 @@ import { View, YStack, } from '@tloncorp/ui'; -import { useLureMetadata } from 'packages/app/contexts/branch'; import { useEffect, useMemo } from 'react'; import type { OnboardingStackParamList } from '../../types';