Aum/wall 278/create wallet card component

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;

packages/components/src/components/wallet-card/index.ts

@@ -0,0 +1,3 @@
+import WalletCard from './wallet-card';
+
+export { WalletCard };

packages/components/src/components/wallet-card/wallet-card.scss

@@ -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;
+    }
+}

packages/components/src/components/wallet-card/wallet-card.tsx

@@ -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;

packages/components/src/components/wallet-icon/wallet-icon.scss

@@ -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;