profile improvement (#2071)

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)
 

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 = (
     <HeaderElementWrap>
       <Announcement />
@@ -228,7 +228,7 @@ export default function Header() {
         </HeaderLinks>
       </HeaderRow>
       <HeaderControls>
-        {uptoSmall ? (
+        {upToExtraSmall ? (
           <HeaderElement>
             <SelectNetwork />
             <SelectWallet />

src/components/Header/web3/SelectWallet.tsx

@@ -163,17 +163,16 @@ function Web3StatusInner() {
                 text={
                   <Text style={{ fontSize: '12px', textAlign: 'left', whiteSpace: 'normal' }}>
                     <Trans>
-                      You are not signed in with this wallet address. If you wish, you can
-                      <Text
-                        as="span"
+                      You are not signed in with this wallet address. If you wish, you can{' '}
+                      <span
                         style={{ cursor: 'pointer', fontSize: '12px', color: theme.primary }}
                         onClick={e => {
                           e.stopPropagation()
                           signIn(account)
                         }}
                       >
                         sign-in
-                      </Text>
+                      </span>{' '}
                       to link your wallet to a profile. This will allow us to offer you a better experience
                     </Trans>
                   </Text>

src/components/Header/web3/SignWallet/ProfileContent.tsx

@@ -226,7 +226,12 @@ const ProfileContent = ({ scroll, toggleModal }: { scroll?: boolean; toggleModal
       </Column>
       <ActionWrapper hasBorder={profiles.length > 1}>
         {!KyberOauth2.getConnectedAccounts().includes(account?.toLowerCase() ?? '') && isEVM && (
-          <ActionItem onClick={() => signIn()}>
+          <ActionItem
+            onClick={() => {
+              toggleModal()
+              signIn()
+            }}
+          >
             <UserPlus size={18} /> <Trans>Add Account</Trans>
           </ActionItem>
         )}

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;

src/components/SearchModal/CurrencyList.tsx

@@ -304,7 +304,7 @@ function CurrencyList({
     <div style={{ flex: 1 }}>
       <AutoSizer>
         {({ height, width }) => (
-          <InfiniteLoader isItemLoaded={isItemLoaded} itemCount={itemCount} loadMoreItems={loadMoreItems}>
+          <InfiniteLoader isItemLoaded={isItemLoaded} itemCount={itemCount} loadMoreItems={loadMoreItems} threshold={3}>
             {({ onItemsRendered, ref }) => (
               <FixedSizeList
                 height={height}

src/components/swapv2/LimitOrder/LimitOrderForm.tsx

@@ -653,7 +653,7 @@ const LimitOrderForm = function LimitOrderForm({
       messages.push(
         <Text>
           <Trans>
-            Your order may only be filled when market price of {currencyIn?.symbol} to {currencyOut?.symbol} is &lt;
+            Your order may only be filled when market price of {currencyIn?.symbol} to {currencyOut?.symbol} is &lt;{' '}
             <HightLight>{formattedNum(String(tradeInfo?.marketRate), true)}</HightLight>, as estimated gas fee to fill
             your order is ~<HightLight>${removeTrailingZero(tradeInfo?.gasFee?.toPrecision(6) ?? '0')}</HightLight>.
           </Trans>

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,

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 = () => {

src/pages/Bridge/ComfirmBridgeModal.tsx

@@ -426,16 +426,26 @@ export const ConfirmCrossChainModal = memo(function ConfirmCrossChainModal({
         outputAmount &&
         currencyIn &&
         currencyOut && (
-          <Flex alignItems={'center'} color={theme.text} sx={{ gap: '4px' }}>
-            <TokenLogoWithChain currency={currencyIn} size={16} />
-            &nbsp;
-            {uint256ToFraction(inputAmount, currencyIn?.decimals).toSignificant(RESERVE_USD_DECIMALS)}
-            <Text as="span"> {currencyIn?.symbol}</Text>
+          <Flex
+            alignItems={'center'}
+            color={theme.text}
+            sx={{ rowGap: '6px', columnGap: '4px', flexWrap: 'wrap', justifyContent: 'center' }}
+          >
+            <Flex sx={{ gap: '4px' }}>
+              <TokenLogoWithChain currency={currencyIn} size={16} />
+              &nbsp;
+              {uint256ToFraction(inputAmount, currencyIn?.decimals).toSignificant(RESERVE_USD_DECIMALS)}
+              <Text as="span"> {currencyIn?.symbol}</Text>
+            </Flex>
+
             <ArrowRight size={14} />
-            <TokenLogoWithChain currency={currencyOut} size={16} />
-            &nbsp;
-            {uint256ToFraction(outputAmount, currencyOut?.decimals).toSignificant(RESERVE_USD_DECIMALS)}
-            <Text as="span">{currencyOut?.symbol}</Text>
+
+            <Flex sx={{ gap: '4px' }}>
+              <TokenLogoWithChain currency={currencyOut} size={16} />
+              &nbsp;
+              {uint256ToFraction(outputAmount, currencyOut?.decimals).toSignificant(RESERVE_USD_DECIMALS)}
+              <Text as="span">{currencyOut?.symbol}</Text>
+            </Flex>
           </Flex>
         )
       }

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)

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()

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,
   }
 }

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++

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