feat: colored icons (#2745)

novasamatech · Nov 27, 2024 · f11415e · f11415e
1 parent 16e7582
commit f11415e
Show file tree

Hide file tree

Showing 23 changed files with 3,989 additions and 1,032 deletions.
diff --git a/src/renderer/entities/asset/ui/AssetBalance/AssetBalance.stories.tsx b/src/renderer/entities/asset/ui/AssetBalance/AssetBalance.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryFn } from '@storybook/react';
 
-import { AssetType } from '@/shared/core';
+import { dotAsset } from '@/shared/mocks';
 
 import { AssetBalance } from './AssetBalance';
 
@@ -10,21 +10,11 @@ export default {
   parameters: { actions: { argTypesRegex: '^on.*' } },
 } as Meta<typeof AssetBalance>;
 
-const assetDot = {
-  assetId: 3,
-  symbol: 'DOT',
-  precision: 10,
-  priceId: 'polkadot',
-  type: AssetType.NATIVE,
-  icon: 'https://raw.githubusercontent.com/novasamatech/nova-utils/master/icons/chains/white/Polkadot.svg',
-  name: 'Polkadot',
-};
-
 const Template: StoryFn<typeof AssetBalance> = (args) => <AssetBalance {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  asset: assetDot,
+  asset: dotAsset,
   value: '10000000',
   showIcon: true,
 };
diff --git a/src/renderer/entities/asset/ui/AssetBalance/AssetBalance.tsx b/src/renderer/entities/asset/ui/AssetBalance/AssetBalance.tsx
@@ -3,34 +3,25 @@ import { type BN } from '@polkadot/util';
 import { type Asset, type AssetByChains } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { cnTw, formatBalance } from '@/shared/lib/utils';
-import { AssetIcon } from '../AssetIcon/AssetIcon';
+import { AssetIcon } from '@/shared/ui-entities';
 
 type Props = {
   value: BN | string;
   asset?: Asset | AssetByChains; // maybe change type to Asset | number to allow pass just asset id and then get asset by id
   className?: string;
   showIcon?: boolean;
-  imgClassName?: string;
   wrapperClassName?: string;
   showSymbol?: boolean;
 };
 
-export const AssetBalance = ({
-  value,
-  asset,
-  className,
-  showIcon,
-  imgClassName,
-  wrapperClassName,
-  showSymbol = true,
-}: Props) => {
+export const AssetBalance = ({ value, asset, className, showIcon, wrapperClassName, showSymbol = true }: Props) => {
   const { t } = useI18n();
 
   if (!asset) {
     return null;
   }
 
-  const { precision, symbol, icon, name } = asset;
+  const { precision, symbol } = asset;
   const { value: formattedValue, decimalPlaces, suffix } = formatBalance(value, precision);
 
   const balanceValue = t('assetBalance.number', {
@@ -50,7 +41,7 @@ export const AssetBalance = ({
 
   return (
     <p className={cnTw('flex items-center gap-x-2', wrapperClassName)}>
-      <AssetIcon src={icon} size={28} name={name} className={imgClassName} />
+      <AssetIcon asset={asset} size={32} />
       {balance}
     </p>
   );

diff --git a/src/renderer/entities/asset/ui/AssetIcon/AssetIcon.test.tsx b/src/renderer/entities/asset/ui/AssetIcon/AssetIcon.test.tsx
diff --git a/src/renderer/entities/asset/ui/AssetIcon/AssetIcon.tsx b/src/renderer/entities/asset/ui/AssetIcon/AssetIcon.tsx
diff --git a/src/renderer/entities/asset/ui/index.ts b/src/renderer/entities/asset/ui/index.ts
@@ -1,5 +1,5 @@
 export { AssetBalance } from './AssetBalance/AssetBalance';
 export { AssetDetails } from './AssetDetails/AssetDetails';
-export { AssetIcon } from './AssetIcon/AssetIcon';
+export { AssetIcon } from '@/shared/ui-entities';
 export { AssetLinks } from './AssetLinks/AssetLinks';
 export { EmptyAssetsState } from './EmptyAssetsState/EmptyAssetsState';
diff --git a/src/renderer/features/assets-balances/components/AmountInput.tsx b/src/renderer/features/assets-balances/components/AmountInput.tsx
@@ -159,7 +159,7 @@ export const AmountInput = ({
 
   const prefixElement = (
     <div className="flex min-w-fit items-center gap-x-1">
-      <AssetIcon src={asset.icon} name={asset.name} size={28} className="flex" />
+      <AssetIcon asset={asset} size={32} />
       <TitleText>{asset.symbol}</TitleText>
     </div>
   );

diff --git a/src/renderer/features/assets/AssetsChainView/ui/AssetCard/AssetCard.tsx b/src/renderer/features/assets/AssetsChainView/ui/AssetCard/AssetCard.tsx
@@ -47,7 +47,7 @@ export const AssetCard = ({ chainId, asset, balance }: Props) => {
     >
       <div className="flex items-center px-2 py-1.5">
         <div className="mr-auto flex items-center gap-x-2 px-2 py-1">
-          <AssetIcon src={asset.icon} name={asset.name} />
+          <AssetIcon asset={asset} />
           <div>
             <BodyText>{asset.name}</BodyText>
             <TokenPrice assetId={asset.priceId} />

diff --git a/src/renderer/features/assets/AssetsPortfolioView/model/__tests__/portfolio-model.test.ts b/src/renderer/features/assets/AssetsPortfolioView/model/__tests__/portfolio-model.test.ts
@@ -10,7 +10,11 @@ const mockTokens: AssetByChains[] = [
     name: 'Polkadot',
     precision: 10,
     priceId: 'polkadot',
-    icon: 'https://raw.githubusercontent.com/novasamatech/nova-spektr-utils/main/icons/v1/assets/white/Polkadot_(DOT).svg',
+    icon: {
+      monochrome:
+        'https://raw.githubusercontent.com/novasamatech/nova-spektr-utils/main/icons/v2/assets/monochrome/DOT.svg',
+      colored: 'https://raw.githubusercontent.com/novasamatech/nova-spektr-utils/main/icons/v2/assets/colored/DOT.svg',
+    },
     symbol: 'DOT',
     chains: [
       {
@@ -37,7 +41,11 @@ const mockTokens: AssetByChains[] = [
     name: 'Kusama',
     precision: 12,
     priceId: 'kusama',
-    icon: 'https://raw.githubusercontent.com/novasamatech/nova-spektr-utils/main/icons/v1/assets/white/Kusama_(KSM).svg',
+    icon: {
+      monochrome:
+        'https://raw.githubusercontent.com/novasamatech/nova-spektr-utils/main/icons/v2/assets/monochrome/DOT.svg',
+      colored: 'https://raw.githubusercontent.com/novasamatech/nova-spektr-utils/main/icons/v2/assets/colored/DOT.svg',
+    },
     symbol: 'KSM',
     chains: [
       {

diff --git a/src/renderer/features/assets/AssetsPortfolioView/ui/TokenBalance.tsx b/src/renderer/features/assets/AssetsPortfolioView/ui/TokenBalance.tsx
@@ -24,7 +24,7 @@ export const TokenBalance = ({ asset }: Props) => {
     <Plate className="z-10 flex h-[52px] w-full items-center p-0 pl-[30px] pr-2 transition-shadow hover:shadow-card-shadow focus:shadow-card-shadow">
       <div className="flex flex-1 gap-x-2">
         <div className="flex items-center gap-x-2">
-          <AssetIcon src={asset.icon} name={asset.name} />
+          <AssetIcon asset={asset} />
           <div>
             <BodyText>{chain.assetSymbol}</BodyText>
             <div className="mr-3 flex items-center gap-x-1.5">

diff --git a/src/renderer/features/assets/AssetsPortfolioView/ui/TokenBalanceList.tsx b/src/renderer/features/assets/AssetsPortfolioView/ui/TokenBalanceList.tsx
@@ -47,7 +47,7 @@ export const TokenBalanceList = ({ asset }: Props) => {
         >
           <div className="flex w-full items-center">
             <div className="flex flex-1 items-center gap-x-2">
-              <AssetIcon src={asset.icon} name={asset.name} />
+              <AssetIcon asset={asset} />
               <div className="flex flex-col">
                 <BodyText>{asset.symbol}</BodyText>
                 <div className="flex items-center">