From 6019f5d4110d1b6926ea695ad8f0a2cd22cf368b Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 19 Jan 2024 16:12:08 +0700
Subject: [PATCH 1/3] fix: migrate to use isDisabled on Button

---
 src/lib/components/button/InstantiateButton.tsx            | 3 +--
 src/lib/components/forms/AssetInput.tsx                    | 2 +-
 src/lib/components/fund/selectFund.tsx                     | 2 +-
 src/lib/components/json-schema/UploadTemplate.tsx          | 2 +-
 src/lib/components/select-contract/SelectContractAdmin.tsx | 2 +-
 src/lib/components/upload/InstantiatePermissionRadio.tsx   | 2 +-
 src/lib/components/upload/UploadSection.tsx                | 2 +-
 src/lib/pages/admin/index.tsx                              | 6 +++++-
 .../components/contract-states/StateLoader.tsx             | 6 +++---
 src/lib/pages/faucet/index.tsx                             | 4 ++--
 src/lib/pages/instantiate/component/Footer.tsx             | 2 +-
 .../component/drawer/body/ModuleSelectMainBody.tsx         | 2 +-
 src/lib/pages/module-details/components/ModuleTop.tsx      | 2 +-
 src/lib/pages/proposal/components/Footer.tsx               | 7 +++----
 src/lib/pages/proposal/store-code/index.tsx                | 2 +-
 src/lib/pages/proposal/whitelist/index.tsx                 | 4 ++--
 src/lib/pages/stored-codes/components/UploadButton.tsx     | 2 +-
 src/lib/services/contractStateService.ts                   | 2 +-
 18 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx
index 80a835541..bfbdff7e8 100644
--- a/src/lib/components/button/InstantiateButton.tsx
+++ b/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"
diff --git a/src/lib/components/forms/AssetInput.tsx b/src/lib/components/forms/AssetInput.tsx
index b27722b61..c2a48cf03 100644
--- a/src/lib/components/forms/AssetInput.tsx
+++ b/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}
     >
diff --git a/src/lib/components/fund/selectFund.tsx b/src/lib/components/fund/selectFund.tsx
index 89f02da6c..19e21f145 100644
--- a/src/lib/components/fund/selectFund.tsx
+++ b/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>
diff --git a/src/lib/components/json-schema/UploadTemplate.tsx b/src/lib/components/json-schema/UploadTemplate.tsx
index b8a3d4822..a9a075c93 100644
--- a/src/lib/components/json-schema/UploadTemplate.tsx
+++ b/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>
diff --git a/src/lib/components/select-contract/SelectContractAdmin.tsx b/src/lib/components/select-contract/SelectContractAdmin.tsx
index 5a42312d7..e8efdaa94 100644
--- a/src/lib/components/select-contract/SelectContractAdmin.tsx
+++ b/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>
diff --git a/src/lib/components/upload/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
index 1089ecd24..55ef4e129 100644
--- a/src/lib/components/upload/InstantiatePermissionRadio.tsx
+++ b/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);
                       }}
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 7e168dbd1..b470ec7fd 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/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"
diff --git a/src/lib/pages/admin/index.tsx b/src/lib/pages/admin/index.tsx
index 3cac66390..a57acf94b 100644
--- a/src/lib/pages/admin/index.tsx
+++ b/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>
diff --git a/src/lib/pages/contract-details/components/contract-states/StateLoader.tsx b/src/lib/pages/contract-details/components/contract-states/StateLoader.tsx
index 636564f9c..5aa98ac30 100644
--- a/src/lib/pages/contract-details/components/contract-states/StateLoader.tsx
+++ b/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" />
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 8cb97ca1f..c24da14f6 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/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>
diff --git a/src/lib/pages/instantiate/component/Footer.tsx b/src/lib/pages/instantiate/component/Footer.tsx
index 2bc14b8c3..4be8eb8e4 100644
--- a/src/lib/pages/instantiate/component/Footer.tsx
+++ b/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"}
diff --git a/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx b/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx
index 6c482c28a..871231d9a 100644
--- a/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx
+++ b/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>
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index bbe8d17a0..4f98c50ff 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/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} />}
diff --git a/src/lib/pages/proposal/components/Footer.tsx b/src/lib/pages/proposal/components/Footer.tsx
index 0f6a0d28d..672ae5538 100644
--- a/src/lib/pages/proposal/components/Footer.tsx
+++ b/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" />
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 931a1bfa1..27be41d33 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/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}
       />
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index 7ac22b6ea..9a0bb8cac 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/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}
       />
diff --git a/src/lib/pages/stored-codes/components/UploadButton.tsx b/src/lib/pages/stored-codes/components/UploadButton.tsx
index 1fe3784a4..dbc1288ff 100644
--- a/src/lib/pages/stored-codes/components/UploadButton.tsx
+++ b/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" />}
       >
diff --git a/src/lib/services/contractStateService.ts b/src/lib/services/contractStateService.ts
index 4795f321f..c938e4a6e 100644
--- a/src/lib/services/contractStateService.ts
+++ b/src/lib/services/contractStateService.ts
@@ -26,7 +26,7 @@ export const useContractStates = (
         pageParam
       ),
     {
-      getNextPageParam: (lastPage) => lastPage.nextKey,
+      getNextPageParam: (lastPage) => lastPage.nextKey ?? undefined,
       refetchOnWindowFocus: false,
     }
   );

From df91fa1b64ccc01889e37b791cebfb6d5e13cdce Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 19 Jan 2024 16:18:02 +0700
Subject: [PATCH 2/3] docs: update README.md, changelog

---
 CHANGELOG.md |  1 +
 README.md    | 11 ++++-------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2a83035d8..d558e9527 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/README.md b/README.md
index 70eea40d1..69f750fc2 100644
--- a/README.md
+++ b/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)

From a1ce1c51f385a37343e93f2d3dea6a9f84e32a54 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 19 Jan 2024 17:17:39 +0700
Subject: [PATCH 3/3] fix: as comments

---
 .../select-contract/ContractListDetail.tsx         |  7 ++++++-
 .../pages/migrate/components/MigrateContract.tsx   |  2 +-
 .../pools/components/supportedSection/index.tsx    | 14 +++++++-------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/select-contract/ContractListDetail.tsx b/src/lib/components/select-contract/ContractListDetail.tsx
index a152b3252..4b123c47c 100644
--- a/src/lib/components/select-contract/ContractListDetail.tsx
+++ b/src/lib/components/select-contract/ContractListDetail.tsx
@@ -118,7 +118,12 @@ export const ContractListDetail = ({
 
   return (
     <Box minH="xs">
-      <Grid w="full" gap={4} templateColumns="3fr 1fr" my={isReadOnly ? 6 : 8}>
+      <Grid
+        w="full"
+        gap={4}
+        templateColumns={isReadOnly ? "1fr" : "3fr 1fr"}
+        my={isReadOnly ? 6 : 8}
+      >
         <GridItem w="full">
           <InputWithIcon
             placeholder="Search with Contract Address, Name, or Description"
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index a98fdf7b8..cfb34f90b 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -333,7 +333,7 @@ export const MigrateContract = ({
         <Button
           variant="primary"
           w="128px"
-          disabled={!enableMigrate || !estimatedFee || isSimulating}
+          isDisabled={!enableMigrate || !estimatedFee || isSimulating}
           onClick={proceed}
           isLoading={processing}
           sx={{ pointerEvents: processing && "none" }}
diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index f5507e6fb..640894bbe 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -62,25 +62,25 @@ export const SupportedSection = ({
     },
   });
   const { poolTypeValue, keyword, isSuperfluidOnly } = watch();
+  const debouncedKeyword = useDebounce(keyword);
   const search = useMemo(
     () =>
-      !keyword || isPositiveInt(keyword) || !assetInfos
-        ? keyword
-        : `{${matchSorter(Object.values(assetInfos), keyword, {
+      !debouncedKeyword || isPositiveInt(debouncedKeyword) || !assetInfos
+        ? debouncedKeyword
+        : `{${matchSorter(Object.values(assetInfos), debouncedKeyword, {
             keys: ["id", "symbol"],
             threshold: matchSorter.rankings.CONTAINS,
           })
             .map((assetInfo) => `"${assetInfo.id}"`)
             .join(",")}}`,
-    [assetInfos, keyword]
+    [assetInfos, debouncedKeyword]
   );
-  const debouncedSearch = useDebounce(search);
 
   const { data: totalData = 0, refetch: refetchCount } = usePoolListCountQuery({
     isSupported: true,
     poolType: poolTypeValue,
     isSuperfluidOnly,
-    search: debouncedSearch,
+    search,
   });
 
   const [showNewest, setShowNewest] = useState(true);
@@ -118,7 +118,7 @@ export const SupportedSection = ({
     true,
     poolTypeValue,
     isSuperfluidOnly,
-    debouncedSearch,
+    search,
     showNewest ? Order_By.Desc : Order_By.Asc,
     offset,
     pageSize