SD-34: Rework shielder ui

Author: rAskVAL

.gitignore

@@ -8,3 +8,5 @@ dist
 *.local
 
 .env
+
+.qodo

package-lock.json

@@ -36,6 +36,8 @@
     "motion": "^12.4.12",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-merge-refs": "^2.1.1",
+    "rooks": "^8.0.0",
     "sonner": "^2.0.2",
     "styled-components": "^6.1.15",
     "styled-reset": "^4.5.2",

package.json

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+import getChainConfigById from 'src/domains/chains/utils/getChainConfigById';
+import vars from 'src/domains/styling/utils/vars.ts';
+
+type Props = {
+  chainId: number | string,
+  size?: number,
+  className?: string,
+};
+const ChainIcon = ({ chainId, size = 16, className }: Props) => {
+  const { ChainIcon } = getChainConfigById(chainId);
+
+  return (
+    <Container style={{ height: size, width: size, borderRadius: size * 0.25 }} className={className}>
+      <ChainIcon />
+    </Container>
+  );
+};
+
+export default ChainIcon;
+
+const Container = styled.div`
+  display: grid;
+  place-items: center;
+  border: 1px solid ${vars('--color-neutral-foreground-1-rest')};
+  color: ${vars('--color-neutral-foreground-1-rest')};
+  
+  svg {
+    height: 100%;
+    width: 100%
+  }
+`;

src/domains/chains/components/ChainIcon.tsx

@@ -1,65 +1,72 @@
-import styled, { css, type RuleSet } from 'styled-components';
+import styled, { css } from 'styled-components';
 
+import ChainIcon from 'src/domains/chains/components/ChainIcon.tsx';
 import CIcon from 'src/domains/misc/components/CIcon';
 import vars from 'src/domains/styling/utils/vars';
 
-type Size = 'extra-small' | 'small' | 'medium' | 'large';
-
 type Props = {
   type: 'public' | 'shielded',
-  size: Size,
+  size: number,
   className?: string,
   withBorder?: boolean,
+  chainId?: string | number,
 };
 
-const AccountTypeIcon = ({ type, size, className, withBorder }: Props) => (
-  <IconWrapper className={className} $size={size} $withBorder={withBorder}>
-    <CIcon
-      icon={type === 'public' ? 'PersonFilled' : 'ShieldedFilled'}
-      size={ICON_SIZE[size]}
-    />
-  </IconWrapper>
+const AccountTypeIcon = ({ type, size, className, withBorder, chainId }: Props) => (
+  <Wrapper>
+    <IconWrapper className={className} $size={size} $withBorder={withBorder}>
+      <CIcon
+        icon={type === 'public' ? 'PersonFilled' : 'ShieldedFilled'}
+        size={size / 1.6}
+      />
+    </IconWrapper>
+    {chainId && (
+      <ChainIconWrapper>
+        <ChainIcon chainId={chainId} />
+      </ChainIconWrapper>
+    )}
+  </Wrapper>
 );
 
 export default styled(AccountTypeIcon)``;
 
-const ICON_SIZE = {
-  'extra-small': 12,
-  small: 16,
-  medium: 16,
-  large: 20,
-} satisfies Record<Size, number>;
+const IconWrapper = styled.div<{ $size: number, $withBorder?: boolean }>`
+  display: grid;
 
-const perSize = <T extends string | RuleSet>(sizes: Record<Size, T>) =>
-  ({ $size }: { $size: Size }) => sizes[$size];
+  position: relative;
 
-const IconWrapper = styled.div<{ $size: Size, $withBorder?: boolean }>`
-  display: grid;
   place-items: center;
+  
+  height: ${({ $size }) => `${$size}px`};
+  width: ${({ $size }) => `${$size}px`};
+
+
   color: ${vars('--color-neutral-foreground-static-rest')};
+
+
+
   border-radius: ${vars('--border-radius-circular')};
   background: linear-gradient(135deg, #cce0ff 0%, #6fa1eb 100%);
-  
+
+
+
   ${({ $withBorder }) => $withBorder && css`
     border: 1px solid ${vars('--color-neutral-stroke-subtle-rest')};
   `}
-  
-  ${perSize({
-    'extra-small': css`
-      height: 16px;
-      width: 16px;
-    `,
-    small: css`
-      height: 20px;
-      width: 20px;
-    `,
-    medium: css`
-      height: 24px;
-      width: 24px;
-    `,
-    large: css`
-      height: 32px;
-      width: 32px;
-    `,
-  })}
+`;
+
+const ChainIconWrapper = styled.div`
+  position: absolute;
+  right: calc(${vars('--spacing-xxs')} * -1);
+  bottom: calc(${vars('--spacing-xxs')} * -1);
+
+  padding: ${vars('--spacing-xxs')};
+
+  border-radius: ${vars('--border-radius-s-nudge-2')};
+  background: inherit;
+`;
+
+const Wrapper = styled.div`
+  position: relative;
+  background: inherit;
 `;

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

@@ -14,6 +14,7 @@ import ArrowDownload from './icons/arrowDownload.svg?react';
 import ArrowImport from './icons/arrowImport.svg?react';
 import ArrowRight from './icons/arrowRight.svg?react';
 import ArrowSort from './icons/arrowSort.svg?react';
+import ArrowTurnDownLeft from './icons/arrowTurnDownLeft.svg?react';
 import ArrowUpRight from './icons/arrowUpRight.svg?react';
 import ArrowUpRightRegular from './icons/arrowUpRightRegular.svg?react';
 import Azero from './icons/azero.svg?react';
@@ -48,6 +49,7 @@ import Lock from './icons/lock.svg?react';
 import MoreVertical from './icons/moreVertical.svg?react';
 import Network from './icons/network.svg?react';
 import Open from './icons/open.svg?react';
+import Pencil from './icons/pencil.svg?react';
 import PersonFeedback from './icons/personFeedback.svg?react';
 import PersonFilled from './icons/personFilled.svg?react';
 import Power from './icons/power.svg?react';
@@ -82,6 +84,7 @@ export const icons = {
   ArrowImport,
   ArrowRight,
   ArrowSort,
+  ArrowTurnDownLeft,
   ArrowUpRight,
   ArrowUpRightRegular,
   Azero,
@@ -116,6 +119,7 @@ export const icons = {
   MoreVertical,
   Network,
   Open,
+  Pencil,
   PersonFeedback,
   PersonFilled,
   Power,