added bank logis

src/assets/img/banks/khavarmianeh.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48">
+  <path fill="#F29200" d="m42.4668 9.78094 5.5298-2.0734V4.2246l-5.7715 2.88743 5.7715-4.63791V0h-2.3043l-5.1682 5.60239L43.9587 0h-3.2489l-2.9244 5.33495c2.0789.84349 3.7453 2.44839 4.6814 4.44599Zm5.5298 9.46026-5.3999-2.2679c.365-.8595.5986-1.7916.6742-2.7738.1078-1.3973-.1167-2.7436-.6059-3.9618l5.3316-1.28938V11.276l-3.1809.8621 3.1809.6089v2.334l-2.5125.0981 2.5125.9302v3.1319ZM0 25.841l25.9014-10.1456c.524 2.0634 1.7799 3.8559 3.4943 5.0598L13.3511 47.9966H6.58975L20.9806 27.1287 0 48V37.5352l17.9716-14.0659L0 32.5091V25.841Zm18.5614 22.1556L29.8977 21.083c1.1444.6924 2.4638 1.1352 3.8885 1.2448.9245.0712 1.8266-.0029 2.6844-.2028l6.8254 25.8716h-5.2937L34.3631 30.551l-.2388 17.4456h-5.4064l1.255-17.0929-4.8613 17.0929h-6.5502Zm18.5779-26.0558 10.8115 25.9491.0458.1067v-12.048l-5.8038-10.0069 5.8038 5.3841v-4.1322l-3.6314-4.8604 3.6314 1.8057V20.958l-5.6765-3.3949c-1.0735 2.0832-2.9449 3.666-5.1808 4.3777ZM39.354 0l-1.9853 5.17821c-.7033-.24455-1.4487-.40358-2.2258-.46336-1.2763-.09839-2.5102.08009-3.6426.48453L30.2449 0h2.5763l.5963 2.2147L33.5008 0h2.3668l-.1719 2.84968L36.5784 0h2.7756Zm-8.3013 5.37242L28.9487 0h-3.0545l1.1192 2.51102L24.9927 0h-4.035l3.3353 3.64883L19.1486 0h-7.9498L26.881 8.99094c.9682-1.61748 2.4346-2.88915 4.1717-3.61852ZM5.74311 0 26.6216 9.4543c-.5312 1.0231-.8695 2.1672-.9637 3.3888-.0609.7906-.0151 1.5646.1242 2.3085L0 22.0861V15.964l16.8458-2.2685L0 12.6197V7.56538l18.0228 2.34113L0 4.71485V0h5.74311Z"/>
+</svg>

src/utils/bankBranding.ts

@@ -1,137 +1,134 @@
-import ayandehLogo from '@/assets/img/banks/ayandeh.png'
-import keshavarziLogo from '@/assets/img/banks/keshavarzi.png'
-import mellatLogo from '@/assets/img/banks/mellat.png'
-import melliLogo from '@/assets/img/banks/melli.png'
-import parsiyanLogo from '@/assets/img/banks/parsiyan.png'
-import pasargadLogo from '@/assets/img/banks/pasargad.png'
-import refahLogo from '@/assets/img/banks/refah.png'
-import saderatLogo from '@/assets/img/banks/saderat.png'
-import samanLogo from '@/assets/img/banks/saman.png'
-import sanatomadanLogo from '@/assets/img/banks/sanatomadan.png'
-import sarmayehLogo from '@/assets/img/banks/sarmayeh.png'
-import sepahLogo from '@/assets/img/banks/sepah.png'
+import type { Card } from '@/models/wallet'
 
-const BANK_ACCENT_COLORS: Record<string, string> = {
-  'بانک پاسارگاد': '#1f7a54',
-  'پاسارگاد': '#1f7a54',
-  'PASARGAD': '#1f7a54',
-  'بانک سامان': '#2f63d8',
-  'سامان': '#2f63d8',
-  'SAMAN': '#2f63d8',
-  'بانک پارسیان': '#c9a227',
-  'پارسیان': '#c9a227',
-  'PARSIAN': '#c9a227',
-  'بانک ملی': '#4b5e96',
-  'ملی': '#4b5e96',
-  'MELLI': '#4b5e96',
-  'بانک ملت': '#c0392b',
-  'ملت': '#c0392b',
-  'MELLAT': '#c0392b',
-  'بانک صادرات': '#1a6fb3',
-  'صادرات': '#1a6fb3',
-  'SADERAT': '#1a6fb3',
-  'بانک صنعت و معدن': '#8b6914',
-  'صنعت و معدن': '#8b6914',
-  'صنعت معدن': '#8b6914',
-  'SANATOMADAN': '#8b6914',
-  'SANAT_MADAN': '#8b6914',
-  'بانک آینده': '#2b2f6b',
-  'آینده': '#2b2f6b',
-  'AYANDEH': '#2b2f6b',
-  'بانک کشاورزی': '#2e8b57',
-  'کشاورزی': '#2e8b57',
-  'KESHAVARZI': '#2e8b57',
-  'بانک رفاه': '#c0392b',
-  'رفاه': '#c0392b',
-  'REFAH': '#c0392b',
-  'بانک سرمایه': '#c0392b',
-  'سرمایه': '#c0392b',
-  'SARMAYEH': '#c0392b',
-  'بانک سپه': '#e85d04',
-  'سپه': '#e85d04',
-  'SEPAH': '#e85d04',
+interface BankDefinition {
+  id: string
+  persianName: string
+  accentColor: string
+  aliases: string[]
 }
 
-const BANK_LOGOS: Record<string, string> = {
-  'بانک پاسارگاد': pasargadLogo,
-  'پاسارگاد': pasargadLogo,
-  'PASARGAD': pasargadLogo,
-  'بانک سامان': samanLogo,
-  'سامان': samanLogo,
-  'SAMAN': samanLogo,
-  'بانک ملی': melliLogo,
-  'ملی': melliLogo,
-  'MELLI': melliLogo,
-  'بانک ملت': mellatLogo,
-  'ملت': mellatLogo,
-  'MELLAT': mellatLogo,
-  'بانک آینده': ayandehLogo,
-  'آینده': ayandehLogo,
-  'AYANDEH': ayandehLogo,
-  'بانک کشاورزی': keshavarziLogo,
-  'کشاورزی': keshavarziLogo,
-  'KESHAVARZI': keshavarziLogo,
-  'بانک رفاه': refahLogo,
-  'رفاه': refahLogo,
-  'REFAH': refahLogo,
-  'بانک سرمایه': sarmayehLogo,
-  'سرمایه': sarmayehLogo,
-  'SARMAYEH': sarmayehLogo,
-  'بانک پارسیان': parsiyanLogo,
-  'پارسیان': parsiyanLogo,
-  'PARSIAN': parsiyanLogo,
-  'بانک صادرات': saderatLogo,
-  'صادرات': saderatLogo,
-  'SADERAT': saderatLogo,
-  'بانک صنعت و معدن': sanatomadanLogo,
-  'صنعت و معدن': sanatomadanLogo,
-  'صنعت معدن': sanatomadanLogo,
-  'SANATOMADAN': sanatomadanLogo,
-  'SANAT_MADAN': sanatomadanLogo,
-  'بانک سپه': sepahLogo,
-  'سپه': sepahLogo,
-  'SEPAH': sepahLogo,
+const bankLogoModules = import.meta.glob<string>('@/assets/img/banks/*.{png,svg}', {
+  eager: true,
+  import: 'default',
+})
+
+const BANK_LOGO_BY_STEM = Object.fromEntries(
+  Object.entries(bankLogoModules).map(([path, url]) => {
+    const stem = path.split('/').pop()?.replace(/\.(png|svg)$/i, '') ?? ''
+    return [stem, url]
+  }),
+) as Record<string, string>
+
+const BANKS: BankDefinition[] = [
+  { id: 'melli', persianName: 'بانک ملی', accentColor: '#4b5e96', aliases: ['MELLI', 'BMI', 'ملی', 'بانک ملی', 'بانک ملی ایران', '017'] },
+  { id: 'sepah', persianName: 'بانک سپه', accentColor: '#e85d04', aliases: ['SEPAH', 'سپه', 'بانک سپه', '015'] },
+  { id: 'mellat', persianName: 'بانک ملت', accentColor: '#c0392b', aliases: ['MELLAT', 'MELAT', 'ملت', 'بانک ملت', '012'] },
+  { id: 'tejarat', persianName: 'بانک تجارت', accentColor: '#2f5f9e', aliases: ['TEJARAT', 'تجارت', 'بانک تجارت', '018'] },
+  { id: 'saderat', persianName: 'بانک صادرات', accentColor: '#1a6fb3', aliases: ['SADERAT', 'BSI', 'صادرات', 'بانک صادرات', 'بانک صادرات ایران', '019'] },
+  { id: 'sanatomadan', persianName: 'بانک صنعت و معدن', accentColor: '#8b6914', aliases: ['SANAT_VA_MADAN', 'SANATOMADAN', 'SANAT_MADAN', 'BIM', 'صنعت و معدن', 'صنعت معدن', 'بانک صنعت و معدن', '011'] },
+  { id: 'keshavarzi', persianName: 'بانک کشاورزی', accentColor: '#2e8b57', aliases: ['KESHAVARZI', 'BKI', 'کشاورزی', 'بانک کشاورزی', '016'] },
+  { id: 'maskan', persianName: 'بانک مسکن', accentColor: '#f39c12', aliases: ['MASKAN', 'مسکن', 'بانک مسکن', '014'] },
+  { id: 'refah', persianName: 'بانک رفاه', accentColor: '#c0392b', aliases: ['REFAH', 'RB', 'رفاه', 'بانک رفاه', 'بانک رفاه کارگران', '013'] },
+  { id: 'tosee_saderat', persianName: 'بانک توسعه صادرات', accentColor: '#1f6f8b', aliases: ['TOSEE_SADERAT', 'EXPORT_DEVELOPMENT', 'EDBI', 'توسعه صادرات', 'بانک توسعه صادرات', '020'] },
+  { id: 'postbank', persianName: 'پست بانک', accentColor: '#f1c40f', aliases: ['POSTBANK', 'POST', 'پست بانک', '021', '080'] },
+  { id: 'tosee_taavon', persianName: 'بانک توسعه تعاون', accentColor: '#7f8c8d', aliases: ['TOSEE_TAAVON', 'TOSEE_TAAVON_ESLAMI', 'TT', 'توسعه تعاون', 'بانک توسعه تعاون', '022'] },
+  { id: 'karafarin', persianName: 'بانک کارآفرین', accentColor: '#16a085', aliases: ['KARAFARIN', 'KAR', 'کارآفرین', 'بانک کارآفرین', '053'] },
+  { id: 'parsian', persianName: 'بانک پارسیان', accentColor: '#c9a227', aliases: ['PARSIAN', 'پارسیان', 'بانک پارسیان', '054'] },
+  { id: 'eghtesad_novin', persianName: 'بانک اقتصاد نوین', accentColor: '#5b2c83', aliases: ['EGHTESAD_NOVIN', 'EN', 'ENBANK', 'اقتصاد نوین', 'بانک اقتصاد نوین', '055'] },
+  { id: 'saman', persianName: 'بانک سامان', accentColor: '#2f63d8', aliases: ['SAMAN', 'SB', 'سامان', 'بانک سامان', '056'] },
+  { id: 'pasargad', persianName: 'بانک پاسارگاد', accentColor: '#1f7a54', aliases: ['PASARGAD', 'BPI', 'پاسارگاد', 'بانک پاسارگاد', '057'] },
+  { id: 'sarmayeh', persianName: 'بانک سرمایه', accentColor: '#8e1b1b', aliases: ['SARMAYEH', 'سرمایه', 'بانک سرمایه', '058'] },
+  { id: 'sina', persianName: 'بانک سینا', accentColor: '#1f4e79', aliases: ['SINA', 'SINAA', 'سینا', 'بانک سینا', '059'] },
+  { id: 'mehr_iran', persianName: 'بانک قرض‌الحسنه مهر ایران', accentColor: '#27ae60', aliases: ['MEHR_IRAN', 'MEHR', 'MEHRIRAN', 'مهر ایران', 'قرض الحسنه مهر ایران', 'بانک قرض‌الحسنه مهر ایران', '060'] },
+  { id: 'shahr', persianName: 'بانک شهر', accentColor: '#c0392b', aliases: ['SHAHR', 'شهر', 'بانک شهر', '061'] },
+  { id: 'ayandeh', persianName: 'بانک آینده', accentColor: '#2b2f6b', aliases: ['AYANDEH', 'BA', 'آینده', 'بانک آینده', '062'] },
+  { id: 'ansar', persianName: 'بانک انصار', accentColor: '#7b241c', aliases: ['ANSAR', 'انصار', 'بانک انصار', '063'] },
+  { id: 'gardeshgari', persianName: 'بانک گردشگری', accentColor: '#148f77', aliases: ['GARDESHGARI', 'TOURISM', 'گردشگری', 'بانک گردشگری', '064'] },
+  { id: 'hekmat', persianName: 'بانک حکمت ایرانیان', accentColor: '#1a5276', aliases: ['HEKMAT', 'HEKMAT_IRANIAN', 'HI', 'حکمت', 'حکمت ایرانیان', 'بانک حکمت ایرانیان', '065'] },
+  { id: 'dey', persianName: 'بانک دی', accentColor: '#00838f', aliases: ['DEY', 'DAY', 'دی', 'بانک دی', '066'] },
+  { id: 'iran_zamin', persianName: 'بانک ایران زمین', accentColor: '#6c3483', aliases: ['IRANZAMIN', 'IRAN_ZAMIN', 'IZ', 'ایران زمین', 'بانک ایران زمین', '069'] },
+  { id: 'resalat', persianName: 'بانک قرض‌الحسنه رسالت', accentColor: '#1e8449', aliases: ['RESALAT', 'رسالت', 'قرض الحسنه رسالت', 'بانک قرض‌الحسنه رسالت', '070'] },
+  { id: 'melal', persianName: 'مؤسسه اعتباری ملل', accentColor: '#566573', aliases: ['MELALL', 'MELAL', 'ملل', 'مؤسسه اعتباری ملل', '075'] },
+  { id: 'khavarmianeh', persianName: 'بانک خاورمیانه', accentColor: '#f29200', aliases: ['KHAVARMIANEH', 'KHAVAR_MIANEH', 'MIRAN', 'خاورمیانه', 'بانک خاورمیانه', '078'] },
+  { id: 'iran_venezuela', persianName: 'بانک ایران و ونزوئلا', accentColor: '#b03a2e', aliases: ['IRAN_VENEZUELA', 'IVBB', 'ایران و ونزوئلا', 'بانک ایران و ونزوئلا', '095'] },
+  { id: 'ghavamin', persianName: 'بانک قوامین', accentColor: '#1b4f72', aliases: ['GHAVAMIN', 'GHBI', 'قوامین', 'بانک قوامین'] },
+]
+
+const ALIAS_TO_BANK_ID = new Map<string, string>()
+const BANK_BY_ID = new Map<string, BankDefinition>()
+
+for (const bank of BANKS) {
+  BANK_BY_ID.set(bank.id, bank)
+  for (const alias of bank.aliases) {
+    ALIAS_TO_BANK_ID.set(normalizeAlias(alias), bank.id)
+  }
+  ALIAS_TO_BANK_ID.set(normalizeAlias(bank.persianName), bank.id)
+  ALIAS_TO_BANK_ID.set(normalizeAlias(bank.id), bank.id)
 }
 
-const BANK_PERSIAN_NAMES: Record<string, string> = {
-  PASARGAD: 'بانک پاسارگاد',
-  SAMAN: 'بانک سامان',
-  MELLI: 'بانک ملی',
-  MELLAT: 'بانک ملت',
-  AYANDEH: 'بانک آینده',
-  KESHAVARZI: 'بانک کشاورزی',
-  REFAH: 'بانک رفاه',
-  SARMAYEH: 'بانک سرمایه',
-  PARSIAN: 'بانک پارسیان',
-  SADERAT: 'بانک صادرات',
-  SEPAH: 'بانک سپه',
-  'بانک پاسارگاد': 'بانک پاسارگاد',
-  'پاسارگاد': 'بانک پاسارگاد',
-  'بانک سامان': 'بانک سامان',
-  'سامان': 'بانک سامان',
-  'بانک ملی': 'بانک ملی',
-  'ملی': 'بانک ملی',
-  'بانک ملت': 'بانک ملت',
-  'ملت': 'بانک ملت',
-  'بانک آینده': 'بانک آینده',
-  'آینده': 'بانک آینده',
-  'بانک کشاورزی': 'بانک کشاورزی',
-  'کشاورزی': 'بانک کشاورزی',
-  'بانک رفاه': 'بانک رفاه',
-  'رفاه': 'بانک رفاه',
-  'بانک سرمایه': 'بانک سرمایه',
-  'سرمایه': 'بانک سرمایه',
-  'بانک پارسیان': 'بانک پارسیان',
-  'پارسیان': 'بانک پارسیان',
-  'بانک صادرات': 'بانک صادرات',
-  'صادرات': 'بانک صادرات',
-  'بانک صنعت و معدن': 'بانک صنعت و معدن',
-  'صنعت و معدن': 'بانک صنعت و معدن',
-  'صنعت معدن': 'بانک صنعت و معدن',
-  SANATOMADAN: 'بانک صنعت و معدن',
-  SANAT_MADAN: 'بانک صنعت و معدن',
-  'بانک سپه': 'بانک سپه',
-  'سپه': 'بانک سپه',
+function normalizeAlias(value: string): string {
+  return value.trim().replace(/\s+/g, ' ').toUpperCase()
+}
+
+function findBankId(raw?: string | null): string | undefined {
+  if (!raw?.trim()) {
+    return undefined
+  }
+
+  const trimmed = raw.trim()
+  const normalized = normalizeAlias(trimmed)
+  if (ALIAS_TO_BANK_ID.has(normalized)) {
+    return ALIAS_TO_BANK_ID.get(normalized)
+  }
+
+  const upper = trimmed.toUpperCase()
+  const matched = BANKS.find((bank) =>
+    bank.aliases.some((alias) => {
+      const aliasNorm = normalizeAlias(alias)
+      return /[\u0600-\u06FF]/u.test(alias)
+        ? trimmed.includes(alias)
+        : upper.includes(aliasNorm)
+    }),
+  )
+
+  return matched?.id
+}
+
+function extractIbanBankCode(sheba?: string | null): string | undefined {
+  const normalized = sheba?.replace(/\s/g, '').toUpperCase()
+  if (!normalized?.startsWith('IR') || normalized.length < 7) {
+    return undefined
+  }
+
+  return normalized.slice(4, 7)
+}
+
+export function resolveBankKey(card: Pick<Card, 'bank_name' | 'shaba_number' | 'cart_number'>): string | undefined {
+  const fromName = findBankId(card.bank_name)
+  if (fromName) {
+    return fromName
+  }
+
+  const ibanCode = extractIbanBankCode(card.shaba_number)
+  if (ibanCode) {
+    return findBankId(ibanCode)
+  }
+
+  return undefined
+}
+
+function getBankDefinition(bankKey?: string | null): BankDefinition | undefined {
+  if (!bankKey) {
+    return undefined
+  }
+
+  const byId = BANK_BY_ID.get(bankKey)
+  if (byId) {
+    return byId
+  }
+
+  const resolvedId = findBankId(bankKey)
+  return resolvedId ? BANK_BY_ID.get(resolvedId) : undefined
 }
 
 export function formatShebaForDisplay(value?: string | number | null): string {
@@ -157,74 +154,30 @@ export function formatShebaForDisplay(value?: string | number | null): string {
   ].join(' ')
 }
 
-export function getBankAccentColor(bankName?: string): string {
-  if (!bankName) {
-    return '#64748b'
-  }
-
-  const trimmed = bankName.trim()
-  if (BANK_ACCENT_COLORS[trimmed]) {
-    return BANK_ACCENT_COLORS[trimmed]
-  }
-
-  const matched = Object.entries(BANK_ACCENT_COLORS).find(([name]) => trimmed.includes(name))
-  return matched?.[1] ?? '#64748b'
+export function getBankAccentColor(bankKey?: string): string {
+  return getBankDefinition(bankKey)?.accentColor ?? '#64748b'
 }
 
-export function getBankMonogram(bankName?: string): string {
-  if (!bankName?.trim()) {
+export function getBankMonogram(bankKey?: string): string {
+  const bank = getBankDefinition(bankKey)
+  if (!bank) {
     return 'بانک'
   }
 
-  const trimmed = bankName.trim()
-  if (/^[A-Za-z]/u.test(trimmed)) {
-    return trimmed.replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase() || 'BN'
-  }
-
-  const normalized = trimmed.replace(/^بانک\s+/u, '').trim()
-  return normalized.slice(0, 2) || 'بانک'
+  const shortName = bank.persianName.replace(/^بانک\s+/u, '').trim()
+  return shortName.slice(0, 2) || 'بانک'
 }
 
-function findBankEntry<T>(bankName: string | undefined, entries: Record<string, T>): T | undefined {
-  if (!bankName?.trim()) {
+export function getBankLogoUrl(bankKey?: string): string | undefined {
+  const bank = getBankDefinition(bankKey)
+  if (!bank) {
     return undefined
   }
 
-  const trimmed = bankName.trim()
-  if (entries[trimmed]) {
-    return entries[trimmed]
-  }
-
-  const matched = Object.entries(entries).find(([name]) => trimmed.includes(name))
-  return matched?.[1]
+  return BANK_LOGO_BY_STEM[bank.id]
 }
 
-export function getBankLogoUrl(bankName?: string): string | undefined {
-  return findBankEntry(bankName, BANK_LOGOS)
-}
-
-export function getBankDisplayName(bankName?: string): string {
-  if (!bankName?.trim()) {
-    return 'بانک'
-  }
-
-  const trimmed = bankName.trim()
-  if (BANK_PERSIAN_NAMES[trimmed]) {
-    return BANK_PERSIAN_NAMES[trimmed]
-  }
-
-  const upper = trimmed.toUpperCase()
-  if (BANK_PERSIAN_NAMES[upper]) {
-    return BANK_PERSIAN_NAMES[upper]
-  }
-
-  const matched = Object.entries(BANK_PERSIAN_NAMES).find(([name]) => {
-    if (/[\u0600-\u06FF]/u.test(name)) {
-      return trimmed.includes(name)
-    }
-
-    return upper.includes(name)
-  })
-
-  return matched?.[1] ?? trimmed
+export function getBankDisplayName(bankKey?: string): string {
+  const bank = getBankDefinition(bankKey)
+  return bank?.persianName ?? (bankKey?.trim() || 'بانک')
 }

src/views/base/wallet/components/BoursecuBankAccountOption.vue

@@ -24,6 +24,7 @@ import {
   getBankDisplayName,
   getBankLogoUrl,
   getBankMonogram,
+  resolveBankKey,
 } from '@/utils/bankBranding'
 
 const props = withDefaults(
@@ -34,10 +35,11 @@ const props = withDefaults(
   { compact: false },
 )
 
-const accentColor = computed(() => getBankAccentColor(props.card.bank_name))
-const displayName = computed(() => getBankDisplayName(props.card.bank_name))
-const logoUrl = computed(() => getBankLogoUrl(props.card.bank_name))
-const monogram = computed(() => getBankMonogram(props.card.bank_name))
+const bankKey = computed(() => resolveBankKey(props.card))
+const accentColor = computed(() => getBankAccentColor(bankKey.value))
+const displayName = computed(() => getBankDisplayName(bankKey.value))
+const logoUrl = computed(() => getBankLogoUrl(bankKey.value))
+const monogram = computed(() => getBankMonogram(bankKey.value))
 const shebaText = computed(() => formatShebaForDisplay(props.card.shaba_number))
 </script>
 

src/views/base/wallet/components/UISlider/index.vue

@@ -3,7 +3,7 @@
     <div ref="el" class="w-full flex flex-col relative h-full test">
       <CardItem v-for="(item,i) in props?.items" :key="i" v-model:sliderIndex="index" :card-number="item?.cart_number"
                 :color="colors[i%3]"
-                :self-index="i" :shaba="item?.shaba_number" :title="getBankDisplayName(item?.bank_name)" :active="item.sts === 2" :id="item?.id"
+                :self-index="i" :shaba="item?.shaba_number" :title="getBankDisplayName(resolveBankKey(item))" :active="item.sts === 2" :id="item?.id"
                 @cardDeleted="handleCardDeleted"
       />
       <div class="absolute bottom-1 right-0 left-0 z-100 flex justify-center items-center opacity-70 pointer-events-none">
@@ -26,7 +26,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useSwipe } from '@vueuse/core'
 import CardItem from './CardItem.vue'
 import type { Card } from '@/models/wallet'
-import { getBankDisplayName } from '@/utils/bankBranding'
+import { getBankDisplayName, resolveBankKey } from '@/utils/bankBranding'
 
 const el = ref(null)
 const container = ref<HTMLElement | null>(null)