Merge pull request #157 from lidofinance/develop

Develop to main

.env.example

@@ -3,6 +3,11 @@ EL_RPC_URLS_1=
 EL_RPC_URLS_5=
 EL_RPC_URLS_17000=
 
+# IPFS prefill RPC URLs - list of URLs delimited by commas
+PREFILL_UNSAFE_EL_RPC_URLS_1=
+PREFILL_UNSAFE_EL_RPC_URLS_5=
+PREFILL_UNSAFE_EL_RPC_URLS_17000=
+
 # supported networks for connecting wallet
 SUPPORTED_CHAINS=1,17000
 
@@ -12,7 +17,6 @@ DEFAULT_CHAIN=1
 # api key for ethplorer for token data
 ETHPLORER_API_KEY=freekey
 
-
 # comma-separated trusted hosts for Content Security Policy
 # e.g. http://localhost:PORT for local development
 CSP_TRUSTED_HOSTS=https://*.lido.fi
@@ -50,3 +54,6 @@ MATOMO_URL=
 
 # WalletConnect project ID
 WALLETCONNECT_PROJECT_ID=
+
+# ETH Stake Widget API for IPFS mode
+WIDGET_API_BASE_PATH_FOR_IPFS=

.github/workflows/ci-ipfs-test-production.yml

@@ -39,7 +39,7 @@ jobs:
           REWARDS_BACKEND_BASE_PATH: ${{ vars.REWARDS_BACKEND_BASE_PATH }}
           WQ_API_BASE_PATH: ${{ vars.WQ_API_BASE_PATH }}
           ETH_API_BASE_PATH: ${{ vars.ETH_API_BASE_PATH }}
-          PREFILL_UNSAFE_EL_RPC_URLS: ${{ secrets.PREFILL_UNSAFE_EL_RPC_URLS }}
+          PREFILL_UNSAFE_EL_RPC_URLS_1: ${{ secrets.PREFILL_UNSAFE_EL_RPC_URLS_1 }}
           WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
       - uses: actions/upload-artifact@v3
         with:

.github/workflows/ci-ipfs-testnet.yml

@@ -39,7 +39,9 @@ jobs:
           REWARDS_BACKEND_BASE_PATH: ${{ vars.REWARDS_BACKEND_BASE_PATH }}
           WQ_API_BASE_PATH: ${{ vars.WQ_API_BASE_PATH }}
           ETH_API_BASE_PATH: ${{ vars.ETH_API_BASE_PATH }}
-          PREFILL_UNSAFE_EL_RPC_URLS: ${{ secrets.PREFILL_UNSAFE_EL_RPC_URLS }}
+          PREFILL_UNSAFE_EL_RPC_URLS_1: ${{ secrets.PREFILL_UNSAFE_EL_RPC_URLS_1 }}
+          PREFILL_UNSAFE_EL_RPC_URLS_5: ${{ secrets.PREFILL_UNSAFE_EL_RPC_URLS_5 }}
+          PREFILL_UNSAFE_EL_RPC_URLS_17000: ${{ secrets.PREFILL_UNSAFE_EL_RPC_URLS_17000 }}
           WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
       - uses: actions/upload-artifact@v3
         with:

.github/workflows/ci-ipfs.yml

@@ -55,7 +55,7 @@ jobs:
           REWARDS_BACKEND_BASE_PATH: ${{ vars.REWARDS_BACKEND_BASE_PATH }}
           WQ_API_BASE_PATH: ${{ vars.WQ_API_BASE_PATH }}
           ETH_API_BASE_PATH: ${{ vars.ETH_API_BASE_PATH }}
-          PREFILL_UNSAFE_EL_RPC_URLS: ${{ secrets.PREFILL_UNSAFE_EL_RPC_URLS }}
+          PREFILL_UNSAFE_EL_RPC_URLS_1: ${{ secrets.PREFILL_UNSAFE_EL_RPC_URLS_1 }}
           WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
       - uses: actions/upload-artifact@v3
         with:

README.md

@@ -4,7 +4,7 @@ A widget for submitting Ether to the pool based on [Lido Frontend Template](http
 
 ### Pre-requisites
 
-- Node.js v16+
+- Node.js v16
 - Yarn package manager
 
 This project requires an .env file which is distributed via private communication channels. A sample can be found in .env.example
@@ -31,6 +31,12 @@ Step 4. Start the development server
 yarn dev
 ```
 
+for IPFS mode below:
+
+```bash
+yarn dev-ipfs # will start with HMR
+```
+
 ### Environment variables
 
 Note! Avoid using `NEXT_PUBLIC_` environment variables as it hinders our CI pipeline. Please use server-side environment variables and pass them to the client using `getInitialProps` in `_app.js`.
@@ -52,6 +58,12 @@ git commit -m "feat: dark theme"
 yarn build && yarn start
 ```
 
+for IPFS mode below:
+
+```bash
+yarn build-ipfs
+```
+
 ## Adding a new route API
 
 - create a new file in `pages/api/` folder

config/index.ts

@@ -6,12 +6,14 @@ export * from './api';
 export * from './cache';
 export * from './estimate';
 export * from './locale';
+export * from './ipfs';
 export * from './metrics';
 export * from './rpc';
 export * from './steth';
 export * from './storage';
 export * from './text';
 export * from './tx';
+export * from './types';
 export * from './units';
 export * from './metrics';
 export * from './rateLimit';

config/ipfs.ts

@@ -0,0 +1,7 @@
+import getConfig from 'next/config';
+import dynamics from './dynamics';
+
+const { serverRuntimeConfig } = getConfig();
+const { basePath = '' } = serverRuntimeConfig;
+
+export const BASE_PATH_ASSET = dynamics.ipfsMode ? '.' : basePath;

config/matomoClickEvents.ts

@@ -64,7 +64,7 @@ export const enum MATOMO_CLICK_EVENTS_TYPES {
 export const MATOMO_CLICK_EVENTS: Record<
   MATOMO_CLICK_EVENTS_TYPES,
   MatomoEventType
-> = {
+  > = {
   // Global
   [MATOMO_CLICK_EVENTS_TYPES.connectWallet]: [
     'Ethereum_Staking_Widget',

config/rpc.ts

@@ -1,12 +1,55 @@
+import { useCallback } from 'react';
+import invariant from 'tiny-invariant';
+import { useSDK } from '@lido-sdk/react';
+
+import { useClientConfig } from 'providers/client-config';
 import { CHAINS } from 'utils/chains';
 
+import dynamics from './dynamics';
+
 export const getBackendRPCPath = (chainId: string | number): string => {
   const BASE_URL = typeof window === 'undefined' ? '' : window.location.origin;
   return `${BASE_URL}/api/rpc?chainId=${chainId}`;
 };
 
-export const backendRPC = {
-  [CHAINS.Mainnet]: getBackendRPCPath(CHAINS.Mainnet),
-  [CHAINS.Goerli]: getBackendRPCPath(CHAINS.Goerli),
-  [CHAINS.Holesky]: getBackendRPCPath(CHAINS.Holesky),
+export const useGetRpcUrlByChainId = () => {
+  const clientConfig = useClientConfig();
+
+  return useCallback(
+    (chainId: CHAINS) => {
+      // Needs this condition 'cause in 'providers/web3.tsx' we add `wagmiChains.polygonMumbai` to supportedChains
+      // so, here chainId = 80001 is arriving which to raises an invariant
+      // chainId = 1 we need anytime!
+      if (
+        chainId !== CHAINS.Mainnet &&
+        !clientConfig.supportedChainIds.includes(chainId)
+      ) {
+        // Has no effect on functionality. Just a fix.
+        // Return empty string as stub
+        // (see: 'providers/web3.tsx' --> jsonRpcBatchProvider --> getStaticRpcBatchProvider)
+        return '';
+      }
+
+      if (dynamics.ipfsMode) {
+        const rpc =
+          clientConfig.savedClientConfig.rpcUrls[chainId] ||
+          clientConfig.prefillUnsafeElRpcUrls[chainId]?.[0];
+
+        invariant(rpc, '[useGetRpcUrlByChainId] RPC is required!');
+        return rpc;
+      } else {
+        return (
+          clientConfig.savedClientConfig.rpcUrls[chainId] ||
+          getBackendRPCPath(chainId)
+        );
+      }
+    },
+    [clientConfig],
+  );
+};
+
+export const useRpcUrl = () => {
+  const { chainId } = useSDK();
+  const getRpcUrlByChainId = useGetRpcUrlByChainId();
+  return getRpcUrlByChainId(chainId as number);
 };

config/storage.ts

@@ -2,3 +2,5 @@ export const STORAGE_TERMS_KEY = 'lido-terms-agree';
 export const STORAGE_THEME_AUTO_KEY = 'lido-theme-auto';
 export const STORAGE_THEME_MANUAL_KEY = 'lido-theme-manual';
 export const STORAGE_CURRENCY_KEY = 'lido-currency';
+export const STORAGE_CLIENT_CONFIG = 'lido-client-config';
+export const STORAGE_IPFS_INFO_DISMISS = 'lido-ipfs-info-dismiss';

config/types.ts

@@ -0,0 +1,23 @@
+import { CHAINS } from 'utils/chains';
+
+export type EnvConfigRaw = {
+  defaultChain: string | number;
+  supportedChains: number[];
+  prefillUnsafeElRpcUrls1: string[];
+  prefillUnsafeElRpcUrls5: string[];
+  prefillUnsafeElRpcUrls17000: string[];
+  ipfsMode: boolean;
+  walletconnectProjectId: string;
+};
+
+export type EnvConfigParsed = {
+  defaultChain: number;
+  supportedChainIds: number[];
+  prefillUnsafeElRpcUrls: {
+    [CHAINS.Mainnet]: string[];
+    [CHAINS.Goerli]: string[];
+    [CHAINS.Holesky]: string[];
+  };
+  ipfsMode: boolean;
+  walletconnectProjectId: string;
+};

config/urls.ts

@@ -0,0 +1,16 @@
+// TODO: path + basePath
+export const HOME_PATH = '/';
+export const WRAP_PATH = '/wrap';
+export const WRAP_UNWRAP_PATH = '/wrap/unwrap';
+export const WITHDRAWALS_PATH = '/withdrawals';
+export const WITHDRAWALS_REQUEST_PATH = '/withdrawals/request';
+export const WITHDRAWALS_CLAIM_PATH = '/withdrawals/claim';
+export const REWARDS_PATH = '/rewards';
+export const SETTINGS_PATH = '/settings';
+export const REFERRAL_PATH = '/referral';
+
+export const getPathWithoutFirstSlash = (path: string): string => {
+  if (path.length === 0 || path[0] !== '/') return path;
+
+  return path.slice(1, path.length);
+};

env-dynamics.mjs

@@ -32,3 +32,18 @@ export const ethAPIBasePath = process.env.ETH_API_BASE_PATH;
 export const wqAPIBasePath = process.env.WQ_API_BASE_PATH;
 /** @type string */
 export const walletconnectProjectId = process.env.WALLETCONNECT_PROJECT_ID;
+
+/** @type boolean */
+export const ipfsMode = toBoolean(process.env.IPFS_MODE);
+
+/** @type string[] */
+export const prefillUnsafeElRpcUrls1 = process.env.PREFILL_UNSAFE_EL_RPC_URLS_1?.split(',') ?? [];
+
+/** @type string[] */
+export const prefillUnsafeElRpcUrls5 = process.env.PREFILL_UNSAFE_EL_RPC_URLS_5?.split(',') ?? [];
+
+/** @type string[] */
+export const prefillUnsafeElRpcUrls17000 = process.env.PREFILL_UNSAFE_EL_RPC_URLS_17000?.split(',') ?? [];
+
+/** @type string */
+export const widgetApiBasePathForIpfs = process.env.WIDGET_API_BASE_PATH_FOR_IPFS;

features/home/home-page-regular.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import Head from 'next/head';
+
+import { Layout } from 'shared/components';
+import NoSSRWrapper from 'shared/components/no-ssr-wrapper';
+import { useWeb3Key } from 'shared/hooks/useWeb3Key';
+
+import { Wallet } from './wallet/wallet';
+import { StakeForm } from './stake-form/stake-form';
+import { StakeFaq } from './stake-faq/stake-faq';
+import { LidoStats } from './lido-stats/lido-stats';
+
+const HomePageRegular: FC = () => {
+  const key = useWeb3Key();
+
+  return (
+    <>
+      <Layout
+        title="Stake Ether"
+        subtitle="Stake ETH and receive stETH while staking."
+      >
+        <Head>
+          <title>Stake with Lido | Lido</title>
+        </Head>
+
+        <NoSSRWrapper>
+          <Wallet key={'wallet' + key} />
+          <StakeForm key={'form' + key} />
+        </NoSSRWrapper>
+        <LidoStats />
+        <StakeFaq />
+      </Layout>
+    </>
+  );
+};
+
+export default HomePageRegular;

features/home/index.ts

@@ -1,5 +1,5 @@
 export { StakeForm } from './stake-form/stake-form';
-export { OneinchInfo } from './oneinch-info/oneinch-info';
+export { OneInchInfo } from './one-inch-info/one-inch-info';
 export { LidoStats } from './lido-stats/lido-stats';
 export { Wallet } from './wallet/wallet';
 export { StakeFaq } from './stake-faq/stake-faq';

features/home/lido-stats/lido-stats-item.tsx

@@ -0,0 +1,32 @@
+import { FC, memo, PropsWithChildren, ReactNode } from 'react';
+import { DataTableRow } from '@lidofinance/lido-ui';
+import { DATA_UNAVAILABLE } from 'config';
+
+type LidoStatsItemProps = {
+  show: boolean;
+  loading: boolean;
+  dataTestId: string;
+  title: ReactNode;
+  highlight?: boolean | undefined;
+};
+
+export const LidoStatsItem: FC<PropsWithChildren<LidoStatsItemProps>> = memo(
+  (props) => {
+    const { show, loading, dataTestId, title, children, highlight } = props;
+
+    if (!show) {
+      return null;
+    }
+
+    return (
+      <DataTableRow
+        title={title}
+        loading={loading}
+        data-testid={dataTestId}
+        highlight={highlight}
+      >
+        {children || DATA_UNAVAILABLE}
+      </DataTableRow>
+    );
+  },
+);