From 081a7c7164a1ecda34f91c3c559a131ba03c1793 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Mon, 19 Sep 2022 18:37:34 -0400 Subject: [PATCH 01/12] added all v3 pools collection and renamed api v2 tokens --- src/services/observables/apiData.ts | 2 +- src/services/observables/pools.ts | 37 +++++++++++++++++++++- src/services/observables/tokens.ts | 46 ++++++++++++++++++++++++---- src/services/observables/triggers.ts | 8 +++-- src/store/bancor/pool.ts | 14 ++++++++- src/store/portfolio/v3Portfolio.ts | 4 +-- 6 files changed, 98 insertions(+), 13 deletions(-) diff --git a/src/services/observables/apiData.ts b/src/services/observables/apiData.ts index 352d3209c..8f6804485 100644 --- a/src/services/observables/apiData.ts +++ b/src/services/observables/apiData.ts @@ -17,7 +17,7 @@ export const apiData$ = combineLatest([oneMinute$]).pipe( shareReplay(1) ); -export const apiTokens$ = apiData$.pipe( +export const apiTokensV2$ = apiData$.pipe( pluck('tokens'), distinctUntilChanged(isEqual), shareReplay(1) diff --git a/src/services/observables/pools.ts b/src/services/observables/pools.ts index e55542dd0..572fd559b 100644 --- a/src/services/observables/pools.ts +++ b/src/services/observables/pools.ts @@ -1,4 +1,9 @@ -import { allTokensV2$, Token, tokensV3$ } from 'services/observables/tokens'; +import { + allTokensV2$, + allTokensV3$, + Token, + tokensV3$, +} from 'services/observables/tokens'; import BigNumber from 'bignumber.js'; import { combineLatest } from 'rxjs'; import { switchMapIgnoreThrow } from 'services/observables/customOperators'; @@ -396,3 +401,33 @@ export const poolsV3$ = combineLatest([ distinctUntilChanged(isEqual), shareReplay(1) ); + +export const allpoolsV3$ = combineLatest([ + apiPoolsV3$, + allTokensV3$, + standardRewardPrograms$, +]).pipe( + switchMapIgnoreThrow( + async ([apiPoolsV3, allTokens, standardRewardPrograms]) => { + const tokensMap = new Map(allTokens.map((t) => [t.address, t])); + + const latestProgramIds = await fetchLatestProgramIdsMulticall(apiPoolsV3); + + const pools = await Promise.all( + apiPoolsV3.map( + async (pool) => + await buildPoolV3Object( + tokensMap, + pool, + tokensMap.get(pool.poolDltId), + latestProgramIds, + standardRewardPrograms + ) + ) + ); + return pools.filter((pool) => !!pool) as PoolV3[]; + } + ), + distinctUntilChanged(isEqual), + shareReplay(1) +); diff --git a/src/services/observables/tokens.ts b/src/services/observables/tokens.ts index b6609e372..7e154733e 100644 --- a/src/services/observables/tokens.ts +++ b/src/services/observables/tokens.ts @@ -10,7 +10,7 @@ import { tokenListTokens$ } from 'services/observables/tokenLists'; import { apiPools$, apiPoolsV3$, - apiTokens$, + apiTokensV2$, apiTokensV3$, } from 'services/observables/apiData'; import { utils } from 'ethers'; @@ -63,7 +63,7 @@ export interface TokenList { } export const buildTokenObject = ( - apiToken: APIToken, + apiToken: APIToken | APITokenV3, apiPools: APIPool[], minMintingBalance: string, balances?: Map, @@ -210,7 +210,7 @@ export const updateUserBalances = async () => { export const allTokenBalances$ = combineLatest([ user$, - apiTokens$, + apiTokensV2$, apiTokensV3$, userBalancesReceiver$, oneMinute$, @@ -251,7 +251,7 @@ const minNetworkTokenLiquidityForMinting$ = combineLatest([ ); export const tokensV2$ = combineLatest([ - apiTokens$, + apiTokensV2$, apiPools$, tokenListTokens$, allTokenBalances$, @@ -292,7 +292,7 @@ export const tokensV2$ = combineLatest([ ); export const tokensV3$ = combineLatest([ - apiTokens$, + apiTokensV2$, apiTokensV3$, apiPoolsV3$, tokenListTokens$, @@ -355,7 +355,7 @@ export const tokensForTradeWithExternal$ = combineLatest([ ); export const allTokensV2$ = combineLatest([ - apiTokens$, + apiTokensV2$, apiPools$, tokenListTokens$, allTokenBalances$, @@ -388,6 +388,40 @@ export const allTokensV2$ = combineLatest([ shareReplay(1) ); +export const allTokensV3$ = combineLatest([ + apiTokensV3$, + apiPools$, + tokenListTokens$, + allTokenBalances$, + minNetworkTokenLiquidityForMinting$, +]).pipe( + switchMapIgnoreThrow( + async ([ + apiTokens, + apiPools, + tokenListTokens, + balances, + minMintingBalance, + ]) => { + const allTokenListTokensMap = new Map( + tokenListTokens.allTokenListTokens.map((t) => [t.address, t]) + ); + return apiTokens.map((apiToken) => { + const tokenListToken = allTokenListTokensMap.get(apiToken.dltId); + return buildTokenObject( + apiToken, + apiPools, + minMintingBalance, + balances, + tokenListToken + ); + }); + } + ), + distinctUntilChanged(isEqual), + shareReplay(1) +); + export const keeperDaoTokens$ = from(fetchKeeperDaoTokens()).pipe( shareReplay(1) ); diff --git a/src/services/observables/triggers.ts b/src/services/observables/triggers.ts index b9c2a6430..b05a576ed 100644 --- a/src/services/observables/triggers.ts +++ b/src/services/observables/triggers.ts @@ -19,7 +19,7 @@ import { import { getTokenListLS, setTokenListLS } from 'utils/localStorage'; import { loadingLockedBnt$, loadingPositions$, loadingRewards$ } from './user'; import { statisticsV3$ } from 'services/observables/statistics'; -import { setv2Pools, setv3Pools } from 'store/bancor/pool'; +import { setAllV3Pools, setv2Pools, setv3Pools } from 'store/bancor/pool'; import { setLoadingLockedBnt, setLoadingPositions, @@ -56,7 +56,7 @@ import { tokenListTokens$, userPreferredListIds$, } from 'services/observables/tokenLists'; -import { poolsV2$, poolsV3$ } from 'services/observables/pools'; +import { allpoolsV3$, poolsV2$, poolsV3$ } from 'services/observables/pools'; import { poolTokens$ } from 'services/observables/poolTokensV1'; import { setStakedAmount, setUnstakeTimer } from 'store/gov/gov'; import { stakedAmount$, unstakeTimer$ } from './gov'; @@ -67,6 +67,10 @@ export const subscribeToObservables = (dispatch: any) => { dispatch(setv3Pools(pools)); }); + allpoolsV3$.subscribe((pools) => { + dispatch(setAllV3Pools(pools)); + }); + allTokensV2$.subscribe((tokens) => { dispatch(setAllTokensV2(tokens)); }); diff --git a/src/store/bancor/pool.ts b/src/store/bancor/pool.ts index 15c30e7a4..0af2aedf4 100644 --- a/src/store/bancor/pool.ts +++ b/src/store/bancor/pool.ts @@ -9,12 +9,14 @@ import { bntToken } from 'services/web3/config'; interface PoolState { v2Pools: Pool[]; v3Pools: PoolV3[]; + allV3Pools: PoolV3[]; isLoadingV3Pools: boolean; } const initialState: PoolState = { v2Pools: [], v3Pools: [], + allV3Pools: [], isLoadingV3Pools: true, }; @@ -29,6 +31,9 @@ const poolSlice = createSlice({ state.v3Pools = action.payload; state.isLoadingV3Pools = false; }, + setAllV3Pools: (state, action) => { + state.allV3Pools = action.payload; + }, }, }); @@ -61,6 +66,13 @@ export const getPoolsV3Map = createSelector( } ); +export const getAllPoolsV3Map = createSelector( + [(state: RootState) => state.pool.allV3Pools], + (pools: PoolV3[]): Map => { + return new Map(pools.map((pool) => [pool.poolDltId, pool])); + } +); + export const getV2PoolsWithoutV3 = createSelector( (state: RootState) => state.pool.v2Pools, (state: RootState) => state.pool.v3Pools, @@ -172,6 +184,6 @@ export const getPoolByIdWithoutV3 = (id: string) => return { status: 'ready', pool } as SelectedPool; }); -export const { setv2Pools, setv3Pools } = poolSlice.actions; +export const { setv2Pools, setv3Pools, setAllV3Pools } = poolSlice.actions; export const pool = poolSlice.reducer; diff --git a/src/store/portfolio/v3Portfolio.ts b/src/store/portfolio/v3Portfolio.ts index 2ac44d47c..3eba9b4bc 100644 --- a/src/store/portfolio/v3Portfolio.ts +++ b/src/store/portfolio/v3Portfolio.ts @@ -12,7 +12,7 @@ import { utils } from 'ethers'; import { RewardsProgramStake } from 'services/web3/v3/portfolio/standardStaking'; import BigNumber from 'bignumber.js'; import { orderBy, uniqBy } from 'lodash'; -import { getPoolsV3Map } from 'store/bancor/pool'; +import { getAllPoolsV3Map, getPoolsV3Map } from 'store/bancor/pool'; import { PoolV3 } from 'services/observables/pools'; import { shrinkToken } from 'utils/formulas'; import { toBigNumber } from 'utils/helperFunctions'; @@ -89,7 +89,7 @@ export const getIsLoadingHoldings = createSelector( export const getPortfolioHoldings = createSelector( (state: RootState) => state.v3Portfolio.holdingsRaw, (state: RootState) => state.v3Portfolio.standardRewards, - (state: RootState) => getPoolsV3Map(state), + (state: RootState) => getAllPoolsV3Map(state), ( holdingsRaw: HoldingRaw[], standardRewards: RewardsProgramStake[], From 469ff172b1a4670abbc7c4633ec8fd852a7be6de Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Tue, 20 Sep 2022 20:24:16 -0400 Subject: [PATCH 02/12] Fixed types --- src/services/observables/tokens.ts | 50 ++++++++++++++++++------------ 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/src/services/observables/tokens.ts b/src/services/observables/tokens.ts index 7e154733e..677404069 100644 --- a/src/services/observables/tokens.ts +++ b/src/services/observables/tokens.ts @@ -63,7 +63,7 @@ export interface TokenList { } export const buildTokenObject = ( - apiToken: APIToken | APITokenV3, + apiToken: APIToken, apiPools: APIPool[], minMintingBalance: string, balances?: Map, @@ -389,39 +389,51 @@ export const allTokensV2$ = combineLatest([ ); export const allTokensV3$ = combineLatest([ + apiTokensV2$, apiTokensV3$, - apiPools$, + apiPoolsV3$, tokenListTokens$, allTokenBalances$, - minNetworkTokenLiquidityForMinting$, ]).pipe( switchMapIgnoreThrow( async ([ - apiTokens, - apiPools, + apiTokensV2, + apiTokensV3, + apiPoolsV3, tokenListTokens, balances, - minMintingBalance, ]) => { - const allTokenListTokensMap = new Map( - tokenListTokens.allTokenListTokens.map((t) => [t.address, t]) + const userPreferredTokenListTokensMap = new Map( + tokenListTokens.userPreferredTokenListTokens.map((t) => [t.address, t]) ); - return apiTokens.map((apiToken) => { - const tokenListToken = allTokenListTokensMap.get(apiToken.dltId); - return buildTokenObject( - apiToken, - apiPools, - minMintingBalance, - balances, - tokenListToken - ); - }); + const apiPoolsMap = new Map(apiPoolsV3.map((p) => [p.poolDltId, p])); + const apiTokensV2Map = new Map(apiTokensV2.map((t) => [t.dlt_id, t])); + + return apiTokensV3 + .map((apiToken) => { + const tokenListToken = userPreferredTokenListTokensMap.get( + apiToken.dltId + ); + + const apiPool = apiPoolsMap.get(apiToken.dltId); + if (!apiPool) { + return undefined; + } + const v2Token = apiTokensV2Map.get(apiToken.dltId); + return buildTokenObjectV3( + apiToken, + apiPool, + balances, + tokenListToken, + v2Token + ); + }) + .filter((token) => !!token) as Token[]; } ), distinctUntilChanged(isEqual), shareReplay(1) ); - export const keeperDaoTokens$ = from(fetchKeeperDaoTokens()).pipe( shareReplay(1) ); From b1f0ecb6b5f90b9604c50cc4f39925c0fe33524e Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Thu, 22 Sep 2022 18:11:20 -0400 Subject: [PATCH 03/12] added wrong network indication --- src/App.tsx | 2 + .../walletConnect/WalletConnectButton.tsx | 19 ++++++++- .../walletConnect/useWalletConnect.ts | 2 + .../wrongNetwork/WrongNetworkModal.tsx | 42 +++++++++++++++++++ src/utils/helperFunctions.ts | 11 ++++- 5 files changed, 73 insertions(+), 3 deletions(-) create mode 100644 src/elements/wrongNetwork/WrongNetworkModal.tsx diff --git a/src/App.tsx b/src/App.tsx index 0a46acda5..34bc0250d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -29,6 +29,7 @@ import { setUser } from 'services/observables/user'; import { BancorRouter } from 'router/BancorRouter'; import { handleRestrictedWalletCheck } from 'services/restrictedWallets'; import { RestrictedWallet } from 'pages/RestrictedWallet'; +import { WrongNetworkModal } from 'elements/wrongNetwork/WrongNetworkModal'; const handleModeChange = (_: MediaQueryListEvent) => { const darkMode = store.getState().user.darkMode; @@ -108,6 +109,7 @@ export const App = () => { + ); }; diff --git a/src/elements/walletConnect/WalletConnectButton.tsx b/src/elements/walletConnect/WalletConnectButton.tsx index aad5d77b5..240f6d58c 100644 --- a/src/elements/walletConnect/WalletConnectButton.tsx +++ b/src/elements/walletConnect/WalletConnectButton.tsx @@ -6,6 +6,9 @@ import { ReactNode } from 'react'; import { Image } from 'components/image/Image'; import { shortenString } from 'utils/pureFunctions'; import { ReactComponent as IconWallet } from 'assets/icons/wallet.svg'; +import { useWeb3React } from '@web3-react/core'; +import { isUnsupportedNetwork } from 'utils/helperFunctions'; +import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg'; const LoginButton = ({ loggedIn, @@ -35,6 +38,8 @@ export const WalletConnectButton = ({ selectedWallet, }: UseWalletConnect) => { const loggedIn = !!selectedWallet && !!account; + const { chainId } = useWeb3React(); + const unsupportedNetwork = isUnsupportedNetwork(chainId); return loggedIn ? ( ( - Wallet Logo - {shortenString(account)} + {unsupportedNetwork ? ( + + ) : ( + Wallet Logo + )} + + {unsupportedNetwork ? 'Wrong Network' : shortenString(account)} + )} options={{ diff --git a/src/elements/walletConnect/useWalletConnect.ts b/src/elements/walletConnect/useWalletConnect.ts index 2ee64c721..ce79c7422 100644 --- a/src/elements/walletConnect/useWalletConnect.ts +++ b/src/elements/walletConnect/useWalletConnect.ts @@ -15,6 +15,7 @@ import { useDispatch } from 'react-redux'; import { openNewTab, wait } from 'utils/pureFunctions'; import { setUser } from 'services/observables/user'; import { isForkAvailable } from 'services/web3/config'; +import { requestSwitchChain } from 'utils/helperFunctions'; export interface UseWalletConnect { isOpen: boolean; @@ -94,6 +95,7 @@ export const useWalletConnect = (): UseWalletConnect => { ); await wait(500); setIsPending(false); + requestSwitchChain(); } catch (e: any) { console.error('failed to connect wallet. ', e.message); setIsError(true); diff --git a/src/elements/wrongNetwork/WrongNetworkModal.tsx b/src/elements/wrongNetwork/WrongNetworkModal.tsx new file mode 100644 index 000000000..b0ca10c70 --- /dev/null +++ b/src/elements/wrongNetwork/WrongNetworkModal.tsx @@ -0,0 +1,42 @@ +import { ModalV3 } from 'components/modal/ModalV3'; +import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg'; +import { Button, ButtonVariant } from 'components/button/Button'; +import { ReactComponent as IconSearch } from 'assets/icons/search.svg'; +import { useEffect, useState } from 'react'; +import { Navigate } from 'components/navigate/Navigate'; + +export const WrongNetworkModal = ({ + unsupportedNetwork, +}: { + unsupportedNetwork: boolean; +}) => { + const [isOpen, setIsOpen] = useState(false); + + useEffect(() => { + setIsOpen(unsupportedNetwork); + }, [unsupportedNetwork]); + + return ( + <> + +
+ +
Wrong network
+
+ Please connect to a supported network in the dropdown menu or in + your wallet +
+ +
+ + + ); +}; diff --git a/src/utils/helperFunctions.ts b/src/utils/helperFunctions.ts index 0c8ee2b2a..aeaf05375 100644 --- a/src/utils/helperFunctions.ts +++ b/src/utils/helperFunctions.ts @@ -1,5 +1,5 @@ import BigNumber from 'bignumber.js'; -import { BigNumber as BigNumberEther } from 'ethers'; +import { BigNumber as BigNumberEther, utils } from 'ethers'; import numeral from 'numeral'; import { EthNetworks } from 'services/web3/types'; import { shrinkToken } from 'utils/formulas'; @@ -104,6 +104,15 @@ export const isUnsupportedNetwork = ( return !!network && !EthNetworks[network]; }; +export const requestSwitchChain = async ( + network: EthNetworks = EthNetworks.Mainnet +) => { + await window.ethereum.request({ + method: 'wallet_switchEthereumChain', + params: [{ chainId: utils.hexValue(network) }], + }); +}; + export const calculateBntNeededToOpenSpace = ( bntBalance: string, tknBalance: string, From 09a2315ee635fcdc58ed008891566db894e941b5 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Fri, 23 Sep 2022 14:24:37 -0400 Subject: [PATCH 04/12] using the new allv3pools collection --- src/services/observables/portfolio.ts | 4 ++-- src/services/web3/v3/portfolio/helpers.ts | 4 ++-- src/store/portfolio/v3Portfolio.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/services/observables/portfolio.ts b/src/services/observables/portfolio.ts index f111647ae..ee1758d24 100644 --- a/src/services/observables/portfolio.ts +++ b/src/services/observables/portfolio.ts @@ -11,7 +11,7 @@ import { WithdrawalSettings } from 'store/portfolio/v3Portfolio.types'; import { fetchStandardRewardsByUser } from 'services/web3/v3/portfolio/standardStaking'; import { oneMinute$ } from 'services/observables/timers'; import { apiPoolsV3$ } from 'services/observables/apiData'; -import { poolsV3$ } from 'services/observables/pools'; +import { allpoolsV3$ } from 'services/observables/pools'; export const portfolioHoldings$ = combineLatest([ apiPoolsV3$, @@ -28,7 +28,7 @@ export const portfolioHoldings$ = combineLatest([ export const portfolioStandardRewards$ = combineLatest([ user$, - poolsV3$, + allpoolsV3$, oneMinute$, ]).pipe( switchMapIgnoreThrow(async ([user, poolsV3]) => { diff --git a/src/services/web3/v3/portfolio/helpers.ts b/src/services/web3/v3/portfolio/helpers.ts index 0d43d6121..66f98f9ff 100644 --- a/src/services/web3/v3/portfolio/helpers.ts +++ b/src/services/web3/v3/portfolio/helpers.ts @@ -11,11 +11,11 @@ import { fetchStandardRewardsByUser } from 'services/web3/v3/portfolio/standardS import { take } from 'rxjs/operators'; import { apiPoolsV3$ } from 'services/observables/apiData'; import { user$ } from 'services/observables/user'; -import { poolsV3$ } from 'services/observables/pools'; +import { allpoolsV3$ } from 'services/observables/pools'; export const updatePortfolioData = async (dispatch: (data: any) => void) => { const account = await user$.pipe(take(1)).toPromise(); - const poolsV3 = await poolsV3$.pipe(take(1)).toPromise(); + const poolsV3 = await allpoolsV3$.pipe(take(1)).toPromise(); if (!account) { return; diff --git a/src/store/portfolio/v3Portfolio.ts b/src/store/portfolio/v3Portfolio.ts index 3eba9b4bc..e5d4ce178 100644 --- a/src/store/portfolio/v3Portfolio.ts +++ b/src/store/portfolio/v3Portfolio.ts @@ -260,7 +260,7 @@ export const getIsLoadingStandardRewards = createSelector( export const getStandardRewards = createSelector( (state: RootState) => state.v3Portfolio.standardRewards, - (state: RootState) => getPoolsV3Map(state), + (state: RootState) => getAllPoolsV3Map(state), ( standardRewards: RewardsProgramStake[], allPoolsMap: Map From a036bde101f7dd9131f4046de08fbdc90f96defc Mon Sep 17 00:00:00 2001 From: Jan Langheimer Date: Mon, 26 Sep 2022 11:13:27 +0200 Subject: [PATCH 05/12] fix(677): hide gift icon when APR === 0 --- .../pools/poolsTable/v3/DepositV3Modal.tsx | 40 ++++++++++--------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx b/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx index 34d5bc501..3adcde267 100644 --- a/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx +++ b/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx @@ -273,26 +273,28 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => {
Compounding {pool.reserveToken.symbol} Returns - ( - - )} - > -
-
- Fees - - {prettifyNumber(pool.apr7d.tradingFees)}% - -
-
- Rewards - - {prettifyNumber(pool.apr7d.autoCompounding)}% - + {!toBigNumber(pool.apr7d.autoCompounding).isZero() && ( + ( + + )} + > +
+
+ Fees + + {prettifyNumber(pool.apr7d.tradingFees)}% + +
+
+ Rewards + + {prettifyNumber(pool.apr7d.autoCompounding)}% + +
-
- + + )}
{prettifyNumber( From 92a7db83b51afb2bf6a350b82fc44394046f61ca Mon Sep 17 00:00:00 2001 From: Jan Langheimer Date: Mon, 26 Sep 2022 15:02:22 +0200 Subject: [PATCH 06/12] fix(649): fix fiat page mobile and styling --- src/components/Page.tsx | 2 +- src/elements/fiat/FiatBox.tsx | 4 +-- src/pages/Fiat.tsx | 48 +++++++++++++++++------------------ 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/components/Page.tsx b/src/components/Page.tsx index bce3d23ef..74f762fc9 100644 --- a/src/components/Page.tsx +++ b/src/components/Page.tsx @@ -17,7 +17,7 @@ export const Page = ({
{title && (
-

{title}

+

{title}

{trailingTitle}
)} diff --git a/src/elements/fiat/FiatBox.tsx b/src/elements/fiat/FiatBox.tsx index 0eacef584..b6e83739b 100644 --- a/src/elements/fiat/FiatBox.tsx +++ b/src/elements/fiat/FiatBox.tsx @@ -51,7 +51,7 @@ export const FiatBox = ({ fiat }: { fiat: Fiat }) => { const fiatOut = fiat.operations.includes(Operations.fiatOut); return ( -
+
Available Operations @@ -66,7 +66,7 @@ export const FiatBox = ({ fiat }: { fiat: Fiat }) => {
)}
- {fiat.text} +

{fiat.text}

{fiatIn && ( + ) : ( + 'Ethereum Network' + )}
-
- - - ); -}; diff --git a/src/pages/UnsupportedNetwork.tsx b/src/pages/UnsupportedNetwork.tsx index 2731e23c9..34453d404 100644 --- a/src/pages/UnsupportedNetwork.tsx +++ b/src/pages/UnsupportedNetwork.tsx @@ -1,9 +1,36 @@ -import { DisabledWarning } from 'components/disabledWarning/DisabledWarning'; - -const title = 'Unsupported network'; -const description = - 'In order to proceed, please change your wallets network settings to Ethereum Mainnet.'; +import { Navigate } from 'components/navigate/Navigate'; +import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; +import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg'; +import { ReactComponent as IconSearch } from 'assets/icons/search.svg'; +import { requestSwitchChain } from 'utils/helperFunctions'; export const UnsupportedNetwork = () => { - return ; + return ( +
+ +
Wrong network
+
+ Please connect to a supported network in the dropdown menu or in your + wallet +
+
+ + +
+
+ ); }; From b543283feb409da8d84ae967ce533e804426b7d8 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Tue, 11 Oct 2022 15:51:58 +0300 Subject: [PATCH 12/12] ui adjusted --- src/pages/UnsupportedNetwork.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/UnsupportedNetwork.tsx b/src/pages/UnsupportedNetwork.tsx index 34453d404..32c37749d 100644 --- a/src/pages/UnsupportedNetwork.tsx +++ b/src/pages/UnsupportedNetwork.tsx @@ -3,10 +3,11 @@ import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg'; import { ReactComponent as IconSearch } from 'assets/icons/search.svg'; import { requestSwitchChain } from 'utils/helperFunctions'; +import { isMobile } from 'react-device-detect'; export const UnsupportedNetwork = () => { return ( -
+
Wrong network
@@ -14,7 +15,10 @@ export const UnsupportedNetwork = () => { wallet
-