feat: add app-icon and update wallet-icon

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

@@ -0,0 +1,43 @@
+// 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',
+        state: 'default',
+        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/app-linked-with-wallet-icon/app-linked-with-wallet-icon.scss

@@ -0,0 +1,35 @@
+.app-icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $BORDER_RADIUS;
+    overflow: hidden;
+
+    &__top-icon {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    &__bottom-icon {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
+
+    &--small {
+        width: 4rem;
+        height: 2.4rem;
+    }
+
+    &--medium {
+        width: 6.4rem;
+        height: 4rem;
+    }
+
+    &--large {
+        width: 12.8rem;
+        height: 8rem;
+    }
+}

packages/components/src/components/app-linked-with-wallet-icon/app-linked-with-wallet-icon.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { WalletIcon } from '../wallet-icon';
+import './app-linked-with-wallet-icon.scss';
+
+type TAppIconProps = {
+    currency: string;
+    has_bg?: boolean;
+    app_icon: string;
+    wallet_icon: string;
+    size?: 'small' | 'medium' | 'large';
+    type: 'fiat' | 'crypto'; // Type of the wallet_icon
+};
+
+/**
+ * Use the WalletIcon sizes
+ */
+const sizes = {
+    top: {
+        small: 'small',
+        medium: 'medium',
+        large: 'xlarge',
+    },
+    bottom: {
+        small: 'xsmall',
+        medium: 'small',
+        large: 'large',
+    },
+} as const;
+
+const AppLinkedWithWalletIcon = ({ currency, app_icon, wallet_icon, size = 'medium', type }: TAppIconProps) => {
+    if (!app_icon || !wallet_icon || !currency) {
+        return null;
+    }
+
+    return (
+        <div className={`app-icon app-icon--${size}`}>
+            {/* Top */}
+            <div className='app-icon__top-icon'>
+                <WalletIcon icon={app_icon} size={sizes.top[size]} type={type} />
+            </div>
+
+            {/* Bottom */}
+            <div className='app-icon__bottom-icon'>
+                <WalletIcon icon={wallet_icon} currency={currency} type={type} size={sizes.bottom[size]} has_bg />
+            </div>
+        </div>
+    );
+};
+
+export default AppLinkedWithWalletIcon;

packages/components/src/components/app-linked-with-wallet-icon/index.ts

@@ -0,0 +1,3 @@
+import AppLinkedWithWalletIcon from './app-linked-with-wallet-icon';
+
+export { AppLinkedWithWalletIcon };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { localize } from '@deriv/translations';
 import Badge from '../badge';
 import Button from '../button';
@@ -7,7 +8,6 @@ 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
@@ -22,24 +22,11 @@ const WalletCard: React.FC<React.PropsWithChildren<TWalletCardProps>> = ({
     state = 'default',
 }) => {
     const IconComponent = () => {
-        let icon_size = wallet.icon_type === 'app' ? 'medium' : 'large';
+        let icon_size: React.ComponentProps<typeof WalletIcon>['size'] = '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 <WalletIcon type={wallet.icon_type} icon={wallet.icon} size={icon_size} />;
     };
 
     return (

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

@@ -6,6 +6,11 @@
     border-radius: $BORDER_RADIUS;
     overflow: hidden;
 
+    &--xsmall {
+        width: 2.4rem;
+        height: 1.4rem;
+    }
+
     &--small {
         width: 4rem;
         height: 2.4rem;
@@ -17,6 +22,11 @@
     }
 
     &--large {
+        width: 8.4rem;
+        height: 5.2rem;
+    }
+
+    &--xlarge {
         width: 12.8rem;
         height: 8rem;
     }

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

@@ -3,15 +3,17 @@ import classNames from 'classnames';
 import Icon from '../icon';
 import './wallet-icon.scss';
 
+type TWalletIconSizes = keyof (typeof sizes)['fiat' | 'crypto'];
+
 type TWalletIconProps = {
-    currency: string;
-    has_bg?: boolean;
+    currency?: string;
     icon: string;
-    size: string;
-    type: 'fiat' | 'crypto';
+    size?: TWalletIconSizes;
+    type?: 'fiat' | 'crypto' | 'app';
+    has_bg?: boolean;
 };
 
-const sizes: any = {
+const sizes = {
     fiat: {
         xsmall: 12,
         small: 16,
@@ -20,17 +22,13 @@ const sizes: any = {
         xlarge: 48,
     },
     crypto: {
-        xxsmall: {
-            width: 26,
-            height: 16,
-        },
         xsmall: {
-            width: 32,
-            height: 20,
+            width: 20,
+            height: 12,
         },
         small: {
-            width: 40,
-            height: 24,
+            width: 32,
+            height: 20,
         },
         medium: {
             width: 48,
@@ -41,36 +39,27 @@ const sizes: any = {
             height: 40,
         },
         xlarge: {
-            width: 80,
-            height: 48,
-        },
-        xxlarge: {
             width: 96,
             height: 60,
         },
     },
-};
-
-const WalletIcon = ({ currency, has_bg = false, icon, size = 'medium', type }: TWalletIconProps) => {
-    /**
-     * 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' && type === 'crypto') icon_size = 'xxsmall';
-        if (size === 'medium' && type === 'crypto') icon_size = 'small';
-        if (size === 'large') icon_size = 'xlarge';
-    }
+} as const;
 
-    if (!icon || !currency) {
+const WalletIcon = ({ currency, icon, size = 'medium', type, has_bg }: TWalletIconProps) => {
+    if (!icon) {
         return null;
     }
 
     return (
-        <div className={classNames('wallet-icon', { [`wallet-icon--${size} wallet-card__${currency}-bg`]: !!has_bg })}>
-            {type === 'fiat' && <Icon icon={icon} size={sizes[type][icon_size]} />}
+        <div
+            className={classNames('wallet-icon', {
+                [`wallet-icon--${size} wallet-card__${currency?.toLowerCase()}-bg`]:
+                    (!!currency && type !== 'app') || has_bg,
+            })}
+        >
+            {(type === 'fiat' || type === 'app') && <Icon icon={icon} size={sizes.fiat[size]} />}
             {type === 'crypto' && (
-                <Icon icon={icon} width={sizes[type][icon_size].width} height={sizes[type][icon_size].height} />
+                <Icon icon={icon} width={sizes.crypto[size].width} height={sizes.crypto[size].height} />
             )}
         </div>
     );

packages/components/src/index.js

@@ -116,4 +116,5 @@ export * from './components/watermark';
 export { default as Wizard } from './components/wizard';
 export * from './components/wallet-card';
 export * from './components/wallet-icon';
+export * from './components/app-linked-with-wallet-icon';
 export * from './hooks';