fix: rename list reroute

CHANGELOG.md

@@ -126,6 +126,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#154](https://github.com/alleslabs/celatone-frontend/pull/154) Stay on the same contract list page after renaming the list
 - [#155](https://github.com/alleslabs/celatone-frontend/pull/155) Fix uncontrolled input error and fix space bar issue in editable cell
 - [#156](https://github.com/alleslabs/celatone-frontend/pull/156) Fix json editor cannot focus by clicking on empty area
 - [#166](https://github.com/alleslabs/celatone-frontend/pull/166) Change default list when editing contract information

src/lib/app-provider/hooks/useInternalNavigate.ts

@@ -7,14 +7,21 @@ interface NavigationArgs {
   pathname: string;
   query?: ParsedUrlQueryInput;
   options?: Parameters<Pick<Router, "push">["push"]>[2];
+  replace?: boolean;
 }
 
 export const useInternalNavigate = () => {
   const router = useRouter();
 
   return useCallback(
-    ({ pathname, query = {}, options = {} }: NavigationArgs) => {
-      router.push(
+    ({
+      pathname,
+      query = {},
+      options = {},
+      replace = false,
+    }: NavigationArgs) => {
+      const routerFn = replace ? router.replace : router.push;
+      routerFn(
         {
           pathname: `/[network]${pathname}`,
           /**

src/lib/components/ContractSelectSection.tsx

@@ -12,7 +12,7 @@ import type { ContractLocalInfo } from "lib/stores/contract";
 import type { ContractAddr, Option } from "lib/types";
 
 import { ExplorerLink } from "./ExplorerLink";
-import { EditContractDetails, SaveContractDetails } from "./modal";
+import { EditContractDetailsModal, SaveContractDetailsModal } from "./modal";
 import {
   SelectContractAdmin,
   SelectContractInstantiator,
@@ -68,7 +68,7 @@ const ContractDetailsButton = ({
 }: ContractDetailsButtonProps) => {
   const isExist = !!contractLocalInfo?.lists;
   return isExist ? (
-    <EditContractDetails
+    <EditContractDetailsModal
       contractLocalInfo={contractLocalInfo}
       triggerElement={
         <Button
@@ -81,7 +81,7 @@ const ContractDetailsButton = ({
       }
     />
   ) : (
-    <SaveContractDetails
+    <SaveContractDetailsModal
       contractLocalInfo={{
         contractAddress,
         instantiator,

src/lib/components/button/AdminButton.tsx

@@ -16,7 +16,7 @@ import {
   MdReadMore,
 } from "react-icons/md";
 
-import { ClearAdminContract } from "../modal/contract/ClearAdminContract";
+import { ClearAdminModal } from "../modal/contract/ClearAdmin";
 import { useInternalNavigate } from "lib/app-provider";
 import type { ContractAddr, HumanAddr, Option } from "lib/types";
 
@@ -86,7 +86,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
         >
           Update Admin
         </StyledMenuItem>
-        <ClearAdminContract
+        <ClearAdminModal
           contractAddress={contractAddress}
           triggerElement={
             <StyledMenuItem

src/lib/components/forms/ListSelection.tsx

@@ -18,7 +18,7 @@ import type { CSSProperties } from "react";
 import { useState, useRef, forwardRef } from "react";
 import { MdCheck, MdClose, MdAdd } from "react-icons/md";
 
-import { CreateNewList } from "lib/components/modal/list";
+import { CreateNewListModal } from "lib/components/modal/list";
 import { useContractStore, useUserKey } from "lib/hooks";
 import type { LVPair } from "lib/types";
 import { formatSlugName, mergeRefs } from "lib/utils";
@@ -235,7 +235,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
               ))}
               {/* creation section */}
               {canCreateOption && (
-                <CreateNewList
+                <CreateNewListModal
                   trigger={
                     <ListItem
                       w="full"

src/lib/components/modal/code/CodeDetailsTemplate.tsx

@@ -9,7 +9,7 @@ import { MAX_CODE_DESCRIPTION_LENGTH } from "lib/data";
 import { useCodeStore, useGetAddressType } from "lib/hooks";
 import type { CodeLocalInfo } from "lib/stores/code";
 
-interface CodeDetailsTemplateProps {
+interface CodeDetailsTemplateModalProps {
   title: string;
   helperText?: string;
   mainBtnTitle: string;
@@ -18,14 +18,14 @@ interface CodeDetailsTemplateProps {
   triggerElement: JSX.Element;
 }
 
-export const CodeDetailsTemplate = ({
+export const CodeDetailsTemplateModal = ({
   title,
   helperText,
   mainBtnTitle,
   isNewCode,
   codeLocalInfo,
   triggerElement,
-}: CodeDetailsTemplateProps) => {
+}: CodeDetailsTemplateModalProps) => {
   const { saveNewCode, updateCodeInfo } = useCodeStore();
   const toast = useToast();
   const getAddressType = useGetAddressType();

src/lib/components/modal/code/EditCodeDetails.tsx

@@ -1,16 +1,16 @@
 import type { CodeLocalInfo } from "lib/stores/code";
 
-import { CodeDetailsTemplate } from "./CodeDetailsTemplate";
+import { CodeDetailsTemplateModal } from "./CodeDetailsTemplate";
 
-interface EditCodeDetailsProps {
+interface EditCodeDetailsModalProps {
   codeLocalInfo: CodeLocalInfo;
   triggerElement: JSX.Element;
 }
-export const EditCodeDetails = ({
+export const EditCodeDetailsModal = ({
   codeLocalInfo,
   triggerElement,
-}: EditCodeDetailsProps) => (
-  <CodeDetailsTemplate
+}: EditCodeDetailsModalProps) => (
+  <CodeDetailsTemplateModal
     title="Edit Code Description"
     mainBtnTitle="Save"
     isNewCode={false}

src/lib/components/modal/code/RemoveCode.tsx

@@ -21,7 +21,7 @@ interface RemoveCodeModalProps {
   trigger?: JSX.Element;
 }
 
-export function RemoveCode({
+export function RemoveCodeModal({
   codeId,
   description,
   trigger = (

src/lib/components/modal/code/SaveCodeDetails.tsx

@@ -1,16 +1,16 @@
 import type { CodeLocalInfo } from "lib/stores/code";
 
-import { CodeDetailsTemplate } from "./CodeDetailsTemplate";
+import { CodeDetailsTemplateModal } from "./CodeDetailsTemplate";
 
-interface SaveCodeDetailsProps {
+interface SaveCodeDetailsModalProps {
   codeLocalInfo: CodeLocalInfo;
   triggerElement: JSX.Element;
 }
-export const SaveCodeDetails = ({
+export const SaveCodeDetailsModal = ({
   codeLocalInfo,
   triggerElement,
-}: SaveCodeDetailsProps) => (
-  <CodeDetailsTemplate
+}: SaveCodeDetailsModalProps) => (
+  <CodeDetailsTemplateModal
     title="Save New Code"
     helperText={`Save other stored codes to your "Saved Codes" list`}
     mainBtnTitle="Save New Code"

src/lib/components/modal/code/SaveNewCode.tsx

@@ -15,11 +15,11 @@ import { useCodeStore, useLCDEndpoint } from "lib/hooks";
 import { getCodeIdInfo } from "lib/services/code";
 import { getDescriptionDefault } from "lib/utils";
 
-interface ModalProps {
+interface SaveNewCodeModalProps {
   buttonProps: ButtonProps;
 }
 
-export function SaveNewCodeModal({ buttonProps }: ModalProps) {
+export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
   /* STATE */
   const [codeId, setCodeId] = useState("");
   const [codeIdStatus, setCodeIdStatus] = useState<FormStatus>({

src/lib/components/modal/code/SaveOrEditCode.tsx

@@ -4,8 +4,8 @@ import { MdBookmark, MdMode } from "react-icons/md";
 
 import type { CodeLocalInfo } from "lib/stores/code";
 
-import { EditCodeDetails } from "./EditCodeDetails";
-import { SaveCodeDetails } from "./SaveCodeDetails";
+import { EditCodeDetailsModal } from "./EditCodeDetails";
+import { SaveCodeDetailsModal } from "./SaveCodeDetails";
 
 interface SaveOrEditCodeModalProps {
   mode: "save" | "edit";
@@ -21,7 +21,7 @@ const StyledIcon = chakra(Icon, {
 export const SaveOrEditCodeModal = observer(
   ({ mode, codeLocalInfo }: SaveOrEditCodeModalProps) => {
     return mode === "save" ? (
-      <SaveCodeDetails
+      <SaveCodeDetailsModal
         codeLocalInfo={codeLocalInfo}
         triggerElement={
           <Button
@@ -33,7 +33,7 @@ export const SaveOrEditCodeModal = observer(
         }
       />
     ) : (
-      <EditCodeDetails
+      <EditCodeDetailsModal
         codeLocalInfo={codeLocalInfo}
         triggerElement={
           <Button variant="ghost-gray" leftIcon={<StyledIcon as={MdMode} />}>

src/lib/components/modal/code/SaveOrRemoveCode.tsx

@@ -3,8 +3,8 @@ import { MdBookmark, MdBookmarkBorder } from "react-icons/md";
 
 import type { CodeInfo } from "lib/types";
 
-import { RemoveCode } from "./RemoveCode";
-import { SaveCodeDetails } from "./SaveCodeDetails";
+import { RemoveCodeModal } from "./RemoveCode";
+import { SaveCodeDetailsModal } from "./SaveCodeDetails";
 
 const StyledIconButton = chakra(IconButton, {
   baseStyle: {
@@ -19,9 +19,11 @@ interface SaveOrRemoveCodeModalProps {
   codeInfo: CodeInfo;
 }
 
-export function SaveOrRemoveCode({ codeInfo }: SaveOrRemoveCodeModalProps) {
+export function SaveOrRemoveCodeModal({
+  codeInfo,
+}: SaveOrRemoveCodeModalProps) {
   return codeInfo.isSaved ? (
-    <RemoveCode
+    <RemoveCodeModal
       codeId={codeInfo.id}
       description={codeInfo.description}
       trigger={
@@ -33,7 +35,7 @@ export function SaveOrRemoveCode({ codeInfo }: SaveOrRemoveCodeModalProps) {
       }
     />
   ) : (
-    <SaveCodeDetails
+    <SaveCodeDetailsModal
       codeLocalInfo={codeInfo}
       triggerElement={
         <StyledIconButton

src/lib/components/modal/contract/AddToOtherList.tsx

@@ -10,13 +10,13 @@ import { useHandleContractSave } from "lib/hooks/useHandleSave";
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type { LVPair } from "lib/types";
 
-interface AddToOtherListProps {
+interface AddToOtherListModalProps {
   contractLocalInfo: ContractLocalInfo;
   triggerElement: JSX.Element;
 }
 
-export const AddToOtherList = observer(
-  ({ contractLocalInfo, triggerElement }: AddToOtherListProps) => {
+export const AddToOtherListModal = observer(
+  ({ contractLocalInfo, triggerElement }: AddToOtherListModalProps) => {
     const [contractLists, setContractLists] = useState<LVPair[]>([]);
 
     const handleSave = useHandleContractSave({

src/lib/components/modal/contract/ClearAdminContract.tsx → src/lib/components/modal/contract/ClearAdmin.tsx

@@ -7,15 +7,15 @@ import { useClearAdminTx } from "lib/app-provider";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import type { ContractAddr } from "lib/types";
 
-interface ClearAdminContractProps {
+interface ClearAdminModalProps {
   contractAddress: ContractAddr;
   triggerElement: JSX.Element;
 }
 
-export const ClearAdminContract = ({
+export const ClearAdminModal = ({
   contractAddress,
   triggerElement,
-}: ClearAdminContractProps) => {
+}: ClearAdminModalProps) => {
   const { broadcast } = useTxBroadcast();
   const clearAdminTx = useClearAdminTx(contractAddress);
 

src/lib/components/modal/contract/ContractDetailsTemplate.tsx

@@ -11,20 +11,20 @@ import type { ContractLocalInfo } from "lib/stores/contract";
 import type { LVPair } from "lib/types";
 import { getDescriptionDefault, getTagsDefault } from "lib/utils";
 
-interface ContractDetailsTemplateProps {
+interface ContractDetailsTemplateModalProps {
   title: string;
   subtitle?: string;
   contractLocalInfo: ContractLocalInfo;
   triggerElement: JSX.Element;
   defaultList?: LVPair[];
 }
-export const ContractDetailsTemplate = ({
+export const ContractDetailsTemplateModal = ({
   title,
   subtitle,
   contractLocalInfo,
   triggerElement,
   defaultList = [],
-}: ContractDetailsTemplateProps) => {
+}: ContractDetailsTemplateModalProps) => {
   const defaultValues = useMemo(() => {
     return {
       name: contractLocalInfo.name ?? "",

src/lib/components/modal/contract/EditContractDetails.tsx

@@ -1,16 +1,16 @@
 import type { ContractLocalInfo } from "lib/stores/contract";
 
-import { ContractDetailsTemplate } from "./ContractDetailsTemplate";
+import { ContractDetailsTemplateModal } from "./ContractDetailsTemplate";
 
-interface EditContractDetailsProps {
+interface EditContractDetailsModalProps {
   contractLocalInfo: ContractLocalInfo;
   triggerElement: JSX.Element;
 }
-export const EditContractDetails = ({
+export const EditContractDetailsModal = ({
   contractLocalInfo,
   triggerElement,
-}: EditContractDetailsProps) => (
-  <ContractDetailsTemplate
+}: EditContractDetailsModalProps) => (
+  <ContractDetailsTemplateModal
     title="Edit Contract Details"
     subtitle="Filled information below will be saved on Celatone only and able to edit later."
     contractLocalInfo={contractLocalInfo}

src/lib/components/modal/contract/RemoveContract.tsx

@@ -8,17 +8,17 @@ import type { ContractLocalInfo } from "lib/stores/contract";
 import type { LVPair } from "lib/types";
 import { truncate } from "lib/utils";
 
-interface ModalProps {
+interface RemoveContractModalProps {
   contractLocalInfo: ContractLocalInfo;
   contractRemovalInfo: LVPair;
   menuItemProps: MenuItemProps;
 }
 
-export function RemoveContract({
+export function RemoveContractModal({
   contractLocalInfo,
   contractRemovalInfo,
   menuItemProps,
-}: ModalProps) {
+}: RemoveContractModalProps) {
   const displayName = contractLocalInfo.name
     ? contractLocalInfo.name
     : truncate(contractLocalInfo.contractAddress);

src/lib/components/modal/contract/SaveContractDetails.tsx

@@ -1,17 +1,17 @@
 import { DEFAULT_LIST } from "lib/data";
 import type { ContractLocalInfo } from "lib/stores/contract";
 
-import { ContractDetailsTemplate } from "./ContractDetailsTemplate";
+import { ContractDetailsTemplateModal } from "./ContractDetailsTemplate";
 
 interface SaveContractDetailsProps {
   contractLocalInfo: ContractLocalInfo;
   triggerElement: JSX.Element;
 }
-export const SaveContractDetails = ({
+export const SaveContractDetailsModal = ({
   contractLocalInfo,
   triggerElement,
 }: SaveContractDetailsProps) => (
-  <ContractDetailsTemplate
+  <ContractDetailsTemplateModal
     title="Save Contract Details"
     contractLocalInfo={contractLocalInfo}
     triggerElement={triggerElement}

src/lib/components/modal/contract/SaveNewContract.tsx

@@ -33,11 +33,14 @@ interface SaveNewContractDetail extends OffchainDetail {
   label: string;
 }
 
-interface SaveNewContractProps {
+interface SaveNewContractModalProps {
   list: LVPair;
   buttonProps: ButtonProps;
 }
-export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
+export function SaveNewContractModal({
+  list,
+  buttonProps,
+}: SaveNewContractModalProps) {
   const endpoint = useLCDEndpoint();
   const { indexerGraphClient } = useCelatoneApp();
   const { getContractLocalInfo } = useContractStore();