SD-34: Make adjustments based on feedback

Author: rAskVAL

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

@@ -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';
 

src/domains/misc/consts/consts.ts

@@ -8,13 +8,15 @@ import Skeleton from 'src/domains/misc/components/Skeleton';
 import Title from 'src/domains/misc/components/Title.tsx';
 import AccountTypeSelector from 'src/domains/shielder/components/AccountTypeSelector';
 import TokenList from 'src/domains/shielder/components/TokenList';
+import { useShielderStore } from 'src/domains/shielder/stores/shielder';
 import useShielderClient from 'src/domains/shielder/utils/useShielderClient';
 import { typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
 const Shielder = () => {
   const chainConfig = useChain();
   const { isSuccess } = useShielderClient();
+  const { selectedAccountType } = useShielderStore();
 
   const nonNativeTokens = chainConfig ?
     objectEntries(chainConfig.whitelistedTokens).map(([address, token]) => ({
@@ -38,10 +40,12 @@ const Shielder = () => {
     <>
       <Title size="medium">Your accounts</Title>
       <AccountTypeSelector />
-      <Disclaimer>
-        <CIcon icon="Info" size={20} />
-        <p>Tokens that can be moved to shielded account:</p>
-      </Disclaimer>
+      {selectedAccountType === 'public' && (
+        <Disclaimer>
+          <CIcon icon="Info" size={20} />
+          <p>Tokens that can be moved to shielded account:</p>
+        </Disclaimer>
+      )}
       <TokensWrapper>
         <TokenList tokens={tokens} />
       </TokensWrapper>