rework toasts (#475)

src/entries/popup/components/Toast/Toast.tsx

@@ -1,33 +1,47 @@
+import EventEmitter from 'events';
+
 import React, { useEffect, useState } from 'react';
 
 import { Box, Inline, Row, Rows, Text } from '~/design-system';
 
-import { useToast } from '../../hooks/useToast';
 import { zIndexes } from '../../utils/zIndexes';
 
+const eventEmitter = new EventEmitter();
+
+type ToastInfo = { title: string; description?: string };
+
+const toastListener = (
+  callback: ({ title, description }: ToastInfo) => void,
+) => {
+  eventEmitter.addListener('rainbow_toast', callback);
+  return () => {
+    eventEmitter.removeListener('rainbow_toast', callback);
+  };
+};
+
+export const triggerToast = ({ title, description }: ToastInfo) => {
+  eventEmitter.emit('rainbow_toast', { title, description });
+};
+
 export const Toast = () => {
-  const [visible, setVisible] = useState(false);
-  const [text, setText] = useState<{ title: string; description?: string }>({
-    title: '',
-    description: '',
-  });
-  const { listenToast, clearToastListener } = useToast();
+  const [toastInfo, setToastInfo] = useState<ToastInfo | null>(null);
 
-  listenToast(
-    async ({ title, description }: { title: string; description?: string }) => {
-      setText({ title, description });
-      setVisible(true);
-      setTimeout(() => {
-        setVisible(false);
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    const clearToastListener = toastListener(({ title, description }) => {
+      setToastInfo({ title, description });
+      timeout = setTimeout(() => {
+        setToastInfo(null);
       }, 3000);
-    },
-  );
+    });
 
-  useEffect(() => {
-    return () => clearToastListener();
-  }, [clearToastListener]);
+    return () => {
+      clearToastListener();
+      clearTimeout(timeout);
+    };
+  }, []);
 
-  if (!visible) return null;
+  if (!toastInfo) return null;
   return (
     <Box
       width="full"
@@ -44,18 +58,18 @@ export const Toast = () => {
             <Rows space="6px">
               <Row>
                 <Text color="label" size="12pt" weight="bold" align="center">
-                  {text.title}
+                  {toastInfo.title}
                 </Text>
               </Row>
-              {text.description && (
+              {toastInfo.description && (
                 <Row>
                   <Text
                     color="labelTertiary"
                     size="11pt"
                     weight="medium"
                     align="center"
                   >
-                    {text.description}
+                    {toastInfo.description}
                   </Text>
                 </Row>
               )}

src/entries/popup/hooks/useHomeShortcuts.ts

@@ -10,21 +10,20 @@ import { useSelectedTransactionStore } from '~/core/state/selectedTransaction';
 import { truncateAddress } from '~/core/utils/address';
 import { getProfileUrl, goToNewTab } from '~/core/utils/tabs';
 
+import { triggerToast } from '../components/Toast/Toast';
 import * as wallet from '../handlers/wallet';
 import { ROUTES } from '../urls';
 import { clickHeaderRight } from '../utils/clickHeader';
 
 import { useKeyboardShortcut } from './useKeyboardShortcut';
 import { useRainbowNavigate } from './useRainbowNavigate';
-import { useToast } from './useToast';
 
 export function useHomeShortcuts() {
   const { currentAddress: address } = useCurrentAddressStore();
   const { data: ensName } = useEnsName({ address });
   const { selectedToken } = useSelectedTokenStore();
   const { selectedTransaction } = useSelectedTransactionStore();
   const { sheet } = useCurrentHomeSheetStore();
-  const { triggerToast } = useToast();
 
   const getHomeShortcutsAreActive = useCallback(() => {
     return sheet === 'none' && !selectedTransaction && !selectedToken;
@@ -36,7 +35,7 @@ export function useHomeShortcuts() {
       title: i18n.t('wallet_header.copy_toast'),
       description: truncateAddress(address),
     });
-  }, [address, triggerToast]);
+  }, [address]);
 
   const openProfile = useCallback(
     () =>

src/entries/popup/pages/home/Header.tsx

@@ -14,9 +14,9 @@ import { BoxStyles, TextStyles } from '~/design-system/styles/core.css';
 
 import { AccountName } from '../../components/AccountName/AccountName';
 import { Avatar } from '../../components/Avatar/Avatar';
+import { triggerToast } from '../../components/Toast/Toast';
 import { useAlert } from '../../hooks/useAlert';
 import { useAvatar } from '../../hooks/useAvatar';
-import { useToast } from '../../hooks/useToast';
 import { useWallets } from '../../hooks/useWallets';
 import { ROUTES } from '../../urls';
 import { tabIndexes } from '../../utils/tabIndexes';
@@ -89,7 +89,6 @@ function ActionButtonsSection() {
   const { avatar } = useAvatar({ address });
 
   const { isWatchingWallet } = useWallets();
-  const { triggerToast } = useToast();
   const { featureFlags } = useFeatureFlagsStore();
   const { triggerAlert } = useAlert();
 
@@ -99,7 +98,7 @@ function ActionButtonsSection() {
       title: i18n.t('wallet_header.copy_toast'),
       description: truncateAddress(address),
     });
-  }, [address, triggerToast]);
+  }, [address]);
 
   const allowSwap = React.useMemo(
     () =>

src/entries/popup/pages/home/TransactionDetailsMenu.tsx

@@ -29,7 +29,7 @@ import {
   DetailsMenuRow,
   DetailsMenuWrapper,
 } from '../../components/DetailsMenu';
-import { useToast } from '../../hooks/useToast';
+import { triggerToast } from '../../components/Toast/Toast';
 
 export function TransactionDetailsMenu({
   children,
@@ -44,7 +44,6 @@ export function TransactionDetailsMenu({
   const [closed, setClosed] = useState(false);
   const onOpenChange = () => setClosed(false);
 
-  const { triggerToast } = useToast();
   const trimmedHash = useMemo(
     () => transaction?.hash?.replace(/-.*/g, '') || '',
     [transaction],
@@ -60,7 +59,7 @@ export function TransactionDetailsMenu({
       title: i18n.t('speed_up_and_cancel.handle_copy_title'),
       description: truncatedAddress,
     });
-  }, [triggerToast, trimmedHash, truncatedAddress]);
+  }, [trimmedHash, truncatedAddress]);
 
   const viewOnExplorer = useCallback(() => {
     const explorer = getTransactionBlockExplorerUrl({

src/entries/popup/pages/qrcode/index.tsx

@@ -6,20 +6,20 @@ import { truncateAddress } from '~/core/utils/address';
 import { Box, Button, Stack, Text } from '~/design-system';
 
 import { AccountName } from '../../components/AccountName/AccountName';
-import { useToast } from '../../hooks/useToast';
+import { triggerToast } from '../../components/Toast/Toast';
 
 import { QRCode } from './qrcode';
 
 export const QRCodePage = () => {
   const { address } = useAccount();
-  const { triggerToast } = useToast();
+
   const handleCopy = React.useCallback(() => {
     navigator.clipboard.writeText(address as string);
     triggerToast({
       title: i18n.t('wallet_header.copy_toast'),
       description: truncateAddress(address),
     });
-  }, [address, triggerToast]);
+  }, [address]);
 
   return (
     <Box

src/entries/popup/pages/seedReveal/index.tsx

@@ -14,17 +14,16 @@ import {
 
 import { FullScreenContainer } from '../../components/FullScreen/FullScreenContainer';
 import SeedPhraseTable from '../../components/SeedPhraseTable/SeedPhraseTable';
+import { triggerToast } from '../../components/Toast/Toast';
 import { exportWallet } from '../../handlers/wallet';
 import { useRainbowNavigate } from '../../hooks/useRainbowNavigate';
-import { useToast } from '../../hooks/useToast';
 import { ROUTES } from '../../urls';
 
 export function SeedReveal() {
   const navigate = useRainbowNavigate();
 
   const [seed, setSeed] = useState('');
   const { currentAddress } = useCurrentAddressStore();
-  const { triggerToast } = useToast();
 
   useEffect(() => {
     const init = async () => {
@@ -43,7 +42,7 @@ export function SeedReveal() {
     triggerToast({
       title: i18n.t('seed_reveal.phrase_copied'),
     });
-  }, [seed, triggerToast]);
+  }, [seed]);
 
   return (
     <FullScreenContainer>

src/entries/popup/pages/settings/privacy/walletsAndKeys/recoveryPhrase/recoveryPhrase.tsx

@@ -3,16 +3,15 @@ import { useLocation } from 'react-router-dom';
 
 import { i18n } from '~/core/languages';
 import SeedPhraseTable from '~/entries/popup/components/SeedPhraseTable/SeedPhraseTable';
+import { triggerToast } from '~/entries/popup/components/Toast/Toast';
 import ViewSecret from '~/entries/popup/components/ViewSecret/ViewSecret';
 import { exportWallet } from '~/entries/popup/handlers/wallet';
 import { useRainbowNavigate } from '~/entries/popup/hooks/useRainbowNavigate';
-import { useToast } from '~/entries/popup/hooks/useToast';
 import { ROUTES } from '~/entries/popup/urls';
 
 export function RecoveryPhrase() {
   const { state } = useLocation();
   const navigate = useRainbowNavigate();
-  const { triggerToast } = useToast();
 
   const [seed, setSeed] = useState('');
 
@@ -28,7 +27,7 @@ export function RecoveryPhrase() {
         'settings.privacy_and_security.wallets_and_keys.recovery_phrase.phrase_copied',
       ),
     });
-  }, [seed, triggerToast]);
+  }, [seed]);
 
   useEffect(() => {
     const fetchRecoveryPhrase = async () => {

src/entries/popup/pages/walletSwitcher/index.tsx

@@ -42,6 +42,7 @@ import {
   MoreInfoOption,
 } from '../../components/MoreInfoButton/MoreInfoButton';
 import { QuickPromo } from '../../components/QuickPromo/QuickPromo';
+import { triggerToast } from '../../components/Toast/Toast';
 import { getWallet, remove, wipe } from '../../handlers/wallet';
 import { useAvatar } from '../../hooks/useAvatar';
 import { useRainbowNavigate } from '../../hooks/useRainbowNavigate';
@@ -95,6 +96,10 @@ const infoButtonOptions = ({
   {
     onSelect: () => {
       navigator.clipboard.writeText(account.address as string);
+      triggerToast({
+        title: i18n.t('wallet_header.copy_toast'),
+        description: truncateAddress(account.address),
+      });
     },
     label: i18n.t('wallet_switcher.copy_address'),
     subLabel: truncateAddress(account.address),