tracking, toast.

.


alert warning

.env.stg

@@ -24,7 +24,7 @@ REACT_APP_FIREBASE_VAPID_KEY=BGO4YGVpmvxoMlqILCfVUVfyA0M5ohAKp_0-p1jqfGm15evDld0
 REACT_APP_NOTIFICATION_API=https://notification.kyberswap.com/api
 
 REACT_APP_CAMPAIGN_BASE_URL=https://campaigns.stg.kyberengineering.io
-REACT_APP_TYPE_AND_SWAP_URL=https://tns.kyberengineering.io/api
+REACT_APP_TYPE_AND_SWAP_URL=https://type-swap.stg.kyberengineering.io/api
 
 REACT_APP_TRANSAK_URL=https://staging-global.transak.com
 REACT_APP_TRANSAK_API_KEY=327b8b63-626b-4376-baf2-70a304c48488

src/components/LiveChart/AnimatingNumber.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 import { Text, Flex } from 'rebass'
 import useTheme from 'hooks/useTheme'

src/components/Menu/FaucetModal.tsx

@@ -2,11 +2,16 @@ import { Trans, t } from '@lingui/macro'
 import React, { useContext, useEffect, useMemo, useState } from 'react'
 import { Flex, Text } from 'rebass'
 import { ApplicationModal } from 'state/application/actions'
-import { useAddPopup, useModalOpen, useToggleModal, useWalletModalToggle } from 'state/application/hooks'
-import { ThemeContext } from 'styled-components'
+import {
+  NotificationType,
+  useModalOpen,
+  useNotify,
+  useToggleModal,
+  useWalletModalToggle,
+} from 'state/application/hooks'
+import styled, { ThemeContext } from 'styled-components'
 import { ButtonPrimary } from 'components/Button'
 import { getTokenLogoURL, isAddress, shortenAddress } from 'utils'
-import styled from 'styled-components'
 import { CloseIcon } from 'theme'
 import { RowBetween } from 'components/Row'
 import { useActiveWeb3React } from 'hooks'
@@ -50,7 +55,7 @@ function FaucetModal() {
   const toggle = useToggleModal(ApplicationModal.FAUCET_POPUP)
   const theme = useContext(ThemeContext)
   const [rewardData, setRewardData] = useState<{ amount: BigNumber; tokenAddress: string; program: number }>()
-  const addPopup = useAddPopup()
+  const notify = useNotify()
   const toggleWalletModal = useWalletModalToggle()
   const { mixpanelHandler } = useMixpanel()
   const allTokens = useAllTokens()
@@ -84,14 +89,12 @@ function FaucetModal() {
       })
       const content = await rawResponse.json()
       if (content) {
-        addPopup({
-          simple: {
-            title: t`Request to Faucet - Submitted`,
-            success: true,
-            summary: t`You will receive ${
-              rewardData?.amount ? getFullDisplayBalance(rewardData?.amount, token?.decimals) : 0
-            } ${tokenSymbol} soon!`,
-          },
+        notify({
+          title: t`Request to Faucet - Submitted`,
+          type: NotificationType.SUCCESS,
+          summary: t`You will receive ${
+            rewardData?.amount ? getFullDisplayBalance(rewardData?.amount, token?.decimals) : 0
+          } ${tokenSymbol} soon!`,
         })
         setRewardData(rw => {
           if (rw) {

src/components/Popups/PopupItem.tsx

@@ -4,7 +4,7 @@ import { useSpring } from 'react-spring/web'
 import styled, { keyframes, ThemeContext } from 'styled-components'
 import { animated } from 'react-spring'
 import { PopupContent } from 'state/application/actions'
-import { useRemovePopup } from 'state/application/hooks'
+import { NotificationType, useRemovePopup } from 'state/application/hooks'
 import ListUpdatePopup from './ListUpdatePopup'
 import TransactionPopup from './TransactionPopup'
 import SimplePopup from './SimplePopup'
@@ -43,10 +43,11 @@ const ltr = keyframes`
   }
 `
 
-export const Popup = styled.div<{ success?: boolean }>`
+export const Popup = styled.div<{ type?: NotificationType }>`
   display: inline-block;
   width: 100%;
-  background: ${({ theme, success }) => (success ? theme.bg21 : theme.bg22)};
+  background: ${({ theme, type }) =>
+    type === NotificationType.SUCCESS ? theme.bg21 : type === NotificationType.WARNING ? theme.bg23 : theme.bg22};
   position: relative;
   padding: 20px;
   padding-right: 36px;
@@ -118,7 +119,9 @@ export default function PopupItem({
 
   const theme = useContext(ThemeContext)
 
+  const notiType = 'simple' in content ? content.simple.type : NotificationType.SUCCESS
   let popupContent
+  // todo need improve here
   if ('txn' in content) {
     const {
       txn: { hash, success, type, summary },
@@ -131,14 +134,9 @@ export default function PopupItem({
     popupContent = <ListUpdatePopup popKey={popKey} listUrl={listUrl} oldList={oldList} newList={newList} auto={auto} />
   } else if ('simple' in content) {
     const {
-      simple: { title, success, summary },
+      simple: { title, summary, type },
     } = content
-    popupContent = <SimplePopup title={title} success={success} summary={summary} />
-  } else if ('truesightNoti' in content) {
-    const {
-      truesightNoti: { title },
-    } = content
-    popupContent = <SimplePopup title={title} />
+    popupContent = <SimplePopup title={title} type={type} summary={summary} />
   }
 
   const faderStyle = useSpring({
@@ -150,7 +148,7 @@ export default function PopupItem({
   return (
     <PopupWrapper>
       <SolidBackgroundLayer />
-      <Popup success={'txn' in content ? content.txn.success : true}>
+      <Popup type={notiType}>
         <StyledClose color={theme.text2} onClick={removeThisPopup} />
         {popupContent}
         {removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}

src/components/Popups/SimplePopup.tsx

@@ -3,36 +3,42 @@ import { Box, Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components'
 import IconSuccess from 'assets/svg/notification_icon_success.svg'
 import IconFailure from 'assets/svg/notification_icon_failure.svg'
+import IconWarning from 'assets/svg/notification_icon_warning.svg'
 import { AutoColumn } from 'components/Column'
 import { AutoRow } from 'components/Row'
+import { NotificationType } from 'state/application/hooks'
 
 const RowNoFlex = styled(AutoRow)`
   flex-wrap: nowrap;
 `
-
+const mapIcon = {
+  [NotificationType.SUCCESS]: IconSuccess,
+  [NotificationType.WARNING]: IconWarning,
+  [NotificationType.ERROR]: IconFailure,
+}
 export default function SimplePopup({
   title,
-  success = true,
   summary,
+  type = NotificationType.ERROR,
 }: {
   title: string
-  success?: boolean
+  type?: NotificationType
   summary?: string
 }) {
   const theme = useContext(ThemeContext)
-
+  const mapColor = {
+    [NotificationType.SUCCESS]: theme.primary,
+    [NotificationType.WARNING]: theme.text,
+    [NotificationType.ERROR]: theme.red,
+  }
   return (
     <Box>
       <RowNoFlex>
         <div style={{ paddingRight: 16 }}>
-          {success ? (
-            <img src={IconSuccess} alt="IconSuccess" style={{ display: 'block' }} />
-          ) : (
-            <img src={IconFailure} alt="IconFailure" style={{ display: 'block' }} />
-          )}
+          <img src={mapIcon[type]} alt="Icon" style={{ display: 'block' }} />
         </div>
         <AutoColumn gap="8px">
-          <Text fontSize="16px" fontWeight={500} color={success ? theme.primary : theme.red}>
+          <Text fontSize="16px" fontWeight={500} color={mapColor[type]}>
             {title}
           </Text>
           <Text fontSize="14px" fontWeight={400} color={theme.text}>

src/components/Popups/index.tsx

@@ -4,10 +4,11 @@ import { useActivePopups } from 'state/application/hooks'
 import { AutoColumn } from '../Column'
 import PopupItem from './PopupItem'
 import { useURLWarningVisible, useRebrandingAnnouncement } from 'state/user/hooks'
+import { Z_INDEXS } from 'constants/styles'
 
 const MobilePopupWrapper = styled.div<{ height: string | number }>`
   position: absolute;
-  z-index: 9999;
+  z-index: ${Z_INDEXS.POPUP_NOTIFICATION};
   max-width: 100%;
   height: ${({ height }) => height};
   margin: ${({ height }) => (height ? '20px auto;' : 0)};
@@ -36,7 +37,7 @@ const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: string }>`
   right: 1rem;
   max-width: 355px !important;
   width: 100%;
-  z-index: 9999;
+  z-index: ${Z_INDEXS.POPUP_NOTIFICATION};
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     display: none;
@@ -50,22 +51,20 @@ export default function Popups() {
   const urlWarningActive = useURLWarningVisible()
   const rebrandingAnnouncement = useRebrandingAnnouncement()
 
+  const listPopup = activePopups.map(item => (
+    <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
+  ))
   return (
     <>
       <FixedPopupColumn
         gap="20px"
         extraPadding={urlWarningActive ? '108px' : rebrandingAnnouncement ? '148px' : '88px'}
       >
-        {activePopups.map(item => (
-          <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
-        ))}
+        {listPopup}
       </FixedPopupColumn>
       <MobilePopupWrapper height={activePopups?.length > 0 ? 'auto' : 0}>
         <MobilePopupInner>
-          {activePopups // reverse so new items up front
-            .map(item => (
-              <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
-            ))}
+          {listPopup} {/*reverse so new items up front*/}
         </MobilePopupInner>
       </MobilePopupWrapper>
     </>

src/components/swapv2/PairSuggestion/ListPair.tsx

@@ -142,6 +142,7 @@ export default function ListPair({
               data={item}
               key={item.tokenIn + item.tokenOut}
               isFavorite={isFavoritePair(favoritePairs, item)}
+              isFullFavoritePair={favoritePairs.length === MAX_FAVORITE_PAIRS}
             />
           ))}
         </>

src/components/swapv2/PairSuggestion/PairSuggestionItem.tsx

@@ -10,6 +10,8 @@ import Logo from 'components/Logo'
 import { useActiveWeb3React } from 'hooks'
 import { isActivePair } from './utils'
 import { rgba } from 'polished'
+import { MouseoverTooltip } from 'components/Tooltip'
+import { t } from '@lingui/macro'
 
 const ItemWrapper = styled.div<{ isActive: boolean }>`
   cursor: pointer;
@@ -36,8 +38,17 @@ type PropsType = {
   isActive: boolean
   amount: string
   isFavorite?: boolean
+  isFullFavoritePair?: boolean
 }
-export default function SuggestItem({ data, isFavorite, isActive, amount, onClickStar, onSelectPair }: PropsType) {
+export default function SuggestItem({
+  data,
+  isFavorite,
+  isFullFavoritePair,
+  isActive,
+  amount,
+  onClickStar,
+  onSelectPair,
+}: PropsType) {
   const theme = useTheme()
   const activeTokens = useAllTokens(true)
   const { account } = useActiveWeb3React()
@@ -49,6 +60,14 @@ export default function SuggestItem({ data, isFavorite, isActive, amount, onClic
   }
 
   const isTokenNotImport = !isActivePair(activeTokens, data)
+  const star = (
+    <Star
+      fill={isFavorite ? theme.primary : 'none'}
+      color={isFavorite ? theme.primary : theme.subText}
+      onClick={handleClickStar}
+      size={20}
+    />
+  )
   return (
     <ItemWrapper
       tabIndex={isTokenNotImport ? 0 : undefined}
@@ -71,14 +90,13 @@ export default function SuggestItem({ data, isFavorite, isActive, amount, onClic
         </div>
       </Flex>
       <Flex height="100%" tabIndex={0} className="no-blur" minWidth={20}>
-        {!isTokenNotImport && account && (
-          <Star
-            fill={isFavorite ? theme.primary : 'none'}
-            color={isFavorite ? theme.primary : theme.subText}
-            onClick={handleClickStar}
-            size={20}
-          />
-        )}
+        {!isTokenNotImport &&
+          account &&
+          (!isFavorite && isFullFavoritePair && !isMobile ? (
+            <MouseoverTooltip text={t`You can only favorite up to three token pairs`}>{star}</MouseoverTooltip>
+          ) : (
+            star
+          ))}
       </Flex>
     </ItemWrapper>
   )

src/components/swapv2/PairSuggestion/index.tsx

@@ -16,6 +16,9 @@ import { useHistory } from 'react-router-dom'
 import { stringify } from 'qs'
 import { findLogoAndSortPair, getAddressParam, isActivePair, isFavoritePair } from './utils'
 import { useAllTokens } from 'hooks/Tokens'
+import { t } from '@lingui/macro'
+import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { NotificationType, useNotify } from 'state/application/hooks'
 
 const Wrapper = styled.div`
   position: relative;
@@ -66,6 +69,7 @@ export default forwardRef<PairSuggestionHandle, Props>(function PairSuggestionIn
   const { account, chainId } = useActiveWeb3React()
   const qs = useParsedQueryString()
   const history = useHistory()
+  const { mixpanelHandler } = useMixpanel()
 
   const refLoading = useRef(false) // prevent spam call api
   const refInput = useRef<HTMLInputElement>(null)
@@ -91,13 +95,19 @@ export default forwardRef<PairSuggestionHandle, Props>(function PairSuggestionIn
         setSuggestions([])
         setListFavorite([])
       })
+    keyword && mixpanelHandler(MIXPANEL_TYPE.TAS_TYPING_KEYWORD, keyword)
   }
 
   const searchDebounce = useCallback(debounce(searchSuggestionPair, 300), [chainId, account])
-
+  const showAlert = useNotify()
   const addToFavorite = (item: SuggestionPairData) => {
     refInput.current?.focus()
-    if (favoritePairs.length === MAX_FAVORITE_PAIRS || refLoading.current) return // prevent spam api
+    if (refLoading.current) return // prevent spam api
+    if (favoritePairs.length === MAX_FAVORITE_PAIRS && isMobile) {
+      // PC we already has tool tip
+      showAlert({ title: t`You can only favorite up to three token pairs.`, type: NotificationType.WARNING })
+      return
+    }
     refLoading.current = true
     reqAddFavoritePair(item, account, chainId)
       .then(() => {
@@ -107,6 +117,7 @@ export default forwardRef<PairSuggestionHandle, Props>(function PairSuggestionIn
       .finally(() => {
         refLoading.current = false
       })
+    mixpanelHandler(MIXPANEL_TYPE.TAS_LIKE_PAIR, { token_1: item.tokenIn, token_2: item.tokenOut })
   }
 
   const removeFavorite = (item: SuggestionPairData) => {
@@ -121,6 +132,7 @@ export default forwardRef<PairSuggestionHandle, Props>(function PairSuggestionIn
       .finally(() => {
         refLoading.current = false
       })
+    mixpanelHandler(MIXPANEL_TYPE.TAS_DISLIKE_PAIR, { token_1: item.tokenIn, token_2: item.tokenOut })
   }
 
   const onClickStar = (item: SuggestionPairData) => {
@@ -147,13 +159,14 @@ export default forwardRef<PairSuggestionHandle, Props>(function PairSuggestionIn
         // cmd+k or ctrl+k
         e.preventDefault()
         showListView()
+        mixpanelHandler(MIXPANEL_TYPE.TAS_PRESS_CTRL_K, 'keyboard hotkey')
       }
     }
     window.addEventListener('keydown', onKeydown)
     return () => {
       window.removeEventListener('keydown', onKeydown)
     }
-  }, [])
+  }, [mixpanelHandler])
 
   useEffect(() => {
     if (isShowListPair) {
@@ -171,6 +184,7 @@ export default forwardRef<PairSuggestionHandle, Props>(function PairSuggestionIn
   }
 
   const onSelectPair = (item: SuggestionPairData) => {
+    mixpanelHandler(MIXPANEL_TYPE.TAS_SELECT_PAIR, `${item.tokenIn} to ${item.tokenOut}`)
     if (!isActivePair(activeTokens, item)) {
       // show import modal
       const newQs = {

src/constants/styles.ts

@@ -3,6 +3,8 @@ export const Z_INDEXS = {
   LIVE_CHART: 99999,
   MOBILE_MODAL: 999999,
 
+  POPUP_NOTIFICATION: 9999,
+
   SWAP_FORM: 1,
   SUGGESTION_PAIR: 2,
 }