Remove @web3-starknet-react/core entirely across the repo

package.json

@@ -38,10 +38,6 @@
     "@typescript-eslint/parser": "^5.8.0",
     "@vitejs/plugin-react": "^1.3.2",
     "@vitest/ui": "^0.17.1",
-    "@web3-starknet-react/argentx-connector": "^2.2.3",
-    "@web3-starknet-react/braavos-connector": "^2.2.3",
-    "@web3-starknet-react/core": "^2.2.2",
-    "@web3-starknet-react/types": "^2.2.1",
     "ajv": "^6.12.3",
     "bn.js": "^5.2.0",
     "cids": "^1.0.0",

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'
 

src/components/SearchModal/CurrencyList.tsx

@@ -22,7 +22,6 @@ import Loader from '../Loader'
 import { isTokenOnList } from '../../utils'
 import { PlusCircle } from 'react-feather'
 import { ButtonEmpty } from '../Button'
-import { ArgentXConnector } from '@web3-starknet-react/argentx-connector'
 import { useAddTokenToWallet } from '../../hooks/useAddTokenToWallet'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import { useAccountDetails } from '../../hooks'

src/components/WalletModal/PendingView.tsx

@@ -6,8 +6,6 @@ import { SUPPORTED_WALLETS, WalletInfo } from '../../constants'
 import { darken } from 'polished'
 import Loader from '../Loader'
 import { BorderWrapper } from '../AccountDetails'
-import { NoStarknetProviderError as NoArgentXProviderError } from '@web3-starknet-react/argentx-connector'
-import { NoStarknetProviderError as NoBraavosProviderError } from '@web3-starknet-react/braavos-connector'
 import { WALLET_VIEWS } from '.'
 import { AutoColumn } from '../Column'
 import { ButtonOutlined } from '../Button'

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 (
         <UpperSection>
           <CloseIcon onClick={toggleWalletModal}>

src/components/Web3Status/index.tsx

@@ -1,12 +1,11 @@
-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'
 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<boolean>(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 (
       <Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
@@ -224,11 +234,11 @@ function Web3StatusInner({ starkID }: { starkID?: string }) {
         )}
       </Web3StatusConnected>
     )
-  } else if (error) {
+  } else if (chainError) {
     return (
       <Web3StatusError onClick={toggleWalletModal}>
         <NetworkIcon src={WrongNetwork} />
-        <Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
+        <Text>{chainError ? 'Wrong Network' : 'Error'}</Text>
       </Web3StatusError>
     )
   } 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 }
 

src/connectors/index.ts

@@ -1,7 +1,5 @@
 import { WebWalletConnector } from '@argent/starknet-react-webwallet-connector'
 import { InjectedConnector } from '@starknet-react/core'
-import { ArgentXConnector } from '@web3-starknet-react/argentx-connector'
-import { BraavosConnector } from '@web3-starknet-react/braavos-connector'
 import { StarknetChainId } from 'starknet/dist/constants'
 
 export const NETWORK_CHAIN_ID: number = parseInt(process.env.REACT_APP_CHAIN_ID ?? '5')

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])
 }

src/hooks/useAddTokenToWallet.tsx

@@ -1,14 +1,14 @@
-import { ArgentXConnector } from '@web3-starknet-react/argentx-connector'
-import { BraavosConnector } from '@web3-starknet-react/braavos-connector'
 import { useCallback } from 'react'
 import { useAccountDetails } from '.'
 
 export function useAddTokenToWallet(): (tokenAddress: string) => void {
   const { connector } = useAccountDetails()
+  const connectorType = connector?.id()
   return useCallback(
     async (tokenAddress: string) => {
       if (connector) {
-        if (connector instanceof ArgentXConnector) {
+        console.log("🚀 ~ file: useAddTokenToWallet.tsx:11 ~ connector:", connector)
+        if (connectorType === 'argentX') {
           try {
             await window.starknet?.request({
               type: 'wallet_watchAsset',
@@ -22,7 +22,7 @@ export function useAddTokenToWallet(): (tokenAddress: string) => void {
           } catch (error) {
             console.log(error)
           }
-        } else if (connector instanceof BraavosConnector) {
+        } else if (connectorType === 'braavos') {
           const wallet = [window.starknet, window.starknet_braavos].find(obj => obj?.id === 'braavos')
 
           try {

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 '.'

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(
   <StrictMode>
     <FixedGlobalStyle />
-    <StarknetReactProvider getLibrary={getLibrary}>
-      <StarknetProviderNetwork getLibrary={getLibrary}>
-        <StarknetConfig connectors={connectors as any} autoConnect>
-          <Provider store={store}>
-            <Updaters />
-            <ThemeProvider>
-              <ThemedGlobalStyle />
-              <HashRouter>
-                <App />
-              </HashRouter>
-            </ThemeProvider>
-          </Provider>
-        </StarknetConfig>
-      </StarknetProviderNetwork>
-    </StarknetReactProvider>
+    <StarknetConfig connectors={connectors as any} autoConnect>
+      <Provider store={store}>
+        <Updaters />
+        <ThemeProvider>
+          <ThemedGlobalStyle />
+          <HashRouter>
+            <App />
+          </HashRouter>
+        </ThemeProvider>
+      </Provider>
+    </StarknetConfig>
   </StrictMode>,
   document.getElementById('root')
 )