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://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.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://tns.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/Menu/FaucetModal.tsx

@@ -14,7 +14,7 @@ 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'

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/SearchModal/CurrencySearch.tsx

@@ -30,7 +30,7 @@ import Row, { RowBetween, RowFixed } from '../Row'
 import Column from '../Column'
 import CommonBases from './CommonBases'
 import CurrencyList from './CurrencyList'
-import { filterTokens } from './filtering'
+import { filterTokens } from 'utils/filtering'
 import SortButton from './SortButton'
 import { useTokenComparator } from './sorting'
 import { PaddedColumn, SearchInput, Separator } from './styleds'

src/components/SearchModal/ImportToken.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { Token, Currency } from '@kyberswap/ks-sdk-core'
 import styled from 'styled-components'
 import { t, Trans } from '@lingui/macro'
@@ -7,8 +7,8 @@ import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
 import { RowBetween, RowFixed } from 'components/Row'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { ArrowLeft, AlertCircle } from 'react-feather'
-import { transparentize } from 'polished'
+import { ArrowLeft, AlertCircle, CornerDownLeft } from 'react-feather'
+import { rgba, transparentize } from 'polished'
 import useTheme from 'hooks/useTheme'
 import { ButtonPrimary } from 'components/Button'
 import { SectionBreak } from 'components/swap/styleds'
@@ -40,20 +40,52 @@ const AddressText = styled(TYPE.blue)`
 `}
 `
 
+const IconEnterWrapper = styled.div`
+  position: absolute;
+  background-color: ${({ theme }) => rgba(theme.background, 0.45)};
+  border-radius: 20px;
+  padding: 6px 15px 4px 15px;
+  right: 13px;
+`
+
 interface ImportProps {
+  enterToImport?: boolean
   tokens: Token[]
   onBack?: () => void
   list?: TokenList
   onDismiss?: () => void
   handleCurrencySelect?: (currency: Currency) => void
 }
 
-export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect, list }: ImportProps) {
+export function ImportToken({
+  enterToImport = false,
+  tokens,
+  onBack,
+  onDismiss,
+  handleCurrencySelect,
+  list,
+}: ImportProps) {
   const theme = useTheme()
 
   const { chainId } = useActiveWeb3React()
 
   const addToken = useAddUserToken()
+  const onClickImport = useCallback(() => {
+    tokens.forEach(addToken)
+    handleCurrencySelect?.(tokens[0])
+  }, [tokens, addToken, handleCurrencySelect])
+  useEffect(() => {
+    function onKeydown(e: KeyboardEvent) {
+      if (e.key === 'Enter' && enterToImport) {
+        e.preventDefault()
+        onClickImport()
+      }
+    }
+    window.addEventListener('keydown', onKeydown)
+    return () => {
+      window.removeEventListener('keydown', onKeydown)
+    }
+  }, [onClickImport, enterToImport])
 
   return (
     <Wrapper>
@@ -69,7 +101,17 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect, l
         <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', padding: '1rem' }}>
           <AlertCircle size={48} stroke={theme.text2} strokeWidth={1} />
           <TYPE.body fontWeight={400} fontSize={16}>
-            {t`This token doesn't appear on the active token list(s). Make sure this is the token that you want to trade.`}
+            {tokens.length > 1 ? (
+              <Trans>
+                These tokens don't appear on the active token list(s). Make sure these are the tokens that you want to
+                trade.
+              </Trans>
+            ) : (
+              <Trans>
+                This token doesn't appear on the active token list(s). Make sure this is the token that you want to
+                trade.
+              </Trans>
+            )}
           </TYPE.body>
         </AutoColumn>
         {tokens.map(token => {
@@ -123,13 +165,16 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect, l
           borderRadius="20px"
           padding="10px 1rem"
           margin="16px 0 0"
-          onClick={() => {
-            tokens.map(token => addToken(token))
-            handleCurrencySelect && handleCurrencySelect(tokens[0])
-          }}
+          onClick={onClickImport}
           className=".token-dismiss-button"
+          style={{ position: 'relative' }}
         >
           <Trans>Import</Trans>
+          {enterToImport && (
+            <IconEnterWrapper>
+              <CornerDownLeft size={14} color={theme.primary} />
+            </IconEnterWrapper>
+          )}
         </ButtonPrimary>
       </AutoColumn>
     </Wrapper>

src/components/TokenWarningModal/index.tsx

@@ -17,7 +17,7 @@ export default function TokenWarningModal({
 }) {
   return (
     <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={100}>
-      <ImportToken tokens={tokens} handleCurrencySelect={onConfirm} />
+      <ImportToken tokens={tokens} handleCurrencySelect={onConfirm} enterToImport={isOpen} />
     </Modal>
   )
 }

src/components/TradingViewChart/index.tsx

@@ -10,7 +10,7 @@ import * as ReactDOMServer from 'react-dom/server'
 import { isMobile } from 'react-device-detect'
 import { useDatafeed } from './datafeed'
 import { Currency } from '@kyberswap/ks-sdk-core'
-import { Z_INDEXS } from 'styles'
+import { Z_INDEXS } from 'constants/styles'
 
 const ProLiveChartWrapper = styled.div<{ fullscreen: boolean }>`
   margin-top: 10px;
@@ -172,7 +172,6 @@ function ProLiveChart({
       auto_save_delay: 2,
       saved_data: localStorageState,
     }
-
     const tvWidget = new window.TradingView.widget(widgetOptions)
 
     tvWidget.onChartReady(() => {

src/components/swapv2/MobileTokenInfo.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import { MobileModalWrapper, StyledActionButtonSwapForm } from 'components/swapv2/styleds'
 import { Flex, Text } from 'rebass'
 import { ButtonText } from 'theme/components'
-import { X } from 'react-feather'
+
 import { ThemeContext } from 'styled-components'
 import { isMobile, MobileView } from 'react-device-detect'
 import { useModalOpen, useToggleModal } from 'state/application/hooks'
@@ -12,7 +12,7 @@ import { Trans, t } from '@lingui/macro'
 import { Field } from 'state/swap/actions'
 import { Currency } from '@kyberswap/ks-sdk-core'
 import TokenInfo from 'components/swapv2/TokenInfo'
-import { Info } from 'react-feather'
+import { X, Info } from 'react-feather'
 import { MouseoverTooltip } from 'components/Tooltip'
 
 function MobileTradeRoutes({