Merge pull request #140 from alleslabs/feat/placeholder-upload-init

fix: add placeholders

CHANGELOG.md

@@ -104,6 +104,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#140](https://github.com/alleslabs/celatone-frontend/pull/140) Add placeholder texts to upload&instantiate, save code, and save&edit contract
 - [#139](https://github.com/alleslabs/celatone-frontend/pull/139) Fix Date to Dayjs
 - [#135](https://github.com/alleslabs/celatone-frontend/pull/135) Invalidate queries after update/clear admin tx
 - [#123](https://github.com/alleslabs/celatone-frontend/pull/123) Refactor tables to use custom components

src/lib/components/OffChainForm.tsx

@@ -24,6 +24,7 @@ export interface OffchainDetail {
 
 interface OffChainFormProps<T extends OffchainDetail> {
   state: OffchainDetail;
+  contractLabel: string;
   control: Control<T>;
   setTagsValue: (options: string[]) => void;
   setContractListsValue: (options: LVPair[]) => void;
@@ -33,6 +34,7 @@ interface OffChainFormProps<T extends OffchainDetail> {
 
 export const OffChainForm = <T extends OffchainDetail>({
   state,
+  contractLabel,
   control,
   setTagsValue,
   setContractListsValue,
@@ -45,6 +47,7 @@ export const OffChainForm = <T extends OffchainDetail>({
         name={"name" as FieldPath<T>}
         control={control}
         label="Name"
+        placeholder={contractLabel}
         helperText="Set name for your contract"
         variant="floating"
         rules={{
@@ -57,7 +60,7 @@ export const OffChainForm = <T extends OffchainDetail>({
         name={"description" as FieldPath<T>}
         control={control}
         label="Description"
-        helperText="Help understanding what this contract do and how it works"
+        placeholder="Help understanding what this contract do and how it works ..."
         variant="floating"
         rules={{
           maxLength: MAX_CONTRACT_DESCRIPTION_LENGTH,
@@ -71,13 +74,13 @@ export const OffChainForm = <T extends OffchainDetail>({
       <TagSelection
         result={state.tags}
         setResult={setTagsValue}
-        placeholder="Tags"
+        placeholder="Select tags or create new ones"
         helperText="Add tag to organize and manage your contracts"
         labelBgColor={labelBgColor}
       />
       <ListSelection
         result={state.lists}
-        placeholder="Add to contract lists"
+        placeholder="Not listed"
         helperText="Grouping your contracts by adding to your existing list or create
               a new list"
         setResult={setContractListsValue}

src/lib/components/forms/ListSelection.tsx

@@ -190,7 +190,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
               lineHeight="1.2"
               transform="scale(0.75) translateY(-24px)"
             >
-              Add to lists
+              Listed on
             </FormLabel>
           </Flex>
           <FormHelperText ml={3} mt={1} fontSize="12px" color="text.dark">

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

@@ -25,7 +25,7 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) {
   const [codeIdStatus, setCodeIdStatus] = useState<FormStatus>({
     state: "init",
   });
-  const [uploader, setUploader] = useState("No Description");
+  const [uploader, setUploader] = useState("");
   const [uploaderStatus, setUploaderStatus] = useState<FormStatus>({
     state: "init",
   });
@@ -175,20 +175,21 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) {
       otherBtnTitle="Cancel"
     >
       <FormControl display="flex" flexDir="column" gap="36px">
-        Save other stored Codes to your &quot;Saved Codes&quot; list
+        Save other stored codes to your &ldquo;Saved Codes&rdquo; list
         <NumberInput
           variant="floating"
           value={codeId}
           onInputChange={setCodeId}
           label="Code ID"
           labelBgColor="gray.800"
           status={codeIdStatus}
-          helperText="ex. 1150"
+          placeholder="ex. 1234"
         />
         <TextInput
           value={uploader}
           label="Uploader"
           labelBgColor="gray.800"
+          placeholder="Uploader address will display here"
           setInputState={() => {}}
           status={uploaderStatus}
           isDisabled
@@ -199,6 +200,7 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) {
           setInputState={setDescription}
           label="Code Description"
           labelBgColor="gray.800"
+          placeholder="No Description"
           helperText="Fill in code description to define its use as a reminder"
           status={descriptionStatus}
         />

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

@@ -68,7 +68,7 @@ export const AddToOtherList = observer(
         <Box my="16px">
           <ListSelection
             result={contractLists}
-            placeholder="Add to contract lists"
+            placeholder="Not listed"
             helperText="Grouping your contracts by adding to your existing list or create
               a new list"
             setResult={setContractLists}

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

@@ -102,6 +102,7 @@ export const ContractDetailsTemplate = ({
     >
       <OffChainForm<OffchainDetail>
         state={offchainState}
+        contractLabel={contractLocalInfo.label}
         control={control}
         setTagsValue={setTagsValue}
         setContractListsValue={setContractListsValue}

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

@@ -194,7 +194,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
           control={control}
           label="Contract Address"
           variant="floating"
-          helperText={`ex. ${exampleContractAddress}`}
+          placeholder={`ex. ${exampleContractAddress}`}
           status={status}
           labelBgColor="gray.800"
         />
@@ -209,6 +209,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
 
         <OffChainForm<SaveNewContractDetail>
           state={offchainState}
+          contractLabel={labelState}
           control={control}
           setTagsValue={setTagsValue}
           setContractListsValue={setContractListsValue}

src/lib/components/upload/UploadSection.tsx

@@ -132,7 +132,8 @@ export const UploadSection = ({
         name="codeDesc"
         control={control}
         label="Code Description (Optional)"
-        helperText="Short description of your code. You can add or change this later."
+        placeholder="No Description"
+        helperText="Define what your code works on in one sentence which visible to you only. You can add this later."
         rules={{
           maxLength: MAX_CODE_DESCRIPTION_LENGTH,
         }}

src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx

@@ -90,6 +90,7 @@ export const InstantiateOffChainForm = observer(
         )}
         <OffChainForm<OffchainDetail>
           state={offchainState}
+          contractLabel={contractLabel}
           control={control}
           setTagsValue={setTagsValue}
           setContractListsValue={setContractListsValue}

src/lib/pages/instantiate/instantiate.tsx

@@ -12,6 +12,7 @@ import {
   useNativeTokensInfo,
   useSimulateFee,
   useInstantiateTx,
+  useCelatoneApp,
 } from "lib/app-provider";
 import { CodeSelectSection } from "lib/components/CodeSelectSection";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -48,6 +49,9 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const router = useRouter();
   const msgQuery = (router.query.msg as string) ?? "";
   const codeIdQuery = (router.query["code-id"] as string) ?? "";
+  const {
+    appContractAddress: { example: exampleContractAddress },
+  } = useCelatoneApp();
   const { address = "" } = useWallet();
   const endpoint = useLCDEndpoint();
   const postInstantiateTx = useInstantiateTx();
@@ -275,6 +279,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             name="label"
             control={control}
             error={formErrors.label?.message}
+            placeholder="ex. Token Factory"
             label="Label"
             helperText="Label will help remind you or other contract viewer to understand what this contract do and how it works"
             variant="floating"
@@ -285,6 +290,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             name="adminAddress"
             control={control}
             label="Admin Address (optional)"
+            placeholder={`ex. ${exampleContractAddress}`}
             helperText="This address will be the admin for the deployed smart contract."
             variant="floating"
             error={validateAdmin(watchAdminAddress)}