Merge pull request #166 from lidofinance/develop

from develop to main

assets/icons/danger.com.svg.react

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill-rule="evenodd" d="m12.064 3.702 6.058 10.512c.133.314.191.57.208.834a2.3 2.3 0 0 1-.608 1.685c-.425.462-1 .734-1.625.767H3.899a2.624 2.624 0 0 1-.758-.165c-1.208-.487-1.792-1.858-1.3-3.046L7.94 3.694c.208-.372.525-.693.917-.9a2.375 2.375 0 0 1 3.207.908Zm-1.341 6.928a.73.73 0 0 1-.725.727.737.737 0 0 1-.733-.727V8.294c0-.397.333-.719.733-.719.4 0 .725.322.725.719v2.336Zm-.725 3.551a.737.737 0 0 1-.733-.726c0-.398.333-.728.733-.728.4 0 .725.323.725.719a.732.732 0 0 1-.725.735Z" clip-rule="evenodd"/></svg>

modules/blockChain/hooks/useErrorMessage.ts

@@ -1,23 +1,21 @@
-import { useSupportedChains, useConnectorError } from 'reef-knot/web3-react'
-import { CHAINS } from '@lido-sdk/constants'
 import { useMemo } from 'react'
+import { useConfig } from 'modules/config/hooks/useConfig'
+import { useSupportedChains, useConnectorError } from 'reef-knot/web3-react'
 
-export const useErrorMessage = (): string | undefined => {
+import { getChainName } from 'modules/blockChain/chains'
+
+export function useErrorMessage() {
   const error = useConnectorError()
-  const { isUnsupported, supportedChains } = useSupportedChains()
+  const { isUnsupported } = useSupportedChains()
+  const { supportedChainIds } = useConfig()
 
   const chains = useMemo(() => {
-    const chainNames = supportedChains.map(
-      ({ chainId, name }) => CHAINS[chainId] || name,
-    )
-    const lastChain = chainNames.pop()
-    const chainsArray = [chainNames.join(', '), lastChain]
-
-    return chainsArray.filter(chain => chain).join(' or ')
-  }, [supportedChains])
+    const networksList = supportedChainIds.map(chainId => getChainName(chainId))
+    return networksList.join(' / ')
+  }, [supportedChainIds])
 
   if (isUnsupported) {
-    return `Unsupported chain. Please switch to ${chains} in your wallet`
+    return `Unsupported chain. Please switch to ${chains} in your wallet.`
   }
 
   return error?.message

modules/blockChain/ui/NetworkSwitcher/NetworkSwitcher.tsx

@@ -1,24 +1,18 @@
-import { useConfig } from 'modules/config/hooks/useConfig'
+import { useErrorMessage } from 'modules/blockChain/hooks/useErrorMessage'
 
-import { Text } from 'modules/shared/ui/Common/Text'
-import { Title } from 'modules/shared/ui/Common/Title'
-
-import { getChainName } from 'modules/blockChain/chains'
+import { Container } from '@lidofinance/lido-ui'
+import { Wrap } from './NetworkSwitcherStyle'
+import DangerIconSVG from 'assets/icons/danger.com.svg.react'
 
 export function NetworkSwitcher() {
-  const { supportedChainIds } = useConfig()
+  const errorMessage = useErrorMessage()
 
   return (
-    <>
-      <Title
-        title="Network does not match"
-        subtitle={<>Please, switch to one of supported network:</>}
-      />
-      <Text size={16} weight={500} isCentered>
-        {supportedChainIds.map(supportedChainId => (
-          <div key={supportedChainId}>{getChainName(supportedChainId)}</div>
-        ))}
-      </Text>
-    </>
+    <Container size="full">
+      <Wrap>
+        <DangerIconSVG />
+        <span>{errorMessage}</span>
+      </Wrap>
+    </Container>
   )
 }

modules/blockChain/ui/NetworkSwitcher/NetworkSwitcherStyle.ts

@@ -1,7 +1,26 @@
 import styled from 'styled-components'
 
-export const NetworksBox = styled.div`
+export const Wrap = styled.div`
   display: flex;
-  justify-content: center;
-  gap: 10px;
+  align-items: center;
+  margin-bottom: ${({ theme }) => theme.spaceMap.xxl}px;
+  padding: ${({ theme }) => theme.spaceMap.lg}px;
+  color: var(--lido-color-textDark);
+  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
+  font-weight: 400;
+  border-radius: ${({ theme }) => theme.borderRadiusesMap.md}px;
+  background: radial-gradient(
+    76.72% 76.72% at 50% 67.59%,
+    rgba(255, 201, 208, 0.6) 0%,
+    rgba(255, 237, 237, 0.6) 68.99%,
+    rgba(255, 255, 255, 0.6) 100%
+  );
+  box-shadow: inset 0px -20px 93px rgba(255, 214, 0, 0.44);
+
+  & svg {
+    display: block;
+    flex: 0 0 auto;
+    margin-right: ${({ theme }) => theme.spaceMap.sm}px;
+    fill: var(--lido-color-textDark);
+  }
 `

modules/motions/evmAddresses.ts

@@ -12,16 +12,13 @@ export const EvmAddressesByChain = {
   [CHAINS.Mainnet]: {
     [MotionType.NodeOperatorIncreaseLimit]:
       '0xFeBd8FAC16De88206d4b18764e826AF38546AfE0',
-    [MotionType.LEGOTopUp]: '0x648C8Be548F43eca4e482C0801Ebccccfb944931',
     [MotionType.AllowedRecipientTopUpTrpLdo]:
       '0xBd2b6dC189EefD51B273F5cb2d99BA1ce565fb8C',
     [MotionType.LegoLDOTopUp]: '0x00caAeF11EC545B192f16313F53912E453c91458',
     [MotionType.LegoDAITopUp]: '0x0535a67ea2D6d46f85fE568B7EaA91Ca16824FEC',
     [MotionType.RccDAITopUp]: '0x84f74733ede9bFD53c1B3Ea96338867C94EC313e',
     [MotionType.PmlDAITopUp]: '0x4E6D3A5023A38cE2C4c5456d3760357fD93A22cD',
     [MotionType.AtcDAITopUp]: '0x67Fb97ABB9035E2e93A7e3761a0d0571c5d7CD07',
-    [MotionType.GasFunderETHTopUp]:
-      '0x41F9daC5F89092dD6061E59578A2611849317dc8',
     [MotionType.StethRewardProgramAdd]:
       '0x935cb3366Faf2cFC415B2099d1F974Fd27202b77',
     [MotionType.StethRewardProgramRemove]:
@@ -37,6 +34,9 @@ export const EvmAddressesByChain = {
 
     // next motion factories are @deprecated
     // we are keeping them here to display history data
+    [MotionType.LEGOTopUp]: '0x648C8Be548F43eca4e482C0801Ebccccfb944931',
+    [MotionType.GasFunderETHTopUp]:
+      '0x41F9daC5F89092dD6061E59578A2611849317dc8',
     [MotionType.RewardProgramAdd]: '0x9D15032b91d01d5c1D940eb919461426AB0dD4e3',
     [MotionType.RewardProgramRemove]:
       '0xc21e5e72Ffc223f02fC410aAedE3084a63963932',
@@ -66,15 +66,13 @@ export const EvmAddressesByChain = {
   [CHAINS.Goerli]: {
     [MotionType.NodeOperatorIncreaseLimit]:
       '0xE033673D83a8a60500BcE02aBd9007ffAB587714',
-    [MotionType.LEGOTopUp]: '0xb2bcf211F103d7F13789394DD475c2274e044C4C',
     [MotionType.AllowedRecipientTopUpTrpLdo]:
       '0x43f33C52156d1Fb2eA24d82aBfD342E69835E79f',
     [MotionType.LegoLDOTopUp]: '0xc39Dd5B66968e364D99e0c9E7089049351AB89CA',
     [MotionType.LegoDAITopUp]: '0xbf44eC2b23cA105F8a62e0587900a09A473288c6',
     [MotionType.RccDAITopUp]: '0xd0411e7c4A24E7d4509D5F13AEd19aeb8e5644AB',
     [MotionType.PmlDAITopUp]: '0xc749aD24572263887Bc888d3Cb854FCD50eCCB61',
     [MotionType.AtcDAITopUp]: '0xF4b8b5760EE4b5c5Cb154edd0f0841465d821006',
-    [MotionType.GasFunderETHTopUp]: '0x',
     [MotionType.StethRewardProgramAdd]:
       '0x785A8B1CDC03Bb191670Ed4696e9ED5B11Af910A',
     [MotionType.StethRewardProgramRemove]:
@@ -90,6 +88,8 @@ export const EvmAddressesByChain = {
 
     // next motion factories are @deprecated
     // we are keeping them here to display history data
+    [MotionType.LEGOTopUp]: '0xb2bcf211F103d7F13789394DD475c2274e044C4C',
+    [MotionType.GasFunderETHTopUp]: '0x',
     [MotionType.RewardProgramAdd]: '0x5560d40b00EA3a64E9431f97B3c79b04e0cdF6F2',
     [MotionType.RewardProgramRemove]:
       '0x31B68d81125E52fE1aDfe4076F8945D1014753b5',

modules/motions/hooks/useRegistryWithLimits.ts

@@ -48,7 +48,7 @@ export const REGISTRY_WITH_LIMITS_BY_MOTION_TYPE = {
   [MotionType.StethGasSupplyAdd]: ContractStethGasSupplyRegistry,
   [MotionType.StethGasSupplyRemove]: ContractStethGasSupplyRegistry,
   [MotionType.StethGasSupplyTopUp]: ContractStethGasSupplyRegistry,
-}
+} as const
 
 type HookArgs = {
   registryType: keyof typeof REGISTRY_WITH_LIMITS_BY_MOTION_TYPE

modules/motions/providers/motionDetailed.tsx

@@ -7,7 +7,6 @@ import {
   getMotionTypeByScriptFactory,
   getMotionTypeDisplayName,
   getEventMotionCreated,
-  getContractMethodParams,
   estimateGasFallback,
 } from 'modules/motions/utils'
 import {
@@ -130,20 +129,17 @@ export const MotionDetailedProvider: FC<MotionDetailedProps> = props => {
       motion.id,
     )
     const gasLimit = await estimateGasFallback(
-      contractEasyTrack.estimateGas.enactMotion(motion.id, _callData, {
-        ...getContractMethodParams(motion.evmScriptFactory, 'enact'),
-      }),
+      contractEasyTrack.estimateGas.enactMotion(motion.id, _callData),
     )
     const tx = await contractEasyTrack.populateTransaction.enactMotion(
       motion.id,
       _callData,
       {
         gasLimit,
-        ...getContractMethodParams(motion.evmScriptFactory, 'enact'),
       },
     )
     return tx
-  }, [contractEasyTrack, motion.evmScriptFactory, motion.id])
+  }, [contractEasyTrack, motion.id])
 
   const txEnact = useTransactionSender(populateEnact, {
     onFinish: onInvalidate,

modules/motions/types.ts

@@ -2,25 +2,32 @@ import type { BigNumber } from 'ethers'
 import type { PromiseValue } from 'type-fest'
 import type { EasyTrackAbi } from 'generated'
 
-export const MotionType = {
+// Only motions currently supported to start
+export const MotionTypeForms = {
   NodeOperatorIncreaseLimit: 'NodeOperatorIncreaseLimit',
-  LEGOTopUp: 'LEGOTopUp',
   AllowedRecipientTopUpTrpLdo: 'AllowedRecipientTopUpTrpLdo',
   LegoLDOTopUp: 'LegoLDOTopUp',
   LegoDAITopUp: 'LegoDAITopUp',
   RccDAITopUp: 'RccDAITopUp',
   PmlDAITopUp: 'PmlDAITopUp',
   AtcDAITopUp: 'AtcDAITopUp',
-  GasFunderETHTopUp: 'GasFunderETHTopUp',
   StethRewardProgramAdd: 'StethRewardProgramAdd',
   StethRewardProgramRemove: 'StethRewardProgramRemove',
   StethRewardProgramTopUp: 'StethRewardProgramTopUp',
   StethGasSupplyAdd: 'StethGasSupplyAdd',
   StethGasSupplyRemove: 'StethGasSupplyRemove',
   StethGasSupplyTopUp: 'StethGasSupplyTopUp',
+} as const
+// intentionally
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type MotionTypeForms =
+  typeof MotionTypeForms[keyof typeof MotionTypeForms]
 
-  // next motion types are retired
-  // we are keeping them here to display history data
+// next motion types are retired
+// we are keeping them here to display history data
+export const MotionTypeDisplayOnly = {
+  LEGOTopUp: 'LEGOTopUp',
+  GasFunderETHTopUp: 'GasFunderETHTopUp',
   RewardProgramAdd: 'RewardProgramAdd',
   RewardProgramRemove: 'RewardProgramRemove',
   RewardProgramTopUp: 'RewardProgramTopUp',
@@ -36,30 +43,16 @@ export const MotionType = {
 } as const
 // intentionally
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type MotionType = typeof MotionType[keyof typeof MotionType]
+export type MotionTypeDisplayOnly =
+  typeof MotionTypeDisplayOnly[keyof typeof MotionTypeDisplayOnly]
 
-// Only motions currently supported to start
-export const MotionTypeForms = {
-  NodeOperatorIncreaseLimit: MotionType.NodeOperatorIncreaseLimit,
-  LEGOTopUp: MotionType.LEGOTopUp,
-  AllowedRecipientTopUpTrpLdo: MotionType.AllowedRecipientTopUpTrpLdo,
-  LegoLDOTopUp: MotionType.LegoLDOTopUp,
-  LegoDAITopUp: MotionType.LegoDAITopUp,
-  RccDAITopUp: MotionType.RccDAITopUp,
-  PmlDAITopUp: MotionType.PmlDAITopUp,
-  AtcDAITopUp: MotionType.AtcDAITopUp,
-  GasFunderETHTopUp: MotionType.GasFunderETHTopUp,
-  StethRewardProgramAdd: MotionType.StethRewardProgramAdd,
-  StethRewardProgramRemove: MotionType.StethRewardProgramRemove,
-  StethRewardProgramTopUp: MotionType.StethRewardProgramTopUp,
-  StethGasSupplyAdd: MotionType.StethGasSupplyAdd,
-  StethGasSupplyRemove: MotionType.StethGasSupplyRemove,
-  StethGasSupplyTopUp: MotionType.StethGasSupplyTopUp,
+export const MotionType = {
+  ...MotionTypeForms,
+  ...MotionTypeDisplayOnly,
 } as const
 // intentionally
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type MotionTypeForms =
-  typeof MotionTypeForms[keyof typeof MotionTypeForms]
+export type MotionType = typeof MotionType[keyof typeof MotionType]
 
 export const MotionStatus = {
   ACTIVE: 'ACTIVE',