update animations, mobile widths

coinbase · Jan 17, 2025 · 0b4fb12 · 0b4fb12
1 parent d5c7088
commit 0b4fb12
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 12 deletions.
diff --git a/src/internal/components/MobileTray.test.tsx b/src/internal/components/MobileTray.test.tsx
@@ -46,9 +46,15 @@ describe('MobileTray', () => {
     expect(defaultProps.onAnimationEnd).toHaveBeenCalled();
   });
 
-  it('applies custom animation class when provided', () => {
-    render(<MobileTray {...defaultProps} animation="custom-animation" />);
-    expect(screen.getByTestId('ockMobileTray')).toHaveClass('custom-animation');
+  it('applies custom animation classes when provided', () => {
+    render(
+      <MobileTray
+        {...defaultProps}
+        animation={{ tray: 'custom-tray', overlay: 'custom-overlay' }}
+      />,
+    );
+    expect(screen.getByTestId('ockMobileTray')).toHaveClass('custom-tray');
+    expect(screen.getByRole('presentation')).toHaveClass('custom-overlay');
   });
 
   it('applies default translation classes when no animation prop is provided', () => {

diff --git a/src/internal/components/MobileTray.tsx b/src/internal/components/MobileTray.tsx
@@ -7,7 +7,10 @@ type MobileTrayProps = {
   onAnimationEnd?: () => void;
   onOverlayClick: () => void;
   onEscKeyPress: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-  animation?: string;
+  animation?: {
+    tray: string;
+    overlay: string;
+  };
   className?: string;
 };
 
@@ -27,6 +30,7 @@ export function MobileTray({
           className={cn(
             'fixed inset-0',
             'bg-black bg-opacity-20 dark:bg-white dark:bg-opacity-10',
+            animation?.overlay,
             zIndex.modal,
           )}
           onClick={onOverlayClick}
@@ -42,7 +46,7 @@ export function MobileTray({
           'fixed right-0 bottom-0 left-0',
           'transform rounded-t-3xl p-2 transition-transform',
           animation
-            ? animation
+            ? animation.tray
             : `${isOpen ? 'translate-y-0' : 'translate-y-full'}`,
           className,
         )}

diff --git a/src/wallet/components/WalletAdvancedContent.tsx b/src/wallet/components/WalletAdvancedContent.tsx
@@ -38,7 +38,7 @@ export function WalletAdvancedContent({
       <div
         className={cn(
           'flex flex-col items-center justify-center',
-          'h-120 w-88',
+          'h-120 w-full',
           showQr ? '' : 'hidden',
         )}
       >
@@ -47,7 +47,7 @@ export function WalletAdvancedContent({
       <div
         className={cn(
           'flex flex-col items-center justify-center',
-          'h-120 w-88',
+          'h-120 w-full',
           showSwap ? '' : 'hidden',
         )}
       >
@@ -74,7 +74,7 @@ export function WalletAdvancedContent({
       <div
         className={cn(
           'flex flex-col items-center justify-between',
-          'h-120 w-88',
+          'h-120 w-full',
           'px-4 py-3',
           showQr || showSwap ? 'hidden' : '',
         )}
@@ -91,7 +91,10 @@ export function WalletAdvancedContent({
         onOverlayClick={handleClose}
         onEscKeyPress={handleClose}
         onAnimationEnd={handleAnimationEnd}
-        animation={animations.mobileContainer}
+        animation={{
+          tray: animations.mobileContainer,
+          overlay: animations.mobileContainerOverlay,
+        }}
       >
         <div className="flex h-full w-full flex-col items-center justify-center">
           {content}

diff --git a/src/wallet/components/WalletAdvancedProvider.test.tsx b/src/wallet/components/WalletAdvancedProvider.test.tsx
@@ -75,6 +75,7 @@ describe('useWalletAdvancedContext', () => {
         container: expect.any(String),
         content: expect.any(String),
         mobileContainer: expect.any(String),
+        mobileContainerOverlay: expect.any(String),
       },
     });
   });
@@ -139,6 +140,7 @@ describe('useWalletAdvancedContext', () => {
           'fade-out slide-out-to-top-1.5 animate-out fill-mode-forwards ease-in-out',
         mobileContainer:
           'fade-out slide-out-to-bottom-1/2 animate-out duration-200 fill-mode-forwards ease-in-out',
+        mobileContainerOverlay: 'fade-out animate-out duration-300 ease-in-out',
         content: '',
       });
     });
@@ -159,6 +161,7 @@ describe('useWalletAdvancedContext', () => {
           'fade-out slide-out-to-bottom-1.5 animate-out fill-mode-forwards ease-in-out',
         mobileContainer:
           'fade-out slide-out-to-bottom-1/2 animate-out duration-200 fill-mode-forwards ease-in-out',
+        mobileContainerOverlay: 'fade-out animate-out duration-300 ease-in-out',
         content: '',
       });
     });
@@ -179,6 +182,7 @@ describe('useWalletAdvancedContext', () => {
           'fade-in slide-in-from-top-1.5 animate-in duration-300 ease-out',
         mobileContainer:
           'fade-in slide-in-from-bottom-1/2 animate-in duration-300 ease-out',
+        mobileContainerOverlay: 'fade-in animate-in duration-300',
         content:
           'fade-in slide-in-from-top-2.5 animate-in fill-mode-forwards duration-300 ease-out',
       });
@@ -200,6 +204,7 @@ describe('useWalletAdvancedContext', () => {
           'fade-in slide-in-from-bottom-1.5 animate-in duration-300 ease-out',
         mobileContainer:
           'fade-in slide-in-from-bottom-1/2 animate-in duration-300 ease-out',
+        mobileContainerOverlay: 'fade-in animate-in duration-300',
         content:
           'fade-in slide-in-from-bottom-2.5 animate-in fill-mode-forwards duration-300 ease-out',
       });

diff --git a/src/wallet/components/WalletAdvancedProvider.tsx b/src/wallet/components/WalletAdvancedProvider.tsx
@@ -82,6 +82,7 @@ function getAnimations(
         : 'fade-out slide-out-to-top-1.5 animate-out fill-mode-forwards ease-in-out',
       mobileContainer:
         'fade-out slide-out-to-bottom-1/2 animate-out duration-200 fill-mode-forwards ease-in-out',
+      mobileContainerOverlay: 'fade-out animate-out duration-300 ease-in-out',
       content: '',
     };
   }
@@ -92,6 +93,7 @@ function getAnimations(
       : 'fade-in slide-in-from-top-1.5 animate-in duration-300 ease-out',
     mobileContainer:
       'fade-in slide-in-from-bottom-1/2 animate-in duration-300 ease-out',
+    mobileContainerOverlay: 'fade-in animate-in duration-300',
     content: showSubComponentAbove
       ? 'fade-in slide-in-from-bottom-2.5 animate-in fill-mode-forwards duration-300 ease-out'
       : 'fade-in slide-in-from-top-2.5 animate-in fill-mode-forwards duration-300 ease-out',

diff --git a/src/wallet/components/WalletAdvancedTransactionActions.tsx b/src/wallet/components/WalletAdvancedTransactionActions.tsx
@@ -67,7 +67,7 @@ export function WalletAdvancedTransactionActions() {
   return (
     <div
       className={cn(
-        'my-3 flex w-full flex-row justify-center gap-2',
+        'my-3 flex w-full flex-row justify-between gap-2',
         animations.content,
       )}
     >
@@ -100,7 +100,7 @@ function WalletAdvancedTransactionAction({
       type="button"
       className={cn(
         'flex flex-col items-center justify-center gap-2 pt-2.5 pb-2',
-        'h-16 w-28',
+        'h-16 flex-1',
         border.radius,
         pressable.alternate,
       )}

diff --git a/src/wallet/components/WalletAdvancedWalletActions.tsx b/src/wallet/components/WalletAdvancedWalletActions.tsx
@@ -39,7 +39,7 @@ export function WalletAdvancedWalletActions() {
   return (
     <div
       className={cn(
-        'flex w-80 items-center justify-between',
+        'flex w-full items-center justify-between',
         animations.content,
       )}
     >

diff --git a/src/wallet/types.ts b/src/wallet/types.ts
@@ -204,6 +204,7 @@ export type WalletAdvancedContextType = {
   animations: {
     container: string;
     mobileContainer: string;
+    mobileContainerOverlay: string;
     content: string;
   };
 };