Aum/WALL-562/create-wallet-icon-component (binary-com#8501)

* feat: created wallet-icon component

* feat: integrated wallet-icon with gradient-background-wallet-icon

* fix: changed the color positioning for icon gradient

* chore: replaced currency prop with icon

* chore: removed wallet-small and wallet-icon made by @hamid-deriv

* chore: removed dark prop for wallet-icon

* refactor: made gradient-background-wallet-icon dynamic and refactored wallet-icon

* fix: made changes from comments

* chore: renamed gradient-background component to two-point

* chore: removed unused code

packages/components/src/components/gradient-background-two-point/gradient-background-two-point.scss

@@ -0,0 +1,25 @@
+.gradient-background-two-point {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 50%;
+    overflow: hidden;
+
+    &__primary {
+        height: 100%;
+        aspect-ratio: 1;
+    }
+
+    &__secondary {
+        height: 120%;
+        aspect-ratio: 1;
+    }
+
+    &__children {
+        position: absolute;
+    }
+}

packages/components/src/components/gradient-background-two-point/gradient-background-two-point.tsx

@@ -0,0 +1,31 @@
+import React, { CSSProperties } from 'react';
+import './gradient-background-two-point.scss';
+
+type TGradientBackgroundTwoPoint = {
+    blurRadius?: number;
+    backgroundColor: CSSProperties['backgroundColor'];
+    primaryColor: CSSProperties['background'];
+    secondaryColor: CSSProperties['background'];
+};
+
+const GradientBackgroundTwoPoint: React.FC<React.PropsWithChildren<TGradientBackgroundTwoPoint>> = ({
+    children,
+    blurRadius = 48,
+    backgroundColor,
+    primaryColor,
+    secondaryColor,
+}) => (
+    <div className='gradient-background-two-point' style={{ backgroundColor }}>
+        <div
+            className='gradient-background-two-point__primary'
+            style={{ filter: `blur(${blurRadius}px)`, background: primaryColor }}
+        />
+        <div
+            className='gradient-background-two-point__secondary'
+            style={{ filter: `blur(${blurRadius}px)`, background: secondaryColor }}
+        />
+        {children && <div className='gradient-background-two-point__children'>{children}</div>}
+    </div>
+);
+
+export default GradientBackgroundTwoPoint;

packages/components/src/components/gradient-background-two-point/index.ts

@@ -0,0 +1,3 @@
+import GradientBackgroundTwoPoint from './gradient-background-two-point';
+
+export { GradientBackgroundTwoPoint };

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

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

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

@@ -0,0 +1,33 @@
+.wallet-icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $BORDER_RADIUS;
+    overflow: hidden;
+
+    &__background {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+
+    &__icon {
+        z-index: 1;
+    }
+
+    &--small {
+        width: 4rem;
+        height: 2.4rem;
+    }
+
+    &--medium {
+        width: 6.4rem;
+        height: 4rem;
+    }
+
+    &--large {
+        width: 12.8rem;
+        height: 8rem;
+    }
+}

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

@@ -0,0 +1,37 @@
+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;
+    primaryColor: CSSProperties['backgroundColor'];
+    secondaryColor: CSSProperties['backgroundColor'];
+    size?: 'small' | 'medium' | 'large';
+};
+
+const getBlurRadius = (size: string) => {
+    if (size === 'small') return 16;
+    if (size === 'medium') return 24;
+
+    return 48;
+};
+
+const WalletIcon = ({ icon, iconSize = 24, primaryColor, secondaryColor, size = 'medium' }: TWalletIcon) => {
+    return (
+        <div className={`wallet-icon wallet-icon--${size}`}>
+            <div className='wallet-icon__background'>
+                <GradientBackgroundTwoPoint
+                    blurRadius={getBlurRadius(size)}
+                    backgroundColor='var(--general-main-2)'
+                    primaryColor={primaryColor}
+                    secondaryColor={secondaryColor}
+                />
+            </div>
+            <Icon icon={icon} size={iconSize} className='wallet-icon__icon' />
+        </div>
+    );
+};
+
+export default WalletIcon;

packages/components/src/index.js

@@ -51,6 +51,7 @@ export { default as FormSubmitButton } from './components/form-submit-button';
 export { default as FormSubmitErrorMessage } from './components/form-submit-error-message';
 export { default as FormCancelButton } from './components/form-cancel-button';
 export * from './components/gradient-background';
+export * from './components/gradient-background-two-point';
 export { default as HintBox } from './components/hint-box';
 export { default as HorizontalSwipe } from './components/horizontal-swipe';
 export { default as Icon } from './components/icon';
@@ -112,5 +113,5 @@ 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';
+export * from './components/wallet-icon';
 export * from './hooks';