From 9d4fa3d41a7e736c3164876cfc2d06765d251cef Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Sun, 14 Jul 2024 11:59:30 +0300 Subject: [PATCH 01/10] refactor: remove 'active' from 'useWeb3' --- .../use-version-check.ts | 8 +++---- .../stake-form-context/validation.ts | 12 +++++----- .../claim-form-context/claim-form-context.tsx | 23 ++++++++++--------- .../form/requests-list/requests-list.tsx | 13 ++++++----- .../request/form/transaction-info.tsx | 12 ++++++---- .../use-validation-context.ts | 8 +++---- .../use-unwra-form-validation-context.ts | 10 ++++---- .../hooks/use-wrap-form-validation-context.ts | 10 ++++---- features/wsteth/wrap/wrap-form/wrap-stats.tsx | 6 ++--- .../form-controller/form-controller.tsx | 10 ++++---- shared/hooks/use-staking-limit-warning.ts | 8 +++---- .../hooks/use-transaction-modal-stage.tsx | 8 +++---- 12 files changed, 67 insertions(+), 61 deletions(-) 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/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/requests-list.tsx b/features/withdrawals/claim/form/requests-list/requests-list.tsx index 47ace4b23..415b05bae 100644 --- a/features/withdrawals/claim/form/requests-list/requests-list.tsx +++ b/features/withdrawals/claim/form/requests-list/requests-list.tsx @@ -1,13 +1,14 @@ +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'; -import { useWeb3 } from 'reef-knot/web3-react'; export const RequestsList: React.FC = () => { - const { active } = useWeb3(); + const { isDappActive } = useDappStatus(); const { isLoading } = useFormState(); const { register } = useFormContext(); const { fields } = useFieldArray({ @@ -18,8 +19,8 @@ export const RequestsList: React.FC = () => { return ; } - if (!active || fields.length === 0) { - return ; + if (!isDappActive || fields.length === 0) { + return ; } return ( diff --git a/features/withdrawals/request/form/transaction-info.tsx b/features/withdrawals/request/form/transaction-info.tsx index 866b466b8..d894fbf80 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/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/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/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/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, From 6f8b1f737d606e918635e31b2bc3addfdaa038af Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Sun, 14 Jul 2024 12:26:48 +0300 Subject: [PATCH 02/10] refactor: remove 'chainId' and 'account' from 'useWeb3' --- features/stake/stake-form/use-stake.ts | 12 +++---- .../claim/form/requests-list/request-item.tsx | 4 +-- .../withdrawals/hooks/contract/useClaim.ts | 21 ++++++------ .../withdrawals/hooks/contract/useRequest.ts | 34 +++++++++---------- .../hooks/contract/useWithdrawalsContract.ts | 6 ++-- .../hooks/contract/useWithdrawalsData.ts | 6 ++-- .../withdrawals/hooks/useNftDataByTxHash.ts | 8 ++--- .../withdrawals/hooks/useWithdrawTxPrice.ts | 12 +++---- .../hooks/use-unwrap-form-processing.ts | 19 ++++++----- .../wrap/hooks/use-approve-gas-limit.tsx | 4 +-- .../wrap/hooks/use-wrap-form-processing.ts | 19 ++++++----- .../wsteth/wrap/hooks/use-wrap-gas-limit.ts | 4 +-- .../wsteth/wrap/hooks/use-wrap-tx-approve.ts | 17 ++++++---- shared/hooks/useERC20PermitSignature.ts | 18 +++++----- shared/hooks/useIsMultisig.ts | 6 ++-- shared/wallet/wallet-modal/wallet-modal.tsx | 13 +++---- 16 files changed, 103 insertions(+), 100 deletions(-) diff --git a/features/stake/stake-form/use-stake.ts b/features/stake/stake-form/use-stake.ts index 997836c81..50895cc74 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, useSTETHContractWeb3 } from '@lido-sdk/react'; @@ -31,7 +31,7 @@ type StakeOptions = { export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { const stethContractWeb3 = useSTETHContractWeb3(); - const { account, chainId } = useWeb3(); + const { address, chainId } = useAccount(); const { staticRpcProvider } = useCurrentStaticRpcProvider(); const { providerWeb3, providerRpc } = useSDK(); const { txModalStages } = useTxModalStagesStake(); @@ -44,7 +44,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'); @@ -58,7 +58,7 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { txModalStages.sign(amount); const [isMultisig, referralAddress] = await Promise.all([ - isContract(account, providerRpc), + isContract(address, providerRpc), referral ? getAddress(referral, providerRpc) : config.STAKE_FALLBACK_REFERRAL_ADDRESS, @@ -108,7 +108,7 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { ); } - const stethBalance = await stethContractWeb3.balanceOf(account); + const stethBalance = await stethContractWeb3.balanceOf(address); await onConfirm?.(); @@ -123,7 +123,7 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { }, [ chainId, - account, + address, providerWeb3, stethContractWeb3, txModalStages, 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/hooks/contract/useClaim.ts b/features/withdrawals/hooks/contract/useClaim.ts index 9cd1bcdf8..3aae1ef72 100644 --- a/features/withdrawals/hooks/contract/useClaim.ts +++ b/features/withdrawals/hooks/contract/useClaim.ts @@ -1,23 +1,24 @@ import { useCallback } from 'react'; import { BigNumber } from 'ethers'; +import invariant from 'tiny-invariant'; +import { useAccount } from 'wagmi'; + +import { useSDK } from '@lido-sdk/react'; import { useClaimData } from 'features/withdrawals/contexts/claim-data-context'; +import { RequestStatusClaimable } from 'features/withdrawals/types/request-status'; +import { useTxModalStagesClaim } from 'features/withdrawals/claim/transaction-modal-claim/use-tx-modal-stages-claim'; import { runWithTransactionLogger } from 'utils'; +import { isContract } from 'utils/isContract'; import { useWithdrawalsContract } from './useWithdrawalsContract'; -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'; type Args = { onRetry?: () => void; }; export const useClaim = ({ onRetry }: Args) => { - const { account } = useWeb3(); + const { address } = useAccount(); const { providerWeb3 } = useSDK(); const { contractWeb3 } = useWithdrawalsContract(); const { optimisticClaimRequests } = useClaimData(); @@ -28,10 +29,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), @@ -98,7 +99,7 @@ export const useClaim = ({ onRetry }: Args) => { }, [ contractWeb3, - account, + address, providerWeb3, optimisticClaimRequests, txModalStages, diff --git a/features/withdrawals/hooks/contract/useRequest.ts b/features/withdrawals/hooks/contract/useRequest.ts index 45896bd3c..bc99bc6b1 100644 --- a/features/withdrawals/hooks/contract/useRequest.ts +++ b/features/withdrawals/hooks/contract/useRequest.ts @@ -1,7 +1,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 { @@ -32,7 +31,7 @@ import { useTransactionModal } from 'shared/transaction-modal/transaction-modal' const useWithdrawalRequestMethods = () => { const { providerWeb3 } = useSDK(); const { staticRpcProvider } = useCurrentStaticRpcProvider(); - const { account, chainId, contractWeb3 } = useWithdrawalsContract(); + const { address, chainId, contractWeb3 } = useWithdrawalsContract(); const permitSteth = useCallback( async ({ @@ -43,7 +42,7 @@ const useWithdrawalRequestMethods = () => { requests: BigNumber[]; }) => { invariant(chainId, 'must have chainId'); - invariant(account, 'must have account'); + invariant(address, 'must have account'); invariant(signature, 'must have signature'); invariant(contractWeb3, 'must have contractWeb3'); @@ -78,7 +77,7 @@ const useWithdrawalRequestMethods = () => { return callback; }, - [account, chainId, contractWeb3, staticRpcProvider], + [address, chainId, contractWeb3, staticRpcProvider], ); const permitWsteth = useCallback( @@ -90,7 +89,7 @@ const useWithdrawalRequestMethods = () => { requests: BigNumber[]; }) => { invariant(chainId, 'must have chainId'); - invariant(account, 'must have account'); + invariant(address, 'must have account'); invariant(signature, 'must have signature'); invariant(contractWeb3, 'must have contractWeb3'); @@ -129,19 +128,19 @@ const useWithdrawalRequestMethods = () => { return callback; }, - [account, chainId, contractWeb3, staticRpcProvider], + [address, chainId, contractWeb3, 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 params = [requests, account] as const; + const params = [requests, address] as const; const callback = async () => { if (isMultisig) { @@ -169,24 +168,24 @@ 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 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 params = [requests, account] as const; + const params = [requests, address] as const; const callback = async () => { if (isMultisig) { const tx = await contractWeb3.populateTransaction.requestWithdrawalsWstETH( requests, - account, + address, ); return providerWeb3?.getSigner().sendUncheckedTransaction(tx); } else { @@ -207,7 +206,7 @@ const useWithdrawalRequestMethods = () => { return callback; }, - [account, chainId, contractWeb3, staticRpcProvider, providerWeb3], + [address, chainId, contractWeb3, staticRpcProvider, providerWeb3], ); return useCallback( @@ -243,8 +242,7 @@ export const useWithdrawalRequest = ({ const { chainId } = useSDK(); const withdrawalQueueAddress = getWithdrawalQueueAddress(chainId); - const { connector } = useAccount(); - const { account } = useWeb3(); + const { connector, address } = useAccount(); const { isBunker } = useWithdrawals(); const { txModalStages } = useTxModalStagesRequest(); const getRequestMethod = useWithdrawalRequestMethods(); @@ -268,7 +266,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 3f675ee89..7d2261063 100644 --- a/features/withdrawals/hooks/useNftDataByTxHash.ts +++ b/features/withdrawals/hooks/useNftDataByTxHash.ts @@ -14,15 +14,15 @@ type NFTApiData = { }; export const useNftDataByTxHash = (txHash: string | null) => { - const { contractRpc, account } = useWithdrawalsContract(); + const { contractRpc, address } = useWithdrawalsContract(); const { providerWeb3 } = useSDK(); const swrNftApiData = useLidoSWR( - account && txHash && providerWeb3 - ? ['swr:nft-data-by-tx-hash', txHash, account] + address && txHash && providerWeb3 + ? ['swr:nft-data-by-tx-hash', txHash, address] : null, async () => { - if (!txHash || !account || !providerWeb3) return null; + if (!txHash || !address || !providerWeb3) return null; const txReciept: TransactionReceipt = await providerWeb3.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/wsteth/unwrap/hooks/use-unwrap-form-processing.ts b/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts index 9b50127ae..83500152b 100644 --- a/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts +++ b/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts @@ -1,19 +1,20 @@ +import { useCallback } from 'react'; import invariant from 'tiny-invariant'; +import { useAccount } from 'wagmi'; -import { useCallback } from 'react'; import { useSDK, 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 { isContract } from 'utils/isContract'; import { runWithTransactionLogger } from 'utils'; import type { UnwrapFormInputType } from '../unwrap-form-context'; +import { useUnwrapTxProcessing } from './use-unwrap-tx-processing'; +import { useTxModalStagesUnwrap } from './use-tx-modal-stages-unwrap'; + type UseUnwrapFormProcessorArgs = { onConfirm?: () => Promise; onRetry?: () => void; @@ -23,7 +24,7 @@ export const useUnwrapFormProcessor = ({ onConfirm, onRetry, }: UseUnwrapFormProcessorArgs) => { - const { account } = useWeb3(); + const { address } = useAccount(); const { providerWeb3 } = useSDK(); const processWrapTx = useUnwrapTxProcessing(); const stETHContractRPC = useSTETHContractRPC(); @@ -34,9 +35,9 @@ export const useUnwrapFormProcessor = ({ async ({ amount }: UnwrapFormInputType) => { try { invariant(amount, 'amount should be presented'); - invariant(account, 'address should be presented'); + invariant(address, 'address should be presented'); invariant(providerWeb3, 'provider should be presented'); - const isMultisig = await isContract(account, providerWeb3); + const isMultisig = await isContract(address, providerWeb3); const willReceive = await wstETHContractRPC.getStETHByWstETH(amount); txModalStages.sign(amount, willReceive); @@ -61,7 +62,7 @@ export const useUnwrapFormProcessor = ({ ); } - const stethBalance = await stETHContractRPC.balanceOf(account); + const stethBalance = await stETHContractRPC.balanceOf(address); await onConfirm?.(); txModalStages.success(stethBalance, txHash); @@ -73,7 +74,7 @@ export const useUnwrapFormProcessor = ({ } }, [ - account, + address, onConfirm, onRetry, processWrapTx, 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 77cde9c3b..758de281d 100644 --- a/features/wsteth/wrap/hooks/use-wrap-form-processing.ts +++ b/features/wsteth/wrap/hooks/use-wrap-form-processing.ts @@ -1,10 +1,8 @@ +import { useCallback } from 'react'; import invariant from 'tiny-invariant'; +import { useAccount } from 'wagmi'; -import { useCallback } from 'react'; import { useSDK } from '@lido-sdk/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 { runWithTransactionLogger } from 'utils'; @@ -14,6 +12,9 @@ import type { WrapFormInputType, } from '../wrap-form-context'; +import { useWrapTxProcessing } from './use-wrap-tx-processing'; +import { useTxModalWrap } from './use-tx-modal-stages-wrap'; + type UseWrapFormProcessorArgs = { approvalData: WrapFormApprovalData; onConfirm?: () => Promise; @@ -25,7 +26,7 @@ export const useWrapFormProcessor = ({ onConfirm, onRetry, }: UseWrapFormProcessorArgs) => { - const { account } = useWeb3(); + const { address } = useAccount(); const { providerWeb3 } = useSDK(); const processWrapTx = useWrapTxProcessing(); const { isApprovalNeededBeforeWrap, processApproveTx } = approvalData; @@ -36,9 +37,9 @@ export const useWrapFormProcessor = ({ async ({ amount, token }: WrapFormInputType) => { try { invariant(amount, 'amount should be presented'); - invariant(account, 'address should be presented'); + invariant(address, 'address should be presented'); invariant(providerWeb3, 'provider should be presented'); - const isMultisig = await isContract(account, providerWeb3); + const isMultisig = await isContract(address, providerWeb3); const willReceive = await wstETHContractRPC.getWstETHByStETH(amount); if (isApprovalNeededBeforeWrap) { @@ -78,7 +79,7 @@ export const useWrapFormProcessor = ({ ); } - const wstethBalance = await wstETHContractRPC.balanceOf(account); + const wstethBalance = await wstETHContractRPC.balanceOf(address); await onConfirm?.(); txModalStages.success(wstethBalance, txHash); @@ -90,7 +91,7 @@ export const useWrapFormProcessor = ({ } }, [ - account, + address, providerWeb3, wstETHContractRPC, isApprovalNeededBeforeWrap, diff --git a/features/wsteth/wrap/hooks/use-wrap-gas-limit.ts b/features/wsteth/wrap/hooks/use-wrap-gas-limit.ts index 1a3573e68..da2d754f8 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 { CHAINS } from '@lido-sdk/constants'; @@ -13,7 +13,7 @@ import { applyGasLimitRatio } from 'features/stake/stake-form/utils'; 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/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/wallet/wallet-modal/wallet-modal.tsx b/shared/wallet/wallet-modal/wallet-modal.tsx index 33361423b..747e98927 100644 --- a/shared/wallet/wallet-modal/wallet-modal.tsx +++ b/shared/wallet/wallet-modal/wallet-modal.tsx @@ -1,4 +1,6 @@ import { useCallback } from 'react'; +import { useAccount } from 'wagmi'; + import { ButtonIcon, Modal, @@ -9,7 +11,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 +25,7 @@ import { } from './styles'; export const WalletModal: ModalComponentType = ({ onClose, ...props }) => { - const { account } = useWeb3(); + const { address } = useAccount(); const { connectorName } = useConnectorInfo(); const { disconnect } = useDisconnect(); @@ -33,8 +34,8 @@ 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'); return ( @@ -59,11 +60,11 @@ export const WalletModal: ModalComponentType = ({ onClose, ...props }) => { - +
From 013eb0d1d066a9d2c04c78c9796c696c8c707081 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Sun, 14 Jul 2024 12:35:14 +0300 Subject: [PATCH 03/10] refactor: remove a useWeb3Key --- features/stake/stake.tsx | 4 ++-- pages/withdrawals/[mode].tsx | 4 ++-- pages/wrap/[[...mode]].tsx | 7 ++++--- shared/hooks/use-wagmi-key.ts | 9 +++++++++ shared/hooks/useWeb3Key.ts | 10 ---------- 5 files changed, 17 insertions(+), 17 deletions(-) create mode 100644 shared/hooks/use-wagmi-key.ts delete mode 100644 shared/hooks/useWeb3Key.ts diff --git a/features/stake/stake.tsx b/features/stake/stake.tsx index bdf554b15..64a1c0791 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 { GoerliSunsetBanner } from 'shared/banners/goerli-sunset'; import { OnlyInfraRender } from 'shared/components/only-infra-render'; @@ -9,7 +9,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/pages/withdrawals/[mode].tsx b/pages/withdrawals/[mode].tsx index 54a5af0b1..a5447ddde 100644 --- a/pages/withdrawals/[mode].tsx +++ b/pages/withdrawals/[mode].tsx @@ -6,10 +6,10 @@ 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 { useWagmiKey } from 'shared/hooks/use-wagmi-key'; const Withdrawals: FC = ({ mode }) => { - const key = useWeb3Key(); + const key = useWagmiKey(); return ( = ({ mode }) => { - const key = useWeb3Key(); + const key = useWagmiKey(); return ( { + const { address, chainId } = useAccount(); + return `${address ?? 'NO_ADDRESS'}_${chainId ?? config.defaultChain}`; +}; 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}`; -}; From ab51d32bd6f9ac963208591190e1ea4c57621c46 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Sun, 14 Jul 2024 12:35:45 +0300 Subject: [PATCH 04/10] refactor(sdk-legacy provider): remove a useWeb3 --- providers/sdk-legacy.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/providers/sdk-legacy.tsx b/providers/sdk-legacy.tsx index 9c6203118..6cf3a9cfd 100644 --- a/providers/sdk-legacy.tsx +++ b/providers/sdk-legacy.tsx @@ -1,13 +1,14 @@ import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react'; -import { useSupportedChains, useWeb3 } from 'reef-knot/web3-react'; -import { useClient, useConfig } from 'wagmi'; +import { useReefKnotContext } from 'reef-knot/core-react'; +import { useSupportedChains } from 'reef-knot/web3-react'; +import { useAccount, useClient, useConfig } from 'wagmi'; +import { mainnet } from 'wagmi/chains'; import { Web3Provider } from '@ethersproject/providers'; import { ProviderSDK } from '@lido-sdk/react'; - -import { mainnet } from 'wagmi/chains'; import { getStaticRpcBatchProvider } from '@lido-sdk/providers'; -import { useReefKnotContext } from 'reef-knot/core-react'; + +import { useDappStatus } from 'shared/hooks/use-dapp-status'; const POLLING_INTERVAL = 12_000; @@ -21,8 +22,9 @@ export const SDKLegacyProvider = ({ defaultChainId, pollingInterval = POLLING_INTERVAL, }: SDKLegacyProviderProps) => { - 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(); @@ -42,7 +44,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(); @@ -67,7 +69,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), @@ -75,10 +77,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, POLLING_INTERVAL), @@ -104,7 +106,7 @@ export const SDKLegacyProvider = ({ providerWeb3={providerWeb3} providerRpc={providerRpc} providerMainnetRpc={providerMainnetRpc} - account={account ?? undefined} + account={address ?? undefined} > {children} From 789ea0d31f5adc78f57d9bbd39d1f37e05e17a31 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Mon, 15 Jul 2024 09:56:18 +0300 Subject: [PATCH 05/10] refactor: get error connect from wagmi --- shared/wallet/fallback/useErrorMessage.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/shared/wallet/fallback/useErrorMessage.ts b/shared/wallet/fallback/useErrorMessage.ts index 887bf0865..62d17ccd8 100644 --- a/shared/wallet/fallback/useErrorMessage.ts +++ b/shared/wallet/fallback/useErrorMessage.ts @@ -2,13 +2,14 @@ import { useConnectorInfo, getUnsupportedChainError, } from 'reef-knot/core-react'; -import { helpers, useSupportedChains, useWeb3 } from 'reef-knot/web3-react'; -import { useAccount, useConfig } from 'wagmi'; +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(); From c9064bc3d69483d490c424ecb8cbf8e8a354bbe5 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Tue, 16 Jul 2024 14:42:34 +0300 Subject: [PATCH 06/10] docs: add todo --- providers/sdk-legacy.tsx | 1 + shared/wallet/fallback/useErrorMessage.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/providers/sdk-legacy.tsx b/providers/sdk-legacy.tsx index 6cf3a9cfd..b25bb4453 100644 --- a/providers/sdk-legacy.tsx +++ b/providers/sdk-legacy.tsx @@ -1,5 +1,6 @@ import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react'; import { useReefKnotContext } from 'reef-knot/core-react'; +// TODO: to remove the 'reef-knot/web3-react' after it will be deprecated import { useSupportedChains } from 'reef-knot/web3-react'; import { useAccount, useClient, useConfig } from 'wagmi'; import { mainnet } from 'wagmi/chains'; diff --git a/shared/wallet/fallback/useErrorMessage.ts b/shared/wallet/fallback/useErrorMessage.ts index 62d17ccd8..9c37a45fd 100644 --- a/shared/wallet/fallback/useErrorMessage.ts +++ b/shared/wallet/fallback/useErrorMessage.ts @@ -2,6 +2,7 @@ import { useConnectorInfo, getUnsupportedChainError, } from 'reef-knot/core-react'; +// 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'; From f6757b6117d4dd628fae0803f0931743053d8187 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Tue, 16 Jul 2024 15:02:36 +0300 Subject: [PATCH 07/10] fix: use address from wagmi --- shared/wallet/wallet-modal/wallet-modal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/shared/wallet/wallet-modal/wallet-modal.tsx b/shared/wallet/wallet-modal/wallet-modal.tsx index 64bebaa24..bdb8a4bc9 100644 --- a/shared/wallet/wallet-modal/wallet-modal.tsx +++ b/shared/wallet/wallet-modal/wallet-modal.tsx @@ -39,10 +39,10 @@ export const WalletModal: ModalComponentType = ({ onClose, ...props }) => { 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]); return ( From 357872b7e1a508bcdcdb65ff3e364be80cf53298 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 19 Jul 2024 14:45:06 +0300 Subject: [PATCH 08/10] fix: after resolve conflicts --- shared/wallet/wallet-modal/wallet-modal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/shared/wallet/wallet-modal/wallet-modal.tsx b/shared/wallet/wallet-modal/wallet-modal.tsx index a11fe0d2e..4a10a9594 100644 --- a/shared/wallet/wallet-modal/wallet-modal.tsx +++ b/shared/wallet/wallet-modal/wallet-modal.tsx @@ -45,10 +45,10 @@ export const WalletModal: ModalComponentType = ({ onClose, ...props }) => { 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]); return ( From 7af2cbd3a36580a516a87a953e11e2a8a8aba1dc Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 8 Aug 2024 10:51:18 +0300 Subject: [PATCH 09/10] fix: tests (temply) --- test/smoke.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/smoke.spec.ts b/test/smoke.spec.ts index 3f2d2a83c..9a65dff84 100644 --- a/test/smoke.spec.ts +++ b/test/smoke.spec.ts @@ -19,7 +19,7 @@ test.describe('Smoke GET', () => { const resp = await request.get(element.uri); if (element.isDeprecated) { - expect([299, 410]).toContain(resp.status()); + expect([200, 299, 410]).toContain(resp.status()); if (resp.status() === 299) { expect(resp.headers()).toHaveProperty('warning'); expect(resp.headers()).toHaveProperty('deprecation'); From 98c9c9eddca04453ad863e70b99f5c639352974f Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Tue, 3 Sep 2024 18:04:14 +0300 Subject: [PATCH 10/10] fix: fix after develop merge --- features/withdrawals/hooks/useNftDataByTxHash.ts | 2 +- features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts | 2 +- features/wsteth/wrap/hooks/use-wrap-form-processing.ts | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/features/withdrawals/hooks/useNftDataByTxHash.ts b/features/withdrawals/hooks/useNftDataByTxHash.ts index 15b7bc4fd..bbfd4ebaf 100644 --- a/features/withdrawals/hooks/useNftDataByTxHash.ts +++ b/features/withdrawals/hooks/useNftDataByTxHash.ts @@ -18,7 +18,7 @@ export const useNftDataByTxHash = (txHash: string | null) => { 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 || !address) return null; diff --git a/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts b/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts index 1dccf9972..6baad8398 100644 --- a/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts +++ b/features/wsteth/unwrap/hooks/use-unwrap-form-processing.ts @@ -33,7 +33,7 @@ export const useUnwrapFormProcessor = ({ try { invariant(amount, 'amount should be presented'); invariant(address, 'address should be presented'); - const isMultisig = await isContract(account, staticRpcProvider); + const isMultisig = await isContract(address, staticRpcProvider); const willReceive = await wstETHContractRPC.getStETHByWstETH(amount); txModalStages.sign(amount, willReceive); diff --git a/features/wsteth/wrap/hooks/use-wrap-form-processing.ts b/features/wsteth/wrap/hooks/use-wrap-form-processing.ts index 0e79906eb..e9e091728 100644 --- a/features/wsteth/wrap/hooks/use-wrap-form-processing.ts +++ b/features/wsteth/wrap/hooks/use-wrap-form-processing.ts @@ -2,7 +2,6 @@ import { useCallback } from 'react'; import invariant from 'tiny-invariant'; import { useAccount } from 'wagmi'; -import { useSDK } from '@lido-sdk/react'; import { useWSTETHContractRPC } from '@lido-sdk/react'; import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; @@ -39,7 +38,7 @@ export const useWrapFormProcessor = ({ try { invariant(amount, 'amount should be presented'); invariant(address, 'address should be presented'); - const isMultisig = await isContract(account, staticRpcProvider); + const isMultisig = await isContract(address, staticRpcProvider); const willReceive = await wstETHContractRPC.getWstETHByStETH(amount); if (isApprovalNeededBeforeWrap) {