--wip--

gobitfly · Feb 5, 2025 · 3f20e65 · 3f20e65
1 parent 1cfc54f
commit 3f20e65
Show file tree

Hide file tree

Showing 50 changed files with 14,660 additions and 15,435 deletions.
diff --git a/frontend/components/bc/BcCurrencySelection.vue b/frontend/components/bc/BcCurrencySelection.vue
@@ -1,43 +1,42 @@
 <script setup lang="ts">
-import type { Currency } from '~/types/currencies'
-
-defineProps<{
-  showCurrencyIcon: boolean,
-}>()
+import type { CurrencyCode } from '~/types/currencies'
 
 const {
-  currency, setCurrency, withLabel,
+  exchangeRates,
+  getCurrencyName,
+  selectedCurrencyMain,
 } = useCurrency()
+const availableCurrencies = computed(
+  () => exchangeRates.value.filter(({ code }) => code !== selectedCurrencyMain.value),
+)
 </script>
 
 <template>
   <BcDropdown
-    v-model="currency"
-    :options="withLabel"
-    option-value="currency"
-    option-label="label"
+    v-model="selectedCurrencyMain"
+    :options="availableCurrencies"
+    option-value="code"
+    option-label="currency"
     variant="header"
-    @update:model-value="(currency: Currency) => setCurrency(currency)"
+    @update:model-value="(currencyCode: CurrencyCode) => selectedCurrencyMain = currencyCode"
   >
     <template #value>
       <span class="item in-header">
         <span
-          v-if="showCurrencyIcon"
           class="icon"
         >
-          <IconCurrency
-            v-if="currency"
-            :currency
-          /> </span>{{ currency }}
+          <BcIconCurrency :currency-code="selectedCurrencyMain" />
+        </span>
+        {{ selectedCurrencyMain }}
       </span>
     </template>
-    <template #option="slotProps">
+    <template #option="{ code }">
       <span class="item">
-        <span class="label">{{ slotProps.label }}</span>
-        <span class="currency">{{ slotProps.currency }}</span>
         <span class="icon">
-          <IconCurrency :currency="slotProps.currency" />
+          <BcIconCurrency :currency-code="code" />
         </span>
+        <span class="currency">{{ code }}</span>
+        <span class="label">({{ getCurrencyName(code) }})</span>
       </span>
     </template>
   </BcDropdown>
@@ -47,7 +46,7 @@ const {
 .item {
   display: flex;
   justify-content: space-between;
-  gap: var(--padding);
+  gap: var(--padding-small);
 
   &.in-header {
     justify-content: flex-end;
@@ -61,11 +60,6 @@ const {
     flex-grow: 1;
   }
 
-  .currency {
-    width: 30px;
-    text-align: right;
-  }
-
   .icon {
     height: 20px;
     width: 30px;

diff --git a/frontend/components/bc/format/FormatTimePassed.vue b/frontend/components/bc/format/FormatTimePassed.vue
@@ -10,7 +10,7 @@ const {
 } = useFormat()
 
 interface Props {
-  format?: 'global-setting' | AgeFormat,
+  format?: AgeFormat,
   noUpdate?: boolean,
   type?: 'epoch' | 'go-timestamp' | 'slot', // we can add other types later when needed, we default to epoch
   unitLength?: StringUnitLength,
@@ -19,13 +19,13 @@ interface Props {
 const props = defineProps<Props>()
 const { t: $t } = useTranslation()
 const { timestamp } = useDate()
-const { setting } = useGlobalSetting<AgeFormat>('bc-age-format')
+const { ageFormat } = storeToRefs(useSettingsStore())
 
 const initTs = ref(timestamp.value) // store the initial timestamp, in case we don't want to auto update
 
 const mappedSetting = computed(() => {
-  if (!props.format || props.format === 'global-setting') {
-    return setting.value
+  if (!props.format) {
+    return ageFormat.value
   }
   return props.format || 'relative'
 })

diff --git a/frontend/components/bc/header/MainHeader.vue b/frontend/components/bc/header/MainHeader.vue
@@ -14,7 +14,8 @@ defineProps<{
   isHomePage: boolean,
   minimalist: boolean,
 }>()
-const { latestState } = useLatestStateStore()
+const store = useLatestStateStore()
+const { latestState } = storeToRefs(store)
 const {
   currentNetwork,
   getEpochFromSlot,
@@ -25,7 +26,7 @@ const {
 } = useUserStore()
 const {
   available, currency, rates,
-} = useCurrency()
+} = useCurrencyOld()
 const { width } = useWindowSize()
 const { t: $t } = useTranslation()
 const { promoCode } = usePromoCode()

diff --git a/frontend/components/bc/icon/BcIconCurrency.vue b/frontend/components/bc/icon/BcIconCurrency.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { CurrencyCode } from '~/types/currencies'
+
+defineProps<{
+  currencyCode: CurrencyCode,
+}>()
+</script>
+
+<template>
+  <BcIconFlagAu v-if="currencyCode === 'AUD'" />
+  <BcIconFlagCa v-if="currencyCode === 'CAD'" />
+  <BcIconFlagCn v-if="currencyCode === 'CNY'" />
+  <BcIconFlagEu v-if="currencyCode === 'EUR'" />
+  <BcIconFlagGb v-if="currencyCode === 'GBP'" />
+  <BcIconFlagJp v-if="currencyCode === 'JPY'" />
+  <BcIconFlagUs v-if="currencyCode === 'USD'" />
+  <BcIconCryptoXdai v-if="currencyCode === 'xDAI' || currencyCode === 'DAI'" />
+  <BcIconCryptoGno v-if="currencyCode === 'GNO' || currencyCode === 'mGNO'" />
+  <BcIconCryptoEth
+    v-if="currencyCode === 'ETH'"
+    color-mode="currentColor"
+  />
+</template>
diff --git a/frontend/components/bc/icon/crypto/BcIconCryptoEth.vue b/frontend/components/bc/icon/crypto/BcIconCryptoEth.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const { colorMode = 'colored' } = defineProps<{
+  colorMode?: 'colored' | 'currentColor' | 'dark' | 'light',
+}>()
+
+const fill = computed(() => {
+  if (colorMode === 'currentColor') return 'currentColor'
+  if (colorMode === 'dark') return '#111827'
+  if (colorMode === 'light') return '#F3F4F6'
+  return undefined
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 12 12"
+  ><path
+    :fill="fill ?? '#343434'"
+    d="m6 0-.08.27v7.94l.08.08L9.5 6.1 6 0Z"
+  /><path
+    :fill="fill ?? '#8C8C8C'"
+    d="M6 0 2.5 6.11 6 8.3V0Z"
+  /><path
+    :fill="fill ?? '#3C3C3B'"
+    d="m6 8.99-.05.05v2.83L6 12l3.5-5.19L6 8.99Z"
+  /><path
+    :fill="fill ?? '#8C8C8C'"
+    d="M6 12V8.99L2.5 6.8 6 12Z"
+  /><path
+    :fill="fill ?? '#141414'"
+    d="M6 8.29 9.5 6.1 6 4.44v3.85Z"
+  /><path
+    :fill="fill ?? '#393939'"
+    d="M2.5 6.11 6 8.3V4.44L2.5 6.1Z"
+  /></svg>
+</template>
diff --git a/frontend/components/bc/icon/crypto/BcIconCryptoGno.vue b/frontend/components/bc/icon/crypto/BcIconCryptoGno.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 12 12"
+  ><path
+    fill="currentColor"
+    d="M3.45 6.98c.33 0 .65-.1.91-.3l-2.09-2.1a1.5 1.5 0 0 0 1.18 2.4ZM10.04 5.5c0-.34-.11-.66-.31-.92l-2.1 2.1a1.49 1.49 0 0 0 2.4-1.19Z"
+  /><path
+    fill="currentColor"
+    d="m11.13 3.05-.96.95c.78.92.65 2.29-.28 3.05-.82.67-2 .67-2.83 0L6 8.1 4.94 7.06c-.93.76-2.32.64-3.1-.28a2.13 2.13 0 0 1 0-2.77l-.5-.49-.47-.47A5.8 5.8 0 0 0 0 6.11C0 9.36 2.69 12 6 12s6-2.64 6-5.9a5.8 5.8 0 0 0-.87-3.05Z"
+  /><path
+    fill="currentColor"
+    d="M10.28 1.82a5.93 5.93 0 0 0-8.97.49L6 6.98l4.7-4.67a5.7 5.7 0 0 0-.42-.49ZM6 .77a5.1 5.1 0 0 1 3.64 1.5L6 5.89 2.36 2.27A5.1 5.1 0 0 1 6 .77Z"
+  /></svg>
+</template>
diff --git a/frontend/components/bc/icon/crypto/BcIconCryptoXdai.vue b/frontend/components/bc/icon/crypto/BcIconCryptoXdai.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- https://github.com/spothq/cryptocurrency-icons -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+  ><g
+    fill="none"
+    fill-rule="evenodd"
+  ><circle
+    cx="16"
+    cy="16"
+    r="16"
+    fill="#f4b731"
+    fill-rule="nonzero"
+  /><path
+    fill="#fff"
+    d="M9.28 8h6.55c3.98 0 7 2.12 8.13 5.2H26v1.85h-1.61q.05.45.05.9V16q0 .51-.06 1H26v1.87h-2.08C22.77 21.9 19.77 24 15.83 24H9.28v-5.13H7V17h2.28v-1.96H7V13.2h2.28zm1.83 10.87v3.46h4.72c2.91 0 5.08-1.39 6.08-3.46zM22.47 17H11.11v-1.96h11.37q.06.46.06.95v.04q0 .5-.07.97zm-6.64-7.35c2.93 0 5.1 1.43 6.1 3.53H11.1V9.67h4.72z"
+  /></g></svg>
+</template>
diff --git a/frontend/components/bc/icon/flag/BcIconFlagAu.vue b/frontend/components/bc/icon/flag/BcIconFlagAu.vue
@@ -0,0 +1,25 @@
+<template>
+  <!-- https://github.com/lipis/flag-icons -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 480"
+  ><path
+    fill="#00008b"
+    d="M0 0h640v480H0z"
+  /><path
+    fill="#fff"
+    d="m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z"
+  /><path
+    fill="red"
+    d="M212 140.5 320 220v20l-135.5-99.5zm-92 10 3 17.5-96 72H0zM320 0v1.5l-124.5 94 1-22L295 0zM0 0l119.5 88h-30L0 21z"
+  /><path
+    fill="#fff"
+    d="M120.5 0v240h80V0zM0 80v80h320V80z"
+  /><path
+    fill="red"
+    d="M0 96.5v48h320v-48zM136.5 0v240h48V0z"
+  /><path
+    fill="#fff"
+    d="m527 396.7-20.5 2.6 2.2 20.5-14.8-14.4-14.7 14.5 2-20.5-20.5-2.4 17.3-11.2-10.9-17.5 19.6 6.5 6.9-19.5 7.1 19.4 19.5-6.7-10.7 17.6zm-3.7-117.2 2.7-13-9.8-9 13.2-1.5 5.5-12.1 5.5 12.1 13.2 1.5-9.8 9 2.7 13-11.6-6.6zm-104.1-60-20.3 2.2 1.8 20.3-14.4-14.5-14.8 14.1 2.4-20.3-20.2-2.7 17.3-10.8-10.5-17.5 19.3 6.8L387 178l6.7 19.3 19.4-6.3-10.9 17.3 17.1 11.2ZM623 186.7l-20.9 2.7 2.3 20.9-15.1-14.7-15 14.8 2.1-21-20.9-2.4 17.7-11.5-11.1-17.9 20 6.7 7-19.8 7.2 19.8 19.9-6.9-11 18zm-96.1-83.5-20.7 2.3 1.9 20.8-14.7-14.8-15.1 14.4 2.4-20.7-20.7-2.8 17.7-11L467 73.5l19.7 6.9 7.3-19.5 6.8 19.7 19.8-6.5-11.1 17.6zM234 385.7l-45.8 5.4 4.6 45.9-32.8-32.4-33 32.2 4.9-45.9-45.8-5.8 38.9-24.8-24-39.4 43.6 15 15.8-43.4 15.5 43.5 43.7-14.7-24.3 39.2 38.8 25.1Z"
+  /></svg>
+</template>
diff --git a/frontend/components/bc/icon/flag/BcIconFlagCa.vue b/frontend/components/bc/icon/flag/BcIconFlagCa.vue
@@ -0,0 +1,13 @@
+<template>
+  <!-- https://github.com/lipis/flag-icons -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 480"
+  ><path
+    fill="#fff"
+    d="M150.1 0h339.7v480H150z"
+  /><path
+    fill="#d52b1e"
+    d="M-19.7 0h169.8v480H-19.7zm509.5 0h169.8v480H489.9zM201 232l-13.3 4.4 61.4 54c4.7 13.7-1.6 17.8-5.6 25l66.6-8.4-1.6 67 13.9-.3-3.1-66.6 66.7 8c-4.1-8.7-7.8-13.3-4-27.2l61.3-51-10.7-4c-8.8-6.8 3.8-32.6 5.6-48.9 0 0-35.7 12.3-38 5.8l-9.2-17.5-32.6 35.8c-3.5.9-5-.5-5.9-3.5l15-74.8-23.8 13.4q-3.2 1.3-5.2-2.2l-23-46-23.6 47.8q-2.8 2.5-5 .7L264 130.8l13.7 74.1c-1.1 3-3.7 3.8-6.7 2.2l-31.2-35.3c-4 6.5-6.8 17.1-12.2 19.5s-23.5-4.5-35.6-7c4.2 14.8 17 39.6 9 47.7"
+  /></svg>
+</template>
diff --git a/frontend/components/bc/icon/flag/BcIconFlagCn.vue b/frontend/components/bc/icon/flag/BcIconFlagCn.vue
@@ -0,0 +1,39 @@
+<template>
+  <!-- https://github.com/lipis/flag-icons -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 480"
+  ><defs><path
+    id="a"
+    fill="#ff0"
+    d="M-.6.8 0-1 .6.8-1-.3h2z"
+  /></defs><path
+    fill="#ee1c25"
+    d="M0 0h640v480H0z"
+  /><use
+    width="30"
+    height="20"
+    href="#a"
+    transform="matrix(71.9991 0 0 72 120 120)"
+  /><use
+    width="30"
+    height="20"
+    href="#a"
+    transform="matrix(-12.33562 -20.5871 20.58684 -12.33577 240.3 48)"
+  /><use
+    width="30"
+    height="20"
+    href="#a"
+    transform="matrix(-3.38573 -23.75998 23.75968 -3.38578 288 95.8)"
+  /><use
+    width="30"
+    height="20"
+    href="#a"
+    transform="matrix(6.5991 -23.0749 23.0746 6.59919 288 168)"
+  /><use
+    width="30"
+    height="20"
+    href="#a"
+    transform="matrix(14.9991 -18.73557 18.73533 14.99929 240 216)"
+  /></svg>
+</template>
diff --git a/frontend/components/bc/icon/flag/BcIconFlagEu.vue b/frontend/components/bc/icon/flag/BcIconFlagEu.vue
@@ -0,0 +1,70 @@
+<template>
+  <!-- https://github.com/lipis/flag-icons -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="640"
+    height="480"
+    viewBox="0 0 640 480"
+  ><defs><g id="flagEu4x30"><g id="flagEu4x31"><path
+    id="flagEu4x32"
+    d="m0-1l-.3 1l.5.1z"
+  /><use
+    href="#flagEu4x32"
+    transform="scale(-1 1)"
+  /></g><g id="flagEu4x33"><use
+    href="#flagEu4x31"
+    transform="rotate(72)"
+  /><use
+    href="#flagEu4x31"
+    transform="rotate(144)"
+  /></g><use
+    href="#flagEu4x33"
+    transform="scale(-1 1)"
+  /></g></defs><path
+    fill="#039"
+    d="M0 0h640v480H0z"
+  /><g
+    fill="#fc0"
+    transform="translate(320 242.3)scale(23.7037)"
+  ><use
+    width="100%"
+    height="100%"
+    y="-6"
+    href="#flagEu4x30"
+  /><use
+    width="100%"
+    height="100%"
+    y="6"
+    href="#flagEu4x30"
+  /><g id="flagEu4x34"><use
+    width="100%"
+    height="100%"
+    x="-6"
+    href="#flagEu4x30"
+  /><use
+    width="100%"
+    height="100%"
+    href="#flagEu4x30"
+    transform="rotate(-144 -2.3 -2.1)"
+  /><use
+    width="100%"
+    height="100%"
+    href="#flagEu4x30"
+    transform="rotate(144 -2.1 -2.3)"
+  /><use
+    width="100%"
+    height="100%"
+    href="#flagEu4x30"
+    transform="rotate(72 -4.7 -2)"
+  /><use
+    width="100%"
+    height="100%"
+    href="#flagEu4x30"
+    transform="rotate(72 -5 .5)"
+  /></g><use
+    width="100%"
+    height="100%"
+    href="#flagEu4x34"
+    transform="scale(-1 1)"
+  /></g></svg>
+</template>