From 264b7b0be41bf3c55b5228711ebd7de9e5707434 Mon Sep 17 00:00:00 2001 From: ishagoyale Date: Thu, 14 Sep 2023 13:43:42 +0530 Subject: [PATCH 1/2] Remove web3 starknet react core library from all the files --- src/components/AddressInputPanel/index.tsx | 1 - src/components/WalletModal/index.tsx | 9 +- src/components/Web3ReactManager/index.tsx | 51 ----- src/components/Web3Status/index.tsx | 27 ++- src/hooks/index.ts | 20 +- src/hooks/useContract.ts | 2 - src/index.tsx | 29 +-- src/pages/App.tsx | 39 ++-- yarn.lock | 240 ++++----------------- 9 files changed, 88 insertions(+), 330 deletions(-) delete mode 100644 src/components/Web3ReactManager/index.tsx diff --git a/src/components/AddressInputPanel/index.tsx b/src/components/AddressInputPanel/index.tsx index 1203f08c..706a98a6 100644 --- a/src/components/AddressInputPanel/index.tsx +++ b/src/components/AddressInputPanel/index.tsx @@ -5,7 +5,6 @@ import { ExternalLink, TYPE } from '../../theme' import { AutoColumn } from '../Column' import { RowBetween } from '../Row' import { getStarkscanLink } from '../../utils' -// import { normalizeAccount } from '@web3-starknet-react/core/dist/normalizers' import { useAddressNormalizer } from '../../hooks/useAddressNormalizer' import { useAccountDetails } from '../../hooks' diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx index d8bf8a45..bba80a2d 100644 --- a/src/components/WalletModal/index.tsx +++ b/src/components/WalletModal/index.tsx @@ -1,4 +1,3 @@ -import { UnsupportedChainIdError, useStarknetReact } from '@web3-starknet-react/core' import React, { useEffect, useState } from 'react' import { isMobile } from 'react-device-detect' import ReactGA from 'react-ga4' @@ -130,7 +129,6 @@ export default function WalletModal({ ENSName?: string }) { // important that these are destructed from the account-specific web3-react context - const { active, error } = useStarknetReact() const { connect } = useConnectors() const { getAvailableWallets } = getStarknet() @@ -192,13 +190,12 @@ export default function WalletModal({ }, [walletModalOpen]) // close modal when a connection is successful - const activePrevious = usePrevious(active) const connectorPrevious = usePrevious(connector) useEffect(() => { - if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) { + if (walletModalOpen && connector && connector !== connectorPrevious) { setWalletView(WALLET_VIEWS.ACCOUNT) } - }, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious]) + }, [setWalletView, connector, walletModalOpen, connectorPrevious]) const tryActivation = async (option: WalletInfo) => { if (!option) return @@ -271,7 +268,7 @@ export default function WalletModal({ } function getModalContent() { - if (error || chainError) { + if (chainError) { return ( diff --git a/src/components/Web3ReactManager/index.tsx b/src/components/Web3ReactManager/index.tsx deleted file mode 100644 index 5f97d9df..00000000 --- a/src/components/Web3ReactManager/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React, { useState, useEffect } from 'react' -import { useStarknetReact } from '@web3-starknet-react/core' -import styled from 'styled-components' -import { useTranslation } from 'react-i18next' - -// import { network } from '../../connectors' -import { useEagerConnect, useInactiveListener } from '../../hooks' -import { NetworkContextName } from '../../constants' -import Loader from '../Loader' - -const MessageWrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - height: 20rem; -` - -const Message = styled.h2` - color: ${({ theme }) => theme.secondary1}; -` - -export default function Web3ReactManager({ children }: { children: JSX.Element }) { - const { t } = useTranslation() - const { active } = useStarknetReact() - const { active: networkActive, error: networkError, activate: activateNetwork } = useStarknetReact(NetworkContextName) - - // try to eagerly connect to an injected provider, if it exists and has granted access already - const triedEager = useEagerConnect() - - // when there's no account connected, react to logins (broadly speaking) on the injected provider, if it exists - useInactiveListener(!triedEager) - - // handle delayed loader state - const [showLoader, setShowLoader] = useState(false) - - // on page load, do nothing until we've tried to connect to the injected connector - // if (!triedEager) { - // return null - // } - - // if the account context isn't active, and there's an error on the network context, it's an irrecoverable error - if (!active && networkError) { - return ( - - {t('unknownError')} - - ) - } - - return children -} diff --git a/src/components/Web3Status/index.tsx b/src/components/Web3Status/index.tsx index c5d2c9de..7cb8335a 100644 --- a/src/components/Web3Status/index.tsx +++ b/src/components/Web3Status/index.tsx @@ -1,4 +1,3 @@ -import { UnsupportedChainIdError, useStarknetReact } from '@web3-starknet-react/core' import { darken, lighten } from 'polished' import React, { useMemo, useEffect, useState } from 'react' // import { Activity } from 'react-feather' @@ -6,7 +5,7 @@ import { useTranslation } from 'react-i18next' import styled, { css } from 'styled-components' import ArgentXIcon from '../../assets/images/argentx.png' import braavosIcon from '../../assets/svg/Braavos.svg' -import { NetworkContextName, domainURL } from '../../constants' +import { domainURL } from '../../constants' import { useWalletModalToggle } from '../../state/application/hooks' import { isTransactionRecent, useAllTransactions } from '../../state/transactions/hooks' import { TransactionDetails } from '../../state/transactions/reducer' @@ -23,6 +22,7 @@ import { hexToDecimalString } from 'starknet/dist/utils/number' import { InjectedConnector } from '@starknet-react/core' import { StarknetChainId } from 'starknet/dist/constants' import { useAccountDetails } from '../../hooks' +import { isProductionChainId, isProductionEnvironment, isTestnetChainId, isTestnetEnvironment } from '../../connectors' const IconWrapper = styled.div<{ size?: number }>` ${({ theme }) => theme.flexColumnNoWrap}; @@ -192,9 +192,8 @@ function StatusIcon({ connector }: { connector: InjectedConnector }) { function Web3StatusInner({ starkID }: { starkID?: string }) { const { t } = useTranslation() - const { error } = useStarknetReact() - const { address, connector } = useAccountDetails() - // console.log('🚀 ~ file: index.tsx:198 ~ Web3StatusInner ~ provider:', provider.get) + const { address, connector, status, chainId } = useAccountDetails() + const [chainError, setChainError] = useState(false) const allTransactions = useAllTransactions() @@ -208,9 +207,20 @@ function Web3StatusInner({ starkID }: { starkID?: string }) { .map(tx => tx.hash) const hasPendingTransactions = !!pending.length - // const hasSocks = useHasSocks() const toggleWalletModal = useWalletModalToggle() + useEffect(() => { + if (status === 'connected' && chainId) { + if ( + (isProductionEnvironment() && !isProductionChainId(chainId)) || + (isTestnetEnvironment() && !isTestnetChainId(chainId)) || + !Object.values(StarknetChainId).includes(chainId) + ) { + setChainError(true) + } + } + }, [status]) + if (address) { return ( @@ -224,11 +234,11 @@ function Web3StatusInner({ starkID }: { starkID?: string }) { )} ) - } else if (error) { + } else if (chainError) { return ( - {error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'} + {chainError ? 'Wrong Network' : 'Error'} ) } else { @@ -242,7 +252,6 @@ function Web3StatusInner({ starkID }: { starkID?: string }) { export default function Web3Status() { const { address, chainId } = useAccountDetails() - const contextNetwork = useStarknetReact(NetworkContextName) type DomainToAddrData = { domain: string; domain_expiry: number } diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 8d36f986..fa1f196b 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,12 +1,5 @@ -import { ArgentXConnector } from '@web3-starknet-react/argentx-connector' -import { Provider as Web3Provider } from 'starknet' -import { useStarknetReact as useStarknetReactCore } from '@web3-starknet-react/core' -import { StarknetReactContextInterface } from '@web3-starknet-react/core/dist/types' import { useEffect, useMemo, useState } from 'react' -import { isMobile } from 'react-device-detect' import { argentX, braavosWallet } from '../connectors' -import { NetworkContextName, SUPPORTED_WALLETS } from '../constants' -import { BraavosConnector } from '@web3-starknet-react/braavos-connector' import { InjectedConnector, useConnectors, useAccount } from '@starknet-react/core' // deprecating this hook because we don't require it anymore @@ -26,7 +19,6 @@ export const useAccountDetails = () => { } export function useEagerConnect() { - const { active } = useStarknetReactCore() // specifically using useStarknetReactCore because of what this hook does const [tried, setTried] = useState(false) const { connect } = useConnectors() @@ -68,13 +60,6 @@ export function useEagerConnect() { // }, 100) // }, [activate, connector]) // intentionally only running on mount (make sure it's only mounted once :)) - // if the connection worked, wait until we get confirmation of that to flip the flag - useEffect(() => { - if (active) { - setTried(true) - } - }, [active]) - return tried } @@ -83,14 +68,13 @@ export function useEagerConnect() { * and out after checking what network theyre on */ export function useInactiveListener(suppress = false) { - const { active, error, activate } = useStarknetReactCore() // specifically using useStarknetReact because of what this hook does const { connector } = useAccountDetails() const { connect } = useConnectors() useEffect(() => { const { starknet, starknet_braavos } = window - if (starknet && !active && !error && !suppress && connector) { + if (starknet && !suppress && connector) { const activeConnector = connector instanceof InjectedConnector ? argentX : braavosWallet const handleChainChanged = () => { @@ -120,5 +104,5 @@ export function useInactiveListener(suppress = false) { } } return undefined - }, [active, error, suppress, activate, connector]) + }, [suppress, connector]) } diff --git a/src/hooks/useContract.ts b/src/hooks/useContract.ts index 00dafd6e..25df5c5c 100644 --- a/src/hooks/useContract.ts +++ b/src/hooks/useContract.ts @@ -9,8 +9,6 @@ import { MULTICALL_NETWORKS, MULTICALL_ABI } from '../constants/contracts/multic import { FACTORY_ADDRESS, FACTORY_ABI } from '../constants/contracts/factoryAddress' import { ROUTER_ADDRESS, ROUTER_ABI } from '../constants/contracts/routerAddress' import { ZAP_IN_ADDRESS, ZAP_IN_ABI } from '../constants/contracts/zapInAddress' -import { StarknetReactManagerReturn } from '@web3-starknet-react/core/dist/types' -import { useStarknetReactManager } from '@web3-starknet-react/core/dist/manager' import { DEFAULT_CHAIN_ID } from '../constants' import { InjectedConnector } from '@starknet-react/core' import { useAccountDetails } from '.' diff --git a/src/index.tsx b/src/index.tsx index af9e3ed9..ef2cb04b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,7 +19,6 @@ import UserUpdater from './state/user/updater' import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from './theme' import getLibrary from './utils/getLibrary' import { InjectedConnector, StarknetConfig } from '@starknet-react/core' -import { StarknetReactProvider, createStarknetReactRoot } from '@web3-starknet-react/core' import './components/analytics' import { WebWalletConnector } from '@argent/starknet-react-webwallet-connector' @@ -32,8 +31,6 @@ const connectors = [ }) ] -const StarknetProviderNetwork = createStarknetReactRoot(NetworkContextName) - Sentry.init({ dsn: 'https://6911d3472d9a467b962b9a4b2848abc6@o4505240445911040.ingest.sentry.io/4505240447287296', integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], @@ -60,21 +57,17 @@ function Updaters() { ReactDOM.render( - - - - - - - - - - - - - - - + + + + + + + + + + + , document.getElementById('root') ) diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 0fd87484..c28ba41c 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -3,7 +3,6 @@ import { Route, Switch } from 'react-router-dom' import styled from 'styled-components' import Header from '../components/Header' import Popups from '../components/Popups' -import Web3ReactManager from '../components/Web3ReactManager' import DarkModeQueryParamReader from '../theme/DarkModeQueryParamReader' import Swap from './Swap' @@ -105,26 +104,24 @@ export default function App() { - - web3}> - - - - - - - - - - - - {/* */} - - - - - - + web3}> + + + + + + + + + + + + {/* */} + + + + +