From 6abddd1531f8f360f67a9788f09c9a99bc939459 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Thu, 11 May 2023 16:26:28 +0400 Subject: [PATCH 01/22] feat: created wallet-card and integrated wallet-icon for small size --- .../src/components/wallet-card/index.ts | 3 + .../components/wallet-card/wallet-card.scss | 85 ++++++++++++++ .../components/wallet-card/wallet-card.tsx | 107 ++++++++++++++++++ packages/components/src/index.js | 1 + packages/shared/src/styles/constants.scss | 2 + packages/shared/src/styles/themes.scss | 2 + 6 files changed, 200 insertions(+) create mode 100644 packages/components/src/components/wallet-card/index.ts create mode 100644 packages/components/src/components/wallet-card/wallet-card.scss create mode 100644 packages/components/src/components/wallet-card/wallet-card.tsx diff --git a/packages/components/src/components/wallet-card/index.ts b/packages/components/src/components/wallet-card/index.ts new file mode 100644 index 000000000000..c6b23d764216 --- /dev/null +++ b/packages/components/src/components/wallet-card/index.ts @@ -0,0 +1,3 @@ +import WalletCard from './wallet-card'; + +export { WalletCard }; diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss new file mode 100644 index 000000000000..12195b93bda7 --- /dev/null +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -0,0 +1,85 @@ +.wallet-card { + position: relative; + border-radius: 0.8rem; + + &--small { + width: 6.4rem; + height: 4rem; + } + + &--medium { + width: 20rem; + height: 12rem; + @include mobile { + width: 16rem; + height: 9.6rem; + } + } + &--large { + width: 24rem; + height: 14.4rem; + @include mobile { + width: 21.6rem; + height: 12.8rem; + } + } + &__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: 0.8rem; + &--active { + border: 2px solid var(--text-red); + background: var(--wallets-card-active-gradient-background); + } + &--hover:hover { + background: var(--wallets-card-active-gradient-background); + } + } + &__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%; + } + &--disabled { + opacity: 0.32; + } + &--faded { + opacity: 0.72; + } + + &__small-container { + width: 6.4rem; + height: 4rem; + display: flex; + align-items: center; + justify-content: center; + outline: 2px solid var(--text-red); + border-radius: 0.4rem; + } +} diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx new file mode 100644 index 000000000000..d9dcbc34181f --- /dev/null +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import './wallet-card.scss'; +import { localize } from '@deriv/translations'; +import Icon from '../icon'; +import Text from '../text'; +import Button from '../button'; +import classNames from 'classnames'; +import Badge from '../badge'; +import { GradientBackground } from '../gradient-background'; +import { WalletIcon } from '../wallet-icon'; + +type WalletCardProps = { + active?: boolean; + has_add_button?: boolean; + balance?: string; + currency?: string; + dark?: boolean; + disabled?: boolean; + faded?: boolean; + jurisdiction: string; + renderIcon: () => JSX.Element | undefined; + size?: 'small' | 'medium' | 'large'; + wallet_name?: string; +}; +const WalletCard = ({ + active, + has_add_button, + balance, + currency, + dark, + disabled, + faded, + jurisdiction, + renderIcon, + size, + wallet_name, +}: WalletCardProps) => { + return ( +
+ {size === 'small' ? ( +
+ +
+ ) : ( + +
+
+ {renderIcon()} + +
+
+ {has_add_button && !active ? ( + + ) : ( + + + USD Wallet + + + 0.00 USD + + + )} +
+
+ + )} + {active && ( + + )} +
+ ); +}; +export default WalletCard; diff --git a/packages/components/src/index.js b/packages/components/src/index.js index ee4a2b8a496e..2e8ae4e6e566 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -113,5 +113,6 @@ export { default as UnhandledErrorModal } from './components/unhandled-error-mod export { default as VerticalTab } from './components/vertical-tab'; export * from './components/watermark'; export { default as Wizard } from './components/wizard'; +export * from './components/wallet-card'; export * from './components/wallet-icon'; export * from './hooks'; diff --git a/packages/shared/src/styles/constants.scss b/packages/shared/src/styles/constants.scss index 9eb2f0fd1529..4c66e8966867 100644 --- a/packages/shared/src/styles/constants.scss +++ b/packages/shared/src/styles/constants.scss @@ -98,6 +98,8 @@ $gradient-color-red-3: linear-gradient(90deg, #ff444f 0%, #211d1e 95.22%); $gradient-color-red-4: linear-gradient(90deg, #ff6444 0%, #ff444f 100%); $gradient-color-black-3: linear-gradient(58.51deg, #061828 28.06%, #1a3c60 93.51%); $gradient-color-black-4: linear-gradient(274.25deg, #333333 9.01%, #5c5b5b 103.31%); +$gradient-color-black-5: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.16) 100%); +$gradient-color-white-2: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.16) 100%); $gradient-color-blue-5: linear-gradient(90deg, #00a8af 0%, #04cfd8 104.41%); $gradient-color-gold: linear-gradient(90deg, #f7931a 0%, #ffc71b 104.41%); $gradient-color-green-4: linear-gradient(90deg, #1db193 0%, #09da7a 104.41%); diff --git a/packages/shared/src/styles/themes.scss b/packages/shared/src/styles/themes.scss index 79e2e6bc9f6c..64a766f33ee6 100644 --- a/packages/shared/src/styles/themes.scss +++ b/packages/shared/src/styles/themes.scss @@ -197,6 +197,7 @@ --wallets-banner-border-color: #{$color-grey-4}; --wallets-banner-dot-color: #{$color-grey-6}; --wallets-banner-active-dot-color: #{$color-red}; + --wallets-card-active-gradient-background: #{$gradient-color-black-5}; } .theme--dark { // General @@ -312,5 +313,6 @@ --wallets-banner-border-color: #{$color-grey-4}; --wallets-banner-dot-color: #{$color-grey-6}; --wallets-banner-active-dot-color: #{$color-red}; + --wallets-card-active-gradient-background: #{$gradient-color-white-2}; } } From 2f4d54ed8c0a3366c6bc5b19f2efb23e7eaa78ee Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Thu, 11 May 2023 16:33:26 +0400 Subject: [PATCH 02/22] refactor: changed height of gradient-background --- .../components/gradient-background/gradient-background.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/components/src/components/gradient-background/gradient-background.scss b/packages/components/src/components/gradient-background/gradient-background.scss index f2668af16463..e63b09f17ba8 100644 --- a/packages/components/src/components/gradient-background/gradient-background.scss +++ b/packages/components/src/components/gradient-background/gradient-background.scss @@ -5,11 +5,7 @@ display: flex; justify-content: center; align-items: center; - height: 16rem; - - @include mobile { - height: 20rem; - } + height: 100%; &__container { position: relative; From a889cbd5eb0c18627309d6f1e2d5fd34627b19dc Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Thu, 11 May 2023 18:03:22 +0400 Subject: [PATCH 03/22] feat: added states for wallet-card small --- .../components/wallet-card/wallet-card.scss | 19 +++++++++++++++++-- .../components/wallet-card/wallet-card.tsx | 15 ++++++++++----- .../components/wallet-icon/wallet-icon.scss | 4 ---- .../components/wallet-icon/wallet-icon.tsx | 11 +++++------ 4 files changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index 12195b93bda7..b0042200e706 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -79,7 +79,22 @@ display: flex; align-items: center; justify-content: center; - outline: 2px solid var(--text-red); - border-radius: 0.4rem; + + &-overlay { + position: absolute; + width: 100%; + height: 100%; + z-index: 1; + border-radius: 0.4rem; + + &--active { + outline: 2px solid var(--text-red); + background: var(--wallets-card-active-gradient-background); + } + + &--hover:hover { + background: var(--wallets-card-active-gradient-background); + } + } } } diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index d9dcbc34181f..269228fb5622 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -1,6 +1,5 @@ import React from 'react'; import './wallet-card.scss'; -import { localize } from '@deriv/translations'; import Icon from '../icon'; import Text from '../text'; import Button from '../button'; @@ -17,8 +16,8 @@ type WalletCardProps = { dark?: boolean; disabled?: boolean; faded?: boolean; + icon: JSX.Element; jurisdiction: string; - renderIcon: () => JSX.Element | undefined; size?: 'small' | 'medium' | 'large'; wallet_name?: string; }; @@ -30,8 +29,8 @@ const WalletCard = ({ dark, disabled, faded, + icon, jurisdiction, - renderIcon, size, wallet_name, }: WalletCardProps) => { @@ -47,7 +46,13 @@ const WalletCard = ({ > {size === 'small' ? (
- +
+
) : (
- {renderIcon()} + {icon}
diff --git a/packages/components/src/components/wallet-icon/wallet-icon.scss b/packages/components/src/components/wallet-icon/wallet-icon.scss index 46de5097b9b6..d4e2202e9719 100644 --- a/packages/components/src/components/wallet-icon/wallet-icon.scss +++ b/packages/components/src/components/wallet-icon/wallet-icon.scss @@ -12,10 +12,6 @@ height: 100%; } - &__icon { - z-index: 1; - } - &--small { width: 4rem; height: 2.4rem; diff --git a/packages/components/src/components/wallet-icon/wallet-icon.tsx b/packages/components/src/components/wallet-icon/wallet-icon.tsx index 9448ec613654..433047d23860 100644 --- a/packages/components/src/components/wallet-icon/wallet-icon.tsx +++ b/packages/components/src/components/wallet-icon/wallet-icon.tsx @@ -1,11 +1,9 @@ import React, { CSSProperties } from 'react'; -import Icon from '../icon'; import { GradientBackgroundTwoPoint } from '../gradient-background-two-point'; import './wallet-icon.scss'; type TWalletIcon = { - icon: string; - iconSize: number | string; + icon: JSX.Element; primaryColor: CSSProperties['backgroundColor']; secondaryColor: CSSProperties['backgroundColor']; size?: 'small' | 'medium' | 'large'; @@ -18,7 +16,7 @@ const getBlurRadius = (size: string) => { return 48; }; -const WalletIcon = ({ icon, iconSize = 24, primaryColor, secondaryColor, size = 'medium' }: TWalletIcon) => { +const WalletIcon = ({ icon, primaryColor, secondaryColor, size = 'medium' }: TWalletIcon) => { return (
@@ -27,9 +25,10 @@ const WalletIcon = ({ icon, iconSize = 24, primaryColor, secondaryColor, size = backgroundColor='var(--general-main-2)' primaryColor={primaryColor} secondaryColor={secondaryColor} - /> + > + {icon} +
-
); }; From fafc743345acb73b8a7b325fddad6e8ea5a4bf18 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Fri, 12 May 2023 09:21:36 +0400 Subject: [PATCH 04/22] feat: added card shine effect to wallet-card for medium and large --- .../src/components/wallet-card/wallet-card.scss | 14 ++++++++++++++ .../src/components/wallet-card/wallet-card.tsx | 1 + 2 files changed, 15 insertions(+) diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index b0042200e706..5b2cd4cd7e9f 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -54,6 +54,19 @@ background: var(--wallets-card-active-gradient-background); } } + + &__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; @@ -66,6 +79,7 @@ justify-content: flex-start; width: 100%; } + &--disabled { opacity: 0.32; } diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index 269228fb5622..cf479a81dcf8 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -67,6 +67,7 @@ const WalletCard = ({ 'wallet-card__content--hover': !disabled, })} > +
{icon} From f74df7e852e8a968759e5f1763a2e1beb2351547 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Fri, 12 May 2023 12:09:43 +0400 Subject: [PATCH 05/22] feat: wallet-card states completed --- .../components/wallet-card/wallet-card.scss | 13 +++++++++ .../components/wallet-card/wallet-card.tsx | 29 +++++++++++-------- 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index 5b2cd4cd7e9f..08f49a0bbb6b 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -1,10 +1,12 @@ .wallet-card { position: relative; border-radius: 0.8rem; + overflow: hidden; &--small { width: 6.4rem; height: 4rem; + overflow: visible; } &--medium { @@ -80,6 +82,17 @@ width: 100%; } + &__add-wallet-button { + background: $color-white; + &-icon { + align-self: center; + margin-right: 0.8rem; + } + &-text { + color: $color-black-1; + } + } + &--disabled { opacity: 0.32; } diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index cf479a81dcf8..eb2156d54bc5 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -48,7 +48,7 @@ const WalletCard = ({
@@ -63,7 +63,7 @@ const WalletCard = ({ >
@@ -73,15 +73,20 @@ const WalletCard = ({
- {has_add_button && !active ? ( - + {has_add_button && !active && !faded && !disabled ? ( +
)} - {active && ( + {active && !disabled && !faded && ( Date: Fri, 12 May 2023 14:58:55 +0400 Subject: [PATCH 06/22] fix: rendering values in correct places --- .../components/src/components/wallet-card/wallet-card.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index eb2156d54bc5..b0eb28f6b6e7 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -90,10 +90,10 @@ const WalletCard = ({ ) : ( - USD Wallet + {wallet_name} Wallet - 0.00 USD + {balance} {currency} )} From 2878c678b83d66481dec9893fbff7aba6d9f49c8 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Sun, 14 May 2023 15:06:53 +0400 Subject: [PATCH 07/22] refactor: added single prop for handling wallet-card states --- .../components/wallet-card/wallet-card.scss | 4 +- .../components/wallet-card/wallet-card.tsx | 178 ++++++++---------- 2 files changed, 82 insertions(+), 100 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index 08f49a0bbb6b..e8319ea4ce66 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -52,7 +52,7 @@ border: 2px solid var(--text-red); background: var(--wallets-card-active-gradient-background); } - &--hover:hover { + &--default:hover { background: var(--wallets-card-active-gradient-background); } } @@ -119,7 +119,7 @@ background: var(--wallets-card-active-gradient-background); } - &--hover:hover { + &--default:hover { background: var(--wallets-card-active-gradient-background); } } diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index b0eb28f6b6e7..6d48e0be1415 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -1,118 +1,100 @@ import React from 'react'; -import './wallet-card.scss'; -import Icon from '../icon'; -import Text from '../text'; -import Button from '../button'; import classNames from 'classnames'; +import { localize } from '@deriv/translations'; import Badge from '../badge'; +import Button from '../button'; +import Icon from '../icon'; +import Text from '../text'; import { GradientBackground } from '../gradient-background'; import { WalletIcon } from '../wallet-icon'; +import './wallet-card.scss'; -type WalletCardProps = { - active?: boolean; - has_add_button?: boolean; +type TWalletCardProps = { balance?: string; currency?: string; - dark?: boolean; - disabled?: boolean; - faded?: boolean; icon: JSX.Element; - jurisdiction: string; + badgeText: string; size?: 'small' | 'medium' | 'large'; wallet_name?: string; + wallet_state?: 'active' | 'add' | 'default' | 'disabled' | 'faded'; }; -const WalletCard = ({ - active, - has_add_button, + +const WalletCard: React.FC> = ({ balance, currency, - dark, - disabled, - faded, icon, - jurisdiction, + badgeText, size, wallet_name, -}: WalletCardProps) => { - return ( -
- {size === 'small' ? ( -
-
- -
- ) : ( - -
-
-
- {icon} - -
-
- {has_add_button && !active && !faded && !disabled ? ( -
-
- - )} - {active && !disabled && !faded && ( - ( +
+ {size === 'small' ? ( +
+
- )} -
- ); -}; + +
+ ) : ( + +
+
+
+ {icon} + +
+
+ {wallet_state === 'add' ? ( +
+
+ + )} + {wallet_state === 'active' && ( + + )} +
+); export default WalletCard; From 3908de994fe57a48f0cb35ee76a364b877908560 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Mon, 15 May 2023 11:41:05 +0400 Subject: [PATCH 08/22] fix: applied correct padding and font-size for mobile --- .../components/wallet-card/wallet-card.scss | 20 +++++++++++++++++++ .../components/wallet-card/wallet-card.tsx | 4 ++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index e8319ea4ce66..3e549da4d7ca 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -55,6 +55,10 @@ &--default:hover { background: var(--wallets-card-active-gradient-background); } + + @include mobile { + padding: 0.8rem; + } } &__shine { @@ -80,6 +84,22 @@ 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); + } + } } &__add-wallet-button { diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index 6d48e0be1415..63f49e985a20 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -72,10 +72,10 @@ const WalletCard: React.FC> = ({ /> ) : ( - + {wallet_name} {localize('Wallet')} - + {balance} {currency} From 0b53bf36a278a1e2bc889439516d21bb245bf7db Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Mon, 15 May 2023 12:43:35 +0400 Subject: [PATCH 09/22] feat: included 'added' state for wallet-card --- .../components/wallet-card/wallet-card.scss | 5 ++- .../components/wallet-card/wallet-card.tsx | 34 ++++++++++--------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index 3e549da4d7ca..a473ec8effaf 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -102,7 +102,7 @@ } } - &__add-wallet-button { + &__wallet-button { background: $color-white; &-icon { align-self: center; @@ -111,6 +111,9 @@ &-text { color: $color-black-1; } + &--added { + opacity: 0.32; + } } &--disabled { diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index 63f49e985a20..37239b59cfbb 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -16,7 +16,7 @@ type TWalletCardProps = { badgeText: string; size?: 'small' | 'medium' | 'large'; wallet_name?: string; - wallet_state?: 'active' | 'add' | 'default' | 'disabled' | 'faded'; + wallet_state?: 'active' | 'add' | 'added' | 'default' | 'disabled' | 'faded'; }; const WalletCard: React.FC> = ({ @@ -56,21 +56,7 @@ const WalletCard: React.FC> = ({
- {wallet_state === 'add' ? ( -
From 086eab9b3096626dfa04cd1a5ecab9efe720afed Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Mon, 15 May 2023 15:34:58 +0400 Subject: [PATCH 10/22] chore: added constants config for wallet-card --- .../appstore/src/constants/wallet-card-config.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 packages/appstore/src/constants/wallet-card-config.ts diff --git a/packages/appstore/src/constants/wallet-card-config.ts b/packages/appstore/src/constants/wallet-card-config.ts new file mode 100644 index 000000000000..985864b9367e --- /dev/null +++ b/packages/appstore/src/constants/wallet-card-config.ts @@ -0,0 +1,15 @@ +export const wallet_card = { + sizes: { + SMALL: 'small', + MEDIUM: 'medium', + LARGE: 'large', + }, + states: { + ACTIVE: 'active', + ADD: 'add', + ADDED: 'added', + DEFAULT: 'default', + DISABLED: 'disabled', + FADED: 'faded', + }, +}; From 5eef587a498d5fd620a34dd4f47cef09381909ef Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 16 May 2023 13:25:50 +0400 Subject: [PATCH 11/22] chore: applied changes from comments --- .../src/constants/wallet-card-config.ts | 15 ------------- .../components/wallet-card/wallet-card.scss | 22 ++++++++++++++----- .../components/wallet-card/wallet-card.tsx | 7 +++--- packages/shared/src/styles/constants.scss | 1 + 4 files changed, 22 insertions(+), 23 deletions(-) delete mode 100644 packages/appstore/src/constants/wallet-card-config.ts diff --git a/packages/appstore/src/constants/wallet-card-config.ts b/packages/appstore/src/constants/wallet-card-config.ts deleted file mode 100644 index 985864b9367e..000000000000 --- a/packages/appstore/src/constants/wallet-card-config.ts +++ /dev/null @@ -1,15 +0,0 @@ -export const wallet_card = { - sizes: { - SMALL: 'small', - MEDIUM: 'medium', - LARGE: 'large', - }, - states: { - ACTIVE: 'active', - ADD: 'add', - ADDED: 'added', - DEFAULT: 'default', - DISABLED: 'disabled', - FADED: 'faded', - }, -}; diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index a473ec8effaf..f4a9e117c119 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -1,6 +1,6 @@ .wallet-card { position: relative; - border-radius: 0.8rem; + border-radius: $BORDER_RADIUS_2; overflow: hidden; &--small { @@ -17,6 +17,7 @@ height: 9.6rem; } } + &--large { width: 24rem; height: 14.4rem; @@ -25,6 +26,7 @@ height: 12.8rem; } } + &__active-icon { position: absolute; top: 50%; @@ -37,6 +39,7 @@ transform: translate(-1.2rem, -0.4rem); } } + &__content { position: absolute; display: flex; @@ -47,17 +50,21 @@ height: 100%; padding: 1.6rem; box-sizing: border-box; - border-radius: 0.8rem; + 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); } - @include mobile { - padding: 0.8rem; + &--medium { + @include mobile { + padding: 0.8rem; + } } } @@ -79,6 +86,7 @@ justify-content: space-between; width: 100%; } + &__bottom-wrapper { display: flex; flex-direction: column; @@ -104,13 +112,16 @@ &__wallet-button { background: $color-white; + &-icon { align-self: center; margin-right: 0.8rem; } + &-text { color: $color-black-1; } + &--added { opacity: 0.32; } @@ -119,6 +130,7 @@ &--disabled { opacity: 0.32; } + &--faded { opacity: 0.72; } @@ -135,7 +147,7 @@ width: 100%; height: 100%; z-index: 1; - border-radius: 0.4rem; + border-radius: $BORDER_RADIUS; &--active { outline: 2px solid var(--text-red); diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index 37239b59cfbb..47e99eb5f120 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -13,7 +13,7 @@ type TWalletCardProps = { balance?: string; currency?: string; icon: JSX.Element; - badgeText: string; + badge_text: string; size?: 'small' | 'medium' | 'large'; wallet_name?: string; wallet_state?: 'active' | 'add' | 'added' | 'default' | 'disabled' | 'faded'; @@ -23,7 +23,7 @@ const WalletCard: React.FC> = ({ balance, currency, icon, - badgeText, + badge_text, size, wallet_name, wallet_state = 'default', @@ -47,13 +47,14 @@ const WalletCard: React.FC> = ({
{icon} - +
{wallet_state !== 'add' && wallet_state !== 'added' ? ( diff --git a/packages/shared/src/styles/constants.scss b/packages/shared/src/styles/constants.scss index 4c66e8966867..93a2dd9c9746 100644 --- a/packages/shared/src/styles/constants.scss +++ b/packages/shared/src/styles/constants.scss @@ -160,6 +160,7 @@ $COLOR_DARK_GRAY_4: #999999; /* stylelint-enable color-no-hex */ $BORDER_RADIUS: 4px; +$BORDER_RADIUS_2: 8px; $MAX_CONTAINER_WIDTH: 1440px; From 71355394fc50d46d1759de1f61fb5a42d3ca93c1 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Wed, 17 May 2023 09:57:43 +0400 Subject: [PATCH 12/22] fix: wallet-card state becomes default for add/added states --- .../components/src/components/wallet-card/wallet-card.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index 47e99eb5f120..d1a752de6ddd 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -37,9 +37,9 @@ const WalletCard: React.FC> = ({ {size === 'small' ? (
From de15886c30812781da9471eb5f5c3bb218365f31 Mon Sep 17 00:00:00 2001 From: Hamid Yaftian Date: Thu, 18 May 2023 17:17:34 +0800 Subject: [PATCH 13/22] refactor: hamid-aum-forked-wallet-card --- .../src/constants/wallet-mocked-response.ts | 44 ++++ .../src/modules/traders-hub/index.tsx | 42 +++- .../components/wallet-card/wallet-card.scss | 147 ++++++------- .../components/wallet-card/wallet-card.tsx | 204 ++++++++++-------- .../components/wallet-icon/wallet-icon.scss | 26 +-- .../components/wallet-icon/wallet-icon.tsx | 29 +-- .../sass/app/_common/components/wallet.scss | 116 ++++++---- 7 files changed, 377 insertions(+), 231 deletions(-) create mode 100644 packages/appstore/src/constants/wallet-mocked-response.ts diff --git a/packages/appstore/src/constants/wallet-mocked-response.ts b/packages/appstore/src/constants/wallet-mocked-response.ts new file mode 100644 index 000000000000..e5c262c85187 --- /dev/null +++ b/packages/appstore/src/constants/wallet-mocked-response.ts @@ -0,0 +1,44 @@ +const wallets = [ + { + name: 'USD Wallet', + currency: 'usd', + icon: 'IcCurrencyUsd', + balance: '10,0000', + type: 'fiat', + state: 'default', + jurisdiction_title: 'svg', + }, + { + name: 'USD Wallet', + currency: 'usd', + icon: 'IcCurrencyUsd', + balance: '10,0000', + type: 'fiat', + state: 'default', + jurisdiction_title: 'svg', + }, + { + name: 'MT5 Derived Demo', + currency: 'usd', + icon: 'IcRebrandingMt5Logo', + wallet_icon: 'IcWalletDerivDemoLight', + balance: '879', + type: 'app', + app: 'mt5', + linked_wallet: 'deriv demo', + state: 'default', + jurisdiction_title: 'svg', + is_demo: true, + }, + { + name: 'Bitcoin Wallet', + currency: 'bitcoin', + icon: 'IcCashierBitcoinLight', + balance: '0.003546', + type: 'payment', + state: 'default', + jurisdiction_title: 'svg', + }, +]; + +export default wallets; diff --git a/packages/appstore/src/modules/traders-hub/index.tsx b/packages/appstore/src/modules/traders-hub/index.tsx index bb3689125751..8b3a64b4fa34 100644 --- a/packages/appstore/src/modules/traders-hub/index.tsx +++ b/packages/appstore/src/modules/traders-hub/index.tsx @@ -8,7 +8,15 @@ import OptionsAndMultipliersListing from 'Components/options-multipliers-listing import ButtonToggleLoader from 'Components/pre-loader/button-toggle-loader'; import { useStores } from 'Stores/index'; import { isDesktop, routes, ContentFlag, isMobile } from '@deriv/shared'; -import { DesktopWrapper, MobileWrapper, ButtonToggle, Div100vhContainer, Text } from '@deriv/components'; +import { + DesktopWrapper, + MobileWrapper, + ButtonToggle, + Div100vhContainer, + Text, + WalletCard, + Icon, +} from '@deriv/components'; import { Localize } from '@deriv/translations'; import classNames from 'classnames'; import WalletsBanner from 'Components/wallets-banner'; @@ -85,10 +93,40 @@ const TradersHub = () => { > {can_show_notify && }
+ Small Card Currency - Default + + Small Card Currency - Active + + {/* Small Card Currency - Added + + Small Card Currency - Disabled + + Small Card Payment + } size='small' /> */} + Normal Card + + large Card + + large Card + + large Card + + large Card - Add + + large Card - Added + +
+
+
+ - diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index f4a9e117c119..855ec644bfd1 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -1,17 +1,81 @@ .wallet-card { + $parent: &; + 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 { + #{$parent}__container { + &:after { + opacity: 1; + } + } + + .wallet-icon { + border: 2px solid var(--text-red); + } + } &--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; + } } - &--medium { + &--normal { width: 20rem; height: 12rem; + @include mobile { width: 16rem; height: 9.6rem; @@ -21,6 +85,7 @@ &--large { width: 24rem; height: 14.4rem; + @include mobile { width: 21.6rem; height: 12.8rem; @@ -29,43 +94,13 @@ &__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; } &__shine { @@ -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; } @@ -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); - } - } - } } diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index 47e99eb5f120..434e92024c3a 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -1,103 +1,137 @@ import React from 'react'; -import classNames from 'classnames'; import { localize } from '@deriv/translations'; import Badge from '../badge'; import Button from '../button'; import Icon from '../icon'; import Text from '../text'; -import { GradientBackground } from '../gradient-background'; -import { WalletIcon } from '../wallet-icon'; import './wallet-card.scss'; +import { isMobile } from '@deriv/shared'; type TWalletCardProps = { balance?: string; currency?: string; - icon: JSX.Element; - badge_text: string; - size?: 'small' | 'medium' | 'large'; - wallet_name?: string; - wallet_state?: 'active' | 'add' | 'added' | 'default' | 'disabled' | 'faded'; + icon: string; + jurisdiction_title: string; + name?: string; + size?: 'small' | 'normal' | 'large'; + state?: 'active' | 'add' | 'added' | 'default' | 'disabled' | 'faded'; + type?: 'fiat' | 'payment' | 'app'; +}; + +const sizes = { + fiat: { + small: 24, + normal: 32, + large: 32, + }, + payment: { + small: { + width: 48, + height: 30, + }, + normal: { + width: isMobile() ? 48 : 64, + height: isMobile() ? 30 : 40, + }, + large: { + width: 64, + height: 40, + }, + }, + app: { + single: { + small: 24, + normal: 24, + large: 24, + }, + linked: { + small: 'normal', + normal: 'normal', + large: 'normal', + }, + }, }; const WalletCard: React.FC> = ({ - balance, - currency, + balance = '10,0000', // just for testing + currency = 'usd', // just for testing icon, - badge_text, - size, - wallet_name, - wallet_state = 'default', -}) => ( -
- {size === 'small' ? ( -
-
- -
- ) : ( - -
-
-
- {icon} - -
-
- {wallet_state !== 'add' && wallet_state !== 'added' ? ( - - - {wallet_name} {localize('Wallet')} - - - {balance} {currency} - - - ) : ( -
+ )} +
+ {state === 'active' && ( +
+
- - )} - {wallet_state === 'active' && ( - - )} -
-); + )} +
+ ); +}; export default WalletCard; diff --git a/packages/components/src/components/wallet-icon/wallet-icon.scss b/packages/components/src/components/wallet-icon/wallet-icon.scss index d4e2202e9719..2bda3858f1f2 100644 --- a/packages/components/src/components/wallet-icon/wallet-icon.scss +++ b/packages/components/src/components/wallet-icon/wallet-icon.scss @@ -5,6 +5,8 @@ justify-content: center; border-radius: $BORDER_RADIUS; overflow: hidden; + width: 100%; + height: 100%; &__background { position: absolute; @@ -12,18 +14,18 @@ height: 100%; } - &--small { - width: 4rem; - height: 2.4rem; - } + // &--small { + // width: 4rem; + // height: 2.4rem; + // } - &--medium { - width: 6.4rem; - height: 4rem; - } + // &--medium { + // width: 6.4rem; + // height: 4rem; + // } - &--large { - width: 12.8rem; - height: 8rem; - } + // &--large { + // width: 12.8rem; + // height: 8rem; + // } } diff --git a/packages/components/src/components/wallet-icon/wallet-icon.tsx b/packages/components/src/components/wallet-icon/wallet-icon.tsx index 433047d23860..5bfd11fcd942 100644 --- a/packages/components/src/components/wallet-icon/wallet-icon.tsx +++ b/packages/components/src/components/wallet-icon/wallet-icon.tsx @@ -4,27 +4,30 @@ import './wallet-icon.scss'; type TWalletIcon = { icon: JSX.Element; - primaryColor: CSSProperties['backgroundColor']; - secondaryColor: CSSProperties['backgroundColor']; - size?: 'small' | 'medium' | 'large'; + primary_color: CSSProperties['backgroundColor']; + secondary_color: CSSProperties['backgroundColor']; + // size?: 'small' | 'normal' | 'medium' | 'large'; + size?: number; + className?: string; }; -const getBlurRadius = (size: string) => { - if (size === 'small') return 16; - if (size === 'medium') return 24; +// const getBlurRadius = (size: string) => { +// if (size === 'small') return 16; +// if (size === 'normal') return 24; +// if (size === 'medium') return 32; - return 48; -}; +// return 48; +// }; -const WalletIcon = ({ icon, primaryColor, secondaryColor, size = 'medium' }: TWalletIcon) => { +const WalletIcon = ({ icon, primary_color, secondary_color, size = 24, className }: TWalletIcon) => { return ( -
+
{icon} diff --git a/packages/core/src/sass/app/_common/components/wallet.scss b/packages/core/src/sass/app/_common/components/wallet.scss index 7891622411ff..4297018d287b 100644 --- a/packages/core/src/sass/app/_common/components/wallet.scss +++ b/packages/core/src/sass/app/_common/components/wallet.scss @@ -1,48 +1,70 @@ -$usdt: ( - 'light': linear-gradient(to right, #a4d7d8, #9fddde, #99e2e3, #92e8e9, #8bedee), - 'dark': linear-gradient(to right, #0d4342, #0e4e4d, #0e5958, #0d6464, #0c7070), -); +// $usdt: ( +// 'light': linear-gradient(to right, #a4d7d8, #9fddde, #99e2e3, #92e8e9, #8bedee), +// 'dark': linear-gradient(to right, #0d4342, #0e4e4d, #0e5958, #0d6464, #0c7070), +// ); + +// $usd-old: ( +// 'light': linear-gradient(to right, #f2bfba, #e8b4c0, #d6acc7, #bca7cc, #9ca3cc), +// 'dark': linear-gradient(to right, #652723, #602033, #531f41, #3d234b, #1e274f), +// ); + +// radial-gradient(100% 4130.74% at 0% 100%, rgba(244, 67, 54, 0.24) 0%, rgba(40, 57, 145, 0.48) 100%) #FFFFFF +// radial-gradient(100% 4130.74% at 0% 100%, rgba(244, 67, 54, 0.4) 0%, rgba(244, 67, 54, 0.16) 50.52%, rgba(40, 57, 145, 0.56) 100%) #FFFFFF $wallet-bg-color: ( 'usd': ( - 'light': linear-gradient(to right, #f2bfba, #e8b4c0, #d6acc7, #bca7cc, #9ca3cc), - 'dark': linear-gradient(to right, #652723, #602033, #531f41, #3d234b, #1e274f), - ), - 'eur': ( - 'light': linear-gradient(to right, #b5bbd9, #e0bcde, #ffc0ca, #ffcfad, #fce99f), - 'dark': linear-gradient(to right, #1c2444, #4f284b, #76313f, #864a2a, #7c6c21), - ), - 'aud': ( - 'light': linear-gradient(to right, #a9e5ba, #b9e8ad, #cdea9f, #e5ea93, #ffe88a), - 'dark': linear-gradient(to right, #214f3e, #2e5937, #44622a, #60681b, #816b0d), - ), - 'btc': ( - 'light': linear-gradient(to right, #fbdbb4, #fbdeb3, #fbe2b1, #fae5b1, #f9e9b0), - 'dark': linear-gradient(to right, #664419, #6d4c19, #735519, #785e19, #7d6819), - ), - 'demo': ( - 'light': linear-gradient(to right, #693227, #6f3129, #75302b, #7a2e2e, #802c31), - 'dark': linear-gradient(to right, #fcd1c8, #fdc7bf, #febdb7, #ffb3b1, #ffa8ac), - ), - 'p2p': ( - 'light': linear-gradient(to right, #fcd1c8, #fdc7bf, #febdb7, #ffb3b1, #ffa8ac), - 'dark': linear-gradient(to right, #693227, #6f3129, #75302b, #7a2e2e, #802c31), - ), - 'eth': ( - 'light': linear-gradient(to right, #c1c2d1, #c2c4d3, #c3c6d5, #c4c8d7, #c5cad9), - 'dark': linear-gradient(to right, #383a48, #3f4251, #474b59, #4f5462, #575d6b), - ), - 'ltc': ( - 'light': linear-gradient(to right, #dfe0e0, #e3e4e4, #e6e8e8, #eaecec, #eef0f0), - 'dark': linear-gradient(to right, #4f5253, #575b5c, #5f6364, #676c6d, #6f7576), - ), - 'usdc': ( - 'light': linear-gradient(to right, #bbd4ed, #aecbef, #a4c1f1, #9db7f1, #99acf1), - 'dark': linear-gradient(to right, #1b3956, #12385f, #0c3667, #10336e, #1b2f74), + 'card': ( + 'light': radial-gradient(100% 4130.74% at 0% 100%, rgba(244, 67, 54, 0.24) 0%, rgba(40, 57, 145, 0.48) 100%) + #ffffff, + 'dark': linear-gradient(to right, #652723, #602033, #531f41, #3d234b, #1e274f), + ), + 'header': ( + 'light': + radial-gradient( + 100% 4130.74% at 0% 100%, + rgba(244, 67, 54, 0.4) 0%, + rgba(244, 67, 54, 0.16) 50.52%, + rgba(40, 57, 145, 0.56) 100% + ) + #ffffff, + 'dark': linear-gradient(to right, #652723, #602033, #531f41, #3d234b, #1e274f), + ), ), - 'usdt': $usdt, - 'eusdt': $usdt, - 'tusdt': $usdt, + // 'eur': ( + // 'light': linear-gradient(to right, #b5bbd9, #e0bcde, #ffc0ca, #ffcfad, #fce99f), + // 'dark': linear-gradient(to right, #1c2444, #4f284b, #76313f, #864a2a, #7c6c21), + // ), + // 'aud': ( + // 'light': linear-gradient(to right, #a9e5ba, #b9e8ad, #cdea9f, #e5ea93, #ffe88a), + // 'dark': linear-gradient(to right, #214f3e, #2e5937, #44622a, #60681b, #816b0d), + // ), + // 'btc': ( + // 'light': linear-gradient(to right, #fbdbb4, #fbdeb3, #fbe2b1, #fae5b1, #f9e9b0), + // 'dark': linear-gradient(to right, #664419, #6d4c19, #735519, #785e19, #7d6819), + // ), + // 'demo': ( + // 'light': linear-gradient(to right, #693227, #6f3129, #75302b, #7a2e2e, #802c31), + // 'dark': linear-gradient(to right, #fcd1c8, #fdc7bf, #febdb7, #ffb3b1, #ffa8ac), + // ), + // 'p2p': ( + // 'light': linear-gradient(to right, #fcd1c8, #fdc7bf, #febdb7, #ffb3b1, #ffa8ac), + // 'dark': linear-gradient(to right, #693227, #6f3129, #75302b, #7a2e2e, #802c31), + // ), + // 'eth': ( + // 'light': linear-gradient(to right, #c1c2d1, #c2c4d3, #c3c6d5, #c4c8d7, #c5cad9), + // 'dark': linear-gradient(to right, #383a48, #3f4251, #474b59, #4f5462, #575d6b), + // ), + // 'ltc': ( + // 'light': linear-gradient(to right, #dfe0e0, #e3e4e4, #e6e8e8, #eaecec, #eef0f0), + // 'dark': linear-gradient(to right, #4f5253, #575b5c, #5f6364, #676c6d, #6f7576), + // ), + // 'usdc': ( + // 'light': linear-gradient(to right, #bbd4ed, #aecbef, #a4c1f1, #9db7f1, #99acf1), + // 'dark': linear-gradient(to right, #1b3956, #12385f, #0c3667, #10336e, #1b2f74), + // ), + // 'usdt': $usdt, + // 'eusdt': $usdt, + // 'tusdt': $usdt,,,, ); /// Wallet background color generator @@ -53,11 +75,13 @@ $wallet-bg-color: ( /// .wallet__usd-bg /// .wallet__usd-bg--dark @mixin wallet-bg-color($currencies-map: $wallet-bg-color) { - @each $currency, $themes in $currencies-map { - @each $theme, $color in $themes { - $t: if($theme == 'dark', '--dark', ''); - .wallet__#{$currency}-bg#{$t} { - background: $color; + @each $currency, $types in $currencies-map { + @each $type, $themes in $types { + @each $theme, $color in $themes { + $t: if($theme == 'dark', '--dark', ''); + .wallet-#{$type}__#{$currency}-bg#{$t} { + background: $color; + } } } } From 4c6d0c3b66b27656279086ac281d9d8ad3df586e Mon Sep 17 00:00:00 2001 From: Hamid Yaftian Date: Fri, 19 May 2023 17:02:31 +0800 Subject: [PATCH 14/22] refactor: enhance-wallet-card --- .../components/wallet-card/wallet-card.tsx | 64 ++++++++++++------- 1 file changed, 42 insertions(+), 22 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index 434e92024c3a..5f3460097bab 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -4,21 +4,23 @@ import Badge from '../badge'; import Button from '../button'; import Icon from '../icon'; import Text from '../text'; -import './wallet-card.scss'; import { isMobile } from '@deriv/shared'; +import { WalletIcon } from '../wallet-icon'; +import './wallet-card.scss'; + +type TSizes = { + // TODO: This type need to be updated + [key: string]: any; +}; type TWalletCardProps = { - balance?: string; - currency?: string; - icon: string; - jurisdiction_title: string; - name?: string; + // TODO: This type should be updated when the response is ready + wallet: any; size?: 'small' | 'normal' | 'large'; state?: 'active' | 'add' | 'added' | 'default' | 'disabled' | 'faded'; - type?: 'fiat' | 'payment' | 'app'; }; -const sizes = { +const sizes: TSizes = { fiat: { small: 24, normal: 32, @@ -53,30 +55,44 @@ const sizes = { }; const WalletCard: React.FC> = ({ - balance = '10,0000', // just for testing - currency = 'usd', // just for testing - icon, - jurisdiction_title = 'svg', // just for testing - name, + wallet, size = 'normal', state = 'default', - type, }) => { const IconComponent = () => { + const is_app_single = wallet.type === 'app' && !wallet.wallet_icon; + const is_app_linked = wallet.type === 'app' && wallet.wallet_icon; + const type_sizes = sizes[wallet.type as keyof TSizes]; + return ( - {type === 'fiat' && } - {type === 'payment' && ( - + {wallet.type === 'fiat' && ( + + )} + {wallet.type === 'payment' && ( + + )} + {wallet.type === 'app' && ( + + {is_app_single && } + {is_app_linked && ( + + )} + )} - {type === 'app' && } ); }; return (
-
+
{size === 'small' && } {size !== 'small' && (
@@ -84,21 +100,25 @@ const WalletCard: React.FC> = ({
- +
{state !== 'add' && state !== 'added' ? ( - {name} {localize('Wallet')} + {wallet.name} {localize('Wallet')} - {balance} {currency} + {wallet.balance} {wallet.currency} ) : ( From 0777233b155b385a00c979c43d86d3fe3ea3d0cd Mon Sep 17 00:00:00 2001 From: Hamid Yaftian Date: Mon, 22 May 2023 12:41:56 +0800 Subject: [PATCH 15/22] feat: enhance-wallet-card --- .../components/wallet-card/wallet-card.scss | 2 +- .../components/wallet-card/wallet-card.tsx | 67 +++---------------- 2 files changed, 9 insertions(+), 60 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index 855ec644bfd1..006782c20f73 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -72,7 +72,7 @@ } } - &--normal { + &--medium { width: 20rem; height: 12rem; diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index 5f3460097bab..a2f60e0c1a4c 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -16,76 +16,25 @@ type TSizes = { type TWalletCardProps = { // TODO: This type should be updated when the response is ready wallet: any; - size?: 'small' | 'normal' | 'large'; + size?: 'small' | 'medium' | 'large'; state?: 'active' | 'add' | 'added' | 'default' | 'disabled' | 'faded'; }; -const sizes: TSizes = { - fiat: { - small: 24, - normal: 32, - large: 32, - }, - payment: { - small: { - width: 48, - height: 30, - }, - normal: { - width: isMobile() ? 48 : 64, - height: isMobile() ? 30 : 40, - }, - large: { - width: 64, - height: 40, - }, - }, - app: { - single: { - small: 24, - normal: 24, - large: 24, - }, - linked: { - small: 'normal', - normal: 'normal', - large: 'normal', - }, - }, -}; - const WalletCard: React.FC> = ({ wallet, - size = 'normal', + size = 'medium', state = 'default', }) => { const IconComponent = () => { - const is_app_single = wallet.type === 'app' && !wallet.wallet_icon; - const is_app_linked = wallet.type === 'app' && wallet.wallet_icon; - const type_sizes = sizes[wallet.type as keyof TSizes]; + let icon_size = wallet.type === 'app' ? 'medium' : 'large'; + if (size === 'small') icon_size = 'medium'; + if (size === 'medium') icon_size = isMobile() && wallet.type === 'crypto' ? 'medium' : 'large'; return ( - {wallet.type === 'fiat' && ( - - )} - {wallet.type === 'payment' && ( - - )} - {wallet.type === 'app' && ( - - {is_app_single && } - {is_app_linked && ( - - )} - - )} + {wallet.type !== 'app' && } + {/* TODO: Update this after app-icon created */} + {wallet.type === 'app' &&
} ); }; From f38efbe798a81ab15ef61f9ebf278ab1eb0b846b Mon Sep 17 00:00:00 2001 From: Hamid Yaftian Date: Mon, 22 May 2023 13:47:53 +0800 Subject: [PATCH 16/22] docs: add comment --- .../src/constants/wallet-mocked-response.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/appstore/src/constants/wallet-mocked-response.ts b/packages/appstore/src/constants/wallet-mocked-response.ts index e5c262c85187..7c502f193227 100644 --- a/packages/appstore/src/constants/wallet-mocked-response.ts +++ b/packages/appstore/src/constants/wallet-mocked-response.ts @@ -1,3 +1,4 @@ +// TODO: Remove this file once we have the real API response const wallets = [ { name: 'USD Wallet', @@ -30,6 +31,19 @@ const wallets = [ jurisdiction_title: 'svg', is_demo: true, }, + { + name: 'MT5 Derived Demo', + currency: 'usd', + icon: 'IcRebrandingMt5Logo', + wallet_icon: null, + balance: '879', + type: 'app', + app: 'mt5', + linked_wallet: null, + state: 'default', + jurisdiction_title: 'svg', + is_demo: true, + }, { name: 'Bitcoin Wallet', currency: 'bitcoin', From 01235ac6ee40f64dca1407e79e68e3fc7dfe8653 Mon Sep 17 00:00:00 2001 From: Hamid Yaftian Date: Mon, 22 May 2023 13:59:39 +0800 Subject: [PATCH 17/22] revert: revert trader-hub home page --- .../src/modules/traders-hub/index.tsx | 42 +------------------ 1 file changed, 2 insertions(+), 40 deletions(-) diff --git a/packages/appstore/src/modules/traders-hub/index.tsx b/packages/appstore/src/modules/traders-hub/index.tsx index 8b3a64b4fa34..bb3689125751 100644 --- a/packages/appstore/src/modules/traders-hub/index.tsx +++ b/packages/appstore/src/modules/traders-hub/index.tsx @@ -8,15 +8,7 @@ import OptionsAndMultipliersListing from 'Components/options-multipliers-listing import ButtonToggleLoader from 'Components/pre-loader/button-toggle-loader'; import { useStores } from 'Stores/index'; import { isDesktop, routes, ContentFlag, isMobile } from '@deriv/shared'; -import { - DesktopWrapper, - MobileWrapper, - ButtonToggle, - Div100vhContainer, - Text, - WalletCard, - Icon, -} from '@deriv/components'; +import { DesktopWrapper, MobileWrapper, ButtonToggle, Div100vhContainer, Text } from '@deriv/components'; import { Localize } from '@deriv/translations'; import classNames from 'classnames'; import WalletsBanner from 'Components/wallets-banner'; @@ -93,40 +85,10 @@ const TradersHub = () => { > {can_show_notify && }
- Small Card Currency - Default - - Small Card Currency - Active - - {/* Small Card Currency - Added - - Small Card Currency - Disabled - - Small Card Payment - } size='small' /> */} - Normal Card - - large Card - - large Card - - large Card - - large Card - Add - - large Card - Added - -
-
-
- + From 1d149c44b4d5c8faf437fafcf3436e5b35ad604c Mon Sep 17 00:00:00 2001 From: Hamid Yaftian Date: Mon, 22 May 2023 16:47:52 +0800 Subject: [PATCH 18/22] refactor: refactor wallet-icon --- .../src/constants/wallet-mocked-response.ts | 56 ++++----- .../components/wallet-card/wallet-card.tsx | 4 +- .../components/wallet-icon/wallet-icon.scss | 30 ++--- .../components/wallet-icon/wallet-icon.tsx | 97 +++++++++++---- .../sass/app/_common/components/wallet.scss | 116 +++++++----------- 5 files changed, 158 insertions(+), 145 deletions(-) diff --git a/packages/appstore/src/constants/wallet-mocked-response.ts b/packages/appstore/src/constants/wallet-mocked-response.ts index 7c502f193227..4db2b95f672f 100644 --- a/packages/appstore/src/constants/wallet-mocked-response.ts +++ b/packages/appstore/src/constants/wallet-mocked-response.ts @@ -18,38 +18,38 @@ const wallets = [ state: 'default', jurisdiction_title: 'svg', }, - { - name: 'MT5 Derived Demo', - currency: 'usd', - icon: 'IcRebrandingMt5Logo', - wallet_icon: 'IcWalletDerivDemoLight', - balance: '879', - 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', - type: 'app', - app: 'mt5', - linked_wallet: null, - state: 'default', - jurisdiction_title: 'svg', - is_demo: true, - }, + // { + // name: 'MT5 Derived Demo', + // currency: 'usd', + // icon: 'IcRebrandingMt5Logo', + // wallet_icon: 'IcWalletDerivDemoLight', + // balance: '879', + // 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', + // type: 'app', + // app: 'mt5', + // linked_wallet: null, + // state: 'default', + // jurisdiction_title: 'svg', + // is_demo: true, + // }, { name: 'Bitcoin Wallet', - currency: 'bitcoin', + currency: 'BTC', icon: 'IcCashierBitcoinLight', balance: '0.003546', - type: 'payment', + type: 'crypto', state: 'default', jurisdiction_title: 'svg', }, diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index a2f60e0c1a4c..b2b4464e5deb 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -32,7 +32,9 @@ const WalletCard: React.FC> = ({ return ( - {wallet.type !== 'app' && } + {wallet.type !== 'app' && ( + + )} {/* TODO: Update this after app-icon created */} {wallet.type === 'app' &&
} diff --git a/packages/components/src/components/wallet-icon/wallet-icon.scss b/packages/components/src/components/wallet-icon/wallet-icon.scss index 2bda3858f1f2..3be14723e81c 100644 --- a/packages/components/src/components/wallet-icon/wallet-icon.scss +++ b/packages/components/src/components/wallet-icon/wallet-icon.scss @@ -5,27 +5,19 @@ justify-content: center; border-radius: $BORDER_RADIUS; overflow: hidden; - width: 100%; - height: 100%; - &__background { - position: absolute; - width: 100%; - height: 100%; + &--small { + width: 4rem; + height: 2.4rem; } - // &--small { - // width: 4rem; - // height: 2.4rem; - // } - - // &--medium { - // width: 6.4rem; - // height: 4rem; - // } + &--medium { + width: 6.4rem; + height: 4rem; + } - // &--large { - // width: 12.8rem; - // height: 8rem; - // } + &--large { + width: 12.8rem; + height: 8rem; + } } diff --git a/packages/components/src/components/wallet-icon/wallet-icon.tsx b/packages/components/src/components/wallet-icon/wallet-icon.tsx index 5bfd11fcd942..4e19822e4a2c 100644 --- a/packages/components/src/components/wallet-icon/wallet-icon.tsx +++ b/packages/components/src/components/wallet-icon/wallet-icon.tsx @@ -1,37 +1,80 @@ -import React, { CSSProperties } from 'react'; -import { GradientBackgroundTwoPoint } from '../gradient-background-two-point'; +import React from 'react'; +import classNames from 'classnames'; +import { isCryptocurrency } from '@deriv/shared'; +import Icon from '../icon'; import './wallet-icon.scss'; -type TWalletIcon = { - icon: JSX.Element; - primary_color: CSSProperties['backgroundColor']; - secondary_color: CSSProperties['backgroundColor']; - // size?: 'small' | 'normal' | 'medium' | 'large'; - size?: number; - className?: string; +type TWalletIconProps = { + currency: string; + has_bg?: boolean; + icon: string; + size: string; + type: string; }; -// const getBlurRadius = (size: string) => { -// if (size === 'small') return 16; -// if (size === 'normal') return 24; -// if (size === 'medium') return 32; +const sizes: any = { + fiat: { + xsmall: 12, + small: 16, + medium: 24, + large: 32, + xlarge: 48, + }, + crypto: { + xxsmall: { + width: 26, + height: 16, + }, + xsmall: { + width: 32, + height: 20, + }, + small: { + width: 40, + height: 24, + }, + medium: { + width: 48, + height: 30, + }, + large: { + width: 64, + height: 40, + }, + xlarge: { + width: 80, + height: 48, + }, + xxlarge: { + width: 96, + height: 60, + }, + }, +}; + +const WalletIcon = ({ currency, has_bg = false, icon, size = 'medium', type = 'fiat' }: TWalletIconProps) => { + const is_fiat = !isCryptocurrency(currency || '') && currency !== 'USDT'; + + /** + * Icon sizes are different when using wallet-icon with background, as a card + */ + let icon_size = size; + if (has_bg) { + if (size === 'small' && !is_fiat) icon_size = 'xxsmall'; + if (size === 'medium' && !is_fiat) icon_size = 'small'; + if (size === 'large') icon_size = 'xlarge'; + } -// return 48; -// }; + if (!icon || !currency) { + return null; + } -const WalletIcon = ({ icon, primary_color, secondary_color, size = 24, className }: TWalletIcon) => { return ( -
-
- - {icon} - -
+
+ {is_fiat && } + {!is_fiat && ( + + )}
); }; diff --git a/packages/core/src/sass/app/_common/components/wallet.scss b/packages/core/src/sass/app/_common/components/wallet.scss index 4297018d287b..7891622411ff 100644 --- a/packages/core/src/sass/app/_common/components/wallet.scss +++ b/packages/core/src/sass/app/_common/components/wallet.scss @@ -1,70 +1,48 @@ -// $usdt: ( -// 'light': linear-gradient(to right, #a4d7d8, #9fddde, #99e2e3, #92e8e9, #8bedee), -// 'dark': linear-gradient(to right, #0d4342, #0e4e4d, #0e5958, #0d6464, #0c7070), -// ); - -// $usd-old: ( -// 'light': linear-gradient(to right, #f2bfba, #e8b4c0, #d6acc7, #bca7cc, #9ca3cc), -// 'dark': linear-gradient(to right, #652723, #602033, #531f41, #3d234b, #1e274f), -// ); - -// radial-gradient(100% 4130.74% at 0% 100%, rgba(244, 67, 54, 0.24) 0%, rgba(40, 57, 145, 0.48) 100%) #FFFFFF -// radial-gradient(100% 4130.74% at 0% 100%, rgba(244, 67, 54, 0.4) 0%, rgba(244, 67, 54, 0.16) 50.52%, rgba(40, 57, 145, 0.56) 100%) #FFFFFF +$usdt: ( + 'light': linear-gradient(to right, #a4d7d8, #9fddde, #99e2e3, #92e8e9, #8bedee), + 'dark': linear-gradient(to right, #0d4342, #0e4e4d, #0e5958, #0d6464, #0c7070), +); $wallet-bg-color: ( 'usd': ( - 'card': ( - 'light': radial-gradient(100% 4130.74% at 0% 100%, rgba(244, 67, 54, 0.24) 0%, rgba(40, 57, 145, 0.48) 100%) - #ffffff, - 'dark': linear-gradient(to right, #652723, #602033, #531f41, #3d234b, #1e274f), - ), - 'header': ( - 'light': - radial-gradient( - 100% 4130.74% at 0% 100%, - rgba(244, 67, 54, 0.4) 0%, - rgba(244, 67, 54, 0.16) 50.52%, - rgba(40, 57, 145, 0.56) 100% - ) - #ffffff, - 'dark': linear-gradient(to right, #652723, #602033, #531f41, #3d234b, #1e274f), - ), + 'light': linear-gradient(to right, #f2bfba, #e8b4c0, #d6acc7, #bca7cc, #9ca3cc), + 'dark': linear-gradient(to right, #652723, #602033, #531f41, #3d234b, #1e274f), + ), + 'eur': ( + 'light': linear-gradient(to right, #b5bbd9, #e0bcde, #ffc0ca, #ffcfad, #fce99f), + 'dark': linear-gradient(to right, #1c2444, #4f284b, #76313f, #864a2a, #7c6c21), + ), + 'aud': ( + 'light': linear-gradient(to right, #a9e5ba, #b9e8ad, #cdea9f, #e5ea93, #ffe88a), + 'dark': linear-gradient(to right, #214f3e, #2e5937, #44622a, #60681b, #816b0d), + ), + 'btc': ( + 'light': linear-gradient(to right, #fbdbb4, #fbdeb3, #fbe2b1, #fae5b1, #f9e9b0), + 'dark': linear-gradient(to right, #664419, #6d4c19, #735519, #785e19, #7d6819), + ), + 'demo': ( + 'light': linear-gradient(to right, #693227, #6f3129, #75302b, #7a2e2e, #802c31), + 'dark': linear-gradient(to right, #fcd1c8, #fdc7bf, #febdb7, #ffb3b1, #ffa8ac), + ), + 'p2p': ( + 'light': linear-gradient(to right, #fcd1c8, #fdc7bf, #febdb7, #ffb3b1, #ffa8ac), + 'dark': linear-gradient(to right, #693227, #6f3129, #75302b, #7a2e2e, #802c31), + ), + 'eth': ( + 'light': linear-gradient(to right, #c1c2d1, #c2c4d3, #c3c6d5, #c4c8d7, #c5cad9), + 'dark': linear-gradient(to right, #383a48, #3f4251, #474b59, #4f5462, #575d6b), + ), + 'ltc': ( + 'light': linear-gradient(to right, #dfe0e0, #e3e4e4, #e6e8e8, #eaecec, #eef0f0), + 'dark': linear-gradient(to right, #4f5253, #575b5c, #5f6364, #676c6d, #6f7576), + ), + 'usdc': ( + 'light': linear-gradient(to right, #bbd4ed, #aecbef, #a4c1f1, #9db7f1, #99acf1), + 'dark': linear-gradient(to right, #1b3956, #12385f, #0c3667, #10336e, #1b2f74), ), - // 'eur': ( - // 'light': linear-gradient(to right, #b5bbd9, #e0bcde, #ffc0ca, #ffcfad, #fce99f), - // 'dark': linear-gradient(to right, #1c2444, #4f284b, #76313f, #864a2a, #7c6c21), - // ), - // 'aud': ( - // 'light': linear-gradient(to right, #a9e5ba, #b9e8ad, #cdea9f, #e5ea93, #ffe88a), - // 'dark': linear-gradient(to right, #214f3e, #2e5937, #44622a, #60681b, #816b0d), - // ), - // 'btc': ( - // 'light': linear-gradient(to right, #fbdbb4, #fbdeb3, #fbe2b1, #fae5b1, #f9e9b0), - // 'dark': linear-gradient(to right, #664419, #6d4c19, #735519, #785e19, #7d6819), - // ), - // 'demo': ( - // 'light': linear-gradient(to right, #693227, #6f3129, #75302b, #7a2e2e, #802c31), - // 'dark': linear-gradient(to right, #fcd1c8, #fdc7bf, #febdb7, #ffb3b1, #ffa8ac), - // ), - // 'p2p': ( - // 'light': linear-gradient(to right, #fcd1c8, #fdc7bf, #febdb7, #ffb3b1, #ffa8ac), - // 'dark': linear-gradient(to right, #693227, #6f3129, #75302b, #7a2e2e, #802c31), - // ), - // 'eth': ( - // 'light': linear-gradient(to right, #c1c2d1, #c2c4d3, #c3c6d5, #c4c8d7, #c5cad9), - // 'dark': linear-gradient(to right, #383a48, #3f4251, #474b59, #4f5462, #575d6b), - // ), - // 'ltc': ( - // 'light': linear-gradient(to right, #dfe0e0, #e3e4e4, #e6e8e8, #eaecec, #eef0f0), - // 'dark': linear-gradient(to right, #4f5253, #575b5c, #5f6364, #676c6d, #6f7576), - // ), - // 'usdc': ( - // 'light': linear-gradient(to right, #bbd4ed, #aecbef, #a4c1f1, #9db7f1, #99acf1), - // 'dark': linear-gradient(to right, #1b3956, #12385f, #0c3667, #10336e, #1b2f74), - // ), - // 'usdt': $usdt, - // 'eusdt': $usdt, - // 'tusdt': $usdt,,,, + 'usdt': $usdt, + 'eusdt': $usdt, + 'tusdt': $usdt, ); /// Wallet background color generator @@ -75,13 +53,11 @@ $wallet-bg-color: ( /// .wallet__usd-bg /// .wallet__usd-bg--dark @mixin wallet-bg-color($currencies-map: $wallet-bg-color) { - @each $currency, $types in $currencies-map { - @each $type, $themes in $types { - @each $theme, $color in $themes { - $t: if($theme == 'dark', '--dark', ''); - .wallet-#{$type}__#{$currency}-bg#{$t} { - background: $color; - } + @each $currency, $themes in $currencies-map { + @each $theme, $color in $themes { + $t: if($theme == 'dark', '--dark', ''); + .wallet__#{$currency}-bg#{$t} { + background: $color; } } } From 434fbd3a51d2e683218abe1a1fb611af6d753fca Mon Sep 17 00:00:00 2001 From: Hamid Yaftian Date: Mon, 22 May 2023 23:36:35 +0800 Subject: [PATCH 19/22] fix: resolve comments --- .../src/constants/wallet-mocked-response.ts | 10 +++++----- .../components/wallet-card/wallet-card.scss | 8 ++++---- .../components/wallet-card/wallet-card.tsx | 20 +++++++++---------- .../components/wallet-icon/wallet-icon.tsx | 17 +++++++--------- 4 files changed, 26 insertions(+), 29 deletions(-) diff --git a/packages/appstore/src/constants/wallet-mocked-response.ts b/packages/appstore/src/constants/wallet-mocked-response.ts index 4db2b95f672f..85eecfb6ba87 100644 --- a/packages/appstore/src/constants/wallet-mocked-response.ts +++ b/packages/appstore/src/constants/wallet-mocked-response.ts @@ -5,7 +5,7 @@ const wallets = [ currency: 'usd', icon: 'IcCurrencyUsd', balance: '10,0000', - type: 'fiat', + icon_type: 'fiat', state: 'default', jurisdiction_title: 'svg', }, @@ -14,7 +14,7 @@ const wallets = [ currency: 'usd', icon: 'IcCurrencyUsd', balance: '10,0000', - type: 'fiat', + icon_type: 'fiat', state: 'default', jurisdiction_title: 'svg', }, @@ -24,7 +24,7 @@ const wallets = [ // icon: 'IcRebrandingMt5Logo', // wallet_icon: 'IcWalletDerivDemoLight', // balance: '879', - // type: 'app', + // icon_type: 'app', // app: 'mt5', // linked_wallet: 'deriv demo', // state: 'default', @@ -37,7 +37,7 @@ const wallets = [ // icon: 'IcRebrandingMt5Logo', // wallet_icon: null, // balance: '879', - // type: 'app', + // icon_type: 'app', // app: 'mt5', // linked_wallet: null, // state: 'default', @@ -49,7 +49,7 @@ const wallets = [ currency: 'BTC', icon: 'IcCashierBitcoinLight', balance: '0.003546', - type: 'crypto', + icon_type: 'crypto', state: 'default', jurisdiction_title: 'svg', }, diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index 006782c20f73..c94294097eba 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -41,15 +41,13 @@ } &--active { + border: 2px solid var(--text-red); + #{$parent}__container { &:after { opacity: 1; } } - - .wallet-icon { - border: 2px solid var(--text-red); - } } &--small { @@ -69,6 +67,7 @@ transform: translate(-1.2rem, -0.4rem); width: unset; height: unset; + z-index: 1; } } @@ -101,6 +100,7 @@ display: flex; justify-content: center; align-items: center; + z-index: 1; } &__shine { diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index b2b4464e5deb..f02912fcd5af 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -8,11 +8,6 @@ import { isMobile } from '@deriv/shared'; import { WalletIcon } from '../wallet-icon'; import './wallet-card.scss'; -type TSizes = { - // TODO: This type need to be updated - [key: string]: any; -}; - type TWalletCardProps = { // TODO: This type should be updated when the response is ready wallet: any; @@ -26,17 +21,22 @@ const WalletCard: React.FC> = ({ state = 'default', }) => { const IconComponent = () => { - let icon_size = wallet.type === 'app' ? 'medium' : 'large'; + let icon_size = wallet.icon_type === 'app' ? 'medium' : 'large'; if (size === 'small') icon_size = 'medium'; - if (size === 'medium') icon_size = isMobile() && wallet.type === 'crypto' ? 'medium' : 'large'; + if (size === 'medium') icon_size = isMobile() && wallet.icon_type === 'crypto' ? 'medium' : 'large'; return ( - {wallet.type !== 'app' && ( - + {wallet.icon_type !== 'app' && ( + )} {/* TODO: Update this after app-icon created */} - {wallet.type === 'app' &&
} + {wallet.icon_type === 'app' &&
} ); }; diff --git a/packages/components/src/components/wallet-icon/wallet-icon.tsx b/packages/components/src/components/wallet-icon/wallet-icon.tsx index 4e19822e4a2c..d05986a1d402 100644 --- a/packages/components/src/components/wallet-icon/wallet-icon.tsx +++ b/packages/components/src/components/wallet-icon/wallet-icon.tsx @@ -1,6 +1,5 @@ import React from 'react'; import classNames from 'classnames'; -import { isCryptocurrency } from '@deriv/shared'; import Icon from '../icon'; import './wallet-icon.scss'; @@ -9,7 +8,7 @@ type TWalletIconProps = { has_bg?: boolean; icon: string; size: string; - type: string; + type: 'fiat' | 'crypto'; }; const sizes: any = { @@ -52,16 +51,14 @@ const sizes: any = { }, }; -const WalletIcon = ({ currency, has_bg = false, icon, size = 'medium', type = 'fiat' }: TWalletIconProps) => { - const is_fiat = !isCryptocurrency(currency || '') && currency !== 'USDT'; - +const WalletIcon = ({ currency, has_bg = false, icon, size = 'medium', type }: TWalletIconProps) => { /** - * Icon sizes are different when using wallet-icon with background, as a card + * The sizes of icons vary when utilizing the wallet-icon with a background, such as a card. */ let icon_size = size; if (has_bg) { - if (size === 'small' && !is_fiat) icon_size = 'xxsmall'; - if (size === 'medium' && !is_fiat) icon_size = 'small'; + if (size === 'small' && type === 'crypto') icon_size = 'xxsmall'; + if (size === 'medium' && type === 'crypto') icon_size = 'small'; if (size === 'large') icon_size = 'xlarge'; } @@ -71,8 +68,8 @@ const WalletIcon = ({ currency, has_bg = false, icon, size = 'medium', type = 'f return (
- {is_fiat && } - {!is_fiat && ( + {type === 'fiat' && } + {type === 'crypto' && ( )}
From ace17a0361174648d814466a70a41e53311227ec Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 23 May 2023 10:57:41 +0400 Subject: [PATCH 20/22] fix: fixed some styling --- .../components/wallet-card/wallet-card.scss | 53 ++++++++++--------- .../components/wallet-card/wallet-card.tsx | 8 +-- 2 files changed, 34 insertions(+), 27 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index c94294097eba..611426e07643 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -1,6 +1,4 @@ .wallet-card { - $parent: &; - position: relative; border-radius: $BORDER_RADIUS; @@ -26,6 +24,16 @@ opacity: 1; } } + + &--active:after { + opacity: 1; + } + + &--small { + display: flex; + align-items: center; + justify-content: center; + } } &__content { @@ -38,42 +46,28 @@ justify-content: space-between; align-items: center; padding: 1.6rem; + + &--medium { + @include mobile { + padding: 0.8rem; + } + } } &--active { border: 2px solid var(--text-red); - - #{$parent}__container { - &:after { - opacity: 1; - } - } } &--small { width: 6.4rem; height: 4rem; - - #{$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; - } + border-radius: $BORDER_RADIUS; } &--medium { width: 20rem; height: 12rem; + border-radius: $BORDER_RADIUS_2; @include mobile { width: 16rem; @@ -84,6 +78,7 @@ &--large { width: 24rem; height: 14.4rem; + border-radius: $BORDER_RADIUS_2; @include mobile { width: 21.6rem; @@ -101,6 +96,16 @@ 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 { diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index f02912fcd5af..a94d2d5f43b3 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -43,10 +43,12 @@ const WalletCard: React.FC> = ({ return (
-
+
{size === 'small' && } {size !== 'small' && ( -
+
@@ -93,7 +95,7 @@ const WalletCard: React.FC> = ({ )}
{state === 'active' && ( -
+
Date: Tue, 23 May 2023 12:04:18 +0400 Subject: [PATCH 21/22] refactor: removed parent hack from scss and fixed all the states --- .../components/wallet-card/wallet-card.scss | 40 ++++++++++--------- .../components/wallet-card/wallet-card.tsx | 6 +++ 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/components/src/components/wallet-card/wallet-card.scss b/packages/components/src/components/wallet-card/wallet-card.scss index 611426e07643..b8e5d1cbbca0 100644 --- a/packages/components/src/components/wallet-card/wallet-card.scss +++ b/packages/components/src/components/wallet-card/wallet-card.scss @@ -7,32 +7,36 @@ width: 100%; height: 100%; - &:after { - background: var(--wallets-card-active-gradient-background); - border-radius: inherit; - content: ''; + &--small { + display: flex; + align-items: center; + justify-content: center; + } + + &-fade { + position: absolute; + width: 100%; height: 100%; + top: 0; left: 0; opacity: 0; - position: absolute; - top: 0; - width: 100%; - } + background: var(--wallets-card-active-gradient-background); + border-radius: inherit; - &:hover { - &:after { + &--active { opacity: 1; } } - &--active:after { - opacity: 1; - } - - &--small { - display: flex; - align-items: center; - justify-content: center; + &:hover & { + &-fade { + opacity: 1; + &--disabled, + &--faded, + &--added { + opacity: 0; + } + } } } diff --git a/packages/components/src/components/wallet-card/wallet-card.tsx b/packages/components/src/components/wallet-card/wallet-card.tsx index a94d2d5f43b3..f20acdf39fc3 100644 --- a/packages/components/src/components/wallet-card/wallet-card.tsx +++ b/packages/components/src/components/wallet-card/wallet-card.tsx @@ -7,6 +7,7 @@ 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 @@ -46,6 +47,11 @@ const WalletCard: React.FC> = ({
+
{size === 'small' && } {size !== 'small' && (
From e2e19e0de300a5c7e69d6096fbbb4b5377ada8c5 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Tue, 23 May 2023 12:07:14 +0400 Subject: [PATCH 22/22] chore: removed mock response file --- .../src/constants/wallet-mocked-response.ts | 58 ------------------- 1 file changed, 58 deletions(-) delete mode 100644 packages/appstore/src/constants/wallet-mocked-response.ts diff --git a/packages/appstore/src/constants/wallet-mocked-response.ts b/packages/appstore/src/constants/wallet-mocked-response.ts deleted file mode 100644 index 85eecfb6ba87..000000000000 --- a/packages/appstore/src/constants/wallet-mocked-response.ts +++ /dev/null @@ -1,58 +0,0 @@ -// TODO: Remove this file once we have the real API response -const wallets = [ - { - 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;