fix: various issues picked up from testing (#1414)

interlay · Jul 5, 2023 · 5583d92 · 5583d92 · vercel · Jul 5, 2023
1 parent cba46c5
commit 5583d92
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 33 deletions.
diff --git a/src/component-library/Modal/ModalWrapper.tsx b/src/component-library/Modal/ModalWrapper.tsx
@@ -3,7 +3,7 @@ import { mergeProps } from '@react-aria/utils';
 import { OverlayTriggerState } from '@react-stately/overlays';
 import { forwardRef, ReactNode, RefObject } from 'react';
 
-import { Underlay } from '../Overlay';
+import { Underlay } from '../Overlay/Underlay';
 import { StyledModal, StyledWrapper } from './Modal.style';
 
 type Props = {

diff --git a/src/lib/form/use-form.tsx b/src/lib/form/use-form.tsx
@@ -3,15 +3,25 @@ import { FieldInputProps, FormikConfig, FormikErrors as FormErrors, FormikValues
 import { FocusEvent, Key, useCallback } from 'react';
 import { useDebounce } from 'react-use';
 
+const getFieldName = (nameOrOptions: any) => {
+  const isOptions = nameOrOptions !== null && typeof nameOrOptions === 'object';
+  return isOptions ? nameOrOptions.name : nameOrOptions;
+};
+
 type GetFieldProps = (
   nameOrOptions: any,
   hideErrorMessage?: boolean,
   hideUntouchedError?: boolean
 ) => FieldInputProps<any> & {
   errorMessage?: string | string[];
-  onSelectionChange: (key: Key) => void;
 };
 
+type GetSelectFieldProps = (
+  nameOrOptions: any,
+  hideErrorMessage?: boolean,
+  hideUntouchedError?: boolean
+) => Omit<ReturnType<GetFieldProps>, 'onChange'> & { onSelectionChange?: (key: Key) => void };
+
 type UseFormArgs<Values extends FormikValues = FormikValues> = FormikConfig<Values> & {
   hideErrorMessages?: boolean;
   onComplete?: (form: Values) => void;
@@ -77,16 +87,7 @@ const useForm = <Values extends FormikValues = FormikValues>({
   const getFieldProps: GetFieldProps = useCallback(
     (nameOrOptions: any, hideErrorMessage?: boolean, hideUntouchedError?: boolean) => {
       const fieldProps = getFormikFieldProps(nameOrOptions);
-
-      const isOptions = nameOrOptions !== null && typeof nameOrOptions === 'object';
-      const fieldName = isOptions ? nameOrOptions.name : nameOrOptions;
-
-      const customFieldProps = {
-        ...fieldProps,
-        onSelectionChange: (key: Key) => {
-          setFieldValue(fieldName, key, true);
-        }
-      };
+      const fieldName = getFieldName(nameOrOptions);
 
       // Asses if error message is going to be omitted, but validation still takes place (approach used in swap due to custom error messages)
       const hideError = hideErrorMessage || hideErrorMessages;
@@ -103,21 +104,38 @@ const useForm = <Values extends FormikValues = FormikValues>({
           : formik.errors[fieldName];
 
         return {
-          ...customFieldProps,
+          ...fieldProps,
           onBlur: chain(fieldProps.onBlur, (e: FocusEvent<unknown>) => handleBlur(e, fieldName, isTouched as boolean)),
           errorMessage: errorMessage as string | string[] | undefined
         };
       }
 
-      return customFieldProps;
+      return fieldProps;
+    },
+    [getFormikFieldProps, hideErrorMessages, formik.touched, formik.errors, handleBlur]
+  );
+
+  const getSelectFieldProps: GetSelectFieldProps = useCallback(
+    (nameOrOptions: any, hideErrorMessage?: boolean, hideUntouchedError?: boolean) => {
+      const props = getFieldProps(nameOrOptions, hideErrorMessage, hideUntouchedError);
+      const fieldName = getFieldName(nameOrOptions);
+
+      return {
+        ...props,
+        onSelectionChange: (key: Key) => {
+          setFieldValue(fieldName, key, true);
+        },
+        onChange: undefined
+      };
     },
-    [getFormikFieldProps, hideErrorMessages, formik.touched, formik.errors, setFieldValue, handleBlur]
+    [getFieldProps, setFieldValue]
   );
 
   return {
     values,
     validateForm,
     getFieldProps,
+    getSelectFieldProps,
     setFieldTouched,
     setFieldValue,
     ...formik

diff --git a/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx b/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx
@@ -68,9 +68,11 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps)
 
   // Doing this call on mount so that the form becomes dirty
   useEffect(() => {
+    if (!isOpen) return;
+
     form.setFieldValue(POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isOpen]);
 
   const handleCloseModal = () => setOpen(false);
 

diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx b/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx
@@ -304,7 +304,7 @@ const SwapForm = ({
                   balance={inputBalance?.toString() || 0}
                   humanBalance={inputBalance?.toHuman() || 0}
                   valueUSD={inputAmountUSD}
-                  selectProps={mergeProps(form.getFieldProps(SWAP_INPUT_TOKEN_FIELD, true), {
+                  selectProps={mergeProps(form.getSelectFieldProps(SWAP_INPUT_TOKEN_FIELD, true), {
                     onSelectionChange: (ticker: Key) => handleTickerChange(ticker as string, SWAP_INPUT_TOKEN_FIELD),
                     items: selectItems
                   })}
@@ -319,7 +319,7 @@ const SwapForm = ({
                   humanBalance={outputBalance?.toHuman() || 0}
                   valueUSD={outputAmountUSD}
                   value={trade?.outputAmount.toString() || ''}
-                  selectProps={mergeProps(form.getFieldProps(SWAP_OUTPUT_TOKEN_FIELD, true), {
+                  selectProps={mergeProps(form.getSelectFieldProps(SWAP_OUTPUT_TOKEN_FIELD, true), {
                     onSelectionChange: (ticker: Key) => handleTickerChange(ticker as string, SWAP_OUTPUT_TOKEN_FIELD),
                     items: selectItems
                   })}
@@ -329,7 +329,7 @@ const SwapForm = ({
                 {trade && <SwapInfo trade={trade} slippage={Number(slippage)} />}
                 <TransactionFeeDetails
                   {...transaction.fee.detailsProps}
-                  selectProps={form.getFieldProps(SWAP_FEE_TOKEN_FIELD)}
+                  selectProps={form.getSelectFieldProps(SWAP_FEE_TOKEN_FIELD)}
                 />
               </Flex>
               <SwapCTA trade={trade} fee={transaction.fee} form={form} pair={pair} />

diff --git a/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.tsx b/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.tsx
@@ -258,7 +258,7 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX.
                   onChange: handleToggleCustomVault
                 })}
                 selectProps={{
-                  ...mergeProps(form.getFieldProps(BRIDGE_ISSUE_CUSTOM_VAULT_FIELD, false, true), {
+                  ...mergeProps(form.getSelectFieldProps(BRIDGE_ISSUE_CUSTOM_VAULT_FIELD, false, true), {
                     onSelectionChange: handleVaultSelectionChange
                   })
                 }}
@@ -271,11 +271,11 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX.
                 totalTicker={WRAPPED_TOKEN.ticker}
                 bridgeFee={bridgeFee}
                 securityDeposit={securityDeposit}
-                securityDepositSelectProps={form.getFieldProps(BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN, true)}
+                securityDepositSelectProps={form.getSelectFieldProps(BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN, true)}
                 showInsufficientSecurityBalance={!hasEnoughGriefingCollateralBalance}
                 feeDetailsProps={{
                   ...transaction.fee.detailsProps,
-                  selectProps: form.getFieldProps(BRIDGE_ISSUE_FEE_TOKEN, true)
+                  selectProps: form.getSelectFieldProps(BRIDGE_ISSUE_FEE_TOKEN, true)
                 }}
               />
               <AuthCTA type='submit' disabled={isBtnDisabled} size='large' loading={transaction.isLoading}>

diff --git a/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.tsx b/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.tsx
@@ -294,7 +294,7 @@ const RedeemForm = ({
                   onChange: handleToggleCustomVault
                 })}
                 selectProps={{
-                  ...mergeProps(form.getFieldProps(BRIDGE_REDEEM_CUSTOM_VAULT_FIELD, false, true), {
+                  ...mergeProps(form.getSelectFieldProps(BRIDGE_REDEEM_CUSTOM_VAULT_FIELD, false, true), {
                     onSelectionChange: handleVaultSelectionChange
                   })
                 }}
@@ -317,7 +317,7 @@ const RedeemForm = ({
                 bitcoinNetworkFee={currentInclusionFee}
                 feeDetailsProps={{
                   ...transaction.fee.detailsProps,
-                  selectProps: form.getFieldProps(BRIDGE_REDEEM_FEE_TOKEN, true)
+                  selectProps: form.getSelectFieldProps(BRIDGE_REDEEM_FEE_TOKEN, true)
                 }}
               />
               <AuthCTA type='submit' disabled={isBtnDisabled} size='large' loading={transaction.isLoading}>

diff --git a/...pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx b/...pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx
@@ -220,15 +220,15 @@ const CrossChainTransferForm = (): JSX.Element => {
           <StyledSourceChainSelect
             label='Source Chain'
             items={originatingChains}
-            {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_FROM_FIELD, false), {
+            {...mergeProps(form.getSelectFieldProps(CROSS_CHAIN_TRANSFER_FROM_FIELD, false), {
               onSelectionChange: (key: Key) => handleOriginatingChainChange(key as ChainName)
             })}
           />
           <StyledArrowRightCircle color='secondary' strokeWidth={2} />
           <ChainSelect
             label='Destination Chain'
             items={destinationChains}
-            {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_TO_FIELD, false), {
+            {...mergeProps(form.getSelectFieldProps(CROSS_CHAIN_TRANSFER_TO_FIELD, false), {
               onSelectionChange: (key: Key) => handleDestinationChainChange(key as ChainName)
             })}
           />
@@ -240,7 +240,7 @@ const CrossChainTransferForm = (): JSX.Element => {
             balance={currentToken?.balance.toString() || 0}
             humanBalance={currentToken?.balance.toString() || 0}
             valueUSD={valueUSD || 0}
-            selectProps={mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_TOKEN_FIELD), {
+            selectProps={mergeProps(form.getSelectFieldProps(CROSS_CHAIN_TRANSFER_TOKEN_FIELD), {
               onSelectionChange: (ticker: Key) =>
                 handleTickerChange(ticker as string, CROSS_CHAIN_TRANSFER_TOKEN_FIELD),
               items: transferableTokens
@@ -251,7 +251,7 @@ const CrossChainTransferForm = (): JSX.Element => {
         <AccountSelect
           label='Destination'
           accounts={accounts}
-          {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, false), {
+          {...mergeProps(form.getSelectFieldProps(CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, false), {
             onChange: handleDestinationAccountChange
           })}
         />

diff --git a/src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx b/src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx
@@ -131,7 +131,7 @@ const TransferForm = (): JSX.Element => {
               balance={transferTokenBalance?.toString() || 0}
               humanBalance={transferTokenBalance?.toHuman() || 0}
               valueUSD={transferAmountUSD}
-              selectProps={mergeProps(form.getFieldProps(TRANSFER_TOKEN_FIELD, true), {
+              selectProps={mergeProps(form.getSelectFieldProps(TRANSFER_TOKEN_FIELD, true), {
                 onSelectionChange: (ticker: Key) => handleTickerChange(ticker as string, TRANSFER_TOKEN_FIELD),
                 items: selectItems
               })}
@@ -147,7 +147,7 @@ const TransferForm = (): JSX.Element => {
           <Flex direction='column' gap='spacing4'>
             <TransactionFeeDetails
               {...transaction.fee.detailsProps}
-              selectProps={form.getFieldProps(TRANSFER_FEE_TOKEN_FIELD)}
+              selectProps={form.getSelectFieldProps(TRANSFER_FEE_TOKEN_FIELD)}
             />
             <AuthCTA type='submit' disabled={isBtnDisabled} size='large' loading={transaction.isLoading}>
               Transfer

diff --git a/src/utils/hooks/api/oracle/use-get-oracle-currencies.ts b/src/utils/hooks/api/oracle/use-get-oracle-currencies.ts
@@ -26,13 +26,19 @@ interface UseGetOracleCurrenciesResult {
   data: Array<CurrencyExt> | undefined;
 }
 
-const useGetOracleCurrencies = (): UseGetOracleCurrenciesResult => {
+type UseGetOracleCurrenciesProps = {
+  enabled?: boolean;
+};
+
+const useGetOracleCurrencies = ({
+  enabled = true
+}: UseGetOracleCurrenciesProps | undefined = {}): UseGetOracleCurrenciesResult => {
   const { getCurrencyFromIdPrimitive, isLoading: isLoadingCurrencies } = useGetCurrencies(true);
 
   const { data } = useQuery({
     queryKey: 'getOracleCurrencies',
     queryFn: getOracleCurrencies(getCurrencyFromIdPrimitive),
-    enabled: !isLoadingCurrencies
+    enabled: enabled && !isLoadingCurrencies
   });
 
   return { data };

diff --git a/src/utils/hooks/api/use-get-dex-volume.tsx b/src/utils/hooks/api/use-get-dex-volume.tsx
@@ -3,6 +3,7 @@ import { MonetaryAmount } from '@interlay/monetary-js';
 import { subDays } from 'date-fns';
 import { gql, GraphQLClient } from 'graphql-request';
 import { useCallback } from 'react';
+import { useErrorHandler } from 'react-error-boundary';
 import { useQuery, UseQueryResult } from 'react-query';
 
 import { convertMonetaryAmountToValueInUSD } from '@/common/utils/utils';
@@ -154,6 +155,8 @@ const useGetDexVolumes = (range: DateRangeVolume): UseGetCurrenciesResult => {
     [getDexVolumeByTicker]
   );
 
+  useErrorHandler(queryResult.error);
+
   return { ...queryResult, getDexTotalVolumeUSD, getDexVolumeByTicker };
 };
 

diff --git a/src/utils/hooks/use-select-currency.tsx b/src/utils/hooks/use-select-currency.tsx
@@ -46,7 +46,9 @@ const useSelectCurrency = (filter?: SelectCurrencyFilter): SelectCurrencyResult
   const prices = useGetPrices();
 
   const { data: pools } = useGetLiquidityPools();
-  const { data: oracleCurrencies } = useGetOracleCurrencies();
+  const { data: oracleCurrencies } = useGetOracleCurrencies({
+    enabled: filter === SelectCurrencyFilter.ISSUE_GRIEFING_COLLATERAL_CURRENCY
+  });
 
   const filteredCurrencies = useMemo(() => {
     if (!currencies) {