Danh/type and swap

.env

@@ -24,6 +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.kyberswap.com
+REACT_APP_TYPE_AND_SWAP_URL=https://type-swap.dev.kyberengineering.io/api
 
 REACT_APP_TRANSAK_URL=https://global.transak.com
 REACT_APP_TRANSAK_API_KEY=48949c0b-2d20-4e3a-a311-51ca91ae8c0d

.env.dev

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

.env.production

@@ -24,6 +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.kyberswap.com
+REACT_APP_TYPE_AND_SWAP_URL=https://tns.kyberengineering.io/api
 
 REACT_APP_TRANSAK_URL=https://global.transak.com
 REACT_APP_TRANSAK_API_KEY=48949c0b-2d20-4e3a-a311-51ca91ae8c0d

.env.stg

@@ -24,6 +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://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

package.json

@@ -31,9 +31,15 @@
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
     "@types/rebass": "^4.0.5",
-    "@types/rebass__forms": "^4.0.4",
     "@types/styled-components": "^5.1.0",
     "@types/wcag-contrast": "^3.0.0",
+    "@types/big.js": "^6.0.0",
+    "@types/d3": "^7.1.0",
+    "@types/mixpanel-browser": "^2.38.0",
+    "@types/ms.macro": "^2.0.0",
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-gtm-module": "^2.0.1",
+    "@types/recharts": "^1.8.23",
     "@typescript-eslint/eslint-plugin": "^2.31.0",
     "@typescript-eslint/parser": "^2.31.0",
     "@uniswap/token-lists": "^1.0.0-beta.21",
@@ -133,16 +139,8 @@
     "@kyberswap/ks-sdk-elastic": "^0.0.43",
     "@lingui/detect-locale": "^3.10.4",
     "@lingui/react": "^3.10.2",
-    "@rebass/forms": "^4.0.6",
     "@sentry/react": "^6.16.1",
     "@typeform/embed-react": "^1.2.4",
-    "@types/big.js": "^6.0.0",
-    "@types/d3": "^7.1.0",
-    "@types/mixpanel-browser": "^2.38.0",
-    "@types/ms.macro": "^2.0.0",
-    "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-gtm-module": "^2.0.1",
-    "@types/recharts": "^1.8.23",
     "@uniswap/default-token-list": "^2.0.0",
     "aos": "^2.3.4",
     "d3": "^7.3.0",
@@ -162,7 +160,6 @@
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-indiana-drag-scroll": "^2.0.1",
-    "react-player": "^2.9.0",
     "react-use": "^15.3.4",
     "recharts": "^2.1.6",
     "swiper": "^8.0.7",

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,19 +2,24 @@ 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'
 import Modal from 'components/Modal'
 import { Fraction, ChainId } from '@kyberswap/ks-sdk-core'
 import { BigNumber } from 'ethers'
 import { useAllTokens } from 'hooks/Tokens'
-import { filterTokens } from 'components/SearchModal/filtering'
+import { filterTokens } from 'utils/filtering'
 import Logo from 'components/Logo'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import JSBI from 'jsbi'
@@ -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/Modal/index.tsx

@@ -80,7 +80,7 @@ export interface ModalProps {
   maxWidth?: number | string
   width?: string
   zindex?: number | string
-  initialFocusRef?: React.RefObject<any>
+  enableInitialFocusInput?: boolean
   className?: string
   children?: React.ReactNode
   transition?: boolean
@@ -93,7 +93,7 @@ export default function Modal({
   maxHeight = 90,
   maxWidth = 420,
   width,
-  initialFocusRef,
+  enableInitialFocusInput = false,
   className,
   children,
   transition = true,
@@ -140,7 +140,7 @@ export default function Modal({
                 className={className}
               >
                 {/* prevents the automatic focusing of inputs on mobile by the reach dialog */}
-                {!initialFocusRef && isMobile ? <div tabIndex={1} /> : null}
+                {!enableInitialFocusInput && isMobile ? <div tabIndex={1} /> : null}
                 {children}
               </StyledDialogContent>
             </StyledDialogOverlay>

src/components/NetworkModal/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { Trans } from '@lingui/macro'
 
-import { NETWORKS_INFO, MAINNET_NETWORKS } from '../../constants/networks'
+import { NETWORKS_INFO, MAINNET_NETWORKS, SUPPORTED_NETWORKS } from '../../constants/networks'
 import { useModalOpen, useNetworkModalToggle } from 'state/application/hooks'
 
 import { ApplicationModal } from 'state/application/actions'
@@ -76,7 +76,7 @@ export const SelectNetworkButton = styled(ButtonEmpty)`
     cursor: not-allowed;
   }
 `
-
+const SHOW_NETWORKS = process.env.NODE_ENV === 'production' ? MAINNET_NETWORKS : SUPPORTED_NETWORKS
 export default function NetworkModal(): JSX.Element | null {
   const { chainId } = useActiveWeb3React()
   const networkModalOpen = useModalOpen(ApplicationModal.NETWORK)
@@ -98,7 +98,7 @@ export default function NetworkModal(): JSX.Element | null {
           </Flex>
         </Flex>
         <NetworkList>
-          {MAINNET_NETWORKS.map((key: ChainId, i: number) => {
+          {SHOW_NETWORKS.map((key: ChainId, i: number) => {
             if (chainId === key) {
               return (
                 <SelectNetworkButton key={i} padding="0">

src/components/Popups/PopupItem.tsx

@@ -1,30 +1,28 @@
 import React, { useCallback, useContext, useEffect } from 'react'
 import { X } from 'react-feather'
 import { useSpring } from 'react-spring/web'
-import styled, { keyframes, ThemeContext } from 'styled-components'
+import styled, { DefaultTheme, keyframes, ThemeContext } from 'styled-components'
 import { animated } from 'react-spring'
-import { PopupContent } from 'state/application/actions'
-import { useRemovePopup } from 'state/application/hooks'
+import { PopupContentListUpdate, PopupContentSimple, PopupContentTxn, PopupType } from 'state/application/actions'
+import { NotificationType, useRemovePopup } from 'state/application/hooks'
 import ListUpdatePopup from './ListUpdatePopup'
 import TransactionPopup from './TransactionPopup'
 import SimplePopup from './SimplePopup'
+import { Flex } from 'rebass'
 
 export const StyledClose = styled(X)`
-  position: absolute;
-  right: 10px;
-  top: 10px;
-
+  margin-left: 10px;
   :hover {
     cursor: pointer;
   }
 `
+const delta = window.innerWidth + 'px'
 
 const rtl = keyframes`
   from {
     opacity: 0;
-    transform: translateX(1000px);
+    transform: translateX(${delta});
   }
-
   to {
     opacity: 1;
     transform: translateX(0);
@@ -36,25 +34,28 @@ const ltr = keyframes`
     opacity: 1;
     transform: translateX(0);
   }
-
   to {
     opacity: 0;
-    transform: translateX(1000px);
+    transform: translateX(${delta});
   }
 `
 
-export const Popup = styled.div<{ success?: boolean }>`
+const getBackgroundColor = (theme: DefaultTheme, type: NotificationType = NotificationType.ERROR) => {
+  const mapColor = {
+    [NotificationType.SUCCESS]: theme.bg21,
+    [NotificationType.ERROR]: theme.bg22,
+    [NotificationType.WARNING]: theme.bg23,
+  }
+  return mapColor[type]
+}
+
+export const Popup = styled.div<{ type?: NotificationType }>`
   display: inline-block;
   width: 100%;
-  background: ${({ theme, success }) => (success ? theme.bg21 : theme.bg22)};
+  background: ${({ theme, type }) => getBackgroundColor(theme, type)};
   position: relative;
   padding: 20px;
-  padding-right: 36px;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    padding: 12px;
-    padding-right: 24px;
-  `}
+  padding-right: 12px;
 `
 
 const Fader = styled.div`
@@ -68,19 +69,19 @@ const Fader = styled.div`
 
 const AnimatedFader = animated(Fader)
 
-const PopupWrapper = styled.div`
+const PopupWrapper = styled.div<{ removeAfterMs?: number | null }>`
   position: relative;
   isolation: isolate;
   border-radius: 10px;
   overflow: hidden;
-  animation: ${rtl} 1.5s ease-in-out, ${ltr} 1.5s ease-in-out 14.15s;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    width: min(calc(100vw - 32px), 425px);
-
-    &:not(:first-of-type) {
-      margin-top: 10px;
-    }
+  width: min(calc(100vw - 32px), 425px);
+  animation: ${rtl} 0.7s ease-in-out,
+    ${ltr} 0.5s ease-in-out ${({ removeAfterMs }) => (removeAfterMs || 15000) / 1000 - 0.2}s; // animation out auto play after removeAfterMs - 0.2 seconds
+  &:not(:first-of-type) {
+    margin-top: 15px;
+  }
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    margin: auto;
   `}
 `
 
@@ -97,16 +98,17 @@ export default function PopupItem({
   removeAfterMs,
   content,
   popKey,
+  popupType,
 }: {
   removeAfterMs: number | null
-  content: PopupContent
+  content: PopupContentTxn | PopupContentListUpdate | PopupContentSimple
   popKey: string
+  popupType: PopupType
 }) {
   const removePopup = useRemovePopup()
   const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
   useEffect(() => {
-    if (removeAfterMs === null) return undefined
-
+    if (removeAfterMs === null) return
     const timeout = setTimeout(() => {
       removeThisPopup()
     }, removeAfterMs)
@@ -118,42 +120,45 @@ export default function PopupItem({
 
   const theme = useContext(ThemeContext)
 
+  let notiType: NotificationType
   let popupContent
-  if ('txn' in content) {
-    const {
-      txn: { hash, success, type, summary },
-    } = content
-    popupContent = <TransactionPopup hash={hash} success={success} type={type} summary={summary} />
-  } else if ('listUpdate' in content) {
-    const {
-      listUpdate: { listUrl, oldList, newList, auto },
-    } = content
-    popupContent = <ListUpdatePopup popKey={popKey} listUrl={listUrl} oldList={oldList} newList={newList} auto={auto} />
-  } else if ('simple' in content) {
-    const {
-      simple: { title, success, summary },
-    } = content
-    popupContent = <SimplePopup title={title} success={success} summary={summary} />
-  } else if ('truesightNoti' in content) {
-    const {
-      truesightNoti: { title },
-    } = content
-    popupContent = <SimplePopup title={title} />
+  switch (popupType) {
+    case PopupType.SIMPLE: {
+      const { title, summary, type = NotificationType.ERROR } = content as PopupContentSimple
+      notiType = type
+      popupContent = <SimplePopup title={title} type={type} summary={summary} />
+      break
+    }
+    case PopupType.TRANSACTION: {
+      const { hash, type, summary, notiType: _notiType = NotificationType.ERROR } = content as PopupContentTxn
+      notiType = _notiType
+      popupContent = <TransactionPopup hash={hash} notiType={notiType} type={type} summary={summary} />
+      break
+    }
+    case PopupType.LIST_UPDATE: {
+      const { listUrl, oldList, newList, auto } = content as PopupContentListUpdate
+      notiType = NotificationType.SUCCESS
+      popupContent = (
+        <ListUpdatePopup popKey={popKey} listUrl={listUrl} oldList={oldList} newList={newList} auto={auto} />
+      )
+      break
+    }
   }
-
   const faderStyle = useSpring({
     from: { width: '100%' },
     to: { width: '0%' },
     config: { duration: removeAfterMs ?? undefined },
   })
 
   return (
-    <PopupWrapper>
+    <PopupWrapper removeAfterMs={removeAfterMs}>
       <SolidBackgroundLayer />
-      <Popup success={'txn' in content ? content.txn.success : true}>
-        <StyledClose color={theme.text2} onClick={removeThisPopup} />
-        {popupContent}
-        {removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}
+      <Popup type={notiType}>
+        <Flex justifyContent={'space-between'}>
+          {popupContent}
+          <StyledClose color={theme.text2} onClick={removeThisPopup} />
+        </Flex>
+        {removeAfterMs && <AnimatedFader style={faderStyle} />}
       </Popup>
     </PopupWrapper>
   )