From a0e2c1f48a0b3f816c6fa3442e454a7feec15116 Mon Sep 17 00:00:00 2001 From: Atatakai Date: Tue, 25 Feb 2025 12:29:01 +0400 Subject: [PATCH 1/2] (govern): switch chain to mainnet, move yellow button to libs --- .../common-util/Login/LoginV2.jsx | 2 +- .../common-util/YellowButton.jsx | 25 ------ apps/govern/components/Layout/index.tsx | 2 + .../components/Login/SwitchNetworkButton.tsx | 18 ++++ .../components/Login/SwitchNetworkButton.tsx | 49 ++--------- apps/launch/components/Login/YellowButton.tsx | 24 ------ libs/ui-components/src/index.ts | 5 +- .../src/lib/SwitchNetworkButton.tsx | 85 +++++++++++++++++++ 8 files changed, 116 insertions(+), 94 deletions(-) delete mode 100644 apps/autonolas-registry/common-util/YellowButton.jsx create mode 100644 apps/govern/components/Login/SwitchNetworkButton.tsx delete mode 100644 apps/launch/components/Login/YellowButton.tsx create mode 100644 libs/ui-components/src/lib/SwitchNetworkButton.tsx diff --git a/apps/autonolas-registry/common-util/Login/LoginV2.jsx b/apps/autonolas-registry/common-util/Login/LoginV2.jsx index db2af763..b82d892a 100644 --- a/apps/autonolas-registry/common-util/Login/LoginV2.jsx +++ b/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'; diff --git a/apps/autonolas-registry/common-util/YellowButton.jsx b/apps/autonolas-registry/common-util/YellowButton.jsx deleted file mode 100644 index 2fe9589d..00000000 --- a/apps/autonolas-registry/common-util/YellowButton.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Button, ConfigProvider } from 'antd'; -import PropTypes from 'prop-types'; - -import { EXTRA_COLORS } from '../util/constants'; - -export const YellowButton = ({ children, ...props }) => ( - - - -); - -YellowButton.propTypes = { - children: PropTypes.node.isRequired, -}; diff --git a/apps/govern/components/Layout/index.tsx b/apps/govern/components/Layout/index.tsx index 50c733f0..ccc59ebf 100644 --- a/apps/govern/components/Layout/index.tsx +++ b/apps/govern/components/Layout/index.tsx @@ -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 = ({ children }) => { + diff --git a/apps/govern/components/Login/SwitchNetworkButton.tsx b/apps/govern/components/Login/SwitchNetworkButton.tsx new file mode 100644 index 00000000..3ba89904 --- /dev/null +++ b/apps/govern/components/Login/SwitchNetworkButton.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 ( + + ); +}; diff --git a/apps/launch/components/Login/SwitchNetworkButton.tsx b/apps/launch/components/Login/SwitchNetworkButton.tsx index 9cefd4fd..4cf47098 100644 --- a/apps/launch/components/Login/SwitchNetworkButton.tsx +++ b/apps/launch/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 ( - } - > - {!isMobile && 'Switch network'} - + ); }; diff --git a/apps/launch/components/Login/YellowButton.tsx b/apps/launch/components/Login/YellowButton.tsx deleted file mode 100644 index c674162a..00000000 --- a/apps/launch/components/Login/YellowButton.tsx +++ /dev/null @@ -1,24 +0,0 @@ -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 = ({ children, ...props }) => ( - - - -); diff --git a/libs/ui-components/src/index.ts b/libs/ui-components/src/index.ts index 81f00527..ba5dff29 100644 --- a/libs/ui-components/src/index.ts +++ b/libs/ui-components/src/index.ts @@ -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'; diff --git a/libs/ui-components/src/lib/SwitchNetworkButton.tsx b/libs/ui-components/src/lib/SwitchNetworkButton.tsx new file mode 100644 index 00000000..ebcb92b7 --- /dev/null +++ b/libs/ui-components/src/lib/SwitchNetworkButton.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) => ( + + + +); + +type SwitchNetworkButtonProps = { + walletConnectedChain: Chain | undefined; + networkId: number | null; + switchChainAsync: SwitchChainMutateAsync; + 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 ( + } + > + {!isMobile && 'Switch network'} + + ); +}; From b3609ad45ae23536585b38243da773a0550ed08a Mon Sep 17 00:00:00 2001 From: Atatakai Date: Tue, 25 Feb 2025 12:58:20 +0400 Subject: [PATCH 2/2] chore: move test --- .../ui-components/src/lib}/YellowButton.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename {apps/autonolas-registry/tests/common-util => libs/ui-components/src/lib}/YellowButton.test.tsx (82%) diff --git a/apps/autonolas-registry/tests/common-util/YellowButton.test.tsx b/libs/ui-components/src/lib/YellowButton.test.tsx similarity index 82% rename from apps/autonolas-registry/tests/common-util/YellowButton.test.tsx rename to libs/ui-components/src/lib/YellowButton.test.tsx index 9be28fbd..8d0c2823 100644 --- a/apps/autonolas-registry/tests/common-util/YellowButton.test.tsx +++ b/libs/ui-components/src/lib/YellowButton.test.tsx @@ -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', () => {