Merge pull request #329 from lidofinance/feature/si-1376-check-all-pl…

…aces-that-used-hardcode-domain

feat: remove `*.lido.fi` hardcode domains

.env.example

@@ -1,3 +1,10 @@
+# for supporting of domain agnostic
+SELF_ORIGIN=https://stake.lido.fi
+ROOT_ORIGIN=https://lido.fi
+DOCS_ORIGIN=https://docs.lido.fi
+HELP_ORIGIN=https://help.lido.fi
+RESEARCH_ORIGIN=https://research.lido.fi
+
 # 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=

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

@@ -38,6 +38,10 @@ jobs:
         run: |
           yarn build:ipfs
         env:
+          ROOT_ORIGIN: ${{ vars.ROOT_ORIGIN }}
+          DOCS_ORIGIN: ${{ vars.DOCS_ORIGIN }}
+          HELP_ORIGIN: ${{ vars.HELP_ORIGIN }}
+          RESEARCH_ORIGIN: ${{ vars.RESEARCH_ORIGIN }}
           DEFAULT_CHAIN: ${{ vars.DEFAULT_CHAIN }}
           SUPPORTED_CHAINS: ${{ vars.SUPPORTED_CHAINS }}
           WIDGET_API_BASE_PATH_FOR_IPFS: ${{ vars.WIDGET_API_BASE_PATH_FOR_IPFS }}

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

@@ -38,6 +38,10 @@ jobs:
         run: |
           yarn build:ipfs
         env:
+          ROOT_ORIGIN: ${{ vars.ROOT_ORIGIN }}
+          DOCS_ORIGIN: ${{ vars.DOCS_ORIGIN }}
+          HELP_ORIGIN: ${{ vars.HELP_ORIGIN }}
+          RESEARCH_ORIGIN: ${{ vars.RESEARCH_ORIGIN }}
           DEFAULT_CHAIN: ${{ vars.DEFAULT_CHAIN }}
           SUPPORTED_CHAINS: ${{ vars.SUPPORTED_CHAINS }}
           WIDGET_API_BASE_PATH_FOR_IPFS: ${{ vars.WIDGET_API_BASE_PATH_FOR_IPFS }}

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

@@ -33,6 +33,10 @@ jobs:
         run: |
           yarn build:ipfs
         env:
+          ROOT_ORIGIN: ${{ vars.ROOT_ORIGIN }}
+          DOCS_ORIGIN: ${{ vars.DOCS_ORIGIN }}
+          HELP_ORIGIN: ${{ vars.HELP_ORIGIN }}
+          RESEARCH_ORIGIN: ${{ vars.RESEARCH_ORIGIN }}
           DEFAULT_CHAIN: ${{ vars.DEFAULT_CHAIN }}
           SUPPORTED_CHAINS: ${{ vars.SUPPORTED_CHAINS }}
           WIDGET_API_BASE_PATH_FOR_IPFS: ${{ vars.WIDGET_API_BASE_PATH_FOR_IPFS }}

.github/workflows/ci-ipfs.yml

@@ -42,6 +42,10 @@ jobs:
         run: |
           yarn build:ipfs
         env:
+          ROOT_ORIGIN: ${{ vars.ROOT_ORIGIN }}
+          DOCS_ORIGIN: ${{ vars.DOCS_ORIGIN }}
+          HELP_ORIGIN: ${{ vars.HELP_ORIGIN }}
+          RESEARCH_ORIGIN: ${{ vars.RESEARCH_ORIGIN }}
           DEFAULT_CHAIN: ${{ vars.DEFAULT_CHAIN }}
           SUPPORTED_CHAINS: ${{ vars.SUPPORTED_CHAINS }}
           WIDGET_API_BASE_PATH_FOR_IPFS: ${{ vars.WIDGET_API_BASE_PATH_FOR_IPFS }}

consts/external-links.ts

@@ -1,5 +1,6 @@
-export const LINK_ADD_NFT_GUIDE =
-  'https://help.lido.fi/en/articles/7858367-how-do-i-add-the-lido-nft-to-metamask';
+import { config } from 'config';
+
+export const LINK_ADD_NFT_GUIDE = `${config.helpOrigin}/en/articles/7858367-how-do-i-add-the-lido-nft-to-metamask`;
 
 export const OPEN_OCEAN_REFERRAL_ADDRESS =
   '0xbb1263222b2c020f155d409dba05c4a3861f18f8';

env-dynamics.mjs

@@ -18,6 +18,26 @@ const toBoolean = (val) => {
 /** @type boolean */
 export const ipfsMode = toBoolean(process.env.IPFS_MODE);
 
+/** @type string */
+export const selfOrigin = process.env.SELF_ORIGIN || 'https://stake.lido.fi';
+// Fix in the build time (build time don't have env vars)
+
+/** @type string */
+export const rootOrigin = process.env.ROOT_ORIGIN || 'https://lido.fi';
+// Fix in the build time (build time don't have env vars)
+
+/** @type string */
+export const docsOrigin = process.env.DOCS_ORIGIN || 'https://docs.lido.fi';
+// Fix in the build time (build time don't have env vars)
+
+/** @type string */
+export const helpOrigin = process.env.HELP_ORIGIN || 'https://help.lido.fi';
+// Fix in the build time (build time don't have env vars)
+
+/** @type string */
+export const researchOrigin = process.env.RESEARCH_ORIGIN || 'https://research.lido.fi';
+// Fix in the build time (build time don't have env vars)
+
 // Keep fallback as in 'config/get-secret-config.ts'
 /** @type number */
 export const defaultChain = parseInt(process.env.DEFAULT_CHAIN, 10) || 17000;

features/ipfs/rpc-availability-check-result-box/rpc-availability-check-result-box.tsx

@@ -1,14 +1,15 @@
 import { useCallback } from 'react';
 import { Check, Close } from '@lidofinance/lido-ui';
 
+import { config } from 'config';
 import { SETTINGS_PATH } from 'consts/urls';
 import { useIPFSInfoBoxStatuses } from 'providers/ipfs-info-box-statuses';
 import { usePrefixedPush } from 'shared/hooks/use-prefixed-history';
 import { LinkArrow } from 'shared/components/link-arrow/link-arrow';
 
 import { Wrap, RpcStatusBox, Button, Text } from './styles';
 
-export const IPFS_INFO_URL = 'https://docs.lido.fi/ipfs/about';
+export const IPFS_INFO_URL = `${config.docsOrigin}/ipfs/about`;
 
 export const RPCAvailabilityCheckResultBox = () => {
   const { isRPCAvailable, handleClickDismiss } = useIPFSInfoBoxStatuses();

features/referral/banner/banner.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { Block, Link } from '@lidofinance/lido-ui';
 
+import { config } from 'config';
 import { BannerTextStyle, BannerHeader, BannerMainTextStyle } from './styles';
 
 export const Banner: FC = () => {
@@ -19,9 +20,11 @@ export const Banner: FC = () => {
         </Link>
         partners approved by the Lido DAO are eligible for rewards. To apply to
         Lido&apos;s whitelist you could here:
-        <Link href="https://research.lido.fi/t/referral-program-whitelisting-ethereum/1039">
+        <Link
+          href={`${config.researchOrigin}/t/referral-program-whitelisting-ethereum/1039`}
+        >
           {' '}
-          https://research.lido.fi/t/referral-program-whitelisting-ethereum/1039
+          ${config.researchOrigin}/t/referral-program-whitelisting-ethereum/1039
         </Link>
       </p>
       <br />

features/rewards/components/stats/Stats.tsx

@@ -1,5 +1,6 @@
 import { Box, Link } from '@lidofinance/lido-ui';
 
+import { config } from 'config';
 import { useRewardsHistory } from 'features/rewards/hooks';
 import EthSymbol from 'features/rewards/components/EthSymbol';
 import NumberFormat from 'features/rewards/components/NumberFormat';
@@ -69,7 +70,7 @@ export const Stats: React.FC = () => {
           )}
         </Stat>
         <Title hideMobile>
-          <Link href="https://lido.fi/faq">
+          <Link href={`${config.rootOrigin}/faq`}>
             <Box
               data-testid="moreInfo"
               color="secondary"

features/stake/stake-faq/list/how-can-i-get-steth.tsx

@@ -1,9 +1,10 @@
 import { FC } from 'react';
 import { Accordion, Link as OuterLink } from '@lidofinance/lido-ui';
 
+import { config } from 'config';
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
-import { trackMatomoEvent } from 'utils/track-matomo-event';
 import { HOME_PATH } from 'consts/urls';
+import { trackMatomoEvent } from 'utils/track-matomo-event';
 import { LocalLink } from 'shared/components/local-link';
 
 export const HowCanIGetSteth: FC = () => {
@@ -30,7 +31,7 @@ export const HowCanIGetSteth: FC = () => {
         </OuterLink>
         , or in other{' '}
         <OuterLink
-          href={'https://lido.fi/lido-ecosystem?tokens=stETH&categories=Get'}
+          href={`${config.rootOrigin}/lido-ecosystem?tokens=stETH&categories=Get`}
           data-matomo={MATOMO_CLICK_EVENTS_TYPES.faqHowCanIGetStEthIntegrations}
         >
           DEX Lido integrations

features/stake/stake-faq/list/how-can-i-unstake-steth.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 
 import { Accordion, Link as OuterLink } from '@lidofinance/lido-ui';
 
+import { config } from 'config';
 import { WITHDRAWALS_CLAIM_PATH } from 'consts/urls';
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
 import { trackMatomoEvent } from 'utils/track-matomo-event';
@@ -26,7 +27,7 @@ export const HowCanIUnstakeSteth: FC = () => {
         to unstake stETH and receive ETH at a 1:1 ratio. Also, you can exchange
         stETH on{' '}
         <OuterLink
-          href="https://lido.fi/lido-ecosystem?tokens=stETH&categories=Get"
+          href={`${config.rootOrigin}/lido-ecosystem?tokens=stETH&categories=Get`}
           data-matomo={
             MATOMO_CLICK_EVENTS_TYPES.faqHowCanIUnstakeStEthIntegrations
           }

features/stake/stake-faq/list/how-can-i-use-steth.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 import { Accordion, Link } from '@lidofinance/lido-ui';
+
+import { config } from 'config';
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
 
 export const HowCanIUseSteth: FC = () => {
@@ -8,7 +10,7 @@ export const HowCanIUseSteth: FC = () => {
       <p>
         You can use your stETH as collateral, for lending, and{' '}
         <Link
-          href="https://lido.fi/lido-ecosystem"
+          href={`${config.rootOrigin}/lido-ecosystem`}
           data-matomo={MATOMO_CLICK_EVENTS_TYPES.faqHowCanIUseSteth}
         >
           more

features/stake/stake-faq/list/lido-eth-apr.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 import { Accordion, Link } from '@lidofinance/lido-ui';
+
+import { config } from 'config';
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
 
 export const LidoEthApr: FC = () => {
@@ -18,14 +20,14 @@ export const LidoEthApr: FC = () => {
       <p>
         More about Lido staking APR for Ethereum you could find on the{' '}
         <Link
-          href={'https://lido.fi/ethereum'}
+          href={`${config.rootOrigin}/ethereum`}
           data-matomo={MATOMO_CLICK_EVENTS_TYPES.faqLidoEthAprEthLandingPage}
         >
           Ethereum landing page
         </Link>{' '}
         and in our{' '}
         <Link
-          href={'https://docs.lido.fi/#liquid-staking'}
+          href={`${config.docsOrigin}/#liquid-staking`}
           data-matomo={MATOMO_CLICK_EVENTS_TYPES.faqLidoEthAprDocs}
         >
           Docs

features/stake/stake-form/wallet/limit-meter/components.tsx

@@ -1,6 +1,9 @@
 import { LIMIT_LEVEL } from 'types';
-import { LimitReachedIcon, LimitSafeIcon, LimitWarnIcon } from './icons';
+
+import { config } from 'config';
 import { TooltipHoverable } from 'shared/components';
+
+import { LimitReachedIcon, LimitSafeIcon, LimitWarnIcon } from './icons';
 import {
   Bars,
   EmptyBar,
@@ -90,7 +93,7 @@ export const LimitHelp: LimitComponent = ({ limitLevel }) => {
             stake over the global staking limit. The global limit goes down with
             each deposit but it's passively restored on each block.{' '}
             <a
-              href="https://docs.lido.fi/guides/steth-integration-guide#staking-rate-limits"
+              href={`${config.docsOrigin}/guides/steth-integration-guide#staking-rate-limits`}
               target="_blank"
               rel="noreferrer"
             >

features/withdrawals/request/transaction-modal-request/tx-stage-request-success/tx-stage-request-success.tsx

@@ -2,6 +2,7 @@ import type { BigNumber } from 'ethers';
 import { useSDK } from '@lido-sdk/react';
 import { Link, Loader } from '@lidofinance/lido-ui';
 
+import { config } from 'config';
 import { WITHDRAWALS_CLAIM_PATH } from 'consts/urls';
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
 import { trackMatomoEvent } from 'utils/track-matomo-event';
@@ -22,8 +23,7 @@ import {
   AddNftWrapper,
 } from './styles';
 
-const LINK_ADD_NFT_GUIDE =
-  'https://help.lido.fi/en/articles/7858367-how-do-i-add-the-lido-nft-to-metamask';
+const LINK_ADD_NFT_GUIDE = `${config.helpOrigin}/en/articles/7858367-how-do-i-add-the-lido-nft-to-metamask`;
 
 type TxRequestStageSuccessProps = {
   txHash: string | null;

features/withdrawals/withdrawals-faq/list/what-is-slashing.tsx

@@ -1,8 +1,9 @@
 import { Accordion, Link } from '@lidofinance/lido-ui';
+
+import { config } from 'config';
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
 
-const PENALTIES_INFO_LINK =
-  'https://help.lido.fi/en/articles/5232780-what-are-staking-validator-penalties';
+const PENALTIES_INFO_LINK = `${config.helpOrigin}/en/articles/5232780-what-are-staking-validator-penalties`;
 
 export const WhatIsSlashing: React.FC = () => {
   return (

features/wsteth/shared/wrap-faq/list/how-can-i-get-wsteth.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { Accordion, Link as OuterLink } from '@lidofinance/lido-ui';
 
+import { config } from 'config';
 import { WRAP_PATH } from 'consts/urls';
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
 import { trackMatomoEvent } from 'utils/track-matomo-event';
@@ -24,7 +25,7 @@ export const HowCanIGetWsteth: FC = () => {
         </LocalLink>{' '}
         or{' '}
         <OuterLink
-          href={'https://lido.fi/lido-ecosystem?tokens=wstETH&categories=Get'}
+          href={`${config.rootOrigin}/lido-ecosystem?tokens=wstETH&categories=Get`}
           data-matomo={MATOMO_CLICK_EVENTS_TYPES.faqHowCanIGetStEthIntegrations}
         >
           DEX Lido integrations

features/wsteth/shared/wrap-faq/list/how-can-i-use-wsteth.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 import { Accordion, Link } from '@lidofinance/lido-ui';
+
+import { config } from 'config';
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
 
 export const HowCanIUseWsteth: FC = () => {
@@ -8,14 +10,14 @@ export const HowCanIUseWsteth: FC = () => {
       <p>
         wstETH is useful across{' '}
         <Link
-          href={'https://lido.fi/lido-ecosystem?networks=arbitrum%2Coptimism'}
+          href={`${config.rootOrigin}/lido-ecosystem?networks=arbitrum%2Coptimism`}
           data-matomo={MATOMO_CLICK_EVENTS_TYPES.faqHowCanIUseWstethL2}
         >
           L2
         </Link>{' '}
         and other{' '}
         <Link
-          href={'https://lido.fi/lido-ecosystem?tokens=wstETH'}
+          href={`${config.rootOrigin}/lido-ecosystem?tokens=wstETH`}
           data-matomo={
             MATOMO_CLICK_EVENTS_TYPES.faqHowCanIUseWstethDefiProtocols
           }

package.json

@@ -38,7 +38,7 @@
     "@lidofinance/api-rpc": "^0.41.0",
     "@lidofinance/eth-api-providers": "^0.41.0",
     "@lidofinance/eth-providers": "^0.41.0",
-    "@lidofinance/lido-ui": "^3.24.0",
+    "@lidofinance/lido-ui": "^3.26.0",
     "@lidofinance/next-api-wrapper": "^0.41.0",
     "@lidofinance/next-ip-rate-limit": "^0.41.0",
     "@lidofinance/next-pages": "^0.41.0",

pages/_app.tsx

@@ -15,6 +15,7 @@ import { withCsp } from 'config/csp';
 import { SecurityStatusBanner } from 'features/ipfs';
 import { Providers } from 'providers';
 import { BackgroundGradient } from 'shared/components/background-gradient/background-gradient';
+import NoSsrWrapper from 'shared/components/no-ssr-wrapper';
 import { nprogress, COOKIES_ALLOWED_FULL_KEY } from 'utils';
 
 // Migrations old theme cookies to new cross domain cookies
@@ -55,7 +56,11 @@ const AppWrapper = (props: AppProps): JSX.Element => {
       />
       <ToastContainer />
       <MemoApp {...rest} />
-      <CookiesTooltip />
+
+      <NoSsrWrapper>
+        <CookiesTooltip privacyLink={`${config.rootOrigin}/privacy-notice`} />
+      </NoSsrWrapper>
+
       <SecurityStatusBanner />
     </Providers>
   );

pages/_document.tsx

@@ -14,8 +14,6 @@ import { config } from 'config';
 import { contentSecurityPolicy } from 'config/csp';
 import { InsertIpfsBaseScript } from 'features/ipfs/ipfs-base-script';
 
-let host = 'https://stake.lido.fi';
-
 const secureHeaders = createHeadersObject({ contentSecurityPolicy });
 const cspMetaTagContent =
   secureHeaders['Content-Security-Policy'] ??
@@ -28,10 +26,6 @@ export default class MyDocument extends Document {
     const sheet = new ServerStyleSheet();
     const originalRenderPage = ctx.renderPage;
 
-    if (ctx?.req?.headers?.host) {
-      host = `https://${ctx?.req?.headers?.host}`;
-    }
-
     try {
       ctx.renderPage = () =>
         originalRenderPage({
@@ -68,7 +62,10 @@ export default class MyDocument extends Document {
   }
 
   get metaPreviewImgUrl(): string {
-    return `${host}/lido-preview.png`;
+    const origin = config.ipfsMode
+      ? 'https://stake.lido.fi'
+      : config.selfOrigin;
+    return `${origin}/lido-preview.png`;
   }
 
   render(): JSX.Element {

pages/index.tsx

@@ -1,11 +1,13 @@
+import { GetStaticProps } from 'next';
 import { config } from 'config';
-
 import { StakePage } from 'features/stake';
 import { HomePageIpfs } from 'features/ipfs';
-import { GetStaticProps } from 'next';
+
+export default config.ipfsMode ? HomePageIpfs : StakePage;
 
 export const getStaticProps: GetStaticProps = async () => {
-  return { props: {} };
+  return {
+    props: {},
+    revalidate: 60,
+  };
 };
-
-export default config.ipfsMode ? HomePageIpfs : StakePage;