Fix isDisabled on Button, contract state next key and update readme

CHANGELOG.md

@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#740](https://github.com/alleslabs/celatone-frontend/pull/740) Fix to use isDisabled instead of disabled on button
 - [#739](https://github.com/alleslabs/celatone-frontend/pull/739) Fix nft minter address
 
 ## v1.5.0

README.md

@@ -15,11 +15,7 @@ The Celatone frontend uses the following technologies:
 
 ### Prerequisites
 
-1. [Node.js](https://nodejs.org/en/) (version >= 16) or using node version manager [nvm](https://github.com/nvm-sh/nvm#intro) (recommended, installation guide for nvm [here](https://collabnix.com/how-to-install-and-configure-nvm-on-mac-os/)).
-2. [`Yarn`](https://yarnpkg.com/getting-started/install) installed.
-```bash
-npm install -g yarn
-```
+1. [Node.js](https://nodejs.org/en/) (version >= 18) or using node version manager [nvm](https://github.com/nvm-sh/nvm#intro) (recommended, installation guide for nvm [here](https://collabnix.com/how-to-install-and-configure-nvm-on-mac-os/)).
 
 ### Develop
 
@@ -41,7 +37,7 @@ gh repo clone alleslabs/celatone-frontend
 # Navigate to the cloned repository
 cd celatone-frontend
 # Install dependencies
-yarn
+pnpm i
 ```
 
 3. Create a `.env.local` file in the root of the project and add the following environment variables
@@ -50,12 +46,13 @@ yarn
 # The mnemonic of the wallet that will be used for estimate gas fees
 NEXT_PUBLIC_DUMMY_MNEMONIC="your mnemonic here"
 NEXT_PUBLIC_SUPPORTED_CHAIN_IDS=osmosis-1,osmo-test-5
+NEXT_PUBLIC_CELATONE_API_OVERRIDE=http://localhost:8080
 ```
 
 4. Finally, run the development server
 
 ```bash
-yarn dev
+pnpm dev
 ```
 
 The website will then be live on [http://localhost:3000](http://localhost:3000)

src/lib/components/button/InstantiateButton.tsx

@@ -84,8 +84,7 @@ export const InstantiateButton = ({
       <Button
         w={{ base: "full", md: "auto" }}
         // Change to isDisabled when create proposal flow is done
-        disabled={!isAllowed || !isWalletConnected}
-        // disabled={isDisabled}
+        isDisabled={!isAllowed || !isWalletConnected}
         variant={variant}
         leftIcon={icon}
         size="sm"

src/lib/components/forms/AssetInput.tsx

@@ -44,7 +44,7 @@ export const AssetInput = ({
       h="56px"
       variant="outline-gray"
       size="lg"
-      disabled={disableDelete}
+      isDisabled={disableDelete}
       onClick={onDelete}
       p={0}
     >

src/lib/components/fund/selectFund.tsx

@@ -83,7 +83,7 @@ export const SelectFund = ({
         mb={5}
         mx="auto"
         onClick={() => append({ denom: "", amount: "" })}
-        disabled={assetOptions.length === selectedAssets.length}
+        isDisabled={assetOptions.length === selectedAssets.length}
       >
         Add More Asset
       </Button>

src/lib/components/json-schema/UploadTemplate.tsx

@@ -321,7 +321,7 @@ export const UploadTemplate = ({
         alignSelf="center"
         mt={6}
         onClick={handleSave}
-        disabled={disabledState}
+        isDisabled={disabledState}
       >
         Save JSON Schema
       </Button>

src/lib/components/select-contract/SelectContractAdmin.tsx

@@ -67,7 +67,7 @@ export const SelectContractAdmin = ({
         leftIcon={
           !notSelected ? <CustomIcon name="swap" boxSize="12px" /> : undefined
         }
-        disabled={!address}
+        isDisabled={!address}
       >
         {notSelected ? "Select Contract" : "Change Contract"}
       </Button>

src/lib/components/upload/InstantiatePermissionRadio.tsx

@@ -141,7 +141,7 @@ export const InstantiatePermissionRadio = ({
                       h="56px"
                       variant="outline-gray"
                       size="lg"
-                      disabled={fields.length <= 1}
+                      isDisabled={fields.length <= 1}
                       onClick={() => {
                         remove(idx);
                       }}

src/lib/components/upload/UploadSection.tsx

@@ -285,7 +285,7 @@ export const UploadSection = ({
         <Button
           variant="primary"
           w="128px"
-          disabled={
+          isDisabled={
             isSimulating ||
             shouldNotSimulate ||
             simulateStatus.status !== "succeeded"

src/lib/pages/admin/index.tsx

@@ -207,7 +207,11 @@ const UpdateAdmin = () => {
           alignSelf="flex-start"
         />
       )}
-      <Button disabled={!estimatedFee || isFetching} onClick={proceed} mt={12}>
+      <Button
+        isDisabled={!estimatedFee || isFetching}
+        onClick={proceed}
+        mt={12}
+      >
         Update Admin
       </Button>
     </WasmPageContainer>

src/lib/pages/contract-details/components/contract-states/StateLoader.tsx

@@ -36,7 +36,7 @@ export const StateLoader = ({
           <Text variant="body2" fontWeight={600} color="text.dark">
             Loading {numStatesToLoad} states...
           </Text>
-          <Button size="sm" variant="outline-primary" disabled>
+          <Button size="sm" variant="outline-primary" isDisabled>
             Load More
           </Button>
         </Flex>
@@ -51,7 +51,7 @@ export const StateLoader = ({
           <Button
             size="sm"
             variant="outline-primary"
-            disabled={isCompleted}
+            isDisabled={isCompleted}
             onClick={onLoadMore}
           >
             Load More
@@ -63,7 +63,7 @@ export const StateLoader = ({
         mt={{ base: 3, md: 0 }}
         w={{ base: "full", md: "auto" }}
         variant="outline-primary"
-        disabled={isLoading}
+        isDisabled={isLoading}
         onClick={onDownload}
       >
         <CustomIcon name="download" />

src/lib/pages/faucet/index.tsx

@@ -160,7 +160,7 @@ const Faucet = () => {
       });
   };
 
-  const disabled = status.state !== "success" || isLoading;
+  const isDisabled = status.state !== "success" || isLoading;
 
   return (
     <WasmPageContainer>
@@ -195,7 +195,7 @@ const Faucet = () => {
         w="full"
         onClick={onSubmit}
         isLoading={isLoading}
-        disabled={disabled}
+        isDisabled={isDisabled}
       >
         Request {faucetAmount} testnet {faucetDenom}
       </Button>

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

@@ -32,7 +32,7 @@ export const Footer = ({ onInstantiate, disabled, loading }: FooterProps) => {
         <Button
           variant="primary"
           onClick={onInstantiate}
-          disabled={disabled}
+          isDisabled={disabled}
           w="128px"
         >
           {loading ? <Spinner size="md" variant="light" /> : "Instantiate"}

src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx

@@ -141,7 +141,7 @@ export const ModuleSelectMainBody = ({
               closeModal();
             }
           }}
-          disabled={!selectedModule}
+          isDisabled={!selectedModule}
         >
           Select this module
         </Button>

src/lib/pages/module-details/components/ModuleTop.tsx

@@ -245,7 +245,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
                 closeOnClick={false}
               >
                 <Button
-                  disabled={!canRepublish}
+                  isDisabled={!canRepublish}
                   variant="outline-white"
                   w={{ base: "full", md: "auto" }}
                   leftIcon={<CustomIcon name="migrate" mr={0} />}

src/lib/pages/proposal/components/Footer.tsx

@@ -3,13 +3,13 @@ import { useRouter } from "next/router";
 
 interface FooterProps {
   onSubmit: () => void;
-  disabled: boolean;
+  isDisabled: boolean;
   isLoading: boolean;
 }
 
 export const Footer = ({
   onSubmit,
-  disabled,
+  isDisabled,
   isLoading = false,
 }: FooterProps) => {
   const router = useRouter();
@@ -33,8 +33,7 @@ export const Footer = ({
           <Button
             variant="primary"
             onClick={onSubmit}
-            disabled={disabled}
-            isDisabled={isLoading}
+            isDisabled={isLoading || isDisabled}
           >
             {isLoading ? (
               <Spinner size="md" variant="light" />

src/lib/pages/proposal/store-code/index.tsx

@@ -612,7 +612,7 @@ const StoreCodeProposal = () => {
       </PageContainer>
 
       <Footer
-        disabled={isSimulating || !estimatedFee || !enabledTx}
+        isDisabled={isSimulating || !estimatedFee || !enabledTx}
         onSubmit={proceed}
         isLoading={processing}
       />

src/lib/pages/proposal/whitelist/index.tsx

@@ -367,7 +367,7 @@ const ProposalToWhitelist = () => {
                     variant="outline-gray"
                     size="lg"
                     p={0}
-                    disabled={fields.length <= 1}
+                    isDisabled={fields.length <= 1}
                     onClick={() => remove(idx)}
                   >
                     <CustomIcon name="delete" boxSize={4} />
@@ -451,7 +451,7 @@ const ProposalToWhitelist = () => {
         </Grid>
       </PageContainer>
       <Footer
-        disabled={isSimulating || !enabledTx || !estimatedFee}
+        isDisabled={isSimulating || !enabledTx || !estimatedFee}
         onSubmit={proceed}
         isLoading={processing}
       />

src/lib/pages/stored-codes/components/UploadButton.tsx

@@ -16,7 +16,7 @@ export const UploadButton = ({ isAllowed }: UploadButtonProps) => {
       isDisabled={isAllowed}
     >
       <Button
-        disabled={!isAllowed}
+        isDisabled={!isAllowed}
         onClick={() => navigate({ pathname: "/upload" })}
         rightIcon={<CustomIcon name="upload" boxSize="12px" />}
       >

src/lib/services/contractStateService.ts

@@ -26,7 +26,7 @@ export const useContractStates = (
         pageParam
       ),
     {
-      getNextPageParam: (lastPage) => lastPage.nextKey,
+      getNextPageParam: (lastPage) => lastPage.nextKey ?? undefined,
       refetchOnWindowFocus: false,
     }
   );