From 71429b854257634dcf865857a29796fdf382a24c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= Date: Thu, 26 Sep 2024 09:27:43 +0200 Subject: [PATCH] feat: remove tiptiles --- .../AllocationTipTiles.module.scss | 20 -- .../AllocationTipTiles/AllocationTipTiles.tsx | 124 --------- .../Allocation/AllocationTipTiles/index.tsx | 2 - .../Allocation/AllocationTipTiles/types.ts | 3 - client/src/components/Settings/Settings.tsx | 6 +- .../SettingsShowTipsBox.tsx | 25 -- .../Settings/SettingsShowTipsBox/index.tsx | 2 - .../shared/TipTile/TipTile.module.scss | 108 -------- .../src/components/shared/TipTile/TipTile.tsx | 105 -------- .../src/components/shared/TipTile/index.tsx | 2 - client/src/components/shared/TipTile/types.ts | 14 - client/src/constants/localStorageKeys.ts | 42 --- .../src/hooks/helpers/useAppConnectManager.ts | 5 - client/src/hooks/helpers/useAppIsLoading.ts | 5 - .../src/hooks/helpers/useAppPopulateState.ts | 20 +- client/src/locales/en/translation.json | 31 +-- .../src/services/localStorageService.test.ts | 35 --- client/src/services/localStorageService.ts | 43 --- client/src/store/settings/store.test.ts | 25 -- client/src/store/settings/store.ts | 11 - client/src/store/settings/types.ts | 2 - client/src/store/tips/store.test.ts | 250 ------------------ client/src/store/tips/store.ts | 102 ------- client/src/store/tips/types.ts | 23 -- .../src/views/ProjectsView/ProjectsView.tsx | 26 -- 25 files changed, 6 insertions(+), 1025 deletions(-) delete mode 100644 client/src/components/Allocation/AllocationTipTiles/AllocationTipTiles.module.scss delete mode 100644 client/src/components/Allocation/AllocationTipTiles/AllocationTipTiles.tsx delete mode 100644 client/src/components/Allocation/AllocationTipTiles/index.tsx delete mode 100644 client/src/components/Allocation/AllocationTipTiles/types.ts delete mode 100644 client/src/components/Settings/SettingsShowTipsBox/SettingsShowTipsBox.tsx delete mode 100644 client/src/components/Settings/SettingsShowTipsBox/index.tsx delete mode 100644 client/src/components/shared/TipTile/TipTile.module.scss delete mode 100644 client/src/components/shared/TipTile/TipTile.tsx delete mode 100644 client/src/components/shared/TipTile/index.tsx delete mode 100644 client/src/components/shared/TipTile/types.ts delete mode 100644 client/src/store/tips/store.test.ts delete mode 100644 client/src/store/tips/store.ts delete mode 100644 client/src/store/tips/types.ts diff --git a/client/src/components/Allocation/AllocationTipTiles/AllocationTipTiles.module.scss b/client/src/components/Allocation/AllocationTipTiles/AllocationTipTiles.module.scss deleted file mode 100644 index 46ac8138a..000000000 --- a/client/src/components/Allocation/AllocationTipTiles/AllocationTipTiles.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -.bold { - color: $color-octant-green; - font-weight: $font-weight-bold; -} - -.uqTooLowImage { - height: 7.2rem; - - @media #{$desktop-up} { - height: 10rem; - } -} - -.rewardsImage { - height: 8.5rem; - - @media #{$desktop-up} { - height: 11rem; - } -} diff --git a/client/src/components/Allocation/AllocationTipTiles/AllocationTipTiles.tsx b/client/src/components/Allocation/AllocationTipTiles/AllocationTipTiles.tsx deleted file mode 100644 index 07ff1f506..000000000 --- a/client/src/components/Allocation/AllocationTipTiles/AllocationTipTiles.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React, { FC, Fragment, useEffect } from 'react'; -import { Trans, useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; -import { useAccount } from 'wagmi'; - -import TipTile from 'components/shared/TipTile'; -import useMediaQuery from 'hooks/helpers/useMediaQuery'; -import useRefreshAntisybilStatus from 'hooks/mutations/useRefreshAntisybilStatus'; -import useCurrentEpoch from 'hooks/queries/useCurrentEpoch'; -import useIndividualReward from 'hooks/queries/useIndividualReward'; -import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen'; -import useUqScore from 'hooks/queries/useUqScore'; -import useUserAllocations from 'hooks/queries/useUserAllocations'; -import { ROOT_ROUTES } from 'routes/RootRoutes/routes'; -import useTipsStore from 'store/tips/store'; - -import styles from './AllocationTipTiles.module.scss'; -import AllocationTipTilesProps from './types'; - -const AllocationTipTiles: FC = ({ className }) => { - const { t } = useTranslation('translation', { keyPrefix: 'components.allocation.tip' }); - const navigate = useNavigate(); - const { isDesktop } = useMediaQuery(); - const { address, isConnected } = useAccount(); - const { - mutateAsync: refreshAntisybilStatus, - isPending: isPendingRefreshAntisybilStatus, - isSuccess: isSuccessRefreshAntisybilStatus, - error: refreshAntisybilStatusError, - } = useRefreshAntisybilStatus(); - const { data: currentEpoch } = useCurrentEpoch(); - const { data: isDecisionWindowOpen } = useIsDecisionWindowOpen(); - const { data: individualReward, isFetching: isFetchingIndividualReward } = useIndividualReward(); - const { data: userAllocations, isFetching: isFetchingUserAllocation } = useUserAllocations(); - const { data: uqScore, isFetching: isFetchingUqScore } = useUqScore(currentEpoch!, { - enabled: - isSuccessRefreshAntisybilStatus || - (refreshAntisybilStatusError as null | { message: string })?.message === - 'Address is already used for delegation', - }); - const { - wasRewardsAlreadyClosed, - setWasRewardsAlreadyClosed, - wasUqTooLowAlreadyClosed, - setWasUqTooLowAlreadyClosed, - } = useTipsStore(state => ({ - setWasConnectWalletAlreadyClosed: state.setWasConnectWalletAlreadyClosed, - setWasRewardsAlreadyClosed: state.setWasRewardsAlreadyClosed, - setWasUqTooLowAlreadyClosed: state.setWasUqTooLowAlreadyClosed, - wasConnectWalletAlreadyClosed: state.data.wasConnectWalletAlreadyClosed, - wasRewardsAlreadyClosed: state.data.wasRewardsAlreadyClosed, - wasUqTooLowAlreadyClosed: state.data.wasUqTooLowAlreadyClosed, - })); - - useEffect(() => { - if (!address) { - return; - } - /** - * The initial value of UQ for every user is 0.2. - * It does not update automatically after delegation nor after change in Gitcoin Passport itself. - * - * We need to refreshAntisybilStatus to force BE to refetch current values from Gitcoin Passport - * and return true value. - */ - refreshAntisybilStatus(address!); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const isEpoch1 = currentEpoch === 1; - - const isUqTooLowTipVisible = - !!isDecisionWindowOpen && - !isPendingRefreshAntisybilStatus && - !isFetchingUqScore && - uqScore === 20n && - !wasUqTooLowAlreadyClosed; - - const isRewardsTipVisible = - !isEpoch1 && - isConnected && - !isFetchingIndividualReward && - !!individualReward && - individualReward !== 0n && - !isFetchingUserAllocation && - !userAllocations?.hasUserAlreadyDoneAllocation && - !!isDecisionWindowOpen && - !wasRewardsAlreadyClosed; - - return ( - - navigate(ROOT_ROUTES.settings.absolute)} - onClose={() => setWasUqTooLowAlreadyClosed(true)} - text={ - ]} - i18nKey={ - isDesktop - ? 'components.allocation.tip.uqTooLow.text.desktop' - : 'components.allocation.tip.uqTooLow.text.mobile' - } - /> - } - title={isDesktop ? t('uqTooLow.title.desktop') : t('uqTooLow.title.mobile')} - /> - setWasRewardsAlreadyClosed(true)} - text={isDesktop ? t('rewards.text.desktop') : t('rewards.text.mobile')} - title={t('rewards.title')} - /> - - ); -}; - -export default AllocationTipTiles; diff --git a/client/src/components/Allocation/AllocationTipTiles/index.tsx b/client/src/components/Allocation/AllocationTipTiles/index.tsx deleted file mode 100644 index c3a59a07c..000000000 --- a/client/src/components/Allocation/AllocationTipTiles/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -// eslint-disable-next-line no-restricted-exports -export { default } from './AllocationTipTiles'; diff --git a/client/src/components/Allocation/AllocationTipTiles/types.ts b/client/src/components/Allocation/AllocationTipTiles/types.ts deleted file mode 100644 index 6ce64c2c9..000000000 --- a/client/src/components/Allocation/AllocationTipTiles/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default interface AllocationTipTilesProps { - className?: string; -} diff --git a/client/src/components/Settings/Settings.tsx b/client/src/components/Settings/Settings.tsx index 1a3c455c2..d4b35b021 100644 --- a/client/src/components/Settings/Settings.tsx +++ b/client/src/components/Settings/Settings.tsx @@ -7,7 +7,6 @@ import SettingsCurrencyBox from 'components/Settings/SettingsCurrencyBox'; import SettingsMainInfoBox from 'components/Settings/SettingsMainInfoBox'; import SettingsPatronModeBox from 'components/Settings/SettingsPatronModeBox'; import SettingsShowOnboardingBox from 'components/Settings/SettingsShowOnboardingBox'; -import SettingsShowTipsBox from 'components/Settings/SettingsShowTipsBox'; import useIsProjectAdminMode from 'hooks/helpers/useIsProjectAdminMode'; import useIsPatronMode from 'hooks/queries/useIsPatronMode'; @@ -33,10 +32,7 @@ const Settings = (): ReactElement => { {isConnected && !isProjectAdminMode && } {!isProjectAdminMode && !isPatronMode && ( - <> - - - + )} diff --git a/client/src/components/Settings/SettingsShowTipsBox/SettingsShowTipsBox.tsx b/client/src/components/Settings/SettingsShowTipsBox/SettingsShowTipsBox.tsx deleted file mode 100644 index 9d906d8c9..000000000 --- a/client/src/components/Settings/SettingsShowTipsBox/SettingsShowTipsBox.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { ReactElement } from 'react'; -import { useTranslation } from 'react-i18next'; - -import SettingsToggleBox from 'components/Settings/SettingsToggleBox'; -import useSettingsStore from 'store/settings/store'; - -const SettingsShowTipsBox = (): ReactElement => { - const { t } = useTranslation('translation', { keyPrefix: 'views.settings' }); - const { setAreOctantTipsAlwaysVisible, areOctantTipsAlwaysVisible } = useSettingsStore(state => ({ - areOctantTipsAlwaysVisible: state.data.areOctantTipsAlwaysVisible, - setAreOctantTipsAlwaysVisible: state.setAreOctantTipsAlwaysVisible, - })); - - return ( - setAreOctantTipsAlwaysVisible(event.target.checked)} - > - {t('alwaysShowOctantTips')} - - ); -}; - -export default SettingsShowTipsBox; diff --git a/client/src/components/Settings/SettingsShowTipsBox/index.tsx b/client/src/components/Settings/SettingsShowTipsBox/index.tsx deleted file mode 100644 index 55c60a139..000000000 --- a/client/src/components/Settings/SettingsShowTipsBox/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -// eslint-disable-next-line no-restricted-exports -export { default } from './SettingsShowTipsBox'; diff --git a/client/src/components/shared/TipTile/TipTile.module.scss b/client/src/components/shared/TipTile/TipTile.module.scss deleted file mode 100644 index f2db86de8..000000000 --- a/client/src/components/shared/TipTile/TipTile.module.scss +++ /dev/null @@ -1,108 +0,0 @@ -.root { - position: relative; - display: flex; - background: $color-white; - border-radius: $border-radius-16; - width: 100%; - height: 20rem; - align-items: center; - padding: 0 2.4rem; - - &.isClickable { - cursor: pointer; - } - - @media #{$desktop-up} { - height: 22.4rem; - } -} - -.content { - display: flex; - flex-direction: column; - width: 100%; -} - -.info { - display: flex; - align-items: center; - height: 5.6rem; - border-bottom: 0.1rem solid $color-octant-grey3; -} - -.infoLabel { - color: $color-octant-grey5; - font-size: $font-size-12; - margin-left: 0.8rem; - line-height: 3.2rem; - - @media #{$desktop-up} { - font-size: $font-size-14; - } -} - -.imageWrapper { - display: flex; - flex: 1; - justify-content: center; - max-height: 14.4rem; - - @media #{$desktop-up} { - align-items: center; - width: 28rem; - } -} - -.image { - max-width: 100%; - max-height: 100%; -} - -.body { - display: flex; - text-align: left; - height: 14.4rem; - padding-top: 1.2rem; - - @media #{$desktop-up} { - height: 16.8rem; - } -} - -.titleAndText { - display: flex; - flex-direction: column; -} - -.title { - color: $color-octant-dark; - font-weight: $font-weight-bold; - font-size: $font-size-16; - line-height: 3.2rem; - - @media #{$desktop-up} { - font-size: $font-size-18; - line-height: 4.8rem; - } -} - -.text { - color: $color-octant-grey5; - font-size: $font-size-12; - font-weight: $font-weight-semibold; - line-height: 2rem; - width: 20rem; - - @media #{$desktop-up} { - flex: 1; - width: 33.6rem; - font-size: $font-size-14; - line-height: 2.2rem; - } -} - -.buttonClose { - position: absolute; - top: 0.8rem; - right: 0.8rem; -} diff --git a/client/src/components/shared/TipTile/TipTile.tsx b/client/src/components/shared/TipTile/TipTile.tsx deleted file mode 100644 index 745db0fcc..000000000 --- a/client/src/components/shared/TipTile/TipTile.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import cx from 'classnames'; -import { AnimatePresence, motion } from 'framer-motion'; -import React, { useRef } from 'react'; -import { useTranslation } from 'react-i18next'; - -import Button from 'components/ui/Button'; -import Img from 'components/ui/Img'; -import Svg from 'components/ui/Svg'; -import useIsProjectAdminMode from 'hooks/helpers/useIsProjectAdminMode'; -import useMediaQuery from 'hooks/helpers/useMediaQuery'; -import { cross, info } from 'svg/misc'; - -import styles from './TipTile.module.scss'; -import { TipTileProps } from './types'; - -const TipTile: React.FC = ({ - className, - dataTest = 'TipTile', - image, - imageClassName, - isOpen, - onClose, - onClick, - text, - title, -}) => { - const { t } = useTranslation('translation', { keyPrefix: 'common' }); - const { isDesktop } = useMediaQuery(); - const isProjectAdminMode = useIsProjectAdminMode(); - const shouldSkipEntranceAnimation = useRef(isOpen); - - return ( - - {!isProjectAdminMode && isOpen && ( - 1 - (1 - x) ** 3, - mass: 1.5, - stiffness: 800, - }} - > -
-
- -
{t('gettingStarted')}
-
-
-
-
{title}
-
{text}
-
-
- -
-
-
-