initial

layers/ui/components/coin/available-coins.json

@@ -0,0 +1 @@
+["1inch", "aave", "abcoin", "abrub", "ach", "acrub", "ada", "advcusd", "alfauah", "algo", "ankr", "ant", "atom", "avax", "avbrub", "bat", "bch", "btc", "btcbep20", "btg", "btt", "busd", "cardrub", "cashrub", "dai", "dash", "dent", "doge", "dot", "eos", "etc", "eth", "euro", "exmrub", "fantom", "gala", "gbp", "gcmtrub", "ghst", "gno", "gpbrub", "grntxrub", "hcbrub", "icx", "imx", "iota", "kmd", "kukrub", "link", "lsk", "ltc", "mana", "mir", "mircrub", "mkr", "monobuah", "mtsbrub", "mwrub", "near", "neo", "omg", "ont", "opnbrub", "osdbuah", "p24uah", "pmbbuah", "pmusd", "polygon", "postbrub", "prrub", "psbrub", "qtum", "quick", "qwrub", "rep", "rfbrub", "rnkbrub", "rosbrub", "rshbrub", "russtrub", "rvn", "sberrub", "sberuah", "sbprub", "shib", "sol", "stellar", "tbrub", "tcsbrub", "ton", "tru", "trx", "tusd", "uni", "usbuah", "usd coin", "usd", "usdp", "usdtomni", "vet", "waves", "wbtc", "weth", "wirerub", "wmz", "xem", "xlm", "xmr", "xrp", "xtz", "xvg", "yamrub", "yfi", "zec", "zrx"]

layers/ui/components/coin/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <img
+    v-if="src || (!src && !hideWhenNoSrc)"
+    :class="[
+      cn.b(),
+      cn.is('circle', circle),
+      cn.is('fallback', isFallback),
+      cn.is('empty', !src),
+    ]"
+    :src="src"
+    :alt="code"
+    draggable="false"
+  >
+</template>
+
+<script>
+/** FROM -> TO */
+</script>
+
+<script setup>
+// TODO: Typescript
+import { computed, toRef } from 'vue'
+import useClassname from '../../composables/use-classname'
+import AVAILABLE_COINS from './available-coins.json'
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  circle: {
+    type: Boolean,
+    default: false,
+  },
+  fallbackImg: {
+    type: String,
+    default: undefined,
+  },
+  hideWhenNoSrc: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const DIRECT_ALIASES = {
+  toncoin: 'ton',
+  bnb: 'btcbep20',
+  ftm: 'fantom',
+  matic: 'polygon',
+  avaxc: 'avax',
+  bsc: 'btcbep20',
+  btctest: 'btc',
+  lend: 'polygon',
+  rub: 'abrub',
+  poly: 'polygon',
+  usdterc20: 'usdtomni',
+}
+
+const REGEX_ALIASES = {
+  'acrub': /^acc/,
+  'usdtomni': /^usdt/,
+  'wirerub': /^wire/,
+  'eth': /^eth/,
+  'usd coin': /^usdc/,
+  'btcbep20': /^bnb/,
+  'tusd': /^tusd/,
+  'tcsbrub': /^tcs/,
+  'shib': /^shib/,
+  'dai': /^dai/,
+  'cake': /^cake/,
+}
+
+const cn = useClassname('ui-coin')
+
+const fallbackImg = toRef(props, 'fallbackImg')
+
+const name = computed(() => props.code.toLowerCase())
+const notAvailable = computed(() => !AVAILABLE_COINS.includes(name.value))
+
+const alias = computed(() => {
+  if (!notAvailable.value)
+    return null
+
+  const direct = DIRECT_ALIASES[name.value]
+
+  if (direct)
+    return direct
+
+  for (const [target, pattern] of Object.entries(REGEX_ALIASES)) {
+    if (pattern.test(name.value))
+      return target
+  }
+
+  return null
+})
+
+const isFallback = computed(
+  () => notAvailable.value && !alias.value && fallbackImg.value,
+)
+
+const src = computed(() => {
+  if (!name.value || (notAvailable.value && !alias.value))
+    return fallbackImg.value
+
+  const code = alias.value ?? name.value
+
+  return `/coins/${code}.svg`
+})
+</script>
+
+<style lang="scss">
+@use 'styles';
+</style>

layers/ui/components/coin/styles.scss

@@ -0,0 +1,23 @@
+.ui-coin {
+  --size: var(--coin-size, 32px);
+
+  position: relative;
+  display: inline-block;
+  width: var(--size);
+  height: var(--size);
+  border-radius: var(--coin-border-radius, 6px);
+  outline: 1px solid var(--coin-border-color, rgba(255, 255, 255, 0.24));
+  outline-offset: -1px;
+
+  &.is-fallback {
+    overflow: hidden;
+  }
+
+  &.is-empty {
+    visibility: hidden;
+  }
+
+  &.is-circle {
+    border-radius: 50%;
+  }
+}