fix: pull dev add changelog

alleslabs · Jan 12, 2023 · fc5a52f · fc5a52f
2 parents a03f959 + 974c931
commit fc5a52f
Show file tree

Hide file tree

Showing 32 changed files with 8,568 additions and 8,388 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -40,6 +40,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Features
 
 - [#68](https://github.com/alleslabs/celatone-frontend/pull/63) Refactor past txs link props and make sure navigation works
+- [#65](https://github.com/alleslabs/celatone-frontend/pull/60) Create instantiate button component
+- [#64](https://github.com/alleslabs/celatone-frontend/pull/64) Add contract not exist page
 - [#63](https://github.com/alleslabs/celatone-frontend/pull/63) Add code id explorer link and code table row navigation
 - [#67](https://github.com/alleslabs/celatone-frontend/pull/67) Add Public Codes shortcut to sidebar and add Quick Actions section
 - [#66](https://github.com/alleslabs/celatone-frontend/pull/66) Add code details data loader including code info and contract instances
@@ -63,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#64](https://github.com/alleslabs/celatone-frontend/pull/64) Add address validation functions for contract and user addresses
 - [#52](https://github.com/alleslabs/celatone-frontend/pull/52) Create a component for disconnected State and apply to contract, code, past tx
 - [#56](https://github.com/alleslabs/celatone-frontend/pull/56) Refactor offchain form component by not receiving nameField and descriptionField
 - [#50](https://github.com/alleslabs/celatone-frontend/pull/50) Refactor offchain component to use react-form and remove redundant offchain components, and refactor edit contract details modal

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@chakra-ui/react": "^2.3.6",
     "@chakra-ui/styled-system": "^2.3.5",
     "@cosmjs/cosmwasm-stargate": "^0.29.3",
+    "@cosmjs/encoding": "^0.29.5",
     "@cosmjs/proto-signing": "^0.29.5",
     "@cosmjs/stargate": "^0.29.3",
     "@cosmos-kit/core": "^0.20.0",

diff --git a/src/lib/components/Copier.tsx b/src/lib/components/Copier.tsx
@@ -15,14 +15,8 @@ export const Copier = ({ value, ml = "8px" }: CopierProps) => {
       isOpen={hasCopied}
       label="Copied!"
       placement="top"
-      bg="primary.dark"
-      color="text.main"
-      fontWeight={400}
-      fontSize="14px"
-      p="8px 16px"
-      borderRadius="8px"
       arrowSize={8}
-      mb="4px"
+      bg="primary.dark"
     >
       <CopyIcon
         display="flex"

diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx
@@ -1,21 +1,29 @@
 import { SearchIcon } from "@chakra-ui/icons";
+import type { InputProps } from "@chakra-ui/react";
 import { Input, InputGroup, InputRightElement } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 interface InputWithIconProps {
   placeholder: string;
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  size?: InputProps["size"];
 }
 
 const InputWithIcon = ({
   placeholder,
   value,
+  size,
   onChange,
 }: InputWithIconProps) => {
   return (
     <InputGroup>
-      <Input placeholder={placeholder} value={value} onChange={onChange} />
+      <Input
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        size={size}
+      />
       <InputRightElement>
         <SearchIcon color="input.main" />
       </InputRightElement>

diff --git a/src/lib/components/PermissionChip.tsx b/src/lib/components/PermissionChip.tsx
@@ -0,0 +1,37 @@
+import { chakra, Tag } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import type { CSSProperties } from "react";
+
+import type { HumanAddr, PermissionAddresses } from "lib/types";
+import { InstantiatePermission } from "lib/types";
+
+const StyledTag = chakra(Tag, {
+  baseStyle: {
+    borderRadius: "16px",
+    fontSize: "12px",
+    fontWeight: 400,
+    color: "text.main",
+  },
+});
+
+interface PermissionChipProps {
+  instantiatePermission: InstantiatePermission;
+  permissionAddresses: PermissionAddresses;
+}
+
+export const PermissionChip = ({
+  instantiatePermission,
+  permissionAddresses,
+}: PermissionChipProps) => {
+  const { address } = useWallet();
+
+  const isAllowed =
+    permissionAddresses.includes(address as HumanAddr) ||
+    instantiatePermission === InstantiatePermission.EVERYBODY;
+
+  const tagBgColor: CSSProperties["backgroundColor"] = isAllowed
+    ? "rgba(161, 230, 143, 0.5)"
+    : "rgba(173, 173, 173, 0.6)";
+
+  return <StyledTag bgColor={tagBgColor}>{instantiatePermission}</StyledTag>;
+};
diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx
@@ -0,0 +1,94 @@
+import type { ButtonProps } from "@chakra-ui/react";
+import { Button, chakra, Icon, Tooltip } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import { useRouter } from "next/router";
+import { MdHowToVote, MdPerson } from "react-icons/md";
+
+import type { HumanAddr, PermissionAddresses } from "lib/types";
+import { InstantiatePermission } from "lib/types";
+
+interface InstantiateButtonProps extends ButtonProps {
+  instantiatePermission: InstantiatePermission;
+  permissionAddresses: PermissionAddresses;
+  codeId: number;
+}
+
+const StyledIcon = chakra(Icon, {
+  baseStyle: {
+    boxSize: "4",
+    display: "flex",
+    alignItems: "center",
+  },
+});
+
+const getInstantiateButtonProps = (
+  isAllowed: boolean,
+  isDisabled: boolean
+): {
+  tooltipLabel: string;
+  variant: string;
+  icon: JSX.Element | undefined;
+} => {
+  if (isAllowed) {
+    return {
+      tooltipLabel: isDisabled
+        ? "You need to connect wallet to instantiate"
+        : "You can instantiate without opening proposal",
+      variant: "outline-primary",
+      icon: <StyledIcon as={MdPerson} />,
+    };
+  }
+  return {
+    tooltipLabel: isDisabled
+      ? ""
+      : "Instantiate through proposal only, Coming soon",
+    variant: "outline-gray",
+    icon: isDisabled ? undefined : <StyledIcon as={MdHowToVote} />,
+  };
+};
+
+export const InstantiateButton = ({
+  instantiatePermission = InstantiatePermission.UNKNOWN,
+  permissionAddresses = [],
+  codeId,
+  ...buttonProps
+}: InstantiateButtonProps) => {
+  const router = useRouter();
+  const { address } = useWallet();
+  const goToInstantiate = () =>
+    router.push({ pathname: "/instantiate", query: { "code-id": codeId } });
+
+  const isAllowed =
+    permissionAddresses.includes(address as HumanAddr) ||
+    instantiatePermission === InstantiatePermission.EVERYBODY;
+  const isDisabled =
+    instantiatePermission === InstantiatePermission.UNKNOWN || !address;
+
+  const { tooltipLabel, variant, icon } = getInstantiateButtonProps(
+    isAllowed,
+    isDisabled
+  );
+
+  return (
+    <Tooltip
+      hasArrow
+      label={tooltipLabel}
+      placement="top"
+      arrowSize={8}
+      bg="primary.dark"
+    >
+      <Button
+        // Change to isDisabled when create proposal flow is done
+        disabled={!isAllowed}
+        // disabled={isDisabled}
+        variant={variant}
+        leftIcon={icon}
+        size="sm"
+        onClick={isAllowed ? goToInstantiate : () => null}
+        {...buttonProps}
+      >
+        Instantiate
+      </Button>
+    </Tooltip>
+  );
+};
diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx
@@ -13,10 +13,10 @@ import { ActionModal } from "lib/components/modal/ActionModal";
 import type { OffchainDetail } from "lib/components/OffChainForm";
 import { OffChainForm } from "lib/components/OffChainForm";
 import { DEFAULT_RPC_ERROR, INSTANTIATED_LIST_NAME } from "lib/data";
-import { useContractStore, useEndpoint } from "lib/hooks";
+import { useContractStore, useEndpoint, useValidateAddress } from "lib/hooks";
 import { useHandleContractSave } from "lib/hooks/useHandleSave";
 import { queryInstantiateInfo } from "lib/services/contract";
-import type { ContractAddr, LVPair, RpcContractError } from "lib/types";
+import type { ContractAddr, LVPair, RpcQueryError } from "lib/types";
 import { formatSlugName } from "lib/utils";
 
 interface SaveNewContractDetail extends OffchainDetail {
@@ -33,6 +33,7 @@ interface SaveNewContractProps {
 export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
   const endpoint = useEndpoint();
   const { getContractInfo } = useContractStore();
+  const { validateContractAddress } = useValidateAddress();
 
   const {
     appContractAddress: { example: exampleContractAddress },
@@ -118,11 +119,11 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
           message: "Valid Contract Address",
         });
       },
-      onError(err: AxiosError<RpcContractError>) {
+      onError(err: AxiosError<RpcQueryError>) {
         resetForm(false);
         setStatus({
           state: "error",
-          message: err.response?.data.error || DEFAULT_RPC_ERROR,
+          message: err.response?.data.message || DEFAULT_RPC_ERROR,
         });
       },
     }
@@ -138,12 +139,18 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
         state: "loading",
       });
       const timeoutId = setTimeout(() => {
-        refetch();
+        const err = validateContractAddress(contractAddressState);
+        if (err !== null)
+          setStatus({
+            state: "error",
+            message: err,
+          });
+        else refetch();
       }, 1000);
       return () => clearTimeout(timeoutId);
     }
     return () => {};
-  }, [contractAddressState, refetch]);
+  }, [contractAddressState, refetch, validateContractAddress]);
 
   const handleSave = useHandleContractSave({
     title: `Saved ${

diff --git a/src/lib/components/modal/select-contract/SelectContract.tsx b/src/lib/components/modal/select-contract/SelectContract.tsx
@@ -22,10 +22,10 @@ import { MdChevronLeft } from "react-icons/md";
 
 import { useCelatoneApp } from "lib/app-provider";
 import { DEFAULT_RPC_ERROR } from "lib/data";
-import { useContractStore, useEndpoint } from "lib/hooks";
+import { useContractStore, useEndpoint, useValidateAddress } from "lib/hooks";
 import { useInstantiatedByMe } from "lib/model/contract";
 import { queryContract } from "lib/services/contract";
-import type { ContractAddr, RpcContractError } from "lib/types";
+import type { ContractAddr, RpcQueryError } from "lib/types";
 
 import { AllContractLists } from "./AllContractLists";
 import { ContractListDetail } from "./ContractListDetail";
@@ -44,6 +44,7 @@ export const SelectContract = ({
   } = useCelatoneApp();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [listSlug, setListSlug] = useState("");
+  const { validateContractAddress } = useValidateAddress();
 
   const [searchContract, setSearchContract] = useState<ContractAddr>(
     "" as ContractAddr
@@ -80,8 +81,8 @@ export const SelectContract = ({
       onSuccess() {
         onSelectThenClose(searchContract);
       },
-      onError(err: AxiosError<RpcContractError>) {
-        setInvalid(err.response?.data.error || DEFAULT_RPC_ERROR);
+      onError(err: AxiosError<RpcQueryError>) {
+        setInvalid(err.response?.data.message || DEFAULT_RPC_ERROR);
       },
     }
   );
@@ -131,7 +132,9 @@ export const SelectContract = ({
                   isDisabled={searchContract.length === 0}
                   isLoading={isFetching || isRefetching}
                   onClick={() => {
-                    refetch();
+                    const err = validateContractAddress(searchContract);
+                    if (err !== null) setInvalid(err);
+                    else refetch();
                   }}
                 >
                   Submit

diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx
@@ -125,7 +125,13 @@ export const EditableCell = ({
             )}
           </Flex>
           {!!tooltip && (
-            <Tooltip hasArrow label={tooltip} bg="primary.dark" placement="top">
+            <Tooltip
+              hasArrow
+              label={tooltip}
+              placement="top"
+              bg="primary.dark"
+              arrowSize={8}
+            >
               <InfoIcon color="gray.600" boxSize="14px" cursor="pointer" />
             </Tooltip>
           )}

diff --git a/src/lib/data/queries.ts b/src/lib/data/queries.ts
@@ -13,6 +13,8 @@ export const getCodeListByUserQueryDocument = graphql(`
       account {
         uploader: address
       }
+      access_config_permission
+      access_config_addresses
     }
   }
 `);
@@ -25,6 +27,8 @@ export const getCodeListByIDsQueryDocument = graphql(`
       account {
         uploader: address
       }
+      access_config_permission
+      access_config_addresses
     }
   }
 `);

diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
@@ -3,9 +3,9 @@ import * as types from "./graphql";
 import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
 
 const documents = {
-  "\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 500\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n    }\n  }\n":
+  "\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 500\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n    }\n  }\n":
     types.GetCodeListByUserQueryDocument,
-  "\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n    }\n  }\n":
+  "\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n    }\n  }\n":
     types.GetCodeListByIDsQueryDocument,
   "\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { transaction: { account: { address: { _eq: $walletAddr } } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetInstantiatedCountByUserQueryDocumentDocument,
@@ -22,11 +22,11 @@ const documents = {
 };
 
 export function graphql(
-  source: "\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 500\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n    }\n  }\n"
-): typeof documents["\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 500\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n    }\n  }\n"];
+  source: "\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 500\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n    }\n  }\n"
+): typeof documents["\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 500\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n    }\n  }\n"
-): typeof documents["\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n    }\n  }\n"];
+  source: "\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n    }\n  }\n"
+): typeof documents["\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      instantiated: contract_instantiated\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { transaction: { account: { address: { _eq: $walletAddr } } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { transaction: { account: { address: { _eq: $walletAddr } } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];