From d7df339cdc1f6491c5913b6e59b6237596221631 Mon Sep 17 00:00:00 2001 From: evilpeach Date: Thu, 1 Aug 2024 11:55:46 +0700 Subject: [PATCH] feat: add remove modal, view json --- CHANGELOG.md | 2 + .../modal/RemoveChainConfigModal.tsx | 59 ++++ .../network-card/NetworkCardCta.tsx | 9 +- src/lib/pages/network-config/index.tsx | 267 +++++++++++------- .../{index.tsx => [chainId].tsx} | 0 .../{index.tsx => [chainId].tsx} | 0 6 files changed, 228 insertions(+), 109 deletions(-) create mode 100644 src/lib/components/modal/RemoveChainConfigModal.tsx rename src/pages/[network]/network-config/{index.tsx => [chainId].tsx} (100%) rename src/pages/network-config/{index.tsx => [chainId].tsx} (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index de9c959ce..d3cf7f3f8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,10 +39,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features +- [#1058](https://github.com/alleslabs/celatone-frontend/pull/1058) Show chain config JSON and remove modal - [#1057](https://github.com/alleslabs/celatone-frontend/pull/1057) Add local minitias to network selector - [#1043](https://github.com/alleslabs/celatone-frontend/pull/1043) Save custom minitias JSON form to localstorage - [#1059](https://github.com/alleslabs/celatone-frontend/pull/1059) Disable add custom networks on non initia deployments - [#1052](https://github.com/alleslabs/celatone-frontend/pull/1052) Add entry point to add custom minitias network in network selector +- [#1043](https://github.com/alleslabs/celatone-frontend/pull/1043) Save custom minitias JSON form to localstorage - [#1038](https://github.com/alleslabs/celatone-frontend/pull/1038) Add custom networks options page to navigate between manual and upload json - [#1054](https://github.com/alleslabs/celatone-frontend/pull/1054) Add chain config store, useChainConfig hook, and apply it all places diff --git a/src/lib/components/modal/RemoveChainConfigModal.tsx b/src/lib/components/modal/RemoveChainConfigModal.tsx new file mode 100644 index 000000000..580d82b9a --- /dev/null +++ b/src/lib/components/modal/RemoveChainConfigModal.tsx @@ -0,0 +1,59 @@ +import { Text, useToast } from "@chakra-ui/react"; +import type { ReactNode } from "react"; + +import { useInternalNavigate } from "lib/app-provider"; +import { CustomIcon } from "lib/components/icon"; +import { useChainConfigStore } from "lib/providers/store"; + +import { ActionModal } from "./ActionModal"; + +interface RemoveChainConfigModalProps { + chainId: string; + trigger: ReactNode; +} + +export function RemoveChainConfigModal({ + chainId, + trigger, +}: RemoveChainConfigModalProps) { + const { removeChainConfig, getChainConfig } = useChainConfigStore(); + const navigate = useInternalNavigate(); + + const chainConfig = getChainConfig(chainId); + + const toast = useToast(); + const handleRemove = () => { + removeChainConfig(chainId); + navigate({ pathname: "/", replace: true }); + + setTimeout(() => { + toast({ + title: `Removed '${chainConfig?.prettyName}'`, + status: "success", + duration: 5000, + isClosable: false, + position: "bottom-right", + icon: , + }); + }, 1000); + }; + + return ( + + + All information about your Minitia will be lost and can‘t be + recovered. You can save this address again later, but you will need to + add its new address name. + + + ); +} diff --git a/src/lib/layout/network-menu/network-card/NetworkCardCta.tsx b/src/lib/layout/network-menu/network-card/NetworkCardCta.tsx index 5d318c16d..28c63c3ad 100644 --- a/src/lib/layout/network-menu/network-card/NetworkCardCta.tsx +++ b/src/lib/layout/network-menu/network-card/NetworkCardCta.tsx @@ -94,7 +94,14 @@ export const NetworkCardCta = observer( {isEditable && ( navigate({ pathname: "/network-config" })} + onClick={() => + navigate({ + pathname: "/network-config", + query: { + chainId, + }, + }) + } > diff --git a/src/lib/pages/network-config/index.tsx b/src/lib/pages/network-config/index.tsx index bdbc6d4e6..a3646ca6a 100644 --- a/src/lib/pages/network-config/index.tsx +++ b/src/lib/pages/network-config/index.tsx @@ -1,120 +1,171 @@ -import { - Button, - chakra, - Flex, - Grid, - TabList, - TabPanel, - TabPanels, - Tabs, - Tag, -} from "@chakra-ui/react"; +import { Button, Grid, Heading, Stack } from "@chakra-ui/react"; +import { isUndefined } from "lodash"; +import { useRouter } from "next/router"; +import { z } from "zod"; import { useAllowCustomNetworks } from "lib/app-provider"; import ActionPageContainer from "lib/components/ActionPageContainer"; -import { - CustomNetworkFooterCta, - CustomNetworkPageHeader, -} from "lib/components/custom-network"; -import { CustomTab } from "lib/components/CustomTab"; +import { CustomNetworkPageHeader } from "lib/components/custom-network"; +// import { CustomTab } from "lib/components/CustomTab"; import { CustomIcon } from "lib/components/icon"; +import JsonReadOnly from "lib/components/json/JsonReadOnly"; +import { RemoveChainConfigModal } from "lib/components/modal/RemoveChainConfigModal"; +import { InvalidState } from "lib/components/state"; +import { useChainConfigStore } from "lib/providers/store"; +import { jsonPrettify } from "lib/utils"; -import { ExportNetworkConfig } from "./components/ExportNetworkConfig"; -import { UpdateGasFeeDetails } from "./components/UpdateGasFeeDetails"; -import { UpdateNetworkDetails } from "./components/UpdateNetworkDetails"; -import { UpdateSupportedFeatures } from "./components/UpdateSupportedFeatures"; -import { UpdateWalletRegistry } from "./components/UpdateWalletRegistry"; - -const StyledCustomTab = chakra(CustomTab, { - baseStyle: { - border: "unset", - borderRadius: "4px", - _selected: { bgColor: "gray.800" }, - _hover: { bgColor: "gray.700" }, - }, -}); - -const StyledTabPanel = chakra(TabPanel, { - baseStyle: { - p: 0, - width: "550px", - minWidth: "550px", - }, -}); - -const TabMenu = [ - { name: "Network Details", key: "network-details" }, - { name: "Supported Features", key: "supported-features" }, - { name: "Gas & Fee Details", key: "gas-fee-details" }, - { name: "Wallet Registry", key: "wallet-registry" }, -]; +// import { ExportNetworkConfig } from "./components/ExportNetworkConfig"; +// import { UpdateGasFeeDetails } from "./components/UpdateGasFeeDetails"; +// import { UpdateNetworkDetails } from "./components/UpdateNetworkDetails"; +// import { UpdateSupportedFeatures } from "./components/UpdateSupportedFeatures"; +// import { UpdateWalletRegistry } from "./components/UpdateWalletRegistry"; -export const NetworkConfig = () => { - useAllowCustomNetworks({ shouldRedirect: true }); +// const StyledCustomTab = chakra(CustomTab, { +// baseStyle: { +// border: "unset", +// borderRadius: "4px", +// _selected: { bgColor: "gray.800" }, +// _hover: { bgColor: "gray.700" }, +// }, +// }); + +// const StyledTabPanel = chakra(TabPanel, { +// baseStyle: { +// p: 0, +// width: "550px", +// minWidth: "550px", +// }, +// }); + +// const TabMenu = [ +// { name: "Network Details", key: "network-details" }, +// { name: "Supported Features", key: "supported-features" }, +// { name: "Gas & Fee Details", key: "gas-fee-details" }, +// { name: "Wallet Registry", key: "wallet-registry" }, +// ]; + +const InvalidChainId = () => ; + +interface NetworkConfigBodyProps { + chainId: string; +} + +const NetworkConfigBody = ({ chainId }: NetworkConfigBodyProps) => { + const { getChainConfig } = useChainConfigStore(); + const chainConfig = getChainConfig(chainId); + + // const leftButtonProps = { + // label: "Cancel", + // action: () => {}, + // variant: "outline-secondary", + // }; + + // const rightButtonProps = { + // label: "Update", + // action: () => {}, + // variant: "primary", + // }; - const forms = [ - , - , - , - , - ]; - - const leftButtonProps = { - label: "Cancel", - action: () => {}, - variant: "outline-secondary", - }; - - const rightButtonProps = { - label: "Update", - action: () => {}, - variant: "primary", - }; + if (isUndefined(chainConfig)) return ; return ( - <> - - - - - - {TabMenu.map((item) => ( - {item.name} - ))} - - - Export JSON Soon - - - - - - {forms.map((item) => ( - {item} - ))} - - - - - - - - + - + + } + > + Remove Network + + } + /> + + + Current Configuration in JSON + + + + + ); + + // return ( + // <> + // + // + // + // + // + // {TabMenu.map((item) => ( + // {item.name} + // ))} + // + // + // Export JSON Soon + // + // + // + // + // + // + // + // + // + // + // + // + // " + // + // + // + // + // + // + // + // + // + // + // + // + // + // ); +}; + +export const NetworkConfig = () => { + useAllowCustomNetworks({ shouldRedirect: true }); + const router = useRouter(); + const validated = z.string().safeParse(router.query.chainId); + + if (!validated.success) return ; + + return ; }; diff --git a/src/pages/[network]/network-config/index.tsx b/src/pages/[network]/network-config/[chainId].tsx similarity index 100% rename from src/pages/[network]/network-config/index.tsx rename to src/pages/[network]/network-config/[chainId].tsx diff --git a/src/pages/network-config/index.tsx b/src/pages/network-config/[chainId].tsx similarity index 100% rename from src/pages/network-config/index.tsx rename to src/pages/network-config/[chainId].tsx