feat: switch to eth modal

src/components/ModalsGlobal/index.tsx

@@ -0,0 +1,11 @@
+import ModalConfirm from 'components/ConfirmModal'
+import SwitchToEthereumModal from 'pages/KyberDAO/StakeKNC/SwitchToEthereumModal'
+
+export default function ModalsGlobal() {
+  return (
+    <>
+      <SwitchToEthereumModal />
+      <ModalConfirm />
+    </>
+  )
+}

src/components/ProAmm/DropdownSelect.tsx

@@ -7,7 +7,7 @@ import { AutoColumn } from 'components/Column'
 import Row, { RowBetween } from 'components/Row'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { ApplicationModal } from 'state/application/actions'
-import { useModalOpen, useToggleModal } from 'state/application/hooks'
+import { useCloseModal, useModalOpen, useToggleModal } from 'state/application/hooks'
 import { TYPE } from 'theme'
 
 const StyledIcon = styled(Flex)`
@@ -64,7 +64,7 @@ type DropdownSelectPropsType = {
   setActive?: any
   color?: any
   optionTitles?: any
-  name?: ApplicationModal
+  name?: ApplicationModal.TIME_DROPDOWN
 }
 
 const DropdownSelect = ({
@@ -79,27 +79,28 @@ const DropdownSelect = ({
   const theme = useTheme()
   const open = useModalOpen(name)
   const toggle = useToggleModal(name)
+  const close = useCloseModal(name)
 
-  useOnClickOutside(node, open ? toggle : undefined)
+  useOnClickOutside(node, open ? close : undefined)
 
   return (
-    <Wrapper color={color}>
+    <Wrapper color={color} ref={node}>
       <RowBetween onClick={toggle} justify="center">
         <TYPE.main>{optionTitles && optionTitles[active] ? optionTitles[active] : active}</TYPE.main>
         <StyledIcon alignItems="center">
           <ArrowStyled open={open} />
         </StyledIcon>
       </RowBetween>
       {open && (
-        <Dropdown ref={node}>
+        <Dropdown>
           <AutoColumn gap="16px">
             {Object.keys(options).map((key, index) => {
               const option = options[key]
               return (
                 option !== active && (
                   <Row
                     onClick={() => {
-                      toggle()
+                      close()
                       setActive(option)
                     }}
                     key={index}

src/components/WalletPopup/RewardCenter.tsx

@@ -4,12 +4,16 @@ import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
 import { ReactComponent as DollarIcon } from 'assets/svg/dollar.svg'
+import { NotificationType } from 'components/Announcement/type'
 import { ButtonPrimary } from 'components/Button'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import { useRewards } from 'hooks/useRewards'
 import useTheme from 'hooks/useTheme'
+import { useSwitchToEthereum } from 'pages/KyberDAO/StakeKNC/SwitchToEthereumModal'
+import { useNotify } from 'state/application/hooks'
 import { formatNumberWithPrecisionRange } from 'utils'
+import { friendlyError } from 'utils/errorMessage'
 
 import CardBackground from './AccountInfo/CardBackground'
 import Tab from './Transactions/Tab'
@@ -79,20 +83,40 @@ const TABS = [
 export default function RewardCenter() {
   const { mixpanelHandler } = useMixpanel()
   const theme = useTheme()
+  const notify = useNotify()
   const [activeTab, setActiveTab] = useState<REWARD_TYPE>(REWARD_TYPE.VOTING_REWARDS)
   const { rewards, totalReward } = useRewards()
   const currentReward = rewards[activeTab]
+  const { switchToEthereum } = useSwitchToEthereum()
 
   const [claiming, setClaiming] = useState(false)
   const claimRewards = useCallback(async () => {
-    try {
-      setClaiming(true)
-      mixpanelHandler(MIXPANEL_TYPE.GAS_REFUND_CLAIM_CLICK, { source: 'wallet UI', token_amount: currentReward.knc })
-      await currentReward.claim()
-    } finally {
-      setClaiming(false)
-    }
-  }, [currentReward, mixpanelHandler])
+    switchToEthereum(t`Claim reward`)
+      .then(async () => {
+        try {
+          setClaiming(true)
+          mixpanelHandler(MIXPANEL_TYPE.GAS_REFUND_CLAIM_CLICK, {
+            source: 'wallet UI',
+            token_amount: currentReward.knc,
+          })
+          await currentReward.claim()
+        } catch (error) {
+          const message = friendlyError(error)
+          console.error('Wrap error:', { message, error })
+          notify(
+            {
+              title: t`Claim Error`,
+              summary: message,
+              type: NotificationType.ERROR,
+            },
+            8000,
+          )
+        } finally {
+          setClaiming(false)
+        }
+      })
+      .catch()
+  }, [currentReward, mixpanelHandler, notify, switchToEthereum])
 
   return (
     <Wrapper>

src/pages/App.tsx

@@ -10,11 +10,11 @@ import snow from 'assets/images/snow.png'
 import Popups from 'components/Announcement/Popups'
 import TopBanner from 'components/Announcement/Popups/TopBanner'
 import AppHaveUpdate from 'components/AppHaveUpdate'
-import ModalConfirm from 'components/ConfirmModal'
 import ErrorBoundary from 'components/ErrorBoundary'
 import Footer from 'components/Footer/Footer'
 import Header from 'components/Header'
 import Loader from 'components/LocalLoader'
+import ModalsGlobal from 'components/ModalsGlobal'
 import ProtectedRoute, { ProtectedRouteKyberAI } from 'components/ProtectedRoute'
 import Snowfall from 'components/Snowflake/Snowfall'
 import Web3ReactManager from 'components/Web3ReactManager'
@@ -251,6 +251,7 @@ export default function App() {
     <ErrorBoundary>
       <AppHaveUpdate />
       <AppWrapper>
+        <ModalsGlobal />
         <ElasticLegacyNotice />
         <TopBanner />
         <HeaderWrapper>
@@ -396,7 +397,6 @@ export default function App() {
 
           <TruesightFooter />
         </Suspense>
-        <ModalConfirm />
       </AppWrapper>
     </ErrorBoundary>
   )

src/pages/KyberDAO/KNCUtility/GasRefundBox.tsx

@@ -24,7 +24,7 @@ import { useWalletModalToggle } from 'state/application/hooks'
 import { LinkStyledButton, MEDIA_WIDTHS } from 'theme'
 import { formattedNum } from 'utils'
 
-import SwitchToEthereumModal, { useSwitchToEthereum } from '../StakeKNC/SwitchToEthereumModal'
+import { useSwitchToEthereum } from '../StakeKNC/SwitchToEthereumModal'
 import TimerCountdown from '../TimerCountdown'
 import EligibleTxModal from './EligibleTxModal'
 import { KNCUtilityTabs } from './type'
@@ -187,7 +187,9 @@ export default function GasRefundBox() {
                     text={
                       <Trans>
                         Gas Refund Rewards is only available on Ethereum chain. Switch your network to continue{' '}
-                        <LinkStyledButton onClick={switchToEthereum}>here</LinkStyledButton>
+                        <LinkStyledButton onClick={() => switchToEthereum(t`Gas refund program`)}>
+                          here
+                        </LinkStyledButton>
                       </Trans>
                     }
                     width="244px"
@@ -256,7 +258,6 @@ export default function GasRefundBox() {
         </Flex>
       </RowBetween>
       <EligibleTxModal isOpen={isShowEligibleTx} closeModal={() => setShowEligibleTx(false)} />
-      <SwitchToEthereumModal featureText={t`Gas refund program`} />
     </Wrapper>
   )
 }

src/pages/KyberDAO/StakeKNC/MigrateModal.tsx

@@ -79,7 +79,7 @@ export default function MigrateModal({
 
   const handleMigrate = () => {
     setError('')
-    switchToEthereum().then(() => {
+    switchToEthereum(t`Migrate`).then(() => {
       try {
         setPendingText(t`Migrating ${value} KNCL to KNC`)
         setShowConfirm(true)

src/pages/KyberDAO/StakeKNC/StakeKNCComponent.tsx

@@ -39,7 +39,7 @@ import { isAddress, shortenAddress } from 'utils'
 import KNCLogo from '../kncLogo'
 import DelegateConfirmModal from './DelegateConfirmModal'
 import MigrateModal from './MigrateModal'
-import SwitchToEthereumModal, { useSwitchToEthereum } from './SwitchToEthereumModal'
+import { useSwitchToEthereum } from './SwitchToEthereumModal'
 import YourTransactionsModal from './YourTransactionsModal'
 
 enum STAKE_TAB {
@@ -219,7 +219,6 @@ export default function StakeKNCComponent() {
   const [showConfirm, setShowConfirm] = useState(false)
   const [attemptingTxn, setAttemptingTxn] = useState<boolean>(false)
   const [pendingText, setPendingText] = useState<string>('')
-  const [featureText, setFeatureText] = useState('')
   const [txHash, setTxHash] = useState<string | undefined>(undefined)
   const [inputValue, setInputValue] = useState('1')
   const [transactionError, setTransactionError] = useState<string | undefined>()
@@ -290,7 +289,7 @@ export default function StakeKNCComponent() {
   const refetchGasRefundInfo = useRefetchGasRefundInfo()
 
   const handleStake = () => {
-    switchToEthereum()
+    switchToEthereum(t`Staking KNC`)
       .then(() => {
         setPendingText(t`Staking ${inputValue} KNC to KyberDAO`)
         setShowConfirm(true)
@@ -308,11 +307,11 @@ export default function StakeKNCComponent() {
             setTransactionError(error?.message)
           })
       })
-      .catch(() => setFeatureText(t`Staking KNC`))
+      .catch()
   }
 
   const handleUnstake = () => {
-    switchToEthereum()
+    switchToEthereum(t`Unstaking KNC`)
       .then(() => {
         setPendingText(t`Unstaking ${inputValue} KNC from KyberDAO`)
         setShowConfirm(true)
@@ -329,29 +328,27 @@ export default function StakeKNCComponent() {
             setTransactionError(error?.message)
           })
       })
-      .catch(() => setFeatureText(t`Unstaking KNC`))
+      .catch()
   }
 
   const handleDelegate = () => {
-    switchToEthereum()
+    switchToEthereum(t`Delegate`)
       .then(() => {
         isUndelegate.current = false
         toggleDelegateConfirm()
       })
       .catch(_error => {
-        setFeatureText(t`Delegate`)
         setShowConfirm(false)
       })
   }
 
   const handleUndelegate = () => {
-    switchToEthereum()
+    switchToEthereum(t`Undelegate`)
       .then(() => {
         isUndelegate.current = true
         toggleDelegateConfirm()
       })
       .catch(() => {
-        setFeatureText(t`Undelegate`)
         setShowConfirm(false)
       })
   }
@@ -665,7 +662,6 @@ export default function StakeKNCComponent() {
           </AutoColumn>
         }
       />
-      <SwitchToEthereumModal featureText={featureText} />
       <DelegateConfirmModal
         address={delegateAddress}
         isUndelegate={isUndelegate.current}

src/pages/KyberDAO/StakeKNC/SwitchToEthereumModal.tsx

@@ -1,6 +1,6 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
-import { Trans } from '@lingui/macro'
-import React, { useCallback } from 'react'
+import { Trans, t } from '@lingui/macro'
+import { useCallback } from 'react'
 import { X } from 'react-feather'
 import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
@@ -14,7 +14,7 @@ import { useActiveWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
 import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import { ApplicationModal } from 'state/application/actions'
-import { useModalOpen, useToggleModal } from 'state/application/hooks'
+import { useCloseModal, useModalOpen, useModalOpenParams, useToggleModal } from 'state/application/hooks'
 
 const Wrapper = styled.div`
   padding: 24px;
@@ -26,36 +26,37 @@ export const useSwitchToEthereum = () => {
 
   return {
     switchToEthereum: useCallback(
-      () =>
+      (featureText: string) =>
         new Promise(async (resolve: any, reject: any) => {
           if ([ChainId.GÖRLI, ChainId.MAINNET].includes(chainId)) {
             resolve()
           } else {
             reject()
-            toggleSwitchEthereumModal()
+            toggleSwitchEthereumModal({ featureText })
           }
         }),
       [chainId, toggleSwitchEthereumModal],
     ),
   }
 }
 
-export default function SwitchToEthereumModal({ featureText }: { featureText: string }) {
+export default function SwitchToEthereumModal() {
   const { chainId } = useActiveWeb3React()
 
   const theme = useTheme()
   const modalOpen = useModalOpen(ApplicationModal.SWITCH_TO_ETHEREUM)
-  const toggleModal = useToggleModal(ApplicationModal.SWITCH_TO_ETHEREUM)
+  const closeModal = useCloseModal(ApplicationModal.SWITCH_TO_ETHEREUM)
+  const params = useModalOpenParams(ApplicationModal.SWITCH_TO_ETHEREUM)
   const { changeNetwork } = useChangeNetwork()
 
   const handleChangeToEthereum = useCallback(async () => {
     if (![ChainId.GÖRLI, ChainId.MAINNET].includes(chainId)) {
       await changeNetwork(ChainId.MAINNET)
-      toggleModal()
+      closeModal()
     }
-  }, [changeNetwork, toggleModal, chainId])
+  }, [changeNetwork, closeModal, chainId])
   return (
-    <Modal isOpen={modalOpen} onDismiss={toggleModal} minHeight={false} maxHeight={90} maxWidth={500}>
+    <Modal isOpen={modalOpen} onDismiss={closeModal} minHeight={false} maxHeight={90} maxWidth={500}>
       <Wrapper>
         <AutoColumn gap="20px">
           <RowBetween>
@@ -65,12 +66,15 @@ export default function SwitchToEthereumModal({ featureText }: { featureText: st
                 <Trans>Switch Network</Trans>
               </Text>
             </AutoRow>
-            <Flex sx={{ cursor: 'pointer' }} role="button" onClick={toggleModal}>
-              <X onClick={toggleModal} size={20} color={theme.subText} />
+            <Flex sx={{ cursor: 'pointer' }} role="button" onClick={closeModal}>
+              <X onClick={closeModal} size={20} color={theme.subText} />
             </Flex>
           </RowBetween>
           <Text fontSize={14} lineHeight="20px">
-            <Trans>{featureText} is only available on Ethereum chain. Please switch network to continue.</Trans>
+            <Trans>
+              {params?.featureText || t`This action`} is only available on Ethereum chain. Please switch network to
+              continue.
+            </Trans>
           </Text>
           <ButtonPrimary onClick={handleChangeToEthereum}>
             <Text fontSize={16}>

src/pages/KyberDAO/StakeKNC/index.tsx

@@ -1,5 +1,5 @@
 import { commify, formatUnits } from '@ethersproject/units'
-import { Trans } from '@lingui/macro'
+import { Trans, t } from '@lingui/macro'
 import { isMobile } from 'react-device-detect'
 import Skeleton from 'react-loading-skeleton'
 import { NavLink, useNavigate } from 'react-router-dom'
@@ -127,7 +127,7 @@ export default function StakeKNC() {
   const navigate = useNavigate()
   const { mixpanelHandler } = useMixpanel()
   const handleMigrateClick = () => {
-    switchToEthereum().then(() => {
+    switchToEthereum(t`Migrate`).then(() => {
       toggleMigrationModal()
     })
   }

src/pages/KyberDAO/Vote/ProposalItem/index.tsx

@@ -246,7 +246,7 @@ function ProposalItem({
   }
   const { switchToEthereum } = useSwitchToEthereum()
   const handleVote = useCallback(() => {
-    switchToEthereum().then(() => {
+    switchToEthereum(t`This action`).then(() => {
       selectedOptions.length > 0 && setShowConfirmModal(true)
     })
   }, [switchToEthereum, setShowConfirmModal, selectedOptions])