Add RPC selection to onboarding flow #868

jessepinho · 2024-04-01T19:40:07Z

screencap.mov

In this PR

Add an RPC selection step to the onboarding flow
Rework how RPC impls are defined, so that we don't define them until we have a gRPC endpoint set in local extension storage.
Add addListener/removeListener methods to ExtensionStorage, so that we can wait to make requests until the grpcEndpoint property exists in extension storage.
Use the above two points to wait to start up the extension services until an RPC endpoint has been chosen.
- Note that this means we no longer get errors on extension install! Yay!

Next PR

Add RPC selection to the Settings page of the extension

Relates to #605

jessepinho · 2024-04-02T04:43:47Z

apps/extension/src/routes/page/onboarding/set-password.tsx

-      await finalOnboardingSave(password);
-      navigate(PagePath.ONBOARDING_SUCCESS);
+      await onboardingSave(password);
+      navigate(PagePath.SET_RPC_ENDPOINT);


Note that I didn't make this change in the RestorePassword component. It doesn't seem to be part of the onboarding flow, and I actually am unclear on if that component is actually used anywhere?

Feel free to delete it. It's unused for like 8 months.

apps/extension/src/get-rpc-impls.ts

apps/extension/src/utils/use-store-shallow.ts

packages/storage/src/chrome/local.ts

jessepinho · 2024-04-03T03:32:04Z

packages/ui/components/ui/select-list.tsx

+ * </SelectList>
+ * ```
+ */
+export const SelectList = ({ children }: { children: ReactNode }) => (


jessepinho · 2024-04-03T03:32:35Z

packages/ui/components/ui/select-list.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';


jessepinho · 2024-04-03T03:33:39Z

apps/extension/src/routes/page/onboarding/set-rpc-endpoint.tsx

+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    await setGrpcEndpointInZustand(grpcEndpoint);
+    void chrome.runtime.sendMessage(ServicesMessage.OnboardComplete);


@turbocrime please confirm that this is correct (moving OnboardComplete) to this step, since this is the new last step of onboarding.

apps/extension/src/get-rpc-impls.ts

apps/extension/src/service-worker.ts

grod220 · 2024-04-03T15:11:22Z

apps/extension/src/routes/page/onboarding/set-password.tsx

-      await finalOnboardingSave(password);
-      navigate(PagePath.ONBOARDING_SUCCESS);
+      await onboardingSave(password);
+      navigate(PagePath.SET_RPC_ENDPOINT);


Feel free to delete it. It's unused for like 8 months.

apps/extension/src/shared/rpc-endpoints.ts

apps/extension/src/routes/page/onboarding/set-rpc-endpoint.tsx

grod220 · 2024-04-03T15:16:14Z

apps/extension/src/routes/page/onboarding/set-rpc-endpoint.tsx

+  const randomlySortedEndpoints = useMemo(() => [...RPC_ENDPOINTS].sort(randomSort), []);
+  const [grpcEndpoint, setGrpcEndpoint] = useState(randomlySortedEndpoints[0]!.url);
+  const setGrpcEndpointInZustand = useStore(state => state.network.setGRPCEndpoint);
+  const customRpcEndpointInput = useRef<HTMLInputElement | null>(null);


What do you think about moving all this logic into zustand with an RPC slice? My hunch is perhaps we'd want to re-use this within our settings tab in the extension and moving the logic out likely makes this easier.

It also reduces the redundancies with setGrpcEndpointInZustand & setGrpcEndpoint

apps/extension/src/routes/page/onboarding/set-rpc-endpoint.tsx

grod220 · 2024-04-03T15:19:28Z

apps/extension/src/routes/page/onboarding/set-rpc-endpoint.tsx

+              onSelect={() => {
+                if (!isCustomRpcEndpoint) setGrpcEndpoint('');


Can we do some validation like the way we do in settings right now? If it cannot connect to the grpc url, we do not allow it to be set.

Going to take the liberty of doing this (and addressing your comment above about moving logic into Zustand) in a separate PR, since it looks like that'll require some (necessary) refactoring that I was anyway going to do when adding a similar RPC selection form to the extension's settings page.

packages/storage/src/chrome/base.ts

grod220

Left some comments, think there are some areas it would be helpful to add to

jessepinho force-pushed the jessepinho/rpc-endpoint-onboarding-web-605 branch from fe48dd9 to 6a956dd Compare April 2, 2024 00:59

jessepinho commented Apr 2, 2024

View reviewed changes

jessepinho added 9 commits April 2, 2024 14:45

Create initial component for setting RPC endpoint

7b9ec42

Create RPC_ENDPOINTS const

d3fa1d0

Create SelectList component

8674da3

Build out RPC UI

0d653d1

Add submit button and link to edit list

4b6e697

Use the RPC endpoint in state

ab697d8

Send the OnboardComplete message after selecting an RPC endpoint

2c7d979

Add a custom RPC endpoint option

d4c0d4d

Show RPC node images

1705365

jessepinho force-pushed the jessepinho/rpc-endpoint-onboarding-web-605 branch from 5a8d317 to 1705365 Compare April 2, 2024 21:45

jessepinho added 4 commits April 2, 2024 14:55

Fix complain re: uncontrolled input

5113ed7

Fix bug with how endpoint is stored in state

e9e1ed9

Fix issue with using default grpc url

9d32e80

Fix issue with trying to get the RPC endpoint too early

10efebb

jessepinho force-pushed the jessepinho/rpc-endpoint-onboarding-web-605 branch from 5d6587a to 10efebb Compare April 3, 2024 00:32

jessepinho commented Apr 3, 2024

View reviewed changes

apps/extension/src/get-rpc-impls.ts Show resolved Hide resolved

Fix impl definition

a0378fe

jessepinho commented Apr 3, 2024

View reviewed changes

apps/extension/src/utils/use-store-shallow.ts Show resolved Hide resolved

jessepinho commented Apr 3, 2024

View reviewed changes

packages/storage/src/chrome/local.ts Show resolved Hide resolved

Clean up SelectList a bit

412d3b3

jessepinho force-pushed the jessepinho/rpc-endpoint-onboarding-web-605 branch from 82b4c69 to 412d3b3 Compare April 3, 2024 01:03

jessepinho added 2 commits April 2, 2024 20:23

Account for images

539914f

Add example

ffed7de

jessepinho commented Apr 3, 2024

View reviewed changes

jessepinho changed the title ~~WIP: Add RPC selection to onboarding flow~~ Add RPC selection to onboarding flow Apr 3, 2024

jessepinho requested a review from turbocrime April 3, 2024 03:35

jessepinho requested a review from grod220 April 3, 2024 03:35

jessepinho marked this pull request as ready for review April 3, 2024 03:35

grod220 reviewed Apr 3, 2024

View reviewed changes

grod220 approved these changes Apr 3, 2024

View reviewed changes

jessepinho added 3 commits April 3, 2024 10:02

Refactor per PR suggestion

d32ccab

Move RPC endpoints to constants package

2dc36af

Tweak message

c969590

jessepinho merged commit 71b71e8 into main Apr 3, 2024
6 checks passed

jessepinho deleted the jessepinho/rpc-endpoint-onboarding-web-605 branch April 3, 2024 18:09

jessepinho mentioned this pull request Apr 3, 2024

Set gRPC endpoint during onboarding, part 2 #877

Merged

Valentine1898 mentioned this pull request Apr 25, 2024

v6.3.0 connection bug #963

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add RPC selection to onboarding flow #868

Add RPC selection to onboarding flow #868

jessepinho commented Apr 1, 2024 •

edited

Loading

jessepinho Apr 2, 2024

grod220 Apr 3, 2024

jessepinho Apr 3, 2024

jessepinho Apr 3, 2024

jessepinho Apr 3, 2024

grod220 Apr 3, 2024

grod220 Apr 3, 2024

grod220 Apr 3, 2024

grod220 Apr 3, 2024

jessepinho Apr 3, 2024

grod220 left a comment

		@@ -0,0 +1,66 @@
		import type { Meta, StoryObj } from '@storybook/react';

		onSelect={() => {
		if (!isCustomRpcEndpoint) setGrpcEndpoint('');

Add RPC selection to onboarding flow #868

Add RPC selection to onboarding flow #868

Conversation

jessepinho commented Apr 1, 2024 • edited Loading

In this PR

Next PR

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

grod220 left a comment

Choose a reason for hiding this comment

jessepinho commented Apr 1, 2024 •

edited

Loading