From 41d851dcdad6bff6beb71fdc76898a68751f09f7 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Fri, 20 Jan 2023 17:41:49 +0700 Subject: [PATCH 1/5] refactor(components): handle wallet connection cases in instantiate button --- CHANGELOG.md | 1 + .../components/button/InstantiateButton.tsx | 36 ++++++++++++------- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f43cf949..c9ccc14e3 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx index 21b4c4f74..6c8f203f4 100644 --- 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: , }; } 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 : , + icon: , }; }; @@ -53,7 +61,7 @@ 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 } }); @@ -61,12 +69,14 @@ export const InstantiateButton = ({ 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 = ({ >