refactor: cleanup AssetIcon & AssetList (#7196)

* feat: cleanup * fix: move out molecules * feat: add enum, remove props and add size prop * fix: make assetIconColor reactive --------- Co-authored-by: Begoña Alvarez <[email protected]>
iotaledger · Aug 1, 2023 · 808391b · 808391b
1 parent 2c305e8
commit 808391b
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 111 deletions.
diff --git a/packages/shared/components/AssetIcon.svelte b/packages/shared/components/AssetIcon.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+    import { AnimationRenderer } from '@auxiliary/animation'
+    import { Icon as IconEnum, NETWORK_ICON_SVG } from '@auxiliary/icon'
+    import { getIconColorFromString } from '@core/account'
+    import { COIN_TYPE, NetworkId } from '@core/network'
+    import { isBright } from '@core/utils'
+    import { ANIMATED_TOKEN_IDS, getAssetInitials, IPersistedAsset, TokenStandard } from '@core/wallet'
+    import { Animation, AssetIconSize, Icon, VerificationBadge } from 'shared/components'
+
+    export let asset: IPersistedAsset
+    export let size: AssetIconSize = AssetIconSize.Medium
+
+    let icon: IconEnum | null
+    let assetIconColor: string = 'text-blue-500'
+    let assetIconBackgroundColor: string
+    let assetInitials: string
+    let assetIconWrapperWidth: number
+    let assetLogoUrl: string
+
+    $: isAnimation = asset.id in ANIMATED_TOKEN_IDS
+    $: asset, updateAssetIcon()
+    $: assetIconColor = isBright(assetIconBackgroundColor) ? 'text-gray-800' : 'text-white'
+
+    function updateAssetIcon(): void {
+        switch (asset.id) {
+            case String(COIN_TYPE[NetworkId.Iota]):
+                assetIconBackgroundColor = '#6E82A4'
+                icon = NETWORK_ICON_SVG[NetworkId.Iota]
+                break
+            case String(COIN_TYPE[NetworkId.Shimmer]):
+            case String(COIN_TYPE[NetworkId.Testnet]):
+                assetIconBackgroundColor = '#25DFCA'
+                icon = NETWORK_ICON_SVG[NetworkId.Shimmer]
+                break
+            default:
+                assetInitials = getAssetInitials(asset)
+                assetIconBackgroundColor = getIconColorFromString(asset.metadata?.name, {
+                    shades: ['500', '600', '700', '800'],
+                    colorsToExclude: ['gray'],
+                })
+                assetLogoUrl = asset.metadata?.standard === TokenStandard.Irc30 ? asset.metadata?.logoUrl ?? '' : ''
+                icon = null
+        }
+    }
+
+    function handleOnError(): void {
+        assetLogoUrl = ''
+    }
+</script>
+
+<asset-icon-wrapper class:large={AssetIconSize.Large === size} class:small={AssetIconSize.Small === size}>
+    <asset-icon
+        class:isAnimation
+        class:large={AssetIconSize.Large === size}
+        class:small={AssetIconSize.Small === size}
+        class:icon-bg={assetIconBackgroundColor}
+        style={assetIconBackgroundColor ? `--icon-bg-color: ${assetIconBackgroundColor}` : ''}
+        bind:clientWidth={assetIconWrapperWidth}
+    >
+        {#if isAnimation}
+            <Animation
+                classes={AssetIconSize.Large === size
+                    ? 'w-12 h-12'
+                    : AssetIconSize.Small === size
+                    ? 'w-6 h-6'
+                    : 'w-8 h-8'}
+                animation={ANIMATED_TOKEN_IDS[asset.id]}
+                loop={true}
+                renderer={AnimationRenderer.Canvas}
+            />
+        {:else if icon}
+            <Icon {icon} width="80%" height="80%" classes="{assetIconColor} text-center" />
+        {:else if assetLogoUrl}
+            <img src={assetLogoUrl} on:error={handleOnError} alt={assetLogoUrl} class="w-full h-full" />
+        {:else}
+            <p
+                style:--font-size={Math.floor(
+                    Math.min(AssetIconSize.Large === size ? 20 : 12, assetIconWrapperWidth / assetInitials?.length)
+                ) + 'px'}
+                class={assetIconColor}
+            >
+                {assetInitials?.toUpperCase() ?? '-'}
+            </p>
+        {/if}
+    </asset-icon>
+    <verification-badge-wrapper class="absolute flex justify-center items-center bottom-0 right-0">
+        <VerificationBadge status={asset.verification?.status} width={14} height={14} />
+    </verification-badge-wrapper>
+</asset-icon-wrapper>
+
+<style lang="scss">
+    asset-icon-wrapper {
+        @apply relative;
+        @apply flex;
+        @apply w-8 h-8;
+        &.large {
+            @apply w-12 h-12;
+        }
+        &.small {
+            @apply w-6 h-6;
+        }
+        asset-icon {
+            @apply p-1;
+            @apply rounded-full;
+            @apply flex justify-center items-center;
+            @apply transition-none;
+            @apply bg-blue-500;
+            @apply w-8 h-8;
+            &.isAnimation {
+                @apply p-0;
+            }
+            &.large {
+                @apply w-12 h-12;
+            }
+            &.small {
+                @apply w-6 h-6;
+            }
+
+            &.icon-bg {
+                background-color: var(--icon-bg-color);
+            }
+            p {
+                @apply transition-none;
+                @apply font-600;
+                @apply text-center;
+                font-size: var(--font-size);
+            }
+        }
+    }
+</style>
diff --git a/...red/components/molecules/AssetList.svelte → packages/shared/components/AssetList.svelte b/...red/components/molecules/AssetList.svelte → packages/shared/components/AssetList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import VirtualList from '@sveltejs/svelte-virtual-list'
     import { AssetTile, Text, TextType } from 'shared/components'
-    import { Filter } from '../../../desktop/components' // TODO: refactor to match dependency platform
+    import { Filter } from '../../desktop/components'
     import { localize } from '@core/i18n'
     import { assetFilter, AccountAssets, IAsset } from '@core/wallet'
     import { isVisibleAsset } from '@core/wallet/utils/isVisibleAsset'
@@ -10,9 +10,9 @@
     export let assets: AccountAssets
 
     let filteredAssetList: IAsset[]
-    $: $assetFilter, assets, (filteredAssetList = getFilteredAssetList()), scrollToTop()
-
     let isEmptyBecauseOfFilter: boolean = false
+
+    $: $assetFilter, assets, (filteredAssetList = getFilteredAssetList()), scrollToTop()
     $: assets, (isEmptyBecauseOfFilter = getAssetList().length > 0 && filteredAssetList.length === 0)
 
     function getFilteredAssetList(): IAsset[] {
@@ -31,7 +31,7 @@
         return list
     }
 
-    function scrollToTop() {
+    function scrollToTop(): void {
         const listElement = document.querySelector('.asset-list')?.querySelector('svelte-virtual-list-viewport')
         if (listElement) {
             listElement.scroll(0, 0)

diff --git a/packages/shared/components/enums/asset-icon-size.enum.ts b/packages/shared/components/enums/asset-icon-size.enum.ts
@@ -0,0 +1,5 @@
+export enum AssetIconSize {
+    Small = 'small',
+    Medium = 'medium',
+    Large = 'large',
+}
diff --git a/packages/shared/components/enums/index.ts b/packages/shared/components/enums/index.ts
@@ -9,3 +9,4 @@ export * from './text-type.enum'
 export * from './menu-item-variant.enum'
 export * from './tooltip-type.enum'
 export * from './input-type.enum'
+export * from './asset-icon-size.enum'
diff --git a/packages/shared/components/index.js b/packages/shared/components/index.js
@@ -34,6 +34,8 @@ export { default as ColoredCircle } from './ColoredCircle.svelte'
 export { default as Icon } from './Icon.svelte'
 export { default as BoxedIcon } from './BoxedIcon.svelte'
 export { default as AmountBox } from './AmountBox.svelte'
+export { default as AssetIcon } from './AssetIcon.svelte'
+export { default as AssetList } from './AssetList.svelte'
 export { default as ActivityInformation } from './ActivityInformation.svelte'
 export { default as AliasActivityDetails } from './AliasActivityDetails.svelte'
 export { default as BasicActivityDetails } from './BasicActivityDetails.svelte'

diff --git a/packages/shared/components/inputs/AssetDropdown.svelte b/packages/shared/components/inputs/AssetDropdown.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { IAsset, visibleSelectedAccountAssets } from '@core/wallet'
-    import { AssetTile, Icon, Text, AssetIcon, FontWeight } from 'shared/components'
+    import { AssetTile, Icon, Text, AssetIcon, FontWeight, AssetIconSize } from 'shared/components'
     import { clickOutside } from '@core/utils'
     import { activeProfile } from '@core/profile'
     import { Icon as IconEnum } from '@auxiliary/icon'
@@ -49,7 +49,7 @@
             class:cursor-pointer={!isReadonly}
             on:click={onDropdownClick}
         >
-            <AssetIcon small {asset} />
+            <AssetIcon size={AssetIconSize.Small} {asset} />
             <div class="w-full relative" style="max-width: 75px;">
                 <Text
                     color="gray-600"

diff --git a/packages/shared/components/molecules/AssetIcon.svelte b/packages/shared/components/molecules/AssetIcon.svelte
diff --git a/packages/shared/components/molecules/index.js b/packages/shared/components/molecules/index.js
@@ -1,5 +1,3 @@
-export { default as AssetIcon } from './AssetIcon.svelte'
-export { default as AssetList } from './AssetList.svelte'
 export { default as ConditionsOfUse } from './ConditionsOfUse.svelte'
 export { default as DateInputButton } from './DateInputButton.svelte'
 export { default as ExpirationTimePicker } from './ExpirationTimePicker.svelte'

diff --git a/packages/shared/components/tiles/AssetTile.svelte b/packages/shared/components/tiles/AssetTile.svelte
@@ -5,6 +5,7 @@
     import { formatCurrency } from '@core/i18n/utils'
     import { getMarketAmountFromAssetValue } from '@core/market/utils/getMarketAmountFromAssetValue'
     import { getMarketPriceForAsset } from '@core/market/utils'
+    import { AssetIconSize } from 'shared/components/enums'
 
     export let asset: IAsset | undefined
     export let onClick: () => unknown
@@ -26,7 +27,7 @@
     >
         <div class="w-full flex flex-row justify-between items-center">
             <div class="flex flex-row items-center text-left space-x-4">
-                <AssetIcon small={squashed} {asset} />
+                <AssetIcon size={squashed ? AssetIconSize.Small : AssetIconSize.Medium} {asset} />
                 <div class="flex flex-col">
                     <Text type={TextType.p} fontWeight={FontWeight.semibold}>
                         {asset.metadata?.name