feat(web): show-dynamic-item-preview-in-submit-list

web/src/components/ItemCard/ItemField/ImageField.tsx

@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 
 const StyledImg = styled.img<{ detailed?: boolean }>`
-  width: ${({ detailed }) => (detailed ? "125px" : "64px")};
-  height: ${({ detailed }) => (detailed ? "125px" : "64px")};
+  width: ${({ detailed }) => (detailed ? "125px" : "60px")};
+  height: ${({ detailed }) => (detailed ? "125px" : "60px")};
   object-fit: contain;
 `;
 

web/src/context/SubmitListContext.tsx

@@ -20,7 +20,7 @@ export interface IList {
   challengePeriodDuration: number;
 }
 
-export const FieldTypes = ["Text", "Address", "Image", "Link", "Number", "Boolean", "File"] as const;
+export const FieldTypes = ["text", "address", "image", "link", "number", "boolean", "file"] as const;
 export type ListField = {
   id: number;
   label: string;

web/src/pages/SubmitList/ItemParameters/Fields/ItemFields.tsx

@@ -8,6 +8,7 @@ import WithHelpTooltip from "components/WithHelpTooltip";
 import { FieldTypes, useSubmitListContext } from "context/SubmitListContext";
 import { toast } from "react-toastify";
 import { OPTIONS } from "utils/wrapWithToast";
+import { capitalize } from "utils/index";
 
 const Container = styled.div`
   display: flex;
@@ -63,7 +64,7 @@ const StyledLabel = styled.div`
 const ItemFields: React.FC = () => {
   const { listMetadata, setListMetadata } = useSubmitListContext();
 
-  const items: _IItem1[] = FieldTypes.map((item) => ({ text: item, value: item }));
+  const items: _IItem1[] = FieldTypes.map((item) => ({ text: capitalize(item), value: item }));
 
   const canIndexMoreFields = useMemo(() => {
     const indexedFields = listMetadata.columns.filter((field) => field.isIdentifier);

web/src/pages/SubmitList/ItemParameters/ItemPreview/ItemDisplay.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 import ItemInformationCard from "components/ItemInformationCard";
-import { items } from "~src/consts";
+import { useSubmitListContext } from "context/SubmitListContext";
+import { constructItemWithMockValues } from "utils/submitListUtils";
 
 const Container = styled.div`
   display: flex;
@@ -22,7 +23,8 @@ const StyledItemInformationCard = styled(ItemInformationCard)`
 interface IItemDisplay {}
 
 const ItemDisplay: React.FC<IItemDisplay> = ({}) => {
-  const item = items[0];
+  const { listMetadata } = useSubmitListContext();
+  const item = constructItemWithMockValues(listMetadata);
   return (
     <Container>
       <StyledP>Check how the item is displayed on the Item page:</StyledP>

web/src/pages/SubmitList/ItemParameters/ItemPreview/ListDisplay.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 import ItemCard from "components/ItemCard";
-import { items } from "~src/consts";
+import { useSubmitListContext } from "context/SubmitListContext";
+import { constructItemWithMockValues } from "utils/submitListUtils";
 
 const Container = styled.div`
   display: flex;
@@ -18,7 +19,9 @@ const StyledP = styled.p`
 interface IListDisplay {}
 
 const ListDisplay: React.FC<IListDisplay> = ({}) => {
-  const item = items[0];
+  const { listMetadata } = useSubmitListContext();
+  const item = constructItemWithMockValues(listMetadata);
+
   return (
     <Container>
       <StyledP>Check how the item is displayed on the List page:</StyledP>

web/src/pages/SubmitList/ListParameters/ListPreview/HomePageDisplay.tsx

@@ -27,7 +27,7 @@ const HomePageDisplay: React.FC = () => {
         title={listMetadata.title}
         status={Status.Pending}
         logoURI={getIpfsUrl(listMetadata?.logoURI)}
-        chainId={1}
+        chainId={421614}
         totalItems={23}
         overrideIsList
       />

web/src/pages/SubmitList/ListParameters/ListPreview/ListPageDisplay.tsx

@@ -29,7 +29,7 @@ const ListPageDisplay: React.FC = () => {
       <StyledInformationCard
         title={listMetadata.title}
         description={listMetadata.description}
-        chainId={1}
+        chainId={421624}
         status={Status.Included}
         logoURI={getIpfsUrl(listMetadata.logoURI)}
       />

web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx

@@ -73,9 +73,9 @@ const SubmitListButton: React.FC = () => {
   const { writeAsync: submitListToCurate } = useCurateV2AddItem();
 
   // calculate total cost to submit the list to Curate
-  const { data: arbitratorExtraData } = useCurateV2GetArbitratorExtraData();
-  const { data: submissionBaseDeposit } = useCurateV2SubmissionBaseDeposit();
-  const { arbitrationCost } = useArbitrationCost(arbitratorExtraData);
+  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useCurateV2GetArbitratorExtraData();
+  const { data: submissionBaseDeposit, isLoading: isLoadingDeposit } = useCurateV2SubmissionBaseDeposit();
+  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
 
   const totalCostToSubmit = useMemo(() => {
     if (!arbitrationCost || !submissionBaseDeposit) return;
@@ -138,8 +138,9 @@ const SubmitListButton: React.FC = () => {
   };
 
   const isButtonDisabled = useMemo(
-    () => isSubmittingList || !areListParamsValid(listParams),
-    [isSubmittingList, listParams]
+    () =>
+      isSubmittingList || !areListParamsValid(listParams) || isLoadingArbCost || isLoadingDeposit || isLoadingExtradata,
+    [isSubmittingList, listParams, isLoadingArbCost, isLoadingDeposit, isLoadingExtradata]
   );
 
   const handleDeploy = () => {
@@ -161,6 +162,7 @@ const SubmitListButton: React.FC = () => {
             submitList(deployedList);
           } else {
             setProgress(ListProgress.Failed);
+            setIsSubmittingList(false);
           }
         })
         .catch(() => {

web/src/utils/index.ts

@@ -1 +1,4 @@
 export const isUndefined = (maybeObject: any): maybeObject is undefined => typeof maybeObject === "undefined";
+export const capitalize = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};

web/src/utils/submitListUtils.ts

@@ -1,8 +1,9 @@
-import { IList, IListData, IListMetadata } from "context/SubmitListContext";
+import { IList, IListData, IListMetadata, ListField } from "context/SubmitListContext";
 import { prepareArbitratorExtradata } from "./prepareArbitratorExtradata";
 import { Address, Log, decodeEventLog, isAddress, parseAbi, parseEther, zeroAddress } from "viem";
 import { isUndefined } from ".";
 import { KLEROS_ARBITRATOR, TEMPLATE_REGISTRY } from "~src/consts/arbitration";
+import { ItemDetailsFragment, Status } from "src/graphql/graphql";
 
 export const constructListParams = (listData: IListData, listMetadata: IListMetadata) => {
   const baseTemplate = { ...listData } as IList;
@@ -146,3 +147,42 @@ const constructRemovalTemplate = (listData: IListData, listMetadata: IListMetada
   });
 };
 const isVowel = (x: string) => /[aeiouAEIOU]/.test(x);
+
+export const constructItemWithMockValues = (data: IListMetadata): ItemDetailsFragment => {
+  const props: ListField & { value: ReturnType<typeof getMockValueForType> }[] = [];
+  for (const column of data.columns) {
+    props.push({ ...column, value: getMockValueForType(column.type) });
+  }
+  console.log({ props });
+
+  return {
+    id: "1",
+    status: Status.RegistrationRequested,
+    disputed: false,
+    registerer: {
+      id: getMockValueForType("address") as string,
+    },
+    props,
+  };
+};
+
+const getMockValueForType = (type: string) => {
+  switch (type) {
+    case "text":
+      return "Ethereum";
+    case "address":
+      return "0x922911F4f80a569a4425fa083456239838F7F003";
+    case "link":
+      return "https://kleros.io/";
+    case "image":
+      return "ipfs://QmWfxEmfEWwM6LDgER2Qp2XZpK1MbDtNp7uGqCS4UPNtgJ/symbol-CURATE.png";
+    case "file":
+      return "/ipfs/QmU4X2mjdi7QtcV8TnDKzvR782oDZbKkFPrRLPQnHjy8SW/PoH Origin Constitution (final draft).pdf";
+    case "number":
+      return 21;
+    case "boolean":
+      return true;
+    default:
+      return "Ethereum";
+  }
+};