diff --git a/CHANGELOG.md b/CHANGELOG.md index a73ca7269..e03abbf32 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -99,6 +99,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#128](https://github.com/alleslabs/celatone-frontend/pull/128) Rewrite add to other list state and add default list to save to - [#114](https://github.com/alleslabs/celatone-frontend/pull/114) Handle wallet connection cases in instantiate button - [#115](https://github.com/alleslabs/celatone-frontend/pull/115) (Contract Details Page) Show no admin and correctly handle explorer link by address type - [#68](https://github.com/alleslabs/celatone-frontend/pull/68) Refactor past txs link props and make sure navigation works diff --git a/src/lib/components/forms/ListSelection.tsx b/src/lib/components/forms/ListSelection.tsx index ef794ddc4..0cc78c850 100644 --- a/src/lib/components/forms/ListSelection.tsx +++ b/src/lib/components/forms/ListSelection.tsx @@ -127,7 +127,8 @@ export const ListSelection = forwardRef( { - const { setValue, watch } = useForm({ - mode: "all", - }); - - const setContractListsValue = useCallback( - (selectedLists: LVPair[]) => { - setValue("lists", selectedLists); - }, - [setValue] - ); - - useEffect(() => { - setContractListsValue(contractLocalInfo.lists ?? []); - }, [contractLocalInfo.lists, setContractListsValue]); - - const offchainState = watch(); + const [contractLists, setContractLists] = useState(DEFAULT_LIST); const handleSave = useHandleContractSave({ title: "Action Complete!", contractAddress: contractLocalInfo.contractAddress, instantiator: contractLocalInfo.instantiator, label: contractLocalInfo.label, - lists: offchainState.lists, + lists: contractLists, }); + useEffect(() => { + setContractLists( + contractLocalInfo.lists?.length ? contractLocalInfo.lists : DEFAULT_LIST + ); + }, [contractLocalInfo.lists]); + return ( diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx index 7f7addc7b..bbf656b2e 100644 --- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx +++ b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx @@ -6,6 +6,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink"; import { ActionModal } from "lib/components/modal/ActionModal"; import type { OffchainDetail } from "lib/components/OffChainForm"; import { OffChainForm } from "lib/components/OffChainForm"; +import { DEFAULT_LIST } from "lib/data"; import { useHandleContractSave } from "lib/hooks/useHandleSave"; import type { ContractLocalInfo } from "lib/stores/contract"; import type { LVPair } from "lib/types"; @@ -28,7 +29,7 @@ export const ContractDetailsTemplate = ({ name: contractLocalInfo.name ?? "", description: getDescriptionDefault(contractLocalInfo.description), tags: getTagsDefault(contractLocalInfo.tags), - lists: contractLocalInfo.lists ?? [], + lists: contractLocalInfo.lists ?? DEFAULT_LIST, }; }, [ contractLocalInfo.description, diff --git a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx index 55ac7f16c..0368bb8f7 100644 --- a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx +++ b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx @@ -75,9 +75,10 @@ export const SelectContractAdmin = ({ onClose={resetOnClose} closeOnOverlayClick={false} size="4xl" + isCentered > - + @@ -85,7 +86,7 @@ export const SelectContractAdmin = ({ - + - {listSlug.length === 0 || !contractList ? ( - - - - - Select Contract - - - + + {listSlug.length === 0 || !contractList ? ( + <> + + + + Select Contract + + + - - - Fill contract address manually - - - { - const inputValue = e.target.value; - setSearchContract(inputValue as ContractAddr); - }} - placeholder={`ex. ${exampleContractAddress}`} - size="md" - /> - - - - {invalid} - + + + Fill contract address manually + + + { + const inputValue = e.target.value; + setSearchContract(inputValue as ContractAddr); + }} + placeholder={`ex. ${exampleContractAddress}`} + size="md" + /> + + + + {invalid} + - - - OR - - + + + OR + + - - Select from your Contract List - - - - - ) : ( - - - setListSlug("")} - cursor="pointer" - /> - - {contractList.name} - - - - - - - - )} + + Select from your Contract List + + + + + ) : ( + <> + + setListSlug("")} + cursor="pointer" + /> + + {contractList.name} + + + + + + + + )} + ); diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts index bded9f2fa..6296fe8df 100644 --- a/src/lib/data/constant.ts +++ b/src/lib/data/constant.ts @@ -1,6 +1,11 @@ import { MdBookmark, MdInbox, MdLibraryBooks } from "react-icons/md"; +import type { LVPair } from "lib/types"; import { MsgType } from "lib/types"; +/** + * @todos Revisit utils import later + */ +import { formatSlugName } from "lib/utils/format"; export const INSTANTIATED_LIST_NAME = "Instantiated by me"; @@ -52,6 +57,13 @@ export const getListIcon = (listName: string) => { } }; +export const DEFAULT_LIST: LVPair[] = [ + { + label: SAVED_LIST_NAME, + value: formatSlugName(SAVED_LIST_NAME), + }, +]; + export const DEFAULT_ADDRESS = "default-address"; export const MAX_FILE_SIZE = 800_000; diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx index 0e564858f..2483e8bb5 100644 --- a/src/lib/pages/contract-details/components/ContractTop.tsx +++ b/src/lib/pages/contract-details/components/ContractTop.tsx @@ -83,7 +83,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => { fontSize="22px" variant="none" aria-label="save" - color="none" + color="gray.600" icon={} /> }