experiment/refactor-custom-fetch

.git-blame-ignore-revs

@@ -4,6 +4,8 @@
 # in order to work execute once:
 # git config blame.ignoreRevsFile .git-blame-ignore-revs
 
+# style(eslint): apply new `eslint stylistic` rules
+008c970f3d658d0979d8b3ed8fbdea24ab70a3c7
 # chore(eslint): add rule to enforce indentation of 4 spaces for json
 898005c54ea6824a895917b4d3c2b52a2a4f72f9
 # chore(eslint): apply `sort-modules` rule

frontend/.vscode/settings.json

@@ -1,6 +1,7 @@
 {
     "conventionalCommits.scopes": [
         "BcButton",
+        "BcCopyLabel",
         "BcDataWrapper",
         "BcFormatAmount",
         "BcHeaderMegaMenu",
@@ -17,6 +18,7 @@
         "DashboardChartSummaryFilter",
         "DashboardChartSummaryTooltip",
         "DashboardGroupManagementModal",
+        "DashboardShareModal",
         "DashboardSlotViz",
         "DashboardTableClDeposits",
         "DashboardTableElConsolidations",
@@ -65,6 +67,7 @@
         "format.ts",
         "git",
         "git-blame-ignore",
+        "git-ignore",
         "healthz",
         "i18n",
         "logger",
@@ -76,12 +79,11 @@
         "useCurrency",
         "useCustomFetch",
         "useFeatureFlag",
-        "useNotificationsOverviewStore",
         "useSettingsStore",
         "useStripeProvider",
         "useWindowSize",
         "variables.scss",
-        "vscode"
+        "vscode" 
     ],
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "always"

frontend/app.vue

@@ -5,35 +5,24 @@ const { locale } = useTranslation()
 useHead(
   {
     htmlAttrs: { lang: locale.value },
-    script: [ {
-      async: false,
-      key: 'revive',
-      src: '../js/revive.min.js',
+    link: [ {
+      href: '/assets-2usdf/favicon.ico',
+      rel: 'icon',
+      type: 'image/x-icon',
     } ],
   },
-  { mode: 'client' },
 )
-useWindowSizeProvider()
 useBcToastProvider()
-
-const { latestState } = storeToRefs(useLatestStateStore())
-const exchangeRates = computed(() => latestState.value?.exchange_rates ?? [])
-const exchangeRateLengthOnTestNetworks = 1
-if (exchangeRates.value.length === exchangeRateLengthOnTestNetworks) {
-  const { selectedCurrencyMain } = useCurrency()
-  selectedCurrencyMain.value = exchangeRates.value[0].code as CurrencyCode
-}
 </script>
 
 <template>
-  <div class="min-h-full">
-    <BcDataWrapper>
-      <NuxtLoadingIndicator color="var(--primary-color)" />
-      <NuxtPage />
-      <DynamicDialog />
-      <Toast />
-    </BcDataWrapper>
-  </div>
+  <NuxtLoadingIndicator color="var(--primary-color)" />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+  <DynamicDialog />
+  <Toast />
+  <BcCookieModal />
 </template>
 
 <style lang="scss"></style>

frontend/assets/css/fonts.scss

@@ -1,72 +1,72 @@
 @font-face {
   font-family: "Montserrat";
   font-weight: 400 500 600 700;
-  src: url("/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Montserrat";
   font-weight: 400 500 600 700;
   font-style: italic;
-  src: url("/fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Roboto";
   font-weight: 300;
-  src: url("/fonts/Roboto-Light.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Roboto-Light.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Roboto";
   font-weight: 300;
   font-style: italic;
-  src: url("/fonts/Roboto-LightItalic.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Roboto-LightItalic.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Roboto";
   font-weight: 400;
-  src: url("/fonts/Roboto-Regular.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Roboto-Regular.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Roboto";
   font-weight: 400;
   font-style: italic;
-  src: url("/fonts/Roboto-Italic.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Roboto-Italic.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Roboto";
   font-weight: 500;
-  src: url("/fonts/Roboto-Medium.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Roboto-Medium.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Roboto";
   font-weight: 500;
   font-style: italic;
-  src: url("/fonts/Roboto-MediumItalic.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Roboto-MediumItalic.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Roboto";
   font-weight: 700;
-  src: url("/fonts/Roboto-Bold.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Roboto-Bold.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Roboto";
   font-weight: 700;
   font-style: italic;
-  src: url("/fonts/Roboto-BoldItalic.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Roboto-BoldItalic.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Inter";
   font-weight: 300 500;
-  src: url("/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
+  src: url("/assets-2usdf/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
 }
 
 :root {

frontend/components/BcError.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  description: TranslationKey,
+  // statusCode: number,
+  title: TranslationKey,
+}>()
+const error = useError()
+</script>
+
+<template>
+  <div class="bc-error">
+    <h1>{{ $t(title) }} ({{ error?.statusCode }})</h1>
+    <p>{{ $t(description) }}</p>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.bc-error {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/components/BcLayout.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="page">
+    <header>
+      <slot name="header" />
+    </header>
+    <slot name="banner" />
+    <main class="content">
+      <slot />
+    </main>
+    <footer>
+      <TheFooter />
+    </footer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+}
+
+.content {
+  max-width: var(--content-width);
+  margin: var(--padding) auto
+}
+</style>