feat: clear identity

components/common/IdentityForm.vue

@@ -3,7 +3,7 @@
     <Loader v-model="isLoading" :status="status" />
     <form @submit.prevent>
       <h1 class="title is-size-3">
-        {{ $i18n.t('identity.set') }}
+        {{ $i18n.t('identity.set', [getChainName(identityPrefix)]) }}
         <NeoTooltip
           :label="$i18n.t('identity.fundsReserve')"
           position="bottom"
@@ -12,11 +12,31 @@
         </NeoTooltip>
       </h1>
 
-      <p v-if="accountId" class="subtitle is-size-6">
-        <Auth />
-        <span>{{ $i18n.t('general.balance') }}: </span>
-        <Money :value="balance" inline />
-      </p>
+      <div v-if="hasIdentity" class="is-size-6">
+        <hr class="my-7" />
+        <div class="mb-4">
+          {{ $t('identity.establishedIdentity') }}
+        </div>
+        <div
+          class="is-flex is-justify-content-space-between is-align-items-flex-end">
+          <div
+            class="is-flex is-justify-content-space-between is-align-items-center">
+            <Avatar :value="accountId" :size="34" />
+            <div class="ml-4">
+              <div class="has-text-grey">{{ $t('identity.existing') }}</div>
+              <div>{{ identityData.display }}</div>
+            </div>
+          </div>
+          <NeoButton
+            :label="$i18n.t('identity.clear')"
+            class="mb-1"
+            no-shadow
+            rounded
+            size="small"
+            @click.native="deleteIdentity" />
+        </div>
+        <hr class="my-7" />
+      </div>
 
       <NeoField label="Handle">
         <NeoInput
@@ -73,16 +93,15 @@
         :disabled="disabled"
         :loading="isLoading"
         expanded
-        @click="submit" />
+        @click="setIdentity" />
     </form>
   </section>
 </template>
 
 <script lang="ts" setup>
 import { notificationTypes, showNotification } from '@/utils/notification'
-import { NeoField, NeoIcon, NeoInput, NeoTooltip } from '@kodadot1/brick'
+import { NeoButton, NeoField, NeoInput } from '@kodadot1/brick'
 import type { IdentityFields } from '@/composables/useIdentity'
-const Auth = defineAsyncComponent(() => import('@/components/shared/Auth.vue'))
 const BasicInput = defineAsyncComponent(
   () => import('@/components/shared/form/BasicInput.vue')
 )
@@ -98,9 +117,9 @@ const SubmitButton = defineAsyncComponent(
 
 const { $i18n } = useNuxtApp()
 import { useIdentityStore } from '@/stores/identity'
+import { getChainName } from '@/utils/chain'
 
-const { apiInstance } = useApi()
-const { accountId, balance } = useAuth()
+const { accountId } = useAuth()
 const { urlPrefix } = usePrefix()
 const identityStore = useIdentityStore()
 const { howAboutToExecute, isLoading, initTransactionLoader, status } =
@@ -109,7 +128,12 @@ const identity = ref<IdentityFields>({})
 const deposit = ref('0')
 const inputLengthLimit = ref(32)
 
-const { identity: identityData } = useIdentity({
+const {
+  identity: identityData,
+  identityApi,
+  identityPrefix,
+  refetchIdentity,
+} = useIdentity({
   address: accountId,
 })
 
@@ -125,6 +149,14 @@ watch(identityData, () => {
   }
 })
 
+const hasIdentity = computed(() => {
+  const { display, legal, web, twitter, riot, email } = identityData.value
+  return (
+    accountId.value &&
+    Boolean(display || legal || web || twitter || riot || email)
+  )
+})
+
 const handleUrlPrefixChange = async () => {
   deposit.value = await fetchDeposit()
 
@@ -147,23 +179,35 @@ const enhanceIdentityData = (): Record<string, any> => {
 }
 
 const fetchDeposit = async () => {
-  const api = await apiInstance.value
+  const api = await identityApi.value
   return api.consts.identity?.basicDeposit?.toString()
 }
 
-const submit = async (): Promise<void> => {
-  const api = await apiInstance.value
+const deleteIdentity = async (): Promise<void> => {
+  const api = await identityApi.value
+  initTransactionLoader()
+  const cb = api.tx.identity.clearIdentity
+  howAboutToExecute(accountId.value, cb, [], (block: string) => {
+    identity.value = {}
+    refetchIdentity()
+
+    showNotification(
+      `[Identity] You have cleared your account's identity since block ${block}`,
+      notificationTypes.success
+    )
+  })
+}
+const setIdentity = async (): Promise<void> => {
+  const api = await identityApi.value
   initTransactionLoader()
   const cb = api.tx.identity.setIdentity
   const args = [enhanceIdentityData()]
-  howAboutToExecute(accountId.value, cb, args, onSuccess)
-}
-
-const onSuccess = (block: string) => {
-  showNotification(
-    `[Identity] You are known as ${identity.value.display} since block ${block}`,
-    notificationTypes.success
-  )
+  howAboutToExecute(accountId.value, cb, args, (block: string) => {
+    showNotification(
+      `[Identity] You are known as ${identity.value.display} since block ${block}`,
+      notificationTypes.success
+    )
+  })
 }
 
 const disabled = computed(

composables/useIdentity.ts

@@ -13,15 +13,20 @@ export default function useIdentity({
   customNameOption?: string
 }) {
   const { urlPrefix } = usePrefix()
+  const { apiInstanceByPrefix } = useApi()
   const isDotAddress = computed(() => ['dot', 'ahp'].includes(urlPrefix.value))
   const id = computed(
     () =>
       address.value &&
       (isDotAddress.value
         ? accountToPublicKey(address.value)
-        : getss58AddressByPrefix(address.value, 'ksm'))
+        : getss58AddressByPrefix(address.value, 'rmrk'))
   )
 
+  const identityPrefix = computed(() => (isDotAddress.value ? 'dot' : 'rmrk'))
+
+  const identityApi = computed(() => apiInstanceByPrefix(identityPrefix.value))
+
   const identity = computed<IdentityFields>(() => data.value?.identity || {})
 
   const { data, refetch, loading } = useGraphql({
@@ -49,6 +54,9 @@ export default function useIdentity({
     twitter,
     display,
     name,
+    identityApi,
+    identityPrefix,
+    refetchIdentity: refetch,
   }
 }
 

locales/en.json

@@ -924,8 +924,11 @@
   },
   "identity": {
     "page": "Identity",
-    "set": "Create on-chain identity",
+    "set": "Create On-Chain identity on {0}",
     "click": "Click to create identity",
+    "clear": "Clear (burn)",
+    "existing" : "Existing Onchain Identity",
+    "establishedIdentity": "It appears you already established an onchain identity. Update it as needed (no new deposit needed) or delete to reclaim your deposit.",
     "handleRequired": "Your handle is required",
     "deposit": "Deposit",
     "fundsReserve": "0.0333 KSM will be reserved. These funds are returned when the identity is cleared.",

styles/global.scss

@@ -306,9 +306,10 @@ a.has-text-grey {
 }
 .border {
   @include ktheme() {
-    border: 1px solid theme('border-color');
+    border: 1px solid theme('border-color') !important;
   }
 }
+
 .no-border {
   border: none !important;
 }