Merge remote-tracking branch 'origin/main' into 111940

KyberNetwork · Jul 3, 2023 · 19becaf · 19becaf
2 parents cb74b21 + 29ce7ef
commit 19becaf
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 28 deletions.
diff --git a/src/components/Header/web3/WalletModal/index.tsx b/src/components/Header/web3/WalletModal/index.tsx
@@ -163,6 +163,10 @@ export default function WalletModal() {
   const location = useLocation()
   const { mixpanelHandler } = useMixpanel()
 
+  useEffect(() => {
+    !account && walletModalOpen && mixpanelHandler(MIXPANEL_TYPE.WALLET_CONNECT_CLICK)
+  }, [mixpanelHandler, walletModalOpen, account])
+
   // close on connection, when logged out before
   useEffect(() => {
     if (account && !previousAccount && walletModalOpen) {
@@ -209,6 +213,7 @@ export default function WalletModal() {
   const [, setIsConnectingWallet] = useIsConnectingWallet()
   const handleWalletChange = useCallback(
     async (walletKey: SUPPORTED_WALLET) => {
+      mixpanelHandler(MIXPANEL_TYPE.WALLET_CONNECT_WALLET_CLICK, { wallet: walletKey })
       setPendingWalletKey(walletKey)
       setWalletView(WALLET_VIEWS.PENDING)
       setIsConnectingWallet(true)
@@ -224,7 +229,7 @@ export default function WalletModal() {
         setIsConnectingWallet(false)
       }, 1000)
     },
-    [tryActivation, setIsConnectingWallet],
+    [tryActivation, setIsConnectingWallet, mixpanelHandler],
   )
 
   function getOptions() {
@@ -306,7 +311,14 @@ export default function WalletModal() {
           </CloseIcon>
         </RowBetween>
         {(walletView === WALLET_VIEWS.ACCOUNT || walletView === WALLET_VIEWS.CHANGE_WALLET) && (
-          <TermAndCondition onClick={() => setIsAcceptedTerm(!isAcceptedTerm)}>
+          <TermAndCondition
+            onClick={() => {
+              if (!isAcceptedTerm) {
+                mixpanelHandler(MIXPANEL_TYPE.WALLET_CONNECT_ACCEPT_TERM_CLICK)
+              }
+              setIsAcceptedTerm(!isAcceptedTerm)
+            }}
+          >
             <input
               onChange={() => {
                 //

diff --git a/src/hooks/useMixpanel.ts b/src/hooks/useMixpanel.ts
@@ -32,6 +32,9 @@ import { useIsWhiteListKyberAI, useUserSlippageTolerance } from 'state/user/hook
 export enum MIXPANEL_TYPE {
   PAGE_VIEWED,
   WALLET_CONNECTED,
+  WALLET_CONNECT_CLICK,
+  WALLET_CONNECT_ACCEPT_TERM_CLICK,
+  WALLET_CONNECT_WALLET_CLICK,
   SWAP_INITIATED,
   SWAP_CONFIRMED,
   SWAP_COMPLETED,
@@ -293,15 +296,39 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency }
 
   const mixpanelHandler = useCallback(
     (type: MIXPANEL_TYPE, payload?: any) => {
-      if (!account) {
-        return
-      }
+      // Anonymous events
       switch (type) {
         case MIXPANEL_TYPE.PAGE_VIEWED: {
           const { page } = payload
           page && mixpanel.track(page + ' Page Viewed')
           break
         }
+        case MIXPANEL_TYPE.WALLET_CONNECT_CLICK: {
+          mixpanel.track('Wallet Connect - Connect Wallet Button Click')
+          break
+        }
+        case MIXPANEL_TYPE.WALLET_CONNECT_ACCEPT_TERM_CLICK: {
+          mixpanel.track('Wallet Connect - Accept term button click')
+          break
+        }
+        case MIXPANEL_TYPE.WALLET_CONNECT_WALLET_CLICK: {
+          mixpanel.track('Wallet Connect - Wallet click', payload)
+          break
+        }
+        case MIXPANEL_TYPE.CHAIN_SWITCHED: {
+          const { old_network, new_network } = payload
+          mixpanel.track('Chain Switched', {
+            old_network,
+            new_network,
+          })
+          break
+        }
+      }
+      if (!account) {
+        return
+      }
+      // Need connect wallet events
+      switch (type) {
         case MIXPANEL_TYPE.WALLET_CONNECTED:
           mixpanel.register({ wallet_address: account, platform: isMobile ? 'Mobile' : 'Web', network })
           mixpanel.track('Wallet Connected', { source: location.pathname })
@@ -503,14 +530,6 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency }
           })
           break
         }
-        case MIXPANEL_TYPE.CHAIN_SWITCHED: {
-          const { old_network, new_network } = payload
-          mixpanel.track('Chain Switched', {
-            old_network,
-            new_network,
-          })
-          break
-        }
         case MIXPANEL_TYPE.CREATE_POOL_INITITATED: {
           mixpanel.track('Create New Pool Initiated')
           break
@@ -1527,7 +1546,7 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency }
 }
 
 export const useGlobalMixpanelEvents = () => {
-  const { account, chainId } = useActiveWeb3React()
+  const { account, chainId, isEVM } = useActiveWeb3React()
   const { mixpanelHandler } = useMixpanel()
   const { isWhiteList } = useIsWhiteListKyberAI()
   const oldNetwork = usePrevious(chainId)
@@ -1538,7 +1557,7 @@ export const useGlobalMixpanelEvents = () => {
   }, [location])
 
   useEffect(() => {
-    if (account && isAddress(account)) {
+    if (isEVM ? account && isAddress(account) : account) {
       mixpanel.identify(account)
 
       const getQueryParam = (url: string, param: string) => {
@@ -1618,10 +1637,11 @@ export const useGlobalMixpanelEvents = () => {
         '/kyberdao/stake-knc': 'KyberDAO Stake',
         '/kyberdao/vote': 'KyberDAO Vote',
         limit: 'Limit Order',
+        'cross-chain': 'Cross Chain',
         'notification-center': 'Notification',
+        [APP_PATHS.KYBERAI_ABOUT]: 'KyberAI About',
       }
       const protectedPaths: { [key: string]: string } = {
-        [APP_PATHS.KYBERAI_ABOUT]: 'KyberAI About',
         [APP_PATHS.KYBERAI_RANKINGS]: 'KyberAI Rankings',
         [APP_PATHS.KYBERAI_EXPLORE]: 'KyberAI Explore',
       }

diff --git a/src/pages/Bridge/BridgeTransferHistory/ActionCell.tsx b/src/pages/Bridge/BridgeTransferHistory/ActionCell.tsx
@@ -1,16 +1,20 @@
 import { rgba } from 'polished'
+import { useState } from 'react'
+import { ExternalLink } from 'react-feather'
 import { Flex } from 'rebass'
+import { useLazyGetBridgeTransactionDetailQuery } from 'services/crossChain'
 import styled, { css } from 'styled-components'
 
+import Loader from 'components/Loader'
 import useTheme from 'hooks/useTheme'
 
-const ExternalLinkWrapper = styled.a<{ disabled: boolean }>`
+const ExternalLinkWrapper = styled.div<{ disabled: boolean }>`
   width: 28px;
   height: 28px;
   display: flex;
   justify-content: center;
   align-items: center;
-
+  cursor: pointer;
   background-color: ${({ theme }) => rgba(theme.subText, 0.2)};
   border-radius: 999px;
   color: ${({ theme }) => theme.subText};
@@ -33,21 +37,34 @@ type Props = {
   hash: string | undefined
 }
 
-const getTxsUrl = (txHash: string) => `https://scan.multichain.org/#/tx?params=${txHash}`
-
 const ActionCell: React.FC<Props> = ({ hash }) => {
   const theme = useTheme()
-  const url = hash ? getTxsUrl(hash) : ''
+  const [getTxsDetail] = useLazyGetBridgeTransactionDetailQuery()
+
+  const getScanUrl = async (hash: string) => {
+    const newScanUrl = `https://scan.multichain.org/#/tx?params=${hash}`
+    const oldScanUrl = `https://anyswap.net/explorer/tx?params=${hash}`
+    try {
+      const { data } = await getTxsDetail(hash) // get txs detail via NEW api from Multichain
+      return data?.error ? oldScanUrl : newScanUrl
+    } catch (error) {
+      return newScanUrl
+    }
+  }
+
+  const [loading, setLoading] = useState(false)
+  const onClick = async () => {
+    if (loading || !hash) return
+    setLoading(true)
+    const url = await getScanUrl(hash)
+    window.open(url)
+    setLoading(false)
+  }
 
   return (
     <WrapperActionCell>
-      <ExternalLinkWrapper href={url} target="_blank" rel="noreferrer" disabled={!url}>
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M10.0802 1.68689L10.9338 0.833333H9.72667H8C7.90948 0.833333 7.83333 0.757191 7.83333 0.666667C7.83333 0.576142 7.90948 0.5 8 0.5H11.3333C11.4239 0.5 11.5 0.576142 11.5 0.666667V4C11.5 4.09053 11.4239 4.16667 11.3333 4.16667C11.2428 4.16667 11.1667 4.09052 11.1667 4V2.27333V1.06623L10.3131 1.91978L4.22645 8.00645C4.16171 8.07118 4.05829 8.07118 3.99355 8.00645C3.92882 7.94171 3.92882 7.83829 3.99355 7.77355L10.0802 1.68689ZM2 11.1667H10C10.6428 11.1667 11.1667 10.6428 11.1667 10V6.66667C11.1667 6.57614 11.2428 6.5 11.3333 6.5C11.4239 6.5 11.5 6.57614 11.5 6.66667V10.6667C11.5 11.1239 11.1239 11.5 10.6667 11.5H1.33333C0.876142 11.5 0.5 11.1239 0.5 10.6667V1.33333C0.5 0.874513 0.871103 0.5 1.33333 0.5H5.33333C5.42386 0.5 5.5 0.576142 5.5 0.666667C5.5 0.757191 5.42386 0.833333 5.33333 0.833333H2C1.35719 0.833333 0.833333 1.35719 0.833333 2V10C0.833333 10.6428 1.35719 11.1667 2 11.1667Z"
-            stroke={url ? theme.text : theme.subText}
-          />
-        </svg>
+      <ExternalLinkWrapper onClick={onClick} disabled={!hash}>
+        {loading ? <Loader size={'16px'} /> : <ExternalLink color={theme.text} size={16} />}
       </ExternalLinkWrapper>
     </WrapperActionCell>
   )

diff --git a/src/services/crossChain.ts b/src/services/crossChain.ts
@@ -59,6 +59,11 @@ const crossChainApi = createApi({
       }),
       invalidatesTags: [RTK_QUERY_TAGS.GET_BRIDGE_HISTORY],
     }),
+    getBridgeTransactionDetail: builder.query<{ error?: string }, string>({
+      query: (hash: string) => ({
+        url: `https://scanapi.multichain.org/v3/tx/${hash}`,
+      }),
+    }),
   }),
 })
 
@@ -67,6 +72,7 @@ export const {
   useGetListCrossChainTxsQuery,
   useGetListBridgeTxsQuery,
   useSaveBridgeTxsMutation,
+  useLazyGetBridgeTransactionDetailQuery,
 } = crossChainApi
 
 export default crossChainApi