fix: ipfs links

features/rewards/components/CopyAddressUrl.tsx

@@ -1,11 +1,33 @@
+import { useMemo } from 'react';
 import { ButtonIcon, Copy } from '@lidofinance/lido-ui';
+
+import { dynamics } from 'config';
 import { useCopyToClipboard } from 'shared/hooks';
+import { getBasedHashHref } from 'utils/get-based-hash-href';
 
 // TODO: move to separate folders
 const CopyAddressUrl = ({ address }: { address: string }) => {
-  const { href } = location;
-  const withoutQuery = href.split('?')[0];
-  const url = `${withoutQuery}?address=${address}`;
+  const url = useMemo(() => {
+    const { href } = location;
+
+    if (dynamics.ipfsMode) {
+      let withoutHashAndQuery = href.split('?')[0].split('#')[0];
+      if (withoutHashAndQuery[withoutHashAndQuery.length - 1] === '/') {
+        // Remove first '/'
+        withoutHashAndQuery = withoutHashAndQuery.slice(0, -1);
+      }
+
+      const hash = href.split('#')[1].split('?')[0];
+      return (
+        withoutHashAndQuery +
+        getBasedHashHref(hash, { address } as Record<string, string>)
+      );
+    } else {
+      // Infra version
+      const withoutQuery = href.split('?')[0];
+      return `${withoutQuery}?address=${address}`;
+    }
+  }, [address]);
 
   const handleCopy = useCopyToClipboard(url);
 

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

@@ -1,5 +1,6 @@
 import { useSDK } from '@lido-sdk/react';
 import { Link, Loader } from '@lidofinance/lido-ui';
+import { LocalLink } from 'shared/components/local-link';
 
 import {
   trackMatomoEvent,
@@ -44,8 +45,8 @@ export const TxRequestStageSuccess = ({
     <span>
       Withdrawal request for {amountAsString} {tokenName} has been sent.
       <br />
-      Check <Link href={WITHDRAWALS_CLAIM_PATH}>Claim tab</Link> to view your
-      withdrawal requests or view your transaction on{' '}
+      Check <LocalLink href={WITHDRAWALS_CLAIM_PATH}>Claim tab</LocalLink> to
+      view your withdrawal requests or view your transaction on{' '}
       <TxLinkEtherscan
         txHash={txHash ?? undefined}
         text="Etherscan"

shared/components/layout/header/components/navigation/navigation.tsx

@@ -5,6 +5,7 @@ import {
   HOME_PATH,
   WRAP_PATH,
   WITHDRAWALS_REQUEST_PATH,
+  WITHDRAWALS_CLAIM_PATH,
   REWARDS_PATH,
 } from 'config/urls';
 import { LocalLink } from 'shared/components/local-link';
@@ -28,6 +29,7 @@ const routes = [
     name: 'Withdrawals',
     path: WITHDRAWALS_REQUEST_PATH,
     full_path: WITHDRAWALS_REQUEST_PATH,
+    subPaths: [WITHDRAWALS_CLAIM_PATH],
     icon: <Withdraw data-testid="navWithdrawals" />,
   },
   {
@@ -42,10 +44,12 @@ export const Navigation: FC = memo(() => {
 
   return (
     <Nav>
-      {routes.map(({ name, path, icon }) => {
+      {routes.map(({ name, path, subPaths, icon }) => {
         const isActive =
           pathnameWithoutQuery === path ||
-          (path.length > 1 && pathnameWithoutQuery.startsWith(path));
+          (path.length > 1 && pathnameWithoutQuery.startsWith(path)) ||
+          (Array.isArray(subPaths) &&
+            subPaths?.indexOf(pathnameWithoutQuery) > -1);
 
         return (
           <LocalLink key={path} href={path}>

shared/components/link-ipfs.tsx

@@ -1,28 +1,44 @@
-import React, { ReactNode, MouseEventHandler, useCallback } from 'react';
+import React, { MouseEventHandler, useCallback, useMemo } from 'react';
 
 import { usePrefixedPush } from 'shared/hooks/use-prefixed-history';
+import { getBasedHashHref } from 'utils/get-based-hash-href';
 
-type Props = {
+type LinkIpfsProps = React.ComponentProps<'a'> & {
   href: string;
-  query?: Record<string, string>;
-  onClick?: MouseEventHandler<HTMLAnchorElement>;
-  children?: ReactNode;
+  query: Record<string, string>;
 };
 
-export const LinkIpfs = ({ onClick, query, ...props }: Props) => {
+export const LinkIpfs = ({
+  href,
+  query,
+  onClick,
+  children,
+  ...props
+}: LinkIpfsProps) => {
   const push = usePrefixedPush();
-  const { href } = props;
 
+  // Actual for click (opening in same tab)
   const handleClick: MouseEventHandler<HTMLAnchorElement> = useCallback(
     (event) => {
       event.preventDefault();
       void push(href, query);
+
+      window.scrollTo({ top: 0 });
+
       onClick?.(event);
     },
     [onClick, push, href, query],
   );
 
-  // TODO:
-  // eslint-disable-next-line jsx-a11y/anchor-has-content,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-  return <a {...props} onClick={handleClick} />;
+  // Actual for opening in new tab
+  const basedHashHref = useMemo(
+    () => getBasedHashHref(href, query),
+    [href, query],
+  );
+
+  return (
+    <a {...props} href={basedHashHref} onClick={handleClick}>
+      {children}
+    </a>
+  );
 };

utils/get-based-hash-href.ts

@@ -0,0 +1,13 @@
+export const getBasedHashHref = (
+  href: string,
+  query?: Record<string, string>,
+) => {
+  let queryString = new URLSearchParams(query).toString();
+  queryString = queryString.length > 0 ? `?${queryString}` : '';
+
+  // Make a link:
+  // '/?<some_query_param>=<some_query_value>&...&<some_query_param_N>=<some_query_value_N>#/<hash_path>'
+  // e.g.: '/#/wrap'
+  // e.g.: '?ref=0x0000000000000000000000000000000000000000#/'
+  return `/${queryString}#${href}`;
+};