Skip to content

Commit

Permalink
Aum/wall 278/create wallet card component (#8580)
Browse files Browse the repository at this point in the history 
* feat: created wallet-card and integrated wallet-icon for small size

* refactor: changed height of gradient-background

* feat: added states for wallet-card small

* feat: added card shine effect to wallet-card for medium and large

* feat: wallet-card states completed

* fix: rendering values in correct places

* refactor: added single prop for handling wallet-card states

* fix: applied correct padding and font-size for mobile

* feat: included 'added' state for wallet-card

* chore: added constants config for wallet-card

* chore: applied changes from comments

* fix: wallet-card state becomes default for add/added states

* refactor: hamid-aum-forked-wallet-card

* refactor: enhance-wallet-card

* feat: enhance-wallet-card

* docs: add comment

* revert: revert trader-hub home page

* refactor: refactor wallet-icon

* fix: resolve comments

* fix: fixed some styling

* refactor: removed parent hack from scss and fixed all the states

* chore: removed mock response file

---------

Co-authored-by: Hamid Yaftian <hamid@deriv.com>
Co-authored-by: Hamid <hamid@regentmarkets.com>
  • Loading branch information
@aum-deriv @hamid-deriv
3 people committed May 23, 2023
1 parent 7ea8a11 commit 13940c5
Show file tree
Hide file tree
Showing 9 changed files with 363 additions and 38 deletions.
6 changes: 1 addition & 5 deletions packages/components/src/components/gradient-background/gradient-background.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,7 @@
display: flex;
justify-content: center;
align-items: center;
height: 16rem;

@include mobile {
height: 20rem;
}
height: 100%;

&__container {
position: relative;
Expand Down
3 changes: 3 additions & 0 deletions packages/components/src/components/wallet-card/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import WalletCard from './wallet-card';

export { WalletCard };
172 changes: 172 additions & 0 deletions packages/components/src/components/wallet-card/wallet-card.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
.wallet-card {
position: relative;
border-radius: $BORDER_RADIUS;

&__container {
border-radius: inherit;
width: 100%;
height: 100%;

&--small {
display: flex;
align-items: center;
justify-content: center;
}

&-fade {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background: var(--wallets-card-active-gradient-background);
border-radius: inherit;

&--active {
opacity: 1;
}
}

&:hover & {
&-fade {
opacity: 1;
&--disabled,
&--faded,
&--added {
opacity: 0;
}
}
}
}

&__content {
position: relative;
z-index: 1;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 1.6rem;

&--medium {
@include mobile {
padding: 0.8rem;
}
}
}

&--active {
border: 2px solid var(--text-red);
}

&--small {
width: 6.4rem;
height: 4rem;
border-radius: $BORDER_RADIUS;
}

&--medium {
width: 20rem;
height: 12rem;
border-radius: $BORDER_RADIUS_2;

@include mobile {
width: 16rem;
height: 9.6rem;
}
}

&--large {
width: 24rem;
height: 14.4rem;
border-radius: $BORDER_RADIUS_2;

@include mobile {
width: 21.6rem;
height: 12.8rem;
}
}

&__active-icon {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;

&--small {
position: absolute;
top: 0;
left: 100%;
transform: translate(-1.2rem, -0.4rem);
width: unset;
height: unset;
z-index: 1;
}
}

&__shine {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(40% 10%, 104% -6.94%, 92.5% 100%, 28% 100%);
mix-blend-mode: overlay;
opacity: 0.16;
background-color: $color-white;
}

&__top-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}

&__bottom-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;

&-wallet-name {
font-size: var(--text-size-xxxs);

@include mobile {
font-size: var(--text-size-xxxxs);
}
}

&-balance {
font-size: var(--text-size-xs);

@include mobile {
font-size: var(--text-size-xxs);
}
}
}

&__wallet-button {
background: $color-white;

&--added {
opacity: 0.32;
}
}

&--disabled {
opacity: 0.32;
}

&--faded {
opacity: 0.72;
}
}
116 changes: 116 additions & 0 deletions packages/components/src/components/wallet-card/wallet-card.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import React from 'react';
import { localize } from '@deriv/translations';
import Badge from '../badge';
import Button from '../button';
import Icon from '../icon';
import Text from '../text';
import { isMobile } from '@deriv/shared';
import { WalletIcon } from '../wallet-icon';
import './wallet-card.scss';
import classNames from 'classnames';

type TWalletCardProps = {
// TODO: This type should be updated when the response is ready
wallet: any;
size?: 'small' | 'medium' | 'large';
state?: 'active' | 'add' | 'added' | 'default' | 'disabled' | 'faded';
};

const WalletCard: React.FC<React.PropsWithChildren<TWalletCardProps>> = ({
wallet,
size = 'medium',
state = 'default',
}) => {
const IconComponent = () => {
let icon_size = wallet.icon_type === 'app' ? 'medium' : 'large';
if (size === 'small') icon_size = 'medium';
if (size === 'medium') icon_size = isMobile() && wallet.icon_type === 'crypto' ? 'medium' : 'large';

return (
<React.Fragment>
{wallet.icon_type !== 'app' && (
<WalletIcon
type={wallet.icon_type}
icon={wallet.icon}
size={icon_size}
currency={wallet.currency}
/>
)}
{/* TODO: Update this after app-icon created */}
{wallet.icon_type === 'app' && <div />}
</React.Fragment>
);
};

return (
<div className={`wallet-card wallet-card--${size} wallet-card--${state}`}>
<div
className={`wallet-card__container wallet-card__container--${state} wallet-card__container--${size} wallet-card__${wallet.currency}-bg`}
>
<div
className={classNames('wallet-card__container-fade', {
[`wallet-card__container-fade--${state}`]: state,
})}
/>
{size === 'small' && <IconComponent />}
{size !== 'small' && (
<div className={`wallet-card__content wallet-card__content--${size}`}>
<div className='wallet-card__shine' />

<div className='wallet-card__top-wrapper'>
<IconComponent />
<Badge
custom_color='var(--text-prominent)'
label={wallet.jurisdiction_title}
type='bordered'
/>
</div>

<div className='wallet-card__bottom-wrapper'>
{state !== 'add' && state !== 'added' ? (
<React.Fragment>
<Text className='wallet-card__bottom-wrapper-wallet-name' color='prominent'>
{wallet.name} {localize('Wallet')}
</Text>
<Text
className='wallet-card__bottom-wrapper-balance'
color='prominent'
weight='bold'
>
{wallet.balance} {wallet.currency}
</Text>
</React.Fragment>
) : (
<Button
className={`wallet-card__wallet-button wallet-card__wallet-button--${state}`}
classNameSpan='wallet-card__wallet-button-text'
icon={
<Icon
className='wallet-card__wallet-button-icon'
custom_color='$color-black-1'
icon={state === 'added' ? 'IcCheckmarkBold' : 'IcAddBold'}
size={12}
/>
}
text={state === 'added' ? localize('Added') : localize('Add')}
is_disabled={state === 'added'}
/>
)}
</div>
</div>
)}
</div>
{state === 'active' && (
<div className={`wallet-card__active-icon wallet-card__active-icon--${size}`}>
<Icon
color='brand'
data_testid='ic-checkmark-circle'
icon='IcCheckmarkCircle'
size={size === 'small' ? 16 : 32}
/>
</div>
)}
</div>
);
};
export default WalletCard;
10 changes: 0 additions & 10 deletions packages/components/src/components/wallet-icon/wallet-icon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,6 @@
border-radius: $BORDER_RADIUS;
overflow: hidden;

&__background {
position: absolute;
width: 100%;
height: 100%;
}

&__icon {
z-index: 1;
}

&--small {
width: 4rem;
height: 2.4rem;
Expand Down
Loading

0 comments on commit 13940c5

Please sign in to comment.