Merge pull request #2969 from IX-Swap/staging

v1.2.1 Patch: Rainbowkit bug fixes + Jumptask integration

src/components/AdminSecurityCatalog/TokenPopup.tsx

@@ -107,7 +107,7 @@ export const TokenPopup: FC<Props> = ({ setTokenData, setIsOpenTokenForm }) => {
   }
 
   const onSelectNetwork = (value: any) => {
-    formik.setFieldTouched('tokenAddress', true)
+    formik.setFieldTouched('network', true)
     formik.setFieldValue('network', value)
   }
 

src/components/Header/NetworkCard.tsx

@@ -12,10 +12,11 @@ import { ChevronElement } from 'components/ChevronElement'
 import { MEDIA_WIDTHS } from 'theme'
 import { ReactComponent as Checked } from 'assets/images/checked-blue.svg'
 import { VioletCard } from '../Card'
+import { CHAINS } from 'components/Web3Provider/constants'
 
 export const NetworkCard = () => {
   const { chainId, provider, account } = useActiveWeb3React()
-  const { chains, isPending, switchChain } = useSwitchChain()
+  const { isPending, switchChain } = useSwitchChain()
 
   const node = useRef<HTMLDivElement>()
   const open = useModalOpen(ApplicationModal.NETWORK_SELECTOR)
@@ -57,7 +58,7 @@ export const NetworkCard = () => {
 
           {open && (
             <FlyoutMenu>
-              {chains.map((chain: any) => {
+              {CHAINS.map((chain: any) => {
                 const active = chainId === chain.id
                 const targetChain = chain.id
                 return (

src/components/Launchpad/InvestmentCard/RaisedFund.tsx

@@ -20,7 +20,12 @@ export const RaisedFund: React.FC<Props> = ({ totalInvestment, symbol }) => {
         <LabelCalculating>Calculating</LabelCalculating>
       ) : (
         <LogoTokenWrapper>
-          <Label>{totalInvestment}</Label>
+          <Label>
+            {totalInvestment.toLocaleString('en-US', {
+              minimumFractionDigits: 0,
+              maximumFractionDigits: 2,
+            })}
+          </Label>
           <Logo srcs={[getTokenIcon(symbol)]} alt="logo" style={{ width: '24px', height: '24px' }} />
         </LogoTokenWrapper>
       )}

src/components/LaunchpadOffer/InvestDialog/content/Sale.tsx

@@ -33,6 +33,7 @@ import { FlexVerticalCenter } from 'components/LaunchpadMisc/styled'
 import { OfferStageStatus, getTokenSymbol } from 'components/LaunchpadOffer/OfferSidebar/OfferDetails'
 import { KYCPromptIconContainer } from 'components/Launchpad/KYCPrompt/styled'
 import { WalletEvent, INVEST_FLOW_EVENTS } from 'utils/event-logs'
+import usePostbackJumpTask from 'hooks/usePostbackJumpTask'
 
 interface Props {
   offer: Offer
@@ -64,6 +65,7 @@ export const SaleStage: React.FC<Props> = ({ offer, investedData, openSuccess, o
   const invest = useInvest(id)
   const getPresaleProof = usePresaleProof(id)
   const getInvestPublicSaleStructData = useInvestPublicSaleStructData(id)
+  const { callPostbackEndpoint } = usePostbackJumpTask()
 
   const [amount, setAmount] = useState<string>()
 
@@ -219,6 +221,7 @@ export const SaleStage: React.FC<Props> = ({ offer, investedData, openSuccess, o
 
             submitState.setSuccess()
             openSuccess()
+            callPostbackEndpoint()
           }
         }
       }

src/components/NumericalInput/index.tsx

@@ -49,28 +49,28 @@ export const Input = React.memo(function InnerInput({
       route={isActiveRoute}
       {...rest}
       value={prependSymbol && value ? prependSymbol + value : formatNumberValue(value)}
-      onChange={(event: { target: { value: string } }) => {
-        if (prependSymbol) {
-          const value = event.target.value
+      onChange={(event) => {
+        const inputValue = event.target.value;
 
-          // cut off prepended symbol
-          const formattedValue = value.toString().includes(prependSymbol)
-            ? value.toString().slice(1, value.toString().length + 1)
-            : value
+        if (prependSymbol) {
+          // Cut off prepended symbol
+          const formattedValue = inputValue.includes(prependSymbol)
+            ? inputValue.slice(prependSymbol.length)
+            : inputValue;
 
-          // replace commas with periods, because ixswap exclusively uses period as the decimal separator
-          enforcer(formattedValue.replace(/,/g, ''))
+          // Replace commas with periods, because ixswap exclusively uses period as the decimal separator
+          enforcer(formattedValue.replace(/,/g, '.'));
         } else {
-          enforcer(event.target.value.replace(/,/g, ''))
+          enforcer(inputValue.replace(/,/g, '.'));
         }
       }}
-      // universal input options
+      // Universal input options
       inputMode="decimal"
       autoComplete="off"
       autoCorrect="off"
-      // text-specific options
+      // Text-specific options
       type="text"
-      pattern="^[0-9]*[.,]?[0-9]*$"
+      pattern="[0-9]*[.]?[0-9]*"
       placeholder={placeholder || '0.00'}
       minLength={1}
       maxLength={maxLength}

src/components/Vault/FeeStatus.tsx

@@ -23,7 +23,7 @@ export const FeeStatus = ({ status, feePrice, estimatedPrice }: Props) => {
     }
 
     if (paid || feePrice) {
-      return `${+feePrice} ${native.symbol}`
+      return `${formatAmount(+feePrice)} ${native.symbol}`
     }
     return `~${estimatedPrice ? `${formatAmount(estimatedPrice)} ${native.symbol}` : ' - '}`
   }, [estimatedPrice, feePrice, paid])

src/components/Vault/WithdrawRequestForm.tsx

@@ -230,7 +230,7 @@ export const WithdrawRequestForm = ({ currency, changeModal, token, onRedirect }
           disabled={!!inputError || loadingFee || loadingWithdraw}
           onClick={onClick}
         >
-          {loadingFee ? (
+          {loadingFee || loadingWithdraw ? (
             <WaitingWitdrawalFee>
               <LoaderThin size={20} />
               <Trans>{`Sending Withdrawal Fee`}</Trans>

src/components/Web3Provider/wagmi.ts

@@ -2,7 +2,7 @@ import { QueryClient } from '@tanstack/react-query'
 import { getDefaultConfig } from '@rainbow-me/rainbowkit'
 import * as wallets from '@rainbow-me/rainbowkit/wallets'
 
-import { CHAINS, transports } from './constants'
+import {  CHAINS, transports } from './constants'
 import walletConnectConfig from 'walletConnectConfig.json'
 import { tryClearIndexedDB } from 'utils'
 

src/config/index.ts

@@ -20,4 +20,4 @@ export const IXSALE_ADDRESS_BASE_SEPOLIA = process.env.REACT_APP_IXSALE_ADDRESS_
 export const IXSALE_ADDRESS_POLYGON = process.env.REACT_APP_IXSALE_ADDRESS_POLYGON || ''
 export const IXSALE_ADDRESS_AMOY = process.env.REACT_APP_IXSALE_ADDRESS_AMOY || ''
 export const IXSALE_ADDRESS_MUMBAI = process.env.REACT_APP_IXSALE_ADDRESS_MUMBAI || ''
-export const SUPPORTED_TGE_CHAINS = process.env.REACT_APP_SUPPORTED_TGE_CHAINS || [84532, 80002]
+export const SUPPORTED_TGE_CHAINS = process.env.REACT_APP_SUPPORTED_TGE_CHAINS || [84532, 80002]

src/hooks/personalSign.ts

@@ -26,6 +26,7 @@ export const useSignMessage = () => {
         if (e?.name === 'ConnectorChainMismatchError') {
           const defaultChain = ENV_SUPPORTED_TGE_CHAINS[0]
           await switchChain({ chainId: defaultChain })
+          window.location.reload()
         }
 
         return null

src/hooks/usePostbackJumpTask.ts

@@ -0,0 +1,27 @@
+import { useDispatch } from 'react-redux'
+import axios from 'axios'
+import { useJumpTaskState } from 'state/jumpTask/hooks'
+import { resetJumpTaskState } from 'state/jumpTask'
+
+const usePostbackJumpTask = () => {
+  const dispatch = useDispatch()
+  const { transactionId, affUnique1 } = useJumpTaskState()
+
+  const callPostbackEndpoint = async () => {
+    const url = `https://jumptask.go2cloud.org/aff_lsr?transaction_id=${transactionId}&adv_sub=${affUnique1}`
+
+    try {
+      const { status } = await axios.get(url)
+
+      if (status === 200) {
+        dispatch(resetJumpTaskState())
+      }
+    } catch (error) {
+      console.error('Error calling postback endpoint:', error)
+    }
+  }
+
+  return { callPostbackEndpoint }
+}
+
+export default usePostbackJumpTask

src/hooks/useQuery.ts

@@ -0,0 +1,7 @@
+import { useLocation } from 'react-router-dom';
+
+const useQuery = () => {
+  return new URLSearchParams(useLocation().search);
+};
+
+export default useQuery;

src/pages/App.tsx

@@ -3,8 +3,6 @@ import { Redirect, RouteComponentProps, Route, Switch, useLocation } from 'react
 import styled from 'styled-components/macro'
 import { useDispatch } from 'react-redux'
 
-import { ENV_SUPPORTED_TGE_CHAINS } from 'constants/addresses'
-
 import { useActiveWeb3React } from 'hooks/web3'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 
@@ -45,8 +43,11 @@ import { blockedCountries } from 'constants/countriesList'
 import Portal from '@reach/portal'
 import { CenteredFixed } from 'components/LaunchpadMisc/styled'
 import SignMessageModal from 'components/SignMessageModal'
+import useQuery from 'hooks/useQuery'
+import { setJumpTaskState } from 'state/jumpTask'
+import { CHAINS } from 'components/Web3Provider/constants'
 
-const chains = ENV_SUPPORTED_TGE_CHAINS || [42]
+const chains = CHAINS ? CHAINS.map((chain) => chain.id) : []
 const lbpAdminRoutes = [routes.lbpCreate, routes.lbpEdit, routes.lbpDashboard, routes.adminDetails]
 
 const initSafary = () => {
@@ -76,23 +77,15 @@ export default function App() {
   const { kyc } = useKYCState()
   const { isConnected, walletName } = useWalletState()
   const { authenticate } = useAccount()
-
   const isWhitelisted = isUserWhitelisted({ account, chainId })
+  const query = useQuery()
+
   const [countryCode, setCountryCode] = useState()
 
+  const transactionId = query.get('transaction_id')
+  const affUnique1 = query.get('aff_unique1')
   const isIxSwap = whiteLabelConfig?.isIxSwap ?? false
   const routeFinalConfig = isAdmin ? routeConfigs : routeConfigs.filter((route) => !lbpAdminRoutes.includes(route.path))
-  useEffect(() => {
-    const getCountryCode = async () => {
-      const response = await axios.get(ip.getIPAddress)
-      setCountryCode(response?.data?.countryCode)
-    }
-    getCountryCode()
-  }, [])
-
-  useEffect(() => {
-    initSafary()
-  }, [])
 
   const canAccessKycForm = (kycType: string) => {
     if (!account) return false
@@ -124,6 +117,15 @@ export default function App() {
     [config]
   )
 
+  const clearLocaleStorage = () => {
+    const cleared = localStorage.getItem('clearedLS-28-04-22')
+    if (!cleared) {
+      dispatch(clearStore())
+      localStorage.clear()
+      localStorage.setItem('clearedLS-28-04-22', 'true')
+    }
+  }
+
   const defaultPage = useMemo(() => {
     const defaultPath = [routes.launchpad, routes.issuance].includes(pathname) ? routes.launchpad : routes.kyc
     if (isAllowed({ path: routes.kyc }) && (kyc?.status !== KYCStatuses.APPROVED || !account)) {
@@ -142,37 +144,6 @@ export default function App() {
     return (config?.pages ?? []).length > 0 ? config?.pages[0] : defaultPath
   }, [kyc, account, chainId, isWhitelisted, chains])
 
-  useEffect(() => {
-    getMyKyc()
-  }, [account, token, getMyKyc])
-
-  const clearLocaleStorage = () => {
-    const cleared = localStorage.getItem('clearedLS-28-04-22')
-    if (!cleared) {
-      dispatch(clearStore())
-      localStorage.clear()
-      localStorage.setItem('clearedLS-28-04-22', 'true')
-    }
-  }
-
-  useEffect(() => {
-    if (token) {
-      getMe()
-    }
-  }, [token, getMe])
-
-  useEffect(() => {
-    clearLocaleStorage()
-  }, [isConnected, walletName])
-
-  useEffect(() => {
-    getWitelabelConfig()
-  }, [])
-
-  useEffect(() => {
-    window.scrollTo(0, 0)
-  }, [pathname])
-
   const isAdminKyc = pathname.includes('admin')
   const isWhiteBackground =
     pathname === routes.launchpad ||
@@ -224,6 +195,49 @@ export default function App() {
     [isAllowed, canAccessKycForm, chainId, isWhitelisted, userRole, account]
   )
 
+  useEffect(() => {
+    getMyKyc()
+  }, [account, token, getMyKyc])
+
+  useEffect(() => {
+    if (token) {
+      getMe()
+    }
+  }, [token, getMe])
+
+  useEffect(() => {
+    clearLocaleStorage()
+  }, [isConnected, walletName])
+
+  useEffect(() => {
+    getWitelabelConfig()
+  }, [])
+
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [pathname])
+
+  useEffect(() => {
+    const getCountryCode = async () => {
+      const response = await axios.get(ip.getIPAddress)
+      setCountryCode(response?.data?.countryCode)
+    }
+    getCountryCode()
+  }, [])
+
+  useEffect(() => {
+    initSafary()
+  }, [])
+
+  useEffect(() => {
+    if (transactionId) {
+      dispatch(setJumpTaskState({ transactionId }))
+    }
+    if (affUnique1) {
+      dispatch(setJumpTaskState({ affUnique1 }))
+    }
+  }, [transactionId, affUnique1])
+
   if (!config) {
     return <LoadingIndicator isLoading />
   }

src/pages/KYC/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, FC, useEffect, useState, useMemo } from 'react'
 import { Trans } from '@lingui/macro'
 import { isMobile } from 'react-device-detect'
 import { Flex, Text } from 'rebass'
-import { Link } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
 import dayjs from 'dayjs'
 import { useCookies } from 'react-cookie'
 import _get from 'lodash/get'
@@ -98,6 +98,7 @@ const KYC = () => {
   const description = useMemo(() => kyc?.message || getStatusDescription(status), [kyc, status])
   const [referralCode, setReferralCode] = useState<string | null>('')
   const getMe = useGetMe()
+  const history = useHistory()
 
   const supportEmail = _get(config, 'supportEmail', '[email protected]')
 
@@ -160,7 +161,7 @@ const KYC = () => {
               sx={{ gap: '1rem', marginTop: '40px' }}
             >
               <Flex
-                // onClick={() => openModal('individual')}
+                onClick={() => history.push(getKYCLink())}
                 sx={{
                   border: '1px solid #E6E6FF',
                   marginBottom: isMobile ? '32px' : '0px',
@@ -183,11 +184,9 @@ const KYC = () => {
                   >
                     <Trans>Pass KYC as Individual</Trans>
                   </Text>
-                  <Link style={{ textDecoration: 'none' }} to={getKYCLink()}>
-                    <Text sx={{ marginTop: '12px', fontSize: '13px', fontWeight: '600', color: '#6666FF' }}>
-                      <Trans>Start Now</Trans>
-                    </Text>
-                  </Link>
+                  <Text sx={{ marginTop: '12px', fontSize: '13px', fontWeight: '600', color: '#6666FF' }}>
+                    <Trans>Start Now</Trans>
+                  </Text>
                 </>
               </Flex>