[Wallet] Aum / WALL-2245 / wallet-overlay-animation-onscroll (deriv-c…

…om#10950) * feat: added animation to cashier-header onScrolling cashier-content * chore: fixed import for useState hook * chore: fixed syntax using camelCase * fix: some more fixes for camelCase * chore: applied comments
maryia-matskevich-deriv · Oct 25, 2023 · 2a66d9b · 2a66d9b
1 parent f1653a3
commit 2a66d9b
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 11 deletions.
diff --git a/packages/wallets/src/features/cashier/WalletCashier.scss b/packages/wallets/src/features/cashier/WalletCashier.scss
@@ -1,10 +1,17 @@
+.wallets-cashier {
+    display: flex;
+    flex-direction: column;
+    height: calc(100svh - 4rem);
+}
+
 .wallets-cashier-content {
     padding: 2.4rem 2.4rem 0px;
     display: flex;
     gap: 2.4rem;
     justify-content: center;
     flex: 1;
     background-color: #ffffff;
+    overflow: scroll;
 
     @include mobile {
         padding: 1.6rem;

diff --git a/packages/wallets/src/features/cashier/WalletCashier.tsx b/packages/wallets/src/features/cashier/WalletCashier.tsx
@@ -1,20 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useActiveWalletAccount } from '@deriv/api';
 import { WalletCashierContent, WalletCashierHeader } from './components';
 import './WalletCashier.scss';
 
 const WalletCashier = () => {
     const { isLoading } = useActiveWalletAccount();
+    const [isContentScrolled, setIsContentScrolled] = useState(false);
+
+    const onContentScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
+        const target = e.target as HTMLDivElement;
+        setIsContentScrolled(target.scrollTop > 0);
+    };
 
     if (isLoading) return <p>Loading...</p>;
 
     return (
-        <>
-            <WalletCashierHeader />
-            <div className='wallets-cashier-content'>
+        <div className='wallets-cashier'>
+            <WalletCashierHeader hideWalletDetails={isContentScrolled} />
+            <div className='wallets-cashier-content' onScroll={onContentScroll}>
                 <WalletCashierContent />
             </div>
-        </>
+        </div>
     );
 };
 

diff --git a/...ages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss b/...ages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss
@@ -6,10 +6,12 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    gap: 1.6rem;
 
     @include mobile {
-        padding-top: 1.6rem;
-        height: 12.2rem;
+        padding-top: 0rem;
+        transition: height 0.2s ease-in;
+        height: fit-content;
     }
 
     &__close-button {
@@ -24,7 +26,7 @@
         padding-inline: 2.4rem;
 
         @include mobile {
-            padding-inline: 1.6rem;
+            padding: 1.6rem 1.6rem 0rem;
         }
 
         &__top-left {
@@ -38,6 +40,9 @@
                 align-items: center;
 
                 @include mobile {
+                    visibility: visible;
+                    transition: visibility 0s, height 0.2s ease;
+                    height: 2rem;
                     gap: 0.8rem;
                 }
 
@@ -68,6 +73,12 @@
             @include mobile {
                 gap: 0.8rem;
             }
+
+            &__icon {
+                @include mobile {
+                    transition: visibility 0s, height 0.2s ease;
+                }
+            }
         }
     }
 
@@ -114,3 +125,8 @@
         }
     }
 }
+
+.wallets-hide-details {
+    height: 0;
+    visibility: hidden;
+}
diff --git a/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx b/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+import classNames from 'classnames';
 import { useActiveWalletAccount } from '@deriv/api';
 import { WalletCardIcon } from '../../../../components/WalletCardIcon';
 import { WalletGradientBackground } from '../../../../components/WalletGradientBackground';
@@ -11,7 +12,7 @@ import './WalletCashierHeader.scss';
 const realAccountTabs = ['deposit', 'withdraw', 'transfer', 'transactions'];
 const virtualAccountTabs = ['withdraw', 'transfer', 'transactions', 'reset-balance'];
 
-const WalletCashierHeader = () => {
+const WalletCashierHeader = ({ hideWalletDetails }: { hideWalletDetails: boolean }) => {
     const { data } = useActiveWalletAccount();
     const { isMobile } = useDevice();
     const history = useHistory();
@@ -32,7 +33,11 @@ const WalletCashierHeader = () => {
             <main className='wallets-cashier-header'>
                 <section className='wallets-cashier-header__info'>
                     <div className='wallets-cashier-header__info__top-left'>
-                        <div className='wallets-cashier-header__info__top-left__details'>
+                        <div
+                            className={classNames('wallets-cashier-header__info__top-left__details', {
+                                'wallets-hide-details': isMobile && hideWalletDetails,
+                            })}
+                        >
                             <h1 className='wallets-cashier-header__info__top-left__details__title'>
                                 {data?.currency} Wallet
                             </h1>
@@ -43,7 +48,15 @@ const WalletCashierHeader = () => {
                         <p className='wallets-cashier-header__info__top-left__balance'>{data?.display_balance}</p>
                     </div>
                     <div className='wallets-cashier-header__info__top-right'>
-                        {data?.wallet_currency_type && <WalletCardIcon size='xl' type={data?.wallet_currency_type} />}
+                        {data?.wallet_currency_type && (
+                            <div
+                                className={classNames('wallets-cashier-header__info__top-right__icon', {
+                                    'wallets-hide-details': isMobile && hideWalletDetails,
+                                })}
+                            >
+                                <WalletCardIcon size='xl' type={data?.wallet_currency_type} />
+                            </div>
+                        )}
                         <button
                             className='wallets-cashier-header__close-button'
                             onClick={() => history.push('/wallets')}