Add nominate contract page

apps/autonolas-registry/common-util/Login/LoginV2.jsx

@@ -36,7 +36,7 @@ export const LoginV2 = ({
   const { disconnect } = useDisconnect();
   const { chainId, isConnectedToWrongNetwork } = useHelpers();
   const { chain: walletConnectedChain } = useAccount();
-  const { switchChainAsync, isLoading } = useSwitchChain();
+  const { switchChainAsync, isPending } = useSwitchChain();
 
   const screens = useBreakpoint();
 
@@ -142,7 +142,7 @@ export const LoginV2 = ({
         <>
           {!hideWrongNetwork && (
             <YellowButton
-              loading={isLoading}
+              loading={isPending}
               type="default"
               onClick={onSwitchNetwork}
               icon={<SwapOutlined />}>

apps/launch/common-util/ErrorAlert.tsx

@@ -0,0 +1,34 @@
+import { Alert } from 'antd';
+import { mainnet } from 'viem/chains';
+
+import { EXPLORER_URLS, UNICODE_SYMBOLS } from 'libs/util-constants/src';
+
+import { ErrorType } from 'types/index';
+
+export const ErrorAlert = ({
+  error,
+  networkId,
+}: {
+  error: NonNullable<ErrorType>;
+  networkId?: number | null;
+}) => (
+  <Alert
+    className="mb-24"
+    type="error"
+    showIcon
+    message={
+      <>
+        {error.message}
+        {error.transactionHash && (
+          <>
+            <br />
+            <a
+              href={`${[EXPLORER_URLS[networkId || mainnet.id]]}/tx/${error.transactionHash}`}
+              target="_blank"
+            >{`Explore transaction hash ${UNICODE_SYMBOLS.EXTERNAL_LINK}`}</a>
+          </>
+        )}
+      </>
+    }
+  />
+);

apps/launch/common-util/functions/frontend-library.ts

@@ -36,37 +36,71 @@ export const notifyConnectWallet = () => {
   notifyWarning('Please connect your wallet');
 };
 
-const METAMASK_ERRORS: Record<number, string> = {
-  4001: 'Transaction rejected by user. The contract hasn’t been created.',
+export enum Feature {
+  CREATE = 'create',
+  NOMINATE = 'nominate',
+}
+
+const METAMASK_ERRORS = {
+  create: [
+    {
+      code: 4001,
+      name: '',
+      message: 'Transaction rejected by user. The contract hasn’t been created.',
+    },
+  ],
+  nominate: [
+    {
+      code: 4001,
+      name: 'Transaction rejected by user',
+      message: 'Transaction rejected by user. The contract hasn’t been nominated',
+    },
+  ],
 };
 
-const EVM_ERRORS = [
-  {
-    errorText: 'Transaction has been reverted by the EVM',
-    displayText: 'Transaction failed. The contract hasn’t been created.',
-  },
-];
+const EVM_ERRORS = {
+  create: [
+    {
+      errorText: 'Transaction has been reverted by the EVM',
+      name: '',
+      displayText: 'Transaction failed. The contract hasn’t been created.',
+    },
+  ],
+  nominate: [
+    {
+      errorText: 'Transaction has been reverted by the EVM',
+      name: 'Transaction failed',
+      displayText: 'Transaction failed. The contract hasn’t been nominated',
+    },
+  ],
+};
 
-export const getErrorInfo = (error: Error | { code: number; message: string }) => {
+export const getErrorInfo = (type: Feature, error: Error | { code: number; message: string }) => {
   const defaultMessage = 'Some error occurred. Please try again';
 
+  let name;
   let message = defaultMessage;
   let transactionHash;
 
-  if ('code' in error && METAMASK_ERRORS[error.code]) {
-    message = METAMASK_ERRORS[error.code];
+  if ('code' in error) {
+    const metamaskError = METAMASK_ERRORS[type].find((item) => item.code === error.code);
+    if (metamaskError) {
+      name = metamaskError.name;
+      message = metamaskError.message;
+    }
   }
 
   if ('message' in error) {
-    const foundError = EVM_ERRORS.find((item) => error.message.indexOf(item.errorText) !== -1);
-    if (foundError) {
-      message = foundError.displayText;
+    const evmError = EVM_ERRORS[type].find((item) => error.message === item.errorText);
+    if (evmError) {
+      name = evmError.name;
+      message = evmError.displayText;
     }
   }
 
   if ('receipt' in error) {
     transactionHash = (error.receipt as TransactionReceipt).transactionHash as Address;
   }
 
-  return { message, transactionHash };
+  return { name, message, transactionHash };
 };

apps/launch/common-util/hooks/useNetworkHelpers.tsx → apps/launch/common-util/functions/networkHelpers.ts

@@ -15,3 +15,10 @@ export const getChainIdFromPath = (networkName: string | undefined) => {
   const network = ALL_SUPPORTED_CHAINS.find((e) => toLower(e.networkName) === toLower(networkName));
   return network?.id;
 };
+
+export const getDisplayNameFromPath = (networkName: string | undefined) => {
+  if (!networkName) return null;
+
+  const network = ALL_SUPPORTED_CHAINS.find((e) => toLower(e.networkName) === toLower(networkName));
+  return network?.networkDisplayName;
+};

apps/launch/common-util/functions/web3.ts

@@ -1,4 +1,3 @@
-import { BaseContractMethod, Contract } from 'ethers';
 import { Address } from 'viem';
 import Web3 from 'web3';
 import { AbiItem } from 'web3-utils';
@@ -48,6 +47,7 @@ export const getStakingFactoryContract = () => {
   return contract;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const sendTransaction = async (methodFn: any, account: Address) => {
   const estimatedGas = await getEstimatedGasLimit(methodFn, account);
   const fn = methodFn.send({ from: account, estimatedGas });
@@ -63,6 +63,7 @@ type CreateContractParams = {
   initPayload: string;
   account: Address;
 };
+
 export const createStakingContract = async ({
   implementation,
   initPayload,
@@ -74,3 +75,17 @@ export const createStakingContract = async ({
 
   return result;
 };
+
+type AddNomineeParams = {
+  address: Address;
+  chainId: number;
+  account: Address;
+};
+
+export const addNominee = async ({ address, chainId, account }: AddNomineeParams) => {
+  const contract = getVoteWeightingContract();
+  const createFn = contract.methods.addNomineeEVM(address, chainId);
+  const result = await sendTransaction(createFn, account);
+
+  return result;
+};

apps/launch/components/Layout/SwitchNetworkSelect/index.tsx

@@ -10,8 +10,6 @@ import {
   PAGES_TO_LOAD_WITH_CHAIN_ID,
 } from 'common-util/config/supportedChains';
 
-import { useHandleRoute } from './useHandleRoute';
-
 const networkSelectOptions = ALL_SUPPORTED_CHAINS.map((e) => ({
   label: e.networkDisplayName,
   value: e.networkName,
@@ -25,9 +23,6 @@ export const SwitchNetworkSelect: FC = () => {
 
   const chainName = (router?.query?.network || 'ethereum') as string;
 
-  // handle the routing
-  useHandleRoute();
-
   return (
     <div style={{ marginRight: isMobile ? 8 : 0 }}>
       <Select

apps/launch/components/Login/LoginV2.tsx

@@ -1,10 +1,17 @@
+import { SwapOutlined } from '@ant-design/icons';
 import { GetAccountReturnType, watchAccount } from '@wagmi/core';
-import { useCallback, useEffect } from 'react';
+import { isNil, isNumber } from 'lodash';
+import { useCallback, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
-import { useAccountEffect, useConfig, useDisconnect } from 'wagmi';
+import { useAccount, useAccountEffect, useConfig, useDisconnect, useSwitchChain } from 'wagmi';
 
+import { useScreen } from 'libs/ui-theme/src';
 import { isAddressProhibited } from 'libs/util-prohibited-data/src/index';
 
+import { useAppSelector } from 'store/index';
+
+import { YellowButton } from './YellowButton';
+
 const LoginContainer = styled.div`
   display: flex;
   align-items: center;
@@ -15,6 +22,10 @@ const LoginContainer = styled.div`
 export const LoginV2 = () => {
   const { disconnect } = useDisconnect();
   const config = useConfig();
+  const { isMobile } = useScreen();
+  const { chain: walletConnectedChain } = useAccount();
+  const { networkId } = useAppSelector((state) => state.network);
+  const { switchChainAsync, isPending } = useSwitchChain();
 
   const handleConnect = useCallback(
     ({ address }: Pick<GetAccountReturnType, 'address' | 'chainId'>) => {
@@ -43,8 +54,48 @@ export const LoginV2 = () => {
     return () => unwatch();
   }, [config, clearOnDisconnect, handleConnect]);
 
+  /**
+   * @returns {boolean} - true if the wallet is connected to wrong network
+   * (ie. chain ID from wallet is different from the chain ID selected in the dropdown)
+   */
+  const isConnectedToWrongNetwork = useMemo(() => {
+    if (!isNumber(walletConnectedChain?.id) || !isNumber(networkId)) return false;
+
+    return walletConnectedChain?.id !== networkId;
+  }, [walletConnectedChain, networkId]);
+
+  const onSwitchNetwork = useCallback(async () => {
+    if (!networkId) return;
+
+    try {
+      await switchChainAsync({ chainId: networkId });
+    } catch (error) {
+      console.error(error);
+    }
+  }, [networkId, switchChainAsync]);
+
+  useEffect(() => {
+    if (isConnectedToWrongNetwork) {
+      onSwitchNetwork();
+    }
+  }, [isConnectedToWrongNetwork, onSwitchNetwork]);
+
+  const hideWrongNetwork =
+    isNil(walletConnectedChain?.id) || walletConnectedChain?.id === networkId;
+
   return (
     <LoginContainer>
+      {!hideWrongNetwork && (
+        <YellowButton
+          loading={isPending}
+          type="default"
+          onClick={onSwitchNetwork}
+          icon={<SwapOutlined />}
+        >
+          {!isMobile && 'Switch network'}
+        </YellowButton>
+      )}
+      &nbsp;&nbsp;
       <w3m-button balance="hide" />
     </LoginContainer>
   );

apps/launch/components/Login/YellowButton.tsx

@@ -0,0 +1,22 @@
+import { Button, ButtonProps, ConfigProvider } from 'antd';
+import { FC, ReactNode } from 'react';
+
+import { COLOR } from 'libs/ui-theme/src';
+
+// TODO: move to ui library
+type YellowButtonProps = { children: ReactNode } & ButtonProps;
+
+export const YellowButton: FC<YellowButtonProps> = ({ children, ...props }) => (
+  <ConfigProvider
+    theme={{
+      token: {
+        colorPrimary: COLOR.YELLOW_PRIMARY,
+        colorBgBase: COLOR.YELLOW_SECONDARY,
+        colorTextBase: COLOR.YELLOW_PRIMARY,
+        colorBorder: COLOR.YELLOW_PRIMARY,
+      },
+    }}
+  >
+    <Button {...props}>{children}</Button>
+  </ConfigProvider>
+);

apps/launch/components/MyStakingContracts/Create/index.tsx

@@ -20,27 +20,28 @@ import { useAccount } from 'wagmi';
 
 import { CHAIN_NAMES, EXPLORER_URLS, UNICODE_SYMBOLS } from 'libs/util-constants/src';
 
+import { ErrorAlert } from 'common-util/ErrorAlert';
 import {
   CONTRACT_TEMPLATES,
   IMPLEMENTATION_ADDRESSES,
   isSupportedChainId,
 } from 'common-util/constants/stakingContract';
 import { URL } from 'common-util/constants/urls';
 import {
+  Feature,
   createStakingContract,
   getErrorInfo,
   getIpfsHash,
   getStakingContractInitPayload,
   notifyConnectWallet,
   notifyWrongNetwork,
 } from 'common-util/functions';
-import { getChainIdFromPath } from 'common-util/hooks/useNetworkHelpers';
+import { getChainIdFromPath } from 'common-util/functions/networkHelpers';
+import { ErrorType } from 'types/index';
 
 import { Hint, StyledMain, Title } from './styles';
 import {
   DESCRIPTION_FIELD_RULES,
-  ErrorAlert,
-  ErrorType,
   FormValues,
   MAX_NUM_SERVICES_FIELD_RULES,
   MaxNumServicesLabel,
@@ -63,11 +64,11 @@ export const CreateStakingContract = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<ErrorType>(null);
   const params = useParams<{ network: string }>();
-  const chainName = params?.network as string;
+  const networkName = params?.network as string;
 
   const { address: account, chain } = useAccount();
 
-  const networkId = getChainIdFromPath(chainName);
+  const networkId = getChainIdFromPath(networkName);
   const wrongNetwork = chain && networkId ? networkId !== chain.id : false;
 
   const handleCreate = async (values: FormValues) => {
@@ -110,16 +111,15 @@ export const CreateStakingContract = () => {
       }
 
       const result = await createStakingContract({ implementation, initPayload, account });
-
       if (result) {
         // TODO: once request contracts list task is done, need to update
         // the staking contracts list with result.events.InstanceCreated data
-        router.push(`/${chainName}/${URL.myStakingContracts}`);
+        router.push(`/${networkName}/${URL.myStakingContracts}`);
       }
     } catch (error) {
       console.log(error);
 
-      const { message, transactionHash } = getErrorInfo(error as Error);
+      const { message, transactionHash } = getErrorInfo(Feature.CREATE, error as Error);
       setError({ message, transactionHash });
     } finally {
       setIsLoading(false);
@@ -197,7 +197,7 @@ export const CreateStakingContract = () => {
             </Col>
           </Row>
           <Flex justify="end" gap={12}>
-            <Link href={`/${chainName}/${URL.myStakingContracts}`} passHref>
+            <Link href={`/${networkName}/${URL.myStakingContracts}`} passHref>
               <Button>Cancel</Button>
             </Link>
             <Button type="primary" htmlType="submit" loading={isLoading}>