add sprite to pw tests and migrate entities components

Author: tom2drum

playwright/index.html

@@ -9,5 +9,6 @@
     <div id="root"></div>
     <script type="module" src="/playwright/envs.js"></script>
     <script type="module" src="/playwright/index.ts"></script>
+    <link rel="preload" as="image" href="/public/icons/sprite.svg"/>
   </body>
 </html>

tools/scripts/pw.sh

@@ -8,6 +8,8 @@ dotenv \
   -e $config_file \
   -- bash -c './deploy/scripts/make_envs_script.sh ./playwright/envs.js'
 
+yarn svg:build-sprite
+
 dotenv \
   -v NODE_OPTIONS=\"--max-old-space-size=4096\" \
   -e $config_file \

ui/shared/IconSvg.tsx

@@ -4,6 +4,8 @@ import React from 'react';
 
 export const href = '/icons/sprite.svg';
 
+export { IconName };
+
 interface Props {
   name: IconName;
   isLoading?: boolean;

ui/shared/entities/address/AddressEntity.tsx

@@ -7,9 +7,6 @@ import type { AddressParam } from 'types/api/addressParams';
 
 import { route } from 'nextjs-routes';
 
-import iconSafe from 'icons/brands/safe.svg';
-import iconContractVerified from 'icons/contract_verified.svg';
-import iconContract from 'icons/contract.svg';
 import * as EntityBase from 'ui/shared/entities/base/components';
 
 import { getIconProps } from '../base/utils';
@@ -53,7 +50,7 @@ const Icon = (props: IconProps) => {
       return (
         <EntityBase.Icon
           { ...props }
-          asProp={ iconSafe }
+          name="brands/safe"
         />
       );
     }
@@ -64,7 +61,7 @@ const Icon = (props: IconProps) => {
           <span>
             <EntityBase.Icon
               { ...props }
-              asProp={ iconContractVerified }
+              name="contract_verified"
               color="green.500"
               borderRadius={ 0 }
             />
@@ -78,7 +75,7 @@ const Icon = (props: IconProps) => {
         <span>
           <EntityBase.Icon
             { ...props }
-            asProp={ iconContract }
+            name="contract"
             borderRadius={ 0 }
           />
         </span>

ui/shared/entities/base/components.tsx

@@ -2,11 +2,12 @@ import { Box, chakra, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react
 import type { As, IconProps } from '@chakra-ui/react';
 import React from 'react';
 
-import IconBase from 'ui/shared/chakra/Icon';
 import type { Props as CopyToClipboardProps } from 'ui/shared/CopyToClipboard';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 
@@ -76,12 +77,12 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }:
 });
 
 export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'iconSize' | 'noIcon'> {
-  asProp: As;
+  name: IconName;
   color?: IconProps['color'];
   borderRadius?: IconProps['borderRadius'];
 }
 
-const Icon = ({ isLoading, iconSize, noIcon, asProp, color, borderRadius }: IconBaseProps) => {
+const Icon = ({ isLoading, iconSize, noIcon, name, color, borderRadius }: IconBaseProps) => {
   const defaultColor = useColorModeValue('gray.500', 'gray.400');
 
   if (noIcon) {
@@ -91,8 +92,8 @@ const Icon = ({ isLoading, iconSize, noIcon, asProp, color, borderRadius }: Icon
   const styles = getIconProps(iconSize);
   return (
     <Box mr={ 2 } color={ color ?? defaultColor }>
-      <IconBase
-        as={ asProp }
+      <IconSvg
+        name={ name }
         boxSize={ styles.boxSize }
         isLoading={ isLoading }
         borderRadius={ borderRadius ?? 'base' }

ui/shared/entities/block/BlockEntity.tsx

@@ -1,11 +1,9 @@
-import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
 import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-import blockIcon from 'icons/block_slim.svg';
 import * as EntityBase from 'ui/shared/entities/base/components';
 
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash' | 'number'>;
@@ -24,15 +22,15 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'asProp'> & {
-  asProp?: As;
+type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
+  name?: EntityBase.IconBaseProps['name'];
 };
 
 const Icon = (props: IconProps) => {
   return (
     <EntityBase.Icon
       { ...props }
-      asProp={ props.asProp ?? blockIcon }
+      name={ props.name ?? 'block_slim' }
     />
   );
 };

ui/shared/entities/block/BlockEntityL2.tsx

@@ -3,7 +3,6 @@ import _omit from 'lodash/omit';
 import React from 'react';
 
 import config from 'configs/app';
-import txBatchIcon from 'icons/txn_batches_slim.svg';
 
 import * as BlockEntity from './BlockEntity';
 
@@ -19,7 +18,7 @@ const BlockEntityL2 = (props: BlockEntity.EntityProps) => {
 
   return (
     <BlockEntity.Container className={ props.className }>
-      <BlockEntity.Icon { ...partsProps } asProp={ txBatchIcon }/>
+      <BlockEntity.Icon { ...partsProps } name="txn_batches_slim"/>
       <BlockEntity.Link { ...linkProps }>
         <BlockEntity.Content { ...partsProps }/>
       </BlockEntity.Link>

ui/shared/entities/block/ZkEvmBatchEntityL2.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import txBatchIcon from 'icons/txn_batches_slim.svg';
 
 import * as BlockEntity from './BlockEntity';
 
@@ -21,7 +20,7 @@ const ZkEvmBatchEntityL2 = (props: BlockEntity.EntityProps) => {
 
   return (
     <BlockEntity.Container className={ props.className }>
-      <BlockEntity.Icon { ...partsProps } asProp={ txBatchIcon }/>
+      <BlockEntity.Icon { ...partsProps } name="txn_batches_slim"/>
       <BlockEntity.Link
         { ...linkProps }
         href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: props.number.toString() } }) }

ui/shared/entities/nft/NftEntity.tsx

@@ -1,18 +1,16 @@
-import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
 import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-import nftPlaceholder from 'icons/nft_shield.svg';
 import * as EntityBase from 'ui/shared/entities/base/components';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 const Container = EntityBase.Container;
 
 type IconProps = Pick<EntityProps, 'isLoading' | 'noIcon' | 'iconSize'> & {
-  asProp?: As;
+  name?: EntityBase.IconBaseProps['name'];
 };
 
 const Icon = (props: IconProps) => {
@@ -24,7 +22,7 @@ const Icon = (props: IconProps) => {
     <EntityBase.Icon
       { ...props }
       iconSize={ props.iconSize ?? 'lg' }
-      asProp={ props.asProp ?? nftPlaceholder }
+      name={ props.name ?? 'nft_shield' }
     />
   );
 };

ui/shared/entities/token/TokenEntity.tsx

@@ -1,4 +1,4 @@
-import type { As, ChakraProps } from '@chakra-ui/react';
+import type { ChakraProps } from '@chakra-ui/react';
 import { Image, Skeleton, chakra } from '@chakra-ui/react';
 import _omit from 'lodash/omit';
 import React from 'react';
@@ -29,7 +29,6 @@ const Link = chakra((props: LinkProps) => {
 });
 
 type IconProps = Pick<EntityProps, 'token' | 'isLoading' | 'iconSize' | 'noIcon' | 'className'> & {
-  asProp?: As;
   marginRight?: ChakraProps['marginRight'];
   boxSize?: ChakraProps['boxSize'];
 };

ui/shared/entities/tx/TxEntity.tsx

@@ -1,11 +1,9 @@
-import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
 import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-import transactionIcon from 'icons/transactions_slim.svg';
 import * as EntityBase from 'ui/shared/entities/base/components';
 
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash'>;
@@ -23,15 +21,15 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'asProp'> & {
-  asProp?: As;
+type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
+  name?: EntityBase.IconBaseProps['name'];
 };
 
 const Icon = (props: IconProps) => {
   return (
     <EntityBase.Icon
       { ...props }
-      asProp={ props.asProp ?? transactionIcon }
+      name={ props.name ?? 'transactions_slim' }
     />
   );
 };