Wallet Switcher v2

src/components/DropdownMenu.tsx

@@ -11,6 +11,12 @@ export const DropdownMenuRoot = DropdownMenuPrimitive.Root;
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 export const DropdownMenuContent = DropdownMenuPrimitive.Content;
 export const DropdownMenuItem = DropdownMenuPrimitive.create(
+  styled(DropdownMenuPrimitive.Item)({
+    height: 34,
+  }),
+  'Item'
+);
+export const DropdownMenuCheckboxItem = DropdownMenuPrimitive.create(
   styled(DropdownMenuPrimitive.CheckboxItem)({
     height: 34,
   }),
@@ -35,6 +41,7 @@ export type MenuItemIcon = Omit<IconConfig, 'iconValue' | 'iconType'> & (MenuIte
 export type MenuItem<T> = Omit<MenuActionConfig, 'icon'> & {
   actionKey: T;
   actionTitle: string;
+  destructive?: boolean;
   icon?: MenuItemIcon | { iconType: string; iconValue: string };
 };
 
@@ -43,10 +50,13 @@ export type MenuConfig<T extends string> = Omit<_MenuConfig, 'menuItems' | 'menu
   menuItems: Array<MenuItem<T>>;
 };
 
-type DropDownMenuProps<T extends string> = {
+type DropDownMenuProps<T extends string, U extends Record<string, unknown> = never> = {
   children: React.ReactElement;
   menuConfig: MenuConfig<T>;
   onPressMenuItem: (actionKey: T) => void;
+  triggerAction?: 'press' | 'longPress';
+  data?: U;
+  menuItemType?: 'checkbox';
 } & DropdownMenuContentProps;
 
 const buildIconConfig = (icon?: MenuItemIcon) => {
@@ -65,27 +75,36 @@ const buildIconConfig = (icon?: MenuItemIcon) => {
   return null;
 };
 
-export function DropdownMenu<T extends string>({
+export function DropdownMenu<T extends string, U extends Record<string, unknown> = never>({
   children,
   menuConfig,
   onPressMenuItem,
+  data,
   loop = true,
   align = 'end',
   sideOffset = 8,
   side = 'right',
   alignOffset = 5,
   avoidCollisions = true,
-}: DropDownMenuProps<T>) {
+  triggerAction = 'press',
+  menuItemType,
+}: DropDownMenuProps<T, U>) {
   const handleSelectItem = useCallback(
     (actionKey: T) => {
-      onPressMenuItem(actionKey);
+      if (data !== undefined) {
+        (onPressMenuItem as (actionKey: T, data: U) => void)(actionKey, data);
+      } else {
+        (onPressMenuItem as (actionKey: T) => void)(actionKey);
+      }
     },
-    [onPressMenuItem]
+    [onPressMenuItem, data]
   );
 
+  const MenuItemComponent = menuItemType === 'checkbox' ? DropdownMenuCheckboxItem : DropdownMenuItem;
+
   return (
     <DropdownMenuRoot>
-      <DropdownMenuTrigger>{children}</DropdownMenuTrigger>
+      <DropdownMenuTrigger action={triggerAction}>{children}</DropdownMenuTrigger>
       <DropdownMenuContent
         loop={loop}
         side={side}
@@ -97,19 +116,24 @@ export function DropdownMenu<T extends string>({
       >
         {!!menuConfig.menuTitle?.trim() && (
           <DropdownMenuPrimitive.Group>
-            <DropdownMenuItem disabled>
+            <MenuItemComponent disabled>
               <DropdownMenuItemTitle>{menuConfig.menuTitle}</DropdownMenuItemTitle>
-            </DropdownMenuItem>
+            </MenuItemComponent>
           </DropdownMenuPrimitive.Group>
         )}
         {menuConfig.menuItems?.map(item => {
           const Icon = buildIconConfig(item.icon as MenuItemIcon);
 
           return (
-            <DropdownMenuItem value={item.menuState ?? 'off'} key={item.actionKey} onSelect={() => handleSelectItem(item.actionKey)}>
+            <MenuItemComponent
+              value={item.menuState ?? 'off'}
+              destructive={item.destructive}
+              key={item.actionKey}
+              onSelect={() => handleSelectItem(item.actionKey)}
+            >
               <DropdownMenuItemTitle>{item.actionTitle}</DropdownMenuItemTitle>
               {Icon}
-            </DropdownMenuItem>
+            </MenuItemComponent>
           );
         })}
       </DropdownMenuContent>

src/components/SmoothPager/ListPanel.tsx

@@ -38,7 +38,7 @@ export const TapToDismiss = memo(function TapToDismiss() {
 });
 
 const PANEL_INSET = 8;
-const PANEL_WIDTH = DEVICE_WIDTH - PANEL_INSET * 2;
+export const PANEL_WIDTH = DEVICE_WIDTH - PANEL_INSET * 2;
 const PANEL_BORDER_RADIUS = 42;
 const LIST_SCROLL_INDICATOR_BOTTOM_INSET = { bottom: PANEL_BORDER_RADIUS };
 

src/components/animations/JiggleAnimation.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withRepeat,
+  cancelAnimation,
+  useAnimatedReaction,
+  SharedValue,
+  withSequence,
+} from 'react-native-reanimated';
+
+type JiggleAnimationProps = {
+  amplitude?: number;
+  duration?: number;
+  children: React.ReactNode;
+  enabled: boolean | SharedValue<boolean>;
+};
+
+export function JiggleAnimation({ children, amplitude = 2, duration = 125, enabled }: JiggleAnimationProps) {
+  const rotation = useSharedValue(0);
+  const internalEnabled = useSharedValue(typeof enabled === 'boolean' ? enabled : false);
+
+  // Randomize some initial values to avoid sync with other jiggles
+  // Randomize duration (5% variance)
+  const instanceDuration = duration * (1 + (Math.random() - 0.5) * 0.1);
+
+  // Randomize initial rotation that's at least 50% of the amplitude
+  const minInitialRotation = amplitude * 0.5;
+  const rotationRange = amplitude - minInitialRotation;
+  const initialRotation = minInitialRotation + Math.random() * rotationRange;
+
+  // Randomize initial direction
+  const initialDirection = Math.random() < 0.5 ? -1 : 1;
+  const firstRotation = initialRotation * initialDirection;
+
+  useEffect(() => {
+    if (typeof enabled === 'boolean') {
+      internalEnabled.value = enabled;
+    }
+  }, [enabled, internalEnabled]);
+
+  useAnimatedReaction(
+    () => {
+      return typeof enabled === 'boolean' ? internalEnabled.value : (enabled as SharedValue<boolean>).value;
+    },
+    enabled => {
+      if (enabled) {
+        rotation.value = withSequence(
+          withTiming(firstRotation, { duration: instanceDuration / 2 }),
+          withRepeat(withTiming(-amplitude * initialDirection, { duration: instanceDuration }), -1, true)
+        );
+      } else {
+        cancelAnimation(rotation);
+        rotation.value = withTiming(0, { duration: instanceDuration / 2 });
+      }
+    }
+  );
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ rotate: `${rotation.value}deg` }],
+    };
+  });
+
+  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+}

src/components/animations/animationConfigs.ts

@@ -25,6 +25,7 @@ const springAnimations = createSpringConfigs({
   keyboardConfig: disableForTestingEnvironment({ damping: 500, mass: 3, stiffness: 1000 }),
   sliderConfig: disableForTestingEnvironment({ damping: 40, mass: 1.25, stiffness: 450 }),
   slowSpring: disableForTestingEnvironment({ damping: 500, mass: 3, stiffness: 800 }),
+  walletDraggableConfig: disableForTestingEnvironment({ damping: 36, mass: 0.8, stiffness: 800 }),
   snappierSpringConfig: disableForTestingEnvironment({ damping: 42, mass: 0.8, stiffness: 800 }),
   snappySpringConfig: disableForTestingEnvironment({ damping: 100, mass: 0.8, stiffness: 275 }),
   springConfig: disableForTestingEnvironment({ damping: 100, mass: 1.2, stiffness: 750 }),

src/components/cards/MintsCard/Menu.tsx

@@ -39,7 +39,7 @@ export function Menu() {
   );
 
   return (
-    <DropdownMenu<MintsFilter> menuConfig={menuConfig} onPressMenuItem={onPressMenuItem}>
+    <DropdownMenu<MintsFilter> menuItemType="checkbox" menuConfig={menuConfig} onPressMenuItem={onPressMenuItem}>
       <ButtonPressAnimation>
         <Inset top="2px">
           <Inline alignVertical="center" space={{ custom: 5 }}>