Commit 4fbb8e91 authored by Jack Short's avatar Jack Short Committed by GitHub

chore: removing error state for rejecting chain switch (#6713)

* chore: removing error state for rejecting chain switch

* removing connection error state
parent f0502bfc
...@@ -12,8 +12,6 @@ import { Portal } from 'nft/components/common/Portal' ...@@ -12,8 +12,6 @@ import { Portal } from 'nft/components/common/Portal'
import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable' import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
import { darken } from 'polished' import { darken } from 'polished'
import { useCallback, useMemo } from 'react' import { useCallback, useMemo } from 'react'
import { AlertTriangle } from 'react-feather'
import { useAppSelector } from 'state/hooks'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { colors } from 'theme/colors' import { colors } from 'theme/colors'
import { flexRowNoWrap } from 'theme/styles' import { flexRowNoWrap } from 'theme/styles'
...@@ -43,16 +41,6 @@ const Web3StatusGeneric = styled(ButtonSecondary)` ...@@ -43,16 +41,6 @@ const Web3StatusGeneric = styled(ButtonSecondary)`
outline: none; outline: none;
} }
` `
const Web3StatusError = styled(Web3StatusGeneric)`
background-color: ${({ theme }) => theme.accentFailure};
border: 1px solid ${({ theme }) => theme.accentFailure};
color: ${({ theme }) => theme.white};
font-weight: 500;
:hover,
:focus {
background-color: ${({ theme }) => darken(0.1, theme.accentFailure)};
}
`
const Web3StatusConnectWrapper = styled.div<{ faded?: boolean }>` const Web3StatusConnectWrapper = styled.div<{ faded?: boolean }>`
${flexRowNoWrap}; ${flexRowNoWrap};
...@@ -124,13 +112,6 @@ const Text = styled.p` ...@@ -124,13 +112,6 @@ const Text = styled.p`
font-weight: 500; font-weight: 500;
` `
const NetworkIcon = styled(AlertTriangle)`
margin-left: 0.25rem;
margin-right: 0.5rem;
width: 16px;
height: 16px;
`
// we want the latest one to come first, so return negative if a is after b // we want the latest one to come first, so return negative if a is after b
function newTransactionsFirst(a: TransactionDetails, b: TransactionDetails) { function newTransactionsFirst(a: TransactionDetails, b: TransactionDetails) {
return b.addedTime - a.addedTime return b.addedTime - a.addedTime
...@@ -158,8 +139,6 @@ function Web3StatusInner() { ...@@ -158,8 +139,6 @@ function Web3StatusInner() {
}, [toggleAccountDrawer]) }, [toggleAccountDrawer])
const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable) const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable)
const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type])
const allTransactions = useAllTransactions() const allTransactions = useAllTransactions()
const sortedRecentTransactions = useMemo(() => { const sortedRecentTransactions = useMemo(() => {
...@@ -173,15 +152,6 @@ function Web3StatusInner() { ...@@ -173,15 +152,6 @@ function Web3StatusInner() {
if (!chainId) { if (!chainId) {
return null return null
} else if (error) {
return (
<Web3StatusError onClick={handleWalletDropdownClick}>
<NetworkIcon />
<Text>
<Trans>Error</Trans>
</Text>
</Web3StatusError>
)
} else if (account) { } else if (account) {
return ( return (
<TraceEvent <TraceEvent
......
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { getConnection } from 'connection' import { getConnection } from 'connection'
import { didUserReject } from 'connection/utils'
import { SupportedChainId } from 'constants/chains' import { SupportedChainId } from 'constants/chains'
import { useCallback } from 'react' import { useCallback } from 'react'
import { addPopup } from 'state/application/reducer' import { addPopup } from 'state/application/reducer'
import { updateConnectionError } from 'state/connection/reducer'
import { useAppDispatch } from 'state/hooks' import { useAppDispatch } from 'state/hooks'
import { switchChain } from 'utils/switchChain' import { switchChain } from 'utils/switchChain'
...@@ -15,15 +15,17 @@ export default function useSelectChain() { ...@@ -15,15 +15,17 @@ export default function useSelectChain() {
async (targetChain: SupportedChainId) => { async (targetChain: SupportedChainId) => {
if (!connector) return if (!connector) return
const connectionType = getConnection(connector).type const connection = getConnection(connector)
try { try {
dispatch(updateConnectionError({ connectionType, error: undefined }))
await switchChain(connector, targetChain) await switchChain(connector, targetChain)
} catch (error) { } catch (error) {
if (didUserReject(connection, error)) {
return
}
console.error('Failed to switch networks', error) console.error('Failed to switch networks', error)
dispatch(updateConnectionError({ connectionType, error: error.message }))
dispatch(addPopup({ content: { failedSwitchNetwork: targetChain }, key: 'failed-network-switch' })) dispatch(addPopup({ content: { failedSwitchNetwork: targetChain }, key: 'failed-network-switch' }))
} }
}, },
......
import { createSlice } from '@reduxjs/toolkit'
import { ConnectionType } from 'connection/types'
interface ConnectionState {
errorByConnectionType: Record<ConnectionType, string | undefined>
}
const initialState: ConnectionState = {
errorByConnectionType: {
[ConnectionType.UNISWAP_WALLET]: undefined,
[ConnectionType.INJECTED]: undefined,
[ConnectionType.WALLET_CONNECT]: undefined,
[ConnectionType.WALLET_CONNECT_V2]: undefined,
[ConnectionType.COINBASE_WALLET]: undefined,
[ConnectionType.NETWORK]: undefined,
[ConnectionType.GNOSIS_SAFE]: undefined,
},
}
const connectionSlice = createSlice({
name: 'connection',
initialState,
reducers: {
updateConnectionError(
state,
{ payload: { connectionType, error } }: { payload: { connectionType: ConnectionType; error?: string } }
) {
state.errorByConnectionType[connectionType] = error
},
},
})
export const { updateConnectionError } = connectionSlice.actions
export default connectionSlice.reducer
...@@ -25,7 +25,7 @@ export const sentryEnhancer = Sentry.createReduxEnhancer({ ...@@ -25,7 +25,7 @@ export const sentryEnhancer = Sentry.createReduxEnhancer({
* calls and deep object traversals. * calls and deep object traversals.
*/ */
stateTransformer: (state: AppState): DeepPartial<AppState> => { stateTransformer: (state: AppState): DeepPartial<AppState> => {
const { application, user, connection, transactions } = state const { application, user, transactions } = state
return { return {
application: { application: {
fiatOnramp: application.fiatOnramp, fiatOnramp: application.fiatOnramp,
...@@ -46,9 +46,6 @@ export const sentryEnhancer = Sentry.createReduxEnhancer({ ...@@ -46,9 +46,6 @@ export const sentryEnhancer = Sentry.createReduxEnhancer({
URLWarningVisible: user.URLWarningVisible, URLWarningVisible: user.URLWarningVisible,
showSurveyPopup: user.showSurveyPopup, showSurveyPopup: user.showSurveyPopup,
}, },
connection: {
errorByConnectionType: connection.errorByConnectionType,
},
transactions, transactions,
} }
}, },
......
...@@ -3,7 +3,6 @@ import multicall from 'lib/state/multicall' ...@@ -3,7 +3,6 @@ import multicall from 'lib/state/multicall'
import application from './application/reducer' import application from './application/reducer'
import burn from './burn/reducer' import burn from './burn/reducer'
import burnV3 from './burn/v3/reducer' import burnV3 from './burn/v3/reducer'
import connection from './connection/reducer'
import lists from './lists/reducer' import lists from './lists/reducer'
import logs from './logs/slice' import logs from './logs/slice'
import mint from './mint/reducer' import mint from './mint/reducer'
...@@ -17,7 +16,6 @@ import wallets from './wallets/reducer' ...@@ -17,7 +16,6 @@ import wallets from './wallets/reducer'
export default { export default {
application, application,
user, user,
connection,
transactions, transactions,
wallets, wallets,
mint, mint,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment