Merge pull request #114 from alleslabs/feat/instantiate-button-wallet

refactor: handle wallet connection cases in instantiate button
alleslabs · Jan 25, 2023 · de0918e · de0918e · vercel · Jan 25, 2023
2 parents 9554a90 + f94efd7
commit de0918e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,26 +39,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#122](https://github.com/alleslabs/celatone-frontend/pull/122) Fix unknown code upload block height
 - [#125](https://github.com/alleslabs/celatone-frontend/pull/125) Add connect wallet alert in instantiate page
 - [#126](https://github.com/alleslabs/celatone-frontend/pull/126) Add port id copier for IBC port id
-- [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios
 - [#76](https://github.com/alleslabs/celatone-frontend/pull/76) Add Public projects page
 - [#116](https://github.com/alleslabs/celatone-frontend/pull/116) Support Terra2.0 mainnet and testnet
 - [#94](https://github.com/alleslabs/celatone-frontend/pull/94) Add unsupported assets in contract details page
-- [#72](https://github.com/alleslabs/celatone-frontend/pull/72) Fix general wording and grammar
-- [#110](https://github.com/alleslabs/celatone-frontend/pull/110) Fix proposal detail rendering
-- [#109](https://github.com/alleslabs/celatone-frontend/pull/109) Fix incorrect rendering of zero value badges
 - [#106](https://github.com/alleslabs/celatone-frontend/pull/106) Add sort alphabetically to query and execute shortcuts
 - [#88](https://github.com/alleslabs/celatone-frontend/pull/88) Add code snippet for query and execute
 - [#107](https://github.com/alleslabs/celatone-frontend/pull/107) Remove osmosis mainnet from chain list
 - [#99](https://github.com/alleslabs/celatone-frontend/pull/99) Validate label and codeId field in instantiate page
 - [#103](https://github.com/alleslabs/celatone-frontend/pull/103) Add check mark to selected network
 - [#92](https://github.com/alleslabs/celatone-frontend/pull/92) Create select contract component for admin and migrate pages
-- [#101](https://github.com/alleslabs/celatone-frontend/pull/101) Fix incorrect truncating of proposal id in contract detail's migration table
-- [#100](https://github.com/alleslabs/celatone-frontend/pull/100) Fix contract instantiated time parsing
 - [#97](https://github.com/alleslabs/celatone-frontend/pull/97) Change label style to always afloat
-- [#96](https://github.com/alleslabs/celatone-frontend/pull/96) Fix incorrect instantiated block height explorer link
 - [#95](https://github.com/alleslabs/celatone-frontend/pull/95) Add network to url path
 - [#89](https://github.com/alleslabs/celatone-frontend/pull/89) Update feedback link
 - [#90](https://github.com/alleslabs/celatone-frontend/pull/90) Add update admin (`/admin`) and migrate (`/migrate`) page routes
@@ -67,20 +59,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#81](https://github.com/alleslabs/celatone-frontend/pull/81) Can scroll on side bar with fix deploy new contract button
 - [#86](https://github.com/alleslabs/celatone-frontend/pull/86) Add transactions table in contract details page
 - [#74](https://github.com/alleslabs/celatone-frontend/pull/74) Add tokens rendering for contract details page
-- [#87](https://github.com/alleslabs/celatone-frontend/pull/87) Fix funds didn't microfy before sending tx
 - [#85](https://github.com/alleslabs/celatone-frontend/pull/85) Add sending asset in execute contract page
 - [#84](https://github.com/alleslabs/celatone-frontend/pull/84) Contract proposals table ui and wireup
 - [#82](https://github.com/alleslabs/celatone-frontend/pull/82) Add all codes page
 - [#83](https://github.com/alleslabs/celatone-frontend/pull/83) Add invalid code state
 - [#73](https://github.com/alleslabs/celatone-frontend/pull/73) Wireup migration table
 - [#77](https://github.com/alleslabs/celatone-frontend/pull/77) Wireup code info section in code details page
-- [#80](https://github.com/alleslabs/celatone-frontend/pull/80) Fix the misalignment of state in the PastTx page
 - [#70](https://github.com/alleslabs/celatone-frontend/pull/70) Change default token denom on contract detail
 - [#78](https://github.com/alleslabs/celatone-frontend/pull/78) Ignore building step when branch is not main
 - [#62](https://github.com/alleslabs/celatone-frontend/pull/62) Add footer
 - [#71](https://github.com/alleslabs/celatone-frontend/pull/71) Add search bar at the top (currently support only contract address and code id)
 - [#69](https://github.com/alleslabs/celatone-frontend/pull/69) Add execute table in contract details page
-- [#68](https://github.com/alleslabs/celatone-frontend/pull/63) Refactor past txs link props and make sure navigation works
 - [#65](https://github.com/alleslabs/celatone-frontend/pull/60) Create instantiate button component
 - [#64](https://github.com/alleslabs/celatone-frontend/pull/64) Add contract not exist page
 - [#63](https://github.com/alleslabs/celatone-frontend/pull/63) Add code id explorer link and code table row navigation
@@ -106,18 +95,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#114](https://github.com/alleslabs/celatone-frontend/pull/114) Handle wallet connection cases in instantiate button
 - [#115](https://github.com/alleslabs/celatone-frontend/pull/115) (Contract Details Page) Show no admin and correctly handle explorer link by address type
+- [#68](https://github.com/alleslabs/celatone-frontend/pull/68) Refactor past txs link props and make sure navigation works
 - [#64](https://github.com/alleslabs/celatone-frontend/pull/64) Add address validation functions for contract and user addresses
 - [#52](https://github.com/alleslabs/celatone-frontend/pull/52) Create a component for disconnected State and apply to contract, code, past tx
 - [#56](https://github.com/alleslabs/celatone-frontend/pull/56) Refactor offchain form component by not receiving nameField and descriptionField
 - [#50](https://github.com/alleslabs/celatone-frontend/pull/50) Refactor offchain component to use react-form and remove redundant offchain components, and refactor edit contract details modal
 
 ### Bug fixes
 
+- [#122](https://github.com/alleslabs/celatone-frontend/pull/122) Fix unknown code upload block height
+- [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios
 - [#119](https://github.com/alleslabs/celatone-frontend/pull/119) Fix searching and project ordering in public projects page
 - [#118](https://github.com/alleslabs/celatone-frontend/pull/118) Fix floating tooltip when scrolling out of copy button
 - [#111](https://github.com/alleslabs/celatone-frontend/pull/111) Fix recent activities navigation and instantiate encode/decode
 - [#105](https://github.com/alleslabs/celatone-frontend/pull/105) Propoerly show instantiator of code contracts and contract in the instantiated list
+- [#72](https://github.com/alleslabs/celatone-frontend/pull/72) Fix general wording and grammar
+- [#110](https://github.com/alleslabs/celatone-frontend/pull/110) Fix proposal detail rendering
+- [#109](https://github.com/alleslabs/celatone-frontend/pull/109) Fix incorrect rendering of zero value badges
+- [#101](https://github.com/alleslabs/celatone-frontend/pull/101) Fix incorrect truncating of proposal id in contract detail's migration table
+- [#100](https://github.com/alleslabs/celatone-frontend/pull/100) Fix contract instantiated time parsing
+- [#96](https://github.com/alleslabs/celatone-frontend/pull/96) Fix incorrect instantiated block height explorer link
+- [#87](https://github.com/alleslabs/celatone-frontend/pull/87) Fix funds didn't microfy before sending tx
+- [#80](https://github.com/alleslabs/celatone-frontend/pull/80) Fix the misalignment of state in the PastTx page
 - [#42](https://github.com/alleslabs/celatone-frontend/pull/42) Properly show CTAs on contract-list page and edit zero/disconnected state
 - [#45](https://github.com/alleslabs/celatone-frontend/pull/45) Add chain ID and code details to contract detail data loader
 

diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx
@@ -23,27 +23,35 @@ const StyledIcon = chakra(Icon, {
 
 const getInstantiateButtonProps = (
   isAllowed: boolean,
-  isDisabled: boolean
+  isUnknown: boolean,
+  isWalletConnected: boolean
 ): {
   tooltipLabel: string;
   variant: string;
   icon: JSX.Element | undefined;
 } => {
+  if (isUnknown) {
+    return {
+      tooltipLabel: "",
+      variant: "outline-gray",
+      icon: undefined,
+    };
+  }
   if (isAllowed) {
     return {
-      tooltipLabel: isDisabled
-        ? "You need to connect wallet to instantiate"
-        : "You can instantiate without opening proposal",
+      tooltipLabel: isWalletConnected
+        ? "You can instantiate without opening proposal"
+        : "You need to connect wallet to instantiate contract",
       variant: "outline-primary",
       icon: <StyledIcon as={MdPerson} />,
     };
   }
   return {
-    tooltipLabel: isDisabled
-      ? ""
-      : "Instantiate through proposal only (Coming Soon)",
+    tooltipLabel: isWalletConnected
+      ? "Instantiate through proposal only (Coming Soon)"
+      : "You need to connect wallet to open instantiate proposal",
     variant: "outline-gray",
-    icon: isDisabled ? undefined : <StyledIcon as={MdHowToVote} />,
+    icon: <StyledIcon as={MdHowToVote} />,
   };
 };
 
@@ -53,20 +61,26 @@ export const InstantiateButton = ({
   codeId,
   ...buttonProps
 }: InstantiateButtonProps) => {
-  const { address } = useWallet();
+  const { address, isWalletConnected } = useWallet();
   const navigate = useInternalNavigate();
   const goToInstantiate = () =>
     navigate({ pathname: "/instantiate", query: { "code-id": codeId } });
 
   const isAllowed =
     permissionAddresses.includes(address as HumanAddr) ||
     instantiatePermission === InstantiatePermission.EVERYBODY;
-  const isDisabled =
-    instantiatePermission === InstantiatePermission.UNKNOWN || !address;
+
+  /**
+   * @todos use isDisabled when proposal flow is done
+   */
+  // const isDisabled =
+  //   instantiatePermission === InstantiatePermission.UNKNOWN ||
+  //   !isWalletConnected;
 
   const { tooltipLabel, variant, icon } = getInstantiateButtonProps(
     isAllowed,
-    isDisabled
+    instantiatePermission === InstantiatePermission.UNKNOWN,
+    isWalletConnected
   );
 
   return (
@@ -79,7 +93,7 @@ export const InstantiateButton = ({
     >
       <Button
         // Change to isDisabled when create proposal flow is done
-        disabled={!isAllowed}
+        disabled={!isAllowed || !isWalletConnected}
         // disabled={isDisabled}
         variant={variant}
         leftIcon={icon}