update ux

refacotr


c

.env.adpr

@@ -1,45 +1,42 @@
-VITE_DEFAULT_AGGREGATOR_API=https://meta-aggregator.dev.kyberengineering.io
-VITE_AGGREGATOR_API=https://aggregator-api.dev.kyberengineering.io
-VITE_AGGREGATOR_STATS_API=https://aggregator-stats.dev.kyberengineering.io
+VITE_DEFAULT_AGGREGATOR_API=https://meta-aggregator.stg.kyberengineering.io
+VITE_AGGREGATOR_API=https://aggregator-api.stg.kyberengineering.io
+VITE_AGGREGATOR_STATS_API=https://aggregator-stats.kyberswap.com
 VITE_SENTRY_DNS=https://d94ee2d3c22043bdaec966758680b5a8@sentry.ops.kyberengineering.io/4
 
-VITE_SERVICE_WORKER=true
+VITE_SERVICE_WORKER=false
+VITE_MIXPANEL_PROJECT_TOKEN=ff1eea26c19dcf4a7c35ebbc8631e714
+VITE_REWARD_SERVICE_API=https://reward.stg.kyberengineering.io/api/v1
 
-VITE_MIXPANEL_PROJECT_TOKEN=fca28a30cb98d872c2079f214955cd5e
-VITE_REWARD_SERVICE_API=https://reward.dev.kyberengineering.io/api/v1
+VITE_PRICE_CHART_API=https://price-chart.kyberswap.com/api
+VITE_PRICE_API=https://price.stg.kyberengineering.io
 
-VITE_PRICE_CHART_API=https://price-chart.dev.kyberengineering.io/api
-VITE_PRICE_API=https://price.dev.kyberengineering.io
+VITE_NOTIFICATION_API=https://notification.stg.kyberengineering.io/api
 
-VITE_NOTIFICATION_API=https://notification.dev.kyberengineering.io/api
-
-VITE_CAMPAIGN_BASE_URL=https://campaigns.dev.kyberengineering.io
-VITE_TYPE_AND_SWAP_URL=https://type-swap.dev.kyberengineering.io/api
+VITE_CAMPAIGN_BASE_URL=https://campaigns.stg.kyberengineering.io
+VITE_TYPE_AND_SWAP_URL=https://type-swap.stg.kyberengineering.io/api
 
 VITE_TRANSAK_URL=https://staging-global.transak.com
 VITE_TRANSAK_API_KEY=327b8b63-626b-4376-baf2-70a304c48488
 
-VITE_KS_SETTING_API=https://ks-setting.dev.kyberengineering.io/api
+VITE_KS_SETTING_API=https://ks-setting.stg.kyberengineering.io/api
 
 VITE_GTM_ID=
 
 VITE_GOOGLE_RECAPTCHA_KEY=6Lc7yg0iAAAAALhS4C4Ez5hqMBub8hKdFvvr9sfc
-VITE_POOL_FARM_BASE_URL=https://pool-farm.dev.kyberengineering.io
+VITE_POOL_FARM_BASE_URL=https://pool-farm.kyberswap.com
 
-VITE_LIMIT_ORDER_API_WRITE=https://limit-order.dev.kyberengineering.io/write/api
-VITE_LIMIT_ORDER_API_READ=https://limit-order.dev.kyberengineering.io/read-ks/api
+VITE_LIMIT_ORDER_API_WRITE=https://limit-order.stg.kyberengineering.io/write/api
+VITE_LIMIT_ORDER_API_READ=https://limit-order.stg.kyberengineering.io/read-ks/api
 VITE_BLOCK_SERVICE_API=https://block.kyberswap.com
 
 # Kyber DAO Apis
-VITE_KYBER_DAO_STATS_API=https://kyberswap-dao-stats.dev.kyberengineering.io
-
+VITE_KYBER_DAO_STATS_API=https://kyberswap-dao-stats.stg.kyberengineering.io
+VITE_PRICE_ALERT_API=https://price-alert.stg.kyberengineering.io/api
 # oauth
-VITE_ENV=development
-VITE_OAUTH_CLIENT_ID=a2f76ad4-895f-401a-ba75-952a929d782c
-
-VITE_PRICE_ALERT_API=https://price-alert.dev.kyberengineering.io/api
-VITE_BFF_API=https://kyberswap-bff.dev.kyberengineering.io/api
+VITE_ENV=staging
+VITE_OAUTH_CLIENT_ID=bce9bf52-b788-4c25-9c6c-a07dff080403
+VITE_BFF_API=https://kyberswap-bff.stg.kyberengineering.io/api
 VITE_KYBER_AI_REFERRAL_ID=1
-VITE_KYBER_AI_TOPIC_ID=14
+VITE_KYBER_AI_TOPIC_ID=11
 
-VITE_BUCKET_NAME=ks-setting-a3aa20b7
+VITE_BUCKET_NAME=ks-setting-6d114fd1

package.json

@@ -44,7 +44,7 @@
     "@apollo/client": "^3.7.1",
     "@datadog/browser-rum": "^4.23.3",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@kybernetwork/oauth2": "0.0.3",
+    "@kybernetwork/oauth2": "0.0.5",
     "@kyberswap/ks-sdk-classic": "^1.0.3",
     "@kyberswap/ks-sdk-core": "^1.0.5",
     "@kyberswap/ks-sdk-elastic": "^1.1.2",

src/components/Header/web3/WalletModal/index.tsx

@@ -18,7 +18,7 @@ import WarningIcon from 'components/Icons/WarningIcon'
 import Modal from 'components/Modal'
 import { AutoRow, RowBetween, RowFixed } from 'components/Row'
 import WalletPopup from 'components/WalletPopup'
-import { APP_PATHS, TERM_FILES_PATH } from 'constants/index'
+import { APP_PATHS, EVENT_CUSTOM, TERM_FILES_PATH } from 'constants/index'
 import { SUPPORTED_WALLET, SUPPORTED_WALLETS, WalletInfo } from 'constants/wallets'
 import { useActiveWeb3React, useWeb3React } from 'hooks'
 import { useActivationWallet } from 'hooks/useActivationWallet'
@@ -219,11 +219,15 @@ export default function WalletModal() {
       setPendingWalletKey(walletKey)
       setWalletView(WALLET_VIEWS.PENDING)
       setPendingError(false)
+      window.dispatchEvent(new Event(EVENT_CUSTOM.CONNECTING_WALLET))
       try {
         await tryActivation(walletKey)
       } catch {
         setPendingError(true)
       }
+      setTimeout(() => {
+        window.dispatchEvent(new Event(EVENT_CUSTOM.CONNECTING_WALLET_END))
+      }, 1000)
     },
     [tryActivation],
   )

src/components/ProtectedRoute.tsx

@@ -1,10 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { Navigate } from 'react-router-dom'
-import kyberAIApi from 'services/kyberAISubscription'
 
-import { useInvalidateTags } from 'components/Announcement/helper'
 import LocalLoader from 'components/LocalLoader'
-import { RTK_QUERY_TAGS } from 'constants/index'
 import { useSessionInfo } from 'state/authen/hooks'
 import { useIsWhiteListKyberAI } from 'state/user/hooks'
 
@@ -16,7 +13,10 @@ type Props = {
 // wait utils sign in eth/anonymous done (error/success)
 const ProtectedRoute = ({ children }: Props) => {
   const { pendingAuthentication } = useSessionInfo()
-  return pendingAuthentication ? <LocalLoader /> : children
+  const loaded = useRef(false)
+  if (pendingAuthentication && !loaded.current) return <LocalLoader />
+  loaded.current = true
+  return children
 }
 
 export const ProtectedRouteKyberAI = ({
@@ -26,16 +26,17 @@ export const ProtectedRouteKyberAI = ({
 }: Props & {
   waitUtilAuthenEndOnly?: boolean
 }) => {
-  const { loading, isWhiteList } = useIsWhiteListKyberAI()
+  const { loading, isWhiteList, refetch } = useIsWhiteListKyberAI()
   const { userInfo } = useSessionInfo()
-  const invalidate = useInvalidateTags(kyberAIApi.reducerPath)
   const loadedPage = useRef(false)
   const canAccessPage = isWhiteList || waitUtilAuthenEndOnly
 
   useEffect(() => {
     // change account sign in => refresh participant info
-    invalidate(RTK_QUERY_TAGS.GET_PARTICIPANT_INFO_KYBER_AI)
-  }, [userInfo?.identityId, invalidate])
+    try {
+      refetch()
+    } catch (error) {}
+  }, [userInfo?.identityId, refetch])
 
   if (loading && !loadedPage.current) return <LocalLoader />
   if (!canAccessPage) return <Navigate to={redirectUrl} replace />

src/constants/index.ts

@@ -295,3 +295,8 @@ export const CHAINS_SUPPORT_FEE_CONFIGS = [ChainId.OASIS, ChainId.VELAS, ChainId
 export const SWAP_FEE_RECEIVER_ADDRESS = '0x4f82e73EDb06d29Ff62C91EC8f5Ff06571bdeb29'
 
 export const TOKEN_SCORE_TTL = 86400
+
+export const EVENT_CUSTOM = {
+  CONNECTING_WALLET: 'CONNECTING_WALLET',
+  CONNECTING_WALLET_END: 'CONNECTING_WALLET_END',
+}

src/hooks/useLogin.tsx

@@ -76,6 +76,7 @@ const useLogin = () => {
         }
         if (requestingSession.current !== walletAddress) {
           requestingSession.current = walletAddress
+          setLoading(true)
           await KyberOauth2.getSession({ method: LoginMethod.ETH, walletAddress })
           await getProfile(walletAddress)
           setLoading(false)

src/pages/CrossChain/TransfersHistory/HistoryTable/Desktop.tsx

@@ -12,13 +12,13 @@ const commonCSS = css`
   padding: 0 16px;
 
   display: grid;
-  grid-template-columns: 120px 150px 80px 150px 70px;
+  grid-template-columns: 120px 150px 80px 200px 70px;
   justify-content: space-between;
   align-items: center;
 
   ${({ theme }) => theme.mediaWidth.upToLarge`
     column-gap: 4px;
-    grid-template-columns: 112px 100px 64px minmax(auto, 130px) 70px;
+    grid-template-columns: 112px 100px 64px minmax(auto, 200px) 70px;
   `}
 `
 

src/pages/CrossChain/TransfersHistory/HistoryTable/TokenReceiveCell.tsx

@@ -1,13 +1,16 @@
+import { ChainId } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { Info } from 'react-feather'
 import { Flex, Text } from 'rebass'
 
 import Column from 'components/Column'
 import Logo from 'components/Logo'
 import { MouseoverTooltip } from 'components/Tooltip'
+import { NETWORKS_INFO } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
 import { formatAmountBridge } from 'pages/Bridge/helpers'
 import { CrossChainTransfer } from 'pages/CrossChain/useTransferHistory'
+import { ExternalLink } from 'theme'
 
 type Props = {
   transfer: CrossChainTransfer
@@ -19,12 +22,14 @@ const TokenAmount = ({
   isReceiveAnyToken,
   logoUrl,
   plus,
+  dstChainId,
 }: {
   amount: string
   symbol: string
   isReceiveAnyToken?: boolean
   plus?: boolean
   logoUrl: string
+  dstChainId: ChainId
 }) => {
   const theme = useTheme()
   return (
@@ -42,11 +47,22 @@ const TokenAmount = ({
       <span>{symbol}</span>{' '}
       {isReceiveAnyToken && (
         <MouseoverTooltip
+          width="320px"
           text={
             <Text>
               <Trans>
-                The price changed during your transaction (and exceeded your max slippage), so you have received axlUSDC
-                on Avalanche instead. Check your wallet
+                Due to changing market conditions, Axelar was unable to guarantee the estimated output amount. As the
+                configured{' '}
+                <ExternalLink
+                  href={'https://docs.kyberswap.com/getting-started/foundational-topics/decentralized-finance/slippage'}
+                >
+                  slippage
+                </ExternalLink>{' '}
+                was exceeded, you have received axlUSDC on {NETWORKS_INFO[dstChainId].name}. Please check your wallet
+                for{' '}
+                <ExternalLink href={'https://docs.axelar.dev/dev/reference/mainnet-contract-addresses#assets'}>
+                  axlUSDC
+                </ExternalLink>
               </Trans>
             </Text>
           }
@@ -68,8 +84,10 @@ const TokenReceiveCell: React.FC<Props> = ({
     dstAmount,
     dstTokenSymbol,
     srcAmount,
+    dstChainId,
   },
 }) => {
+  const chainIdOut = Number(dstChainId) as ChainId
   return (
     <Column style={{ gap: '4px' }}>
       <TokenAmount
@@ -78,8 +96,9 @@ const TokenReceiveCell: React.FC<Props> = ({
         amount={dstAmount}
         symbol={shouldCheckAxelarscan ? 'axlUSDC' : dstTokenSymbol}
         isReceiveAnyToken={shouldCheckAxelarscan}
+        dstChainId={chainIdOut}
       />
-      <TokenAmount logoUrl={srcTokenLogoUrl} amount={srcAmount} symbol={srcTokenSymbol} />
+      <TokenAmount logoUrl={srcTokenLogoUrl} amount={srcAmount} symbol={srcTokenSymbol} dstChainId={chainIdOut} />
     </Column>
   )
 }

src/pages/TrueSightV2/pages/RegisterWhitelist/index.tsx

@@ -31,7 +31,7 @@ export default function RegisterWhitelist({ showForm = true }: { showForm?: bool
   const toggleWalletModal = useWalletModalToggle()
   const { isLogin } = useSessionInfo()
 
-  const { isWhiteList, isWaitList } = useIsWhiteListKyberAI()
+  const { isWhiteList, isWaitList, loading: isCheckingPermission } = useIsWhiteListKyberAI()
 
   const [verifyModalState, setVerifyModalState] = useState({
     isOpen: false,
@@ -85,6 +85,13 @@ export default function RegisterWhitelist({ showForm = true }: { showForm?: bool
     />
   )
 
+  if (isCheckingPermission)
+    return (
+      <ConnectWalletButton disabled>
+        <Trans>Checking data...</Trans>
+      </ConnectWalletButton>
+    )
+
   if (!account)
     return (
       <ConnectWalletButton onClick={toggleWalletModal}>

src/state/user/hooks.tsx

@@ -1,9 +1,9 @@
 import { ChainId, Token } from '@kyberswap/ks-sdk-core'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useGetParticipantInfoQuery } from 'services/kyberAISubscription'
 
-import { TERM_FILES_PATH } from 'constants/index'
+import { EVENT_CUSTOM, TERM_FILES_PATH } from 'constants/index'
 import { SupportedLocale } from 'constants/locales'
 import { PINNED_PAIRS } from 'constants/tokens'
 import { useActiveWeb3React } from 'hooks'
@@ -13,6 +13,7 @@ import {
   useOldStaticFeeFactoryContract,
   useStaticFeeFactoryContract,
 } from 'hooks/useContract'
+import useDebounce from 'hooks/useDebounce'
 import { ParticipantInfo, ParticipantStatus } from 'pages/TrueSightV2/types'
 import { AppDispatch, AppState } from 'state'
 import { useSessionInfo } from 'state/authen/hooks'
@@ -520,16 +521,40 @@ export const useIsWhiteListKyberAI = () => {
     data: rawData,
     isFetching,
     isError,
+    refetch,
   } = useGetParticipantInfoQuery(undefined, {
     skip: !userInfo,
   })
-  const participantInfo = isError ? participantDefault : rawData
+
+  const { account } = useActiveWeb3React()
+  const [connecting, setConnecting] = useState(false)
+
+  const isLoading = isFetching || pendingAuthentication
+  const loadingDebounced = useDebounce(isLoading, 500) || connecting
+
+  useEffect(() => {
+    const onStart = () => {
+      setConnecting(true)
+    }
+    const onEnd = () => {
+      setConnecting(false)
+    }
+    window.addEventListener(EVENT_CUSTOM.CONNECTING_WALLET, onStart)
+    window.addEventListener(EVENT_CUSTOM.CONNECTING_WALLET_END, onEnd)
+    return () => {
+      window.removeEventListener(EVENT_CUSTOM.CONNECTING_WALLET, onStart)
+      window.removeEventListener(EVENT_CUSTOM.CONNECTING_WALLET_END, onEnd)
+    }
+  }, [])
+
+  const participantInfo = isError || loadingDebounced || !account ? participantDefault : rawData
 
   return {
-    loading: isFetching || pendingAuthentication,
+    loading: loadingDebounced,
     isWhiteList:
       isLogin && (participantInfo?.status === ParticipantStatus.WHITELISTED || userInfo?.data?.hasAccessToKyberAI),
     isWaitList: isLogin && participantInfo?.status === ParticipantStatus.WAITLISTED,
+    refetch,
   }
 }
 

yarn.lock

@@ -2303,10 +2303,10 @@
     bs58 "^5.0.0"
     uuid "^8.3.2"
 
-"@kybernetwork/oauth2@0.0.3":
-  version "0.0.3"
-  resolved "https://npm.pkg.github.com/download/@kybernetwork/oauth2/0.0.3/6a555baf6b62a781d532d06186ca8faf6eeef923#6a555baf6b62a781d532d06186ca8faf6eeef923"
-  integrity sha512-SvTpvVPeiGNau13abVX5v7ItC5ZtCb7+Qx2AbK7L2G8kNLH8IEpr9C0w8sSMOGi8CEU6UDaUI02RjtxVOPyN4A==
+"@kybernetwork/oauth2@0.0.5":
+  version "0.0.5"
+  resolved "https://npm.pkg.github.com/download/@kybernetwork/oauth2/0.0.5/2750cb4889e732cff68bfbaccf937d9885bb7229#2750cb4889e732cff68bfbaccf937d9885bb7229"
+  integrity sha512-Qgj5/wmWlWQUZnGQMnDNKk9lt4snSqThH/Pp3lUAQEkPx5wzIAqt48StvYORZaAjB113PrVvUdXymbpvieyLnQ==
   dependencies:
     axios "1.2.1"
     client-oauth2 "^4.3.3"