refactor: cleanup BalanceSummaryRow & BalanceSummarySection (#7093)

* refactor: move BalanceSummaryRow out of atoms and refactor * refactor: move BalanceSummarySection out of atoms and cleanup * fix: update imports * fix: update classes * fix: avoid tpye assertions * fix: remove on:keydown
iotaledger · Jul 13, 2023 · f34d285 · f34d285
1 parent b7c265c
commit f34d285
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 83 deletions.
diff --git a/packages/shared/components/BalanceSummaryRow.svelte b/packages/shared/components/BalanceSummaryRow.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+ import { FontWeight, Text } from 'shared/components'
+
+ export let title: string
+ export let subtitle: string | undefined = undefined
+ export let bold: boolean = false
+ export let amount: string
+ export let convertedAmount: string
+
+ const PRIMARY_TEXT_CONFIG = {
+ color: 'gray-800',
+ darkColor: 'white',
+ fontSize: '15',
+ fontWeight: bold ? FontWeight.semibold : FontWeight.normal,
+ lineHeight: '5',
+ }
+
+ const SECONDARY_TEXT_CONFIG = {
+ color: 'gray-600',
+ darkColor: 'gray-400',
+ fontSize: '13',
+ fontWeight: FontWeight.normal,
+ lineHeight: '4',
+ }
+</script>
+
+<div class="flex flex-row justify-between flex-grow">
+ <div class={title ? 'flex flex-col space-y-0.5' : null}>
+ <Text {...PRIMARY_TEXT_CONFIG}>{title}</Text>
+ {#if subtitle}
+ <Text {...SECONDARY_TEXT_CONFIG}>{subtitle}</Text>
+ {/if}
+ </div>
+ <div class="flex flex-col items-end space-y-0.5">
+ <Text {...PRIMARY_TEXT_CONFIG} classes="text-right">{amount}</Text>
+ <Text {...SECONDARY_TEXT_CONFIG} classes="text-right">{convertedAmount}</Text>
+ </div>
+</div>
diff --git a/...onents/atoms/BalanceSummarySection.svelte → ...d/components/BalanceSummarySection.svelte b/...onents/atoms/BalanceSummarySection.svelte → ...d/components/BalanceSummarySection.svelte
@@ -8,21 +8,21 @@
 
  export let titleKey: string
  export let subtitleKey: string = ''
- export let subBreakdown: { [key: string]: { amount: number } } = undefined
+ export let subBreakdown: { [key: string]: { amount: number } } = {}
  export let amount: number
  export let bold: boolean = false
 
- let expanded = false
+ let expanded: boolean = false
 
  $: hasChildren = !!Object.keys(subBreakdown ?? {}).length
  $: ({ baseCoin } = $selectedAccountAssets?.[$activeProfile?.network?.id] ?? {})
 
  function getAmount(amount: number): string {
- return formatTokenAmountBestMatch(amount, baseCoin.metadata)
+ return baseCoin?.metadata ? formatTokenAmountBestMatch(amount, baseCoin?.metadata) : ''
  }
 
  function getCurrencyAmount(amount: number): string {
- return formatCurrency(getMarketAmountFromAssetValue(amount, baseCoin))
+ return baseCoin ? formatCurrency(getMarketAmountFromAssetValue(amount, baseCoin)) : ''
  }
 
  function toggleExpandedView(): void {
@@ -32,7 +32,8 @@
 
 <div class="flex flex-col space-y-8">
  <div
- class="w-full flex flex-row flex-grow justify-between space-x-2 {hasChildren ? 'cursor-pointer ' : ''}"
+ class="w-full flex flex-row flex-grow justify-between space-x-2"
+ class:cursor-pointer={hasChildren}
  on:click={toggleExpandedView}
  on:keydown={() => {}}
  >
@@ -54,13 +55,14 @@
  </div>
  {#if expanded}
  {#each Object.keys(subBreakdown ?? {}) as breakdownKey}
- <BalanceSummaryRow
- title={localize(`popups.balanceBreakdown.${breakdownKey}.title`)}
- subtitle={localize(`popups.balanceBreakdown.${breakdownKey}.subtitle`)}
- amount={getAmount(subBreakdown[breakdownKey].amount)}
- convertedAmount={getCurrencyAmount(subBreakdown[breakdownKey].amount)}
- classes="ml-8"
- />
+ <balance-summary-row-expanded class="ml-8">
+ <BalanceSummaryRow
+ title={localize(`popups.balanceBreakdown.${breakdownKey}.title`)}
+ subtitle={localize(`popups.balanceBreakdown.${breakdownKey}.subtitle`)}
+ amount={getAmount(subBreakdown[breakdownKey].amount)}
+ convertedAmount={getCurrencyAmount(subBreakdown[breakdownKey].amount)}
+ />
+ </balance-summary-row-expanded>
  {/each}
  {/if}
 </div>
diff --git a/packages/shared/components/atoms/BalanceSummaryRow.svelte b/packages/shared/components/atoms/BalanceSummaryRow.svelte
diff --git a/packages/shared/components/atoms/index.js b/packages/shared/components/atoms/index.js
@@ -6,8 +6,6 @@ export * from './labels'
 export * from './pills'
 export * from './tiles'
 
-export { default as BalanceSummaryRow } from './BalanceSummaryRow.svelte'
-export { default as BalanceSummarySection } from './BalanceSummarySection.svelte'
 export { default as MediaDisplay } from './MediaDisplay.svelte'
 export { default as MenuItem } from './MenuItem.svelte'
 export { default as NetworkIcon } from './NetworkIcon.svelte'

diff --git a/packages/shared/components/index.js b/packages/shared/components/index.js
@@ -24,6 +24,8 @@ export { default as Toast } from './Toast.svelte'
 export { default as ToastContainer } from './ToastContainer.svelte'
 export { default as Tooltip } from './Tooltip.svelte'
 export { default as Transition } from './Transition.svelte'
+export { default as BalanceSummaryRow } from './BalanceSummaryRow.svelte'
+export { default as BalanceSummarySection } from './BalanceSummarySection.svelte'
 export { default as ColoredCircle } from './ColoredCircle.svelte'
 export { default as Icon } from './Icon.svelte'
 export { default as BoxedIcon } from './BoxedIcon.svelte'