SD-34: Make adjustments based on feedback

Author: rAskVAL

src/domains/chains/utils/definitions/chains/alephZero/alephZero.ts

@@ -47,7 +47,7 @@ const config: ChainConfig = {
     },
   },
   testnet: {
-    name: 'Aleph Zero',
+    name: 'A0 EVM Testnet',
     ChainIcon,
     NativeTokenIcon,
     id: 2039,

src/domains/chains/utils/definitions/chains/alephZero/nativeToken.svg

@@ -7,15 +7,14 @@ import CIcon from 'src/domains/misc/components/CIcon';
 import { typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
-type ValueProps = { value: ReactElement | string };
-
 const MIN_SEPARATOR_WIDTH = 10;
 
 type Props = {
   label: ReactElement | string,
   className?: string,
   tooltipText?: string,
-} & ValueProps;
+  value: ReactElement | string,
+};
 
 const InfoPair = ({ label, className, tooltipText, ...props }: Props) => (
   <ContainerHorizontal className={className}>

src/domains/misc/components/InfoPair.tsx

@@ -104,8 +104,6 @@ const InteractiveSlider = ({
     [0, 1],
   );
 
-  // console.log(thumbMotion.get(), touchMotion.get(), interactiveAreaWidth);
-
   const {
     isHoverThumbVisible,
     eventsListeners: hoverThumbEventsListeners,
@@ -154,7 +152,7 @@ const InteractiveSlider = ({
         >
           <Axis
             data={snapPoints.map((snapPoint, i) => ({
-              text: `${Math.round(snapPoint * 100)}%`,
+              text: snapPoint === 1 ? 'MAX' : `${Math.round(snapPoint * 100)}%`,
               position: snapPointsPositions[i],
             }))}
             highlightedIndex={hoverSnappedAtIndex}

src/domains/misc/components/InteractiveSlider/InteractiveSlider.tsx

@@ -10,7 +10,6 @@ export default (
     return Math.max(0, Math.min(safeX, range));
   });
 
-  // Применяем spring к ограниченному значению
   const bounceBackLimitedSpring = useSpring(clamped, {
     damping: 17,
     stiffness: 150,

src/domains/misc/components/InteractiveSlider/utils/useOvershootLimitedSpringMotion.ts

@@ -1,7 +1,13 @@
 import styled from 'styled-components';
 
 import Button from 'src/domains/misc/components/Button';
-import { BREAKPOINTS } from 'src/domains/misc/consts/consts';
+import {
+  BREAKPOINTS,
+  CHANGELOG_LINK,
+  FEEDBACK_LINK,
+  KNOWLEDGE_BASE_LINK, LANDING_PAGE_LINK,
+  FAUCET_LINK,
+} from 'src/domains/misc/consts/consts';
 import { typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
@@ -10,9 +16,18 @@ import ThemeSelector from './ThemeSelector';
 const Footer = () => (
   <Container>
     <ThemeSelector />
-    <InnerContainer data-chromatic="ignore">
+    <InnerContainer>
+      <Link href={FEEDBACK_LINK} target="_blank" rel="noopener noreferrer">Feedback</Link>
+      <Link href={CHANGELOG_LINK} target="_blank" rel="noopener noreferrer">Changelog</Link>
+      <Link href={KNOWLEDGE_BASE_LINK} target="_blank" rel="noopener noreferrer">Help center</Link>
+      <Link href={FAUCET_LINK} target="_blank" rel="noopener noreferrer">
+        Get Testnet Tokens
+      </Link>
+      <Link href={LANDING_PAGE_LINK} target="_blank" rel="noopener noreferrer">common.fi</Link>
+    </InnerContainer>
+    <CopyrightContainer data-chromatic="ignore">
       <Copyright>
-        Copyright © {new Date().getFullYear()} Shielder, ver. {import.meta.env.APP_VERSION}
+        Copyright © {new Date().getFullYear()} Common
       </Copyright>
       <Button
         variant="outline"
@@ -22,7 +37,7 @@ const Footer = () => (
       >
         DEX and Bridge (WASM)
       </Button>
-    </InnerContainer>
+    </CopyrightContainer>
   </Container>
 );
 
@@ -47,11 +62,14 @@ const InnerContainer = styled.div`
   display: flex;
   align-items: center;
   gap: ${vars('--spacing-xxl')};
-  justify-content: space-between;
 
   flex-wrap: wrap;
 `;
 
+const CopyrightContainer = styled(InnerContainer)`
+  justify-content: space-between;
+`;
+
 const Copyright = styled.div`
   width: 100%;
   color: ${vars('--color-neutral-foreground-4-rest')};
@@ -61,3 +79,10 @@ const Copyright = styled.div`
     width: auto;
   }
 `;
+
+const Link = styled.a`
+  color: ${vars('--color-neutral-foreground-4-rest')};
+
+  text-decoration: underline;
+  ${typography.web.caption2}
+`;

src/domains/misc/components/Layout/Footer.tsx

@@ -6,13 +6,13 @@ import router from 'src/domains/routing/utils/router';
 const tabsConfig = [
   {
     key: 'shield',
-    label: 'Shield',
+    label: 'Trace Breaker',
     routeNames: ['Shield'],
     onClick: () => void router.push('Shield'),
   },
   {
     key: 'yield',
-    label: 'Yield',
+    label: 'Shielded Yield',
     routeNames: ['Yield'],
     onClick: () => void router.push('Yield'),
     comingSoon: true,

src/domains/misc/components/Layout/Navigation.tsx

@@ -1,8 +1,10 @@
+import { useMediaQuery } from '@react-hookz/web';
 import { m as motion } from 'motion/react';
 import type { ReactElement } from 'react';
 import styled, { RuleSet } from 'styled-components';
 
 import Badge from 'src/domains/misc/components/Badge';
+import { BOTTOM_MENU_BREAKPOINT } from 'src/domains/misc/consts/consts.ts';
 import composeFluidSize from 'src/domains/styling/utils/composeFluidSize';
 import { transitionTime, typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
@@ -36,36 +38,42 @@ const positionStyles = {
   },
 };
 
-const Tab = ({ label, selected, onClick, layoutId, size = 'medium', position = 'floor', icon, comingSoon }: Props) => (
-  <Wrapper
-    initial={{ opacity: 0 }}
-    animate={{ opacity: 1, transition: { delay: 0.1 }}}
-    exit={{ opacity: 0 }}
-  >
-    <Container
-      selected={selected}
-      onClick={onClick}
-      disabled={comingSoon}
-      title={label}
-      $size={size}
-      layout
+const Tab = ({ label, selected, onClick, layoutId, size = 'medium', position = 'floor', icon, comingSoon }: Props) => {
+  const isSmallScreen = useMediaQuery(`(max-width: ${BOTTOM_MENU_BREAKPOINT})`);
+
+  return (
+    <Wrapper
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1, transition: { delay: 0.1 }}}
+      exit={{ opacity: 0 }}
     >
-      <LabelContainer>
-        {icon}
-        {label}
-      </LabelContainer>
-      <HoverBar style={positionStyles[position]} />
-      {selected && (
-        <SelectionBar
-        // set as an inline style for scale correction during transition (https://www.framer.com/motion/layout-animations/##scale-correction)
-          style={positionStyles[position]}
-          layoutId={layoutId}
-        />
+      <Container
+        selected={selected}
+        onClick={onClick}
+        disabled={comingSoon}
+        title={label}
+        $size={size}
+        layout
+      >
+        <LabelContainer>
+          {icon}
+          {label}
+        </LabelContainer>
+        <HoverBar style={positionStyles[position]} />
+        {selected && (
+          <SelectionBar
+            // set as an inline style for scale correction during transition (https://www.framer.com/motion/layout-animations/##scale-correction)
+            style={positionStyles[position]}
+            layoutId={layoutId}
+          />
+        )}
+      </Container>
+      {comingSoon && (
+        <Badge size="medium" variant="subtle" design="tint" text={isSmallScreen ? 'Soon' : 'Coming soon'} circular />
       )}
-    </Container>
-    {comingSoon && <Badge size="medium" variant="subtle" design="tint" text="Coming soon" circular />}
-  </Wrapper>
-);
+    </Wrapper>
+  );
+};
 
 export default Tab;
 
@@ -102,6 +110,7 @@ const LabelContainer = styled.div`
   display: flex;
   gap: ${vars('--spacing-xxs')};
   align-items: center;
+  white-space: nowrap;
 
   svg {
     fill: ${vars('--color-brand-foreground-compound-rest')};

src/domains/misc/components/Tabs/Tab.tsx

@@ -2,7 +2,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 
 export const BREAKPOINTS = { xs: '355px', sm: '500px', md: '770px', lg: '970px', xl: '1160px' };
 
-export const BOTTOM_MENU_BREAKPOINT = BREAKPOINTS.lg;
+export const BOTTOM_MENU_BREAKPOINT = '1060px';
 
 export const BOTTOM_NAVIGATION_HEIGHT = '48px';
 
@@ -13,3 +13,9 @@ export const NEVER_CHANGING_DATA_OPTIONS = {
   refetchOnWindowFocus: false,
   refetchOnReconnect: false,
 } satisfies Omit<UseQueryOptions, 'queryKey' | 'queryFn'>;
+
+export const FAUCET_LINK = 'https://shielder-faucet.vercel.app/';
+export const LANDING_PAGE_LINK = 'https://common.fi';
+export const KNOWLEDGE_BASE_LINK = 'https://docs.common.fi/knowledge-base';
+export const FEEDBACK_LINK='https://feedback.common.fi/?b=67f637404dea52efc92da1a6';
+export const CHANGELOG_LINK = 'https://feedback.common.fi/changelog';

src/domains/misc/consts/consts.ts

@@ -1,7 +1,7 @@
 import type { Address } from 'viem';
 
 const getQueryKey = {
-  estimateFeesPerGas: (walletAddress: Address) => ['shieldActionFees', walletAddress] as const,
+  shielderFees: (walletAddress: Address) => ['shielderFees', walletAddress] as const,
   shielderClient: (chainId: number, shielderPrivateKey: Address) => [
     'shielder-client',
     chainId,