Show boursecu assets per product from wallet API and scale day range for maftol.

Fix rules paragraph alignment so Persian text does not stretch with justify.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/base/home/desktop/components/DesktopPriceRange.vue

@@ -1,10 +1,24 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { getTradeBuyPrice, getTradeSellPrice, price } from '@/utils/price'
+import { price } from '@/utils/price'
 import { usePriceWithoutType } from '@/utils/usePrice'
+import { getHomeLayoutId } from '../../layouts/registry'
+import { resolveMetalDayRangePrices, usePriceChart } from '../../composables/usePriceChart'
 
-const highPrice = computed(() => price.value?.up?.buy ?? getTradeBuyPrice(price.value))
-const lowPrice = computed(() => price.value?.up?.sell ?? getTradeSellPrice(price.value))
+const { selectedChartMetal, maftolChartRatio } = usePriceChart()
+const isBoursecuLayout = computed(() => getHomeLayoutId() === 'boursecu')
+
+const rangePrices = computed(() =>
+  resolveMetalDayRangePrices({
+    price: price.value,
+    metal: selectedChartMetal.value,
+    isBoursecuLayout: isBoursecuLayout.value,
+    maftolRatio: maftolChartRatio.value,
+  })
+)
+
+const highPrice = computed(() => rangePrices.value.high)
+const lowPrice = computed(() => rangePrices.value.low)
 </script>
 
 <template>