[UI-666] Integrate lido warehouse packages

config/rpc.ts

@@ -1,5 +1,5 @@
-import { CHAINS } from 'config/chains';
 import getConfig from 'next/config';
+import { CHAINS } from 'config/chains';
 
 const { serverRuntimeConfig } = getConfig();
 const { infuraApiKey, alchemyApiKey } = serverRuntimeConfig;

features/aragon/aragonFormDisconnected.tsx

@@ -1,13 +1,13 @@
+import { ConnectWalletButton } from '@lidofinance/eth-ui-wallet-modal';
 import { InputGroupStyled, InputNumber, Main } from 'shared/ui';
-import { WalletConnect } from 'features/walletModal';
 
 export const AragonFormDisconnected = () => {
   return (
     <Main.Card>
       <InputGroupStyled fullwidth>
         <InputNumber fullwidth label="Vote ID" disabled />
       </InputGroupStyled>
-      <WalletConnect fullwidth />
+      <ConnectWalletButton fullwidth />
     </Main.Card>
   );
 };

features/aragon/aragonWallet.tsx

@@ -1,14 +1,17 @@
+import { useWeb3 } from 'reef-knot/web3-react';
+
 import { InlineLoader } from '@lidofinance/lido-ui';
+import { WALLET_MODAL, useModal } from '@lidofinance/eth-ui-wallet-modal';
+
 import { useAccountVestings } from 'features/vesting';
-import { MODAL, useModal } from 'features/walletModal';
-import { useWeb3 } from 'reef-knot/web3-react';
 import { AddressBadge, Main } from 'shared/ui';
+
 import { AddressBadgeWrapper, AragonWalletStyle } from './aragonWalletStyles';
 
 export const AragonWallet = () => {
   const { data: vestings } = useAccountVestings();
   const { account } = useWeb3();
-  const { openModal } = useModal(MODAL.wallet);
+  const { openModal } = useModal(WALLET_MODAL.wallet);
 
   return (
     <AragonWalletStyle>

features/claim/claimFormDisconnected.tsx

@@ -1,5 +1,6 @@
 import { Button, Input } from '@lidofinance/lido-ui';
-import { WalletConnect } from 'features/walletModal';
+import { ConnectWalletButton } from '@lidofinance/eth-ui-wallet-modal';
+
 import { InputGroupStyled, Main } from 'shared/ui';
 
 export const ClaimFormDisconnected = () => {
@@ -18,7 +19,7 @@ export const ClaimFormDisconnected = () => {
           placeholder="0"
         />
       </InputGroupStyled>
-      <WalletConnect fullwidth />
+      <ConnectWalletButton fullwidth />
     </Main.Card>
   );
 };

features/claim/wallet.tsx

@@ -1,25 +1,29 @@
-import { InlineLoader } from '@lidofinance/lido-ui';
+import { FC, useMemo } from 'react';
 import { useWeb3 } from 'reef-knot/web3-react';
+
+import { InlineLoader } from '@lidofinance/lido-ui';
+import { WALLET_MODAL, useModal } from '@lidofinance/eth-ui-wallet-modal';
+import { FormatToken, TokenToWallet } from '@lidofinance/eth-ui-primitives';
+
 import {
   useAccountVestings,
   useVestingsLocked,
   useVestingsUnclaimed,
   useVestingToken,
 } from 'features/vesting';
+import { AddressBadge, Main } from 'shared/ui';
+import { useLdoPrice } from 'shared/lib/useLdoPrice';
+
 import {
   AddressBadgeWrapper,
   SecondaryText,
   TokensAmount,
   AmountTitle,
 } from './walletStyles';
-import { FC, useMemo } from 'react';
-import { AddressBadge, FormatToken, Main, TokenToWallet } from 'shared/ui';
-import { MODAL, useModal } from 'features/walletModal';
-import { useLdoPrice } from 'shared/lib/useLdoPrice';
 
 export const Wallet: FC = () => {
   const { account } = useWeb3();
-  const { openModal } = useModal(MODAL.wallet);
+  const { openModal } = useModal(WALLET_MODAL.wallet);
   const { data: vestings } = useAccountVestings();
   const { data: token, isLoading: tokenIsLoading } = useVestingToken();
 
@@ -99,10 +103,13 @@ export const Wallet: FC = () => {
                 <>
                   <div>
                     <TokensAmount>
-                      <FormatToken amount={locked} symbol={token?.symbol} />
+                      <FormatToken
+                        amount={locked}
+                        symbol={token?.symbol || ''}
+                      />
                     </TokensAmount>
                     &nbsp;
-                    <TokenToWallet address={token?.address} />
+                    <TokenToWallet address={token?.address || ''} />
                   </div>
                   <div>
                     {lockedAmountUsdLoading ? (

features/headerActions/headerActions.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { getChainColor } from '@lido-sdk/constants';
+import {
+  WalletButton,
+  ConnectWalletButton,
+} from '@lidofinance/eth-ui-wallet-modal';
+import { useWeb3 } from 'reef-knot/web3-react';
+import { CHAINS } from 'config/chains';
+import { HeaderWalletChainStyle } from './headerActionsStyles';
+
+export const HeaderActions: FC = () => {
+  const { active, chainId } = useWeb3();
+
+  const chainName = chainId ? CHAINS[chainId] : CHAINS.Mainnet;
+  const testNet = chainId !== CHAINS.Mainnet;
+  const showNet = testNet && active;
+
+  return (
+    <>
+      {showNet && (
+        <HeaderWalletChainStyle
+          $color={getChainColor(chainId || CHAINS.Mainnet)}
+        >
+          {chainName}
+        </HeaderWalletChainStyle>
+      )}
+      {active ? <WalletButton /> : <ConnectWalletButton size="sm" />}
+    </>
+  );
+};

features/headerActions/index.ts

@@ -0,0 +1,2 @@
+export * from './headerActions';
+export * from './headerActionsStyles';