Merge pull request #1 from hamid-deriv/hamid/wallet-card-forked

hamid/enhance-wallet-card

packages/appstore/src/constants/wallet-mocked-response.ts

@@ -0,0 +1,58 @@
+// 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;

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

@@ -1,17 +1,80 @@
 .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 {
+        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;
@@ -21,6 +84,7 @@
     &--large {
         width: 24rem;
         height: 14.4rem;
+
         @include mobile {
             width: 21.6rem;
             height: 12.8rem;
@@ -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 {
@@ -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);
-            }
-        }
-    }
 }