Merge pull request #82 from lidofinance/fix/rpc-config

Fix: rework rpc config
lidofinance · Sep 14, 2023 · 315a0d5 · 315a0d5
2 parents ed85394 + 030312e
commit 315a0d5
Show file tree

Hide file tree

Showing 22 changed files with 3,013 additions and 2,303 deletions.
diff --git a/apps/demo-react/.env b/apps/demo-react/.env
@@ -0,0 +1,2 @@
+# https://eth-{NETWORK}.alchemyapi.io/v2/{ALCHEMY_API_KEY}
+ALCHEMY_API_KEY=-_tSz4KA-fGCEBIdfYfP2etFFXzdKN74
diff --git a/apps/demo-react/components/ConnectDisconnect.tsx b/apps/demo-react/components/ConnectDisconnect.tsx
@@ -1,29 +1,40 @@
-import { Button } from 'reef-knot/ui-react';
-import { useDisconnect } from 'reef-knot/web3-react';
+import { useDisconnect, useWeb3 } from 'reef-knot/web3-react';
+import { Text, AddressBadge, Button } from '@lidofinance/lido-ui';
 import { FlexContainer } from '../styles/global';
 
 const ConnectDisconnect = (props: { handleOpen: () => void }) => {
   const { handleOpen } = props;
   const { disconnect } = useDisconnect();
+  const { account } = useWeb3();
   const handleDisconnect = () => {
     disconnect?.();
   };
 
   return (
-    <FlexContainer>
-      <Button
-        style={{ maxWidth: '300px', alignSelf: 'center' }}
-        onClick={handleOpen}
-      >
-        Connect wallet
-      </Button>
-      <Button
-        style={{ maxWidth: '200px', marginTop: '10px', alignSelf: 'center' }}
-        variant="text"
-        onClick={handleDisconnect}
-      >
-        Disconnect
-      </Button>
+    <FlexContainer style={{ marginBottom: '40px' }}>
+      {account ? (
+        <>
+          <Text color="success">Wallet connected</Text>
+          <AddressBadge address={account} color="success" />
+        </>
+      ) : (
+        <Button
+          style={{ maxWidth: '300px', alignSelf: 'center' }}
+          onClick={handleOpen}
+        >
+          Connect Wallet
+        </Button>
+      )}
+      {account && (
+        <Button
+          style={{ maxWidth: '200px', marginTop: '10px', alignSelf: 'center' }}
+          variant="text"
+          onClick={handleDisconnect}
+          color="warning"
+        >
+          Disconnect
+        </Button>
+      )}
     </FlexContainer>
   );
 };

diff --git a/apps/demo-react/components/ProviderWeb3WithProps.tsx b/apps/demo-react/components/ProviderWeb3WithProps.tsx
@@ -1,34 +1,54 @@
-import { ReactNode } from 'react';
+import React from 'react';
+import { WagmiConfig, createClient, configureChains, Chain } from 'wagmi';
 import { goerli, mainnet } from 'wagmi/chains';
-import { ProviderWeb3, useWeb3 } from 'reef-knot/web3-react';
-import { ProviderSDK } from '@lido-sdk/react';
-import { rpc } from '../util/rpc';
+import { ProviderWeb3 } from 'reef-knot/web3-react';
+import { getConnectors } from 'reef-knot/core-react';
+import { getStaticRpcBatchProvider } from '@lido-sdk/providers';
+import { getRPCPath } from '../util/contractTestingUtils';
+import { rpcUrlsString } from '../util/rpc';
 import { WC_PROJECT_ID } from '../util/walletconnectProjectId';
 
-const SDKProvider: React.FC = ({ children }) => {
-  const web3 = useWeb3();
-  return (
-    <ProviderSDK
-      chainId={goerli.id}
-      supportedChainIds={[goerli.id, mainnet.id]}
-      providerWeb3={web3.library}
-      account={web3.account ?? undefined}
-    >
-      {children}
-    </ProviderSDK>
-  );
-};
+const supportedChains = [goerli, mainnet];
+const supportedChainsIds = supportedChains.map((chain) => chain.id);
+const defaultChainId = goerli.id;
+
+const jsonRcpBatchProvider = (chain: Chain) => ({
+  provider: () =>
+    getStaticRpcBatchProvider(chain.id, getRPCPath(chain.id), undefined, 12000),
+  chain,
+});
+
+const { chains, provider, webSocketProvider } = configureChains(
+  supportedChains,
+  [jsonRcpBatchProvider],
+);
+
+const connectors = getConnectors({
+  rpc: rpcUrlsString,
+  walletconnectProjectId: WC_PROJECT_ID,
+  chains,
+  defaultChain: goerli,
+});
+
+const client = createClient({
+  connectors,
+  autoConnect: true,
+  provider,
+  webSocketProvider,
+});
 
-const ProviderWeb3WithProps = (props: { children: ReactNode }) => {
+const ProviderWeb3WithProps: React.FC = ({ children }) => {
   return (
-    <ProviderWeb3
-      defaultChainId={goerli.id}
-      supportedChainIds={[goerli.id, mainnet.id]}
-      rpc={rpc}
-      walletconnectProjectId={WC_PROJECT_ID}
-    >
-      <SDKProvider>{props.children}</SDKProvider>
-    </ProviderWeb3>
+    <WagmiConfig client={client}>
+      <ProviderWeb3
+        defaultChainId={defaultChainId}
+        supportedChainIds={supportedChainsIds}
+        rpc={rpcUrlsString}
+        walletconnectProjectId={WC_PROJECT_ID}
+      >
+        {children}
+      </ProviderWeb3>
+    </WagmiConfig>
   );
 };
 export default ProviderWeb3WithProps;
diff --git a/apps/demo-react/components/Wagmi.tsx b/apps/demo-react/components/Wagmi.tsx
diff --git a/apps/demo-react/components/contractTesting/Stake.tsx b/apps/demo-react/components/contractTesting/Stake.tsx
@@ -8,31 +8,42 @@ import {
   H3,
   DataTableRow,
   DataTable,
+  External,
 } from '@lidofinance/lido-ui';
-import {
-  useContractSWR,
-  useSDK,
-  useSTETHBalance,
-  useSTETHContractRPC,
-  useSTETHContractWeb3,
-} from '@lido-sdk/react';
-import { useWeb3 } from 'reef-knot/web3-react';
+import { SWRResponse, useContractSWR } from '@lido-sdk/react';
 import { parseEther } from 'ethers/lib/utils.js';
 import { AddressZero } from '@ethersproject/constants';
 import { BigNumber } from 'ethers';
 
-import { formatBalance } from '../../util/contractTestingUtils';
+import { StethAbi } from '@lido-sdk/contracts';
+import { Web3Provider } from '@ethersproject/providers';
+import { formatBalance, getTxUrl } from '../../util/contractTestingUtils';
 import { BlueWrapper } from '../info';
-import {
-  STETH_SUBMIT_GAS_LIMIT_DEFAULT,
-  useStethSubmitGasLimit,
-} from '../../hooks/useStethSubmitGasLimit';
-import { useTxCostInUsd } from '../../hooks/txCost';
+import { STETH_SUBMIT_GAS_LIMIT_DEFAULT } from '../../hooks/useStethSubmitGasLimit';
 import { InputDecoratorMaxButton } from '../input-decorator-max-button';
+import { LinkStyled } from './styles';
 
 const SUBMIT_EXTRA_GAS_TRANSACTION_RATIO = 1.05;
 
-const StakeForm = () => {
+export interface StakeFormProps {
+  stakeCostInUsd: number | undefined;
+  stethBalance: SWRResponse<BigNumber>;
+  stethContractWeb3: StethAbi | null;
+  chainId: number | undefined;
+  account: string | null | undefined;
+  providerWeb3: Web3Provider | undefined;
+  stethContractRpc: StethAbi;
+}
+
+const StakeForm = ({
+  stakeCostInUsd,
+  stethBalance,
+  stethContractWeb3,
+  chainId,
+  account,
+  providerWeb3,
+  stethContractRpc,
+}: StakeFormProps) => {
   const defaultWrapInputValue = {
     eth: '0.00001',
     steth: '0.00001',
@@ -49,15 +60,6 @@ const StakeForm = () => {
   const [txError, setTxError] = useState('');
   const [stakeGasError, setStakeGasError] = useState('');
 
-  const submitGasLimit = useStethSubmitGasLimit();
-  const txCostInUsd = useTxCostInUsd({ gasLimit: submitGasLimit });
-  const stethBalance = useSTETHBalance();
-  const stethContractWeb3 = useSTETHContractWeb3();
-
-  const { chainId, account } = useWeb3();
-  const { providerWeb3 } = useSDK();
-  const contractRpc = useSTETHContractRPC();
-
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue({
       ...inputValue,
@@ -66,7 +68,7 @@ const StakeForm = () => {
   };
 
   const lidoFee = useContractSWR({
-    contract: contractRpc,
+    contract: stethContractRpc,
     method: 'getFee',
   });
 
@@ -159,7 +161,7 @@ const StakeForm = () => {
     void providerWeb3
       ?.getBalance(account || '')
       .then((data) => setWalletBalance(formatBalance(data, 5)), console.log);
-  }, [account, providerWeb3]);
+  }, [account]);
 
   return (
     <BlueWrapper>
@@ -184,7 +186,6 @@ const StakeForm = () => {
         value={referralAddress}
         onChange={(e) => setReferralAddress(e.target.value)}
       />
-
       <Input
         type="number"
         max={STETH_SUBMIT_GAS_LIMIT_DEFAULT}
@@ -210,8 +211,8 @@ const StakeForm = () => {
         <DataTableRow title="Your wallet balance" loading={!stethBalance.data}>
           {`${walletBalance} ETH`}
         </DataTableRow>
-        <DataTableRow title="Max TX cost" loading={!txCostInUsd}>
-          {`${txCostInUsd?.toFixed(2)}$`}
+        <DataTableRow title="Max TX cost" loading={!stakeCostInUsd}>
+          {`${stakeCostInUsd?.toFixed(2)}$`}
         </DataTableRow>
         <DataTableRow title="Lido reward fee" loading={!lidoFee.data}>
           {`${(lidoFee.data as any) / 100} %`}
@@ -226,14 +227,20 @@ const StakeForm = () => {
               {stakeData.gasUsed.toNumber()} WEI
             </DataTableRow>
             <DataTableRow title="Transaction status">
-              {stakeData.status ? 'success' : 'failed'}
+              <LinkStyled href={getTxUrl(stakeData.transactionHash, chainId)}>
+                <External />
+              </LinkStyled>
             </DataTableRow>
           </DataTable>
           <Divider />
         </>
       )}
       {!stakeData.blockHash && <Text color="error">{txError}</Text>}
-      <Button loading={isLoading || isStakeGasLoading} onClick={stake}>
+      <Button
+        loading={isLoading || isStakeGasLoading}
+        onClick={stake}
+        disabled={!account}
+      >
         Stake
       </Button>
     </BlueWrapper>