Merge pull request #45 from lidofinance/develop

Develop to main

.env → .env.example

@@ -1,11 +1,15 @@
+# EL_RPC_URLS_{CHAIN_ID} list or URLs delimeted by commas, first entry is primary, else are fallbacks 
+EL_RPC_URLS_1=
+EL_RPC_URLS_5=
+
+# depracated
 # https://{NETWORK}.infura.io/v3/{INFURA_API_KEY}
 INFURA_API_KEY=
-
 # https://eth-{NETWORK}.alchemyapi.io/v2/{ALCHEMY_API_KEY}
 ALCHEMY_API_KEY=
 
 # supported networks for connecting wallet
-SUPPORTED_CHAINS=1,4,5
+SUPPORTED_CHAINS=1,5
 
 # this chain uses when a wallet is not connected
 DEFAULT_CHAIN=1

.github/workflows/tests.yml

@@ -20,7 +20,7 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha }}
 

README.md

@@ -7,7 +7,7 @@ A widget for submitting Ether to the pool based on [Lido Frontend Template](http
 - 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.
+This project requires an .env file which is distributed via private communication channels. A sample can be found in .env.example
 
 ### Development
 
@@ -17,7 +17,7 @@ Step 1. Copy the contents of `sample.env` to `.env.local`
 cp sample.env .env.local
 ```
 
-Step 2. Fill out the `.env.local`. You may need to sign up for [Infura](https://infura.io/) or [Alchemy](https://www.alchemy.com/), if you haven't already, to be able to use Ethereum JSON RPC connection.
+Step 2. Fill out the `.env.local`. You will need to provide RPC provider urls with keys included.
 
 Step 3. Install dependencies
 

features/rewards/components/CurrencySelector.tsx

@@ -8,21 +8,30 @@ import { STORAGE_CURRENCY_KEY } from 'config';
 
 const StyledSelect = styled(Select)`
   height: 32px;
-  width: 70px;
+  width: 72px;
 
   border-radius: 6px;
 
-  & span {
-    padding: unset;
+  & > span {
+    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;
   }
 
   & input {
+    display: block;
     font-size: 12px;
     font-weight: 400;
+    vertical-align: middle;
+    line-height: 1em;
   }
 
-  & span:nth-of-type(2) {
-    padding-left: unset;
+  & span span {
+    padding-left: 0;
+  }
+`;
+
+const OptionStyled = styled(Option)`
+  span {
+    font-weight: 400;
   }
 `;
 
@@ -53,9 +62,9 @@ const CurrencySelector = ({ currency, onChange }: CurrencySelectorProps) => (
       variant="small"
     >
       {CURRENCIES.map((cur) => (
-        <Option key={cur.id} value={cur.id}>
+        <OptionStyled key={cur.id} value={cur.id}>
           {cur.code}
-        </Option>
+        </OptionStyled>
       ))}
     </StyledSelect>
   </Box>

features/rewards/components/export/Exportstyled.ts

@@ -4,8 +4,7 @@ import { Button } from '@lidofinance/lido-ui';
 export const ButtonStyle = styled(Button)`
   font-weight: 400;
   height: 32px;
-
-  width: 83px;
   min-width: unset;
-  padding: unset;
+  padding: 0 15px;
+  font-size: 12px;
 `;

next.config.mjs

@@ -4,8 +4,22 @@ import buildDynamics from './scripts/build-dynamics.mjs';
 buildDynamics();
 
 const basePath = process.env.BASE_PATH;
-const infuraApiKey = process.env.INFURA_API_KEY;
-const alchemyApiKey = process.env.ALCHEMY_API_KEY;
+// TODO: deprecate old envs
+const infuraKey = process.env.INFURA_API_KEY;
+const alchemyKey = process.env.ALCHEMY_API_KEY;
+
+const rpcUrls_1 = [
+  ...(process.env.EL_RPC_URLS_1?.split(',') ?? []),
+  alchemyKey && `https://eth-mainnet.alchemyapi.io/v2/${alchemyKey}`,
+  infuraKey && `https://mainnet.infura.io/v3/${infuraKey}`,
+].filter(Boolean);
+
+const rpcUrls_5 = [
+  ...(process.env.EL_RPC_URLS_5?.split(',') ?? []),
+  alchemyKey && `https://eth-goerli.alchemyapi.io/v2/${alchemyKey}`,
+  infuraKey && `https://goerli.infura.io/v3/${infuraKey}`,
+].filter(Boolean);
+
 const ethAPIBasePath = process.env.ETH_API_BASE_PATH;
 
 const ethplorerApiKey = process.env.ETHPLORER_API_KEY;
@@ -20,11 +34,7 @@ const cspReportOnly = process.env.CSP_REPORT_ONLY;
 const cspReportUri = process.env.CSP_REPORT_URI;
 
 const subgraphMainnet = process.env.SUBGRAPH_MAINNET;
-const subgraphRopsten = process.env.SUBGRAPH_ROPSTEN;
-const subgraphRinkeby = process.env.SUBGRAPH_RINKEBY;
 const subgraphGoerli = process.env.SUBGRAPH_GOERLI;
-const subgraphKovan = process.env.SUBGRAPH_KOVAN;
-const subgraphKintsugi = process.env.SUBGRAPH_KINTSUGI;
 
 const subgraphRequestTimeout = process.env.SUBGRAPH_REQUEST_TIMEOUT;
 
@@ -106,8 +116,8 @@ export default withBundleAnalyzer({
   },
   serverRuntimeConfig: {
     basePath,
-    infuraApiKey,
-    alchemyApiKey,
+    rpcUrls_1,
+    rpcUrls_5,
     ethplorerApiKey,
     cloudflareApiToken,
     cloudflareAccountId,
@@ -116,11 +126,7 @@ export default withBundleAnalyzer({
     cspReportOnly,
     cspReportUri,
     subgraphMainnet,
-    subgraphRopsten,
-    subgraphRinkeby,
     subgraphGoerli,
-    subgraphKovan,
-    subgraphKintsugi,
     subgraphRequestTimeout,
     rateLimit,
     rateLimitTimeFrame,

utilsApi/rpcUrls.ts

@@ -2,15 +2,9 @@ import getConfig from 'next/config';
 import { CHAINS } from 'utils/chains';
 
 const { serverRuntimeConfig } = getConfig();
-const { infuraApiKey, alchemyApiKey } = serverRuntimeConfig;
+const { rpcUrls_1, rpcUrls_5 } = serverRuntimeConfig;
 
 export const rpcUrls: Record<CHAINS, [string, ...string[]]> = {
-  [CHAINS.Mainnet]: [
-    `https://eth-mainnet.alchemyapi.io/v2/${alchemyApiKey}`,
-    `https://mainnet.infura.io/v3/${infuraApiKey}`,
-  ],
-  [CHAINS.Goerli]: [
-    `https://eth-goerli.alchemyapi.io/v2/${alchemyApiKey}`,
-    `https://goerli.infura.io/v3/${infuraApiKey}`,
-  ],
+  [CHAINS.Mainnet]: rpcUrls_1,
+  [CHAINS.Goerli]: rpcUrls_5,
 };