SwitchToPolygonButton.tsx

import classnames from 'classnames';
import { Web3Context } from 'contexts/web3Context';
import CSS from 'csstype';
import React, { ReactElement, useContext } from 'react';

import styles from './styles.module.css';

const chainArgs = {
  '137': {
    chainId: '0x89',
    chainName: 'Matic Mainnet',
    rpcUrls: ['https://rpc-mainnet.maticvigil.com/'],
    iconUrls: [],
    nativeCurrency: {
      name: 'Matic',
      symbol: 'MATIC',
      decimals: 18,
    },
    blockExplorerUrls: ['https://polygonscan.com/'],
  },
};

const SwitchToPolygonButton = ({
  onClick,
  children,
  className,
  disabled,
  style,
  hidden,
}: {
  onClick?: () => void;
  children: ReactElement | string;
  className?: string;
  disabled?: boolean;
  style?: CSS.Properties;
  hidden?: boolean;
}): ReactElement => {
  const { provider } = useContext(Web3Context);

  return (
    <button
      onClick={async () => {
        await provider.send('wallet_addEthereumChain', [
          chainArgs[process.env.CHAIN_ID],
        ]);
      }}
      className={classnames(styles.root, styles[className], {
        [styles.hidden]: hidden,
      })}
      disabled={disabled}
      style={style}
    >
      {children}
    </button>
  );
};

export default SwitchToPolygonButton;