Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new text for connect wallet button tooltip #1450

Merged
merged 3 commits into from
Dec 26, 2023
Merged

Add new text for connect wallet button tooltip #1450

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
82cc270
add new text for wallet button tooltip
maxaleks Dec 20, 2023
7fcdb2c
refactoring
maxaleks Dec 25, 2023
4bc4e40
Merge branch 'main' into new-tooltip-for-connect-wallet-button
tom2drum Dec 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions ui/snippets/walletMenu/WalletTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Tooltip, useBoolean } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';

type Props = {
Expand All @@ -8,20 +9,31 @@ type Props = {
};

const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
const router = useRouter();
const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);

const { defaultLabel, label, localStorageKey } = React.useMemo(() => {
const isAppPage = router.pathname === '/apps/[id]';
const defaultLabel = <span>Your wallet is used to interact with<br/>apps and contracts in the explorer</span>;
const label = isAppPage ?
<span>Connect once to use your wallet with<br/>all apps in the DAppscout marketplace!</span> :
defaultLabel;
const localStorageKey = `${ isAppPage ? 'dapp-' : '' }wallet-connect-tooltip-shown-${ isMobile ? 'mobile' : 'desktop' }`;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder why there are separate keys for mobile and desktop devices. It seems unnecessary since user sessions and data cannot be shared between the two.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem is that both components are rendered at the same time, and if you use 1 key, only the tooltip for one of the device types will be displayed. I tried using Show/Hide components, but the result was even worse, because the button itself appeared with a delay. If you have an idea, I'm ready to redo it, because I don't really like this solution myself

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I see now. Then, maybe the parent component should pass isDisabled=true prop if viewport size doesn't match. Will it work?

return { defaultLabel, label, localStorageKey };
}, [ router.pathname, isMobile ]);

React.useEffect(() => {
const key = `wallet-connect-tooltip-shown-${ isMobile ? 'mobile' : 'desktop' }`;
const wasShown = window.localStorage.getItem(key);
const wasShown = window.localStorage.getItem(localStorageKey);
if (!wasShown) {
setIsTooltipShown.on();
window.localStorage.setItem(key, 'true');
window.localStorage.setItem(localStorageKey, 'true');
setTimeout(() => setIsTooltipShown.off(), 3000);
}
}, [ setIsTooltipShown, isMobile ]);
}, [ setIsTooltipShown, localStorageKey ]);

return (
<Tooltip
label={ <span>Your wallet is used to interact with<br/>apps and contracts in the explorer</span> }
label={ isTooltipShown ? label : defaultLabel }
textAlign="center"
padding={ 2 }
isDisabled={ isDisabled }
Expand Down
Loading