Config-based routing, `wouter` `v3`, custom `useLocation()` / `navigate()` #556

Danziger · 2024-11-29T14:56:13Z

Extract page wrapper elements/styles to a new Page component.
Rename all "view components" to <Name>View and replace default exports with named exports.
Create a HOC (withPage) to wrap "views" with the default Page component.
Set up config-based routing, that automatically wraps views in the provided Page component.
Create new <Routes> component that renders the route config objects, and use it to all apps, including the Welcome and the Dashboard apps (but only part of their routing uses it, the rest is still done by manually checking params).
Create useLocation() and useSearchParam() hooks that wrap and extend wouter's useLocation(), useSearch() and navigate() functions
Get rid of the old <HistoryProvider> component and useHistory() hook.
Add types for route paths (ArConnectRoutePath) and use those in navigate(), <Redirect> and <Link>.
Update wouter to the latest version.
Closes Router issues #510.
Closes Routing: Search params are manually parsed #560.
Add a <WalletsProvider> and useWallets() hook to replace the logic inside src/wallets/setup/browser-extension/browser-extension-wallet-setup.hook.ts and get rid of the old useNoWallets() and useDecryptionKey() hooks (which were not reactive).

…licts.

…ooks and entry points.

…h popup routes (so that scroll and transitions work properly).

Danziger · 2024-11-29T15:23:56Z

src/popup.tsx

-        </HistoryProvider>
-      </Router>
+      <>
+        <Routes routes={POPUP_ROUTES} />


Routes have been defined in POPUP_ROUTES and are wrapped automatically in a Page component by the Routes component.

The params are automatically passed as params prop to all of them, so there's no need to wrap them in functions like we had before.

Additionally, the Head component could be extracted here (just like NavigationBar) so that it is not affected by page transitions, but that would also require adding a headProps property to the RouterConfig interface (for static personalization) and also creating a context and/or portal to allow for personalization coming directly from the view/page's own life cycle (for dynamic personalization).

Danziger · 2024-11-29T15:26:39Z

src/utils/auth/auth.provider.tsx

@@ -84,6 +86,30 @@ export function AuthRequestsProvider({
    []
  );

+  const closeAuthPopup = useCallback((delay: number = 0) => {


Small change for the embedded wallet already here, but it doesn't affect the functionality in this PR.

Danziger · 2024-11-29T15:31:19Z

src/wallets/index.ts

@@ -232,6 +134,12 @@ export async function setActiveWallet(address?: string) {
 export type DecryptedWallet = StoredWallet<JWKInterface>;

 export async function openOrSelectWelcomePage(force = false) {
+  if (process.env.PLASMO_PUBLIC_APP_TYPE !== "extension") {


Minor change for the embedded wallet.

Already added env var to GH repo 👍

Danziger · 2024-12-04T21:30:41Z

src/routes/welcome/gettingStarted.tsx

                active={page === i + 1}
+                onClick={() => navigateToPage(i + 1)}


This could be replaced with navigate(i + 1). See #568

Danziger · 2024-12-04T21:31:30Z

src/routes/welcome/gettingStarted.tsx

+import type { CommonRouteProps } from "~wallets/router/router.types";
+import { Redirect } from "~wallets/router/components/redirect/Redirect";
+
+const Views = [


This could/should be replaced with <Routes> too. See #567.

Danziger · 2024-12-04T21:33:07Z

src/routes/welcome/setup.tsx

+
+// Wallet generate pages:
+
+// TODO: Use a nested router instead:


This could/should be implemented using <Routes>. See #567.

Danziger · 2024-12-04T21:40:35Z

src/routes/welcome/start/index.tsx


-    if (![1, 2, 3].includes(page)) return 1;
+const Views = [


This could/should be implemented using <Routes>. See #567.

Danziger · 2024-12-04T21:41:25Z

src/routes/welcome/start/index.tsx

+          <Page
+            key={i}
+            active={page === i + 1}
+            onClick={() => navigate(`/start/${i + 1}`)}


This could/should be replaced with navigate(i+1). See #568.

Danziger · 2024-12-04T21:42:51Z

src/utils/hash_router.ts

-
-const currentLocation = () => window.location.hash.replace(/^#/, "") || "/";
-
-export const useHashLocation: BaseLocationHook = () => {


This comes from wouter now.

Danziger · 2024-12-04T21:44:34Z

src/wallets/router/router.types.ts

+  authType?: RouteAuthType;
+}
+
+export type ArConnectRoutePath =


Routes (across all apps) are now type-safe, which includes calls to navigate(), <Link> and <Redirect>.

Danziger · 2024-12-04T21:44:54Z

src/wallets/router/router.types.ts

+  key?: string;
+  path: P;
+  component: React.ComponentType<CommonRouteProps>;
+  authType?: RouteAuthType;


This param will probably be used for embedded.

Danziger · 2024-12-04T21:45:21Z

src/wallets/router/router.utils.ts

+  return null;
+}
+
+export type NavigateAction = "prev" | "next" | "up" | number;


Shortcuts for common routing actions.

Danziger · 2024-12-04T21:46:10Z

src/wallets/router/routes.component.tsx

+
+// TODO: Consider adding `<AnimatePresence>` and `<BodyScroller>` inside here.
+
+// TODO: Consider adding a prop to `RouteConfig.parseParams` to parse


Might do it later. Removes the need to parse params in the views, as parsing would be done at the router level.

Danziger · 2024-12-04T21:47:08Z

src/wallets/router/routes.component.tsx

+        })}
+      </Switch>
+    );
+  }, [routes, diffLocation ? location : undefined]);


Diffing the location makes different views that use the same component to show a transition between the two (e.g. selecting an AuthRequest of the same type in the Auth popup). This is off by default (as that's how it was working before).

What are we waiting to turn it on? 🙌

- Move <AnimatePresence> and <BodyScroller> into <Routes>. - Fix rendering issue in <HeadAuth> making it re-render constantly. - Implement routing overrides. - Use routing overrides for the cover, loading, unlock and unlocked states of the Popup and Auth apps. - Get rid of useNowallets() and useDecryptionKey() in favour of the new useWallets() hook and <WalletsProvider>.

Danziger · 2024-12-06T14:45:41Z

@7i7o A PLASMO_PUBLIC_APP_TYPE = "extension" env variable is needed after merging these changes.

Danziger · 2024-12-06T14:47:19Z

src/components/HeadAuth.tsx

      });
    }

    loadAppInfo();
-  }, [url, appInfoProp]);


This was causing an infinite rendering loop on this component.

Danziger · 2024-12-06T14:49:08Z

src/wallets/index.ts

-
-  useEffect(() => {
-    (async () => {
-      const activeAddress = await getActiveAddress();


Not ideal because the state won't change if the wallets are removed. Same with the useDecryptionKey hook below. Both have been replaced with useWallets() which gets the state from <WalletsProvider> which subscribes to state updates.

7i7o

tACK 👍

7i7o · 2024-12-09T19:47:10Z

package.json

@@ -93,7 +92,7 @@
    "uuid": "^9.0.0",
    "warp-contracts": "^1.2.13",
    "webextension-polyfill": "^0.10.0",
-    "wouter": "^2.8.0-alpha.2"
+    "wouter": "^3.3.5"


7i7o · 2024-12-09T20:01:34Z

src/components/dashboard/Applications.tsx

+export type ApplicationsDashboardViewProps =
+  CommonRouteProps<ApplicationsDashboardViewParams>;
+
+export function ApplicationsDashboardView() {


7i7o · 2024-12-09T21:51:20Z

src/components/dashboard/subsettings/AddContact.tsx

+  isQuickSetting
+}: AddContactDashboardViewProps) {
+  const { navigate } = useLocation();
+  const { address } = useSearchParams<{ address: string }>();


7i7o · 2024-12-09T22:23:19Z

src/routes/dashboard/index.tsx

  const searchInput = useInput();

-  // active setting val
-  const activeSetting = useMemo(() => params.setting, [params.setting]);


7i7o · 2024-12-09T22:25:05Z

src/routes/dashboard/index.tsx

-      return undefined;
-    }
-
-    return new Application(decodeURIComponent(activeSubSetting));


7i7o · 2024-12-09T23:11:09Z

src/wallets/router/router.types.ts

+  authType?: RouteAuthType;
+}
+
+export type ArConnectRoutePath =


7i7o · 2024-12-09T23:15:25Z

src/wallets/router/routes.component.tsx

+    }, [routes]);
+  }
+
+  const memoizedRoutes = useMemo(() => {


Suggested change

const memoizedRoutes = useMemo(() => {

const memorizedRoutes = useMemo(() => {

typo

7i7o · 2024-12-09T23:17:05Z

src/wallets/router/routes.component.tsx

+        })}
+      </Switch>
+    );
+  }, [routes, diffLocation ? location : undefined]);


What are we waiting to turn it on? 🙌

7i7o · 2024-12-09T23:17:32Z

src/wallets/router/routes.component.tsx

+    <>
+      <BodyScroller />
+
+      <AnimatePresence initial={false}>{memoizedRoutes}</AnimatePresence>


Suggested change

<AnimatePresence initial={false}>{memoizedRoutes}</AnimatePresence>

<AnimatePresence initial={false}>{memorizedRoutes}</AnimatePresence>

same typo

7i7o · 2024-12-09T23:22:33Z

src/wallets/router/router.utils.ts

+  return null;
+}
+
+export type NavigateAction = "prev" | "next" | "up" | number;


…isleading aspects.

github-actions · 2024-12-18T17:51:10Z

🎉 This PR is included in version 1.21.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Danziger added 17 commits October 15, 2024 17:02

Vite build setup for the embedded wallet iframe (re)using ArConnect.

cbd7574

Mock enough stuff for the app to build and kind of run with Vite.

6150087

Implement route guard logic wihout using a regular Route.

5beaf0c

Merge development and resolve conflicts.

60377a8

Minor changes in the mocked create tab functionality.

7171c38

Merge feature/reorganize-wallet-installation-n-setup and resolve conf…

ffd83b9

…licts.

Add some more scaffolding for the embedded wallet SDK.

bd94717

Partial restructuring of browser extension & embedded wallets setup h…

76bc10c

…ooks and entry points.

Move routes to a config file (WIP).

0b78ab6

Finish router refactoring to make it config-driven.

48d7a70

Memoize Routes, extract route paths to constant and add authID to Aut…

f819c4b

…h popup routes (so that scroll and transitions work properly).

Fix broken import.

26ef8d4

Add mock for the Alarms API.

8e07997

Add storage mock.

2ae4dd9

Re-strucute browser mocks.

c7c7964

Remove tabs.create() mocks to open Welcome or Dashboard pages.

8ddbc94

Replace window.top.close() in AuthRequestsProvider.

3b9a7dc

Danziger marked this pull request as draft November 29, 2024 14:58

Danziger added 4 commits November 29, 2024 16:01

Remove embedded wallet / iframe files from this branch.

06fb97c

Update yarn.lock.

35ab26a

Update yarn.lock.

6a94bfe

Remove debugging code.

46ea22b

Danziger commented Nov 29, 2024

View reviewed changes

Danziger added 5 commits November 29, 2024 16:35

Remove code that doesn't belong in this PR.

1300615

Remove code that doesn't belong in this PR.

2e3c95b

Remove vite.config.js

0c925ba

Remove HistoryProvider and use a custom useLocation hook everywhere.

0ec54a3

Update Welcome pages to get params from props (WIP).

b0993ef

Danziger commented Dec 4, 2024

View reviewed changes

Danziger changed the title ~~Config based router~~ Config-based routing and custom useLocation() / navigate() Dec 4, 2024

Danziger changed the title ~~Config-based routing and custom useLocation() / navigate()~~ Config-based routing, wouter v3, custom useLocation() / navigate() Dec 4, 2024

Danziger commented Dec 6, 2024

View reviewed changes

Merge branch 'development' into feature/config-based-router

f7bfaee

Danziger mentioned this pull request Dec 9, 2024

epic: Embedded Wallet PoC #497

Merged

4 tasks

Danziger added 3 commits December 10, 2024 09:57

Fix infinite re-render caused by useGateway params.

70f1042

Fix Setting instances not rendering in the Dashboard.

2f2a5d9

Fix route params used in ConfirmView and RecipientView.

248d3d4

7i7o approved these changes Dec 10, 2024

View reviewed changes

Danziger added 3 commits December 10, 2024 14:32

Remove unused RecipientView and fix back functionality.

630a7a6

Fix back functionality and add clarification comments about certain m…

f6ef12f

…isleading aspects.

Merge development and resolve conflicts.

379ab20

Danziger merged commit f51ae70 into development Dec 10, 2024

Danziger deleted the feature/config-based-router branch December 10, 2024 15:23

github-actions bot added the released label Dec 18, 2024

		active={page === i + 1}
		onClick={() => navigateToPage(i + 1)}


		// Wallet generate pages:

		// TODO: Use a nested router instead:


		const currentLocation = () => window.location.hash.replace(/^#/, "") \|\| "/";

		export const useHashLocation: BaseLocationHook = () => {


		// TODO: Consider adding `<AnimatePresence>` and `<BodyScroller>` inside here.

		// TODO: Consider adding a prop to `RouteConfig.parseParams` to parse

	const memoizedRoutes = useMemo(() => {
	const memorizedRoutes = useMemo(() => {

	<AnimatePresence initial={false}>{memoizedRoutes}</AnimatePresence>
	<AnimatePresence initial={false}>{memorizedRoutes}</AnimatePresence>

Config-based routing, wouter v3, custom useLocation() / navigate() #556

Config-based routing, wouter v3, custom useLocation() / navigate() #556

Conversation

Danziger commented Nov 29, 2024 • edited Loading

Danziger Nov 29, 2024 • edited Loading

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

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

Danziger Dec 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Danziger Dec 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Danziger commented Dec 6, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

7i7o left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Dec 18, 2024

Config-based routing, `wouter` `v3`, custom `useLocation()` / `navigate()` #556

Config-based routing, `wouter` `v3`, custom `useLocation()` / `navigate()` #556

Danziger commented Nov 29, 2024 •

edited

Loading

Danziger Nov 29, 2024 •

edited

Loading

Danziger Dec 4, 2024 •

edited

Loading

Danziger Dec 4, 2024 •

edited

Loading