widthdraw and deposit

src/composables/useProductCatalog.ts

@@ -0,0 +1,49 @@
+import { computed, ref } from 'vue'
+import { getProducts } from '@/api/products'
+import type { Product } from '@/models/products'
+import {
+  catalogHasCountBasedProducts,
+  catalogHasMeltedProducts,
+  getCatalogMetalIds,
+  isSingleMetalCatalog,
+} from '@/utils/productAssets'
+
+const catalogProducts = ref<Product[]>([])
+let catalogPromise: Promise<Product[]> | null = null
+
+export function useProductCatalog() {
+  async function loadCatalog(force = false) {
+    if (!force && catalogProducts.value.length) {
+      return catalogProducts.value
+    }
+
+    if (!force && catalogPromise) {
+      return catalogPromise
+    }
+
+    catalogPromise = getProducts()
+      .then((products) => {
+        catalogProducts.value = products ?? []
+        return catalogProducts.value
+      })
+      .finally(() => {
+        catalogPromise = null
+      })
+
+    return catalogPromise
+  }
+
+  const catalogMetalIds = computed(() => getCatalogMetalIds(catalogProducts.value))
+  const hasCountBasedProducts = computed(() => catalogHasCountBasedProducts(catalogProducts.value))
+  const hasMeltedProducts = computed(() => catalogHasMeltedProducts(catalogProducts.value))
+  const isSingleMetal = computed(() => isSingleMetalCatalog(catalogMetalIds.value))
+
+  return {
+    catalogProducts,
+    catalogMetalIds,
+    hasCountBasedProducts,
+    hasMeltedProducts,
+    isSingleMetal,
+    loadCatalog,
+  }
+}