SD-91: Improve activity history display and transaction handling

Author: rAskVAL

package-lock.json

@@ -25,6 +25,7 @@
     "@number-flow/react": "^0.5.7",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@react-hookz/web": "^25.1.0",
     "@reown/appkit": "^1.7.0",
     "@reown/appkit-adapter-wagmi": "^1.7.0",
@@ -49,6 +50,7 @@
     "ts-pattern": "^5.6.2",
     "tsafe": "^1.8.5",
     "utility-types": "^3.11.0",
+    "uuid": "^11.1.0",
     "viem": "^2.23.14",
     "vite-plugin-svgr": "^4.3.0",
     "wagmi": "^2.14.15",

package.json

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import ChainIcon from 'src/domains/chains/components/ChainIcon.tsx';
+import ChainIcon from 'src/domains/chains/components/ChainIcon';
 import CIcon from 'src/domains/misc/components/CIcon';
 import vars from 'src/domains/styling/utils/vars';
 

src/domains/misc/components/AccountTypeIcon.tsx

@@ -1,3 +1,4 @@
+import { ComponentProps, forwardRef } from 'react';
 import styled from 'styled-components';
 
 import { icons, IconName } from './icons';
@@ -10,27 +11,32 @@ type Props = {
   color?: string,
   strokeWidth?: number,
   className?: string,
-};
+} & ComponentProps<'svg'>;
 
-const CIcon = ({
+const CIcon = forwardRef<SVGSVGElement, Props>(({
   icon,
   size = 24,
   color,
   strokeWidth = 0,
   className,
-}: Props) => {
+  ...props
+}, ref) => {
   const IconComponent = icons[icon];
 
   return (
     <Icon
+      ref={ref}
       as={IconComponent}
       $size={size}
       $color={color}
       $strokeWidth={strokeWidth}
       className={className}
+      {...props}
     />
   );
-};
+});
+
+CIcon.displayName = 'CIcon';
 
 export default styled(CIcon)``;
 

src/domains/misc/components/CIcon/CIcon.tsx

@@ -4,6 +4,7 @@ import {
 import { styled } from 'styled-components';
 
 import CIcon from 'src/domains/misc/components/CIcon';
+import Tooltip from 'src/domains/misc/components/Tooltip';
 import { typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
@@ -20,7 +21,11 @@ const InfoPair = ({ label, className, tooltipText, ...props }: Props) => (
   <ContainerHorizontal className={className}>
     <Label>
       {label}
-      {tooltipText && <CIcon icon="Info" color={vars('--color-neutral-foreground-4-rest')} />}
+      {tooltipText && (
+        <Tooltip text={tooltipText}>
+          <CIcon icon="Info" color={vars('--color-neutral-foreground-4-rest')} size={16} />
+        </Tooltip>
+      )}
     </Label>
     <Separator />
     <Value>

src/domains/misc/components/InfoPair.tsx

@@ -2,15 +2,15 @@ import { useMediaQuery } from '@react-hookz/web';
 import styled from 'styled-components';
 
 import ChainSelector from 'src/domains/chains/components/ChainSelector';
-import ConnectModal from 'src/domains/chains/components/ConnectModal.tsx';
+import ConnectModal from 'src/domains/chains/components/ConnectModal';
 import { useWallet } from 'src/domains/chains/components/WalletProvider';
 import Button from 'src/domains/misc/components/Button';
+import { useModal } from 'src/domains/misc/components/Modal';
 import { BOTTOM_MENU_BREAKPOINT } from 'src/domains/misc/consts/consts';
 import formatAddress from 'src/domains/misc/utils/formatAddress';
 import { typography } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
-import { useModal } from '../../Modal';
 import Navigation from '../Navigation';
 
 import Brand from './Brand';

src/domains/misc/components/Layout/TopBar/TopBar.tsx

@@ -10,7 +10,7 @@ import { useToast } from 'src/domains/misc/components/Toast';
 import { boxShadows } from 'src/domains/styling/utils/tokens';
 import vars from 'src/domains/styling/utils/vars';
 
-import { useModalControls } from './';
+import { useModalControls } from './ModalProvider';
 
 type Config = {
   title?: string | ReactElement,

src/domains/misc/components/Modal/Modal.tsx

@@ -15,8 +15,6 @@ import { v4 as uuidv4 } from 'uuid';
 
 import vars from 'src/domains/styling/utils/vars';
 
-import Modal from './Modal';
-
 type Modal = {
   id: string,
   modal: ReactElement,
@@ -26,8 +24,6 @@ type Modal = {
 type ModalContextType = {
   mount: (modal: Modal, options?: { checkDuplicateBy?: string[] }) => void,
   unmount: (id: string) => void,
-  updateId: (oldId: string, newId: string) => Promise<Modal | null>,
-  getModals: () => Modal[],
   modals: Modal[],
 };
 
@@ -59,31 +55,8 @@ export const ModalProvider = ({ children }: { children: ReactNode }) => {
     setModals(prev => prev.filter(m => m.id !== id));
   }, []);
 
-  const updateId = useCallback(async (oldId: string, newId: string): Promise<Modal | null> => {
-    return new Promise(resolve => {
-      setModals(prev => {
-        const modalIndex = prev.findIndex(modal => modal.id === oldId);
-
-        if (modalIndex === -1) {
-          resolve(null);
-          return prev;
-        }
-
-        const updatedModal = { ...prev[modalIndex], id: newId };
-        const updatedModals = prev.map((modal, index) =>
-          index === modalIndex ? updatedModal : modal
-        );
-
-        resolve(updatedModal);
-        return updatedModals;
-      });
-    });
-  }, []);
-
-  const getModals = () => modals;
-
   return (
-    <ModalContext.Provider value={{ mount, unmount, updateId, modals, getModals }}>
+    <ModalContext.Provider value={{ mount, unmount, modals }}>
       {children}
       {createPortal(
         <AnimatePresence>
@@ -123,9 +96,9 @@ export const useModals = () => {
 };
 
 export const useModal = () => {
-  const { mount, unmount, modals, updateId: _updateId } = useModals();
-  const defaultId = useRef(uuidv4()).current;
-  const currentIdRef = useRef<string>(defaultId);
+  const { mount, unmount, modals } = useModals();
+  const [defaultId] = useState(uuidv4());
+  const currentIdRef = useRef(defaultId);
 
   const open = useCallback((modalElement: ReactElement, options?: { idOverride?: string }) => {
     const modalId = options?.idOverride ?? defaultId;
@@ -137,23 +110,18 @@ export const useModal = () => {
     unmount(currentIdRef.current);
   }, [unmount]);
 
-  const updateId = async (newId: string) => {
-    return _updateId(currentIdRef.current, newId);
-  };
-
   const modal = modals.find(m => m.id === currentIdRef.current);
 
   return {
     open,
     close,
     isOpen: !!modal,
-    updateId,
   };
 };
 
 export const useModalControls = () => {
   const ctx = useContext(ModalControlsContext);
-  if (!ctx) throw new Error('useModal must be used within ModalControlsProvider');
+  if (!ctx) throw new Error('useModalControls must be used within ModalControlsProvider');
 
   return ctx;
 };

src/domains/misc/components/Modal/ModalProvider.tsx

@@ -6,12 +6,11 @@ import { WagmiProvider } from 'wagmi';
 import WalletProvider from 'src/domains/chains/components/WalletProvider';
 import { wagmiAdapter } from 'src/domains/chains/utils/clients';
 import { Definition } from 'src/domains/chains/utils/definitions';
+import { ModalProvider } from 'src/domains/misc/components/Modal';
 import { ToastsProvider } from 'src/domains/misc/components/Toast';
 import { QueryClientProvider } from 'src/domains/misc/utils/queryClient';
 import WasmProvider from 'src/domains/shielder/utils/WasmProvider';
 
-import { ModalProvider } from '../Modal';
-
 import GlobalStylesWithTheme from './GlobalStylesWithTheme';
 import PostHogProvider from './PostHogProvider';
 

src/domains/misc/components/Providers/Providers.tsx

@@ -53,7 +53,7 @@ const Toast = ({
   return (
     <Container title="Toast">
       <IconContainer>
-        {status === 'inProgress' ? <Spinner icon="Spinner" size={16} /> : <CIcon size={16} icon={icon} color={color} />}
+        {status === 'inProgress' ? <Spinner icon="Spinner" size={20} /> : <CIcon size={20} icon={icon} color={color} />}
       </IconContainer>
       <RightSection>
         <Header>