844: Fixed contract errors when switching wallets

src/components/@widgets/MakeWidget/MakeWidget.styles.tsx

@@ -5,6 +5,7 @@ import { SelectLabel } from "../../../styled-components/Select/Select";
 import Tooltip from "../../SwapInputs/subcomponents/Tooltip/Tooltip";
 import ActionButtons from "./subcomponents/ActionButtons/ActionButtons";
 import AddressInput from "./subcomponents/AddressInput/AddressInput";
+import InfoSection from "./subcomponents/InfoSection/InfoSection";
 import InputSection from "./subcomponents/InputSection/InputSection";
 import OrderTypeSelector from "./subcomponents/OrderTypeSelector/OrderTypeSelector";
 import { RateField } from "./subcomponents/RateField/RateField";
@@ -64,6 +65,14 @@ export const StyledAddressInput = styled(AddressInput)`
 
 export const StyledActionButtons = styled(ActionButtons)``;
 
+export const StyledInfoSection = styled(InfoSection)`
+  flex-grow: 1;
+
+  & + ${StyledActionButtons} {
+    margin-top: 1rem;
+  }
+`;
+
 export const StyledTooltip = styled(Tooltip)`
   position: absolute;
   right: 0;

src/components/@widgets/MakeWidget/MakeWidget.tsx

@@ -41,11 +41,13 @@ import switchToDefaultChain from "../../../helpers/switchToDefaultChain";
 import toMaxAllowedDecimalsNumberString from "../../../helpers/toMaxAllowedDecimalsNumberString";
 import toRoundedNumberString from "../../../helpers/toRoundedNumberString";
 import useAllowance from "../../../hooks/useAllowance";
+import useAllowancesOrBalancesFailed from "../../../hooks/useAllowancesOrBalancesFailed";
 import useApprovalPending from "../../../hooks/useApprovalPending";
 import useDepositPending from "../../../hooks/useDepositPending";
 import useInsufficientBalance from "../../../hooks/useInsufficientBalance";
 import useMaxAmount from "../../../hooks/useMaxAmount";
 import useNativeWrappedToken from "../../../hooks/useNativeWrappedToken";
+import useNetworkSupported from "../../../hooks/useNetworkSupported";
 import useShouldDepositNativeToken from "../../../hooks/useShouldDepositNativeTokenAmount";
 import useTokenInfo from "../../../hooks/useTokenInfo";
 import useValidAddress from "../../../hooks/useValidAddress";
@@ -67,6 +69,7 @@ import {
   OrderTypeSelectorAndRateFieldWrapper,
   StyledActionButtons,
   StyledAddressInput,
+  StyledInfoSection,
   StyledOrderTypeSelector,
   StyledRateField,
   StyledTooltip,
@@ -156,6 +159,8 @@ const MakeWidget: FC = () => {
   const shouldDepositNativeToken = !!shouldDepositNativeTokenAmount;
   const hasDepositPending = useDepositPending();
   const isValidAddress = useValidAddress(takerAddress);
+  const isAllowancesOrBalancesFailed = useAllowancesOrBalancesFailed();
+  const isNetworkSupported = useNetworkSupported();
 
   // Modal states
   const { setShowWalletList } = useContext(InterfaceContext);
@@ -433,8 +438,8 @@ const MakeWidget: FC = () => {
       />
       <SwapInputs
         canSetQuoteAmount
-        disabled={!isActive}
-        readOnly={!isActive}
+        disabled={!isActive || isAllowancesOrBalancesFailed}
+        readOnly={!isActive || !isNetworkSupported}
         showMaxButton={showMaxButton}
         showMaxInfoButton={showMaxInfoButton}
         baseAmount={makerAmount}
@@ -487,6 +492,11 @@ const MakeWidget: FC = () => {
         </TooltipContainer>
       )}
 
+      <StyledInfoSection
+        isAllowancesFailed={isAllowancesOrBalancesFailed}
+        isNetworkUnsupported={!isNetworkSupported}
+      />
+
       <StyledActionButtons
         hasInsufficientExpiry={expiry === 0}
         hasInsufficientAllowance={!hasSufficientAllowance}
@@ -497,8 +507,9 @@ const MakeWidget: FC = () => {
         hasMissingMakerToken={!makerTokenInfo}
         hasMissingTakerAmount={hasMissingTakerAmount}
         hasMissingTakerToken={!takerTokenInfo}
-        isNetworkUnsupported={false}
+        isNetworkUnsupported={!isNetworkSupported}
         shouldDepositNativeToken={shouldDepositNativeToken}
+        shouldRefresh={isAllowancesOrBalancesFailed}
         walletIsNotConnected={!isActive}
         makerTokenSymbol={makerTokenInfo?.symbol}
         onBackButtonClick={handleBackButtonClick}

src/components/@widgets/MakeWidget/helpers/index.ts

@@ -14,6 +14,7 @@ export const getActionButtonTranslation = (
   hasMissingTakerToken: boolean,
   networkIsUnsupported: boolean,
   shouldDepositNativeToken: boolean,
+  shouldRefresh: boolean,
   walletIsNotConnected: boolean,
   makerTokenSymbol?: string
 ): string => {
@@ -22,7 +23,11 @@ export const getActionButtonTranslation = (
   }
 
   if (networkIsUnsupported) {
-    return i18n.t("wallet.unsupportedNetwork");
+    return i18n.t("wallet.switchNetwork");
+  }
+
+  if (shouldRefresh) {
+    return i18n.t("common.reloadPage");
   }
 
   if (hasInsufficientExpiry) {

src/components/@widgets/MakeWidget/subcomponents/ActionButtons/ActionButtons.tsx

@@ -23,6 +23,7 @@ type ActionButtonsProps = {
   hasMissingTakerToken: boolean;
   isNetworkUnsupported: boolean;
   shouldDepositNativeToken: boolean;
+  shouldRefresh: boolean;
   walletIsNotConnected: boolean;
   makerTokenSymbol?: string;
   takerTokenSymbol?: string;
@@ -41,6 +42,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
   hasMissingTakerToken,
   isNetworkUnsupported,
   shouldDepositNativeToken,
+  shouldRefresh,
   walletIsNotConnected,
   makerTokenSymbol,
   onBackButtonClick,
@@ -57,6 +59,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
       hasMissingTakerAmount ||
       hasMissingTakerToken) &&
     !walletIsNotConnected &&
+    !shouldRefresh &&
     !isNetworkUnsupported;
 
   const buttonText = getActionButtonTranslation(
@@ -69,6 +72,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
     hasMissingTakerToken,
     isNetworkUnsupported,
     shouldDepositNativeToken,
+    shouldRefresh,
     walletIsNotConnected,
     makerTokenSymbol
   );

src/components/@widgets/MakeWidget/subcomponents/InfoSection/InfoSection.styles.tsx

@@ -0,0 +1,10 @@
+import styled from "styled-components/macro";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: center;
+`;

src/components/@widgets/MakeWidget/subcomponents/InfoSection/InfoSection.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+  StyledInfoHeading,
+  StyledInfoSubHeading,
+} from "../../../../Typography/Typography.styles";
+import { Container } from "./InfoSection.styles";
+
+type ActionButtonsProps = {
+  isAllowancesFailed: boolean;
+  isNetworkUnsupported: boolean;
+  className?: string;
+};
+
+const InfoSection: FC<ActionButtonsProps> = ({
+  isAllowancesFailed,
+  isNetworkUnsupported,
+  className,
+}) => {
+  const { t } = useTranslation();
+
+  if (isNetworkUnsupported) {
+    return (
+      <Container className={className}>
+        <StyledInfoHeading>{t("wallet.unsupportedNetwork")}</StyledInfoHeading>
+      </Container>
+    );
+  }
+
+  if (isAllowancesFailed) {
+    return (
+      <Container className={className}>
+        <StyledInfoHeading>
+          {t("balances.failedToFetchAllowances")}
+        </StyledInfoHeading>
+        <StyledInfoSubHeading>
+          {t("balances.failedToFetchAllowancesCta")}
+        </StyledInfoSubHeading>
+      </Container>
+    );
+  }
+
+  return null;
+};
+
+export default InfoSection;

src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx

@@ -32,6 +32,7 @@ import {
 } from "../../../features/takeOtc/takeOtcSlice";
 import { compareAddresses } from "../../../helpers/string";
 import useAllowance from "../../../hooks/useAllowance";
+import useAllowancesOrBalancesFailed from "../../../hooks/useAllowancesOrBalancesFailed";
 import useApprovalPending from "../../../hooks/useApprovalPending";
 import useDepositPending from "../../../hooks/useDepositPending";
 import useInsufficientBalance from "../../../hooks/useInsufficientBalance";
@@ -86,11 +87,13 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
   const params = useParams<{ compressedOrder: string }>();
   const { setShowWalletList, setTransactionsTabIsOpen } =
     useContext(InterfaceContext);
+
   const ordersStatus = useAppSelector(selectOrdersStatus);
   const ordersErrors = useAppSelector(selectOrdersErrors);
   const takeOtcErrors = useAppSelector(selectTakeOtcErrors);
   const { userOrders } = useAppSelector(selectMyOrdersReducer);
   const { indexerUrls } = useAppSelector(selectIndexerReducer);
+
   const errors = [...ordersErrors, ...takeOtcErrors];
 
   const [state, setState] = useState<OrderDetailWidgetState>(
@@ -135,6 +138,7 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
     senderToken?.address,
     senderAmount
   );
+  const isAllowancesOrBalancesFailed = useAllowancesOrBalancesFailed();
   const shouldDepositNativeToken = !!shouldDepositNativeTokenAmount;
   const hasDepositPending = useDepositPending();
   const orderTransactionLink = useOrderTransactionLink(order.nonce);
@@ -380,6 +384,7 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
         onFeeButtonClick={toggleShowFeeInfo}
       />
       <StyledInfoSection
+        isAllowancesFailed={isAllowancesOrBalancesFailed}
         isExpired={orderStatus === OrderStatus.expired}
         isDifferentChainId={walletChainIdIsDifferentThanOrderChainId}
         isIntendedRecipient={userIsIntendedRecipient}
@@ -397,7 +402,7 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
         isIntendedRecipient={userIsIntendedRecipient}
         isMakerOfSwap={userIsMakerOfSwap}
         isNotConnected={!isActive}
-        isNetworkUnsupported={false}
+        requiresReload={isAllowancesOrBalancesFailed}
         shouldDepositNativeToken={shouldDepositNativeToken}
         senderTokenSymbol={senderTokenSymbol}
         onBackButtonClick={handleBackButtonClick}

src/components/@widgets/OrderDetailWidget/helpers/index.ts

@@ -2,28 +2,47 @@ import { chainNames } from "@airswap/utils";
 
 import i18n from "i18next";
 
+interface FullOrderErc20WarningTranslation {
+  heading: string;
+  subHeading?: string;
+}
+
 export const getFullOrderERC20WarningTranslation = (
+  isAllowancesFailed: boolean,
   isDifferentChainId: boolean,
   isExpired: boolean,
   isIntendedRecipient: boolean,
   isMakerOfSwap: boolean,
   isNotConnected: boolean,
   orderChainId: number
-): string | undefined => {
+): FullOrderErc20WarningTranslation | undefined => {
   const orderIsNotForConnectedWallet =
     !isIntendedRecipient && !isMakerOfSwap && !isNotConnected;
 
+  if (isAllowancesFailed) {
+    return {
+      heading: i18n.t("balances.failedToFetchAllowances"),
+      subHeading: i18n.t("balances.failedToFetchAllowancesCta"),
+    };
+  }
+
   if (isDifferentChainId) {
     const chainName = chainNames[orderChainId] || i18n.t("common.unknown");
-    return i18n.t("orders.thisOrderIsForAnotherChain", { chainName });
+    return {
+      heading: i18n.t("orders.thisOrderIsForAnotherChain", { chainName }),
+    };
   }
 
   if (orderIsNotForConnectedWallet && isExpired) {
-    return i18n.t("orders.thisOrderWasForADifferentTaker");
+    return {
+      heading: i18n.t("orders.thisOrderWasForADifferentTaker"),
+    };
   }
 
   if (orderIsNotForConnectedWallet && !isExpired) {
-    return i18n.t("orders.thisOrderIsForADifferentTaker");
+    return {
+      heading: i18n.t("orders.thisOrderIsForADifferentTaker"),
+    };
   }
 
   return undefined;

src/components/@widgets/OrderDetailWidget/subcomponents/ActionButtons/ActionButtons.tsx

@@ -28,8 +28,8 @@ type ActionButtonsProps = {
   isDifferentChainId: boolean;
   isIntendedRecipient: boolean;
   isMakerOfSwap: boolean;
-  isNetworkUnsupported: boolean;
   isNotConnected: boolean;
+  requiresReload: boolean;
   shouldDepositNativeToken: boolean;
   senderTokenSymbol?: string;
   onBackButtonClick: () => void;
@@ -47,7 +47,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
   isIntendedRecipient,
   isMakerOfSwap,
   isNotConnected,
-  isNetworkUnsupported,
+  requiresReload,
   shouldDepositNativeToken,
   senderTokenSymbol,
   onBackButtonClick,
@@ -70,7 +70,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
     );
   }
 
-  if (isNetworkUnsupported || isDifferentChainId) {
+  if (isDifferentChainId) {
     return (
       <Container className={className}>
         <SignButton
@@ -84,6 +84,19 @@ const ActionButtons: FC<ActionButtonsProps> = ({
     );
   }
 
+  if (requiresReload) {
+    return (
+      <Container className={className}>
+        <SignButton
+          intent="primary"
+          onClick={() => onActionButtonClick(ButtonActions.reloadPage)}
+        >
+          {t("common.reloadPage")}
+        </SignButton>
+      </Container>
+    );
+  }
+
   if (isExpired || isTaken || isCanceled) {
     return (
       <Container className={className}>

src/components/@widgets/OrderDetailWidget/subcomponents/InfoSection/InfoSection.tsx

@@ -3,10 +3,15 @@ import { useTranslation } from "react-i18next";
 
 import useShouldDepositNativeTokenAmountInfo from "../../../../../hooks/useShouldDepositNativeTokenAmountInfo";
 import { InfoSubHeading } from "../../../../Typography/Typography";
+import {
+  StyledInfoHeading,
+  StyledInfoSubHeading,
+} from "../../../../Typography/Typography.styles";
 import { getFullOrderERC20WarningTranslation } from "../../helpers";
 import { Container, Strong } from "./InfoSection.styles";
 
 type ActionButtonsProps = {
+  isAllowancesFailed: boolean;
   isDifferentChainId: boolean;
   isExpired: boolean;
   isIntendedRecipient: boolean;
@@ -17,6 +22,7 @@ type ActionButtonsProps = {
 };
 
 const InfoSection: FC<ActionButtonsProps> = ({
+  isAllowancesFailed,
   isDifferentChainId,
   isExpired,
   isIntendedRecipient,
@@ -27,6 +33,7 @@ const InfoSection: FC<ActionButtonsProps> = ({
 }) => {
   const warningText = useMemo(() => {
     return getFullOrderERC20WarningTranslation(
+      isAllowancesFailed,
       isDifferentChainId,
       isExpired,
       isIntendedRecipient,
@@ -46,7 +53,11 @@ const InfoSection: FC<ActionButtonsProps> = ({
   if (warningText) {
     return (
       <Container className={className}>
-        <InfoSubHeading>{warningText}</InfoSubHeading>
+        <StyledInfoHeading>{warningText.heading}</StyledInfoHeading>
+
+        {warningText.subHeading && (
+          <StyledInfoSubHeading>{warningText.subHeading}</StyledInfoSubHeading>
+        )}
       </Container>
     );
   }