iam ui: login page (#2241)

package.json

@@ -83,6 +83,7 @@
     "crypto-js": "4.1.1",
     "d3": "^7.6.1",
     "dayjs": "^1.11.6",
+    "dompurify": "^3.0.6",
     "ethers": "^5.4.6",
     "events": "^3.3.0",
     "find-replacement-tx": "^1.2.3",
@@ -154,6 +155,7 @@
     "@types/big.js": "^6.0.0",
     "@types/crypto-js": "4.1.1",
     "@types/d3": "^7.1.0",
+    "@types/dompurify": "^3.0.3",
     "@types/mixpanel-browser": "^2.38.0",
     "@types/multicodec": "^1.0.0",
     "@types/node": "^13.13.52",

src/components/Announcement/Popups/CenterPopup.tsx

@@ -4,7 +4,6 @@ import { useMedia } from 'react-use'
 import styled from 'styled-components'
 
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import {
   AnnouncementTemplatePopup,
   PopupContentAnnouncement,
@@ -17,6 +16,7 @@ import { Z_INDEXS } from 'constants/styles'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const Wrapper = styled.div`

src/components/Announcement/Popups/DetailAnnouncementPopup.tsx

@@ -6,14 +6,14 @@ import styled from 'styled-components'
 
 import NotificationImage from 'assets/images/notification_default.png'
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup } from 'components/Announcement/type'
 import Modal from 'components/Modal'
 import Row from 'components/Row'
 import { Z_INDEXS } from 'constants/styles'
 import useTheme from 'hooks/useTheme'
 import { useDetailAnnouncement } from 'state/application/hooks'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const PaginationButton = styled.div`

src/components/Announcement/Popups/SnippetPopup.tsx

@@ -8,7 +8,6 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 
 import NotificationImage from 'assets/images/notification_default.png'
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import {
   AnnouncementTemplatePopup,
   PopupContentAnnouncement,
@@ -20,6 +19,7 @@ import { Z_INDEXS } from 'constants/styles'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { useDetailAnnouncement, useRemovePopup } from 'state/application/hooks'
+import { useNavigateToUrl } from 'utils/redirect'
 
 const IMAGE_HEIGHT = '124px'
 const PADDING_MOBILE = '16px'

src/components/Announcement/Popups/TopBanner.tsx

@@ -5,13 +5,13 @@ import { useMedia } from 'react-use'
 import styled, { css, keyframes } from 'styled-components'
 
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup, PopupType } from 'components/Announcement/type'
 import Announcement from 'components/Icons/Announcement'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { useActivePopups, useRemoveAllPopupByType } from 'state/application/hooks'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const BannerWrapper = styled.div<{ color?: string }>`

src/components/Announcement/PrivateAnnoucement/InboxItemPoolPosition.tsx

@@ -12,13 +12,13 @@ import {
   RowItem,
   Title,
 } from 'components/Announcement/PrivateAnnoucement/styled'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePoolPosition } from 'components/Announcement/type'
 import { DoubleCurrencyLogoV2 } from 'components/DoubleLogo'
 import { MoneyBag } from 'components/Icons'
 import { APP_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
+import { useNavigateToUrl } from 'utils/redirect'
 
 function InboxItemBridge({
   announcement,

src/components/Announcement/PrivateAnnoucement/InboxItemPriceAlert.tsx

@@ -6,12 +6,12 @@ import { Flex, Text } from 'rebass'
 import { PrivateAnnouncementProp } from 'components/Announcement/PrivateAnnoucement'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { Dot, InboxItemRow, InboxItemWrapper, RowItem, Title } from 'components/Announcement/PrivateAnnoucement/styled'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePriceAlert } from 'components/Announcement/type'
 import { ButtonLight } from 'components/Button'
 import DeltaTokenAmount from 'components/WalletPopup/Transactions/DeltaTokenAmount'
 import useTheme from 'hooks/useTheme'
 import { HistoricalPriceAlert, PriceAlertType } from 'pages/NotificationCenter/const'
+import { useNavigateToUrl } from 'utils/redirect'
 
 export const getSwapUrlPriceAlert = (alert: HistoricalPriceAlert) => {
   const { swapURL } = alert

src/components/Announcement/PrivateAnnoucement/InboxItemPrivateMessage.tsx

@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import { PrivateAnnouncementProp } from 'components/Announcement/PrivateAnnoucement'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { Dot, InboxItemRow, InboxItemWrapper, RowItem, Title } from 'components/Announcement/PrivateAnnoucement/styled'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup } from 'components/Announcement/type'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const Desc = styled.div`

src/components/Announcement/PrivateAnnoucement/NotificationCenter/PoolPosition.tsx

@@ -7,13 +7,13 @@ import styled from 'styled-components'
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePoolPosition } from 'components/Announcement/type'
 import { DoubleCurrencyLogoV2 } from 'components/DoubleLogo'
 import { MoneyBag } from 'components/Icons'
 import { APP_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { formatTime } from 'utils/time'
 
 import { ArrowWrapper, Desc, Time, Title, Wrapper } from './styled'

src/components/Announcement/PrivateAnnoucement/NotificationCenter/PriceAlert.tsx

@@ -5,9 +5,9 @@ import styled from 'styled-components'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { getSwapUrlPriceAlert } from 'components/Announcement/PrivateAnnoucement/InboxItemPriceAlert'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePriceAlert } from 'components/Announcement/type'
 import AlertCondition from 'pages/NotificationCenter/PriceAlerts/AlertCondition'
+import { useNavigateToUrl } from 'utils/redirect'
 import { formatTime } from 'utils/time'
 
 import { Desc, Time, Title, Wrapper } from './styled'

src/components/Announcement/PrivateAnnoucement/NotificationCenter/PrivateMessage.tsx

@@ -2,8 +2,8 @@ import { Flex } from 'rebass'
 
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup } from 'components/Announcement/type'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 import { formatTime } from 'utils/time'
 

src/components/Announcement/helper.ts

@@ -1,12 +1,9 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
 import AnnouncementApi from 'services/announcement'
 
 import { AnnouncementTemplatePopup, PopupContentAnnouncement, PopupItemType } from 'components/Announcement/type'
 import { TIMES_IN_SECS } from 'constants/index'
-import { useActiveWeb3React } from 'hooks'
-import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import { useAppDispatch } from 'state/hooks'
 
 const LsKey = 'ack-announcements'
@@ -46,47 +43,6 @@ export const isPopupCanShow = (
   return !isRead && !isExpired && isRightChain && isOwn
 }
 
-/**
- * this hook to navigate to specific url
- * detect using window.open or navigate (react-router)
- * check change chain if needed
- */
-export const useNavigateToUrl = () => {
-  const navigate = useNavigate()
-  const { chainId: currentChain } = useActiveWeb3React()
-  const { changeNetwork } = useChangeNetwork()
-
-  const redirect = useCallback(
-    (actionURL: string) => {
-      if (actionURL && actionURL.startsWith('/')) {
-        navigate(actionURL)
-        return
-      }
-      const { pathname, host, search } = new URL(actionURL)
-      if (window.location.host === host) {
-        navigate(`${pathname}${search}`)
-      } else {
-        window.open(actionURL)
-      }
-    },
-    [navigate],
-  )
-
-  return useCallback(
-    (actionURL: string, chainId?: ChainId) => {
-      try {
-        if (!actionURL) return
-        if (chainId && chainId !== currentChain) {
-          changeNetwork(chainId, () => redirect(actionURL), undefined, true)
-        } else {
-          redirect(actionURL)
-        }
-      } catch (error) {}
-    },
-    [changeNetwork, currentChain, redirect],
-  )
-}
-
 export const useInvalidateTags = (reducerPath: string) => {
   const dispatch = useAppDispatch()
   return useCallback(

src/constants/index.ts

@@ -240,6 +240,10 @@ export const APP_PATHS = {
   PROFILE_MANAGE: '/manage',
   ELASTIC_LEGACY: '/elastic-legacy',
   VERIFY_AUTH: '/auth',
+
+  IAM_LOGIN: '/login',
+  IAM_LOGOUT: '/logout',
+  IAM_CONSENT: '/consent',
 } as const
 
 export const TERM_FILES_PATH = {

src/hooks/useSessionExpire.ts

@@ -37,7 +37,9 @@ export default function useSessionExpiredGlobal() {
       if (isKyberAIPage && accountId === signedAccount) {
         delete data.cancelText
       }
-      showConfirm(data)
+
+      const isIAMPages = [APP_PATHS.IAM_CONSENT, APP_PATHS.IAM_LOGIN, APP_PATHS.IAM_LOGOUT].includes(pathname)
+      if (!isIAMPages) showConfirm(data)
     }
     KyberOauth2.on(KyberOauth2Event.SESSION_EXPIRED, listener)
     return () => KyberOauth2.off(KyberOauth2Event.SESSION_EXPIRED, listener)

src/pages/About/AboutKyberSwap/MeetTheTeam.tsx

@@ -16,6 +16,7 @@ import VictorTran from 'assets/images/kyber_members/victor_tran.png'
 import { ReactComponent as LinkedInIcon } from 'assets/svg/linkedin.svg'
 import { ReactComponent as TwitterIcon } from 'assets/svg/solid_twitter_icon.svg'
 import useTheme from 'hooks/useTheme'
+import { ExternalLink } from 'theme'
 
 type Member = {
   name: string
@@ -186,14 +187,14 @@ const MemberView: React.FC<Member> = props => {
           }}
         >
           {props.handles.twitter && (
-            <a target="_blank" href={`https://twitter.com/${props.handles.twitter}/`} rel="noreferrer">
+            <ExternalLink target="_blank" href={`https://twitter.com/${props.handles.twitter}/`} rel="noreferrer">
               <TwitterIcon color={theme.text} />
-            </a>
+            </ExternalLink>
           )}
           {props.handles.linkedIn && (
-            <a target="_blank" href={`https://linkedin.com/in/${props.handles.linkedIn}`} rel="noreferrer">
+            <ExternalLink target="_blank" href={`https://linkedin.com/in/${props.handles.linkedIn}`} rel="noreferrer">
               <LinkedInIcon color={theme.text} />
-            </a>
+            </ExternalLink>
           )}
         </Flex>
       )}

src/pages/App.tsx

@@ -43,6 +43,10 @@ import { isAddressString, isSupportLimitOrder, shortenAddress } from 'utils'
 import ElasticLegacyNotice from './ElasticLegacy/ElasticLegacyNotice'
 import VerifyAuth from './Verify/VerifyAuth'
 
+const Login = lazy(() => import('./Oauth/Login'))
+const Logout = lazy(() => import('./Oauth/Logout'))
+const Consent = lazy(() => import('./Oauth/Consent'))
+
 // test page for swap only through elastic
 const ElasticSwap = lazy(() => import('./ElasticSwap'))
 const SwapV2 = lazy(() => import('./SwapV2'))
@@ -430,6 +434,9 @@ export default function App() {
                     <Route path={`/:network/*`} element={<RoutesWithNetworkPrefix />} />
 
                     <Route path={APP_PATHS.VERIFY_AUTH} element={<VerifyAuth />} />
+                    <Route path={APP_PATHS.IAM_LOGIN} element={<Login />} />
+                    <Route path={APP_PATHS.IAM_LOGOUT} element={<Logout />} />
+                    <Route path={APP_PATHS.IAM_CONSENT} element={<Consent />} />
 
                     <Route path="*" element={<RedirectPathToSwapV3Network />} />
                   </Routes>

src/pages/KyberDAO/StakeKNC/index.tsx

@@ -289,9 +289,9 @@ export default function StakeKNC() {
               <Text fontSize={12} lineHeight="16px" fontWeight={500} color={theme.subText}>
                 <Trans>
                   You can access legacy KyberDAO v1 to read about previous KIPs{' '}
-                  <a href="https://legacy.kyber.org/vote" target="_blank" rel="noreferrer">
+                  <ExternalLink href="https://legacy.kyber.org/vote" target="_blank" rel="noreferrer">
                     here ↗
-                  </a>
+                  </ExternalLink>
                 </Trans>
               </Text>
             </CardInfo>

src/pages/NotificationCenter/GeneralAnnouncement/AnnouncementItem.tsx

@@ -7,9 +7,9 @@ import NotificationImage from 'assets/images/notification_default.png'
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import CtaButton from 'components/Announcement/Popups/CtaButton'
 import { formatCtaName } from 'components/Announcement/Popups/DetailAnnouncementPopup'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { Announcement } from 'components/Announcement/type'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 import { formatTime } from 'utils/time'
 

src/pages/Oauth/AuthForm/AuthFormMessage.tsx

@@ -0,0 +1,22 @@
+import { Text } from 'rebass'
+
+import useTheme from 'hooks/useTheme'
+
+const AuthFormFieldMessage: React.FC<{ messages?: { type: string; text: string }[] }> = ({ messages }) => {
+  const theme = useTheme()
+  if (!messages?.length) return null
+
+  return (
+    <div>
+      {messages.map((value, index) => {
+        return (
+          <Text as="label" key={index} color={value.type === 'warn' ? theme.warning : theme.red}>
+            {value.text}
+          </Text>
+        )
+      })}
+    </div>
+  )
+}
+
+export default AuthFormFieldMessage