.env

NEXT_PUBLIC_CHAIN_ID='0x29'
NEXT_PUBLIC_CHAIN_NAME='Telos EVM Testnet'
NEXT_PUBLIC_NATIVE_CURRENCY_NAME='Telos'
NEXT_PUBLIC_NATIVE_CURRENCY_SYMBOL='TLOS'
NEXT_PUBLIC_NATIVE_CURRENCY_DECIMALS=18
NEXT_PUBLIC_RPC_URLS='https://testnet.telos.net/evm'
NEXT_PUBLIC_BLOCK_EXPLORER_URLS='https://telos.net'

connectWallet.tsx

import { useState, useEffect, ReactNode, FunctionComponent } from 'react';

declare global {
  interface Window {
    ethereum: any;
  }
}

export interface PropsShape {
  noWallet: ReactNode;
  notConnected: ReactNode;
  connected: ReactNode;
}

const ConnectWallet: FunctionComponent<PropsShape> = ({
  noWallet,
  notConnected,
  connected,
}) => {
  const [userHasWallet, setUserHasWallet] = useState<boolean>(false);
  const [connectedToTelos, setConnectedToTelos] = useState<boolean>(false);
  const [connectionError, setConnectionError] = useState<boolean>(false);

  const checkChainId = () => {
    const res = window.ethereum.chainId === process.env.NEXT_PUBLIC_CHAIN_ID;
    setConnectedToTelos(res);
  };

  useEffect(() => {
    const checkChain = () => {
      setUserHasWallet(true);
      checkChainId();
    };
    !!window.ethereum ? checkChain() : setUserHasWallet(false);
    window.ethereum.on('chainChanged', checkChainId);
    return () => {
      window.ethereum.removeListener('chainChanged', checkChainId);
    };
  }, []);

  const installAndChangeToTelos = async (): Promise<void> => {
    try {
      setConnectionError(false);
      await window.ethereum.request({
        method: 'wallet_addEthereumChain',
        params: [
          {
            chainId: process.env.NEXT_PUBLIC_CHAIN_ID,
            chainName: process.env.NEXT_PUBLIC_CHAIN_NAME,
            nativeCurrency: {
              name: process.env.NEXT_PUBLIC_NATIVE_CURRENCY_NAME,
              symbol: process.env.NEXT_PUBLIC_NATIVE_CURRENCY_SYMBOL,
              decimals: process.env.NEXT_PUBLIC_NATIVE_CURRENCY_DECIMALS,
            },
            rpcUrls: [process.env.NEXT_PUBLIC_RPC_URLS],
            blockExplorerUrls: [
              `${process.env.NEXT_PUBLIC_BLOCK_EXPLORER_URLS}`,
            ],
          },
        ],
      });
    } catch (err: any) {
      setConnectionError(true);
    }
  };

  return (
    <div>
      {!userHasWallet && <>{noWallet}</>}
      {userHasWallet && !connectedToTelos && (
        <div onClick={installAndChangeToTelos}>{notConnected}</div>
      )}
      {userHasWallet && connectedToTelos && !connectionError && (
        <>{connected}</>
      )}
    </div>
  );
};

export default ConnectWallet;