new arrow styles

ui/address/AddressTxsFilter.tsx

@@ -38,8 +38,8 @@ const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading }
       <MenuList zIndex={ 2 }>
         <MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange }>
           <MenuItemOption value="all">All</MenuItemOption>
-          <MenuItemOption value="from">From</MenuItemOption>
-          <MenuItemOption value="to">To</MenuItemOption>
+          <MenuItemOption value="from">Outgoing transactions</MenuItemOption>
+          <MenuItemOption value="to">Incoming transactions</MenuItemOption>
         </MenuOptionGroup>
       </MenuList>
     </Menu>

ui/shared/IconSvg.tsx

@@ -12,9 +12,9 @@ interface Props extends HTMLChakraProps<'div'> {
   isLoading?: boolean;
 }
 
-const IconSvg = ({ name, isLoading, ...props }: Props) => {
+const IconSvg = ({ name, isLoading, ...props }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
   return (
-    <Skeleton isLoaded={ !isLoading } display="inline-block" { ...props }>
+    <Skeleton isLoaded={ !isLoading } display="inline-block" { ...props } ref={ ref }>
       <chakra.svg w="100%" h="100%">
         <use href={ `${ href }#${ name }` }/>
       </chakra.svg>
@@ -22,4 +22,4 @@ const IconSvg = ({ name, isLoading, ...props }: Props) => {
   );
 };
 
-export default IconSvg;
+export default React.forwardRef(IconSvg);

ui/shared/TokenTransfer/TokenTransferFilter.tsx

@@ -35,7 +35,7 @@ const TokenTransferFilter = ({
   const isInitialLoading = useIsInitialLoading(isLoading);
 
   return (
-    <PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ w: '200px' }} isLoading={ isInitialLoading }>
+    <PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ w: '220px' }} isLoading={ isInitialLoading }>
       { withAddressFilter && (
         <>
           <Text variant="secondary" fontWeight={ 600 }>Address</Text>
@@ -49,8 +49,8 @@ const TokenTransferFilter = ({
           >
             <Stack spacing={ 4 }>
               <Radio value="all"><Text fontSize="md">All</Text></Radio>
-              <Radio value="from"><Text fontSize="md">From</Text></Radio>
-              <Radio value="to"><Text fontSize="md">To</Text></Radio>
+              <Radio value="from"><Text fontSize="md">Outgoing transfers</Text></Radio>
+              <Radio value="to"><Text fontSize="md">Incoming transfers</Text></Radio>
             </Stack>
           </RadioGroup>
         </>

ui/shared/address/AddressFromTo.tsx

 import type { ThemeTypings } from '@chakra-ui/react';
-import { Flex, chakra, useBreakpointValue, useColorModeValue } from '@chakra-ui/react';
+import { Flex, chakra, useBreakpointValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressParam } from 'types/api/addressParams';
@@ -7,7 +7,9 @@ import type { AddressParam } from 'types/api/addressParams';
 import type { EntityProps } from 'ui/shared/entities/address/AddressEntity';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import AddressEntityWithTokenFilter from 'ui/shared/entities/address/AddressEntityWithTokenFilter';
-import IconSvg from 'ui/shared/IconSvg';
+
+import AddressFromToIcon from './AddressFromToIcon';
+import { getTxCourseType } from './utils';
 
 type Mode = 'compact' | 'long';
 
@@ -24,7 +26,6 @@ interface Props {
 }
 
 const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading, tokenHash = '', truncation, noIcon }: Props) => {
-  const iconColor = useColorModeValue('gray.500', 'gray.300');
   const mode = useBreakpointValue(
     {
       base: (typeof modeProp === 'object' ? modeProp.base : modeProp),
@@ -39,12 +40,9 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
     return (
       <Flex className={ className } flexDir="column" rowGap={ 3 }>
         <Flex alignItems="center" columnGap={ 2 }>
-          <IconSvg
-            name="arrows/east"
+          <AddressFromToIcon
             isLoading={ isLoading }
-            color={ iconColor }
-            boxSize={ 5 }
-            flexShrink={ 0 }
+            type={ getTxCourseType(from.hash, to?.hash, current) }
             transform="rotate(90deg)"
           />
           <Entity
@@ -89,7 +87,10 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
         truncation={ truncation }
         maxW={ truncation === 'constant' ? undefined : 'calc(50% - 18px)' }
       />
-      <IconSvg name="arrows/east" color={ iconColor } boxSize={ 5 } flexShrink={ 0 } isLoading={ isLoading }/>
+      <AddressFromToIcon
+        isLoading={ isLoading }
+        type={ getTxCourseType(from.hash, to?.hash, current) }
+      />
       { to ? (
         <Entity
           address={ to }

ui/shared/address/AddressFromToIcon.tsx

+import { Tooltip, chakra, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+import type { TxCourseType } from './utils';
+
+interface Props {
+  isLoading?: boolean;
+  type: TxCourseType;
+  className?: string;
+}
+
+const AddressFromToIcon = ({ isLoading, type, className }: Props) => {
+  const styles = {
+    'in': {
+      color: useColorModeValue('green.500', 'green.200'),
+      bgColor: useColorModeValue('green.50', 'green.800'),
+    },
+    out: {
+      color: useColorModeValue('yellow.600', 'yellow.500'),
+      bgColor: useColorModeValue('orange.50', 'yellow.900'),
+    },
+    self: {
+      color: useColorModeValue('gray.500', 'gray.300'),
+      bgColor: 'transparent',
+    },
+    unspecified: {
+      color: useColorModeValue('gray.500', 'gray.300'),
+      bgColor: 'transparent',
+    },
+  };
+  const labels = {
+    'in': 'Incoming txn',
+    out: 'Outgoing txn',
+    self: 'Self txn',
+  };
+
+  const icon = (
+    <IconSvg
+      name="arrows/east"
+      { ...(styles[type]) }
+      className={ className }
+      isLoading={ isLoading }
+      boxSize={ 5 }
+      flexShrink={ 0 }
+      borderRadius="sm"
+    />
+  );
+
+  if (type === 'unspecified') {
+    return icon;
+  }
+
+  return (
+    <Tooltip label={ labels[type] }>
+      { icon }
+    </Tooltip>
+  );
+};
+
+export default React.memo(chakra(AddressFromToIcon));

ui/shared/address/utils.ts

+export type TxCourseType = 'in' | 'out' | 'self' | 'unspecified';
+
+export function getTxCourseType(from: string, to: string | undefined, current?: string): TxCourseType {
+  if (current === undefined) {
+    return 'unspecified';
+  }
+
+  if (to && from === to && from === current) {
+    return 'self';
+  }
+
+  if (from === current) {
+    return 'out';
+  }
+
+  if (to && to === current) {
+    return 'in';
+  }
+
+  return 'unspecified';
+}

ui/shared/entities/address/AddressEntity.tsx

@@ -161,7 +161,7 @@ const AddressEntry = (props: EntityProps) => {
         content: `" "`,
         position: 'absolute',
         top: '-5px',
-        left: '-5px',
+        left: '-6px',
         width: `calc(100% + ${ props.noCopy ? 10 : 5 }px)`,
         height: 'calc(100% + 8px)',
         borderRadius: 'base',