+
+
+
@@ -134,6 +153,47 @@ import {
} from '@/utils/productAssets'
import type { WalletMetalTotal } from '@/models/walletAssets'
import { useAssetsPortfolioChart } from './composables/useAssetsPortfolioChart'
+import assetsCopperBanner from '@/assets/img/assets-copper-banner.webp'
+import { getBoursecuActionIconSrc } from '@/utils/config'
+
+type AssetActionItem = {
+ id: string
+ label: string
+ routeName: string
+ query?: Record
+ primary?: boolean
+ iconSrc?: string
+}
+
+const assetActionItems: AssetActionItem[] = [
+ {
+ id: 'deposit',
+ label: 'واریز',
+ routeName: 'wallet',
+ query: { state: 'deposit' },
+ primary: true,
+ iconSrc: getBoursecuActionIconSrc('wallet'),
+ },
+ {
+ id: 'withdraw',
+ label: 'برداشت',
+ routeName: 'wallet',
+ query: { state: 'withdraw' },
+ iconSrc: getBoursecuActionIconSrc('wallet'),
+ },
+ {
+ id: 'trade',
+ label: 'معامله',
+ routeName: 'buyProduct',
+ iconSrc: getBoursecuActionIconSrc('buySell'),
+ },
+ {
+ id: 'transactions',
+ label: 'تراکنشها',
+ routeName: 'transactions',
+ iconSrc: getBoursecuActionIconSrc('transactions'),
+ },
+]
const isDesktop = useDesktopBreakpoint()
const { assetsSummary, loadWalletAssets } = useWalletAssets()
@@ -235,8 +295,8 @@ function assetsMetalLabel(metal: WalletMetalTotal): string {
return assetsDisplayText(resolveMetalAssetsDisplayLabel(metal))
}
-function go(name: string) {
- router.push({ name })
+function go(name: string, query?: Record) {
+ router.push(query ? { name, query } : { name })
}
onMounted(async () => {
@@ -291,12 +351,38 @@ onMounted(async () => {
gap: 0.75rem;
}
+.assets-chart-block {
+ display: flex;
+ flex-direction: column;
+ gap: 0.55rem;
+ min-width: 0;
+}
+
@media (min-width: 768px) {
.assets-top {
grid-template-columns: 1.15fr 0.85fr;
+ align-items: start;
}
}
+.assets-banner-slot {
+ display: block;
+ width: 100%;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ border-radius: 22px;
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.assets-banner-slot img {
+ display: block;
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+}
+
.assets-card {
background: #fff;
border: 1px solid color-mix(in srgb, @App-primary-color 14%, #fff);
@@ -444,6 +530,45 @@ onMounted(async () => {
gap: 0.45rem;
}
+.assets-actions button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ min-width: 0;
+ overflow: visible;
+}
+
+.assets-actions__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 22px;
+ height: 22px;
+ flex-shrink: 0;
+ overflow: visible;
+}
+
+.assets-actions__icon img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ transform: scale(2.25);
+}
+
+.assets-actions button.is-main .assets-actions__icon {
+ background: #fff;
+ border-radius: 999px;
+ overflow: hidden;
+}
+
+.assets-actions__label {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
.assets-table-wrap {
padding: 0.9rem;
}