refactor: handle wallet connection cases in instantiate button

CHANGELOG.md

@@ -99,6 +99,7 @@ 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
 - [#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

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,22 @@ 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;
+  // const isDisabled =
+  //   instantiatePermission === InstantiatePermission.UNKNOWN ||
+  //   !isWalletConnected;
 
   const { tooltipLabel, variant, icon } = getInstantiateButtonProps(
     isAllowed,
-    isDisabled
+    instantiatePermission === InstantiatePermission.UNKNOWN,
+    isWalletConnected
   );
 
   return (
@@ -79,7 +89,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}