feat: add network on ConnectedButton

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

@@ -2,11 +2,7 @@ import { alpha, Box, CircularProgress, Stack, Typography } from '@mui/material';
 import { GasPopover } from '@origin/oeth/shared';
 import { Card, TokenInput } from '@origin/shared/components';
 import { tokens } from '@origin/shared/contracts';
-import {
-  ConnectedButton,
-  EnsureNetworkProvider,
-  usePrices,
-} from '@origin/shared/providers';
+import { ConnectedButton, usePrices } from '@origin/shared/providers';
 import { composeContexts } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
@@ -47,10 +43,7 @@ const tokenInputStyles = {
 };
 
 export const RedeemView = () =>
-  composeContexts(
-    [[RedeemProvider], [EnsureNetworkProvider]],
-    <RedeemViewWrapped />,
-  );
+  composeContexts([[RedeemProvider]], <RedeemViewWrapped />);
 
 function RedeemViewWrapped() {
   const intl = useIntl();

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

@@ -12,11 +12,7 @@ import {
 } from '@mui/material';
 import { ApyHeader, GasPopover } from '@origin/oeth/shared';
 import { Card, TokenInput } from '@origin/shared/components';
-import {
-  ConnectedButton,
-  EnsureNetworkProvider,
-  usePrices,
-} from '@origin/shared/providers';
+import { ConnectedButton, usePrices } from '@origin/shared/providers';
 import { composeContexts, isNilOrEmpty } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
@@ -76,10 +72,7 @@ const tokenInputStyles = {
 };
 
 export const SwapView = () =>
-  composeContexts(
-    [[SwapProvider], [EnsureNetworkProvider]],
-    <SwapViewWrapped />,
-  );
+  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>
+  );
 };