cosmos-explorer/src/components/dynamic/TextElement.vue

<script lang="ts" setup>
import { isBech32Address } from '@/libs/utils';
import { useBlockchain, useFormatter } from '@/stores';
import MdEditor from 'md-editor-v3';
import { computed, onMounted, ref } from 'vue';

import { fromBase64, toHex } from '@cosmjs/encoding';

import { registry as nameMatcha } from '@leapwallet/name-matcha';

const chainStore = useBlockchain();
const props = defineProps(['value']);
const format = useFormatter();
function isMD() {
  if (
    props.value &&
    (String(props.value).indexOf('\n') > -1 ||
      String(props.value).indexOf('\\n') > -1)
  ) {
    return true;
  }
  return false;
}

function isAddress() {
  return (
    isBech32Address(props.value) &&
    String(props.value).indexOf('valoper1') === -1
  );
}

const text = computed(() => {
  if (!props.value) return '';
  const v = String(props.value);
  switch (true) {
    case v.length === 28 && v.endsWith('='): {
      return format.validator(v) || v;
    }
    // 2023-06-12T03:09:38.253756368Z
    case v.search(/^[1-9]\d{3}-\d{1,2}-\d{1,2}T\d{1,2}:\d{2}:\d{2}[.\d]*Z$/g) >
      -1: {
      return new Date(v).toLocaleString(navigator.language);
    }
    case toHexOutput.value:
      return toHex(fromBase64(v)).toUpperCase();
  }
  return v;
});

const names = ref([] as { name?: any; provider?: string }[]);

onMounted(() => {
  if (isAddress())
    nameMatcha.lookupAll(props.value).then((re) => {
      names.value = Object.keys(re)
        .map((key) => ({ name: re[key], provider: key }))
        .filter((x) => x.name);
    });
});
const toHexOutput = ref(false);
const isConvertable = computed(() => {
  return String(props.value).endsWith('=') && props.value.length !== 28;
});
</script>
<template>
  <MdEditor
    v-if="isMD()"
    :model-value="format.multiLine(value)"
    previewOnly
    class="md-editor-recover"
  ></MdEditor>
  <span v-else-if="isAddress()" class="flex">
    <RouterLink :to="`/${chainStore.chainName}/account/${text}`">{{
      text
    }}</RouterLink>
    <div v-for="{ name, provider } in names">
      <span
        class="text-xs truncate relative py-1 px-2 p2-4 w-fit ml-2 rounded text-success tooltip"
        :data-tip="provider"
        :title="provider"
      >
        <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-success"></span>
        <button>{{ name }}</button>
      </span>
    </div>
  </span>
  <span v-else class="flex"
    ><span class="break-words max-w-5xl">{{ text }}</span>
    <span
      v-if="isConvertable"
      @click="toHexOutput = !toHexOutput"
      class="ml-2 cursor-pointer"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-4 h-4"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
        />
      </svg>
    </span>
  </span>
</template>

<style lang="scss">
.md-editor-recover {
  .h1,
  h1 {
    font-size: 2rem;
  }
  .h2,
  h2 {
    font-size: 1.5rem;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
  }
  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }
  dl,
  ol,
  ul {
    margin-top: 0;
  }
  address,
  dl,
  ol,
  ul {
    margin-bottom: 1rem;
  }
  p {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  a {
    color: #666cff !important;
  }
  .h1 > a,
  .h2 > a,
  .h3 > a,
  .h4 > a,
  .h5 > a,
  .h6 > a,
  h1 > a,
  h2 > a,
  h3 > a,
  h4 > a,
  h5 > a,
  h6 > a {
    color: inherit !important;
  }
}
</style>