Merge pull request #37 from alleslabs/feat/contract-data

feat: load all contract detail

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#37](https://github.com/alleslabs/celatone-frontend/pull/37) Add contract details data loader
 - [#31](https://github.com/alleslabs/celatone-frontend/pull/31) Add contract details page ui skeleton
 - [#41](https://github.com/alleslabs/celatone-frontend/pull/41) Add Github action for tracking CHANGELOG.md for changes
 

src/env.ts

@@ -13,7 +13,7 @@ export const CELATONE_FALLBACK_GAS_PRICE: Record<string, ChainGasPrice> = {
   },
 };
 
-export const CELATONE_CONTRACT_ADDRESS = (
+export const CELATONE_APP_CONTRACT_ADDRESS = (
   chainName: string
 ): CelatoneContractAddress => {
   switch (chainName) {

src/lib/app-fns/tx/execute.tsx

@@ -10,15 +10,15 @@ import type { Observable } from "rxjs";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { Activity } from "lib/stores/contract";
-import type { TxResultRendering } from "lib/types";
+import type { ContractAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { encode, formatUFee } from "lib/utils";
 
 import { catchTxError, postTx, sendingTx } from "./common";
 
 interface ExecuteTxParams {
   address: string;
-  contractAddress: string;
+  contractAddress: ContractAddr;
   fee: StdFee;
   msg: object;
   client: SigningCosmWasmClient;

src/lib/app-provider/contexts/app.tsx

@@ -21,12 +21,12 @@ import { useCodeStore, useContractStore } from "lib/hooks";
 import type { ChainGasPrice, Token, U } from "lib/types";
 import { formatUserKey } from "lib/utils";
 
-interface AppProviderProps<ContractAddress, Constants extends AppConstants> {
+interface AppProviderProps<AppContractAddress, Constants extends AppConstants> {
   children: ReactNode;
 
   fallbackGasPrice: Record<string, ChainGasPrice>;
 
-  contractAddress: (currentChainName: string) => ContractAddress;
+  appContractAddressMap: (currentChainName: string) => AppContractAddress;
 
   constants: Constants;
 }
@@ -36,33 +36,33 @@ interface AppContextInterface<
   Constants extends AppConstants = AppConstants
 > {
   chainGasPrice: ChainGasPrice;
-  contractAddress: ContractAddress;
+  appContractAddress: ContractAddress;
   constants: Constants;
   explorerLink: {
-    contractAddr: string;
-    txs: string;
-    address: string;
+    contractUrl: string;
+    txUrl: string;
+    userUrl: string;
   };
   indexerGraphClient: GraphQLClient;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const AppContext = createContext<AppContextInterface<any, any>>({
   chainGasPrice: { denom: "", gasPrice: "0" as U<Token> },
-  contractAddress: {},
+  appContractAddress: {},
   constants: { gasAdjustment: 0 },
   explorerLink: {
-    contractAddr: "",
-    txs: "",
-    address: "",
+    contractUrl: "",
+    txUrl: "",
+    userUrl: "",
   },
   indexerGraphClient: new GraphQLClient(""),
 });
 
 export const AppProvider = <ContractAddress, Constants extends AppConstants>({
   children,
   fallbackGasPrice,
-  contractAddress,
+  appContractAddressMap,
   constants,
 }: AppProviderProps<ContractAddress, Constants>) => {
   const { currentChainName, currentChainRecord, setCurrentChain } = useWallet();
@@ -87,30 +87,29 @@ export const AppProvider = <ContractAddress, Constants extends AppConstants>({
   const chainBoundStates = useMemo(() => {
     return {
       explorerLink: {
-        contractAddr: getExplorerContractAddressUrl(currentChainName),
-        txs: getExplorerTxUrl(currentChainName),
-        address: getExplorerUserAddressUrl(currentChainName),
+        contractUrl: getExplorerContractAddressUrl(currentChainName),
+        txUrl: getExplorerTxUrl(currentChainName),
+        userUrl: getExplorerUserAddressUrl(currentChainName),
       },
       indexerGraphClient: getIndexerGraphClient(currentChainName),
     };
   }, [currentChainName]);
 
-  const states = useMemo<
-    AppContextInterface<ContractAddress, Constants>
-  >(() => {
-    return {
+  const states = useMemo<AppContextInterface<ContractAddress, Constants>>(
+    () => ({
       chainGasPrice,
-      contractAddress: contractAddress(currentChainName),
+      appContractAddress: appContractAddressMap(currentChainName),
       constants,
       ...chainBoundStates,
-    };
-  }, [
-    chainGasPrice,
-    contractAddress,
-    currentChainName,
-    constants,
-    chainBoundStates,
-  ]);
+    }),
+    [
+      chainGasPrice,
+      appContractAddressMap,
+      currentChainName,
+      constants,
+      chainBoundStates,
+    ]
+  );
 
   useEffect(() => {
     if (currentChainName) {

src/lib/app-provider/tx/execute.ts

@@ -5,12 +5,13 @@ import { useCallback } from "react";
 import { executeContractTx } from "lib/app-fns/tx/execute";
 import { useUserKey } from "lib/hooks/useUserKey";
 import type { Activity } from "lib/stores/contract";
+import type { ContractAddr } from "lib/types";
 
 export interface ExecuteStreamParams {
   onTxSucceed?: (userKey: string, activity: Activity) => void;
   onTxFailed?: () => void;
   estimatedFee: StdFee | undefined;
-  contractAddress: string;
+  contractAddress: ContractAddr;
   msg: object;
 }
 

src/lib/components/InstantiateOffchainDetail.tsx

@@ -14,6 +14,7 @@ import {
 } from "lib/data";
 import { useContractStore } from "lib/hooks";
 import { useUserKey } from "lib/hooks/useUserKey";
+import type { ContractAddr } from "lib/types";
 
 import { ListSelection } from "./forms/ListSelection";
 import { TagSelection } from "./forms/TagSelection";
@@ -22,7 +23,7 @@ interface InstantiateOffChainFormProps {
   title?: string;
   subtitle?: string;
   cta?: boolean;
-  contractAddress: string;
+  contractAddress: ContractAddr;
   contractLabel: string;
 }
 

src/lib/components/modal/EditTags.tsx

@@ -19,7 +19,7 @@ export function EditTags({ contractInfo }: EditTagsProps) {
   const [tagResult, setTagResult] = useState<string[]>(contractInfo.tags ?? []);
   const handleSave = useHandleContractSave({
     title: "Updated tags successfully!",
-    address: contractInfo.address,
+    contractAddress: contractInfo.contractAddress,
     instantiator: contractInfo.instantiator,
     label: contractInfo.label,
     created: contractInfo.created,
@@ -48,7 +48,7 @@ export function EditTags({ contractInfo }: EditTagsProps) {
               {contractInfo.name ?? contractInfo.label}
             </Text>
             <ExplorerLink
-              value={contractInfo.address}
+              value={contractInfo.contractAddress}
               type="contract_address"
             />
           </Flex>

src/lib/components/modal/code/SaveNewCode.tsx

@@ -12,7 +12,7 @@ import {
   MAX_CODE_DESCRIPTION_LENGTH,
 } from "lib/data";
 import { useCodeStore, useEndpoint, useUserKey } from "lib/hooks";
-import { getCodeIdInfo } from "lib/services/contract";
+import { getCodeIdInfo } from "lib/services/code";
 
 interface ModalProps {
   buttonProps: ButtonProps;

src/lib/components/modal/contract/AddToOtherList.tsx

@@ -25,7 +25,7 @@ export function AddToOtherList({
 
   const handleSave = useHandleContractSave({
     title: "Action complete!",
-    address: contractInfo.address,
+    contractAddress: contractInfo.contractAddress,
     instantiator: contractInfo.instantiator,
     label: contractInfo.label,
     created: contractInfo.created,
@@ -52,7 +52,7 @@ export function AddToOtherList({
               {contractInfo.name ?? contractInfo.label}
             </Text>
             <ExplorerLink
-              value={contractInfo.address}
+              value={contractInfo.contractAddress}
               type="contract_address"
             />
           </Flex>

src/lib/components/modal/contract/EditContract.tsx

@@ -34,7 +34,7 @@ export const EditContract = ({ contractInfo, menuItemProps }: ModalProps) => {
 
   const handleSave = useHandleContractSave({
     title: "Action Complete",
-    address: contractInfo.address,
+    contractAddress: contractInfo.contractAddress,
     instantiator: contractInfo.instantiator,
     label: contractInfo.label,
     created: contractInfo.created,
@@ -54,7 +54,10 @@ export const EditContract = ({ contractInfo, menuItemProps }: ModalProps) => {
           <Text variant="body2" color="text.main" fontWeight="600">
             Contract Address
           </Text>
-          <ExplorerLink value={contractInfo.address} type="contract_address" />
+          <ExplorerLink
+            value={contractInfo.contractAddress}
+            type="contract_address"
+          />
         </Flex>
       }
       trigger={<MenuItem {...menuItemProps} />}

src/lib/components/modal/contract/RemoveContract.tsx

@@ -21,11 +21,11 @@ export function RemoveContract({
 }: ModalProps) {
   const displayName = contractInfo.name
     ? contractInfo.name
-    : truncate(contractInfo.address);
+    : truncate(contractInfo.contractAddress);
 
   const handleRemove = useHandleContractSave({
     title: `Removed ${displayName} from ${list.label}`,
-    address: contractInfo.address,
+    contractAddress: contractInfo.contractAddress,
     instantiator: contractInfo.instantiator,
     label: contractInfo.label,
     created: contractInfo.created,

src/lib/components/modal/contract/SaveNewContract.tsx

@@ -18,8 +18,8 @@ import {
 } from "lib/data";
 import { useContractStore, useEndpoint } from "lib/hooks";
 import { useHandleContractSave } from "lib/hooks/useHandleSave";
-import { queryContractWithTime } from "lib/services/contract";
-import type { Option, RpcContractError } from "lib/types";
+import { queryInstantiateInfo } from "lib/services/contract";
+import type { ContractAddr, Option, RpcContractError } from "lib/types";
 import { formatSlugName } from "lib/utils";
 
 interface SaveNewContractProps {
@@ -28,7 +28,7 @@ interface SaveNewContractProps {
 }
 export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
   const {
-    contractAddress: { example: exampleContractAddress },
+    appContractAddress: { example: exampleContractAddress },
   } = useCelatoneApp();
   const initialList =
     list.value === formatSlugName(INSTANTIATED_LIST_NAME) ? [] : [list];
@@ -62,8 +62,8 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
 
   // TODO: Abstract query
   const { refetch } = useQuery(
-    ["query", "contractWithTime", contractAddress],
-    async () => queryContractWithTime(endpoint, contractAddress),
+    ["query", "instantiateInfo", contractAddress],
+    async () => queryInstantiateInfo(endpoint, contractAddress as ContractAddr),
     {
       enabled: false,
       retry: false,
@@ -72,7 +72,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
       onSuccess(data) {
         setInstantiator(data.instantiator);
         setLabel(data.label);
-        setCreated(data.created);
+        setCreated(data.createdTime);
         setName(data.label);
         setStatus({
           state: "success",
@@ -121,7 +121,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
 
   const handleSave = useHandleContractSave({
     title: `Saved ${name.trim().length ? name : label}`,
-    address: contractAddress,
+    contractAddress: contractAddress as ContractAddr,
     instantiator,
     label,
     created,

src/lib/components/modal/select-contract/SelectContract.tsx

@@ -25,7 +25,7 @@ import { DEFAULT_RPC_ERROR } from "lib/data";
 import { useContractStore, useEndpoint } from "lib/hooks";
 import { useInstantiatedByMe } from "lib/model/contract";
 import { queryContract } from "lib/services/contract";
-import type { RpcContractError } from "lib/types";
+import type { ContractAddr, RpcContractError } from "lib/types";
 
 import { AllContractLists } from "./AllContractLists";
 import { ListDetail } from "./ListDetail";
@@ -39,7 +39,9 @@ export const SelectContract = ({
   notSelected,
   onContractSelect,
 }: SelectContractProps) => {
-  const { contractAddress } = useCelatoneApp();
+  const {
+    appContractAddress: { example: exampleContractAddress },
+  } = useCelatoneApp();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [listSlug, setListSlug] = useState("");
 
@@ -71,7 +73,7 @@ export const SelectContract = ({
   // TODO: Abstract query
   const { refetch, isFetching, isRefetching } = useQuery(
     ["query", "contract", searchManual],
-    async () => queryContract(endpoint, searchManual),
+    async () => queryContract(endpoint, searchManual as ContractAddr),
     {
       enabled: false,
       retry: false,
@@ -124,7 +126,7 @@ export const SelectContract = ({
                     const inputValue = e.target.value;
                     setSearchManual(inputValue);
                   }}
-                  placeholder={`ex. ${contractAddress.example}`}
+                  placeholder={`ex. ${exampleContractAddress}`}
                   size="md"
                 />
                 <Button

src/lib/data/queries.ts

@@ -59,3 +59,14 @@ export const getInstantiatedListByUserQueryDocument = graphql(`
     }
   }
 `);
+
+export const getInstantiateDetailByContractQueryDocument = graphql(`
+  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {
+    contracts_by_pk(address: $contractAddress) {
+      init_msg
+      transaction {
+        hash
+      }
+    }
+  }
+`);

src/lib/gql/gql.ts

@@ -11,6 +11,8 @@ const documents = {
     types.GetInstantiatedCountByUserQueryDocumentDocument,
   "\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { transaction: { account: { address: { _eq: $walletAddr } } } }\n      limit: 500\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      transaction {\n        block {\n          timestamp\n        }\n      }\n    }\n  }\n":
     types.GetInstantiatedListByUserQueryDocumentDocument,
+  "\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n    }\n  }\n":
+    types.GetInstantiateDetailByContractQueryDocumentDocument,
 };
 
 export function graphql(
@@ -25,6 +27,9 @@ export function graphql(
 export function graphql(
   source: "\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { transaction: { account: { address: { _eq: $walletAddr } } } }\n      limit: 500\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      transaction {\n        block {\n          timestamp\n        }\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { transaction: { account: { address: { _eq: $walletAddr } } } }\n      limit: 500\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      transaction {\n        block {\n          timestamp\n        }\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n    }\n  }\n"
+): typeof documents["\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n    }\n  }\n"];
 
 export function graphql(source: string): unknown;
 export function graphql(source: string) {