Skip to content
This repository has been archived by the owner on Sep 12, 2024. It is now read-only.

Commit

Permalink
Merge pull request #392 from maryia-matskevich-deriv/maryia/feature-w…
Browse files Browse the repository at this point in the history 
…allet-switcher

[BOT]Maryia/feature-wallet-switcher: fix bugs
  • Loading branch information
@farabi-deriv
farabi-deriv authored Feb 20, 2024
2 parents 8e27f5f + 1359148 commit fcd447f
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 61 deletions.
53 changes: 46 additions & 7 deletions src/assets/css/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,62 +15,75 @@ body {
max-width: 100%;
overflow-x: hidden;
}

.top-image {
display: none;
}

#main {
width: 100%;
// max-width: 960px;
margin: 0 auto;
}

.left,
.right {
width: 45%;
margin: 20px;
display: inline-block;
vertical-align: top;
}

.right img {
width: 200%;
}

.cta {
margin: 30px auto;
text-align: center;
}

.contact {
text-align: center;
}

ul.bullet {
margin: 0 !important;
}

.barspinner {
position: fixed;
left: 50%;
top: 50%;
z-index: 9999;
transform: translate(-50%, 50%);
}

.center {
text-align: center;
}

.half-width {
width: 50%;
float: left;
}

.clear {
clear: both;
}

.button span {
text-transform: inherit !important;
}

.show-on-load {
display: none;
}

#split-container {
display: flex;
flex-direction: row;
width: 100%;

.puzzle-logo {
padding-left: 20px;
}
Expand All @@ -84,37 +97,46 @@ ul.bullet {
.half-width {
width: 49%;
}

.logo-parent {
margin-left: 21px;
}

.half-width p {
padding: 0 20px 0 20px;
}
}

@media only screen and (max-width: 480px) {
#split-container {
display: block;
width: auto;
}

.top-image {
display: block;
}

.half-width {
width: 100%;
}

.half-width p,
.half-width img {
margin: 1em;
}

.bottom-image {
display: none;
}

.left,
.right {
width: 100%;
margin: 20px;
display: block;
}

.clear {
position: sticky;
padding: 1px 0 1px 0;
Expand Down Expand Up @@ -295,6 +317,7 @@ ul.bullet {
font-size: 12px;
margin: 12px;
height: 25px;

& > span {
background: var(--general-active);
color: var(--text-prominent);
Expand Down Expand Up @@ -359,6 +382,7 @@ ul.bullet {
margin: 0;
}
}

&__popover {
position: absolute;
z-index: 1;
Expand Down Expand Up @@ -992,6 +1016,23 @@ ul.bullet {

@include mobile {
width: 90%;
flex-direction: column;
}

&-wallet {
@include mobile {
display: flex;
justify-content: space-between;
height: 100%;
width: 100%;
position: fixed !important;
top: 0;
border-radius: 0;
}

.account__switcher-container {
height: 75%;
}
}

&-wrapper {
Expand All @@ -1008,6 +1049,10 @@ ul.bullet {
padding: 10vh 0;
}

&-wallet {
padding: 0;
}

&.show {
display: block;
display: flex;
Expand Down Expand Up @@ -1171,12 +1216,6 @@ ul.bullet {
}
}

&-dropdown {
@include mobile {
flex-direction: column;
}
}

&-container {
width: 100%;
padding: 0;
Expand Down
53 changes: 42 additions & 11 deletions src/components/Header/WalletAccountSwitcher/account-wallet-dropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import config from '@config';
import { translate } from '@i18n';
import { isMobile } from '@utils';
import WalletContent from './wallet-content.jsx';
import Text from '../../common/text/text.jsx';
import './account-wallet-dropdown.scss';
Expand All @@ -11,6 +12,8 @@ const AccountWalletDropdown = React.forwardRef(({ setIsAccDropdownOpen }, dropdo
const { accounts, account_list } = useSelector(state => state.client);
const container_ref = React.useRef();
let all_accounts = [];
const { deposit } = config;
const { label, url } = deposit;

const transformAccounts = () =>
Object.keys(accounts).forEach(account => {
Expand Down Expand Up @@ -46,27 +49,55 @@ const AccountWalletDropdown = React.forwardRef(({ setIsAccDropdownOpen }, dropdo
}, []);

return (
<div className='account__switcher-dropdown-wrapper show' ref={dropdownRef}>
<div id='account__switcher-dropdown' className='account__switcher-dropdown' ref={container_ref}>
<div
className='account__switcher-dropdown-wrapper account__switcher-dropdown-wrapper-wallet show'
ref={dropdownRef}
>
<div
id='account__switcher-dropdown'
className='account__switcher-dropdown account__switcher-dropdown-wallet'
ref={container_ref}
>
<div className='account__switcher-container'>
<div className='account-switcher-wallet__header'>
<Text as='h4' weight='bold' size='s'>
{translate('Deriv Apps accounts')}
</Text>
<div
className='close-icon'
onClick={() => setIsAccDropdownOpen(false)}
onFocus={() => setIsAccDropdownOpen(false)}
role='button'
>
<img
className='btn__close mobile-show'
src='/public/images/ic-close.svg'
alt='wallet_icon'
/>
</div>
</div>
{/* should show real and demo accounts */}
<WalletContent setIsAccDropdownOpen={setIsAccDropdownOpen} accounts={all_accounts} />
</div>
<div className='account__switcher-total-wallet'>
<span>{translate('Looking for CFDs? Go to Trader\'s hub')}</span>
<div>
{isMobile() && (
<div className='account__switcher-manage-funds'>
<a href={url}>
<button className='account__switcher-wallet-btn'>{translate(label)}</button>
</a>
</div>
)}
<div className='account__switcher-total-wallet'>
<span>{translate('Looking for CFDs? Go to Trader\'s hub')}</span>

<a href={config.tradershub.url} className={'account__switcher-total--link'}>
<img
className={'header__expand'}
src='/public/images/ic-chevron-down-bold.svg'
alt='wallet_icon'
/>
</a>
<a href={config.tradershub.url} className={'account__switcher-total--link'}>
<img
className={'header__expand'}
src='/public/images/ic-chevron-down-bold.svg'
alt='wallet_icon'
/>
</a>
</div>
</div>
</div>
</div>
Expand Down
44 changes: 41 additions & 3 deletions src/components/Header/WalletAccountSwitcher/account-wallet-dropdown.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
@import '../../../assets/css/variables';
@import '../../../assets/css/mixins';

.account {
$color-black-1: #333333;

&__wallet-switcher-list {
padding: 0.28rem 0.57rem !important;
border-bottom: 1px solid #e6e9e9 !important;
@include desktop {
padding: 0.28rem 0.57rem !important;
border-bottom: 1px solid #e6e9e9 !important;
}
}

&__switcher-wallet-acc {
Expand Down Expand Up @@ -45,7 +50,14 @@
}

&__wallet-switcher-tabs-content {
max-height: 450px;
@include mobile {
height: 100%;
}

@include desktop {
max-height: 450px;
}

max-width: none;
overflow-y: auto;
overflow-x: hidden;
Expand All @@ -65,6 +77,29 @@
}
}

&__switcher {
&-manage-funds {
border-bottom: 1px solid #e6e9e9 !important;
padding: 1rem 0.8rem;
}

&-wallet-btn {
background: var(--button-primary-default);
color: var(--text-colored-background);
font-size: var(--font-size-s);
width: 100%;
height: 2.5rem;
text-transform: none;
font-weight: bold;
border-width: 2px;
min-width: 4rem;
}

&-wallet-btn:hover {
background-color: var(--button-primary-default);
}
}

&__switcher-total-wallet {
display: flex;
justify-content: space-between;
Expand All @@ -81,6 +116,9 @@

&-switcher-wallet {
&__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.71rem;
border-bottom: 1px solid var(--general-hover);

Expand Down
Loading

0 comments on commit fcd447f

Please sign in to comment.