2022-01-13 05:47:12 +01:00
|
|
|
import { CSSProperties, FC, useMemo } from 'react';
|
2022-03-03 18:03:21 +01:00
|
|
|
import { GetConfiguration } from '../../api';
|
|
|
|
import { Base, BaseProps } from '../Base';
|
2022-01-13 05:47:12 +01:00
|
|
|
|
|
|
|
export interface CurrencyIconProps extends BaseProps<HTMLDivElement>
|
|
|
|
{
|
|
|
|
type: number | string;
|
|
|
|
}
|
2021-04-16 05:42:00 +02:00
|
|
|
|
2022-03-03 18:03:21 +01:00
|
|
|
export const LayoutCurrencyIcon: FC<CurrencyIconProps> = props =>
|
2021-04-16 05:42:00 +02:00
|
|
|
{
|
2022-01-13 05:47:12 +01:00
|
|
|
const { type = '', classNames = [], style = {}, ...rest } = props;
|
|
|
|
|
|
|
|
const getClassNames = useMemo(() =>
|
|
|
|
{
|
|
|
|
const newClassNames: string[] = [ 'nitro-currency-icon' ];
|
|
|
|
|
|
|
|
if(classNames.length) newClassNames.push(...classNames);
|
|
|
|
|
|
|
|
return newClassNames;
|
|
|
|
}, [ classNames ]);
|
2021-07-21 11:31:36 +02:00
|
|
|
|
|
|
|
const urlString = useMemo(() =>
|
|
|
|
{
|
|
|
|
let url = GetConfiguration<string>('currency.asset.icon.url', '');
|
2021-04-16 05:42:00 +02:00
|
|
|
|
2021-07-21 11:31:36 +02:00
|
|
|
url = url.replace('%type%', type.toString());
|
2021-04-16 05:42:00 +02:00
|
|
|
|
2021-07-21 11:31:36 +02:00
|
|
|
return `url(${ url })`;
|
|
|
|
}, [ type ]);
|
2021-04-16 05:42:00 +02:00
|
|
|
|
2022-01-13 05:47:12 +01:00
|
|
|
const getStyle = useMemo(() =>
|
|
|
|
{
|
|
|
|
let newStyle: CSSProperties = {};
|
|
|
|
|
|
|
|
newStyle.backgroundImage = urlString;
|
|
|
|
|
|
|
|
if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
|
|
|
|
|
|
|
|
return newStyle;
|
|
|
|
}, [ style, urlString ]);
|
|
|
|
|
|
|
|
return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />
|
2021-04-16 05:42:00 +02:00
|
|
|
}
|