feat: disabled forms for unsupported chains

lidofinance · Jul 5, 2024 · 10b6636 · 10b6636
1 parent 9b53b69
commit 10b6636
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 7 deletions.
diff --git a/features/withdrawals/request/form/controls/token-amount-input-request.tsx b/features/withdrawals/request/form/controls/token-amount-input-request.tsx
@@ -1,16 +1,19 @@
 import { useController, useWatch } from 'react-hook-form';
+import { useWeb3 } from 'reef-knot/web3-react';
 
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
-import { trackMatomoEvent } from 'utils/track-matomo-event';
-import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form';
 import { InputDecoratorTvlStake } from 'features/withdrawals/shared/input-decorator-tvl-stake';
 import {
   RequestFormInputType,
   useRequestFormData,
 } from 'features/withdrawals/request/request-form-context';
 import { useTvlMessage } from 'features/withdrawals/hooks/useTvlMessage';
 
+import { trackMatomoEvent } from 'utils/track-matomo-event';
+import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form';
+
 export const TokenAmountInputRequest = () => {
+  const { active } = useWeb3();
   const token = useWatch<RequestFormInputType, 'token'>({ name: 'token' });
   const { maxAmount, isTokenLocked } = useRequestFormData();
 
@@ -24,6 +27,7 @@ export const TokenAmountInputRequest = () => {
 
   return (
     <TokenAmountInputHookForm
+      disabled={!active}
       fieldName="amount"
       data-testid="requestInput"
       token={token}

diff --git a/features/withdrawals/request/form/controls/token-select-request.tsx b/features/withdrawals/request/form/controls/token-select-request.tsx
@@ -1,3 +1,4 @@
+import { useWeb3 } from 'reef-knot/web3-react';
 import {
   TOKENS,
   TokenOption,
@@ -10,5 +11,7 @@ const OPTIONS: TokenOption[] = [
 ];
 
 export const TokenSelectRequest = () => {
-  return <TokenSelectHookForm options={OPTIONS} />;
+  const { active } = useWeb3();
+
+  return <TokenSelectHookForm disabled={!active} options={OPTIONS} />;
 };
diff --git a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx
@@ -1,14 +1,17 @@
-import { useUnwrapFormData } from '../unwrap-form-context';
-
 import { Wsteth } from '@lidofinance/lido-ui';
-import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form';
 import { TOKENS } from '@lido-sdk/constants';
+import { useWeb3 } from 'reef-knot/web3-react';
+
+import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form';
+import { useUnwrapFormData } from '../unwrap-form-context';
 
 export const TokenAmountInputUnwrap = () => {
+  const { active } = useWeb3();
   const { maxAmount } = useUnwrapFormData();
 
   return (
     <TokenAmountInputHookForm
+      disabled={!active}
       fieldName="amount"
       token={TOKENS.WSTETH}
       data-testid="unwrapInput"

diff --git a/features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx b/features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx
@@ -1,19 +1,23 @@
 import { useWatch } from 'react-hook-form';
-import { useWrapFormData, WrapFormInputType } from '../wrap-form-context';
+import { useWeb3 } from 'reef-knot/web3-react';
 
 import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form';
 
+import { useWrapFormData, WrapFormInputType } from '../wrap-form-context';
+
 type TokenAmountInputWrapProps = Pick<
   React.ComponentProps<typeof TokenAmountInputHookForm>,
   'warning'
 >;
 
 export const TokenAmountInputWrap = (props: TokenAmountInputWrapProps) => {
+  const { active } = useWeb3();
   const token = useWatch<WrapFormInputType, 'token'>({ name: 'token' });
   const { maxAmount, isApprovalNeededBeforeWrap } = useWrapFormData();
 
   return (
     <TokenAmountInputHookForm
+      disabled={!active}
       fieldName="amount"
       token={token}
       data-testid="wrapInput"

diff --git a/features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx b/features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx
@@ -1,4 +1,6 @@
 import { trackEvent } from '@lidofinance/analytics-matomo';
+import { useWeb3 } from 'reef-knot/web3-react';
+
 import { TOKENS_TO_WRAP } from 'features/wsteth/shared/types';
 import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
 import { TokenSelectHookForm } from 'shared/hook-form/controls/token-select-hook-form';
@@ -20,8 +22,11 @@ type TokenSelectWrapProps = Pick<
 >;
 
 export const TokenSelectWrap = (props: TokenSelectWrapProps) => {
+  const { active } = useWeb3();
+
   return (
     <TokenSelectHookForm
+      disabled={!active}
       options={OPTIONS}
       onChange={(value) => {
         trackEvent(

diff --git a/shared/hook-form/controls/token-select-hook-form.tsx b/shared/hook-form/controls/token-select-hook-form.tsx
@@ -47,6 +47,7 @@ export const TokenSelectHookForm = ({
   errorField = 'amount',
   onChange,
   warning,
+  disabled = false,
 }: TokenSelectHookFormProps) => {
   const { field } = useController<Record<string, TOKENS>>({ name: fieldName });
   const { setValue, clearErrors } = useFormContext();
@@ -58,6 +59,7 @@ export const TokenSelectHookForm = ({
   return (
     <SelectIcon
       {...field}
+      disabled={disabled}
       warning={warning}
       icon={iconsMap[field.value]}
       data-testid="drop-down"