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.

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

hamid/enhance-wallet-card #1

58 changes: 58 additions & 0 deletions packages/appstore/src/constants/wallet-mocked-response.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// TODO: Remove this file once we have the real API response
const wallets = [

Choose a reason for hiding this comment

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

@hamid-deriv Do we need this? It's not being used anywhere 🤔

Copy link
Author

Choose a reason for hiding this comment

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

Actually, It will be used on the trader's hub home page for testing purposes. As the home page is not in this PR's scope, I didn't push the index file. but this file should be in the project to know what the wallet schema should look like.

{
name: 'USD Wallet',
currency: 'usd',
icon: 'IcCurrencyUsd',
balance: '10,0000',
icon_type: 'fiat',
state: 'default',
jurisdiction_title: 'svg',
},
{
name: 'USD Wallet',
currency: 'usd',
icon: 'IcCurrencyUsd',
balance: '10,0000',
icon_type: 'fiat',
state: 'default',
jurisdiction_title: 'svg',
},
// {
// name: 'MT5 Derived Demo',
// currency: 'usd',
// icon: 'IcRebrandingMt5Logo',
// wallet_icon: 'IcWalletDerivDemoLight',
// balance: '879',
// icon_type: 'app',
// app: 'mt5',
// linked_wallet: 'deriv demo',
// state: 'default',
// jurisdiction_title: 'svg',
// is_demo: true,
// },
// {
// name: 'MT5 Derived Demo',
// currency: 'usd',
// icon: 'IcRebrandingMt5Logo',
// wallet_icon: null,
// balance: '879',
// icon_type: 'app',
// app: 'mt5',
// linked_wallet: null,
// state: 'default',
// jurisdiction_title: 'svg',
// is_demo: true,
// },
{
name: 'Bitcoin Wallet',
currency: 'BTC',
icon: 'IcCashierBitcoinLight',
balance: '0.003546',
icon_type: 'crypto',
state: 'default',
jurisdiction_title: 'svg',
},
];

export default wallets;
145 changes: 73 additions & 72 deletions packages/components/src/components/wallet-card/wallet-card.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,80 @@
.wallet-card {
aum-deriv marked this conversation as resolved.
Show resolved Hide resolved
$parent: &;
aum-deriv marked this conversation as resolved.
Show resolved Hide resolved

position: relative;
border-radius: $BORDER_RADIUS_2;
overflow: hidden;
border-radius: $BORDER_RADIUS;

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

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

&:hover {
&:after {
opacity: 1;
}
}
}

&__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;
}

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

#{$parent}__container {
&:after {
opacity: 1;
}
}
}

&--small {
width: 6.4rem;
height: 4rem;
overflow: visible;

#{$parent}__container {
display: flex;
align-items: center;
justify-content: center;
}

#{$parent}__active-icon {
position: absolute;
top: 0;
left: 100%;
transform: translate(-1.2rem, -0.4rem);
width: unset;
height: unset;
z-index: 1;
}
}

&--medium {
width: 20rem;
height: 12rem;

@include mobile {
width: 16rem;
height: 9.6rem;
Expand All @@ -21,6 +84,7 @@
&--large {
width: 24rem;
height: 14.4rem;

@include mobile {
width: 21.6rem;
height: 12.8rem;
Expand All @@ -29,43 +93,14 @@

&__active-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

&--small {
top: 0;
left: 100%;
transform: translate(-1.2rem, -0.4rem);
}
}

&__content {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 1.6rem;
box-sizing: border-box;
border-radius: $BORDER_RADIUS_2;

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

&--default:hover {
background: var(--wallets-card-active-gradient-background);
}

&--medium {
@include mobile {
padding: 0.8rem;
}
}
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}

&__shine {
Expand Down Expand Up @@ -113,15 +148,6 @@
&__wallet-button {
background: $color-white;

&-icon {
align-self: center;
margin-right: 0.8rem;
}

&-text {
color: $color-black-1;
}

&--added {
opacity: 0.32;
}
Expand All @@ -134,29 +160,4 @@
&--faded {
opacity: 0.72;
}

&__small-container {
width: 6.4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;

&-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
border-radius: $BORDER_RADIUS;

&--active {
outline: 2px solid var(--text-red);
background: var(--wallets-card-active-gradient-background);
}

&--default:hover {
background: var(--wallets-card-active-gradient-background);
}
}
}
}
Loading