diff --git a/packages/shared/components/BalanceSummaryRow.svelte b/packages/shared/components/BalanceSummaryRow.svelte
new file mode 100644
index 00000000000..83cda332eb6
--- /dev/null
+++ 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/packages/shared/components/atoms/BalanceSummarySection.svelte b/packages/shared/components/BalanceSummarySection.svelte
similarity index 70%
rename from packages/shared/components/atoms/BalanceSummarySection.svelte
rename to packages/shared/components/BalanceSummarySection.svelte
index a9b105c3ef0..169962b4432 100644
--- a/packages/shared/components/atoms/BalanceSummarySection.svelte
+++ b/packages/shared/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
deleted file mode 100644
index 1ba2d49acec..00000000000
--- a/packages/shared/components/atoms/BalanceSummaryRow.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-    import { FontWeight, Text } from 'shared/components'
-
-    export let title: string
-    export let subtitle: string = ''
-    export let bold: boolean = false
-    export let amount: string
-    export let convertedAmount: string
-    export let classes: string = ''
-
-    const PRIMARY_COLOR = 'gray-800'
-    const PRIMARY_DARK_COLOR = 'white'
-    const PRIMARY_FONT_SIZE = '15'
-    const PRIMARY_FONT_WEIGHT = FontWeight.normal
-    const PRIMARY_LINE_HEIGHT = '5'
-
-    const SECONDARY_COLOR = 'gray-600'
-    const SECONDARY_DARK_COLOR = 'gray-400'
-    const SECONDARY_FONT_SIZE = '13'
-    const SECONDARY_FONT_WEIGHT = FontWeight.normal
-    const SECONDARY_LINE_HEIGHT = '4'
-</script>
-
-<div class="flex flex-row justify-between flex-grow {classes}">
-    <div class={title ? 'flex flex-col space-y-0.5' : ''}>
-        <Text
-            color={PRIMARY_COLOR}
-            darkColor={PRIMARY_DARK_COLOR}
-            fontSize={PRIMARY_FONT_SIZE}
-            fontWeight={bold ? FontWeight.semibold : PRIMARY_FONT_WEIGHT}
-            lineHeight={PRIMARY_LINE_HEIGHT}
-        >
-            {title}
-        </Text>
-        {#if subtitle}
-            <Text
-                color={SECONDARY_COLOR}
-                darkColor={SECONDARY_DARK_COLOR}
-                fontSize={SECONDARY_FONT_SIZE}
-                fontWeight={SECONDARY_FONT_WEIGHT}
-                lineHeight={SECONDARY_LINE_HEIGHT}
-            >
-                {subtitle}
-            </Text>
-        {/if}
-    </div>
-    <div class="flex flex-col items-end space-y-0.5">
-        <Text
-            color={PRIMARY_COLOR}
-            darkColor={PRIMARY_DARK_COLOR}
-            fontSize={PRIMARY_FONT_SIZE}
-            fontWeight={bold ? FontWeight.semibold : PRIMARY_FONT_WEIGHT}
-            lineHeight={PRIMARY_LINE_HEIGHT}
-            classes="text-right"
-        >
-            {amount}
-        </Text>
-        <Text
-            color={SECONDARY_COLOR}
-            darkColor={SECONDARY_DARK_COLOR}
-            fontSize={SECONDARY_FONT_SIZE}
-            fontWeight={SECONDARY_FONT_WEIGHT}
-            lineHeight={SECONDARY_LINE_HEIGHT}
-            classes="text-right"
-        >
-            {convertedAmount}
-        </Text>
-    </div>
-</div>
diff --git a/packages/shared/components/atoms/index.js b/packages/shared/components/atoms/index.js
index e715f92cebc..3ee1e7c7b1d 100644
--- 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
index 538f5440cd6..8857a563343 100644
--- 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'