Skip to content

Commit

Permalink
Merge pull request #92 from alleslabs/component/select-contract-migrate
Browse files Browse the repository at this point in the history
feat: select admin migrate modal
  • Loading branch information
songwongtp committed Jan 19, 2023
2 parents 48c8aae + 6f50b93 commit 9ca9b86
Show file tree
Hide file tree
Showing 17 changed files with 460 additions and 80 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Features

- [#92](https://github.com/alleslabs/celatone-frontend/pull/92) Create select contract component for admin and migrate pages
- [#101](https://github.com/alleslabs/celatone-frontend/pull/101) Fix incorrect truncating of proposal id in contract detail's migration table
- [#100](https://github.com/alleslabs/celatone-frontend/pull/100) Fix contract instantiated time parsing
- [#97](https://github.com/alleslabs/celatone-frontend/pull/97) Change label style to always afloat
Expand Down
72 changes: 35 additions & 37 deletions src/lib/components/ButtonCard.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type { FlexProps } from "@chakra-ui/react";
import { Flex, Heading, Icon, Stack, Text } from "@chakra-ui/react";
import { FiChevronRight } from "react-icons/fi";
import { MdChevronRight } from "react-icons/md";

interface ButtonCardInterface extends FlexProps {
interface ButtonCardProps extends FlexProps {
title: string;
description: string;
onClick: () => void;
Expand All @@ -15,38 +15,36 @@ export const ButtonCard = ({
onClick,
disabled,
...componentProps
}: ButtonCardInterface) => {
return (
<Flex
aria-disabled={disabled}
p="24px"
align="center"
justify="space-between"
onClick={onClick}
bgColor="gray.900"
borderRadius="4px 4px 0 0"
w="100%"
cursor="pointer"
_hover={{ bgColor: "rgba(255, 255, 255, 0.15)" }}
_disabled={{
bgColor: "rgba(255, 255, 255, 0.12)",
pointerEvents: "none",
}}
{...componentProps}
>
<Stack>
<Heading
as="h6"
variant="h6"
color={disabled ? "text.disabled" : "text.main"}
>
{title}
</Heading>
<Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
{description}
</Text>
</Stack>
<Icon as={FiChevronRight} color="gray.600" fontSize="28px" />
</Flex>
);
};
}: ButtonCardProps) => (
<Flex
aria-disabled={disabled}
p="24px"
align="center"
justify="space-between"
onClick={!disabled ? onClick : undefined}
bgColor="gray.900"
borderRadius="4px 4px 0 0"
w="100%"
cursor="pointer"
_hover={{ bgColor: "rgba(255, 255, 255, 0.15)" }}
_disabled={{
bgColor: "divider.main",
cursor: "not-allowed",
}}
{...componentProps}
>
<Stack>
<Heading
as="h6"
variant="h6"
color={disabled ? "text.disabled" : "text.main"}
>
{title}
</Heading>
<Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
{description}
</Text>
</Stack>
<Icon as={MdChevronRight} color="gray.600" fontSize="28px" />
</Flex>
);
41 changes: 30 additions & 11 deletions src/lib/components/ContractSelectSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ import type { ContractAddr, Option } from "lib/types";

import { ExplorerLink } from "./ExplorerLink";
import { EditContractDetails, SaveContractDetails } from "./modal";
import { SelectContract } from "./modal/select-contract";
import {
SelectContractAdmin,
SelectContractInstantiator,
} from "./modal/select-contract";

interface DisplayNameProps {
notSelected: boolean;
Expand All @@ -29,6 +32,7 @@ interface ContractDetailsButtonProps {
}

interface ContractSelectSectionProps {
mode: "all-lists" | "only-admin";
contractAddress: ContractAddr;
onContractSelect: (contract: ContractAddr) => void;
}
Expand Down Expand Up @@ -97,7 +101,7 @@ const ContractDetailsButton = ({
};

export const ContractSelectSection = observer(
({ contractAddress, onContractSelect }: ContractSelectSectionProps) => {
({ mode, contractAddress, onContractSelect }: ContractSelectSectionProps) => {
const { getContractLocalInfo } = useContractStore();
const isMobile = useMobile();
const endpoint = useEndpoint();
Expand Down Expand Up @@ -160,17 +164,20 @@ export const ContractSelectSection = observer(
fontSize="12px"
justify="space-between"
align="center"
width="full"
>
<Flex gap="24px" width="70%">
<Flex direction="column" width="70%">
<Flex gap="24px" width={mode === "all-lists" ? "70%" : "60%"}>
<Flex direction="column" width={mode === "all-lists" ? "70%" : "40%"}>
Contract Address
{!notSelected ? (
<ExplorerLink
value={contractAddress}
type="contract_address"
canCopyWithHover
// TODO - Revisit not necessary if disable UI for mobile is implemented
textFormat={isMobile ? "truncate" : "normal"}
textFormat={
isMobile || mode === "only-admin" ? "truncate" : "normal"
}
maxWidth="none"
/>
) : (
Expand All @@ -179,7 +186,12 @@ export const ContractSelectSection = observer(
</Text>
)}
</Flex>
<Flex direction="column" width="calc(30% - 24px)">
<Flex
direction="column"
width={
mode === "all-lists" ? "calc(30% - 24px)" : "calc(60% - 24px)"
}
>
Contract Name
<DisplayName
notSelected={notSelected}
Expand All @@ -191,18 +203,25 @@ export const ContractSelectSection = observer(
</Flex>

<Flex gap="8px">
{contractState.isValid && (
{mode === "all-lists" && contractState.isValid && (
<ContractDetailsButton
contractAddress={contractAddress}
contractLocalInfo={contractLocalInfo}
instantiator={contractState.instantiator}
label={contractState.label}
/>
)}
<SelectContract
notSelected={notSelected}
onContractSelect={onContractSelect}
/>
{mode === "all-lists" ? (
<SelectContractInstantiator
notSelected={notSelected}
onContractSelect={onContractSelect}
/>
) : (
<SelectContractAdmin
notSelected={notSelected}
onContractSelect={onContractSelect}
/>
)}
</Flex>
</Flex>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,10 @@ import { useMemo, useState } from "react";
import { TagSelection, TextInput } from "lib/components/forms";
import { EmptyState } from "lib/components/state/EmptyState";
import { ZeroState } from "lib/components/state/ZeroState";
import { INSTANTIATED_LIST_NAME } from "lib/data";
import { ContractListReadOnlyTable } from "lib/pages/contract-list/components/ContractListReadOnlyTable";
import { ContractListTable } from "lib/pages/contract-list/components/ContractListTable";
import type { ContractLocalInfo, ContractListInfo } from "lib/stores/contract";
import type { ContractAddr, LVPair } from "lib/types";
import { formatSlugName } from "lib/utils";

interface FilteredListDetailProps {
contracts: ContractLocalInfo[];
Expand Down Expand Up @@ -72,7 +70,7 @@ export const ContractListDetail = ({
);

return (
<Box minH="xs" pb="48px">
<Box minH="xs" pb={isReadOnly ? "0px" : "48px"}>
<Box px={isReadOnly ? "0px" : "48px"}>
<Flex gap={2} w="full" my={isReadOnly ? "24px" : "48px"}>
<TextInput
Expand All @@ -98,9 +96,6 @@ export const ContractListDetail = ({
<ZeroState
list={{ label: contractListInfo.name, value: contractListInfo.slug }}
isReadOnly={isReadOnly}
isInstantiatedByMe={
contractListInfo.slug === formatSlugName(INSTANTIATED_LIST_NAME)
}
/>
) : (
<FilteredListDetail
Expand Down
99 changes: 99 additions & 0 deletions src/lib/components/modal/select-contract/SelectContractAdmin.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import {
useDisclosure,
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
Icon,
Heading,
} from "@chakra-ui/react";
import { useWallet } from "@cosmos-kit/react";
import { MdList, MdSwapHoriz } from "react-icons/md";

import { ADMIN_SPECIAL_SLUG } from "lib/data";
import { useContractStore } from "lib/hooks";
import { useContractListByAdmin } from "lib/services/contractService";
import type { ContractListInfo, ContractLocalInfo } from "lib/stores/contract";
import type { ContractAddr, HumanAddr } from "lib/types";

import { ContractListDetail } from "./ContractListDetail";

interface SelectContractAdminProps {
notSelected: boolean;
onContractSelect: (contract: ContractAddr) => void;
}

export const SelectContractAdmin = ({
notSelected,
onContractSelect,
}: SelectContractAdminProps) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const { address } = useWallet();
const { getContractLocalInfo } = useContractStore();

const { data: contracts = [] } = useContractListByAdmin(address as HumanAddr);
const contractList: ContractListInfo = {
name: ADMIN_SPECIAL_SLUG,
slug: ADMIN_SPECIAL_SLUG,
contracts: contracts.map<ContractLocalInfo>((contract) => ({
...contract,
...getContractLocalInfo(contract.contractAddress),
})),
lastUpdated: new Date(),
isInfoEditable: false,
isContractRemovable: false,
};

const resetOnClose = () => {
onClose();
};

const onSelectThenClose = (contract: ContractAddr) => {
onContractSelect(contract);
resetOnClose();
};

return (
<>
<Button
variant={notSelected ? "primary" : "outline-info"}
py="6px"
px="16px"
onClick={onOpen}
leftIcon={
!notSelected ? <Icon as={MdSwapHoriz} boxSize="5" /> : undefined
}
>
{notSelected ? "Select Contract" : "Change Contract"}
</Button>

<Modal
isOpen={isOpen}
onClose={resetOnClose}
closeOnOverlayClick={false}
size="4xl"
>
<ModalOverlay />
<ModalContent>
<ModalHeader>
<Icon as={MdList} color="text.dark" fontSize="24px" />
<Heading as="h5" variant="h5">
Select contract which you have permission
</Heading>
</ModalHeader>
<ModalCloseButton />
<ModalBody>
<ContractListDetail
contractListInfo={contractList}
isReadOnly
onContractSelect={onSelectThenClose}
/>
</ModalBody>
</ModalContent>
</Modal>
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@ import type { ContractAddr, RpcQueryError } from "lib/types";
import { AllContractLists } from "./AllContractLists";
import { ContractListDetail } from "./ContractListDetail";

interface SelectContractProps {
interface SelectContractInstantiatorProps {
notSelected: boolean;
onContractSelect: (contract: ContractAddr) => void;
}

export const SelectContract = ({
export const SelectContractInstantiator = ({
notSelected,
onContractSelect,
}: SelectContractProps) => {
}: SelectContractInstantiatorProps) => {
const {
appContractAddress: { example: exampleContractAddress },
} = useCelatoneApp();
Expand Down Expand Up @@ -103,7 +103,12 @@ export const SelectContract = ({
>
{notSelected ? "Select Contract" : "Change Contract"}
</Button>
<Modal isOpen={isOpen} onClose={resetOnClose} size="4xl">
<Modal
isOpen={isOpen}
onClose={resetOnClose}
closeOnOverlayClick={false}
size="4xl"
>
<ModalOverlay />
{listSlug.length === 0 || !contractList ? (
<ModalContent>
Expand Down
3 changes: 2 additions & 1 deletion src/lib/components/modal/select-contract/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export * from "./AllContractLists";
export * from "./ContractListCard";
export * from "./ContractListDetail";
export * from "./SelectContract";
export * from "./SelectContractAdmin";
export * from "./SelectContractInstantiator";
Loading

1 comment on commit 9ca9b86

@vercel
Copy link

@vercel vercel bot commented on 9ca9b86 Jan 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.