From 8d66f96ecc6cd3851fa2e919e5622f9cd2675c31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20Ho=C3=A0i=20Danh?= <33005392+nguyenhoaidanh@users.noreply.github.com> Date: Mon, 17 Jul 2023 17:12:26 +0700 Subject: [PATCH] profile improvement (#2071) --- src/components/Announcement/index.tsx | 7 +++-- src/components/Header/index.tsx | 4 +-- src/components/Header/web3/SelectWallet.tsx | 7 ++--- .../Header/web3/SignWallet/ProfileContent.tsx | 7 ++++- src/components/Menu/index.tsx | 1 + src/components/SearchModal/CurrencyList.tsx | 2 +- .../swapv2/LimitOrder/LimitOrderForm.tsx | 2 +- src/hooks/useLogin.tsx | 24 ++++++++++------ src/hooks/useSessionExpire.ts | 9 ++++-- src/pages/Bridge/ComfirmBridgeModal.tsx | 28 +++++++++++++------ .../PriceAlerts/ActiveAlerts/index.tsx | 18 ++++++------ .../Profile/WarningSignMessage.tsx | 2 +- src/state/user/hooks.tsx | 8 ++++-- src/utils/iamError.ts | 7 ++++- src/utils/string.ts | 2 +- 15 files changed, 80 insertions(+), 48 deletions(-) diff --git a/src/components/Announcement/index.tsx b/src/components/Announcement/index.tsx index 6ca21f5c0d..af93fc0ec9 100644 --- a/src/components/Announcement/index.tsx +++ b/src/components/Announcement/index.tsx @@ -143,9 +143,9 @@ export default function AnnouncementComponent() { numberOfUnread, pagination: { totalItems: totalPrivateAnnouncement }, } = isError ? responseDefault : respPrivateAnnouncement - const refreshAnnouncement = () => { + const refreshAnnouncement = useCallback(() => { fetchAnnouncementsByTab(true) - } + }, [fetchAnnouncementsByTab]) const loadMoreAnnouncements = useCallback(() => { fetchAnnouncementsByTab() @@ -226,8 +226,9 @@ export default function AnnouncementComponent() { useEffect(() => { if (userInfo?.identityId) { invalidateTag(ANNOUNCEMENT_TAGS) + refreshAnnouncement() } - }, [userInfo?.identityId, invalidateTag]) + }, [userInfo?.identityId, invalidateTag, refreshAnnouncement]) useInterval(prefetchPrivateAnnouncements, 10_000) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 93de1f68ff..bad526a90b 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -180,7 +180,7 @@ export default function Header() { const [holidayMode] = useHolidayMode() const theme = useTheme() const { mixpanelHandler } = useMixpanel() - const uptoSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`) + const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`) const menu = ( @@ -228,7 +228,7 @@ export default function Header() { - {uptoSmall ? ( + {upToExtraSmall ? ( diff --git a/src/components/Header/web3/SelectWallet.tsx b/src/components/Header/web3/SelectWallet.tsx index ed7a83626f..02757c52c5 100644 --- a/src/components/Header/web3/SelectWallet.tsx +++ b/src/components/Header/web3/SelectWallet.tsx @@ -163,9 +163,8 @@ function Web3StatusInner() { text={ - You are not signed in with this wallet address. If you wish, you can - { e.stopPropagation() @@ -173,7 +172,7 @@ function Web3StatusInner() { }} > sign-in - + {' '} to link your wallet to a profile. This will allow us to offer you a better experience diff --git a/src/components/Header/web3/SignWallet/ProfileContent.tsx b/src/components/Header/web3/SignWallet/ProfileContent.tsx index 20824faf12..5514030ad2 100644 --- a/src/components/Header/web3/SignWallet/ProfileContent.tsx +++ b/src/components/Header/web3/SignWallet/ProfileContent.tsx @@ -226,7 +226,12 @@ const ProfileContent = ({ scroll, toggleModal }: { scroll?: boolean; toggleModal 1}> {!KyberOauth2.getConnectedAccounts().includes(account?.toLowerCase() ?? '') && isEVM && ( - signIn()}> + { + toggleModal() + signIn() + }} + > Add Account )} diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index e61f75815b..c105986bf1 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -102,6 +102,7 @@ const NavLinkBetween = styled(MenuItem)` justify-content: space-between; position: unset !important; max-height: 40px; + cursor: pointer; svg { margin: 0; width: unset; diff --git a/src/components/SearchModal/CurrencyList.tsx b/src/components/SearchModal/CurrencyList.tsx index f6a55b37f2..43e39fdadf 100644 --- a/src/components/SearchModal/CurrencyList.tsx +++ b/src/components/SearchModal/CurrencyList.tsx @@ -304,7 +304,7 @@ function CurrencyList({
{({ height, width }) => ( - + {({ onItemsRendered, ref }) => ( - Your order may only be filled when market price of {currencyIn?.symbol} to {currencyOut?.symbol} is < + Your order may only be filled when market price of {currencyIn?.symbol} to {currencyOut?.symbol} is <{' '} {formattedNum(String(tradeInfo?.marketRate), true)}, as estimated gas fee to fill your order is ~${removeTrailingZero(tradeInfo?.gasFee?.toPrecision(6) ?? '0')}. diff --git a/src/hooks/useLogin.tsx b/src/hooks/useLogin.tsx index 2bf245999f..b3c94ce5bf 100644 --- a/src/hooks/useLogin.tsx +++ b/src/hooks/useLogin.tsx @@ -165,6 +165,16 @@ const useLogin = (autoLogin = false) => { [setLoading, signInAnonymous, getProfile, saveSignedAccount, showSignInSuccess], ) + const redirectSignIn = useCallback( + (account: string) => { + setLoginRedirectUrl(window.location.href) + setTimeout(() => { + KyberOauth2.authenticate(isEVM ? { wallet_address: account } : {}) // navigate to login page + }, 1000) + }, + [isEVM, setLoginRedirectUrl], + ) + // check account info and redirect if needed const [, setAutoSignIn] = useIsAutoLoginAfterConnectWallet() const signIn = useCallback( @@ -186,26 +196,21 @@ const useLogin = (autoLogin = false) => { return } - const redirectSignIn = () => { - setLoginRedirectUrl(window.location.href) - setTimeout(() => { - KyberOauth2.authenticate(isEVM ? { wallet_address: desireAccount || account || '' } : {}) // navigate to login page - }, 1000) - } + const formatAccount = desireAccount || account || '' if (showSessionExpired && isSelectAccount && !isTokenExist) { showConfirm({ isOpen: true, content: t`Your session has expired. Please sign-in to continue.`, title: t`Session Expired`, confirmText: t`Sign-in`, - onConfirm: () => redirectSignIn(), + onConfirm: () => redirectSignIn(formatAccount), cancelText: t`Cancel`, }) return } - redirectSignIn() + redirectSignIn(formatAccount) }, - [account, isEVM, checkSessionSignIn, toggleWalletModal, showConfirm, setLoginRedirectUrl, setAutoSignIn], + [account, checkSessionSignIn, toggleWalletModal, showConfirm, setAutoSignIn, redirectSignIn], ) const showSignOutSuccess = useCallback(() => { @@ -307,6 +312,7 @@ const useLogin = (autoLogin = false) => { return { signOut: signOutWrapped, signIn: signInWrapped, + redirectSignIn, signOutAll, importGuestAccount, checkSessionSignIn, diff --git a/src/hooks/useSessionExpire.ts b/src/hooks/useSessionExpire.ts index 3f6bbb3d81..82e8faa1c9 100644 --- a/src/hooks/useSessionExpire.ts +++ b/src/hooks/useSessionExpire.ts @@ -12,7 +12,7 @@ import { useSignedAccountInfo } from 'state/profile/hooks' export default function useSessionExpiredGlobal() { const { pathname } = useLocation() const showConfirm = useShowConfirm() - const { signIn } = useLogin() + const { signIn, redirectSignIn, signInAnonymous } = useLogin() const navigate = useNavigate() const { signedAccount, signedMethod } = useSignedAccountInfo() @@ -25,7 +25,10 @@ export default function useSessionExpiredGlobal() { title: t`Session Expired`, confirmText: t`Sign-in`, cancelText: t`Cancel`, - onConfirm: () => signIn(), + onConfirm: () => redirectSignIn(accountId || signedAccount), + onCancel: () => { + signInAnonymous(KyberOauth2.getConnectedAnonymousAccounts()[0]) + }, } const isKyberAIPage = pathname.toLowerCase().startsWith(APP_PATHS.KYBERAI.toLowerCase()) && @@ -38,7 +41,7 @@ export default function useSessionExpiredGlobal() { } KyberOauth2.on(KyberOauth2Event.SESSION_EXPIRED, listener) return () => KyberOauth2.off(KyberOauth2Event.SESSION_EXPIRED, listener) - }, [pathname, showConfirm, signIn, navigate, signedAccount]) + }, [pathname, showConfirm, redirectSignIn, navigate, signedAccount, signInAnonymous]) useEffect(() => { const listener = () => { diff --git a/src/pages/Bridge/ComfirmBridgeModal.tsx b/src/pages/Bridge/ComfirmBridgeModal.tsx index 8260098b24..5d18de085c 100644 --- a/src/pages/Bridge/ComfirmBridgeModal.tsx +++ b/src/pages/Bridge/ComfirmBridgeModal.tsx @@ -426,16 +426,26 @@ export const ConfirmCrossChainModal = memo(function ConfirmCrossChainModal({ outputAmount && currencyIn && currencyOut && ( - - -   - {uint256ToFraction(inputAmount, currencyIn?.decimals).toSignificant(RESERVE_USD_DECIMALS)} - {currencyIn?.symbol} + + + +   + {uint256ToFraction(inputAmount, currencyIn?.decimals).toSignificant(RESERVE_USD_DECIMALS)} + {currencyIn?.symbol} + + - -   - {uint256ToFraction(outputAmount, currencyOut?.decimals).toSignificant(RESERVE_USD_DECIMALS)} - {currencyOut?.symbol} + + + +   + {uint256ToFraction(outputAmount, currencyOut?.decimals).toSignificant(RESERVE_USD_DECIMALS)} + {currencyOut?.symbol} + ) } diff --git a/src/pages/NotificationCenter/PriceAlerts/ActiveAlerts/index.tsx b/src/pages/NotificationCenter/PriceAlerts/ActiveAlerts/index.tsx index 7b55a82e86..96f4076927 100644 --- a/src/pages/NotificationCenter/PriceAlerts/ActiveAlerts/index.tsx +++ b/src/pages/NotificationCenter/PriceAlerts/ActiveAlerts/index.tsx @@ -1,11 +1,10 @@ import { t } from '@lingui/macro' import { useEffect, useState } from 'react' import { Flex } from 'rebass' -import priceAlertApi, { useGetAlertStatsQuery, useGetListAlertsQuery } from 'services/priceAlert' +import { useGetAlertStatsQuery, useGetListAlertsQuery } from 'services/priceAlert' -import { useInvalidateTags } from 'components/Announcement/helper' import { PrivateAnnouncementType } from 'components/Announcement/type' -import { RTK_QUERY_TAGS } from 'constants/index' +import useDebounce from 'hooks/useDebounce' import NoData from 'pages/NotificationCenter/NoData' import CommonPagination from 'pages/NotificationCenter/PriceAlerts/CommonPagination' import { ITEMS_PER_PAGE } from 'pages/NotificationCenter/const' @@ -17,20 +16,21 @@ import SingleAlert from './SingleAlert' const ActiveAlerts = ({ setDisabledClearAll }: { setDisabledClearAll: (v: boolean) => void }) => { const { userInfo } = useSessionInfo() const [page, setPage] = useState(1) - const { data, isLoading, refetch } = useGetListAlertsQuery({ + const { data, isFetching, refetch } = useGetListAlertsQuery({ page, pageSize: ITEMS_PER_PAGE, sort: 'is_enabled:desc,created_at:desc', }) + const isLoading = useDebounce(isFetching, 300) const { data: alertStat, refetch: refetchStat } = useGetAlertStatsQuery() const isMaxQuotaActiveAlert = alertStat ? alertStat.totalActiveAlerts >= alertStat.maxActiveAlerts : false - const invalidateTag = useInvalidateTags(priceAlertApi.reducerPath) useEffect(() => { - if (userInfo?.identityId) { - invalidateTag([RTK_QUERY_TAGS.GET_ALERTS, RTK_QUERY_TAGS.GET_ALERTS_STAT]) - } - }, [userInfo?.identityId, invalidateTag]) + try { + refetch() + refetchStat() + } catch (error) {} + }, [userInfo?.identityId, refetch, refetchStat]) useEffect(() => { setDisabledClearAll(!data?.alerts?.length) diff --git a/src/pages/NotificationCenter/Profile/WarningSignMessage.tsx b/src/pages/NotificationCenter/Profile/WarningSignMessage.tsx index 02983da9cb..189673d167 100644 --- a/src/pages/NotificationCenter/Profile/WarningSignMessage.tsx +++ b/src/pages/NotificationCenter/Profile/WarningSignMessage.tsx @@ -27,7 +27,7 @@ const WarningWrapper = styled.div` padding: 12px 14px; `} ` -const DOC_URL = 'https://docs.kyberswap.com/kyberswap-solutions/kyberswap-interface/profiles/profile-customization' +const DOC_URL = 'https://docs.kyberswap.com/kyberswap-solutions/kyberswap-interface/profiles' const WarningSignMessage = () => { const { signIn } = useLogin() const { pendingAuthentication } = useSessionInfo() diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index 39227c98bf..ff1dac0025 100644 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -524,12 +524,14 @@ export const useIsWhiteListKyberAI = () => { const loadingDebounced = useDebounce(isLoading, 500) || connectingWallet const participantInfo = isError || loadingDebounced || !account ? participantDefault : rawData - + // isWhitelist, isWaitList check account is hotfix for now, will remove utils backend fixed bug return { loading: loadingDebounced, isWhiteList: - isLogin && (participantInfo?.status === ParticipantStatus.WHITELISTED || userInfo?.data?.hasAccessToKyberAI), - isWaitList: isLogin && participantInfo?.status === ParticipantStatus.WAITLISTED, + !!account && + isLogin && + (participantInfo?.status === ParticipantStatus.WHITELISTED || userInfo?.data?.hasAccessToKyberAI), + isWaitList: !!account && isLogin && participantInfo?.status === ParticipantStatus.WAITLISTED, refetch, } } diff --git a/src/utils/iamError.ts b/src/utils/iamError.ts index 5eab6bd7be..e00f46b848 100644 --- a/src/utils/iamError.ts +++ b/src/utils/iamError.ts @@ -23,6 +23,9 @@ const sendError = (name: string, apiUrl: string, trackData: any) => { captureException(error, { level: 'fatal', extra: { args: JSON.stringify(trackData, null, 2) } }) } +// hot fix to prevent spam for now. +const blacklistPathBff = ['/v1/notification/me'] + /** * check error status: blocked, maybe cors issues or server down * only check bff api + 2 route apis @@ -47,13 +50,15 @@ export const checkIamDown = (axiosErr: AxiosError) => { }, response, statusCode, + message: axiosErr?.message, + code: axiosErr?.code, } const apiUrl = axiosErr?.config?.url ?? '' const isRouteApiDie = isDie && (apiUrl.endsWith(AGGREGATOR_API_PATHS.GET_ROUTE) || apiUrl.endsWith(AGGREGATOR_API_PATHS.BUILD_ROUTE)) - const isIamDie = isDie && apiUrl.startsWith(BFF_API) + const isIamDie = isDie && apiUrl.startsWith(BFF_API) && !blacklistPathBff.some(path => apiUrl.endsWith(path)) if (isRouteApiDie) { ErrorInfo.routeApiError++ diff --git a/src/utils/string.ts b/src/utils/string.ts index 20a14e8433..30d527cc8b 100644 --- a/src/utils/string.ts +++ b/src/utils/string.ts @@ -37,7 +37,7 @@ export const escapeScriptHtml = (str: string) => { return str.replace(/<.*?script.*?>.*?<\/.*?script.*?>/gim, '') } -export const isEmailValid = (value: string | undefined) => value?.match(/\S+@\S+\.\S+/) +export const isEmailValid = (value: string | undefined) => value?.match(/^\w+([\.-]?\w)*@\w+([\.-]?\w)*(\.\w{2,10})+$/) export const getChainIdFromSlug = (network: string | undefined) => { return Object.values(NETWORKS_INFO).find(n => n.route === network)?.chainId