refactor: update Token Screen

packages/extension-polkagate/src/class/endpointManager2.ts

@@ -5,7 +5,8 @@ import type { EndpointType } from '../util/types';
 
 import { NO_PASS_PERIOD as ENDPOINT_TIMEOUT } from '../util/constants';
 
-const ENDPOINTS_NAME_IN_STORAGE = 'endpoints2'
+const ENDPOINTS_NAME_IN_STORAGE = 'endpoints2';
+
 // Define types for saved endpoints and listener function
 type SavedEndpoints = Record<string, EndpointType>;
 type Listener = (genesisHash: string, endpoint: EndpointType) => void;

packages/extension-polkagate/src/components/ExtensionPopup.tsx

@@ -8,7 +8,7 @@ import type { TransitionProps } from '@mui/material/transitions';
 import type { OverridableStringUnion } from '@mui/types';
 import type { Icon } from 'iconsax-react';
 
-import { Box, Container, Dialog, Grid, Slide, type SxProps, Typography, type TypographyPropsVariantOverrides } from '@mui/material';
+import { Box, Container, Dialog, Grid, Slide, type SxProps, type Theme, Typography, type TypographyPropsVariantOverrides } from '@mui/material';
 import React from 'react';
 
 import { GradientBorder, GradientDivider, RedGradient } from '../style';
@@ -32,13 +32,14 @@ export interface Props {
   withoutTopBorder?: boolean;
   withGradientBorder?: boolean;
   withoutBackground?: boolean;
+  style?: SxProps<Theme>;
 }
 
 const Transition = React.forwardRef(function Transition (props: TransitionProps & { children: React.ReactElement<unknown>; }, ref: React.Ref<unknown>) {
   return <Slide direction='up' easing='ease-in-out' ref={ref} timeout={250} {...props} />;
 });
 
-function ExtensionPopup ({ TitleIcon, children, handleClose, iconColor = '#AA83DC', iconSize = 18, iconVariant, openMenu, pt, title, titleAlignment, titleDirection = 'row', titleStyle = {}, titleVariant = 'H-3', withGradientBorder = false, withoutBackground, withoutTopBorder = false }: Props): React.ReactElement<Props> {
+function ExtensionPopup ({ TitleIcon, children, handleClose, iconColor = '#AA83DC', iconSize = 18, iconVariant, openMenu, pt, style, title, titleAlignment, titleDirection = 'row', titleStyle = {}, titleVariant = 'H-3', withGradientBorder = false, withoutBackground, withoutTopBorder = false }: Props): React.ReactElement<Props> {
   return (
     <Dialog
       PaperProps={{
@@ -61,11 +62,11 @@ function ExtensionPopup ({ TitleIcon, children, handleClose, iconColor = '#AA83D
       fullScreen
       open={openMenu}
     >
-      <Container disableGutters sx={{ height: '100%', width: '100%' }}>
+      <Container disableGutters sx={{ height: '100%', width: '100%', ...style }}>
         <Grid alignItems='center' container item justifyContent='center' sx={{ pb: '12px', pt: `${pt ?? 18}px` }}>
           <CustomCloseSquare color='#AA83DC' onClick={handleClose} size='48' style={{ cursor: 'pointer' }} />
         </Grid>
-        <Grid alignItems='center' container item justifyContent='center' sx={{ bgcolor: '#1B133C', border: '2px solid', borderColor: '#FFFFFF0D', borderTopLeftRadius: '32px', borderTopRightRadius: '32px', display: 'block', height: `calc(100% - ${60 + (pt ?? 0)}px)`, overflow: 'hidden', overflowY: 'scroll', p: '10px', pb: '10px', position: 'relative', width: '100%' }}>
+        <Grid alignItems='center' container id='container' item justifyContent='center' sx={{ bgcolor: '#1B133C', border: '2px solid', borderColor: '#FFFFFF0D', borderTopLeftRadius: '32px', borderTopRightRadius: '32px', display: 'block', height: `calc(100% - ${60 + (pt ?? 0)}px)`, overflow: 'hidden', overflowY: 'scroll', p: '10px', pb: '10px', position: 'relative', width: '100%' }}>
           {withGradientBorder && <GradientBorder />}
           <Grid alignItems='center' columnGap='10px' container direction={titleDirection} item justifyContent={titleAlignment ?? 'center'} p='10px'>
             {TitleIcon

packages/extension-polkagate/src/components/SVG/Ice.tsx

@@ -0,0 +1,59 @@
+// Copyright 2019-2025 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+interface IceProps {
+  onClick?: () => void;
+  style?: React.CSSProperties;
+  className?: string;
+  color?: string;
+  size?: string;
+}
+
+const Ice: React.FC<IceProps> = ({ className, onClick, size = '18', style }) => (
+  <svg
+    className={className}
+    fill='none'
+    height={size}
+    onClick={onClick}
+    style={style}
+    viewBox='0 0 32 32'
+    width={size}
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <g clipPath='url(#clip0_3313_13691)' opacity='0.8'>
+      <path
+        d='M30.211 22.6767V9.3233C30.211 8.37774 29.7066 7.50399 28.8877 7.03117L17.3234 0.354548C16.5045 -0.118264 15.4956 -0.118264 14.6767 0.354548L3.11238 7.03124C2.2935 7.50405 1.78906 8.37774 1.78906 9.32336V22.6767C1.78906 23.6222 2.2935 24.496 3.11238 24.9688L14.6767 31.6455C15.4956 32.1183 16.5045 32.1183 17.3234 31.6455L28.8876 24.9687C29.7066 24.496 30.211 23.6222 30.211 22.6767Z'
+        fill='#AA83DC'
+      />
+      <path
+        d='M28.8877 24.9687C29.2986 24.7315 29.6301 24.3931 29.8586 23.9955L16 15.9942V32C16.4569 32 16.9139 31.8818 17.3233 31.6454L28.8877 24.9687Z'
+        fill='#9167C2'
+      />
+      <path
+        d='M14.6768 0.354562L3.11238 7.03125C2.2935 7.50406 1.78906 8.37775 1.78906 9.32331V22.6766C1.78906 23.6222 2.29356 24.4959 3.11238 24.9687L14.6767 31.6454C15.0862 31.8818 15.5431 32 16.0001 32V0C15.5431 0 15.0862 0.118187 14.6768 0.354562Z'
+        fill='#9167C2'
+      />
+      <path
+        d='M16.001 16L29.8574 7.99999C29.629 7.60424 29.2981 7.26761 28.8887 7.03124L17.3243 0.354548C16.5054 -0.118264 15.4965 -0.118264 14.6776 0.354548L3.11328 7.03124C2.70384 7.26761 2.37297 7.60424 2.14453 7.99999L16.001 16Z'
+        fill='#B89BE5'
+      />
+      <path
+        d='M3.11188 24.9687C2.70094 24.7315 2.36919 24.3934 2.14062 23.9958L15.9996 15.9942V32C15.5426 32 15.0857 31.8818 14.6762 31.6454L3.11188 24.9687Z'
+        fill='#B89BE5'
+      />
+      <path
+        d='M16.0005 30.9677C16.2858 30.9677 16.5166 30.7369 16.5166 30.4516V16.2979L28.7742 9.22124C29.0212 9.07861 29.1058 8.76305 28.9632 8.51611C28.8206 8.26961 28.5045 8.18449 28.2581 8.32711L15.7424 15.5529C15.5827 15.6452 15.4844 15.8156 15.4844 16V30.4516C15.4844 30.7369 15.7152 30.9677 16.0005 30.9677Z'
+        fill='#D3BFF2'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_3313_13691'>
+        <rect fill='white' height='32' width='32' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default Ice;

packages/extension-polkagate/src/components/Tooltip.tsx

@@ -22,7 +22,7 @@ interface CustomTooltipProps {
   | 'top-end'
   | 'top-start'
   | 'top';
-  targetRef: RefObject<HTMLElement>;
+  targetRef: RefObject<HTMLElement> | null;
   positionAdjustment?: {
     top?: number;
     left?: number;
@@ -50,7 +50,7 @@ const CustomTooltip = ({ content, placement = 'bottom', positionAdjustment, targ
   }, []);
 
   const updatePosition = useCallback(() => {
-    const target = targetRef.current;
+    const target = targetRef?.current;
 
     if (!target) {
       return;
@@ -67,60 +67,68 @@ const CustomTooltip = ({ content, placement = 'bottom', positionAdjustment, targ
   }, [positionAdjustment?.left, positionAdjustment?.top, targetRef]);
 
   useEffect(() => {
-    const target = targetRef.current;
+    const target = targetRef?.current;
 
     if (!target) {
       return;
     }
 
     updatePosition();
 
+    const observer = new IntersectionObserver(updatePosition, { threshold: 0.1 });
+
+    observer.observe(target);
+
+    window.addEventListener('scroll', updatePosition, true);
+    // window.addEventListener('resize', updatePosition);
     target.addEventListener('mouseenter', showTooltip);
     target.addEventListener('mouseleave', hideTooltip);
 
     return () => {
+      observer.disconnect();
+      window.removeEventListener('scroll', updatePosition, true);
+      // window.removeEventListener('resize', updatePosition);
+
       target?.removeEventListener('mouseenter', showTooltip);
       target?.removeEventListener('mouseleave', hideTooltip);
     };
   }, [hideTooltip, showTooltip, targetRef, updatePosition]);
 
   return (
-    <>
-      <Tooltip
-        arrow
-        componentsProps={{
-          popper: { sx: { m: '5px' } },
-          tooltip: {
-            style: { margin: '5px', marginTop: '12px' },
-            sx: {
-              '& .MuiTooltip-arrow': {
-                color: '#674394',
-                height: '9px'
-              },
-              backgroundColor: '#674394',
-              borderRadius: '8px',
-              color: '#fff',
-              ...theme.typography['B-4'],
-              p: '8px'
-            }
+    <Tooltip
+      arrow
+      componentsProps={{
+        popper: { sx: { m: '5px' } },
+        tooltip: {
+          style: { margin: '5px', marginTop: '12px' },
+          sx: {
+            '& .MuiTooltip-arrow': {
+              color: '#674394',
+              height: '9px'
+            },
+            backgroundColor: '#674394',
+            borderRadius: '8px',
+            color: '#fff',
+            ...theme.typography['B-4'],
+            p: '8px'
           }
+        }
+      }}
+      open={isVisible}
+      placement={placement}
+      title={content}
+    >
+      <div
+        style={{
+          height: position?.height,
+          left: position?.left,
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: position?.top,
+          width: position?.width
         }}
-        open={isVisible}
-        placement={placement}
-        title={content}
-      >
-        <div
-          style={{
-            height: position?.height,
-            left: position?.left,
-            pointerEvents: 'none',
-            position: 'absolute',
-            top: position?.top,
-            width: position?.width
-          }}
-        />
-      </Tooltip>
-    </>
+      />
+    </Tooltip>
   );
 };
 

packages/extension-polkagate/src/hooks/index.ts

@@ -6,6 +6,7 @@ export { default as useAccountAssets } from './useAccountAssets';
 export { default as useAccountAssetsOptions } from './useAccountAssetsOptions';
 export { default as useAccountDisplay } from './useAccountDisplay';
 export { default as useAccountLocks } from './useAccountLocks';
+export { default as useAccountLocks2 } from './useAccountLocks2';
 export { default as useAccountName } from './useAccountName';
 export { default as useAccountsInfo } from './useAccountsInfo';
 export { default as useAccountsOrder } from './useAccountsOrder';
@@ -15,6 +16,7 @@ export { default as useActiveValidators } from './useActiveValidators';
 export { default as useAlerts } from './useAlerts';
 export { default as useAnimateOnce } from './useAnimateOnce';
 export { default as useApi } from './useApi';
+export { default as useApi2 } from './useApi2';
 export { default as useApiWithChain } from './useApiWithChain';
 export { default as useApiWithChain2 } from './useApiWithChain2';
 export { default as useAssetHubAssets } from './useAssetHubAssets';
@@ -37,6 +39,7 @@ export { default as useConvictionOptions } from './useConvictionOptions';
 export { default as useCurrency } from './useCurrency';
 export { default as useCurrentApprovalThreshold } from './useCurrentApprovalThreshold';
 export { default as useCurrentBlockNumber } from './useCurrentBlockNumber';
+export { default as useCurrentBlockNumber2 } from './useCurrentBlockNumber2';
 export { default as useCurrentEraIndex } from './useCurrentEraIndex';
 export { default as useCurrentSupportThreshold } from './useCurrentSupportThreshold';
 export { default as useDecidingCount } from './useDecidingCount';
@@ -54,6 +57,7 @@ export { useGenericLedger } from './useGenericLedger';
 export { default as useGenesisHash } from './useGenesisHash';
 export { default as useGenesisHashOptions } from './useGenesisHashOptions';
 export { default as useHasDelegated } from './useHasDelegated';
+export { default as useHasDelegated2 } from './useHasDelegated2';
 export { default as useHasIdentityTooltipText } from './useHasIdentityTooltipText';
 export { default as useHasProxyTooltipText } from './useHasProxyTooltipText';
 export { default as useIdentity } from './useIdentity';
@@ -69,6 +73,7 @@ export { default as useIsTestnetEnabled } from './useIsTestnetEnabled';
 export { default as useIsValidator } from './useIsValidator';
 export { useLedger } from './useLedger';
 export { default as useLockedInReferenda } from './useLockedInReferenda';
+export { default as useLockedInReferenda2 } from './useLockedInReferenda2';
 export { default as useLostAccountInformation } from './useLostAccountInformation';
 export { default as useManifest } from './useManifest';
 export { useMapEntries } from './useMapEntries';
@@ -106,6 +111,7 @@ export { default as useProxies } from './useProxies';
 export { default as useRedirectOnRefresh } from './useRedirectOnRefresh';
 export { default as useReferendum } from './useReferendum';
 export { default as useReservedDetails } from './useReservedDetails';
+export { default as useReservedDetails2 } from './useReservedDetails2';
 export { default as useSelectedAccount } from './useSelectedAccount';
 export { default as useSelectedChains } from './useSelectedChains';
 export { default as useSelectedProfile } from './useSelectedProfile';
@@ -116,11 +122,13 @@ export { default as useStakingRewards } from './useStakingRewards';
 export { default as useStashId } from './useStashId';
 export { default as useTeleport } from './useTeleport';
 export { default as useTimeToUnlock } from './useTimeToUnlock';
+export { default as useTimeToUnlock2 } from './useTimeToUnlock2';
 export { default as useToken } from './useToken';
 export { default as useTokenPrice } from './useTokenPrice';
 export { default as useTokens } from './useTokens';
 export { default as useTrack } from './useTrack';
 export { default as useTracks } from './useTracks';
+export { default as useTracks2 } from './useTracks2';
 export { default as useTransactionState } from './useTransactionState';
 export { default as useTranslation } from './useTranslation';
 export { default as useUnstakingAmount } from './useUnstakingAmount';
@@ -130,3 +138,4 @@ export { default as useValidators } from './useValidators';
 export { default as useValidatorsIdentities } from './useValidatorsIdentities';
 export { default as useValidatorSuggestion } from './useValidatorSuggestion';
 export { default as useYouHave } from './useYouHave';
+export { default as useYouHave2 } from './useYouHave2';