Merge pull request #155 from valory-xyz/tanya/select-chain

(govern): switch chain to mainnet, move yellow button to libs

Author: Tanya-atatakai

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

@@ -13,7 +13,7 @@ import { isAddressProhibited } from 'libs/util-prohibited-data/src/index';
 
 import { setUserBalance } from 'store/setup';
 
-import { YellowButton } from '../YellowButton';
+import { YellowButton } from 'libs/ui-components/src';
 import { useHelpers } from '../hooks';
 import { SolanaWallet } from './SolanaWallet';
 

apps/autonolas-registry/common-util/YellowButton.jsx

@@ -11,6 +11,7 @@ import { LogoSvg } from './Logos';
 import { NavigationMenu } from './Menu';
 import { CustomLayout, Logo, OlasHeader, RightMenu } from './styles';
 import { NavDropdown } from 'libs/ui-components/src';
+import { SwitchNetworkButton } from 'components/Login/SwitchNetworkButton';
 
 const { Content } = AntdLayout;
 
@@ -33,6 +34,7 @@ export const Layout: FC<LayoutProps> = ({ children }) => {
         <NavigationMenu />
         <RightMenu>
           <Balance />
+          <SwitchNetworkButton />
           <LoginV2 />
         </RightMenu>
       </OlasHeader>

apps/govern/components/Layout/index.tsx

@@ -0,0 +1,18 @@
+import { useAccount, useSwitchChain } from 'wagmi';
+
+import { SwitchNetworkButton as SwitchNetworkButtonComponent } from 'libs/ui-components/src';
+import { mainnet } from 'viem/chains';
+
+export const SwitchNetworkButton = () => {
+  const { chain: walletConnectedChain } = useAccount();
+  const { switchChainAsync, isPending } = useSwitchChain();
+
+  return (
+    <SwitchNetworkButtonComponent
+      walletConnectedChain={walletConnectedChain}
+      networkId={mainnet.id}
+      switchChainAsync={switchChainAsync}
+      isPending={isPending}
+    />
+  );
+};

apps/govern/components/Login/SwitchNetworkButton.tsx

@@ -1,55 +1,20 @@
-import { SwapOutlined } from '@ant-design/icons';
-import { isNumber } from 'lodash';
-import { useCallback, useEffect, useMemo } from 'react';
 import { useAccount, useSwitchChain } from 'wagmi';
 
-import { useScreen } from 'libs/ui-theme/src';
-
 import { useAppSelector } from 'store/index';
 
-import { YellowButton } from './YellowButton';
+import { SwitchNetworkButton as SwitchNetworkButtonComponent } from 'libs/ui-components/src';
 
 export const SwitchNetworkButton = () => {
-  const { isMobile } = useScreen();
   const { chain: walletConnectedChain } = useAccount();
   const { networkId } = useAppSelector((state) => state.network);
   const { switchChainAsync, isPending } = useSwitchChain();
 
-  /**
-   * @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]);
-
-  if (!isConnectedToWrongNetwork) return null;
   return (
-    <YellowButton
-      loading={isPending}
-      type="default"
-      onClick={onSwitchNetwork}
-      icon={<SwapOutlined />}
-    >
-      {!isMobile && 'Switch network'}
-    </YellowButton>
+    <SwitchNetworkButtonComponent
+      walletConnectedChain={walletConnectedChain}
+      networkId={networkId}
+      switchChainAsync={switchChainAsync}
+      isPending={isPending}
+    />
   );
 };

apps/launch/components/Login/SwitchNetworkButton.tsx

@@ -1,5 +1,6 @@
 export * from './lib/Footer';
-export * from './lib/Caption';
-export * from './lib/TextWithTooltip';
 export * from './lib/AddressLink';
+export * from './lib/Caption';
 export * from './lib/NavDropdown';
+export * from './lib/SwitchNetworkButton';
+export * from './lib/TextWithTooltip';

apps/launch/components/Login/YellowButton.tsx

@@ -0,0 +1,85 @@
+import { SwapOutlined } from '@ant-design/icons';
+import { isNumber } from 'lodash';
+import { useCallback, useEffect, useMemo } from 'react';
+import { Config } from 'wagmi';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { COLOR, useScreen } from 'libs/ui-theme/src';
+import { Button, ButtonProps, ConfigProvider } from 'antd';
+import { Chain } from 'viem';
+import { SwitchChainMutateAsync } from 'wagmi/query';
+
+type YellowButtonProps = ButtonProps & {
+  children: React.ReactNode;
+};
+
+export const YellowButton = ({ children, ...props }: YellowButtonProps) => (
+  <ConfigProvider
+    theme={{
+      token: {
+        colorPrimary: COLOR.YELLOW_PRIMARY,
+        colorBgBase: COLOR.YELLOW_SECONDARY,
+        colorTextBase: COLOR.YELLOW_PRIMARY,
+        colorBorder: COLOR.YELLOW_PRIMARY,
+      },
+    }}
+  >
+    <Button {...props} size="large">
+      {children}
+    </Button>
+  </ConfigProvider>
+);
+
+type SwitchNetworkButtonProps = {
+  walletConnectedChain: Chain | undefined;
+  networkId: number | null;
+  switchChainAsync: SwitchChainMutateAsync<Config, unknown>;
+  isPending: boolean;
+};
+
+export const SwitchNetworkButton = ({
+  walletConnectedChain,
+  networkId,
+  switchChainAsync,
+  isPending,
+}: SwitchNetworkButtonProps) => {
+  const { isMobile } = useScreen();
+
+  /**
+   * @returns {boolean} - true if the wallet is connected to wrong network
+   * (ie. chain ID from wallet is different from the provided chain ID e.g. 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]);
+
+  if (!isConnectedToWrongNetwork) return null;
+  return (
+    <YellowButton
+      loading={isPending}
+      type="default"
+      onClick={onSwitchNetwork}
+      icon={<SwapOutlined />}
+    >
+      {!isMobile && 'Switch network'}
+    </YellowButton>
+  );
+};

libs/ui-components/src/index.ts

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 
-import { YellowButton } from '../../common-util/YellowButton';
+import { YellowButton } from './SwitchNetworkButton';
 
 describe('YellowButton', () => {
   it('should display a yellow button', () => {