diff --git a/features/ipfs/security-status-banner/use-version-check.ts b/features/ipfs/security-status-banner/use-version-check.ts index 414a24e37..f74449dbf 100644 --- a/features/ipfs/security-status-banner/use-version-check.ts +++ b/features/ipfs/security-status-banner/use-version-check.ts @@ -1,12 +1,12 @@ import { useEffect, useState } from 'react'; -import { useLidoSWR } from '@lido-sdk/react'; -import { useWeb3 } from 'reef-knot/web3-react'; import { useForceDisconnect } from 'reef-knot/core-react'; +import { useLidoSWR } from '@lido-sdk/react'; import buildInfo from 'build-info.json'; import { config } from 'config'; import { useUserConfig } from 'config/user-config'; import { STRATEGY_IMMUTABLE } from 'consts/swr-strategies'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { overrideWithQAMockBoolean } from 'utils/qa'; import { isVersionLess } from './utils'; @@ -19,7 +19,7 @@ const URL_CID_REGEX = /[/.](?Qm[1-9A-HJ-NP-Za-km-z]{44,}|b[A-Za-z2-7]{58,}|B[A-Z2-7]{58,}|z[1-9A-HJ-NP-Za-km-z]{48,}|F[0-9A-F]{50,})([./#?]|$)/; export const useVersionCheck = () => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const { setIsWalletConnectionAllowed } = useUserConfig(); const { forceDisconnect } = useForceDisconnect(); const [areConditionsAccepted, setConditionsAccepted] = useState(false); @@ -84,7 +84,7 @@ export const useVersionCheck = () => { forceDisconnect(); } }, [ - active, + isDappActive, forceDisconnect, isNotVerifiable, isVersionUnsafe, diff --git a/features/stake/stake-form/stake-form-context/validation.ts b/features/stake/stake-form/stake-form-context/validation.ts index 26d0cadcf..b908e6f9f 100644 --- a/features/stake/stake-form/stake-form-context/validation.ts +++ b/features/stake/stake-form/stake-form-context/validation.ts @@ -1,9 +1,9 @@ import { useMemo } from 'react'; import invariant from 'tiny-invariant'; -import { useWeb3 } from 'reef-knot/web3-react'; import { Zero } from '@ethersproject/constants'; import { validateEtherAmount } from 'shared/hook-form/validation/validate-ether-amount'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { VALIDATION_CONTEXT_TIMEOUT } from 'features/withdrawals/withdrawals-constants'; import { handleResolverValidationError } from 'shared/hook-form/validation/validation-error'; import { awaitWithTimeout } from 'utils/await-with-timeout'; @@ -72,26 +72,26 @@ export const stakeFormValidationResolver: Resolver< export const useStakeFormValidationContext = ( networkData: StakeFormNetworkData, ): Promise => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const { stakingLimitInfo, etherBalance, isMultisig, gasCost } = networkData; const validationContextAwaited = useMemo(() => { if ( stakingLimitInfo && // we ether not connected or must have all account related data - (!active || (etherBalance && gasCost && isMultisig !== undefined)) + (!isDappActive || (etherBalance && gasCost && isMultisig !== undefined)) ) { return { - isWalletActive: active, + isWalletActive: isDappActive, stakingLimitLevel: stakingLimitInfo.stakeLimitLevel, currentStakeLimit: stakingLimitInfo.currentStakeLimit, - // condition above guaranties stubs will only be passed when active = false + // condition above guaranties stubs will only be passed when isDappActive = false etherBalance: etherBalance ?? Zero, gasCost: gasCost ?? Zero, isMultisig: isMultisig ?? false, }; } return undefined; - }, [active, etherBalance, gasCost, isMultisig, stakingLimitInfo]); + }, [isDappActive, etherBalance, gasCost, isMultisig, stakingLimitInfo]); return useAwaiter(validationContextAwaited).awaiter; }; diff --git a/features/stake/stake-form/use-stake.ts b/features/stake/stake-form/use-stake.ts index a772a63f5..4f61189c1 100644 --- a/features/stake/stake-form/use-stake.ts +++ b/features/stake/stake-form/use-stake.ts @@ -1,7 +1,7 @@ import { BigNumber } from 'ethers'; import { useCallback } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; import invariant from 'tiny-invariant'; +import { useAccount } from 'wagmi'; import { useSDK, @@ -31,8 +31,8 @@ type StakeOptions = { export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { const stethContractWeb3 = useSTETHContractWeb3(); + const { address, chainId } = useAccount(); const stethContract = useSTETHContractRPC(); - const { account, chainId } = useWeb3(); const { staticRpcProvider } = useCurrentStaticRpcProvider(); const { providerWeb3 } = useSDK(); const { txModalStages } = useTxModalStagesStake(); @@ -42,7 +42,7 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { try { invariant(amount, 'amount is null'); invariant(chainId, 'chainId is not defined'); - invariant(account, 'account is not defined'); + invariant(address, 'account is not defined'); invariant(providerWeb3, 'providerWeb3 not defined'); invariant(stethContractWeb3, 'steth is not defined'); @@ -56,7 +56,7 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { txModalStages.sign(amount); const [isMultisig, referralAddress] = await Promise.all([ - isContract(account, staticRpcProvider), + isContract(address, staticRpcProvider), referral ? getAddress(referral, staticRpcProvider) : config.STAKE_FALLBACK_REFERRAL_ADDRESS, @@ -98,7 +98,7 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { ); } - const stethBalance = await stethContract.balanceOf(account); + const stethBalance = await stethContract.balanceOf(address); await onConfirm?.(); @@ -113,7 +113,7 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { }, [ chainId, - account, + address, providerWeb3, stethContractWeb3, txModalStages, diff --git a/features/stake/stake.tsx b/features/stake/stake.tsx index 15f3f451b..237eb888c 100644 --- a/features/stake/stake.tsx +++ b/features/stake/stake.tsx @@ -1,5 +1,5 @@ import { FaqPlaceholder } from 'features/ipfs'; -import { useWeb3Key } from 'shared/hooks/useWeb3Key'; +import { useWagmiKey } from 'shared/hooks/use-wagmi-key'; import NoSSRWrapper from 'shared/components/no-ssr-wrapper'; import { OnlyInfraRender } from 'shared/components/only-infra-render'; @@ -8,7 +8,7 @@ import { LidoStats } from './lido-stats/lido-stats'; import { StakeForm } from './stake-form'; export const Stake = () => { - const key = useWeb3Key(); + const key = useWagmiKey(); return ( <> diff --git a/features/withdrawals/claim/claim-form-context/claim-form-context.tsx b/features/withdrawals/claim/claim-form-context/claim-form-context.tsx index ac4c471b6..0c50cec66 100644 --- a/features/withdrawals/claim/claim-form-context/claim-form-context.tsx +++ b/features/withdrawals/claim/claim-form-context/claim-form-context.tsx @@ -7,24 +7,25 @@ import { useMemo, } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; - import invariant from 'tiny-invariant'; + +import { useClaim } from 'features/withdrawals/hooks'; +import { useClaimData } from 'features/withdrawals/contexts/claim-data-context'; +import { useFormControllerRetry } from 'shared/hook-form/form-controller/use-form-controller-retry-delegate'; +import { + FormControllerContext, + FormControllerContextValueType, +} from 'shared/hook-form/form-controller'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; + import { ClaimFormInputType, ClaimFormValidationContext } from './types'; import { claimFormValidationResolver } from './validation'; -import { useClaim } from 'features/withdrawals/hooks'; import { useMaxSelectedCount } from './use-max-selected-count'; -import { useFormControllerRetry } from 'shared/hook-form/form-controller/use-form-controller-retry-delegate'; import { generateDefaultValues, useGetDefaultValues, } from './use-default-values'; import { ClaimFormHelperState, useHelperState } from './use-helper-state'; -import { - FormControllerContext, - FormControllerContextValueType, -} from 'shared/hook-form/form-controller'; -import { useClaimData } from 'features/withdrawals/contexts/claim-data-context'; -import { useWeb3 } from 'reef-knot/web3-react'; type ClaimFormDataContextValueType = ClaimFormHelperState; @@ -39,7 +40,7 @@ export const useClaimFormData = () => { }; export const ClaimFormProvider: FC = ({ children }) => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const { data } = useClaimData(); const { maxSelectedRequestCount, defaultSelectedRequestCount } = @@ -49,7 +50,7 @@ export const ClaimFormProvider: FC = ({ children }) => { const formObject = useForm({ defaultValues: getDefaultValues, resolver: claimFormValidationResolver, - context: { maxSelectedRequestCount, isWalletActive: active }, + context: { maxSelectedRequestCount, isWalletActive: isDappActive }, mode: 'onChange', reValidateMode: 'onChange', }); diff --git a/features/withdrawals/claim/form/requests-list/request-item.tsx b/features/withdrawals/claim/form/requests-list/request-item.tsx index fcf25521d..39a20163a 100644 --- a/features/withdrawals/claim/form/requests-list/request-item.tsx +++ b/features/withdrawals/claim/form/requests-list/request-item.tsx @@ -1,6 +1,6 @@ import { forwardRef } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; import { useFormState, useWatch } from 'react-hook-form'; +import { useAccount } from 'wagmi'; import { Checkbox, CheckboxProps, External } from '@lidofinance/lido-ui'; import { FormatToken } from 'shared/formatters'; @@ -19,7 +19,7 @@ type RequestItemProps = { export const RequestItem = forwardRef( ({ token_id, name, disabled, index, ...props }, ref) => { - const { chainId } = useWeb3(); + const { chainId } = useAccount(); const { isSubmitting } = useFormState(); const { canSelectMore } = useClaimFormData(); const { checked, status } = useWatch< diff --git a/features/withdrawals/claim/form/requests-list/requests-list.tsx b/features/withdrawals/claim/form/requests-list/requests-list.tsx index 4ed62d276..1e7ed79e8 100644 --- a/features/withdrawals/claim/form/requests-list/requests-list.tsx +++ b/features/withdrawals/claim/form/requests-list/requests-list.tsx @@ -1,11 +1,11 @@ +import { useFieldArray, useFormContext, useFormState } from 'react-hook-form'; import { useDappStatus } from 'shared/hooks/use-dapp-status'; +import { ClaimFormInputType } from '../../claim-form-context'; import { RequestItem } from './request-item'; import { RequestsEmpty } from './requests-empty'; import { Wrapper } from './styles'; import { RequestsLoader } from './requests-loader'; -import { useFieldArray, useFormContext, useFormState } from 'react-hook-form'; -import { ClaimFormInputType } from '../../claim-form-context'; export const RequestsList: React.FC = () => { const { isWalletConnected, isDappActive } = useDappStatus(); diff --git a/features/withdrawals/hooks/contract/useClaim.ts b/features/withdrawals/hooks/contract/useClaim.ts index 0e55e9bcf..f3fade11b 100644 --- a/features/withdrawals/hooks/contract/useClaim.ts +++ b/features/withdrawals/hooks/contract/useClaim.ts @@ -1,25 +1,26 @@ import { useCallback } from 'react'; import { BigNumber } from 'ethers'; +import invariant from 'tiny-invariant'; +import { useAccount } from 'wagmi'; -import { useClaimData } from 'features/withdrawals/contexts/claim-data-context'; -import { runWithTransactionLogger } from 'utils'; +import { useSDK } from '@lido-sdk/react'; -import { useWithdrawalsContract } from './useWithdrawalsContract'; +import { useClaimData } from 'features/withdrawals/contexts/claim-data-context'; import { RequestStatusClaimable } from 'features/withdrawals/types/request-status'; -import invariant from 'tiny-invariant'; -import { isContract } from 'utils/isContract'; -import { useWeb3 } from 'reef-knot/web3-react'; -import { useSDK } from '@lido-sdk/react'; import { useTxModalStagesClaim } from 'features/withdrawals/claim/transaction-modal-claim/use-tx-modal-stages-claim'; import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; +import { runWithTransactionLogger } from 'utils'; +import { isContract } from 'utils/isContract'; import { sendTx } from 'utils/send-tx'; +import { useWithdrawalsContract } from './useWithdrawalsContract'; + type Args = { onRetry?: () => void; }; export const useClaim = ({ onRetry }: Args) => { - const { account } = useWeb3(); + const { address } = useAccount(); const { providerWeb3 } = useSDK(); const { contractWeb3 } = useWithdrawalsContract(); const { staticRpcProvider } = useCurrentStaticRpcProvider(); @@ -31,10 +32,10 @@ export const useClaim = ({ onRetry }: Args) => { try { invariant(contractWeb3, 'must have contract'); invariant(sortedRequests, 'must have requests'); - invariant(account, 'must have address'); + invariant(address, 'must have address'); invariant(providerWeb3, 'must have provider'); - const isMultisig = await isContract(account, contractWeb3.provider); + const isMultisig = await isContract(address, contractWeb3.provider); const amount = sortedRequests.reduce( (s, r) => s.add(r.claimableEth), @@ -86,7 +87,7 @@ export const useClaim = ({ onRetry }: Args) => { }, [ contractWeb3, - account, + address, providerWeb3, txModalStages, staticRpcProvider, diff --git a/features/withdrawals/hooks/contract/useRequest.ts b/features/withdrawals/hooks/contract/useRequest.ts index 16a4cfba2..1c4bf79bf 100644 --- a/features/withdrawals/hooks/contract/useRequest.ts +++ b/features/withdrawals/hooks/contract/useRequest.ts @@ -2,7 +2,6 @@ import { useCallback } from 'react'; import { BigNumber } from 'ethers'; import invariant from 'tiny-invariant'; -import { useWeb3 } from 'reef-knot/web3-react'; import { useAccount } from 'wagmi'; import { Zero } from '@ethersproject/constants'; import { @@ -34,7 +33,7 @@ import { overrideWithQAMockBoolean } from 'utils/qa'; const useWithdrawalRequestMethods = () => { const { providerWeb3 } = useSDK(); const { staticRpcProvider } = useCurrentStaticRpcProvider(); - const { account, chainId, contractWeb3 } = useWithdrawalsContract(); + const { address, chainId, contractWeb3 } = useWithdrawalsContract(); const permitSteth = useCallback( async ({ @@ -45,7 +44,7 @@ const useWithdrawalRequestMethods = () => { requests: BigNumber[]; }) => { invariant(chainId, 'must have chainId'); - invariant(account, 'must have account'); + invariant(address, 'must have address'); invariant(providerWeb3, 'must have providerWeb3'); invariant(signature, 'must have signature'); invariant(contractWeb3, 'must have contractWeb3'); @@ -73,7 +72,7 @@ const useWithdrawalRequestMethods = () => { return callback; }, - [account, chainId, contractWeb3, providerWeb3, staticRpcProvider], + [address, chainId, contractWeb3, providerWeb3, staticRpcProvider], ); const permitWsteth = useCallback( @@ -85,7 +84,7 @@ const useWithdrawalRequestMethods = () => { requests: BigNumber[]; }) => { invariant(chainId, 'must have chainId'); - invariant(account, 'must have account'); + invariant(address, 'must have address'); invariant(signature, 'must have signature'); invariant(providerWeb3, 'must have providerWeb3'); invariant(contractWeb3, 'must have contractWeb3'); @@ -113,21 +112,21 @@ const useWithdrawalRequestMethods = () => { return callback; }, - [account, chainId, contractWeb3, providerWeb3, staticRpcProvider], + [address, chainId, contractWeb3, providerWeb3, staticRpcProvider], ); const steth = useCallback( async ({ requests }: { requests: BigNumber[] }) => { invariant(chainId, 'must have chainId'); - invariant(account, 'must have account'); + invariant(address, 'must have account'); invariant(contractWeb3, 'must have contractWeb3'); invariant(providerWeb3, 'must have providerWeb3'); - const isMultisig = await isContract(account, contractWeb3.provider); + const isMultisig = await isContract(address, contractWeb3.provider); const tx = await contractWeb3.populateTransaction.requestWithdrawals( requests, - account, + address, ); const callback = async () => @@ -140,21 +139,21 @@ const useWithdrawalRequestMethods = () => { return callback; }, - [account, chainId, contractWeb3, staticRpcProvider, providerWeb3], + [address, chainId, contractWeb3, staticRpcProvider, providerWeb3], ); const wstETH = useCallback( async ({ requests }: { requests: BigNumber[] }) => { invariant(chainId, 'must have chainId'); - invariant(account, 'must have account'); + invariant(address, 'must have address'); invariant(contractWeb3, 'must have contractWeb3'); invariant(providerWeb3, 'must have providerWeb3'); - const isMultisig = await isContract(account, contractWeb3.provider); + const isMultisig = await isContract(address, contractWeb3.provider); const tx = await contractWeb3.populateTransaction.requestWithdrawalsWstETH( requests, - account, + address, ); const callback = async () => @@ -167,7 +166,7 @@ const useWithdrawalRequestMethods = () => { return callback; }, - [account, chainId, contractWeb3, staticRpcProvider, providerWeb3], + [address, chainId, contractWeb3, staticRpcProvider, providerWeb3], ); return useCallback( @@ -204,8 +203,7 @@ export const useWithdrawalRequest = ({ const withdrawalQueueAddress = getWithdrawalQueueAddress(chainId); const { staticRpcProvider } = useCurrentStaticRpcProvider(); - const { connector } = useAccount(); - const { account } = useWeb3(); + const { connector, address } = useAccount(); const { isBunker } = useWithdrawals(); const { txModalStages } = useTxModalStagesRequest(); const getRequestMethod = useWithdrawalRequestMethods(); @@ -229,7 +227,7 @@ export const useWithdrawalRequest = ({ valueBN, tokenContract.address, withdrawalQueueAddress, - account ?? undefined, + address ?? undefined, ); const { gatherPermitSignature } = useERC20PermitSignature({ diff --git a/features/withdrawals/hooks/contract/useWithdrawalsContract.ts b/features/withdrawals/hooks/contract/useWithdrawalsContract.ts index e874c7b84..f19c23cdb 100644 --- a/features/withdrawals/hooks/contract/useWithdrawalsContract.ts +++ b/features/withdrawals/hooks/contract/useWithdrawalsContract.ts @@ -1,14 +1,14 @@ +import { useAccount } from 'wagmi'; import { useWithdrawalQueueContractWeb3, useWithdrawalQueueContractRPC, } from '@lido-sdk/react'; -import { useWeb3 } from 'reef-knot/web3-react'; export const useWithdrawalsContract = () => { const contractWeb3 = useWithdrawalQueueContractWeb3(); const contractRpc = useWithdrawalQueueContractRPC(); - const { account, chainId } = useWeb3(); + const { address, chainId } = useAccount(); - return { contractWeb3, contractRpc, account, chainId }; + return { contractWeb3, contractRpc, address, chainId }; }; diff --git a/features/withdrawals/hooks/contract/useWithdrawalsData.ts b/features/withdrawals/hooks/contract/useWithdrawalsData.ts index 592f97d8f..138078dec 100644 --- a/features/withdrawals/hooks/contract/useWithdrawalsData.ts +++ b/features/withdrawals/hooks/contract/useWithdrawalsData.ts @@ -80,15 +80,15 @@ const getRequestTimeForWQRequestIds = async ( }; export const useWithdrawalRequests = () => { - const { contractRpc, account, chainId } = useWithdrawalsContract(); + const { contractRpc, address, chainId } = useWithdrawalsContract(); // const { data: currentShareRate } = useLidoShareRate(); const swr = useLidoSWR( // TODO: use this fragment for expected eth calculation // currentShareRate - // ? ['swr:withdrawals-requests', account, chainId, currentShareRate] + // ? ['swr:withdrawals-requests', address, chainId, currentShareRate] // : false, - ['swr:withdrawals-requests', account, chainId], + ['swr:withdrawals-requests', address, chainId], async (...args: unknown[]) => { const account = args[1] as string; // const currentShareRate = args[3] as BigNumber; diff --git a/features/withdrawals/hooks/useNftDataByTxHash.ts b/features/withdrawals/hooks/useNftDataByTxHash.ts index 098f719c9..bbfd4ebaf 100644 --- a/features/withdrawals/hooks/useNftDataByTxHash.ts +++ b/features/withdrawals/hooks/useNftDataByTxHash.ts @@ -14,13 +14,13 @@ type NFTApiData = { }; export const useNftDataByTxHash = (txHash: string | null) => { - const { contractRpc, account } = useWithdrawalsContract(); + const { contractRpc, address } = useWithdrawalsContract(); const { staticRpcProvider } = useCurrentStaticRpcProvider(); const swrNftApiData = useLidoSWR( - account && txHash ? ['swr:nft-data-by-tx-hash', txHash, account] : null, + address && txHash ? ['swr:nft-data-by-tx-hash', txHash, address] : null, async () => { - if (!txHash || !account) return null; + if (!txHash || !address) return null; const txReciept: TransactionReceipt = await staticRpcProvider.getTransactionReceipt(txHash); diff --git a/features/withdrawals/hooks/useWithdrawTxPrice.ts b/features/withdrawals/hooks/useWithdrawTxPrice.ts index 14af8fd1e..be986487e 100644 --- a/features/withdrawals/hooks/useWithdrawTxPrice.ts +++ b/features/withdrawals/hooks/useWithdrawTxPrice.ts @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import { BigNumber } from 'ethers'; import invariant from 'tiny-invariant'; -import { useWeb3 } from 'reef-knot/web3-react'; +import { useAccount } from 'wagmi'; import { TOKENS } from '@lido-sdk/constants'; import { useLidoSWR, useSDK } from '@lido-sdk/react'; @@ -109,7 +109,7 @@ export const useRequestTxPrice = ({ export const useClaimTxPrice = (requests: RequestStatusClaimable[]) => { const { contractRpc } = useWithdrawalsContract(); - const { account, chainId } = useWeb3(); + const { address, chainId } = useAccount(); const requestCount = requests.length || 1; const debouncedSortedSelectedRequests = useDebouncedValue(requests, 2000); @@ -118,13 +118,13 @@ export const useClaimTxPrice = (requests: RequestStatusClaimable[]) => { [ 'swr:claim-request-gas-limit', debouncedSortedSelectedRequests, - account, + address, chainId, ], async () => { if ( !chainId || - !account || + !address || !contractRpc || debouncedSortedSelectedRequests.length === 0 ) @@ -135,12 +135,12 @@ export const useClaimTxPrice = (requests: RequestStatusClaimable[]) => { .claimWithdrawals( sortedRequests.map((r) => r.id), sortedRequests.map((r) => r.hint), - { from: account }, + { from: address }, ) .catch((error) => { console.warn('Could not estimate gas for claim', { ids: sortedRequests.map((r) => r.id), - account, + address, error, }); return undefined; diff --git a/features/withdrawals/request/form/transaction-info.tsx b/features/withdrawals/request/form/transaction-info.tsx index 995b806ae..1b0b53e8d 100644 --- a/features/withdrawals/request/form/transaction-info.tsx +++ b/features/withdrawals/request/form/transaction-info.tsx @@ -1,21 +1,23 @@ +import { useWatch } from 'react-hook-form'; import { TOKENS } from '@lido-sdk/constants'; import { DataTableRow } from '@lidofinance/lido-ui'; + import { useRequestTxPrice } from 'features/withdrawals/hooks/useWithdrawTxPrice'; import { useApproveGasLimit } from 'features/wsteth/wrap/hooks/use-approve-gas-limit'; -import { useWatch } from 'react-hook-form'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; +import { AllowanceDataTableRow } from 'shared/components/allowance-data-table-row'; import { DataTableRowStethByWsteth } from 'shared/components/data-table-row-steth-by-wsteth'; import { FormatPrice } from 'shared/formatters'; import { useTxCostInUsd } from 'shared/hooks'; + import { RequestFormInputType, useRequestFormData, useValidationResults, } from '../request-form-context'; -import { useWeb3 } from 'reef-knot/web3-react'; -import { AllowanceDataTableRow } from 'shared/components/allowance-data-table-row'; export const TransactionInfo = () => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const { isApprovalFlow, isApprovalFlowLoading, allowance } = useRequestFormData(); const token = useWatch({ name: 'token' }); @@ -55,7 +57,7 @@ export const TransactionInfo = () => { data-testid="allowance" token={token} allowance={allowance} - isBlank={!active} + isBlank={!isDappActive} loading={isApprovalFlowLoading} /> {token === TOKENS.STETH ? ( diff --git a/features/withdrawals/request/request-form-context/use-validation-context.ts b/features/withdrawals/request/request-form-context/use-validation-context.ts index af171e763..904523adc 100644 --- a/features/withdrawals/request/request-form-context/use-validation-context.ts +++ b/features/withdrawals/request/request-form-context/use-validation-context.ts @@ -1,23 +1,23 @@ +import { useMemo } from 'react'; import { MAX_REQUESTS_COUNT_LEDGER_LIMIT, MAX_REQUESTS_COUNT, } from 'features/withdrawals/withdrawals-constants'; -import { useMemo } from 'react'; import { useIsLedgerLive } from 'shared/hooks/useIsLedgerLive'; import { useAwaiter } from 'shared/hooks/use-awaiter'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import type { RequestFormDataType, RequestFormValidationAsyncContextType, RequestFormValidationContextType, } from './types'; -import { useWeb3 } from 'reef-knot/web3-react'; // Prepares validation context object from request form data export const useValidationContext = ( requestData: RequestFormDataType, setIntermediateValidationResults: RequestFormValidationContextType['setIntermediateValidationResults'], ): RequestFormValidationContextType => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const isLedgerLive = useIsLedgerLive(); const maxRequestCount = isLedgerLive ? MAX_REQUESTS_COUNT_LEDGER_LIMIT @@ -68,7 +68,7 @@ export const useValidationContext = ( useAwaiter(context).awaiter; return { - isWalletActive: active, + isWalletActive: isDappActive, asyncContext, setIntermediateValidationResults, }; diff --git a/features/wsteth/unwrap/hooks/use-unwra-form-validation-context.ts b/features/wsteth/unwrap/hooks/use-unwra-form-validation-context.ts index 92d4f0783..22e96dfa0 100644 --- a/features/wsteth/unwrap/hooks/use-unwra-form-validation-context.ts +++ b/features/wsteth/unwrap/hooks/use-unwra-form-validation-context.ts @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { useAwaiter } from 'shared/hooks/use-awaiter'; import type { UnwrapFormNetworkData } from '../unwrap-form-context'; @@ -11,18 +11,18 @@ type UseUnwrapFormValidationContextArgs = { export const useUnwrapFormValidationContext = ({ networkData, }: UseUnwrapFormValidationContextArgs) => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const { maxAmount } = networkData; const validationContextAwaited = useMemo(() => { - if (active && !maxAmount) { + if (isDappActive && !maxAmount) { return undefined; } return { - isWalletActive: active, + isWalletActive: isDappActive, maxAmount, }; - }, [active, maxAmount]); + }, [isDappActive, maxAmount]); return useAwaiter(validationContextAwaited).awaiter; }; diff --git a/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts b/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts index 21450e3f5..6baad8398 100644 --- a/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts +++ b/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts @@ -1,15 +1,16 @@ +import { useCallback } from 'react'; import invariant from 'tiny-invariant'; +import { useAccount } from 'wagmi'; -import { useCallback } from 'react'; import { useSTETHContractRPC, useWSTETHContractRPC } from '@lido-sdk/react'; -import { useWeb3 } from 'reef-knot/web3-react'; -import { useUnwrapTxProcessing } from './use-unwrap-tx-processing'; -import { useTxModalStagesUnwrap } from './use-tx-modal-stages-unwrap'; +import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; import { isContract } from 'utils/isContract'; import { runWithTransactionLogger } from 'utils'; + import type { UnwrapFormInputType } from '../unwrap-form-context'; -import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; +import { useUnwrapTxProcessing } from './use-unwrap-tx-processing'; +import { useTxModalStagesUnwrap } from './use-tx-modal-stages-unwrap'; type UseUnwrapFormProcessorArgs = { onConfirm?: () => Promise; @@ -20,7 +21,7 @@ export const useUnwrapFormProcessor = ({ onConfirm, onRetry, }: UseUnwrapFormProcessorArgs) => { - const { account } = useWeb3(); + const { address } = useAccount(); const { staticRpcProvider } = useCurrentStaticRpcProvider(); const processWrapTx = useUnwrapTxProcessing(); const stETHContractRPC = useSTETHContractRPC(); @@ -31,8 +32,8 @@ export const useUnwrapFormProcessor = ({ async ({ amount }: UnwrapFormInputType) => { try { invariant(amount, 'amount should be presented'); - invariant(account, 'address should be presented'); - const isMultisig = await isContract(account, staticRpcProvider); + invariant(address, 'address should be presented'); + const isMultisig = await isContract(address, staticRpcProvider); const willReceive = await wstETHContractRPC.getStETHByWstETH(amount); txModalStages.sign(amount, willReceive); @@ -52,7 +53,7 @@ export const useUnwrapFormProcessor = ({ staticRpcProvider.waitForTransaction(txHash), ); - const stethBalance = await stETHContractRPC.balanceOf(account); + const stethBalance = await stETHContractRPC.balanceOf(address); await onConfirm?.(); txModalStages.success(stethBalance, txHash); @@ -64,7 +65,7 @@ export const useUnwrapFormProcessor = ({ } }, [ - account, + address, wstETHContractRPC, txModalStages, stETHContractRPC, diff --git a/features/wsteth/wrap/hooks/use-approve-gas-limit.tsx b/features/wsteth/wrap/hooks/use-approve-gas-limit.tsx index 3a5dbec3f..68f8cc380 100644 --- a/features/wsteth/wrap/hooks/use-approve-gas-limit.tsx +++ b/features/wsteth/wrap/hooks/use-approve-gas-limit.tsx @@ -1,5 +1,5 @@ import { BigNumber } from 'ethers'; -import { useWeb3 } from 'reef-knot/web3-react'; +import { useAccount } from 'wagmi'; import { useLidoSWR, useSTETHContractRPC, @@ -13,7 +13,7 @@ import { STRATEGY_IMMUTABLE } from 'consts/swr-strategies'; export const useApproveGasLimit = () => { const steth = useSTETHContractRPC(); const wsteth = useWSTETHContractRPC(); - const { chainId } = useWeb3(); + const { chainId } = useAccount(); const { data } = useLidoSWR( ['swr:approve-wrap-gas-limit', chainId], diff --git a/features/wsteth/wrap/hooks/use-wrap-form-processing.ts b/features/wsteth/wrap/hooks/use-wrap-form-processing.ts index 3c5daa786..e9e091728 100644 --- a/features/wsteth/wrap/hooks/use-wrap-form-processing.ts +++ b/features/wsteth/wrap/hooks/use-wrap-form-processing.ts @@ -1,18 +1,19 @@ +import { useCallback } from 'react'; import invariant from 'tiny-invariant'; +import { useAccount } from 'wagmi'; -import { useCallback } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; -import { useWrapTxProcessing } from './use-wrap-tx-processing'; -import { useTxModalWrap } from './use-tx-modal-stages-wrap'; import { useWSTETHContractRPC } from '@lido-sdk/react'; +import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; import { runWithTransactionLogger } from 'utils'; import { isContract } from 'utils/isContract'; + import type { WrapFormApprovalData, WrapFormInputType, } from '../wrap-form-context'; -import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; +import { useWrapTxProcessing } from './use-wrap-tx-processing'; +import { useTxModalWrap } from './use-tx-modal-stages-wrap'; type UseWrapFormProcessorArgs = { approvalData: WrapFormApprovalData; @@ -25,7 +26,7 @@ export const useWrapFormProcessor = ({ onConfirm, onRetry, }: UseWrapFormProcessorArgs) => { - const { account } = useWeb3(); + const { address } = useAccount(); const processWrapTx = useWrapTxProcessing(); const { isApprovalNeededBeforeWrap, processApproveTx } = approvalData; const { txModalStages } = useTxModalWrap(); @@ -36,8 +37,8 @@ export const useWrapFormProcessor = ({ async ({ amount, token }: WrapFormInputType) => { try { invariant(amount, 'amount should be presented'); - invariant(account, 'address should be presented'); - const isMultisig = await isContract(account, staticRpcProvider); + invariant(address, 'address should be presented'); + const isMultisig = await isContract(address, staticRpcProvider); const willReceive = await wstETHContractRPC.getWstETHByStETH(amount); if (isApprovalNeededBeforeWrap) { @@ -73,7 +74,7 @@ export const useWrapFormProcessor = ({ staticRpcProvider.waitForTransaction(txHash), ); - const wstethBalance = await wstETHContractRPC.balanceOf(account); + const wstethBalance = await wstETHContractRPC.balanceOf(address); await onConfirm?.(); txModalStages.success(wstethBalance, txHash); @@ -85,7 +86,7 @@ export const useWrapFormProcessor = ({ } }, [ - account, + address, wstETHContractRPC, isApprovalNeededBeforeWrap, txModalStages, diff --git a/features/wsteth/wrap/hooks/use-wrap-form-validation-context.ts b/features/wsteth/wrap/hooks/use-wrap-form-validation-context.ts index 6ad2763f3..e044da344 100644 --- a/features/wsteth/wrap/hooks/use-wrap-form-validation-context.ts +++ b/features/wsteth/wrap/hooks/use-wrap-form-validation-context.ts @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { useAwaiter } from 'shared/hooks/use-awaiter'; import type { @@ -15,7 +15,7 @@ type UseWrapFormValidationContextArgs = { export const useWrapFormValidationContext = ({ networkData, }: UseWrapFormValidationContextArgs): WrapFormValidationContext => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const { stakeLimitInfo, ethBalance, @@ -24,7 +24,7 @@ export const useWrapFormValidationContext = ({ wrapEthGasCost, } = networkData; - const waitForAccountData = active + const waitForAccountData = isDappActive ? stethBalance && ethBalance && isMultisig !== undefined : true; @@ -38,7 +38,7 @@ export const useWrapFormValidationContext = ({ useMemo(() => { return isDataReady ? ({ - isWalletActive: active, + isWalletActive: isDappActive, stethBalance, etherBalance: ethBalance, isMultisig, @@ -49,7 +49,7 @@ export const useWrapFormValidationContext = ({ : undefined; }, [ isDataReady, - active, + isDappActive, stethBalance, ethBalance, isMultisig, diff --git a/features/wsteth/wrap/hooks/use-wrap-gas-limit.ts b/features/wsteth/wrap/hooks/use-wrap-gas-limit.ts index 60d44f792..4433fc87e 100644 --- a/features/wsteth/wrap/hooks/use-wrap-gas-limit.ts +++ b/features/wsteth/wrap/hooks/use-wrap-gas-limit.ts @@ -1,4 +1,4 @@ -import { useWeb3 } from 'reef-knot/web3-react'; +import { useAccount } from 'wagmi'; import { useLidoSWR, useWSTETHContractRPC } from '@lido-sdk/react'; import { config } from 'config'; @@ -8,7 +8,7 @@ import { applyGasLimitRatio } from 'utils/apply-gas-limit-ratio'; export const useWrapGasLimit = () => { const wsteth = useWSTETHContractRPC(); - const { chainId } = useWeb3(); + const { chainId } = useAccount(); const { staticRpcProvider } = useCurrentStaticRpcProvider(); const { data } = useLidoSWR( diff --git a/features/wsteth/wrap/hooks/use-wrap-tx-approve.ts b/features/wsteth/wrap/hooks/use-wrap-tx-approve.ts index ada13cc5e..6a14a634b 100644 --- a/features/wsteth/wrap/hooks/use-wrap-tx-approve.ts +++ b/features/wsteth/wrap/hooks/use-wrap-tx-approve.ts @@ -1,11 +1,13 @@ import { useMemo } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; -import { useSDK } from '@lido-sdk/react'; -import { useApprove } from 'shared/hooks/useApprove'; - +import { useAccount } from 'wagmi'; import type { BigNumber } from 'ethers'; + import { getTokenAddress, TOKENS } from '@lido-sdk/constants'; +import { useSDK } from '@lido-sdk/react'; + import { TokensWrappable, TOKENS_TO_WRAP } from 'features/wsteth/shared/types'; +import { useApprove } from 'shared/hooks/useApprove'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; type UseWrapTxApproveArgs = { amount: BigNumber; @@ -13,7 +15,8 @@ type UseWrapTxApproveArgs = { }; export const useWrapTxApprove = ({ amount, token }: UseWrapTxApproveArgs) => { - const { active, account } = useWeb3(); + const { isDappActive } = useDappStatus(); + const { address } = useAccount(); const { chainId } = useSDK(); const [stethTokenAddress, wstethTokenAddress] = useMemo( @@ -33,11 +36,11 @@ export const useWrapTxApprove = ({ amount, token }: UseWrapTxApproveArgs) => { amount, stethTokenAddress, wstethTokenAddress, - account ? account : undefined, + address ? address : undefined, ); const isApprovalNeededBeforeWrap = - active && needsApprove && token === TOKENS_TO_WRAP.STETH; + isDappActive && needsApprove && token === TOKENS_TO_WRAP.STETH; return useMemo( () => ({ diff --git a/features/wsteth/wrap/wrap-form/wrap-stats.tsx b/features/wsteth/wrap/wrap-form/wrap-stats.tsx index 4767eb814..1d26d5e2c 100644 --- a/features/wsteth/wrap/wrap-form/wrap-stats.tsx +++ b/features/wsteth/wrap/wrap-form/wrap-stats.tsx @@ -1,5 +1,4 @@ import { useFormContext } from 'react-hook-form'; -import { useWeb3 } from 'reef-knot/web3-react'; import { parseEther } from '@ethersproject/units'; import { DataTable, DataTableRow } from '@lidofinance/lido-ui'; @@ -11,6 +10,7 @@ import { TOKENS_TO_WRAP } from 'features/wsteth/shared/types'; import { AllowanceDataTableRow } from 'shared/components/allowance-data-table-row'; import { FormatPrice, FormatToken } from 'shared/formatters'; import { useTxCostInUsd, useWstethBySteth } from 'shared/hooks'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { useApproveGasLimit } from '../hooks/use-approve-gas-limit'; import { useWrapFormData, WrapFormInputType } from '../wrap-form-context'; @@ -18,7 +18,7 @@ import { useWrapFormData, WrapFormInputType } from '../wrap-form-context'; const oneSteth = parseEther('1'); export const WrapFormStats = () => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const { allowance, wrapGasLimit, isApprovalLoading } = useWrapFormData(); const { watch } = useFormContext(); @@ -82,7 +82,7 @@ export const WrapFormStats = () => { diff --git a/pages/withdrawals/[mode].tsx b/pages/withdrawals/[mode].tsx index 3dacb7c42..b4bf20e70 100644 --- a/pages/withdrawals/[mode].tsx +++ b/pages/withdrawals/[mode].tsx @@ -2,15 +2,14 @@ import type { FC } from 'react'; import type { GetStaticPaths } from 'next'; import Head from 'next/head'; -import { Layout } from 'shared/components'; - import { WithdrawalsTabs } from 'features/withdrawals'; import { WithdrawalsProvider } from 'features/withdrawals/contexts/withdrawals-context'; -import { useWeb3Key } from 'shared/hooks/useWeb3Key'; +import { Layout } from 'shared/components'; +import { useWagmiKey } from 'shared/hooks/use-wagmi-key'; import { getDefaultStaticProps } from 'utilsApi/get-default-static-props'; const Withdrawals: FC = ({ mode }) => { - const key = useWeb3Key(); + const key = useWagmiKey(); return ( = ({ mode }) => { - const key = useWeb3Key(); + const key = useWagmiKey(); + return ( { - const { chainId: web3ChainId = defaultChainId, account, active } = useWeb3(); + const { chainId: wagmiChainId = defaultChainId, address } = useAccount(); const { supportedChains } = useSupportedChains(); + const { isDappActive } = useDappStatus(); const config = useConfig(); const client = useClient(); const { rpc } = useReefKnotContext(); @@ -40,7 +43,7 @@ export const SDKLegacyProvider = ({ }; const getProviderValue = async () => { - if (!client || !account || !active) return undefined; + if (!client || !address || !isDappActive) return undefined; const { chain } = client; const providerTransport = await getProviderTransport(); @@ -65,7 +68,7 @@ export const SDKLegacyProvider = ({ return () => { isHookMounted = false; }; - }, [config, config.state, client, account, active, pollingInterval]); + }, [config, config.state, client, address, isDappActive, pollingInterval]); const supportedChainIds = useMemo( () => supportedChains.map((chain) => chain.chainId), @@ -73,10 +76,10 @@ export const SDKLegacyProvider = ({ ); const chainId = useMemo(() => { - return supportedChainIds.indexOf(web3ChainId) > -1 - ? web3ChainId + return supportedChainIds.indexOf(wagmiChainId) > -1 + ? wagmiChainId : defaultChainId; - }, [defaultChainId, supportedChainIds, web3ChainId]); + }, [defaultChainId, supportedChainIds, wagmiChainId]); const providerRpc = useMemo( () => getStaticRpcBatchProvider(chainId, rpc[chainId], 0, pollingInterval), @@ -102,7 +105,7 @@ export const SDKLegacyProvider = ({ providerWeb3={providerWeb3} providerRpc={providerRpc} providerMainnetRpc={providerMainnetRpc} - account={account ?? undefined} + account={address ?? undefined} > {children} diff --git a/shared/hook-form/form-controller/form-controller.tsx b/shared/hook-form/form-controller/form-controller.tsx index e06b24f60..b1a799249 100644 --- a/shared/hook-form/form-controller/form-controller.tsx +++ b/shared/hook-form/form-controller/form-controller.tsx @@ -1,6 +1,8 @@ import { FC, PropsWithChildren, useEffect, useMemo } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; import { useFormContext } from 'react-hook-form'; + +import { useDappStatus } from 'shared/hooks/use-dapp-status'; + import { useFormControllerContext } from './form-controller-context'; type FormControllerProps = React.ComponentProps<'form'>; @@ -9,7 +11,7 @@ export const FormController: FC> = ({ children, ...props }) => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const { handleSubmit, reset: resetDefault } = useFormContext(); const { onSubmit, @@ -34,11 +36,11 @@ export const FormController: FC> = ({ // Reset form amount after disconnect wallet useEffect(() => { - if (!active) resetDefault(); + if (!isDappActive) resetDefault(); // reset will be captured when active changes // so we don't need it in deps // eslint-disable-next-line react-hooks/exhaustive-deps - }, [active]); + }, [isDappActive]); return (
diff --git a/shared/hooks/use-staking-limit-warning.ts b/shared/hooks/use-staking-limit-warning.ts index 35f07abb5..f0f8d59b9 100644 --- a/shared/hooks/use-staking-limit-warning.ts +++ b/shared/hooks/use-staking-limit-warning.ts @@ -1,15 +1,15 @@ -import { useWeb3 } from 'reef-knot/web3-react'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { LIMIT_LEVEL } from 'types'; export const useStakingLimitWarning = (stakingLimitLevel?: LIMIT_LEVEL) => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const limitWarning = - stakingLimitLevel === LIMIT_LEVEL.WARN && active + stakingLimitLevel === LIMIT_LEVEL.WARN && isDappActive ? 'Stake limit is almost exhausted. Your transaction may not go through.' : null; const limitError = - stakingLimitLevel === LIMIT_LEVEL.REACHED && active + stakingLimitLevel === LIMIT_LEVEL.REACHED && isDappActive ? 'Stake limit is exhausted. Please wait until the limit is restored.' : null; diff --git a/shared/hooks/use-wagmi-key.ts b/shared/hooks/use-wagmi-key.ts new file mode 100644 index 000000000..f9c07ce6c --- /dev/null +++ b/shared/hooks/use-wagmi-key.ts @@ -0,0 +1,9 @@ +import { useAccount } from 'wagmi'; +import { config } from 'config'; + +// In order to simplify side effects of switching wallets/chains +// we can remount by this key, resetting all internal states +export const useWagmiKey = () => { + const { address, chainId } = useAccount(); + return `${address ?? 'NO_ADDRESS'}_${chainId ?? config.defaultChain}`; +}; diff --git a/shared/hooks/useERC20PermitSignature.ts b/shared/hooks/useERC20PermitSignature.ts index 4ed13bdfe..cd4825f61 100644 --- a/shared/hooks/useERC20PermitSignature.ts +++ b/shared/hooks/useERC20PermitSignature.ts @@ -1,14 +1,12 @@ import { useCallback } from 'react'; +import { BigNumber, TypedDataDomain } from 'ethers'; import invariant from 'tiny-invariant'; +import { useAccount } from 'wagmi'; import { hexValue, splitSignature } from '@ethersproject/bytes'; import { MaxUint256 } from '@ethersproject/constants'; -import { BigNumber, TypedDataDomain } from 'ethers'; - import { useSDK } from '@lido-sdk/react'; - import { Erc20Abi, StethAbi } from '@lido-sdk/contracts'; -import { useWeb3 } from 'reef-knot/web3-react'; export type GatherPermitSignatureResult = { v: number; @@ -57,13 +55,13 @@ export const useERC20PermitSignature = < tokenProvider, spender, }: UseERC20PermitSignatureProps): UseERC20PermitSignatureResult => { - const { chainId, account } = useWeb3(); + const { address, chainId } = useAccount(); const { providerWeb3 } = useSDK(); const gatherPermitSignature = useCallback( async (amount: BigNumber) => { invariant(chainId, 'chainId is needed'); - invariant(account, 'account is needed'); + invariant(address, 'account is needed'); invariant(providerWeb3, 'providerWeb3 is needed'); invariant(tokenProvider, 'tokenProvider is needed'); @@ -86,10 +84,10 @@ export const useERC20PermitSignature = < verifyingContract: tokenProvider.address, }; } - const nonce = await tokenProvider.nonces(account); + const nonce = await tokenProvider.nonces(address); const message = { - owner: account, + owner: address, spender, value: amount.toString(), nonce: hexValue(nonce), @@ -113,12 +111,12 @@ export const useERC20PermitSignature = < deadline, chainId: chainId, nonce: message.nonce, - owner: account, + owner: address, spender, }; }); }, - [chainId, account, providerWeb3, tokenProvider, spender], + [chainId, address, providerWeb3, tokenProvider, spender], ); return { gatherPermitSignature }; diff --git a/shared/hooks/useIsMultisig.ts b/shared/hooks/useIsMultisig.ts index 5a15936b6..d4cd13374 100644 --- a/shared/hooks/useIsMultisig.ts +++ b/shared/hooks/useIsMultisig.ts @@ -1,10 +1,10 @@ -import { useWeb3 } from 'reef-knot/web3-react'; +import { useAccount } from 'wagmi'; import { useIsContract } from 'shared/hooks'; export const useIsMultisig = () => { - const { account } = useWeb3(); + const { address } = useAccount(); const { isContract: isMultisig, isLoading } = useIsContract( - account ?? undefined, + address ?? undefined, ); return { isMultisig, isLoading }; }; diff --git a/shared/hooks/useWeb3Key.ts b/shared/hooks/useWeb3Key.ts deleted file mode 100644 index 074a47f67..000000000 --- a/shared/hooks/useWeb3Key.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { useWeb3 } from 'reef-knot/web3-react'; - -import { config } from 'config'; - -// In order to simplify side effects of switching wallets/chains -// we can remount by this key, resetting all internal states -export const useWeb3Key = () => { - const { account, chainId } = useWeb3(); - return `${account ?? 'NO_ACCOUNT'}_${chainId ?? config.defaultChain}`; -}; diff --git a/shared/transaction-modal/hooks/use-transaction-modal-stage.tsx b/shared/transaction-modal/hooks/use-transaction-modal-stage.tsx index 4403fb2ca..3a6f50da5 100644 --- a/shared/transaction-modal/hooks/use-transaction-modal-stage.tsx +++ b/shared/transaction-modal/hooks/use-transaction-modal-stage.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo, useRef } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; import { useModalActions } from 'providers/modal-provider'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { useTransactionModal, TransactionModal } from '../transaction-modal'; export type TransactionModalTransitStage = ( @@ -12,7 +12,7 @@ export type TransactionModalTransitStage = ( export const useTransactionModalStage = >( getStages: (transitStage: TransactionModalTransitStage) => S, ) => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const { openModal } = useTransactionModal(); const { closeModal } = useModalActions(); const isMountedRef = useRef(true); @@ -39,10 +39,10 @@ export const useTransactionModalStage = >( }, []); useEffect(() => { - if (!active) { + if (!isDappActive) { closeModal(TransactionModal); } - }, [active, closeModal]); + }, [isDappActive, closeModal]); return { txModalStages, diff --git a/shared/wallet/fallback/useErrorMessage.ts b/shared/wallet/fallback/useErrorMessage.ts index 887bf0865..9c37a45fd 100644 --- a/shared/wallet/fallback/useErrorMessage.ts +++ b/shared/wallet/fallback/useErrorMessage.ts @@ -2,13 +2,15 @@ import { useConnectorInfo, getUnsupportedChainError, } from 'reef-knot/core-react'; -import { helpers, useSupportedChains, useWeb3 } from 'reef-knot/web3-react'; -import { useAccount, useConfig } from 'wagmi'; +// TODO: to remove the 'reef-knot/web3-react' after it will be deprecated +import { helpers, useSupportedChains } from 'reef-knot/web3-react'; +import { useAccount, useConnect, useConfig } from 'wagmi'; export const useErrorMessage = (): string | undefined => { - const { error } = useWeb3(); const { chains } = useConfig(); const { isConnected } = useAccount(); + const { error } = useConnect(); + const { isUnsupported } = useSupportedChains(); const { isLedger } = useConnectorInfo(); diff --git a/shared/wallet/wallet-modal/wallet-modal.tsx b/shared/wallet/wallet-modal/wallet-modal.tsx index 4433fd70a..4a10a9594 100644 --- a/shared/wallet/wallet-modal/wallet-modal.tsx +++ b/shared/wallet/wallet-modal/wallet-modal.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect } from 'react'; +import { useAccount } from 'wagmi'; import { ButtonIcon, Modal, @@ -9,7 +10,6 @@ import { } from '@lidofinance/lido-ui'; import { useEtherscanOpen } from '@lido-sdk/react'; import { useConnectorInfo, useDisconnect } from 'reef-knot/core-react'; -import { useWeb3 } from 'reef-knot/web3-react'; import type { ModalComponentType } from 'providers/modal-provider'; import { useCopyToClipboard } from 'shared/hooks'; @@ -24,7 +24,7 @@ import { } from './styles'; export const WalletModal: ModalComponentType = ({ onClose, ...props }) => { - const { account } = useWeb3(); + const { address } = useAccount(); const { connectorName } = useConnectorInfo(); const { disconnect } = useDisconnect(); @@ -33,15 +33,22 @@ export const WalletModal: ModalComponentType = ({ onClose, ...props }) => { onClose?.(); }, [disconnect, onClose]); - const handleCopy = useCopyToClipboard(account ?? ''); - const handleEtherscan = useEtherscanOpen(account ?? '', 'address'); + const handleCopy = useCopyToClipboard(address ?? ''); + const handleEtherscan = useEtherscanOpen(address ?? '', 'address'); useEffect(() => { // Close the modal if a wallet was somehow disconnected while the modal was open - if (account == null || account.length === 0) { + if (address == null || address.length === 0) { onClose?.(); } - }, [account, onClose]); + }, [address, onClose]); + + useEffect(() => { + // Close the modal if a wallet was somehow disconnected while the modal was open + if (address == null || address.length === 0) { + onClose?.(); + } + }, [address, onClose]); return ( @@ -66,11 +73,11 @@ export const WalletModal: ModalComponentType = ({ onClose, ...props }) => { - +