[TAS-239] Feat/wrong-network

libs/oeth/redeem/src/views/RedeemView.tsx

@@ -3,6 +3,7 @@ import { GasPopover } from '@origin/oeth/shared';
 import { Card, TokenInput } from '@origin/shared/components';
 import { tokens } from '@origin/shared/contracts';
 import { ConnectedButton, usePrices } from '@origin/shared/providers';
+import { composeContexts } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
 
@@ -41,11 +42,8 @@ const tokenInputStyles = {
   },
 };
 
-export const RedeemView = () => (
-  <RedeemProvider>
-    <RedeemViewWrapped />
-  </RedeemProvider>
-);
+export const RedeemView = () =>
+  composeContexts([[RedeemProvider]], <RedeemViewWrapped />);
 
 function RedeemViewWrapped() {
   const intl = useIntl();

libs/oeth/swap/src/views/SwapView.tsx

@@ -13,7 +13,7 @@ import {
 import { ApyHeader, GasPopover } from '@origin/oeth/shared';
 import { Card, TokenInput } from '@origin/shared/components';
 import { ConnectedButton, usePrices } from '@origin/shared/providers';
-import { isNilOrEmpty } from '@origin/shared/utils';
+import { composeContexts, isNilOrEmpty } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
 
@@ -71,11 +71,8 @@ const tokenInputStyles = {
   },
 };
 
-export const SwapView = () => (
-  <SwapProvider>
-    <SwapViewWrapped />
-  </SwapProvider>
-);
+export const SwapView = () =>
+  composeContexts([[SwapProvider]], <SwapViewWrapped />);
 
 function SwapViewWrapped() {
   const intl = useIntl();

libs/shared/providers/src/wagmi/components/ConnectedButton.tsx

@@ -1,24 +1,35 @@
 import { Button, CircularProgress } from '@mui/material';
+import { isNilOrEmpty } from '@origin/shared/utils';
 import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { useIntl } from 'react-intl';
-import { useAccount } from 'wagmi';
+import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi';
 
 import type { ButtonProps } from '@mui/material';
 
-export type ConnectedButtonProps = ButtonProps &
-  Omit<
-    HTMLButtonElement,
-    'form' | 'translate' | 'contentEditable' | 'inputMode'
-  >;
+export type ConnectedButtonProps = {
+  targetChainId?: number;
+  disableNetworkCheck?: boolean;
+} & ButtonProps;
 
-export const ConnectedButton = (props: ButtonProps) => {
+export const ConnectedButton = ({
+  children,
+  onClick,
+  disabled,
+  targetChainId,
+  disableNetworkCheck,
+  ...rest
+}: ConnectedButtonProps) => {
   const intl = useIntl();
+  const { chain, chains } = useNetwork();
   const { isConnected, isConnecting } = useAccount();
   const { openConnectModal } = useConnectModal();
+  const { switchNetwork } = useSwitchNetwork();
 
-  if (!isConnected) {
-    const { children, onClick, disabled, ...rest } = props;
+  const handleSwitchToDefaultNetwork = () => {
+    switchNetwork(targetChainId ?? chains[0].id);
+  };
 
+  if (!isConnected) {
     return (
       <Button
         {...rest}
@@ -32,14 +43,27 @@ export const ConnectedButton = (props: ButtonProps) => {
   }
 
   if (isConnecting) {
-    const { children, onClick, disabled, ...rest } = props;
-
     return (
       <Button {...rest} disabled>
         <CircularProgress sx={{ color: 'primary.contrastText' }} />
       </Button>
     );
   }
 
-  return <Button {...props} />;
+  if (
+    !disableNetworkCheck &&
+    isNilOrEmpty(chains.find((c) => c.id === chain?.id))
+  ) {
+    return (
+      <Button onClick={handleSwitchToDefaultNetwork} {...rest}>
+        {intl.formatMessage({ defaultMessage: 'Switch network' })}
+      </Button>
+    );
+  }
+
+  return (
+    <Button onClick={onClick} disabled={disabled} {...rest}>
+      {children}
+    </Button>
+  );
 };

libs/shared/providers/src/wagmi/components/EnsureNetworkProvider.tsx

@@ -0,0 +1,44 @@
+import { Button, Stack, Typography } from '@mui/material';
+import { isNilOrEmpty } from '@origin/shared/utils';
+import { useIntl } from 'react-intl';
+import { useNetwork, useSwitchNetwork } from 'wagmi';
+
+import type { RequiredChildren } from '@origin/shared/utils';
+
+export const EnsureNetworkProvider = ({ children }: RequiredChildren) => {
+  const intl = useIntl();
+  const { chain, chains } = useNetwork();
+  const { switchNetwork } = useSwitchNetwork();
+
+  const handleSwitchToDefaultNetwork = () => {
+    switchNetwork(chains[0].id);
+  };
+
+  const found = chains.find((c) => c.id === chain?.id);
+
+  if (chain?.id && isNilOrEmpty(found)) {
+    return (
+      <Stack p={4} spacing={2}>
+        <Typography variant="h1">
+          {intl.formatMessage({ defaultMessage: 'Unsupported Network' })}
+        </Typography>
+        <Typography variant="h3">
+          {intl.formatMessage({
+            defaultMessage:
+              'The selected network is not supported by the application.',
+          })}
+        </Typography>
+        <Stack direction="row">
+          <Button onClick={handleSwitchToDefaultNetwork}>
+            {intl.formatMessage(
+              { defaultMessage: 'Switch to {defaultChain}' },
+              { defaultChain: chains[0].name },
+            )}
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  return children;
+};

libs/shared/providers/src/wagmi/components/index.ts

@@ -1,4 +1,5 @@
 export * from './AddressLabel';
 export * from './BlockExplorerLink';
 export * from './ConnectedButton';
+export * from './EnsureNetworkProvider';
 export * from './OpenAccountModalButton';