feat(app): implement Snackbar with react-call

app/package.json

@@ -124,7 +124,6 @@
  "react-native-screens": "3.31.1",
  "react-native-svg": "15.2.0",
  "react-native-tab-view": "^3.5.2",
- "react-native-toast-message": "^2.2.0",
  "react-native-typewriter": "^0.7.0",
  "react-native-unistyles": "^2.9.1",
  "react-native-web": "~0.19.12",

app/src/app/(nav)/[account]/swap.tsx

@@ -24,7 +24,7 @@ import { getSwapOperations } from '~/util/swap/syncswap/swap';
 import Decimal from 'decimal.js';
 import { ampli } from '~/lib/ampli';
 import { SwapToTokenItem } from '#/swap/SwapToTokenItem';
-import { showError } from '#/provider/SnackbarProvider';
+import { showError } from '#/Snackbar';
 import { estimateSwap } from '~/util/swap/syncswap/estimate';
 import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
 import { graphql } from 'relay-runtime';

app/src/app/(sheet)/link.tsx

@@ -4,7 +4,7 @@ import { materialCommunityIcon } from '@theme/icons';
 import { View } from 'react-native';
 import { Text } from 'react-native-paper';
 import { Button } from '#/Button';
-import { showSuccess } from '#/provider/SnackbarProvider';
+import { showSuccess } from '#/Snackbar';
 import { z } from 'zod';
 import { useLocalParams } from '~/hooks/useLocalParams';
 import { createStyles, useStyles } from '@theme/styles';

app/src/app/(sheet)/select/address.tsx

@@ -21,7 +21,7 @@ import { ADDRESS_SELECTED } from '~/hooks/useSelectAddress';
 import { zChain, zArray, zUAddress, zAddress } from '~/lib/zod';
 import * as Clipboard from 'expo-clipboard';
 import { isAddress } from 'viem';
-import { showWarning } from '#/provider/SnackbarProvider';
+import { showWarning } from '#/Snackbar';
 import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import { graphql } from 'relay-runtime';
 import { useLazyQuery } from '~/api';

app/src/app/(sheet)/sessions/connect/[id].tsx

@@ -7,7 +7,7 @@ import { Actions } from '#/layout/Actions';
 import { Sheet } from '#/sheet/Sheet';
 import { AccountsList } from '#/walletconnect/AccountsList';
 import { DappHeader } from '#/walletconnect/DappHeader';
-import { hideSnackbar, showError, showSuccess } from '#/provider/SnackbarProvider';
+import { hideSnackbar, showError, showSuccess } from '#/Snackbar';
 import {
  sessionChains,
  supportedNamespaces,
@@ -91,7 +91,7 @@ export default function ConnectSessionSheet() {
  }),
  });
 
- showSuccess(`Connected with ${dapp}`, { visibilityTime: 2000 });
+ showSuccess(`Connected with ${dapp}`, { duration: 2000 });
  } catch (error) {
  showError(`Failed to connect to ${dapp}: ${(error as Error).message}`, { event: { error } });
  }

app/src/app/(sheet)/wc.tsx

@@ -8,7 +8,7 @@ import { Sheet } from '#/sheet/Sheet';
 import { useLocalParams } from '~/hooks/useLocalParams';
 import { useWalletConnectWithoutWatching } from '~/lib/wc';
 import { zWalletConnectUri } from '~/lib/wc/uri';
-import { showError } from '#/provider/SnackbarProvider';
+import { showError } from '#/Snackbar';
 import { useRouter } from 'expo-router';
 
 export const WalletConnectUriScreenParams = z.object({ uri: zWalletConnectUri() });

app/src/app/_layout.tsx

@@ -13,7 +13,7 @@ import { WalletConnectListeners } from '#/walletconnect/WalletConnectListeners';
 import { AuthGate } from '#/provider/AuthGate';
 import { ApiProvider } from '~/api/ApiProvider';
 import { NotificationsProvider } from '#/provider/NotificationsProvider';
-import { SnackbarProvider } from '#/provider/SnackbarProvider';
+import { Snackbar } from '#/Snackbar';
 import { UpdateProvider } from '#/provider/UpdateProvider';
 import { ThemeProvider } from '~/util/theme/ThemeProvider';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -114,7 +114,7 @@ function RootLayout() {
  </AuthGate>
  </Suspense>
  </Background>
- <SnackbarProvider />
+ <Snackbar.Root />
  <Confirm.Root />
  </GestureHandlerRootView>
  </IntlProvider>

app/src/app/auth.tsx

@@ -20,7 +20,7 @@ import { useEffect } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as Updates from 'expo-updates';
 import { Confirm } from '#/Confirm';
-import { showInfo } from '#/provider/SnackbarProvider';
+import { showInfo } from '#/Snackbar';
 
 const UNLOCKED = new Subject<true>();
 const emitAuth = () => UNLOCKED.next(true);

app/src/app/scan.tsx

@@ -7,7 +7,7 @@ import { Actions } from '#/layout/Actions';
 import { Address, UAddress, tryAsAddress } from 'lib';
 import * as Linking from 'expo-linking';
 import useAsyncEffect from 'use-async-effect';
-import { showError } from '#/provider/SnackbarProvider';
+import { showError } from '#/Snackbar';
 import { parseAppLink } from '~/lib/appLink';
 import { useFocusEffect, useRouter } from 'expo-router';
 import { ScanOverlay } from '#/ScanOverlay';

app/src/components/ScanOverlay.tsx

@@ -2,7 +2,7 @@ import { BackIcon, ContactsIcon, PasteIcon } from '~/util/theme/icons';
 import { IconButton } from 'react-native-paper';
 import { StyleSheet, View } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
-import { showWarning } from '#/provider/SnackbarProvider';
+import { showWarning } from '#/Snackbar';
 import { useSelectAddress } from '~/hooks/useSelectAddress';
 import { useRouter } from 'expo-router';
 import { createStyles, useStyles } from '@theme/styles';

app/src/components/Snackbar.tsx

@@ -0,0 +1,115 @@
+import { createStyles, useStyles } from '@theme/styles';
+import { useEffect } from 'react';
+import { createCallable } from 'react-call';
+import { Snackbar as BaseSnackbar, Text } from 'react-native-paper';
+import { Subject } from 'rxjs';
+import { hapticFeedback } from '~/lib/haptic';
+import { logEvent, LogEventParams } from '~/util/analytics';
+
+const HIDE_SNACKBAR = new Subject<true>();
+
+type SnackbarVariant = 'info' | 'success' | 'warning' | 'error';
+
+export interface SnackbarProps {
+ variant?: SnackbarVariant;
+ message: string;
+ duration?: number;
+ action?: string;
+ event?: Partial<LogEventParams> | boolean;
+}
+
+export const Snackbar = createCallable<SnackbarProps, boolean>(
+ ({ call, variant = 'info', message, duration = 6000, action, event }) => {
+ const { styles } = useStyles(getStylesheet({ variant }));
+
+ useEffect(() => {
+ const sub = HIDE_SNACKBAR.subscribe(() => call.end(false));
+ return () => sub.unsubscribe();
+ }, [call]);
+
+ useEffect(() => {
+ if (variant !== 'info') hapticFeedback(variant);
+ }, [variant]);
+
+ useEffect(() => {
+ if (event && variant !== 'success') {
+ logEvent({
+ level: variant,
+ message,
+ snackbar: true,
+ ...(typeof event === 'object' && event),
+ });
+ }
+ }, [message, variant, event]);
+
+ return (
+ <BaseSnackbar
+ elevation={2}
+ visible
+ duration={duration}
+ onDismiss={() => call.end(false)}
+ style={[styles.snackbarBase, styles.snackbar]}
+ {...(action && {
+ action: {
+ label: action,
+ labelStyle: styles.actionLabel,
+ onPress: () => call.end(true),
+ },
+ })}
+ >
+ <Text variant="bodyMedium" style={styles.message}>
+ {message}
+ </Text>
+ </BaseSnackbar>
+ );
+ },
+);
+
+const getStylesheet = ({ variant }: { variant: SnackbarVariant }) =>
+ createStyles(({ colors }) => {
+ const s = {
+ info: {
+ snackbar: { backgroundColor: colors.inverseSurface },
+ message: { color: colors.inverseOnSurface },
+ actionLabel: { color: colors.inversePrimary },
+ },
+ success: {
+ snackbar: { backgroundColor: colors.successContainer },
+ message: { color: colors.onSuccessContainer },
+ },
+ warning: {
+ snackbar: { backgroundColor: colors.warningContainer },
+ message: { color: colors.onWarningContainer },
+ },
+ error: {
+ snackbar: { backgroundColor: colors.errorContainer },
+ message: { color: colors.onErrorContainer },
+ },
+ }[variant];
+
+ return {
+ actionLabel: {
+ color: colors.primary,
+ },
+ snackbarBase: {
+ maxWidth: 600,
+ },
+ ...s,
+ };
+ });
+
+type ShowOptions = Omit<SnackbarProps, 'variant' | 'message'>;
+
+export const showInfo = (message: string, options?: ShowOptions) =>
+ Snackbar.call({ variant: 'info', message, ...options });
+
+export const showSuccess = (message: string, options?: ShowOptions) =>
+ Snackbar.call({ variant: 'success', message, ...options });
+
+export const showWarning = (message: string, options?: ShowOptions) =>
+ Snackbar.call({ variant: 'warning', message, ...options });
+
+export const showError = (message: string, options?: ShowOptions) =>
+ Snackbar.call({ variant: 'error', message, ...options });
+
+export const hideSnackbar = () => HIDE_SNACKBAR.next(true);

app/src/components/account/PolicySuggestions.tsx

@@ -1,5 +1,4 @@
 import { Chip } from '#/Chip';
-import { showError } from '#/provider/SnackbarProvider';
 import { createStyles, useStyles } from '@theme/styles';
 import { useRouter } from 'expo-router';
 import { asChain } from 'lib';

app/src/components/auth/PasswordSettings.tsx

@@ -11,7 +11,7 @@ import { changeSecureStorePassword } from '~/lib/secure-storage';
 import { createStyles, useStyles } from '@theme/styles';
 import { Actions } from '#/layout/Actions';
 import { Button } from '#/Button';
-import { showInfo } from '#/provider/SnackbarProvider';
+import { showInfo } from '#/Snackbar';
 
 const PASSWORD_HASH = persistedAtom<string | null>('passwordHash', null);
 export const usePasswordHash = () => useAtomValue(PASSWORD_HASH);

app/src/components/cloud/google/useLinkGoogle.ts

@@ -1,4 +1,4 @@
-import { showError } from '#/provider/SnackbarProvider';
+import { showError } from '#/Snackbar';
 import { ampli } from '~/lib/ampli';
 import { useGetGoogleApprover } from '#/cloud/google/useGetGoogleApprover';
 import { graphql } from 'relay-runtime';

app/src/components/cloud/useLinkApple.ts

@@ -1,5 +1,5 @@
 import { useGetAppleApprover } from './useGetAppleApprover';
-import { showError } from '#/provider/SnackbarProvider';
+import { showError } from '#/Snackbar';
 import { ampli } from '~/lib/ampli';
 import { graphql } from 'relay-runtime';
 import { useFragment } from 'react-relay';

app/src/components/link/ledger/LedgerItem.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { ListItem } from '#/list/ListItem';
 import { useGetLedgerApprover } from '~/app/(sheet)/ledger/approve';
 import { APPROVER_BLE_IDS } from '~/hooks/ledger/useLedger';
-import { showError } from '#/provider/SnackbarProvider';
+import { showError } from '#/Snackbar';
 import { useImmerAtom } from 'jotai-immer';
 import { getLedgerDeviceModel } from '~/hooks/ledger/connectLedger';
 import { elipseTruncate } from '~/util/format';
@@ -94,10 +94,11 @@ export function LedgerItem({ device: d, ...props }: LedgerItemProps) {
  },
  }),
  );
- if (!authHeaders)
- return showError('Connection request cancelled', {
- action: { label: 'Try again', onPress: connect },
- });
+ if (!authHeaders) {
+ const retry = await showError('Connection request cancelled', { action: 'Try again' });
+ if (retry) connect();
+ return;
+ }
 
  // 1. Link
  const { approvers } = (await link({ token: user.linkingToken }, { headers: authHeaders })).link;

app/src/components/policy/ApprovalSettings.tsx

@@ -9,7 +9,7 @@ import { ListItemHorizontalTrailing } from '#/list/ListItemHorizontalTrailing';
 import { ListItemTrailingText } from '#/list/ListItemTrailingText';
 import { ApproverItem } from '#/policy/ApproverItem';
 import { ThresholdChip } from './ThresholdChip';
-import { showInfo } from '#/provider/SnackbarProvider';
+import { showInfo } from '#/Snackbar';
 import { useSelectAddress } from '~/hooks/useSelectAddress';
 import { useToggle } from '~/hooks/useToggle';
 import { usePolicyDraft } from '~/lib/policy/policyAsDraft';
@@ -38,24 +38,21 @@ export function ApprovalSettings() {
  }
  };
 
- const remove = (approver: Address) => {
+ const remove = async (approver: Address) => {
  const originalThreshold = policy.threshold;
 
  update((draft) => {
  draft.approvers.delete(approver);
  draft.threshold = Math.max(policy.threshold, policy.approvers.size);
  });
 
- showInfo('Approver removed', {
- action: {
- label: 'Undo',
- onPress: () =>
- update((draft) => {
- draft.approvers.add(approver);
- draft.threshold = originalThreshold;
- }),
- },
- });
+ const undo = await showInfo('Approver removed', { action: 'Undo' });
+ if (undo) {
+ update((draft) => {
+ draft.approvers.add(approver);
+ draft.threshold = originalThreshold;
+ });
+ }
  };
 
  return (

app/src/components/policy/PolicySideSheet.tsx

@@ -3,7 +3,7 @@ import { FormTextField } from '#/fields/FormTextField';
 import { Actions } from '#/layout/Actions';
 import { FormSubmitButton } from '#/fields/FormSubmitButton';
 import { usePolicyDraft } from '~/lib/policy/policyAsDraft';
-import { showError } from '#/provider/SnackbarProvider';
+import { showError } from '#/Snackbar';
 import { SideSheet } from '../SideSheet/SideSheet';
 import { Button } from '../Button';
 import { createStyles, useStyles } from '@theme/styles';
@@ -122,7 +122,7 @@ export function PolicySideSheet(props: PolicySideSheetProps) {
  if (policy && draft.key !== undefined) {
  const r = (await rename({ account: draft.account, key: draft.key, name }))
  ?.updatePolicyDetails;
- if (r?.__typename !== 'Policy') return showError(r?.message);
+ if (r?.__typename !== 'Policy') return showError(r?.message || 'Unknown error');
  }
 
  updateDraft((draft) => {