Commit b851dc8d authored by Max Alekseenko's avatar Max Alekseenko

Revert "show popover instead of tooltip on mobile"

This reverts commit 8703e808.
parent 3cd87590
import { Text, Flex, Spinner } from '@chakra-ui/react'; import { Text, Flex, Spinner } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useIsMobile from 'lib/hooks/useIsMobile';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
import Stars from './Stars'; import Stars from './Stars';
import { getTooltipText } from './utils';
const ratingDescriptions = [ 'Terrible', 'Poor', 'Average', 'Very good', 'Outstanding' ]; const ratingDescriptions = [ 'Terrible', 'Poor', 'Average', 'Very good', 'Outstanding' ];
...@@ -15,12 +13,9 @@ type Props = { ...@@ -15,12 +13,9 @@ type Props = {
isRatedByUser?: boolean; isRatedByUser?: boolean;
rate: (appId: string, recordId: string | undefined, rating: number) => void; rate: (appId: string, recordId: string | undefined, rating: number) => void;
isSending?: boolean; isSending?: boolean;
canRate: boolean | undefined;
}; };
const PopoverContent = ({ appId, recordId, isRatedByUser, rate, isSending, canRate }: Props) => { const PopoverContent = ({ appId, recordId, isRatedByUser, rate, isSending }: Props) => {
const isMobile = useIsMobile();
const [ hovered, setHovered ] = React.useState(-1); const [ hovered, setHovered ] = React.useState(-1);
const handleMouseOverFactory = React.useCallback((index: number) => () => { const handleMouseOverFactory = React.useCallback((index: number) => () => {
...@@ -35,14 +30,6 @@ const PopoverContent = ({ appId, recordId, isRatedByUser, rate, isSending, canRa ...@@ -35,14 +30,6 @@ const PopoverContent = ({ appId, recordId, isRatedByUser, rate, isSending, canRa
rate(appId, recordId, index + 1); rate(appId, recordId, index + 1);
}, [ appId, recordId, rate ]); }, [ appId, recordId, rate ]);
if (isMobile && !canRate) {
return (
<Text fontSize="md" textAlign="center">
{ getTooltipText(canRate) }
</Text>
);
}
if (isRatedByUser) { if (isRatedByUser) {
return ( return (
<Flex alignItems="center"> <Flex alignItems="center">
......
...@@ -56,7 +56,6 @@ const Rating = ({ ...@@ -56,7 +56,6 @@ const Rating = ({
isRatedByUser={ isRatedByUser } isRatedByUser={ isRatedByUser }
rate={ rate } rate={ rate }
isSending={ isSending } isSending={ isSending }
canRate={ canRate }
/> />
</PopoverBody> </PopoverBody>
</PopoverContent> </PopoverContent>
......
import { Button, chakra, useColorModeValue, Tooltip } from '@chakra-ui/react'; import { Button, chakra, useColorModeValue, Tooltip } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useIsMobile from 'lib/hooks/useIsMobile';
import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing'; import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
import { getTooltipText } from './utils';
type Props = { type Props = {
rating?: number; rating?: number;
fullView?: boolean; fullView?: boolean;
...@@ -15,13 +12,22 @@ type Props = { ...@@ -15,13 +12,22 @@ type Props = {
canRate: boolean | undefined; canRate: boolean | undefined;
}; };
const getTooltipText = (canRate: boolean | undefined) => {
if (canRate === undefined) {
return <>You need a connected wallet to leave your rating.<br/>Link your wallet to Blockscout first</>;
}
if (!canRate) {
return <>New wallet users are not eligible to leave ratings.<br/>Please connect a different wallet</>;
}
return <>Ratings are derived from reviews by trusted users.<br/>Click here to rate!</>;
};
const TriggerButton = ( const TriggerButton = (
{ rating, fullView, isActive, onClick, canRate }: Props, { rating, fullView, isActive, onClick, canRate }: Props,
ref: React.ForwardedRef<HTMLButtonElement>, ref: React.ForwardedRef<HTMLButtonElement>,
) => { ) => {
const textColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800'); const textColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
const onFocusCapture = usePreventFocusAfterModalClosing(); const onFocusCapture = usePreventFocusAfterModalClosing();
const isMobile = useIsMobile();
return ( return (
<Tooltip <Tooltip
...@@ -36,7 +42,7 @@ const TriggerButton = ( ...@@ -36,7 +42,7 @@ const TriggerButton = (
variant="outline" variant="outline"
border={ 0 } border={ 0 }
p={ 0 } p={ 0 }
onClick={ (canRate || isMobile) ? onClick : undefined } onClick={ canRate ? onClick : undefined }
fontSize={ fullView ? 'md' : 'sm' } fontSize={ fullView ? 'md' : 'sm' }
fontWeight={ fullView ? '400' : '500' } fontWeight={ fullView ? '400' : '500' }
lineHeight="21px" lineHeight="21px"
......
import React from 'react';
export const getTooltipText = (canRate: boolean | undefined) => {
if (canRate === undefined) {
return <>You need a connected wallet to leave your rating.<br/>Link your wallet to Blockscout first</>;
}
if (!canRate) {
return <>New wallet users are not eligible to leave ratings.<br/>Please connect a different wallet</>;
}
return <>Ratings are derived from reviews by trusted users.<br/>Click here to rate!</>;
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment