vue-identicon does not work with vue3

[dcolley]

• I'm submitting a ...

• Bug report
• Feature request
• Support request
• Other

• What is the current behavior and expected behavior?

vue-identicon does not render the identicon in a vue3 project.

• What is the motivation for changing the behavior?

It should be possble using composition api

• Please tell us about your environment:

  • Version:

  • Environment:

    • Node.js
    • Browser
    • Other (limited support for other environments)

  • Language:

    • JavaScript
    • TypeScript (include tsc --version)
    • Other

dependencies from package.json

    "@mdi/font": "7.0.96",
    "@polkadot/api": "^10.2.2",
    "@polkadot/vue-identicon": "^3.1.4",
    "vue": "^3.2.38",
    "vue-router": "^4.0.0",
    "vuetify": "^3.0.0",
    "vuex": "^4.1.0",
    "webfontloader": "^1.0.0"

Here is an example: Polkadot.vue

<template>
  <svg :width="size" :height="size" viewBox="0 0 64 64">
    <circle v-for="(circle, index) in circles"
      :key="index"
      :cx="circle.cx"
      :cy="circle.cy"
      :r="circle.r"
      :fill="circle.fill"
      />
  </svg>
</template>

<script lang="ts">
/**
 * @name Polkadot
 * @description The Polkadot default identicon
 */

import { defineComponent, ref, watch } from 'vue';
import { polkadotIcon } from '@polkadot/ui-shared';

export default defineComponent({
  props: ['address', 'isAlternative', 'size'],
  setup (props) {
    const { address, size, isAlternative } = props
    const circles = ref()
    circles.value = polkadotIcon(address, { isAlternative }).map(({ cx, cy, fill, r }) => {
      return {
        cx, cy, fill, r,
        width: size,
        height: size 
      }
    })
    return { circles }
  }
})
</script>

That produces:

[dcolley]

And the wrapper component looks like this:

Identicon.vue

<template>
  <component :is="componentToRender" v-bind="{ address, size, isAlternative, key }"></component>
</template>

<script lang="ts">

import { defineComponent, ref, watch, computed, h } from 'vue'
import { isHex, isU8a, u8aToHex } from '@polkadot/util'
import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'
// import { Beachball, Empty, Jdenticon, Polkadot } from './icons/index.js';
import { Beachball, Empty, Jdenticon } from '@polkadot/vue-identicon/icons'
import Polkadot from './Polkadot.vue'

// const DEFAULT_SIZE = 64;

function encodeAccount(value: string, prefix?: number) {
  try {
    const address = isU8a(value) || isHex(value)
      ? encodeAddress(value, prefix)
      : value;
    const publicKey = u8aToHex(decodeAddress(address, false, prefix))
    return { address, publicKey }
  }
  catch {
    return { address: '', publicKey: '0x' }
  }
}
/**
 * @name Identicon
 * @description The main Identicon component, taking a number of properties
 * @example
 * ```html
 * <Identicon :size="128" :theme="polkadot" :value="..." />
 * ```
 */
export default defineComponent({
  components: {
    Beachball,
    Empty,
    Jdenticon,
    Polkadot
  },
  props: ['prefix', 'isAlternative', 'size', 'theme', 'value'],
  setup (props) {
    const { prefix, isAlternative=false, size=64, theme='empty', value } = props
    const address = ref('')
    const isAlternativeIcon = ref(props.isAlternative || false)
    const publicKey = ref('0x')
    const type = ref('empty')
    const createData = function () {
      type.value = theme
      isAlternativeIcon.value = isAlternative || false
      recodeAddress()
    }
    const recodeAddress = function () {
      const encoded = encodeAccount(value);
      address.value = encoded.address;
      publicKey.value = encoded.publicKey;
    }
    watch(() => value, () => {
      recodeAddress()
    })
    const componentToRender = computed(() => type.value.charAt(0).toUpperCase() + type.value.slice(1))
    createData()
    return {
      address,
      isAlternativeIcon,
      key: publicKey,
      componentToRender
    }
  }
});
</script>

[polkadot-js-bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query.