Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Aum/wall 5/the upgrade modal which wallets will be created and linked #8751

Merged
merged 34 commits into from
May 30, 2023
Merged

Aum/wall 5/the upgrade modal which wallets will be created and linked #8751

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
2f95b43
feat: created wallets linking step for wallet upgrade
aum-deriv May 16, 2023
607152d
feat: create responsive wallet-link component
aum-deriv May 17, 2023
ba43877
feat: renamed wallet-link to wallet-link-wrapper and completed static UI
aum-deriv May 18, 2023
994df3a
feat: created wrapper for the 2nd step in wallet-upgrade
aum-deriv May 18, 2023
5c06324
feat: added dependency for hooks to appstore and added useBalance and…
aum-deriv May 19, 2023
c641915
chore: minor UI fixes
aum-deriv May 19, 2023
2bd35e7
fix: fixed scrolling of accounts in mobile view
aum-deriv May 22, 2023
2004188
feat: appended the 2nd step to 1st step
aum-deriv May 23, 2023
2e19213
feat: rendering all data for each step during linking
aum-deriv May 23, 2023
260475e
chore: added some mock data
aum-deriv May 23, 2023
c61bcc6
refactor: replaced placeholder card with wallet-card component
aum-deriv May 23, 2023
f23e5a9
fix: removed z-index and fixed shine (trapezoid) element
aum-deriv May 24, 2023
605594f
chore: add types for wallet-card
aum-deriv May 24, 2023
2615a16
feat: added types to all the tsx files
aum-deriv May 24, 2023
71b382a
fix: fixed some type errors
aum-deriv May 24, 2023
a0bf6e8
fix: fixed the active border issue in wallet-card
aum-deriv May 24, 2023
ff049ec
chore: changed the state of wallet-card in wallet-linking to default
aum-deriv May 24, 2023
f2b2f7f
fix: fixed wallet title in mobile mode
aum-deriv May 24, 2023
f3c8248
fix: changed color for text and fixed clipping of linking step content
aum-deriv May 24, 2023
f7bc623
Merge branch 'feature/wallets_with_traders_hub' of https://github.com…
aum-deriv May 25, 2023
da00069
fix: fixed scrolling when only one wallet with few accounts is shown
aum-deriv May 25, 2023
a488980
Merge branch 'feature/wallets_with_traders_hub' of github.com:binary-…
aum-deriv May 25, 2023
efa882e
chore: made changes from review suggestions
aum-deriv May 25, 2023
ea94f75
chore: removing unused classnames
aum-deriv May 25, 2023
b23cf96
chore: changed order of imports for wallet-link-wrapper
aum-deriv May 25, 2023
fd9b173
chore: changed height for wallet-linking-step
aum-deriv May 25, 2023
cc0c2e8
chore: resolved comments
aum-deriv May 26, 2023
9177e9d
Merge branch 'feature/wallets_with_traders_hub' of github.com:binary-…
aum-deriv May 29, 2023
89643da
chore: add USDC crypto mock data
aum-deriv May 29, 2023
aff49c9
chore: added rebranded icons to components package
aum-deriv May 29, 2023
c5cb5f5
fix: fixed the link line units using px
aum-deriv May 29, 2023
4d14c40
chore: added margin top and bottom to link-wrapper
aum-deriv May 29, 2023
bba7ec5
fix: changed linking step height
aum-deriv May 29, 2023
e3dee3b
fix: fixed the bracket for safari browser
aum-deriv May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/appstore/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"@deriv/cfd": "^1.0.0",
"@deriv/hooks": "^1.0.0",
"@deriv/shared": "^1.0.0",
"@deriv/hooks": "^1.0.0",
"@deriv/stores": "^1.0.0",
"@deriv/trader": "^3.8.0",
"@deriv/translations": "^1.0.0",
Expand Down
33 changes: 33 additions & 0 deletions .../src/components/modals/real-wallets-upgrade/components/wallet-account/wallet-account.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.wallet-account {
width: 28.8rem;
height: 4.8rem;
display: flex;
align-items: center;
justify-content: flex-start;
border: 0.1rem solid $color-grey-2;
aum-deriv marked this conversation as resolved.
Show resolved Hide resolved
border-radius: 0.8rem;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use variable for border radius


@include mobile {
width: 24.4rem;
}

&__details {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-left: 1.6rem;

&-name {
font-size: 1.2rem;
}

&-balance {
font-size: 1rem;
}
}

&__icon {
margin-left: 1.6rem;
}
}
28 changes: 28 additions & 0 deletions ...e/src/components/modals/real-wallets-upgrade/components/wallet-account/wallet-account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import { Icon, Text } from '@deriv/components';
import './wallet-account.scss';

type TWalletAccount = {
balance?: string;
currency?: string;
name?: string;
icon?: string;
};

const WalletAccount = ({ balance, name, currency, icon }: TWalletAccount) => {
return (
<div className='wallet-account'>
<Icon className='wallet-account__icon' icon={icon} size={24} />
<div className='wallet-account__details'>
<Text as='div' className='wallet-account__details-name' color='prominent'>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Text as='div' className='wallet-account__details-name' color='prominent'>
<Text as='div' className='wallet-account__details-name' color='prominent' size={isMobile() ? xs : s}>

{name}
</Text>
<Text as='div' className='wallet-account__details-balance' color='prominent' weight='bold'>
{balance} {currency}
</Text>
</div>
</div>
);
};

export default WalletAccount;
159 changes: 159 additions & 0 deletions ...rc/components/modals/real-wallets-upgrade/components/wallet-link/wallet-link-wrapper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
.wallet-link-wrapper {
display: grid;
grid-template-columns: repeat(3, auto);
align-items: center;
justify-content: flex-start;
gap: 1.6rem;

&__title {
display: flex;
align-items: center;
justify-content: center;
width: 28.8rem;

&-text {
width: fit-content;
padding: 0.4rem 0.8rem;
border-radius: 2.4rem;
text-align: center;
font-size: var(--text-size-xxxs);
background-color: var(--general-section-2);

@include mobile {
background-color: var(--general-section-1);
}
}
}

@include mobile {
width: 100%;
display: flex;
flex-direction: column;
gap: 1.2rem;
}

&__accounts {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.6rem;

&-title {
display: none;
}

@include mobile {
gap: 0.8rem;

&-title {
width: 100%;
display: block;
border-radius: 0.8rem 0.8rem 0 0;
}
}
}

&__link {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
// background: green;

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

&-bracket {
width: 1.5rem;
height: calc(100% - 4.8rem);
border: 0.1rem solid var(--brand-red-coral);
border-left: none;

&--single {
height: 0;
border: none;
border-top: 0.01rem solid var(--brand-red-coral);
}

@include mobile {
width: 24.4rem;
height: 0.8rem;
border: 0.1rem solid var(--brand-red-coral);
border-top: none;
}
}

&-icon {
display: flex;
flex-direction: row;
align-items: center;
gap: 1.4rem;

@include mobile {
flex-direction: column;
gap: 0.6rem;
}

&:before,
&:after {
content: '';
display: inline-block;
background: var(--brand-red-coral);
}

&:before {
width: 4.8rem;
height: 0.01rem;

@include mobile {
width: 0.01rem;
height: 1.6rem;
}
}

&:after {
width: 6.3rem;
height: 0.01rem;

@include mobile {
width: 0.01rem;
height: 2.4rem;
}
}
}
}

&__card-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

&:after {
display: inline-block;
content: '';
}

&-title {
display: none;
}

@include mobile {
display: block;
height: 14rem;

&-title {
display: block;
position: absolute;
bottom: 0;
width: 100%;
border-radius: 0 0 0.8rem 0.8rem;
}
}
}
}
64 changes: 64 additions & 0 deletions ...src/components/modals/real-wallets-upgrade/components/wallet-link/wallet-link-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from 'react';
import { Icon, Text, WalletCard } from '@deriv/components';
import { localize } from '@deriv/translations';
import WalletAccount from '../wallet-account/wallet-account';
import './wallet-link-wrapper.scss';
import classNames from 'classnames';

export type TWalletLinkWrapper = {
wallet_details: React.ComponentProps<typeof WalletCard>;
account_list: {
balance: string;
currency: string;
account_name: string;
icon: string;
}[];
};

const WalletLinkWrapper = ({ wallet_details, account_list }: TWalletLinkWrapper) => {
return (
<div className='wallet-link-wrapper'>
<div className='wallet-link-wrapper__accounts'>
<Text
as='div'
className='wallet-link-wrapper__title-text wallet-link-wrapper__accounts-title'
color='prominent'
>
{localize('Your current trading account(s)')}
</Text>
{account_list.map((account, index) => {
return (
<WalletAccount
key={index}
balance={account.balance}
currency={account.currency}
icon={account.icon}
name={account.account_name}
/>
);
})}
</div>
<div className='wallet-link-wrapper__link'>
<div
className={classNames('wallet-link-wrapper__link-bracket', {
'wallet-link-wrapper__link-bracket--single': account_list.length === 1,
})}
/>
<div className='wallet-link-wrapper__link-icon'>
<Icon icon='IcAppstoreWalletsLink' size={40} />
</div>
</div>
<div className='wallet-link-wrapper__card-wrapper'>
<WalletCard wallet={wallet_details} size='large' state='default' />
<Text
className='wallet-link-wrapper__title-text wallet-link-wrapper__card-wrapper-title'
color='prominent'
>
{localize('Your new Wallet')}
</Text>
</div>
</div>
);
};

export default WalletLinkWrapper;
13 changes: 10 additions & 3 deletions packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
.wallet-steps {
width: 100%;
height: 100%;
display: grid;
place-content: center;
display: flex;

@include mobile {
align-items: center;
}

&__content {
height: 100%;
max-width: 77.6rem;
margin: 0 auto;
text-align: center;
Expand All @@ -18,6 +20,11 @@
}

&__footer {
width: 100%;
position: sticky;
bottom: 0;
background-color: inherit;

@include mobile {
justify-content: center;
background: var(--fill-normal);
Expand Down
13 changes: 12 additions & 1 deletion packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { observer, useStore } from '@deriv/stores';
import { WalletsIntro } from './components/wallets-intro/wallets-intro';
import ReadyToUpgradeWallets from './components/ready-to-upgrade-wallets';
import './real-wallets-upgrade.scss';
import WalletLinkingStep from './wallet-linking-step/wallet-linking-step';
import mock_wallet_migration_response from '../../../constants/mock_wallet_migration_response';

const RealWalletsUpgrade = observer(() => {
const { traders_hub } = useStore();
Expand Down Expand Up @@ -96,6 +98,15 @@ const RealWalletsUpgrade = observer(() => {
name: 'intro_wallets',
component: <WalletsIntro is_eu={is_eu} current_step={2} />,
},
{
component: <WalletLinkingStep data={mock_wallet_migration_response[0]} />,
},
{
component: <WalletLinkingStep data={mock_wallet_migration_response[1]} />,
},
{
component: <WalletLinkingStep data={mock_wallet_migration_response[2]} />,
},
{
name: 'ready_to_upgrade',
component: <ReadyToUpgradeWallets is_eu={is_eu} value={is_disabled} toggleCheckbox={toggleCheckbox} />,
Expand Down Expand Up @@ -140,7 +151,7 @@ const RealWalletsUpgrade = observer(() => {
wrapper_classname='wallet-steps'
footer={ModalFooter}
>
<Modal.Body>{ModalContent}</Modal.Body>
<Modal.Body className='wallet-steps'>{ModalContent}</Modal.Body>
</MobileDialog>
</MobileWrapper>
</React.Fragment>
Expand Down
Loading
Loading