Develop to Goerli (#154)

* fix: disable banner * fix: rpc checker in ETH Widget IPFS in any chain * fix: remove 1inch withdrawals integration * fix: disable getInitialProps in infra mode * feat(AppWrapper): remove getInitialProps * feat: remove AppWrapperProps, remove passing envConfig to Providers * fix: use reef-knot 1.11.1 1. Hotfix for autoconnect 2. Remove some wallets * fix(providers): move envConfig parsing to contextValue memorized * fix: remove resolutions duplicate * feat: add link-arrow component * feat(ipfs-info-box): use link-arrow component * refactor(settings page): faq styles * feat(api rewards): cors * feat(settings): clear errors after click to reset button * fix: remove a page refresh when come to Withdrawals * fix(navigation): is active link * fix(SwitchItem): click area * chore: update yarn * feat: retern 1inch withdrawals integration * fix: dex-options placeholder amount --------- Co-authored-by: Anna <[email protected]> Co-authored-by: Evgeny Taktarov <[email protected]> Co-authored-by: Anton Shalimov <[email protected]> Co-authored-by: Alexander Khramov <[email protected]>
lidofinance · Nov 29, 2023 · a983304 · a983304
1 parent 7801249
commit a983304
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 85 deletions.
diff --git a/features/home/stake-form/stake-form.tsx b/features/home/stake-form/stake-form.tsx
@@ -26,7 +26,6 @@ import {
   DataTableRow,
   Eth,
 } from '@lidofinance/lido-ui';
-import { L2Swap } from 'shared/banners';
 import { DATA_UNAVAILABLE } from 'config';
 import { Connect } from 'shared/wallet';
 import { TxStageModal, TX_OPERATION, TX_STAGE } from 'shared/components';
@@ -220,7 +219,6 @@ export const StakeForm: FC = memo(() => {
         ) : (
           <Connect fullwidth />
         )}
-        <L2Swap />
       </FormStyled>
 
       <DataTable>

diff --git a/features/ipfs/ipfs-info-box/ipfs-info-box.tsx b/features/ipfs/ipfs-info-box/ipfs-info-box.tsx
@@ -5,16 +5,10 @@ import { useRpcUrl } from 'config/rpc';
 import { SETTINGS_PATH } from 'config/urls';
 import { usePrefixedPush } from 'shared/hooks/use-prefixed-history';
 import { useRouterPath } from 'shared/hooks/use-router-path';
+import { LinkArrow } from 'shared/components/link-arrow/link-arrow';
 
 import { Check, Close } from '@lidofinance/lido-ui';
-import {
-  Wrap,
-  RpcStatusBox,
-  Button,
-  InfoLink,
-  LinkArrow,
-  Text,
-} from './styles';
+import { Wrap, RpcStatusBox, Button, Text } from './styles';
 
 import { checkRpcUrl } from 'utils/check-rpc-url';
 import { STORAGE_IPFS_INFO_DISMISS } from 'config/storage';
@@ -58,9 +52,7 @@ export const IPFSInfoBox = () => {
       <Text weight={700} size="xs" color="accentContrast">
         You are currently using the IPFS widget&apos;s version.
       </Text>
-      <InfoLink href={IPFS_INFO_URL}>
-        IPFS <LinkArrow />
-      </InfoLink>
+      <LinkArrow href={IPFS_INFO_URL}>IPFS</LinkArrow>
       {rpcCheckResult === true && (
         <>
           <RpcStatusBox status="success">

diff --git a/features/ipfs/ipfs-info-box/styles.tsx b/features/ipfs/ipfs-info-box/styles.tsx
@@ -1,9 +1,7 @@
 import { ComponentProps, FC } from 'react';
 import styled, { css } from 'styled-components';
 import {
-  ArrowBack,
   Button as ButtonOriginal,
-  Link,
   Text as TextOriginal,
   themeDefault,
 } from '@lidofinance/lido-ui';
@@ -87,24 +85,3 @@ export const Button = styled(ButtonOriginal)`
     background-color: rgba(225, 225, 225);
   }
 `;
-
-export const InfoLink = styled(Link)`
-  display: flex;
-  align-items: center;
-  font-weight: 700;
-  width: fit-content;
-
-  &:hover svg {
-    transform: rotate(180deg) translateX(-2px);
-  }
-`;
-
-export const LinkArrow = styled(ArrowBack)`
-  display: block;
-  margin-left: 3px;
-  width: 16px;
-  height: 16px;
-  transform: rotate(180deg);
-  transition: transform ${({ theme }) => theme.ease.outCubic}
-    ${({ theme }) => theme.duration.med};
-`;
diff --git a/features/settings/settings-form/settings-form.tsx b/features/settings/settings-form/settings-form.tsx
@@ -5,6 +5,7 @@ import { useSDK } from '@lido-sdk/react';
 import { Button, ToastSuccess, Block, Input } from '@lidofinance/lido-ui';
 
 import { useClientConfig } from 'providers/client-config';
+import { LinkArrow } from 'shared/components/link-arrow/link-arrow';
 import { RPCErrorType, checkRpcUrl } from 'utils/check-rpc-url';
 import { CHAINS } from 'utils/chains';
 
@@ -36,6 +37,7 @@ export const SettingsForm = () => {
     setValue,
     getValues,
     formState: { errors },
+    clearErrors,
   } = formMethods;
 
   const saveSettings = useCallback(
@@ -78,8 +80,9 @@ export const SettingsForm = () => {
   const handleReset = useCallback(() => {
     setValue('rpcUrl', '');
     saveSettings(getValues());
+    clearErrors();
     ToastSuccess('Settings have been reset');
-  }, [setValue, saveSettings, getValues]);
+  }, [clearErrors, setValue, saveSettings, getValues]);
 
   return (
     <SettingsFormWrap>
@@ -122,14 +125,13 @@ export const SettingsForm = () => {
             visiting the link below.
           </p>
           <p>
-            Ethereum nodes:{' '}
-            <a
+            <LinkArrow
               target="_blank"
               href="https://ethereumnodes.com/"
               rel="noreferrer"
             >
               ethereumnodes.com
-            </a>
+            </LinkArrow>
           </p>
           <p>
             The settings are being saved in your browser&apos;s

diff --git a/features/settings/settings-form/styles.ts b/features/settings/settings-form/styles.ts
@@ -22,12 +22,13 @@ export const Actions = styled.div`
 `;
 
 export const DescriptionText = styled.div`
-  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;
-  font-weight: 500;
-  line-height: 1.5;
+  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
+  font-weight: 400;
+  line-height: 1.6em;
+  color: var(--lido-color-textSecondary);
 
   & p:not(:last-child) {
-    margin-bottom: ${({ theme }) => theme.spaceMap.sm}px;
+    margin-bottom: 10px;
   }
 
   & a {
@@ -37,10 +38,10 @@ export const DescriptionText = styled.div`
 `;
 
 export const DescriptionTitle = styled.div`
-  margin-bottom: ${({ theme }) => theme.spaceMap.sm}px;
-  font-size: ${({ theme }) => theme.fontSizesMap.sm}px;
+  margin-bottom: 30px;
+  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;
   font-weight: 800;
-  line-height: 1.5;
+  line-height: 1.6em;
   color: var(--lido-color-text);
 
   &:not(:first-child) {

diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "react-hook-form": "^7.45.2",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.2",
-    "reef-knot": "^1.10.6",
+    "reef-knot": "^1.11.1",
     "remark": "^13.0.0",
     "remark-external-links": "^8.0.0",
     "remark-html": "^13.0.1",

diff --git a/pages/api/rewards.ts b/pages/api/rewards.ts
@@ -8,6 +8,9 @@ import {
   responseTimeMetric,
   rateLimit,
   responseTimeExternalMetricWrapper,
+  httpMethodGuard,
+  HttpMethod,
+  cors,
 } from 'utilsApi';
 import Metrics from 'utilsApi/metrics';
 import { CACHE_REWARDS_HEADERS, API_ROUTES } from 'config';
@@ -54,6 +57,8 @@ const rewards: API = async (req, res) => {
 };
 
 export default wrapNextRequest([
+  httpMethodGuard([HttpMethod.GET]),
+  cors({ origin: ['*'], methods: [HttpMethod.GET] }),
   rateLimit,
   responseTimeMetric(Metrics.request.apiTimings, API_ROUTES.REWARDS),
   cacheControl({ headers: CACHE_REWARDS_HEADERS }),

diff --git a/shared/components/header/components/navigation/navigation.tsx b/shared/components/header/components/navigation/navigation.tsx
@@ -4,7 +4,6 @@ import { Wallet, Stake, Wrap, Withdraw } from '@lidofinance/lido-ui';
 import {
   HOME_PATH,
   WRAP_PATH,
-  WITHDRAWALS_PATH,
   WITHDRAWALS_REQUEST_PATH,
   REWARDS_PATH,
 } from 'config/urls';
@@ -27,7 +26,7 @@ const routes = [
   },
   {
     name: 'Withdrawals',
-    path: WITHDRAWALS_PATH,
+    path: WITHDRAWALS_REQUEST_PATH,
     full_path: WITHDRAWALS_REQUEST_PATH,
     icon: <Withdraw data-testid="navWithdrawals" />,
   },
@@ -39,12 +38,14 @@ const routes = [
 ];
 export const Navigation: FC = memo(() => {
   const pathname = useRouterPath();
+  const pathnameWithoutQuery = pathname.split('?')[0];
 
   return (
     <Nav>
       {routes.map(({ name, path, icon }) => {
         const isActive =
-          pathname === path || (path.length > 1 && pathname.startsWith(path));
+          pathnameWithoutQuery === path ||
+          (path.length > 1 && pathnameWithoutQuery.startsWith(path));
 
         return (
           <LocalLink key={path} href={path}>

diff --git a/shared/components/link-arrow/link-arrow.tsx b/shared/components/link-arrow/link-arrow.tsx
@@ -0,0 +1,34 @@
+import { ComponentProps } from 'react';
+import styled from 'styled-components';
+import { Link, ArrowBack } from '@lidofinance/lido-ui';
+
+export const LinkWrap = styled(Link)`
+  display: flex;
+  align-items: center;
+  width: fit-content;
+
+  &:hover svg {
+    transform: rotate(180deg) translateX(-2px);
+  }
+`;
+
+export const Arrow = styled(ArrowBack)`
+  display: block;
+  margin-left: 3px;
+  width: 16px;
+  height: 16px;
+  transform: rotate(180deg);
+  transition: transform ${({ theme }) => theme.ease.outCubic}
+    ${({ theme }) => theme.duration.med};
+`;
+
+export const LinkArrow = ({
+  children,
+  ...props
+}: ComponentProps<typeof LinkWrap>) => {
+  return (
+    <LinkWrap {...props}>
+      {children} <Arrow />
+    </LinkWrap>
+  );
+};
diff --git a/shared/components/switch/styles.tsx b/shared/components/switch/styles.tsx
@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import { LocalLink } from 'shared/components/local-link';
+
 export const SwitchWrapper = styled.div`
   width: 268px;
   height: 44px;
@@ -31,7 +33,7 @@ export const Handle = styled.div<{ $checked: boolean }>`
 // Not wrapping <a> inside <a> in IPFS mode
 // Also avoid problems with migrate to Next v13
 // see: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#link-component
-export const SwitchItemStyled = styled.span<{ active: boolean }>`
+export const SwitchItemStyled = styled(LocalLink)<{ active: boolean }>`
   z-index: 2;
   margin: 0;
   opacity: ${({ active }) => (active ? 1 : 0.5)};
@@ -50,4 +52,8 @@ export const SwitchItemStyled = styled.span<{ active: boolean }>`
   &:hover {
     opacity: 1;
   }
+
+  &:visited {
+    color: var(--lido-color-text);
+  }
 `;
diff --git a/shared/components/switch/switch-item.tsx b/shared/components/switch/switch-item.tsx
@@ -2,15 +2,10 @@ import { useCompareWithRouterPath } from 'shared/hooks/use-compare-with-router-p
 
 import { SwitchItemStyled } from './styles';
 import { SwitchItemComponent } from './types';
-import { LocalLink } from '../local-link';
 
 export const SwitchItem: SwitchItemComponent = (props) => {
-  const { children, href, ...rest } = props;
-  const active = useCompareWithRouterPath(href);
+  const { href, ...rest } = props;
+  const active = useCompareWithRouterPath(href ?? '');
 
-  return (
-    <LocalLink href={href} style={{ zIndex: 2 }} {...rest}>
-      <SwitchItemStyled active={active}>{children}</SwitchItemStyled>
-    </LocalLink>
-  );
+  return <SwitchItemStyled href={href ?? ''} active={active} {...rest} />;
 };
diff --git a/shared/components/switch/types.ts b/shared/components/switch/types.ts
@@ -1,6 +1,6 @@
 import { Component } from 'types';
 
-export type SwitchItemComponent = Component<'a', { href: string }>;
+export type SwitchItemComponent = Component<'a'>;
 
 export type SwitchProps = {
   checked: boolean;

diff --git a/yarn.lock b/yarn.lock
@@ -2600,10 +2600,10 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.23.tgz#498e41218ab3b6a1419c735e5c6ae2c5ed609b6c"
   integrity sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==
 
-"@reef-knot/connect-wallet-modal@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@reef-knot/connect-wallet-modal/-/connect-wallet-modal-1.10.0.tgz#f8948265716408296191c4ba51394c09478a6938"
-  integrity sha512-lfKvTz8OS41a+YvX9Xy9ky22LAvIkjz1o6PvAVRG6QJmxal7akhgdx9ZZJU9+gNDV4Aigfj12NYVQ2TQVY9vRQ==
+"@reef-knot/connect-wallet-modal@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@reef-knot/connect-wallet-modal/-/connect-wallet-modal-1.11.0.tgz#8975c68277eedadc6ec9137f3cf20dff6f8011a3"
+  integrity sha512-Bhxhxz5Vu3oJDgmzeLo5QuIl3TrqO8AVV4qg+ise1epoB+F4GTH+a8t1zTUn3a8QlxTS6aWDGSPPimYF9BeaUA==
   dependencies:
     "@ledgerhq/hw-app-eth" "^6.34.3"
     "@ledgerhq/hw-transport" "^6.28.8"
@@ -2716,15 +2716,15 @@
   resolved "https://registry.yarnpkg.com/@reef-knot/wallets-helpers/-/wallets-helpers-1.1.5.tgz#bceb7d91a6f7748ec093fbdf7422772bd71708b6"
   integrity sha512-OFWR6zsUy04Waujl1VlNNs91P/kyHeGLC49QLWs3vrHvVipEk7ydUhKU/dHrbuhjQBS7quKg4vrodyCUUl4zyQ==
 
-"@reef-knot/wallets-icons@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@reef-knot/wallets-icons/-/wallets-icons-1.2.0.tgz#96d20b1805a926b47ce41238d945b10620bb49f6"
-  integrity sha512-UpZ4641R4roLwQw//AHEuz4OfElhqpNB2kRsR1p0kD4BOiPqkr8t3u4I+U0tBC4trhBu+j4MMgGNaXN5MUn4dg==
+"@reef-knot/wallets-icons@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@reef-knot/wallets-icons/-/wallets-icons-1.3.0.tgz#c2b3438f352080da1a9918e49b73d718b8f8dbd0"
+  integrity sha512-YudzhP/avx3jgbBdCw1QhInG1CGW08jweUw+eipLzHxPdfWpKSIQkeLw1GXOSflL6gI+dc7qmfi6wjfyB4Gpdg==
 
-"@reef-knot/wallets-list@1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@reef-knot/wallets-list/-/wallets-list-1.6.0.tgz#3cce895d2aee56b122784db5354b79a1734ab608"
-  integrity sha512-+mWn0Mr7hAqH3k1J8WO9WJfug5RaIYEmXLi8hv+Twc1atgUqwqcSxhKzklRhM+Yjbfgi42PiCJ/YQMIoARATvQ==
+"@reef-knot/wallets-list@1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@reef-knot/wallets-list/-/wallets-list-1.7.0.tgz#93fe0accaa86383961ef07b6bb2aa371174346dc"
+  integrity sha512-6f3I2Z9Nch4df55xiJZMAkCTXuy8coZBZoMZkmfFIVdV5Gvh5MOjQ82+p4kgngKk3gNXxeQ9MFM1Ldj2mxrR3Q==
   dependencies:
     "@reef-knot/wallet-adapter-ambire" "1.2.4"
     "@reef-knot/wallet-adapter-bitkeep" "1.1.0"
@@ -2739,10 +2739,10 @@
     "@reef-knot/wallet-adapter-zengo" "1.2.4"
     "@reef-knot/wallet-adapter-zerion" "1.2.4"
 
-"@reef-knot/web3-react@1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@reef-knot/web3-react/-/web3-react-1.8.0.tgz#4023eaab935c3b15efb6f441e3b6e413f5de24ae"
-  integrity sha512-2NPvqEP18rsd+xMvT8yJw6I3YG5rQgryeAA2MGrCoqV6Mt4WDiHuj7R/sMaqXbc3goSjcVWbFM+O+nos8o2lLA==
+"@reef-knot/web3-react@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@reef-knot/web3-react/-/web3-react-1.9.1.tgz#bc5680029025fbaaa0cc28980c30e497441202e1"
+  integrity sha512-MMIZUCJL8HjOf8QSUl+tsFvF5eqctMyAzw+2VFwDvNegPiV+QoPXsEyBvjFEqJ0Kg6s/1Np3Hvfa9NY04WNEAw==
   dependencies:
     "@gnosis.pm/safe-apps-web3-react" "0.6.8"
     "@ledgerhq/iframe-provider" "0.4.2"
@@ -9185,20 +9185,20 @@ redis-parser@^3.0.0:
   dependencies:
     redis-errors "^1.0.0"
 
-reef-knot@^1.10.6:
-  version "1.10.6"
-  resolved "https://registry.yarnpkg.com/reef-knot/-/reef-knot-1.10.6.tgz#4bf2cd7c9595dcc48ab1692d2025f1cb8b7ff825"
-  integrity sha512-sSBmZhU/wOl/c9ovvjm+q6raUlTWDH2sUrckIQ629N6KO238K9v7F86eKHisqAcwWm8JbqhczUCOHUtuYrq6VQ==
+reef-knot@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/reef-knot/-/reef-knot-1.11.1.tgz#0278760d657dc4b4fb2e251d7746e5a53b38b731"
+  integrity sha512-d1Mg7u2DDJXlYWtDo1guFo5X0abZ6pCUMVT14Q6czHQE4Y2Z2qyPG5jZo4Bto1ZzBZ8MKt8j9vbRr50bf3Xk0A==
   dependencies:
-    "@reef-knot/connect-wallet-modal" "1.10.0"
+    "@reef-knot/connect-wallet-modal" "1.11.0"
     "@reef-knot/core-react" "1.7.0"
     "@reef-knot/ledger-connector" "1.1.1"
     "@reef-knot/types" "1.3.0"
     "@reef-knot/ui-react" "1.0.7"
     "@reef-knot/wallets-helpers" "1.1.5"
-    "@reef-knot/wallets-icons" "1.2.0"
-    "@reef-knot/wallets-list" "1.6.0"
-    "@reef-knot/web3-react" "1.8.0"
+    "@reef-knot/wallets-icons" "1.3.0"
+    "@reef-knot/wallets-list" "1.7.0"
+    "@reef-knot/web3-react" "1.9.1"
 
 reflect.getprototypeof@^1.0.4:
   version "1.0.4"