fix(STK-256): My Stacks not updating correctly (#199)

* refactor: update hrefs to consume the pathnames abstraction as SSOT * feat: reset the stackbox form values and its search params only if the user is on the landing page * feat: persist chain ID search param on page navigation
SwaprHQ · Aug 22, 2024 · b48fa30 · b48fa30
1 parent 6ddb80a
commit b48fa30
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 15 deletions.
diff --git a/packages/app/app/not-found.tsx b/packages/app/app/not-found.tsx
@@ -1,7 +1,9 @@
 "use client";
 
-import { ButtonLink, HeadingText } from "@/ui";
 import Link from "next/link";
+
+import { ButtonLink, HeadingText } from "@/ui";
+import { PATHNAMES } from "@/constants";
 import StacksImg from "@/public/assets/images/stacks.svg";
 
 export default function NotFound() {
@@ -24,7 +26,7 @@ export default function NotFound() {
         .
       </HeadingText>
       <div>
-        <ButtonLink href="/">Go back to homepage</ButtonLink>
+        <ButtonLink href={PATHNAMES.HOME}>Go back to homepage</ButtonLink>
       </div>
     </div>
   );

diff --git a/packages/app/app/stacks/empty-state.tsx b/packages/app/app/stacks/empty-state.tsx
@@ -1,5 +1,6 @@
 import { ButtonLink, HeadingText } from "@/ui";
 import { EmptyStateStacksImg } from "@/public/assets";
+import { PATHNAMES } from "@/constants";
 
 export default function EmptyState() {
   return (
@@ -16,7 +17,7 @@ export default function EmptyState() {
         </div>
       </div>
       <div className="mx-auto w-fit">
-        <ButtonLink size="lg" href="/" iconLeft="plus">
+        <ButtonLink size="lg" href={PATHNAMES.HOME} iconLeft="plus">
           Create new stack
         </ButtonLink>
       </div>

diff --git a/packages/app/app/stacks/stacksOrders.tsx b/packages/app/app/stacks/stacksOrders.tsx
@@ -21,6 +21,7 @@ import { ButtonLink, HeadingText } from "@/ui";
 import { EmptyState, StacksTable, tabButtonStyles } from "@/components";
 import EmptyStatePage from "./empty-state";
 import { currentTimestampInSeconds } from "@/utils";
+import { PATHNAMES } from "@/constants";
 
 type SortTime = "startTime" | "endTime" | "cancelledAt";
 
@@ -183,7 +184,11 @@ export const StackOrders = ({ chainId, address }: StackOrdersProps) => {
             </div>
           )}
         </div>
-        <ButtonLink iconLeft="plus" href="/" className="hidden sm:flex">
+        <ButtonLink
+          iconLeft="plus"
+          href={PATHNAMES.HOME}
+          className="hidden sm:flex"
+        >
           Create New Stack
         </ButtonLink>
       </div>

diff --git a/packages/app/components/SelectNetwork.tsx b/packages/app/components/SelectNetwork.tsx
@@ -3,20 +3,23 @@
 import { Fragment } from "react";
 import { ChainIcon } from "connectkit";
 import { Listbox, Transition } from "@headlessui/react";
+import { usePathname } from "next/navigation";
 
 import { Button, Icon } from "@/ui";
 import { useNetworkContext, useStackboxFormContext } from "@/contexts";
+import { PATHNAMES } from "@/constants";
 
 export const SelectNetwork = () => {
   const { chains, changeNetwork, chainId, selectedChain } = useNetworkContext();
   const { resetFormValues } = useStackboxFormContext();
+  const pathname = usePathname();
 
   return (
     <Listbox
       value={chainId.toString()}
       onChange={(chainId) => {
         changeNetwork(parseInt(chainId));
-        resetFormValues(parseInt(chainId));
+        if (pathname === PATHNAMES.HOME) resetFormValues(parseInt(chainId));
       }}
     >
       <div className="relative">

diff --git a/packages/app/components/navbar/MobileMenu.tsx b/packages/app/components/navbar/MobileMenu.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import { useState } from "react";
-import { ConnectButton, SelectNetwork } from "@/components";
+
 import Link from "next/link";
+
 import { Button, Icon } from "@/ui";
-import { STACKLY_LANDING_URL } from "@/constants";
+import { ConnectButton, SelectNetwork } from "@/components";
+import { PATHNAMES, STACKLY_LANDING_URL } from "@/constants";
 
 export default function MobileMenu() {
   const [isOpen, setIsOpen] = useState(false);
@@ -31,7 +33,7 @@ export default function MobileMenu() {
           <div className="absolute left-0 w-full gap-2 px-6 py-2 border-b border-solid rounded-lg bg-surface-25 top-nav-height border-surface-75">
             <Link
               passHref
-              href="/stacks"
+              href={PATHNAMES.STACKS}
               className="flex items-center py-3 text-em-med"
               onClick={toggle}
             >

diff --git a/packages/app/components/navbar/Navbar.tsx b/packages/app/components/navbar/Navbar.tsx
@@ -1,20 +1,29 @@
 "use client";
 
 import Link from "next/link";
-import MobileMenu from "./MobileMenu";
-import Logo from "./Logo";
+
 import { ButtonLink } from "@/ui";
 import { ConnectButton, SelectNetwork } from "@/components";
+import { useNetworkContext } from "@/contexts";
+import { PATHNAMES } from "@/constants";
+
+import Logo from "./Logo";
+import MobileMenu from "./MobileMenu";
 
 export function Navbar() {
+  const { chainId } = useNetworkContext();
+
   return (
     <header className="top-0 flex flex-col w-full px-4 border-b border-solid h-nav-height bg-surface-25 border-b-surface-75">
       <nav className="flex items-center w-full h-full">
         <div>
           <Link
             passHref
             tabIndex={0}
-            href="/"
+            href={{
+              pathname: PATHNAMES.HOME,
+              query: `chainId=${chainId}`,
+            }}
             title="Stackly Home"
             className="flex items-center outline-none w-14 md:w-40"
           >
@@ -27,7 +36,7 @@ export function Navbar() {
             variant="quaternary"
             size="sm"
             iconLeft="blocks"
-            href="/stacks"
+            href={PATHNAMES.STACKS}
           >
             Your stacks
           </ButtonLink>

diff --git a/packages/app/components/stackbox/Stackbox.tsx b/packages/app/components/stackbox/Stackbox.tsx
@@ -48,6 +48,7 @@ import {
   Token,
   frequencySeconds,
 } from "@/models";
+import { PATHNAMES } from "@/constants";
 
 interface SelectTokenButtonProps {
   label: string;
@@ -619,7 +620,7 @@ export const Stackbox = () => {
         <Link
           passHref
           className="flex items-center space-x-0.5 hover:border-em-low border-b-2 border-em-disabled group"
-          href="/stacks"
+          href={PATHNAMES.STACKS}
           onClick={() => closeModal(ModalId.SUCCESS_STACK_TOAST)}
         >
           <BodyText className="text-em-med">View your stacks</BodyText>

diff --git a/packages/app/constants/index.ts b/packages/app/constants/index.ts
@@ -1 +1,2 @@
 export * from "./urls";
+export * from "./pathnames";
diff --git a/packages/app/constants/pathnames.ts b/packages/app/constants/pathnames.ts
@@ -0,0 +1,4 @@
+export const PATHNAMES = {
+  HOME: "/",
+  STACKS: "/stacks",
+};
diff --git a/packages/app/ui/buttons/ButtonLink.tsx b/packages/app/ui/buttons/ButtonLink.tsx
@@ -1,8 +1,11 @@
 "use client";
 
 import Link from "next/link";
-import { ButtonBaseProps, buttonStyles, getIconSize } from "./base";
+
 import { Icon } from "@/ui/icon/Icon";
+import { useNetworkContext } from "@/contexts";
+
+import { ButtonBaseProps, buttonStyles, getIconSize } from "./base";
 
 interface ButtonLinkProps extends ButtonBaseProps {
   href: string;
@@ -25,10 +28,15 @@ export function ButtonLink({
   passHref,
   target,
 }: ButtonLinkProps) {
+  const { chainId } = useNetworkContext();
+
   return (
     <Link
       id={id}
-      href={href}
+      href={{
+        pathname: href,
+        query: `chainId=${chainId}`,
+      }}
       tabIndex={0}
       className={buttonStyles({
         size,