Merge pull request #26 from alleslabs/fix-typos

fix(pages): fix typos and misc

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

@@ -74,7 +74,7 @@ export const uploadContractTx = ({
           },
         ],
         receiptInfo: {
-          header: "Upload WASM Complete",
+          header: "Upload Wasm Complete",
           description: (
             <>
               <span style={{ fontWeight: 700 }}>

src/lib/components/dropzone/index.tsx

@@ -47,7 +47,7 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
         <span style={{ color: "#f48fb1", textDecoration: "underline" }}>
           Click to upload
         </span>{" "}
-        or drag WASM file here
+        or drag Wasm file here
       </Text>
       <Text variant="body2" color="text.dark">
         .wasm (max. 800KB)

src/lib/components/state/ZeroState.tsx

@@ -16,7 +16,7 @@ export const ZeroState = ({ list, isReadOnly }: ZeroStateProps) => {
     <Flex alignItems="center" flexDir="column" gap="4">
       <Icon as={MdSearch} color="gray.600" boxSize="16" />
       <Text color="gray.500">
-        You don’t have any deploy or saved contracts.
+        You don’t have any deployed or saved contracts.
       </Text>
       {!isReadOnly && (
         <>

src/lib/pages/codes/components/CodesTable.tsx

@@ -87,7 +87,7 @@ const Empty = ({ type }: OtherTBodyProps) => {
         </Text>
       ) : (
         <Text color="text.dark">
-          Your uploaded WASM files will display as My Stored Codes
+          Your uploaded Wasm files will display as My Stored Codes
         </Text>
       )}
     </StateContainer>

src/lib/pages/codes/index.tsx

@@ -41,7 +41,7 @@ const Codes = observer(() => {
           <CustomTab codeCount={savedCodesCount}>My Saved Codes </CustomTab>
         </TabList>
         <InputWithIcon
-          placeholder="Search with Code ID or Code Description"
+          placeholder="Search with code ID or code description"
           value={keyword}
           onChange={handleFilterChange}
         />

src/lib/pages/deploy/index.tsx

@@ -18,8 +18,8 @@ const Deploy = () => {
         Select Deploy Option
       </Heading>
       <ButtonCard
-        title="Upload new WASM File"
-        description="Deploy contract by uploading a new WASM file"
+        title="Upload new Wasm File"
+        description="Deploy contract by upload new Wasm file"
         onClick={() => router.push("/upload")}
         mb="16px"
       />

src/lib/pages/home/components/QuickMenu.tsx

@@ -52,7 +52,7 @@ export const QuickMenu = () => {
                 Deploy new contract
               </Text>
               <Text color="gray.900" variant="body2">
-                Deploy contract by upload new WASM file
+                Deploy contract by upload new Wasm file
               </Text>
             </Flex>
             <Icon as={MdChevronRight} color="gray.900" boxSize={9} />

src/lib/pages/instantiate/component/code-select/CodeSelectModalButton.tsx

@@ -15,7 +15,7 @@ import { IoList } from "react-icons/io5";
 
 import { useCodeListData } from "lib/pages/codes/data";
 
-import { CodeTable } from "./CodeTable";
+import { CodeTableReadOnly } from "./CodeTableReadOnly";
 
 interface CodeSelectModalButtonProps {
   onCodeSelect: (code: string) => void;
@@ -67,11 +67,14 @@ export const CodeSelectModalButton = ({
             <Text variant="body1" fontWeight={700} ml="24px" mb="24px">
               My Stored Codes
             </Text>
-            <CodeTable onCodeSelect={handleSelect} codes={storedCodes} />
+            <CodeTableReadOnly
+              onCodeSelect={handleSelect}
+              codes={storedCodes}
+            />
             <Text variant="body1" fontWeight={700} ml="24px" my="24px">
               Saved Codes
             </Text>
-            <CodeTable onCodeSelect={handleSelect} codes={savedCodes} />
+            <CodeTableReadOnly onCodeSelect={handleSelect} codes={savedCodes} />
           </ModalBody>
         </ModalContent>
       </Modal>

src/lib/pages/instantiate/component/code-select/CodeTableReadOnly.tsx

@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+} from "@chakra-ui/react";
+
+import type { CodeInfo } from "lib/types";
+import { truncate } from "lib/utils";
+
+interface TableRowProps {
+  onCodeSelect: (newVal: string) => void;
+  codeDetail: CodeInfo;
+}
+
+const TableRow = ({ onCodeSelect, codeDetail }: TableRowProps) => {
+  return (
+    <Tr
+      sx={{
+        "& td:first-of-type": { pl: "60px" },
+        "& td:last-child": { pr: "60px" },
+      }}
+      cursor="pointer"
+      _hover={{ bg: "gray.900", transition: "all .2s" }}
+      onClick={() => onCodeSelect(codeDetail.id.toString())}
+    >
+      <Td width="20%">
+        <Text variant="body2">{codeDetail.id}</Text>
+      </Td>
+      <Td width="40%">
+        <Text variant="body2" className="ellipsis">
+          {codeDetail?.description ?? "No Description"}
+        </Text>
+      </Td>
+      <Td width="15%" textAlign="center">
+        <Text variant="body2">{codeDetail.contracts}</Text>
+      </Td>
+      <Td width="25%">
+        <Text variant="body2">{truncate(codeDetail.uploader)}</Text>
+      </Td>
+    </Tr>
+  );
+};
+
+interface CodeTableReadOnlyProps {
+  onCodeSelect: (code: string) => void;
+  codes: CodeInfo[];
+}
+
+export const CodeTableReadOnly = ({
+  onCodeSelect,
+  codes,
+}: CodeTableReadOnlyProps) => {
+  return (
+    <TableContainer w="full" my="16px">
+      <Table variant="simple">
+        <Thead>
+          <Tr
+            sx={{
+              "& th:first-of-type": { pl: "60px" },
+              "& th:last-child": { pr: "60px" },
+              "& th": { textTransform: "none", border: "none", color: "white" },
+            }}
+          >
+            <Th width="20%">Code ID</Th>
+            <Th width="40%">Description</Th>
+            <Th width="15%">Contracts</Th>
+            <Th width="25%">Uploader</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {codes.map((code, index) => (
+            <TableRow
+              key={code.id + index.toString()}
+              codeDetail={code}
+              onCodeSelect={onCodeSelect}
+            />
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};

src/lib/pages/pastTxs/components/MsgDetail.tsx

@@ -75,12 +75,12 @@ const MsgDetail = ({ msg, success }: MsgDetailProps) => {
       const singleMsgProps: SingleMsgProps = success
         ? {
             type: "Upload",
-            text1: "WASM to Code ID",
+            text1: "Wasm to Code ID",
             text3: msgUpload.id?.toString(),
           }
         : {
             type: "Failed",
-            text1: "to upload WASM file",
+            text1: "to upload Wasm file",
           };
       return <SingleMsg {...singleMsgProps} />;
     }

src/lib/pages/pastTxs/components/PastTxTable.tsx

@@ -118,12 +118,12 @@ const PastTxTable = ({ element }: PastTxTableProps) => {
           ? {
               type: "Upload",
               length: uploadMsgs.length,
-              text: "WASM files",
+              text: "Wasm files",
             }
           : {
               type: "Failed to upload",
               length: uploadMsgs.length,
-              text: "WASM files",
+              text: "Wasm files",
             };
         return <MultipleMsg {...multipleMsgProps} />;
       }
@@ -132,12 +132,12 @@ const PastTxTable = ({ element }: PastTxTableProps) => {
       const singleMsgProps: SingleMsgProps = element.success
         ? {
             type: "Upload",
-            text1: "WASM to Code ID",
+            text1: "Wasm to Code ID",
             text3: uploadMsgs[0].id.toString(),
           }
         : {
             type: "Failed",
-            text1: "to upload WASM file",
+            text1: "to upload Wasm file",
           };
       return <SingleMsg {...singleMsgProps} />;
     },
@@ -467,7 +467,7 @@ const PastTxTable = ({ element }: PastTxTableProps) => {
         <Td border={hideBorder}>
           <Flex role="group" w="fit-content">
             <ExplorerLink
-              value={element.hash.substring(2)}
+              value={element.hash.substring(2).toUpperCase()}
               type="tx_hash"
               canCopyWithHover
             />

src/lib/pages/pastTxs/index.tsx

@@ -181,8 +181,8 @@ const PastTxs = () => {
               Past transactions involving the Wasm module will display here
             </Text>
             <Text variant="body1" color="text.dark">
-              This includes MsgStoreCode, MsgInstantiateContract, and
-              MsgExecuteContract
+              such as Instantiate, Execute, or Upload Wasm file will display
+              here.
             </Text>
           </Flex>
         </>
@@ -212,7 +212,7 @@ const PastTxs = () => {
         <FalseState
           icon="on"
           text1="Past transactions involving with Wasm module"
-          text2="such as Instantiate, Execute, or Upload WASM file will display here."
+          text2="such as Instantiate, Execute, or Upload Wasm file will display here."
         />
       );
     }
@@ -238,7 +238,7 @@ const PastTxs = () => {
                   Messages
                 </Th>
                 <Th textTransform="none" w="25%">
-                  Time Stamp
+                  Timestamp
                 </Th>
                 <Th w="10%" />
                 <Th w="5%" />
@@ -342,7 +342,7 @@ const PastTxs = () => {
                 size="sm"
                 onClick={() => setIbcButton(!ibcButton)}
               >
-                IBC Layers
+                IBC
               </Button>
             </Flex>
           </Box>

src/lib/pages/upload/components/UploadCard.tsx

@@ -28,12 +28,12 @@ const getStatusDecorator = (
     case "Completed":
       return {
         icon: <Icon as={MdCheckCircle} boxSize="6" color="success.main" />,
-        statusText: <span style={{ color: "#66BB6A" }}>Valid WASM file</span>,
+        statusText: <span style={{ color: "#66BB6A" }}>Valid Wasm file</span>,
       };
     case "Failed":
       return {
         icon: <Icon as={IoIosWarning} boxSize="6" color="error.main" />,
-        statusText: <span style={{ color: "#EF5350" }}>Invalid WASM file</span>,
+        statusText: <span style={{ color: "#EF5350" }}>Invalid Wasm file</span>,
         helperText: error,
       };
     default:
@@ -73,7 +73,7 @@ export const UploadCard = ({
             {file.name}
           </Text>
           <Text variant="body2" color="text.dark">
-            {big(file.size).div(1000).toFixed(0)} kb • {statusText}
+            {big(file.size).div(1000).toFixed(0)} KB • {statusText}
           </Text>
         </Flex>
         <Flex align="center" gap="16px" ml="auto">

src/lib/pages/upload/index.tsx

@@ -115,7 +115,7 @@ const Upload = () => {
       </Text>
       <Stepper currentStep={1} />
       <Heading as="h4" variant="h4" my="48px">
-        Upload wasm file
+        Upload Wasm file
       </Heading>
       <ConnectWalletAlert
         subtitle="You need to connect your wallet first"