[Wallet] bug-fixes: Aum/ WALL-2368 / fix-wallet-crypto-deposit-issues

packages/wallets/src/components/Base/Tooltip/Tooltip.scss

@@ -0,0 +1,70 @@
+.wallets-tooltip {
+    width: fit-content;
+    height: fit-content;
+    position: relative;
+
+    &__content {
+        display: flex;
+        align-items: center;
+        position: absolute;
+
+        &--right {
+            top: 50%;
+            left: 100%;
+            transform: translateY(-50%);
+        }
+
+        &--top {
+            flex-direction: column-reverse;
+            top: -100%;
+        }
+
+        &--bottom {
+            flex-direction: column;
+            bottom: -100%;
+        }
+
+        &--left {
+            flex-direction: row-reverse;
+            top: 50%;
+            transform: translate(-100%, -50%);
+        }
+    }
+
+    &__arrow {
+        background: var(--system-light-5-active-background, #d6dadb);
+
+        &--right {
+            width: 0.4rem;
+            height: 0.8rem;
+            clip-path: polygon(0 50%, 100% 100%, 100% 0);
+        }
+
+        &--top {
+            width: 0.8rem;
+            height: 0.4rem;
+            clip-path: polygon(0 0, 50% 100%, 100% 0);
+        }
+
+        &--bottom {
+            width: 0.8rem;
+            height: 0.4rem;
+            clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+        }
+
+        &--left {
+            width: 0.4rem;
+            height: 0.8rem;
+            clip-path: polygon(100% 50%, 0 0, 0 100%);
+        }
+    }
+
+    &__message {
+        max-height: 3.4rem;
+        padding: 0.8rem;
+        border-radius: 4px;
+        font-size: 1.2rem;
+
+        background: var(--system-light-5-active-background, #d6dadb);
+    }
+}

packages/wallets/src/components/Base/Tooltip/Tooltip.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import './Tooltip.scss';
+
+type TProps = {
+    alignment?: 'bottom' | 'left' | 'right' | 'top';
+    isVisible: boolean;
+    message: string;
+};
+
+const Tooltip: React.FC<React.PropsWithChildren<TProps>> = ({ alignment = 'left', children, isVisible, message }) => {
+    return (
+        <div className={`wallets-tooltip`}>
+            {children}
+            {isVisible && (
+                <div className={`wallets-tooltip__content wallets-tooltip__content--${alignment}`}>
+                    <div className={`wallets-tooltip__arrow wallets-tooltip__arrow--${alignment}`} />
+                    <div className='wallets-tooltip__message'>{message}</div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Tooltip;

packages/wallets/src/components/Base/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip';

packages/wallets/src/components/Base/WalletClipboard/WalletClipboard.scss

@@ -1,11 +1,8 @@
 .wallets-clipboard {
     all: unset;
     border-radius: 0rem 0.4rem 0.4rem 0rem;
-    border: 0.1rem solid #e6e6e6;
     border-left: none;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 3rem;
-    height: 3rem;
 }

packages/wallets/src/components/Base/WalletClipboard/WalletClipboard.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { useCopyToClipboard } from 'usehooks-ts';
-import CheckmarkCircle from '../../../public/images/checkmark-circle.svg';
+import React, { useEffect, useRef, useState } from 'react';
+import { useCopyToClipboard, useHover } from 'usehooks-ts';
+import useDevice from '../../../hooks/useDevice';
+import CheckmarkCircle from '../../../public/images/ic-checkmark-circle.svg';
 import Clipboard from '../../../public/images/clipboard.svg';
+import { Tooltip } from '../Tooltip';
 import './WalletClipboard.scss';
 
 type TProps = {
@@ -16,7 +18,10 @@ const WalletClipboard = ({
     textCopy,
 }: TProps) => {
     const [, copy] = useCopyToClipboard();
+    const { isMobile } = useDevice();
     const [isCopied, setIsCopied] = useState(false);
+    const hoverRef = useRef(null);
+    const isHovered = useHover(hoverRef);
     let timeoutClipboard: ReturnType<typeof setTimeout>;
 
     const onClick = (event: { stopPropagation: () => void }) => {
@@ -33,9 +38,11 @@ const WalletClipboard = ({
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
-        <button className='wallets-clipboard' onClick={onClick}>
-            {isCopied ? <CheckmarkCircle /> : <Clipboard />}
-        </button>
+        <Tooltip alignment='right' isVisible={isHovered && !isMobile} message={isCopied ? 'Copied!' : 'Copy'}>
+            <button className='wallets-clipboard' onClick={onClick} ref={hoverRef}>
+                {isCopied ? <CheckmarkCircle /> : <Clipboard />}
+            </button>
+        </Tooltip>
     );
 };
 

packages/wallets/src/components/Base/index.ts

@@ -4,6 +4,7 @@ export * from './ModalStepWrapper';
 export * from './ModalWrapper';
 export * from './ProgressBar';
 export * from './Tabs';
+export * from './Tooltip';
 export * from './WalletAlertMessage';
 export * from './WalletButton';
 export * from './WalletButtonGroup';

packages/wallets/src/components/SkeletonLoader/WalletsDepositCryptoAddressLoader/WalletsDepositCryptoAddressLoader.scss

@@ -0,0 +1,17 @@
+.wallets-deposit-crypto-address-loader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2.4rem;
+
+    &__qr-code {
+        width: 12.8rem;
+        height: 12.8rem;
+    }
+
+    &__text {
+        width: 34.5rem;
+        height: 3.6rem;
+        border-radius: 4px;
+    }
+}

packages/wallets/src/components/SkeletonLoader/WalletsDepositCryptoAddressLoader/WalletsDepositCryptoAddressLoader.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './WalletsDepositCryptoAddressLoader.scss';
+
+const WalletsDepositCryptoAddressLoader = () => {
+    return (
+        <div className='wallets-deposit-crypto-address-loader'>
+            <div className='wallets-deposit-crypto-address-loader__qr-code wallets-skeleton' />
+            <div className='wallets-deposit-crypto-address-loader__text wallets-skeleton' />
+        </div>
+    );
+};
+
+export default WalletsDepositCryptoAddressLoader;

packages/wallets/src/components/SkeletonLoader/WalletsTransactionStatusLoader/WalletsTransactionStatusLoader.scss

@@ -0,0 +1,4 @@
+.wallets-transaction-status-loader {
+    width: 23.4rem;
+    height: 1.8rem;
+}

packages/wallets/src/components/SkeletonLoader/WalletsTransactionStatusLoader/WalletsTransactionStatusLoader.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './WalletsTransactionStatusLoader.scss';
+
+const WalletsTransactionStatusLoader = () => {
+    return <div className='wallets-transaction-status-loader wallets-skeleton' />;
+};
+
+export default WalletsTransactionStatusLoader;

packages/wallets/src/components/SkeletonLoader/index.ts

@@ -2,3 +2,5 @@ export { default as TradingAppCardLoader } from './TradingAppCardLoader/TradingA
 export { default as WalletsAccordionLoader } from './WalletsAccordionLoader/WalletsAccordionLoader';
 export { default as WalletsAddMoreLoader } from './WalletsAddMoreLoader/WalletsAddMoreLoader';
 export { default as WalletsCarouselLoader } from './WalletsCarouselLoader/WalletsCarouselLoader';
+export { default as WalletsDepositCryptoAddressLoader } from './WalletsDepositCryptoAddressLoader/WalletsDepositCryptoAddressLoader';
+export { default as WalletsTransactionStatusLoader } from './WalletsTransactionStatusLoader/WalletsTransactionStatusLoader';

packages/wallets/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './DesktopWalletsList';
 export * from './FadedAnimatedList';
 export * from './Loader';
 export * from './OptionsAndMultipliersListing';
+export * from './SkeletonLoader';
 export * from './TradingAccountCard';
 export * from './WalletCard';
 export * from './WalletCardIcon';

packages/wallets/src/features/cashier/WalletCashier.scss

@@ -18,6 +18,6 @@
     overflow: scroll;
 
     @include mobile {
-        padding: 1.6rem;
+        padding: 2.4rem 1.6rem 0;
     }
 }

packages/wallets/src/features/cashier/WalletCashier.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useActiveWalletAccount } from '@deriv/api';
 import { WalletCashierContent, WalletCashierHeader } from './components';
 import './WalletCashier.scss';
+import { Loader } from '../../components';
 
 const WalletCashier = () => {
     const { isLoading } = useActiveWalletAccount();
@@ -12,7 +13,7 @@ const WalletCashier = () => {
         setIsContentScrolled(target.scrollTop > 0);
     };
 
-    if (isLoading) return <p>Loading...</p>;
+    if (isLoading) return <Loader />;
 
     return (
         <div className='wallets-cashier'>

packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.scss

@@ -4,13 +4,20 @@
     display: flex;
     justify-content: center;
 
+    @include mobile {
+        flex-direction: column;
+    }
+
     &__main-content {
         display: flex;
         flex-direction: column;
         padding-top: 2.4rem;
-        justify-content: center;
         gap: 2.4rem;
         position: relative;
+
+        @include mobile {
+            padding: 0;
+        }
     }
 
     @include mobile {

packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.scss

@@ -5,28 +5,47 @@
     gap: 2.4rem;
     min-height: 6rem;
 
+    &__loader {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
     &__hash {
-        color: #000;
-        text-align: center;
-        font-size: 1.4rem;
-        font-weight: 700;
-        padding: 0.8rem 1rem;
-        border-radius: 0.4rem 0rem 0rem 0.4rem;
-        border: 0.1rem solid #e6e9e9;
+        width: fit-content;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border: 0.1rem solid #e6e6e6;
+        border-radius: 0.4rem;
 
         @include mobile {
-            font-size: 1.2rem;
+            width: 100%;
+            max-width: 32.8rem;
+        }
+
+        &-text {
+            overflow-x: hidden;
+            padding: 0.8rem;
             text-overflow: ellipsis;
         }
 
-        &-container {
+        &-clipboard {
             display: flex;
             align-items: center;
+            height: 100%;
+            gap: 0.8rem;
+
+            & .wallets-clipboard {
+                padding: 0.8rem 0.8rem 0.8rem 0;
+            }
         }
-    }
 
-    &__loader {
-        position: relative;
-        height: 6rem;
+        &-divider {
+            width: 1px;
+            height: 100%;
+            background: #e6e6e6;
+        }
     }
 }

packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import QRCode from 'qrcode.react';
 import { useAuthorize, useDepositCryptoAddress } from '@deriv/api';
-import { WalletClipboard } from '../../../../../../components/Base';
-import { Loader } from '../../../../../../components/Loader';
+import { WalletClipboard, WalletText } from '../../../../../../components/Base';
+import { WalletsDepositCryptoAddressLoader } from '../../../../../../components';
 import useDevice from '../../../../../../hooks/useDevice';
 import './DepositCryptoAddress.scss';
 
@@ -20,21 +20,28 @@ const DepositCryptoAddress = () => {
     if (isLoading)
         return (
             <div className='wallets-deposit-crypto-address__loader'>
-                <Loader />
+                <WalletsDepositCryptoAddressLoader />
             </div>
         );
 
     return (
         <div className='wallets-deposit-crypto-address'>
             <QRCode size={128} value={depositCryptoAddress || ''} />
-            <div className='wallets-deposit-crypto-address__hash-container'>
-                <p className='wallets-deposit-crypto-address__hash'>{depositCryptoAddress}</p>
-                <WalletClipboard
-                    infoMessage={isMobile ? undefined : 'copy'}
-                    popoverAlignment={isMobile ? 'left' : 'bottom'}
-                    successMessage='copied'
-                    textCopy={depositCryptoAddress || ''}
-                />
+            <div className='wallets-deposit-crypto-address__hash'>
+                <div className='wallets-deposit-crypto-address__hash-text'>
+                    <WalletText size='sm' weight='bold'>
+                        {depositCryptoAddress}
+                    </WalletText>
+                </div>
+                <div className='wallets-deposit-crypto-address__hash-clipboard'>
+                    <div className='wallets-deposit-crypto-address__hash-divider' />
+                    <WalletClipboard
+                        infoMessage={isMobile ? undefined : 'copy'}
+                        popoverAlignment={isMobile ? 'left' : 'bottom'}
+                        successMessage='copied'
+                        textCopy={depositCryptoAddress || ''}
+                    />
+                </div>
             </div>
         </div>
     );

packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoCurrencyDetails/DepositCryptoCurrencyDetails.tsx

@@ -7,7 +7,7 @@ const DepositCryptoCurrencyDetails = () => {
 
     return (
         <WalletText align='center' size='md' weight='bold'>
-            Send only {data?.currency_config?.name} ({data?.currency_config?.display_code}) to this address.
+            Send only {data?.currency_config?.name} ({data?.currency_config?.display_code}) to this address
         </WalletText>
     );
 };

packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoDisclaimers/DepositCryptoDisclaimers.tsx

@@ -32,7 +32,7 @@ const DepositCryptoDisclaimers = () => {
                             Otherwise, the funds will be lost and cannot be recovered.
                         </li>
                     )}
-                    <li>Do not send other currencies to this address.</li>
+                    <li>Do not send other cryptocurrencies to this address.</li>
                     <li>Make sure to copy your Deriv account address correctly into your crypto wallet.</li>
                     <li>
                         In your cryptocurrency wallet, make sure to select{' '}