initial

layers/shared/components/lang-switcher.vue

@@ -0,0 +1,31 @@
+<template>
+  <UiDropdown placement="bottom-end" trigger="hover">
+    <template #default="{ isActive }">
+      <UiButton
+        right-icon="chevron-down"
+        type="ghost"
+        size="large"
+        color="secondary"
+        style="text-transform: capitalize"
+        :state="isActive ? 'hover' : undefined"
+      >
+        {{ currentLocale }}
+      </UiButton>
+    </template>
+
+    <template #dropdown>
+      <UiDropdownItem
+        v-for="locale in locales"
+        :key="locale.code"
+        :active="currentLocale === locale.code"
+        @click="setLocale(locale.code)"
+      >
+        {{ locale.name }}
+      </UiDropdownItem>
+    </template>
+  </UiDropdown>
+</template>
+
+<script setup>
+const { locale: currentLocale, locales, setLocale } = useI18n()
+</script>

layers/shared/components/money-amount.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="money-amount">
+    <p class="money-amount__value">
+      {{ value }}
+      <span
+        v-if="showCurrency"
+        class="money-amount__currency"
+      >{{
+        currencySymbol
+      }}</span>
+    </p>
+    <p
+      v-if="showBaseAmount"
+      class="money-amount__base"
+    >
+      <span v-if="false">~</span> 0,00
+      <span class="money-amount__currency">$</span>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type Decimal from 'decimal.js'
+
+export interface Props {
+  value: Decimal.Value
+  currency: string
+  showCurrency?: boolean
+  rate?: Decimal.Value
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showCurrency: true,
+})
+
+const value = computed(() => $money.format(props.value, props.currency))
+const currencySymbol = computed(() => $money.getSymbol(props.currency))
+const showBaseAmount = computed(() => !!props.rate)
+</script>
+
+<style lang="scss">
+.money-amount {
+  display: inline-block;
+  vertical-align: middle;
+
+  &__value {
+    @include txt-r-sb('money-amount-value');
+
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+  &__currency {
+    color: $clr-grey-400;
+  }
+
+  &__base {
+    @include txt-s-m;
+
+    display: inline-block;
+    color: $clr-grey-500;
+    margin-top: 4px;
+  }
+}
+</style>

layers/shared/components/text-shortener.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="text-shortener">
+    <span
+      class="text-shortener__text"
+      @click="copyButton.copy()"
+    >
+      {{ shortenedText }}
+    </span>
+
+    <UiCopyButton
+      ref="copyButton"
+      :title="null"
+      :pressed-title="null"
+      :value="text"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({ text: { type: String, required: true } })
+
+const copyButton = ref()
+
+const shortenedText = computed(() => {
+  if (props.text.length > 12)
+    return `${props.text.substr(0, 5)}....${props.text.substr(-5, 5)}`
+
+  return props.text
+})
+</script>
+
+<style lang="scss">
+.text-shortener {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  &__text {
+    @include txt-r-sb('text-shortener');
+
+    cursor: pointer;
+  }
+}
+</style>