feat: toast

package.json

@@ -143,6 +143,7 @@
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-toast": "1.1.5",
     "@radix-ui/react-tooltip": "1.0.7",
     "@radix-ui/themes": "2.0.3",
     "@reduxjs/toolkit": "1.9.6",

src/app/app.tsx

@@ -1,20 +1,22 @@
 import { Suspense } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 
+// import { Provider as RadixToastProvider } from '@radix-ui/react-toast';
 import { radixBaseCSS } from '@radix-ui/themes/styles.css';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { styled } from 'leather-styles/jsx';
 import { PersistGate } from 'redux-persist/integration/react';
 
 import { queryClient } from '@app/common/persistence';
+import { ThemeSwitcherProvider } from '@app/common/theme-provider';
 import { FullPageLoadingSpinner } from '@app/components/loading-spinner';
 import { Devtools } from '@app/features/devtool/devtools';
 import { AppErrorBoundary } from '@app/features/errors/app-error-boundary';
+import { HeadProvider } from '@app/features/html-head/head-provider';
+import { Toasts } from '@app/features/toasts/toasts';
 import { AppRoutes } from '@app/routes/app-routes';
 import { persistor, store } from '@app/store';
 
-import { ThemeSwitcherProvider } from './common/theme-provider';
-import { HeadProvider } from './features/html-head/head-provider';
 import './index.css';
 
 const reactQueryDevToolsEnabled = process.env.REACT_QUERY_DEVTOOLS_ENABLED === 'true';
@@ -26,16 +28,18 @@ export function App() {
         <HeadProvider />
         {/* TODO: this works but investigate importing radixBaseCSS in panda layer config */}
         <ThemeSwitcherProvider>
-          <styled.div css={radixBaseCSS}>
-            <QueryClientProvider client={queryClient}>
-              <Suspense fallback={<FullPageLoadingSpinner />}>
-                <AppErrorBoundary>
-                  <AppRoutes />
-                </AppErrorBoundary>
-                {reactQueryDevToolsEnabled && <Devtools />}
-              </Suspense>
-            </QueryClientProvider>
-          </styled.div>
+          <Toasts>
+            <styled.div css={radixBaseCSS}>
+              <QueryClientProvider client={queryClient}>
+                <Suspense fallback={<FullPageLoadingSpinner />}>
+                  <AppErrorBoundary>
+                    <AppRoutes />
+                  </AppErrorBoundary>
+                  {reactQueryDevToolsEnabled && <Devtools />}
+                </Suspense>
+              </QueryClientProvider>
+            </styled.div>
+          </Toasts>
         </ThemeSwitcherProvider>
       </PersistGate>
     </ReduxProvider>

src/app/common/hooks/account/use-create-account.ts

@@ -1,19 +1,19 @@
 import { useCallback } from 'react';
-import { toast } from 'react-hot-toast';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useKeyActions } from '@app/common/hooks/use-key-actions';
+import { useToast } from '@app/features/toasts/use-toast';
 
 export function useCreateAccount() {
   const { createNewAccount } = useKeyActions();
   const analytics = useAnalytics();
+  const toast = useToast();
 
   return useCallback(() => {
     void analytics.track('create_new_account');
     void toast.promise(createNewAccount(), {
-      loading: 'Creating account...',
       success: 'Account created!',
       error: 'Error creating account.',
     });
-  }, [analytics, createNewAccount]);
+  }, [analytics, createNewAccount, toast]);
 }

src/app/common/hooks/use-submit-stx-transaction.ts

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { toast } from 'react-hot-toast';
 
 import { bytesToHex } from '@stacks/common';
 import { StacksTransaction, broadcastTransaction } from '@stacks/transactions';
@@ -12,6 +11,7 @@ import { useRefreshAllAccountData } from '@app/common/hooks/account/use-refresh-
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useLoading } from '@app/common/hooks/use-loading';
 import { safelyFormatHexTxid } from '@app/common/utils/safe-handle-txid';
+import { useToast } from '@app/features/toasts/use-toast';
 import { useCurrentStacksNetworkState } from '@app/store/networks/networks.hooks';
 import { useSubmittedTransactionsActions } from '@app/store/submitted-transactions/submitted-transactions.hooks';
 
@@ -27,6 +27,7 @@ interface UseSubmitTransactionCallbackArgs {
 }
 export function useSubmitTransactionCallback({ loadingKey }: UseSubmitTransactionArgs) {
   const submittedTransactionsActions = useSubmittedTransactionsActions();
+  const toast = useToast();
 
   const analytics = useAnalytics();
   const refreshAccountData = useRefreshAllAccountData();
@@ -67,6 +68,7 @@ export function useSubmitTransactionCallback({ loadingKey }: UseSubmitTransactio
     [
       setIsLoading,
       stacksNetwork,
+      toast,
       setIsIdle,
       submittedTransactionsActions,
       analytics,

src/app/debug.ts

@@ -1,7 +1,6 @@
-import toast from 'react-hot-toast';
-
 import * as reduxPersist from 'redux-persist';
 
+import { logger } from '@shared/logger';
 import { getLogsFromBrowserStorage } from '@shared/logger-storage';
 import { persistConfig } from '@shared/storage/redux-pesist';
 
@@ -29,7 +28,7 @@ const debug = {
     return reduxPersist.getStoredState(persistConfig);
   },
   setHighestAccountIndex(index: number) {
-    toast.success('Highest account index set to ' + index);
+    logger.info(`Highest account index set to ${index}`);
     store.dispatch(stxChainSlice.actions.restoreAccountIndex(index));
   },
   resetMessages() {

src/app/features/container/container.tsx

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import { Toaster } from 'react-hot-toast';
 import { Outlet, useLocation } from 'react-router-dom';
 
 import { closeWindow } from '@shared/utils';
@@ -35,7 +34,6 @@ export function Container() {
     <>
       <SwitchAccountDrawer />
       <SettingsDropdown />
-      <Toaster position="bottom-center" toastOptions={{ style: { fontSize: '14px' } }} />
       <ContainerLayout header={routeHeader}>
         <Outlet />
       </ContainerLayout>

src/app/features/html-head/head-provider.tsx

@@ -1,13 +1,13 @@
-import { Link, HeadProvider as ReastHeadProvider, Title } from 'react-head';
+import { Link, HeadProvider as ReactHeadProvider, Title } from 'react-head';
 
 import { useNewBrandApprover } from '@app/store/settings/settings.selectors';
 
 export function HeadProvider() {
   const { hasApprovedNewBrand } = useNewBrandApprover();
   return (
-    <ReastHeadProvider>
+    <ReactHeadProvider>
       {hasApprovedNewBrand ? <LeatherMetaTags /> : <HiroMetaTags />}
-    </ReastHeadProvider>
+    </ReactHeadProvider>
   );
 }
 

src/app/features/increase-fee-drawer/components/increase-stx-fee-form.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect } from 'react';
-import { toast } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
 import BigNumber from 'bignumber.js';
@@ -18,6 +17,7 @@ import { stxFeeValidator } from '@app/common/validation/forms/fee-validators';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { StacksTransactionItem } from '@app/components/stacks-transaction-item/stacks-transaction-item';
 import { useStacksBroadcastTransaction } from '@app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction';
+import { useToast } from '@app/features/toasts/use-toast';
 import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks';
 import { useSubmittedTransactionsActions } from '@app/store/submitted-transactions/submitted-transactions.hooks';
 import { useRawDeserializedTxState, useRawTxIdState } from '@app/store/transactions/raw.hooks';
@@ -28,6 +28,7 @@ import { IncreaseFeeActions } from './increase-fee-actions';
 import { IncreaseFeeField } from './increase-fee-field';
 
 export function IncreaseStxFeeForm() {
+  const toast = useToast();
   const refreshAccountData = useRefreshAllAccountData();
   const tx = useSelectedTx();
   const navigate = useNavigate();
@@ -43,9 +44,9 @@ export function IncreaseStxFeeForm() {
   useEffect(() => {
     if (tx?.tx_status !== 'pending' && rawTx) {
       setTxId(null);
-      toast('Your transaction went through! No need to speed it up.');
+      toast.info('Your transaction went through! No need to speed it up.');
     }
-  }, [rawTx, tx?.tx_status, setTxId]);
+  }, [rawTx, tx?.tx_status, setTxId, toast]);
 
   const onSubmit = useCallback(
     async (values: any) => {

src/app/features/increase-fee-drawer/hooks/use-btc-increase-fee.ts

@@ -1,4 +1,3 @@
-import { toast } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
 import * as btc from '@scure/btc-signer';
@@ -21,13 +20,15 @@ import {
 } from '@app/common/transactions/bitcoin/utils';
 import { MAX_FEE_RATE_MULTIPLIER } from '@app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee';
 import { useBitcoinFeesList } from '@app/components/bitcoin-fees-list/use-bitcoin-fees-list';
+import { useToast } from '@app/features/toasts/use-toast';
 import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
 import { useBitcoinBroadcastTransaction } from '@app/query/bitcoin/transaction/use-bitcoin-broadcast-transaction';
 import { useBitcoinScureLibNetworkConfig } from '@app/store/accounts/blockchain/bitcoin/bitcoin-keychain';
 import { useSignBitcoinTx } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 
 export function useBtcIncreaseFee(btcTx: BitcoinTx) {
+  const toast = useToast();
   const navigate = useNavigate();
   const networkMode = useBitcoinScureLibNetworkConfig();
   const analytics = useAnalytics();

src/app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
 import { Route, useLocation } from 'react-router-dom';
 
 import * as btc from '@scure/btc-signer';
@@ -27,6 +26,7 @@ import {
   getBitcoinAppVersion,
   isBitcoinAppOpen,
 } from '@app/features/ledger/utils/bitcoin-ledger-utils';
+import { useToast } from '@app/features/toasts/use-toast';
 import { useSignLedgerBitcoinTx } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 
@@ -38,6 +38,7 @@ export const ledgerBitcoinTxSigningRoutes = ledgerSignTxRoutes({
 });
 
 function LedgerSignBitcoinTxContainer() {
+  const toast = useToast();
   const location = useLocation();
   const ledgerNavigate = useLedgerNavigate();
   const ledgerAnalytics = useLedgerAnalytics();

src/app/features/ledger/flows/request-stacks-keys/ledger-request-stacks-keys.tsx

@@ -1,4 +1,3 @@
-import toast from 'react-hot-toast';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
@@ -18,9 +17,11 @@ import {
   isStacksAppOpen,
   useActionCancellableByUser,
 } from '@app/features/ledger/utils/stacks-ledger-utils';
+import { useToast } from '@app/features/toasts/use-toast';
 import { stacksKeysSlice } from '@app/store/ledger/stacks/stacks-key.slice';
 
 function LedgerRequestStacksKeys() {
+  const toast = useToast();
   const navigate = useNavigate();
   const ledgerNavigate = useLedgerNavigate();
   const canUserCancelAction = useActionCancellableByUser();

src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx

@@ -1,4 +1,3 @@
-import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
 import { Stack } from 'leather-styles/jsx';
@@ -10,6 +9,7 @@ import { formatMoneyPadded } from '@app/common/money/format-money';
 import { delay } from '@app/common/utils';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import { InfoCard, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
+import { useToast } from '@app/features/toasts/use-toast';
 import {
   useCurrentTaprootAccountBalance,
   useCurrentTaprootAccountUninscribedUtxos,
@@ -23,6 +23,7 @@ import { RetrieveTaprootToNativeSegwitLayout } from './components/retrieve-tapro
 import { useGenerateRetrieveTaprootFundsTx } from './use-generate-retrieve-taproot-funds-tx';
 
 export function RetrieveTaprootToNativeSegwit() {
+  const toast = useToast();
   const navigate = useNavigate();
   const balance = useCurrentTaprootAccountBalance();
   const recipient = useCurrentAccountNativeSegwitAddressIndexZero();

src/app/features/settings-dropdown/components/advanced-menu-items.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { useAsync } from 'react-async-hook';
-import toast from 'react-hot-toast';
 
 import {
   clearBrowserStorageLogs,
@@ -10,6 +9,7 @@ import {
 import { isNumber } from '@shared/utils';
 
 import { Divider } from '@app/components/layout/divider';
+import { useToast } from '@app/features/toasts/use-toast';
 import { Caption } from '@app/ui/components/typography/caption';
 
 import { SettingsMenuItem as MenuItem } from './settings-menu-item';
@@ -27,6 +27,7 @@ interface AdvancedMenuItemsProps {
 }
 export function AdvancedMenuItems({ closeHandler, settingsShown }: AdvancedMenuItemsProps) {
   const { result: logSizeInBytes } = useAsync(async () => getLogSizeInBytes(), [settingsShown]);
+  const toast = useToast();
 
   const diagnosticLogText = useMemo(() => {
     const noLogInfoMsg = `There are no logs cached`;

src/app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction.tsx

@@ -1,5 +1,4 @@
 import { useMemo, useState } from 'react';
-import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
 import { AuthType, StacksTransaction } from '@stacks/transactions';
@@ -15,6 +14,7 @@ import { LoadingKeys } from '@app/common/hooks/use-loading';
 import { useSubmitTransactionCallback } from '@app/common/hooks/use-submit-stx-transaction';
 import { stacksTransactionToHex } from '@app/common/transactions/stacks/transaction.utils';
 import { delay } from '@app/common/utils';
+import { useToast } from '@app/features/toasts/use-toast';
 import { useTransactionRequest } from '@app/store/transactions/requests.hooks';
 import { useSignStacksTransaction } from '@app/store/transactions/transaction.hooks';
 
@@ -31,6 +31,7 @@ export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?
   const requestToken = useTransactionRequest();
   const { formSentSummaryTxState } = useStacksTransactionSummary(token);
   const navigate = useNavigate();
+  const toast = useToast();
 
   const broadcastTransactionFn = useSubmitTransactionCallback({
     loadingKey: LoadingKeys.SUBMIT_SEND_FORM_TRANSACTION,
@@ -107,14 +108,15 @@ export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?
       isBroadcasting,
     };
   }, [
-    broadcastTransactionFn,
-    navigate,
-    signStacksTransaction,
     isBroadcasting,
+    requestToken,
+    tabId,
+    navigate,
     token,
     formSentSummaryTxState,
     decimals,
-    requestToken,
-    tabId,
+    toast,
+    broadcastTransactionFn,
+    signStacksTransaction,
   ]);
 }