Refactoring components and cleanup

package.json

@@ -37,7 +37,6 @@
     "downshift": "^9.0.4",
     "facepaint": "^1.2.1",
     "i18next": "^25.3.2",
-    "prettier": "^3.6.2",
     "react-inlinesvg": "^4.2.0",
     "react-loading-skeleton": "^3.5.0",
     "react-modal": "^3.16.1",
@@ -95,6 +94,7 @@
     "@types/react-modal": "^3.16.3",
     "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react": "^4.7.0",
+    "prettier": "^3.6.2",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "^9.0.18",
     "remark-gfm": "^4.0.1",

src/lib/components/account-info-row/account-info-row.stories.tsx

@@ -7,7 +7,7 @@ export default {
   component: AccountInfoRow,
   excludeStories: ['Primary'],
   // tags: ['autodocs', '!dev'],
-  title: 'Components/Display/AccountInfoRow',
+  title: 'Components/Form/AccountInfoRow',
   parameters: {
     controls: {
       sort: 'requiredFirst',

src/lib/components/account-info-row/account-info-row.tsx

@@ -155,7 +155,7 @@ export function AccountInfoRow(props: AccountInfoRowProps) {
         {publicKey && (
           <>
             <FlexRow align="center">
-              <Tooltip title={publicKey}>
+              <Tooltip tooltipContent={publicKey}>
                 <BodyText size={3} variation={'black'} monotype>
                   {formatHash(publicKey, responsiveHashSize)}
                 </BodyText>

src/lib/components/address/address.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
+import { Address } from './address.tsx';
+
+const meta = {
+  component: Address,
+  title: 'Components/Display/Address',
+  // tags: ['autodocs', '!dev'],
+  args: {
+    publicKey:
+      '01f5f1fa995ab7e966428e5a1aed797526ad5b2454c50a63a7aaa2dfeae6a996c2',
+    minified: true,
+    tooltipCaption: 'public key',
+    avatarSize: 'default',
+  },
+  argTypes: {
+    avatarSize: {
+      control: { type: 'select' },
+      options: ['default', 'big', 'average', 'medium', 'small'],
+      description: 'The size of the avatar',
+    },
+    publicKey: { control: 'text' },
+    csprName: { control: 'text' },
+    logo: { control: 'text' },
+    name: { control: 'text' },
+    tooltipCaption: { control: 'text' },
+    minified: { control: 'boolean' },
+  },
+} as Meta<typeof Address>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+export const withName: Story = {
+  args: {
+    name: 'Faucet',
+    csprName: 'faucet.cspr',
+    logo: 'https://cspr-image-proxy-cdn.dev.make.services/64,fit,ttl86400/https://casper-assets.s3.amazonaws.com/accounts/faucet.svg',
+  },
+};
+
+export const withLogo: Story = {
+  args: {
+    name: 'Casper Space DJ',
+    logo: 'https://image-proxy-cdn.make.services/64,fit,ttl86400/https://makegroup.io/wp-content/uploads/2024/04/logo.svg',
+  },
+};

src/lib/components/address/address.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { Avatar, AvatarProps } from '../avatar/avatar';
+
+import styled from 'styled-components';
+import BodyText from '../body-text/body-text.tsx';
+import Tooltip from '../tooltip/tooltip.tsx';
+import { HashLink } from '../hash-link/hash-link.tsx';
+import FlexRow from '../flex-row/flex-row.tsx';
+import FlexColumn from '../flex-column/flex-column.tsx';
+import { HashLength } from '../../utils/formatters.ts';
+import { Size } from '../../types.ts';
+import TruncateBox from '../truncate-box/truncate-box.tsx';
+
+interface AddressProps {
+  loading: boolean;
+  logo: string | null;
+  name: string | undefined;
+  csprName?: string | undefined;
+  publicKey: string | null | undefined;
+  tooltipCaption?: string;
+  navigateToPath?: string;
+  hashLength?: HashLength;
+  nameSize?: Size;
+  avatarSize?: AvatarProps['size'];
+  hashFontSize?: HashFontSize;
+  minified?: boolean;
+  /** @redundunt use navigateToPath instead */
+  navigationPath?: keyof any;
+  /** @deprecated use minified instead */
+  copyNotifyingStyle?: 'full' | 'tiny';
+}
+
+const StyledTruncateBox = styled(TruncateBox)(() => ({
+  height: '20px',
+}));
+
+export enum HashFontSize {
+  'default' = 'default',
+  'big' = 'big',
+}
+
+const StyledHashWrapper = ({ hashFontSize, ...props }) => {
+  return (
+    <BodyText
+      {...props}
+      size={3}
+      scale={hashFontSize === HashFontSize.big ? 'sm' : props.scale}
+    />
+  );
+};
+
+const shortenCsprName = (
+  csprName: string,
+  visibleStringLength: HashLength = HashLength.SMALL,
+) => {
+  const [name, extension] = csprName.split(/(.cspr)$/);
+
+  const MIN_TRUNCATE_LENGTH = HashLength.TINY * 2 + 3;
+  const hashLength = name.length;
+
+  if (hashLength === HashLength.FULL || hashLength <= MIN_TRUNCATE_LENGTH) {
+    return csprName;
+  }
+
+  const firstPart = name.substring(0, visibleStringLength);
+  const secondPart = name.substring(hashLength - visibleStringLength);
+
+  return `${firstPart}...${secondPart}${extension}`;
+};
+
+// Check usage of this component
+export const Address = ({
+  publicKey,
+  csprName,
+  logo,
+  name,
+  loading,
+  hashLength,
+  minified,
+  navigateToPath,
+  tooltipCaption,
+  nameSize = 5,
+  avatarSize = 'default',
+  hashFontSize = HashFontSize.default,
+}: AddressProps) => {
+  if (loading || !publicKey) {
+    return (
+      <FlexRow align="center" itemsSpacing={12}>
+        <Avatar hash={publicKey} loading={loading} size={avatarSize} />
+      </FlexRow>
+    );
+  }
+
+  if (publicKey === '00') {
+    // publicKey == '00' means that it is a Immediate Switch Block
+    // NOTE: as part of Casper network node v1.5, the node software now creates an "immediate switch block" on upgrades;
+    // there are no rewards for this block. it simply captures the information after application of the upgrade,
+    // which allows this to be deterministically detected
+    return (
+      <FlexRow align="center" itemsSpacing={12}>
+        <Avatar hash={publicKey} loading={loading} size={avatarSize} />
+        <FlexColumn>
+          <BodyText size={2} monotype>
+            {publicKey}
+          </BodyText>
+          <BodyText size={3} variation="darkGray" noWrap>
+            System
+          </BodyText>
+        </FlexColumn>
+      </FlexRow>
+    );
+  }
+
+  return (
+    <FlexRow align="center" itemsSpacing={12}>
+      {logo ? (
+        <Avatar
+          src={logo}
+          loading={loading}
+          size={avatarSize}
+          alt={'Account logo'}
+        />
+      ) : (
+        <Avatar hash={publicKey} loading={loading} size={avatarSize} />
+      )}
+
+      <Tooltip caption={tooltipCaption} tooltipContent={publicKey}>
+        <FlexColumn>
+          {name ? (
+            <>
+              <StyledHashWrapper
+                hashFontSize={hashFontSize}
+                monotype={!csprName}
+              >
+                <HashLink
+                  minified={minified}
+                  href={navigateToPath}
+                  hash={publicKey}
+                  csprName={
+                    csprName && shortenCsprName(csprName, HashLength.TINY)
+                  }
+                  hashLength={hashLength}
+                />
+              </StyledHashWrapper>
+              <FlexRow itemsSpacing={6} align={'center'}>
+                <FlexRow>
+                  <StyledTruncateBox size={nameSize}>
+                    <BodyText size={3} variation="darkGray" noWrap>
+                      {name}
+                    </BodyText>
+                  </StyledTruncateBox>
+                </FlexRow>
+              </FlexRow>
+            </>
+          ) : (
+            <StyledHashWrapper hashFontSize={hashFontSize} monotype={!csprName}>
+              <HashLink
+                href={navigateToPath}
+                hash={publicKey}
+                csprName={
+                  csprName && shortenCsprName(csprName, HashLength.TINY)
+                }
+                hashLength={hashLength}
+                minified={minified}
+              />
+            </StyledHashWrapper>
+          )}
+        </FlexColumn>
+      </Tooltip>
+    </FlexRow>
+  );
+};

src/lib/components/avatar/avatar.stories.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import styled from 'styled-components';
+import { Meta } from '@storybook/react';
 import Avatar from './avatar';
+import { StoryObj } from '@storybook/react-vite';
 import FlexRow from '../flex-row/flex-row';
-import FlexColumn from '../flex-column/flex-column';
-import SubtitleText from '../subtitle-text/subtitle-text';
 
-export default {
+const meta = {
   component: Avatar,
   title: 'Components/Display/Avatar',
   // tags: ['autodocs', '!dev'],
@@ -19,7 +16,7 @@ export default {
       control: { type: 'text' },
     },
     size: {
-      options: ['small', 'default', 'average', 'medium', 'big'],
+      options: ['tiny', 'small', 'default', 'average', 'medium', 'big'],
       control: { type: 'radio' },
     },
     loading: {
@@ -30,53 +27,37 @@ export default {
       options: [true, false],
       control: { type: 'radio' },
     },
+    transparentBg: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
   },
 } as Meta<typeof Avatar>;
 
-const StyledBlock = styled.div`
-  display: flex;
-  align-items: center;
-`;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-const Template: StoryFn<typeof Avatar> = (args) => (
-  <FlexRow itemsSpacing={10}>
-    <FlexColumn itemsSpacing={10}>
+export const Primary: Story = {};
+export const AllOptions: Story = {
+  render: (args) => (
+    <FlexRow
+      itemsSpacing={18}
+      style={{ backgroundColor: 'rgb(2, 156, 253, 0.5)' }}
+    >
       <Avatar {...args} />
-    </FlexColumn>
-  </FlexRow>
-);
-const AvatarTypes = ({ size }) => (
-  <>
-    <SubtitleText size={2}>{size}</SubtitleText>
-    <StyledBlock>
-      <Avatar loading={true} size={size} />
+      <Avatar {...args} loading={true} />
       <Avatar
-        hash="01f5f1fa995ab7e966428e5a1aed797526ad5b2454c50a63a7aaa2dfeae6a996c2"
-        size={size}
+        {...args}
+        hash={
+          '84f97651d9322db4b6b23541528017c64acebf3a6250bdac8ff7481759ff8604'
+        }
       />
+      <Avatar {...args} isErc20 />
       <Avatar
-        hash="84f97651d9322db4b6b23541528017c64acebf3a6250bdac8ff7481759ff8604"
-        size={size}
-      />
-      <Avatar isErc20 size={size} />
-      <Avatar
+        {...args}
         src="https://makegroup.io/wp-content/uploads/2023/09/Logo.png"
-        size={size}
       />
-    </StyledBlock>
-  </>
-);
-
-export const allOptions = () => (
-  <FlexRow itemsSpacing={10}>
-    <FlexColumn itemsSpacing={10}>
-      <AvatarTypes size="small" />
-      <AvatarTypes size="default" />
-      <AvatarTypes size="average" />
-      <AvatarTypes size="medium" />
-      <AvatarTypes size="big" />
-    </FlexColumn>
-  </FlexRow>
-);
-
-export const Primary = Template.bind({});
+    </FlexRow>
+  ),
+};