From 4e35d00b20a664883c6f5e9da611185633f446f3 Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Wed, 19 Jul 2023 16:24:38 +0700 Subject: [PATCH] UI for feedback survey kyberAI (#2082) * UI for feedback survey kyberAI * chore * chore * add to single page * fix comments and add end timestamp * fix typo * fix warning --- .../TrueSightV2/components/FeedbackSurvey.tsx | 183 ++++++++++++++++++ src/pages/TrueSightV2/pages/SingleToken.tsx | 2 + .../TrueSightV2/pages/TokenAnalysisList.tsx | 2 + src/pages/TrueSightV2/types/index.tsx | 2 + src/state/user/hooks.tsx | 9 +- 5 files changed, 197 insertions(+), 1 deletion(-) create mode 100644 src/pages/TrueSightV2/components/FeedbackSurvey.tsx diff --git a/src/pages/TrueSightV2/components/FeedbackSurvey.tsx b/src/pages/TrueSightV2/components/FeedbackSurvey.tsx new file mode 100644 index 0000000000..71ba6725d6 --- /dev/null +++ b/src/pages/TrueSightV2/components/FeedbackSurvey.tsx @@ -0,0 +1,183 @@ +import { Trans } from '@lingui/macro' +import { useLocalStorage } from '@solana/wallet-adapter-react' +import { useEffect, useMemo, useState } from 'react' +import { X } from 'react-feather' +import { Text } from 'rebass' +import styled, { css } from 'styled-components' + +import { ButtonOutlined, ButtonPrimary } from 'components/Button' +import Modal from 'components/Modal' +import { RowBetween, RowFit } from 'components/Row' +import useTheme from 'hooks/useTheme' +import { useGetParticipantKyberAIInfo } from 'state/user/hooks' + +import { ParticipantStatus } from '../types' + +const Wrapper = styled.div` + width: min(95vw, 480px); + border-radius: 20px; + padding: 20px; + display: flex; + gap: 20px; + flex-direction: column; + b { + color: ${({ theme }) => theme.text}; + } +` + +const WidgetWrapper = styled.div<{ show?: boolean }>` + position: fixed; + right: 0; + top: 310px; + transition: filter 0.1s ease-out, right 1s ease-out, visibility 1s; + z-index: 20; + transform-origin: 100% 100%; + transform: rotate(-90deg); + border-radius: 8px 8px 0px 0px; + background: ${({ theme }) => theme.primary + '32'}; + padding: 4px 8px; + color: ${({ theme }) => theme.primary}; + cursor: pointer; + ${({ show }) => + !show && + css` + right: -25px; + visibility: hidden; + `}; + + :hover { + filter: brightness(1.2); + } +` + +const XWrapper = styled.span` + padding: 2px; + border-radius: 50%; + transition: all 0.1s; + svg { + display: block; + } + :hover { + background-color: ${({ theme }) => theme.primary + '36'}; + } +` + +const LOCALSTORAGE_MODAL_SHOWED = 'showedKyberAIFeedbackSurvey' +const LOCALSTORAGE_WIDGET_SHOWED = 'showedKyberAIFeedbackSurveyWidget' +const MOMENT_THIS_SURVEY_RELEASE = 1689768000 +const END_DATE = 1691020800000 // Aug 3 + +export default function FeedbackSurvey() { + const [isOpen, setIsOpen] = useState(false) + const [isOpenWidget, setIsOpenWidget] = useState(false) + const theme = useTheme() + const { updatedAt, status } = useGetParticipantKyberAIInfo() + const [isShowModalLS, setIsShowModalLS] = useLocalStorage(LOCALSTORAGE_MODAL_SHOWED, undefined) + const [isShowWidgetLS, setIsShowWidgetLS] = useLocalStorage(LOCALSTORAGE_WIDGET_SHOWED, undefined) + + const isValid = useMemo( + () => updatedAt < MOMENT_THIS_SURVEY_RELEASE && status === ParticipantStatus.WHITELISTED && Date.now() < END_DATE, + [updatedAt, status], + ) + + useEffect(() => { + if (!isValid) return + if (!isShowModalLS) { + setIsOpen(true) + setIsShowModalLS('1') + } + if (!isShowWidgetLS) { + setIsOpenWidget(true) + } + }, [isValid, isShowModalLS, isShowWidgetLS, setIsShowModalLS]) + + if (!isValid) return null + + return ( + <> + + + + + KyberAI Feedback Survey + +
setIsOpen(false)} style={{ cursor: 'pointer' }}> + +
+ + + + Hey KyberAI Beta Users,
+
+ Your feedback is vital to us! Help shape the future of KyberAI by completing our short Beta + Feedback Survey{' '} + + here + + . Your input will help us meet your trading needs better!
+
+ As a token of appreciation, we will distribute a total of 400 KNC among the top 20 feedback + respondents + + + + setIsOpen(false)}> + Maybe later + + + window.open( + 'https://docs.google.com/forms/d/e/1FAIpQLSebHPpIP0mqtMb57v3N3rmUCzo87ur86ruTF5QchJiJ2sRmfw/viewform?pli=1', + '_blank', + ) + } + > + Fill survey + + + + + { + window.open( + 'https://docs.google.com/forms/d/e/1FAIpQLSebHPpIP0mqtMb57v3N3rmUCzo87ur86ruTF5QchJiJ2sRmfw/viewform?pli=1', + '_blank', + ) + setIsShowWidgetLS('1') + }} + > + + + + + + + + + + + + + Feedback + + { + e.stopPropagation() + setIsOpenWidget(false) + }} + > + + + + + + ) +} diff --git a/src/pages/TrueSightV2/pages/SingleToken.tsx b/src/pages/TrueSightV2/pages/SingleToken.tsx index 0983ba6314..03ce90efa1 100644 --- a/src/pages/TrueSightV2/pages/SingleToken.tsx +++ b/src/pages/TrueSightV2/pages/SingleToken.tsx @@ -20,6 +20,7 @@ import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const' import { MEDIA_WIDTHS } from 'theme' import DisplaySettings from '../components/DisplaySettings' +import FeedbackSurvey from '../components/FeedbackSurvey' import KyberAIShareModal from '../components/KyberAIShareModal' import SimpleTooltip from '../components/SimpleTooltip' import { TokenOverview } from '../components/TokenOverview' @@ -612,6 +613,7 @@ export default function SingleToken() { }) } /> + ) } diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx index 4e3fe387b7..721a2ef413 100644 --- a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx +++ b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx @@ -27,6 +27,7 @@ import useTheme from 'hooks/useTheme' import { MEDIA_WIDTHS } from 'theme' import ChevronIcon from '../components/ChevronIcon' +import FeedbackSurvey from '../components/FeedbackSurvey' import KyberAIShareModal from '../components/KyberAIShareModal' import MultipleChainDropdown from '../components/MultipleChainDropdown' import NetworkSelect from '../components/NetworkSelect' @@ -1102,6 +1103,7 @@ export default function TokenAnalysisList() { }) } /> + ) } diff --git a/src/pages/TrueSightV2/types/index.tsx b/src/pages/TrueSightV2/types/index.tsx index 38a08251bf..613101d388 100644 --- a/src/pages/TrueSightV2/types/index.tsx +++ b/src/pages/TrueSightV2/types/index.tsx @@ -197,6 +197,8 @@ export type ParticipantInfo = { referralCode: string status: ParticipantStatus rankNo: number + updatedAt: number + createdAt: number } export enum KyberAIListType { diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index ff1dac0025..3d0a9d3ff1 100644 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -497,7 +497,14 @@ export const useSlippageSettingByPage = (isCrossChain = false) => { return { setRawSlippage, rawSlippage, isSlippageControlPinned, togglePinSlippage } } -const participantDefault = { rankNo: 0, status: ParticipantStatus.UNKNOWN, referralCode: '', id: 0 } +const participantDefault = { + rankNo: 0, + status: ParticipantStatus.UNKNOWN, + referralCode: '', + id: 0, + updatedAt: 0, + createdAt: 0, +} export const useGetParticipantKyberAIInfo = (): ParticipantInfo => { const { userInfo } = useSessionInfo() const { data: data = participantDefault, isError } = useGetParticipantInfoQuery(undefined, {