From 154ddeb2daffb5c1afe5127dcd1cde3abb8cfacc Mon Sep 17 00:00:00 2001 From: poomthiti Date: Wed, 18 Jan 2023 02:22:25 +0700 Subject: [PATCH 1/5] feat: add network to url path --- src/lib/app-provider/contexts/app.tsx | 16 +++-- src/lib/app-provider/hooks/index.ts | 1 + .../app-provider/hooks/useInternalNavigate.ts | 38 ++++++++++ src/lib/components/AppLink.tsx | 31 +++++++++ src/lib/components/ExplorerLink.tsx | 6 +- .../components/button/InstantiateButton.tsx | 6 +- src/lib/components/modal/list/RemoveList.tsx | 6 +- src/lib/components/modal/tx/ButtonSection.tsx | 8 +-- src/lib/components/state/ZeroState.tsx | 6 +- src/lib/layout/Header.tsx | 27 +++++++- src/lib/layout/Navbar.tsx | 10 +-- src/lib/layout/Searchbar.tsx | 6 +- .../table/contracts/ContractTableRow.tsx | 6 +- src/lib/pages/codes/components/CodesTable.tsx | 7 +- .../pages/codes/components/UploadButton.tsx | 11 +-- .../components/CommandSection.tsx | 12 +++- .../components/ContractTop.tsx | 11 ++- .../components/ContractListTable.tsx | 16 ++--- src/lib/pages/contract-list/index.tsx | 6 +- src/lib/pages/contract-list/slug.tsx | 18 ++--- src/lib/pages/deploy/index.tsx | 8 +-- src/lib/pages/execute/index.tsx | 20 +++--- .../pages/home/components/PastTransaction.tsx | 7 +- src/lib/pages/home/components/QuickMenu.tsx | 10 +-- .../home/components/RecentActivities.tsx | 10 +-- src/lib/pages/instantiate/completed.tsx | 10 +-- .../component/InstantiateOffchainForm.tsx | 10 +-- .../pages/past-txs/components/MsgDetail.tsx | 4 +- .../pages/past-txs/components/PastTxTable.tsx | 3 +- src/lib/pages/past-txs/hooks/useRedo.ts | 36 ++++++++++ src/lib/pages/query/index.tsx | 19 +++-- src/lib/utils/index.ts | 1 - src/lib/utils/redo.ts | 31 --------- src/pages/[network]/admin.tsx | 3 + src/pages/[network]/all-codes.tsx | 3 + src/pages/[network]/code/[codeId].tsx | 3 + src/pages/[network]/codes.tsx | 3 + src/pages/[network]/contract-list/[slug].tsx | 3 + src/pages/[network]/contract-list/index.tsx | 3 + .../[network]/contract/[contractAddress].tsx | 3 + src/pages/[network]/deploy.tsx | 3 + src/pages/[network]/execute.tsx | 3 + src/pages/[network]/index.tsx | 3 + src/pages/[network]/instantiate.tsx | 3 + src/pages/[network]/migrate.tsx | 3 + src/pages/[network]/past-txs.tsx | 3 + src/pages/[network]/query.tsx | 3 + src/pages/[network]/upload.tsx | 3 + src/pages/catalog.tsx | 69 ------------------- 49 files changed, 311 insertions(+), 220 deletions(-) create mode 100644 src/lib/app-provider/hooks/useInternalNavigate.ts create mode 100644 src/lib/components/AppLink.tsx create mode 100644 src/lib/pages/past-txs/hooks/useRedo.ts delete mode 100644 src/lib/utils/redo.ts create mode 100644 src/pages/[network]/admin.tsx create mode 100644 src/pages/[network]/all-codes.tsx create mode 100644 src/pages/[network]/code/[codeId].tsx create mode 100644 src/pages/[network]/codes.tsx create mode 100644 src/pages/[network]/contract-list/[slug].tsx create mode 100644 src/pages/[network]/contract-list/index.tsx create mode 100644 src/pages/[network]/contract/[contractAddress].tsx create mode 100644 src/pages/[network]/deploy.tsx create mode 100644 src/pages/[network]/execute.tsx create mode 100644 src/pages/[network]/index.tsx create mode 100644 src/pages/[network]/instantiate.tsx create mode 100644 src/pages/[network]/migrate.tsx create mode 100644 src/pages/[network]/past-txs.tsx create mode 100644 src/pages/[network]/query.tsx create mode 100644 src/pages/[network]/upload.tsx delete mode 100644 src/pages/catalog.tsx diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx index 821e69f79..9e66523a8 100644 --- a/src/lib/app-provider/contexts/app.tsx +++ b/src/lib/app-provider/contexts/app.tsx @@ -2,6 +2,7 @@ import { useWallet } from "@cosmos-kit/react"; import big from "big.js"; import { GraphQLClient } from "graphql-request"; import { observer } from "mobx-react-lite"; +import { useRouter } from "next/router"; import type { ReactNode } from "react"; import { useEffect, useContext, useMemo, createContext } from "react"; @@ -12,7 +13,7 @@ import { getExplorerUserAddressUrl, } from "lib/app-fns/explorer"; import { LoadingOverlay } from "lib/components/LoadingOverlay"; -import { DEFAULT_ADDRESS, DEFAULT_CHAIN } from "lib/data"; +import { DEFAULT_ADDRESS } from "lib/data"; import { useCodeStore, useContractStore } from "lib/hooks"; import type { ChainGasPrice, Token, U } from "lib/types"; import { formatUserKey } from "lib/utils"; @@ -59,6 +60,7 @@ export const AppProvider = ({ appContractAddressMap, constants, }: AppProviderProps) => { + const router = useRouter(); const { currentChainName, currentChainRecord, setCurrentChain } = useWallet(); const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore(); const { setContractUserKey, isContractUserKeyExist } = useContractStore(); @@ -113,9 +115,15 @@ export const AppProvider = ({ }, [currentChainName, setCodeUserKey, setContractUserKey]); useEffect(() => { - setCurrentChain(DEFAULT_CHAIN); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + /** + * @remarks Condition checking varies by chain + */ + if (router.query.network === "testnet") { + setCurrentChain("osmosistestnet"); + } else { + setCurrentChain("osmosis"); + } + }, [router.query.network, setCurrentChain]); const AppContent = observer(() => { if (isCodeUserKeyExist() && isContractUserKeyExist()) diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts index 90eee03fc..3036534b4 100644 --- a/src/lib/app-provider/hooks/index.ts +++ b/src/lib/app-provider/hooks/index.ts @@ -5,3 +5,4 @@ export * from "./useCelatoneApp"; export * from "./useQueryCmds"; export * from "./useExecuteCmds"; export * from "./useTokensInfo"; +export * from "./useInternalNavigate"; diff --git a/src/lib/app-provider/hooks/useInternalNavigate.ts b/src/lib/app-provider/hooks/useInternalNavigate.ts new file mode 100644 index 000000000..f33cf2033 --- /dev/null +++ b/src/lib/app-provider/hooks/useInternalNavigate.ts @@ -0,0 +1,38 @@ +import { useRouter } from "next/router"; +import { useCallback } from "react"; + +import type { Dict } from "lib/types"; + +interface TransitionOptions { + shallow?: boolean; + locale?: string | false; + scroll?: boolean; + unstable_skipClientCache?: boolean; +} + +interface NavigationArgs { + pathname: string; + query?: Dict; + options?: TransitionOptions; +} + +export const useInternalNavigate = () => { + const router = useRouter(); + + return useCallback( + ({ pathname, query = {}, options = {} }: NavigationArgs) => { + router.push( + { + pathname: `/[network]${pathname}`, + query: { + network: router.query.network === "testnet" ? "testnet" : "mainnet", + ...query, + }, + }, + undefined, + options + ); + }, + [router] + ); +}; diff --git a/src/lib/components/AppLink.tsx b/src/lib/components/AppLink.tsx new file mode 100644 index 000000000..2675b0034 --- /dev/null +++ b/src/lib/components/AppLink.tsx @@ -0,0 +1,31 @@ +import { Text } from "@chakra-ui/react"; +import type { LinkProps } from "next/link"; +import Link from "next/link"; +import { useRouter } from "next/router"; + +export const AppLink = ({ + children, + ...linkProps +}: Omit, keyof LinkProps> & + LinkProps & { + children?: React.ReactNode; + } & React.RefAttributes) => { + const router = useRouter(); + const componentHref = linkProps.href.toString(); + return ( + + {typeof children === "string" ? ( + {children} + ) : ( + children + )} + + ); +}; diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx index 0b4443f91..866cacf48 100644 --- a/src/lib/components/ExplorerLink.tsx +++ b/src/lib/components/ExplorerLink.tsx @@ -1,7 +1,6 @@ import type { BoxProps } from "@chakra-ui/react"; import { Box, Text } from "@chakra-ui/react"; import { useWallet } from "@cosmos-kit/react"; -import Link from "next/link"; import { getExplorerBlockUrl, @@ -12,6 +11,7 @@ import { import type { AddressReturnType } from "lib/hooks"; import { truncate } from "lib/utils"; +import { AppLink } from "./AppLink"; import { Copier } from "./Copier"; export type LinkType = @@ -101,9 +101,9 @@ const LinkRender = ({ ); return isInternal ? ( - e.stopPropagation()}> + e.stopPropagation()}> {textElement} - + ) : ( { - const router = useRouter(); const { address } = useWallet(); + const navigate = useInternalNavigate(); const goToInstantiate = () => - router.push({ pathname: "/instantiate", query: { "code-id": codeId } }); + navigate({ pathname: "/instantiate", query: { "code-id": codeId } }); const isAllowed = permissionAddresses.includes(address as HumanAddr) || diff --git a/src/lib/components/modal/list/RemoveList.tsx b/src/lib/components/modal/list/RemoveList.tsx index 71ffb227f..16e5281f3 100644 --- a/src/lib/components/modal/list/RemoveList.tsx +++ b/src/lib/components/modal/list/RemoveList.tsx @@ -1,8 +1,8 @@ import type { MenuItemProps } from "@chakra-ui/react"; import { MenuItem, useToast, Icon, Text } from "@chakra-ui/react"; -import { useRouter } from "next/router"; import { MdDeleteForever, MdCheckCircle } from "react-icons/md"; +import { useInternalNavigate } from "lib/app-provider"; import { ActionModal } from "lib/components/modal/ActionModal"; import { useContractStore, useUserKey } from "lib/hooks"; import type { LVPair } from "lib/types"; @@ -18,10 +18,10 @@ export function RemoveList({ list, menuItemProps }: ModalProps) { const { removeList } = useContractStore(); const toast = useToast(); - const router = useRouter(); + const navigate = useInternalNavigate(); const handleRemove = () => { removeList(userKey, list.value); - router.push("/contract-list"); + navigate({ pathname: "/contract-list" }); // TODO: show toast after removed and redirect to /contract-list setTimeout(() => { toast({ diff --git a/src/lib/components/modal/tx/ButtonSection.tsx b/src/lib/components/modal/tx/ButtonSection.tsx index e683b5f15..ac7b81d1e 100644 --- a/src/lib/components/modal/tx/ButtonSection.tsx +++ b/src/lib/components/modal/tx/ButtonSection.tsx @@ -1,10 +1,10 @@ import { Button, Icon } from "@chakra-ui/react"; import { useWallet } from "@cosmos-kit/react"; -import { useRouter } from "next/router"; import { useCallback } from "react"; import { FiChevronRight } from "react-icons/fi"; import { getExplorerTxUrl } from "lib/app-fns/explorer"; +import { useInternalNavigate } from "lib/app-provider"; import type { ActionVariant, TxReceipt } from "lib/types"; interface ButtonSectionProps { @@ -18,7 +18,7 @@ export const ButtonSection = ({ onClose, receipts, }: ButtonSectionProps) => { - const router = useRouter(); + const navigate = useInternalNavigate(); const { currentChainName } = useWallet(); const openExplorer = useCallback(() => { @@ -40,7 +40,7 @@ export const ButtonSection = ({ - + ); diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx index 50f1e5971..a008597c3 100644 --- a/src/lib/layout/Searchbar.tsx +++ b/src/lib/layout/Searchbar.tsx @@ -9,11 +9,11 @@ import { Icon, useOutsideClick, } from "@chakra-ui/react"; -import { useRouter } from "next/router"; import type { ChangeEvent, KeyboardEvent } from "react"; import { useRef, useEffect, useState } from "react"; import { MdSearch } from "react-icons/md"; +import { useInternalNavigate } from "lib/app-provider"; import { useValidateAddress } from "lib/hooks"; import { isCodeId, isTxHash } from "lib/utils"; @@ -72,7 +72,7 @@ const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => { }; const Searchbar = () => { - const router = useRouter(); + const navigate = useInternalNavigate(); const { validateContractAddress, validateUserAddress } = useValidateAddress(); const [keyword, setKeyword] = useState(""); @@ -99,7 +99,7 @@ const Searchbar = () => { const handleSelectResult = (type?: SearchResultType) => { const route = type ? getRoute(type) : null; - if (route) router.push({ pathname: `${route}/${keyword}` }); + if (route) navigate({ pathname: `${route}/${keyword}` }); }; const handleOnKeyEnter = (e: KeyboardEvent) => { diff --git a/src/lib/pages/code-details/components/table/contracts/ContractTableRow.tsx b/src/lib/pages/code-details/components/table/contracts/ContractTableRow.tsx index 654b0c897..6d83fc68f 100644 --- a/src/lib/pages/code-details/components/table/contracts/ContractTableRow.tsx +++ b/src/lib/pages/code-details/components/table/contracts/ContractTableRow.tsx @@ -1,7 +1,7 @@ import { Flex, Text, Grid, IconButton, Box, chakra } from "@chakra-ui/react"; -import { useRouter } from "next/router"; import { MdBookmark, MdBookmarkBorder } from "react-icons/md"; +import { useInternalNavigate } from "lib/app-provider"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { AddToOtherList, SaveContractDetails } from "lib/components/modal"; import { TableRow } from "lib/components/table/tableComponents"; @@ -28,13 +28,13 @@ export const ContractTableRow = ({ contractInfo, templateColumnsStyle, }: ContractTableRowProps) => { - const router = useRouter(); + const navigate = useInternalNavigate(); return ( - router.push({ + navigate({ pathname: `/contract/${contractInfo.contractAddress}`, }) } diff --git a/src/lib/pages/codes/components/CodesTable.tsx b/src/lib/pages/codes/components/CodesTable.tsx index 1de9bcaa7..0e3548c5d 100644 --- a/src/lib/pages/codes/components/CodesTable.tsx +++ b/src/lib/pages/codes/components/CodesTable.tsx @@ -15,10 +15,10 @@ import { Flex, } from "@chakra-ui/react"; import { useWallet } from "@cosmos-kit/react"; -import { useRouter } from "next/router"; import type { ReactNode } from "react"; import { MdSearchOff } from "react-icons/md"; +import { useInternalNavigate } from "lib/app-provider"; import { InstantiateButton } from "lib/components/button/InstantiateButton"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { RemoveCode } from "lib/components/modal/code/RemoveCode"; @@ -124,10 +124,9 @@ const TableHead = () => { }; const TableRow = ({ code, isRemovable }: CodesRowProps) => { - const router = useRouter(); - + const navigate = useInternalNavigate(); const goToCodeDetails = () => { - router.push({ pathname: `/code/${code.id}` }); + navigate({ pathname: `/code/${code.id}` }); }; return ( diff --git a/src/lib/pages/codes/components/UploadButton.tsx b/src/lib/pages/codes/components/UploadButton.tsx index 086a53e42..37b51b2e2 100644 --- a/src/lib/pages/codes/components/UploadButton.tsx +++ b/src/lib/pages/codes/components/UploadButton.tsx @@ -1,12 +1,15 @@ import { Button } from "@chakra-ui/react"; -import { useRouter } from "next/router"; import { MdAdd } from "react-icons/md"; -export default () => { - const router = useRouter(); +import { useInternalNavigate } from "lib/app-provider"; +export default () => { + const navigate = useInternalNavigate(); return ( - ); diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx index 5974dc5d6..513e60911 100644 --- a/src/lib/pages/contract-details/components/CommandSection.tsx +++ b/src/lib/pages/contract-details/components/CommandSection.tsx @@ -1,12 +1,18 @@ import { ButtonGroup, Flex, Spinner, Text } from "@chakra-ui/react"; -import router from "next/router"; +import { useRouter } from "next/router"; -import { useExecuteCmds, useQueryCmds } from "lib/app-provider"; +import { + useExecuteCmds, + useInternalNavigate, + useQueryCmds, +} from "lib/app-provider"; import { ContractCmdButton } from "lib/components/ContractCmdButton"; import type { ContractAddr } from "lib/types"; import { encode, getFirstQueryParam, jsonPrettify } from "lib/utils"; export const CommandSection = () => { + const router = useRouter(); + const navigate = useInternalNavigate(); const contractAddress = getFirstQueryParam( router.query.contractAddress ) as ContractAddr; @@ -43,7 +49,7 @@ export const CommandSection = () => { key={`${type}-cmd-${cmd}`} cmd={cmd} onClickCmd={() => { - router.push({ + navigate({ pathname: `/${type}`, query: { contract: contractAddress, diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx index 961b42d08..d844738e2 100644 --- a/src/lib/pages/contract-details/components/ContractTop.tsx +++ b/src/lib/pages/contract-details/components/ContractTop.tsx @@ -7,7 +7,6 @@ import { Icon, IconButton, } from "@chakra-ui/react"; -import router from "next/router"; import { MdBookmark, MdBookmarkBorder, @@ -16,6 +15,7 @@ import { } from "react-icons/md"; import { RiPencilFill } from "react-icons/ri"; +import { useInternalNavigate } from "lib/app-provider"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { AddToOtherList, @@ -29,9 +29,8 @@ interface ContractTopProps { contractData: ContractData; } export const ContractTop = ({ contractData }: ContractTopProps) => { - const { contractLocalInfo } = contractData; - const { instantiateInfo } = contractData; - const { publicInfo } = contractData; + const navigate = useInternalNavigate(); + const { contractLocalInfo, instantiateInfo, publicInfo } = contractData; const contractAddress = instantiateInfo?.contractAddress as ContractAddr; @@ -39,14 +38,14 @@ export const ContractTop = ({ contractData }: ContractTopProps) => { contractLocalInfo?.name || publicInfo?.name || instantiateInfo?.label; const goToQuery = () => { - router.push({ + navigate({ pathname: "/query", query: { ...(contractAddress && { contract: contractAddress }) }, }); }; const goToExecute = () => { - router.push({ + navigate({ pathname: "/execute", query: { ...(contractAddress && { contract: contractAddress }) }, }); diff --git a/src/lib/pages/contract-list/components/ContractListTable.tsx b/src/lib/pages/contract-list/components/ContractListTable.tsx index f5862a65e..9b071eb42 100644 --- a/src/lib/pages/contract-list/components/ContractListTable.tsx +++ b/src/lib/pages/contract-list/components/ContractListTable.tsx @@ -16,8 +16,6 @@ import { chakra, MenuItem, } from "@chakra-ui/react"; -import Link from "next/link"; -import { useRouter } from "next/router"; import { MdMoreHoriz, MdMode, @@ -25,6 +23,8 @@ import { MdDelete, } from "react-icons/md"; +import { useInternalNavigate } from "lib/app-provider"; +import { AppLink } from "lib/components/AppLink"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { AddToOtherList, @@ -54,7 +54,7 @@ export const ContractListTable = ({ contracts = [], contractRemovalInfo, }: ContractListTableProps) => { - const router = useRouter(); + const navigate = useInternalNavigate(); return ( @@ -79,7 +79,7 @@ export const ContractListTable = ({ _hover={{ bg: "gray.900" }} cursor="pointer" onClick={() => - router.push({ pathname: `/contract/${item.contractAddress}` }) + navigate({ pathname: `/contract/${item.contractAddress}` }) } key={ item.name + @@ -121,16 +121,16 @@ export const ContractListTable = ({ justifyContent="flex-end" onClick={(e) => e.stopPropagation()} > - + - - + + - + { - const router = useRouter(); + const navigate = useInternalNavigate(); const { getContractLists } = useContractStore(); const contractLists = [useInstantiatedMockInfoByMe(), ...getContractLists()]; const handleListSelect = (slug: string) => { - router.push({ pathname: `/contract-list/${slug}` }); + navigate({ pathname: `/contract-list/${slug}` }); }; return ( diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index 19411f2ce..6509c7653 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -8,7 +8,6 @@ import { MenuList, Breadcrumb, BreadcrumbItem, - BreadcrumbLink, Box, Text, chakra, @@ -25,6 +24,8 @@ import { MdChevronRight, } from "react-icons/md"; +import { useInternalNavigate } from "lib/app-provider"; +import { AppLink } from "lib/components/AppLink"; import { SaveNewContract } from "lib/components/modal/contract"; import { EditList, RemoveList } from "lib/components/modal/list"; import { ContractListDetail } from "lib/components/modal/select-contract"; @@ -43,6 +44,7 @@ const StyledIcon = chakra(Icon, { const ContractsByList = observer(() => { const router = useRouter(); + const navigate = useInternalNavigate(); const listSlug = getFirstQueryParam(router.query.slug); const { getContractLists, isHydrated } = useContractStore(); @@ -57,9 +59,9 @@ const ContractsByList = observer(() => { useEffect(() => { if (isHydrated && contractListInfo === undefined) { - router.push("/contract-list"); + navigate({ pathname: "/contract-list" }); } - }, [contractListInfo, router, isHydrated]); + }, [contractListInfo, isHydrated, navigate]); if (!contractListInfo) return null; @@ -72,12 +74,12 @@ const ContractsByList = observer(() => { separator={} > - + Contract Lists - + - + { > {contractListInfo.name} - + { {isInstantiatedByMe ? ( diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx index 001293ac6..13b825152 100644 --- a/src/lib/pages/deploy/index.tsx +++ b/src/lib/pages/deploy/index.tsx @@ -1,12 +1,12 @@ import { Heading, Text } from "@chakra-ui/react"; -import { useRouter } from "next/router"; +import { useInternalNavigate } from "lib/app-provider"; import { ButtonCard } from "lib/components/ButtonCard"; import { Stepper } from "lib/components/stepper"; import WasmPageContainer from "lib/components/WasmPageContainer"; const Deploy = () => { - const router = useRouter(); + const navigate = useInternalNavigate(); return ( @@ -19,13 +19,13 @@ const Deploy = () => { router.push("/upload")} + onClick={() => navigate({ pathname: "/upload" })} mb="16px" /> router.push("/instantiate")} + onClick={() => navigate({ pathname: "/instantiate" })} /> ); diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx index 4970d92f9..60324ef0f 100644 --- a/src/lib/pages/execute/index.tsx +++ b/src/lib/pages/execute/index.tsx @@ -4,7 +4,7 @@ import { useRouter } from "next/router"; import { useCallback, useEffect } from "react"; import { useForm } from "react-hook-form"; -import { useExecuteCmds } from "lib/app-provider"; +import { useExecuteCmds, useInternalNavigate } from "lib/app-provider"; import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert"; import { ContractSelectSection } from "lib/components/ContractSelectSection"; import { LoadingOverlay } from "lib/components/LoadingOverlay"; @@ -22,6 +22,7 @@ import type { ExecutePageState } from "./types"; const Execute = () => { const router = useRouter(); + const navigate = useInternalNavigate(); const { control, setValue, watch } = useForm({ mode: "all", defaultValues: { @@ -35,7 +36,7 @@ const Execute = () => { const { isFetching, execCmds } = useExecuteCmds(watchContractAddress); const goToQuery = () => { - router.push({ + navigate({ pathname: "/query", query: { ...(watchContractAddress && { contract: watchContractAddress }), @@ -45,16 +46,13 @@ const Execute = () => { const onContractSelect = useCallback( (contract: ContractAddr) => { - router.push( - { - pathname: "/execute", - query: { ...(contract && { contract }) }, - }, - undefined, - { shallow: true } - ); + navigate({ + pathname: "/execute", + query: { ...(contract && { contract }) }, + options: { shallow: true }, + }); }, - [router] + [navigate] ); useEffect(() => { diff --git a/src/lib/pages/home/components/PastTransaction.tsx b/src/lib/pages/home/components/PastTransaction.tsx index 4841d3d29..94871e4e1 100644 --- a/src/lib/pages/home/components/PastTransaction.tsx +++ b/src/lib/pages/home/components/PastTransaction.tsx @@ -1,5 +1,6 @@ import { Heading, Box, Flex, Text } from "@chakra-ui/react"; -import Link from "next/link"; + +import { AppLink } from "lib/components/AppLink"; /* TODO: Delete after past tx page is done */ export const PastTransaction = () => { @@ -20,9 +21,9 @@ export const PastTransaction = () => { Your past transactions will display here. You also able can view all - + Past Transactions - + ); diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx index 4670430ef..dbd736b52 100644 --- a/src/lib/pages/home/components/QuickMenu.tsx +++ b/src/lib/pages/home/components/QuickMenu.tsx @@ -1,7 +1,7 @@ import { Flex, Heading, Box, Text, Icon } from "@chakra-ui/react"; -import Link from "next/link"; import { MdChevronRight, MdSearch, MdInput } from "react-icons/md"; +import { AppLink } from "lib/components/AppLink"; import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert"; // TODO remove link text-decoration underline @@ -38,7 +38,7 @@ export const QuickMenu = () => { subtitle="Actions such as deploying new contracts or sending execute messages require a wallet connection." /> - + { - + {secondaryMenu.map((item) => ( - + { - + ))} diff --git a/src/lib/pages/home/components/RecentActivities.tsx b/src/lib/pages/home/components/RecentActivities.tsx index fb4c70a17..82d3620e8 100644 --- a/src/lib/pages/home/components/RecentActivities.tsx +++ b/src/lib/pages/home/components/RecentActivities.tsx @@ -1,17 +1,17 @@ import { Flex, Heading, Box, Text, Icon } from "@chakra-ui/react"; import dayjs from "dayjs"; import { observer } from "mobx-react-lite"; -import { useRouter } from "next/router"; import { useMemo } from "react"; import { MdSearch, MdInput } from "react-icons/md"; +import { useInternalNavigate } from "lib/app-provider"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { useContractStore, useUserKey } from "lib/hooks"; export const RecentActivities = observer(() => { const userKey = useUserKey(); const { getRecentActivities, isHydrated } = useContractStore(); - const router = useRouter(); + const navigate = useInternalNavigate(); const activities = useMemo(() => { return getRecentActivities(userKey); @@ -38,9 +38,9 @@ export const RecentActivities = observer(() => { transition="all .25s ease-in-out" key={item.type + item.contractAddress + item.timestamp} onClick={() => - router.push( - `/${item.type}?contract=${item.contractAddress}&msg=${item.msg}` - ) + navigate({ + pathname: `/${item.type}?contract=${item.contractAddress}&msg=${item.msg}`, + }) } > diff --git a/src/lib/pages/instantiate/completed.tsx b/src/lib/pages/instantiate/completed.tsx index ce5ada0f0..7bb40421e 100644 --- a/src/lib/pages/instantiate/completed.tsx +++ b/src/lib/pages/instantiate/completed.tsx @@ -1,7 +1,7 @@ import { Flex, Icon, Heading, Button } from "@chakra-ui/react"; -import { useRouter } from "next/router"; import { MdCheckCircle } from "react-icons/md"; +import { useInternalNavigate } from "lib/app-provider"; import { ExplorerLink } from "lib/components/ExplorerLink"; import { TxReceiptRender } from "lib/components/tx/receipt"; import WasmPageContainer from "lib/components/WasmPageContainer"; @@ -16,7 +16,7 @@ interface CompletedProps { } const Completed = ({ txInfo }: CompletedProps) => { - const router = useRouter(); + const navigate = useInternalNavigate(); return ( @@ -64,7 +64,7 @@ const Completed = ({ txInfo }: CompletedProps) => { w="full" variant="outline-gray" onClick={() => - router.push({ pathname: `/contract/${txInfo.contractAddress}` }) + navigate({ pathname: `/contract/${txInfo.contractAddress}` }) } > View Contract @@ -73,7 +73,7 @@ const Completed = ({ txInfo }: CompletedProps) => { w="full" variant="outline-gray" onClick={() => - router.push({ + navigate({ pathname: "/execute", query: { contract: txInfo.contractAddress }, }) @@ -85,7 +85,7 @@ const Completed = ({ txInfo }: CompletedProps) => { w="full" variant="outline-gray" onClick={() => - router.push({ + navigate({ pathname: "/query", query: { contract: txInfo.contractAddress }, }) diff --git a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx index d84fe9744..7a90b0d25 100644 --- a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx +++ b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx @@ -1,9 +1,9 @@ import { Text, Flex, Heading, Button } from "@chakra-ui/react"; import { useWallet } from "@cosmos-kit/react"; import { observer } from "mobx-react-lite"; -import { useRouter } from "next/router"; import { useForm } from "react-hook-form"; +import { useInternalNavigate } from "lib/app-provider"; import { OffChainForm } from "lib/components/OffChainForm"; import type { OffchainDetail } from "lib/components/OffChainForm"; import { useContractStore } from "lib/hooks"; @@ -27,7 +27,7 @@ export const InstantiateOffChainForm = observer( contractLabel, }: InstantiateOffChainFormProps) => { const { address = "" } = useWallet(); - const router = useRouter(); + const navigate = useInternalNavigate(); const { updateContractLocalInfo } = useContractStore(); const userKey = useUserKey(); @@ -72,7 +72,7 @@ export const InstantiateOffChainForm = observer( data.tags, data.lists ); - router.push("/contract-list/instantiated-by-me"); + navigate({ pathname: "/contract-list/instantiated-by-me" }); })(); }; @@ -107,7 +107,9 @@ export const InstantiateOffChainForm = observer( diff --git a/src/lib/pages/past-txs/components/MsgDetail.tsx b/src/lib/pages/past-txs/components/MsgDetail.tsx index e217d365e..d07e3abaf 100644 --- a/src/lib/pages/past-txs/components/MsgDetail.tsx +++ b/src/lib/pages/past-txs/components/MsgDetail.tsx @@ -4,6 +4,7 @@ import { useWallet } from "@cosmos-kit/react"; import { useCallback, useMemo, useState } from "react"; import { BsArrowCounterclockwise } from "react-icons/bs"; +import { useRedo } from "../hooks/useRedo"; import { useFabricateFee, useSimulateFee, useResendTx } from "lib/app-provider"; import { AccordionStepperItem } from "lib/components/AccordionStepperItem"; import type { SingleMsgProps } from "lib/components/action-msg/SingleMsg"; @@ -26,7 +27,6 @@ import { formatUDenom, formatUToken, extractMsgType, - onClickRedo, } from "lib/utils"; interface MsgDetailProps { @@ -35,6 +35,8 @@ interface MsgDetailProps { } export const MsgDetail = ({ msg, success }: MsgDetailProps) => { + const onClickRedo = useRedo(); + const [button, setButton] = useState<"redo" | "resend" | "">(""); const [showButton, setShowButton] = useState(false); const { currentChainName } = useWallet(); diff --git a/src/lib/pages/past-txs/components/PastTxTable.tsx b/src/lib/pages/past-txs/components/PastTxTable.tsx index ec7bc8468..4b3a28eb9 100644 --- a/src/lib/pages/past-txs/components/PastTxTable.tsx +++ b/src/lib/pages/past-txs/components/PastTxTable.tsx @@ -17,6 +17,7 @@ import type { MouseEvent } from "react"; import { BsArrowCounterclockwise } from "react-icons/bs"; import { MdCheck, MdClose, MdKeyboardArrowDown } from "react-icons/md"; +import { useRedo } from "../hooks/useRedo"; import { useFabricateFee, useSimulateFee } from "lib/app-provider"; import { useResendTx } from "lib/app-provider/tx/resend"; import type { SingleMsgProps } from "lib/components/action-msg/SingleMsg"; @@ -40,7 +41,6 @@ import { formatUDenom, formatUToken, extractMsgType, - onClickRedo, } from "lib/utils"; import { MsgDetail } from "./MsgDetail"; @@ -52,6 +52,7 @@ interface PastTxTableProps { } const PastTxTable = ({ element }: PastTxTableProps) => { + const onClickRedo = useRedo(); const { isOpen, onToggle } = useDisclosure(); const [isAccordion, setIsAccordion] = useState(false); const [button, setButton] = useState<"redo" | "resend" | "">(""); diff --git a/src/lib/pages/past-txs/hooks/useRedo.ts b/src/lib/pages/past-txs/hooks/useRedo.ts new file mode 100644 index 000000000..61a211729 --- /dev/null +++ b/src/lib/pages/past-txs/hooks/useRedo.ts @@ -0,0 +1,36 @@ +import { useCallback } from "react"; + +import { useInternalNavigate } from "lib/app-provider"; +import type { Msg } from "lib/types"; +import { encode, camelToSnake } from "lib/utils"; + +export const useRedo = () => { + const navigate = useInternalNavigate(); + + return useCallback( + ( + e: React.MouseEvent, + type: string | undefined, + msg: Msg, + chainName: string + ) => { + e.stopPropagation(); + if (!type || !msg) return null; + if (type === "MsgExecuteContract") { + const encodeMsg = encode(JSON.stringify(camelToSnake(msg.msg))); + navigate({ + pathname: "/execute", + query: { chainName, contract: msg.contract, msg: encodeMsg }, + }); + } else if (type === "MsgInstantiateContract") { + const encodeMsg = encode(JSON.stringify(camelToSnake(msg))); + navigate({ + pathname: "/instantiate", + query: { chainName, msg: encodeMsg }, + }); + } + return null; + }, + [navigate] + ); +}; diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx index 90c197e09..4df2b3356 100644 --- a/src/lib/pages/query/index.tsx +++ b/src/lib/pages/query/index.tsx @@ -5,6 +5,7 @@ import type { AxiosError } from "axios"; import { useRouter } from "next/router"; import { useCallback, useEffect, useState } from "react"; +import { useInternalNavigate } from "lib/app-provider"; import { ContractSelectSection } from "lib/components/ContractSelectSection"; import { LoadingOverlay } from "lib/components/LoadingOverlay"; import PageContainer from "lib/components/PageContainer"; @@ -22,6 +23,7 @@ import { QueryArea } from "./components/QueryArea"; const Query = () => { const router = useRouter(); + const navigate = useInternalNavigate(); const endpoint = useEndpoint(); const [contractAddress, setContractAddress] = useState("" as ContractAddr); @@ -29,7 +31,7 @@ const Query = () => { const [cmds, setCmds] = useState<[string, string][]>([]); const goToExecute = () => { - router.push({ + navigate({ pathname: "/execute", query: { ...(contractAddress && { contract: contractAddress }) }, }); @@ -37,16 +39,13 @@ const Query = () => { const onContractSelect = useCallback( (contract: ContractAddr) => { - router.push( - { - pathname: "/query", - query: { ...(contract && { contract }) }, - }, - undefined, - { shallow: true } - ); + navigate({ + pathname: "/query", + query: { ...(contract && { contract }) }, + options: { shallow: true }, + }); }, - [router] + [navigate] ); // TODO: Abstract query and make query key diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts index 0fbfcaf85..c4c0280d6 100644 --- a/src/lib/utils/index.ts +++ b/src/lib/utils/index.ts @@ -9,7 +9,6 @@ export * from "./truncate"; export * from "./number"; export * from "./isDecimalNumber"; export * from "./extractMsgType"; -export * from "./redo"; export * from "./scroll"; export * from "./textLine"; export * from "./date"; diff --git a/src/lib/utils/redo.ts b/src/lib/utils/redo.ts deleted file mode 100644 index 46eea9943..000000000 --- a/src/lib/utils/redo.ts +++ /dev/null @@ -1,31 +0,0 @@ -import router from "next/router"; - -import type { Msg } from "lib/types"; - -// TODO - Revisit, got 'Dependency cycle detected' -import { encode } from "./base64"; -import { camelToSnake } from "./formatter"; - -export const onClickRedo = ( - e: React.MouseEvent, - type: string | undefined, - msg: Msg, - chainName: string -) => { - e.stopPropagation(); - if (!type || !msg) return null; - if (type === "MsgExecuteContract") { - const encodeMsg = encode(JSON.stringify(camelToSnake(msg.msg))); - router.push({ - pathname: "/execute", - query: { chainName, contract: msg.contract, msg: encodeMsg }, - }); - } else if (type === "MsgInstantiateContract") { - const encodeMsg = encode(JSON.stringify(camelToSnake(msg))); - router.push({ - pathname: "/instantiate", - query: { chainName, msg: encodeMsg }, - }); - } - return null; -}; diff --git a/src/pages/[network]/admin.tsx b/src/pages/[network]/admin.tsx new file mode 100644 index 000000000..d17f2a5c8 --- /dev/null +++ b/src/pages/[network]/admin.tsx @@ -0,0 +1,3 @@ +import UpdateAdmin from "lib/pages/update-admin"; + +export default UpdateAdmin; diff --git a/src/pages/[network]/all-codes.tsx b/src/pages/[network]/all-codes.tsx new file mode 100644 index 000000000..00c7333be --- /dev/null +++ b/src/pages/[network]/all-codes.tsx @@ -0,0 +1,3 @@ +import AllCodes from "lib/pages/all-codes"; + +export default AllCodes; diff --git a/src/pages/[network]/code/[codeId].tsx b/src/pages/[network]/code/[codeId].tsx new file mode 100644 index 000000000..5442c3a10 --- /dev/null +++ b/src/pages/[network]/code/[codeId].tsx @@ -0,0 +1,3 @@ +import CodeDetails from "lib/pages/code-details"; + +export default CodeDetails; diff --git a/src/pages/[network]/codes.tsx b/src/pages/[network]/codes.tsx new file mode 100644 index 000000000..4a19ab5f8 --- /dev/null +++ b/src/pages/[network]/codes.tsx @@ -0,0 +1,3 @@ +import Codes from "lib/pages/codes"; + +export default Codes; diff --git a/src/pages/[network]/contract-list/[slug].tsx b/src/pages/[network]/contract-list/[slug].tsx new file mode 100644 index 000000000..cf30d4062 --- /dev/null +++ b/src/pages/[network]/contract-list/[slug].tsx @@ -0,0 +1,3 @@ +import ContractsByList from "lib/pages/contract-list/slug"; + +export default ContractsByList; diff --git a/src/pages/[network]/contract-list/index.tsx b/src/pages/[network]/contract-list/index.tsx new file mode 100644 index 000000000..719d24905 --- /dev/null +++ b/src/pages/[network]/contract-list/index.tsx @@ -0,0 +1,3 @@ +import AllContractListsPage from "lib/pages/contract-list"; + +export default AllContractListsPage; diff --git a/src/pages/[network]/contract/[contractAddress].tsx b/src/pages/[network]/contract/[contractAddress].tsx new file mode 100644 index 000000000..5776fddfd --- /dev/null +++ b/src/pages/[network]/contract/[contractAddress].tsx @@ -0,0 +1,3 @@ +import ContractDetails from "lib/pages/contract-details"; + +export default ContractDetails; diff --git a/src/pages/[network]/deploy.tsx b/src/pages/[network]/deploy.tsx new file mode 100644 index 000000000..0a07927df --- /dev/null +++ b/src/pages/[network]/deploy.tsx @@ -0,0 +1,3 @@ +import Deploy from "lib/pages/deploy"; + +export default Deploy; diff --git a/src/pages/[network]/execute.tsx b/src/pages/[network]/execute.tsx new file mode 100644 index 000000000..e4d0a2e99 --- /dev/null +++ b/src/pages/[network]/execute.tsx @@ -0,0 +1,3 @@ +import Execute from "lib/pages/execute"; + +export default Execute; diff --git a/src/pages/[network]/index.tsx b/src/pages/[network]/index.tsx new file mode 100644 index 000000000..7400afb8e --- /dev/null +++ b/src/pages/[network]/index.tsx @@ -0,0 +1,3 @@ +import Home from "lib/pages/home"; + +export default Home; diff --git a/src/pages/[network]/instantiate.tsx b/src/pages/[network]/instantiate.tsx new file mode 100644 index 000000000..80db1424b --- /dev/null +++ b/src/pages/[network]/instantiate.tsx @@ -0,0 +1,3 @@ +import Instantiate from "lib/pages/instantiate"; + +export default Instantiate; diff --git a/src/pages/[network]/migrate.tsx b/src/pages/[network]/migrate.tsx new file mode 100644 index 000000000..da326cfdc --- /dev/null +++ b/src/pages/[network]/migrate.tsx @@ -0,0 +1,3 @@ +import Migrate from "lib/pages/migrate"; + +export default Migrate; diff --git a/src/pages/[network]/past-txs.tsx b/src/pages/[network]/past-txs.tsx new file mode 100644 index 000000000..a1d23196f --- /dev/null +++ b/src/pages/[network]/past-txs.tsx @@ -0,0 +1,3 @@ +import PastTxs from "lib/pages/past-txs"; + +export default PastTxs; diff --git a/src/pages/[network]/query.tsx b/src/pages/[network]/query.tsx new file mode 100644 index 000000000..90eb8c7fd --- /dev/null +++ b/src/pages/[network]/query.tsx @@ -0,0 +1,3 @@ +import Query from "lib/pages/query"; + +export default Query; diff --git a/src/pages/[network]/upload.tsx b/src/pages/[network]/upload.tsx new file mode 100644 index 000000000..cc08b9343 --- /dev/null +++ b/src/pages/[network]/upload.tsx @@ -0,0 +1,3 @@ +import Upload from "lib/pages/upload"; + +export default Upload; diff --git a/src/pages/catalog.tsx b/src/pages/catalog.tsx deleted file mode 100644 index fd28e1e51..000000000 --- a/src/pages/catalog.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { Flex, Heading, Text, Button } from "@chakra-ui/react"; - -import PageContainer from "lib/components/PageContainer"; - -/* remove later */ -const Home = () => { - return ( - - - - What a Dev Tool - - - What a Dev Tool - - For the sake of Cosmos - - For the sake of Cosmos - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default Home; From 6abf1c20a33403880a512c400ad2aaa5f663e934 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Wed, 18 Jan 2023 02:27:37 +0700 Subject: [PATCH 2/5] chore: add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ec5eacc80..8767da2a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features +- [#95](https://github.com/alleslabs/celatone-frontend/pull/95) Add network to url path - [#90](https://github.com/alleslabs/celatone-frontend/pull/90) Add update admin (`/admin`) and migrate (`/migrate`) page routes - [#91](https://github.com/alleslabs/celatone-frontend/pull/91) Add migrate shortcut to the sidebar - [#75](https://github.com/alleslabs/celatone-frontend/pull/75) Add code-related contracts table to the code detail page From 94be9990b37d5e6787f431c1074db1a197fe1f0f Mon Sep 17 00:00:00 2001 From: poomthiti Date: Wed, 18 Jan 2023 10:25:54 +0700 Subject: [PATCH 3/5] refactor: change default to testnet --- src/lib/app-provider/contexts/app.tsx | 6 +++--- src/lib/app-provider/hooks/useInternalNavigate.ts | 2 +- src/lib/components/AppLink.tsx | 6 +++--- src/lib/layout/Header.tsx | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx index 9e66523a8..5b90d2dbe 100644 --- a/src/lib/app-provider/contexts/app.tsx +++ b/src/lib/app-provider/contexts/app.tsx @@ -118,10 +118,10 @@ export const AppProvider = ({ /** * @remarks Condition checking varies by chain */ - if (router.query.network === "testnet") { - setCurrentChain("osmosistestnet"); - } else { + if (router.query.network === "mainnet") { setCurrentChain("osmosis"); + } else { + setCurrentChain("osmosistestnet"); } }, [router.query.network, setCurrentChain]); diff --git a/src/lib/app-provider/hooks/useInternalNavigate.ts b/src/lib/app-provider/hooks/useInternalNavigate.ts index f33cf2033..19c7e2d4c 100644 --- a/src/lib/app-provider/hooks/useInternalNavigate.ts +++ b/src/lib/app-provider/hooks/useInternalNavigate.ts @@ -25,7 +25,7 @@ export const useInternalNavigate = () => { { pathname: `/[network]${pathname}`, query: { - network: router.query.network === "testnet" ? "testnet" : "mainnet", + network: router.query.network === "mainnet" ? "mainnet" : "testnet", ...query, }, }, diff --git a/src/lib/components/AppLink.tsx b/src/lib/components/AppLink.tsx index 2675b0034..b8d88fd5f 100644 --- a/src/lib/components/AppLink.tsx +++ b/src/lib/components/AppLink.tsx @@ -16,9 +16,9 @@ export const AppLink = ({ {typeof children === "string" ? ( diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx index 1fbd1f530..8c59a98ad 100644 --- a/src/lib/layout/Header.tsx +++ b/src/lib/layout/Header.tsx @@ -33,7 +33,7 @@ const Header = () => { /** * @remarks Condition checking varies by chain */ - network: chainName === "osmosistestnet" ? "testnet" : "mainnet", + network: chainName === "osmosis" ? "mainnet" : "testnet", }, }); }, From 2f90c985d806bcd5f1992abca4df41103761e19e Mon Sep 17 00:00:00 2001 From: poomthiti Date: Wed, 18 Jan 2023 13:54:07 +0700 Subject: [PATCH 4/5] refactor: change types and add todos --- src/lib/app-provider/contexts/app.tsx | 1 + .../app-provider/hooks/useInternalNavigate.ts | 18 +++++++----------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx index 5b90d2dbe..8b05e8cc3 100644 --- a/src/lib/app-provider/contexts/app.tsx +++ b/src/lib/app-provider/contexts/app.tsx @@ -117,6 +117,7 @@ export const AppProvider = ({ useEffect(() => { /** * @remarks Condition checking varies by chain + * @todos Change default to mainnet later (currently is testnet) */ if (router.query.network === "mainnet") { setCurrentChain("osmosis"); diff --git a/src/lib/app-provider/hooks/useInternalNavigate.ts b/src/lib/app-provider/hooks/useInternalNavigate.ts index 19c7e2d4c..00b5d0c3f 100644 --- a/src/lib/app-provider/hooks/useInternalNavigate.ts +++ b/src/lib/app-provider/hooks/useInternalNavigate.ts @@ -1,19 +1,12 @@ import { useRouter } from "next/router"; +import type { Router } from "next/router"; +import type { ParsedUrlQueryInput } from "node:querystring"; import { useCallback } from "react"; -import type { Dict } from "lib/types"; - -interface TransitionOptions { - shallow?: boolean; - locale?: string | false; - scroll?: boolean; - unstable_skipClientCache?: boolean; -} - interface NavigationArgs { pathname: string; - query?: Dict; - options?: TransitionOptions; + query?: ParsedUrlQueryInput; + options?: Parameters["push"]>[2]; } export const useInternalNavigate = () => { @@ -24,6 +17,9 @@ export const useInternalNavigate = () => { router.push( { pathname: `/[network]${pathname}`, + /** + * @todos Change default to mainnet later (right now is testnet) + */ query: { network: router.query.network === "mainnet" ? "mainnet" : "testnet", ...query, From 4e5e462128e2d5e6a3084a276e0eda3cc9f0759f Mon Sep 17 00:00:00 2001 From: poomthiti Date: Wed, 18 Jan 2023 15:13:56 +0700 Subject: [PATCH 5/5] fix: as commented --- src/lib/components/AppLink.tsx | 6 +----- src/lib/pages/contract-list/slug.tsx | 18 ++++++++---------- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/lib/components/AppLink.tsx b/src/lib/components/AppLink.tsx index b8d88fd5f..57399fe47 100644 --- a/src/lib/components/AppLink.tsx +++ b/src/lib/components/AppLink.tsx @@ -1,15 +1,11 @@ import { Text } from "@chakra-ui/react"; -import type { LinkProps } from "next/link"; import Link from "next/link"; import { useRouter } from "next/router"; export const AppLink = ({ children, ...linkProps -}: Omit, keyof LinkProps> & - LinkProps & { - children?: React.ReactNode; - } & React.RefAttributes) => { +}: React.ComponentProps) => { const router = useRouter(); const componentHref = linkProps.href.toString(); return ( diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index 6509c7653..f4c0c0ca5 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -79,16 +79,14 @@ const ContractsByList = observer(() => { - - - {contractListInfo.name} - - + + {contractListInfo.name} +