clear-wallet/src/views/AccountsTab.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="end">
          <router-link to="/tabs/add-account">
          <ion-button>
          <ion-icon slot="icon-only" :icon="addCircleOutline"></ion-icon>
          </ion-button>
        </router-link>
          </ion-buttons>
        <ion-title>Accounts</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
    <ion-toast
    :is-open="toastState"
    @didDismiss="toastState=false"
    message="Copied to clipboard"
    :duration="1500"
  ></ion-toast>
      <ion-item v-if="loading || accounts.length < 1">
        <ion-label>No EVM accounts found</ion-label>
        <ion-button @click="goToAddAccount">Add Account</ion-button>
      </ion-item>
        <ion-list v-for="account of accounts" :key="account.address">
       <ion-item>
       <ion-label>
            {{ account.name }}
        </ion-label>
       </ion-item>
       <ion-item  @click="copyAddress(account.address, getToastRef())">
        <p style="font-size:0.7rem">{{ account.address }}</p><ion-icon :icon="copyOutline"></ion-icon>
        </ion-item>
        <ion-item>
        <ion-chip @click="viewPk(account.address)">View Pk</ion-chip>
        <ion-chip @click="deleteAccount(account.address)">Delete</ion-chip>
        <ion-chip @click="editAccount(account.address)">Edit Name</ion-chip>
        </ion-item>
        </ion-list>


        <ion-modal
        :is-open="pkModal"
        @didDismiss="shownPk=''"
      >
          <ion-header>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-button @click="pkModal=false">Close</ion-button>
              </ion-buttons>
              <ion-title>View PK</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content class="ion-padding">
        <ion-item @click="copyAddress(shownPk, getToastRef())" button>
        <ion-icon style="margin-right: 0.5rem;" :icon="copyOutline" />
        <ion-label button>PK</ion-label>
        <ion-input id="pastePk" v-model="shownPk" readonly></ion-input>
      </ion-item>
          </ion-content>
      </ion-modal>


    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from "vue";
import { getAccounts, copyAddress, replaceAccounts, getSettings, clearPk, getSelectedAccount, saveSelectedAccount } from "@/utils/platform"
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonIcon,
  IonList,
  IonItem,
  IonLabel,
  IonChip,
  IonButtons,
  IonButton,
  onIonViewWillEnter,
  IonToast,
  modalController,
  IonInput,
  IonModal
} from "@ionic/vue";

import { addCircleOutline, copyOutline } from "ionicons/icons";
import router from "@/router";
import UnlockModal from '@/views/UnlockModal.vue'

import type { Account, Settings } from '@/extension/types'

export default defineComponent({
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonIcon,
    IonList,
    IonItem,
    IonLabel,
    IonChip,
    IonButtons,
  IonButton,
  IonToast,
  IonInput,
  IonModal
  },
  setup () {
    const accounts = ref([]) as Ref<Account[]>
    const loading = ref(true)
    const toastState = ref(false)
    const shownPk = ref('')
    const pkModal = ref(false)
    const settings = ref({}) as Ref<Settings>

    const getToastRef = () => toastState
    
    const loadData = () => {
      const pAccounts = getAccounts()
      const pGetSettings = getSettings()
      Promise.all([pAccounts, pGetSettings]).then(( res )  => {
        accounts.value = res[0]
        settings.value = res[1]
        loading.value = false
      })
    }

    const deleteAccount = async (address: string) => {
        loading.value = true
        if(settings.value.enableStorageEnctyption) {
          const modalR = await openModal('delAcc')
          if(!modalR){
            return
          }
        }
        const findIndex = accounts.value.findIndex(a => a.address === address)
        const selectedAccount = await getSelectedAccount()
        const pArr: Array<Promise<void>> = []
        if (findIndex !== -1) {
          accounts.value.splice(findIndex, 1)
          pArr.push(replaceAccounts([...accounts.value]))
        }
        if(selectedAccount.address === address) {
          pArr.push(saveSelectedAccount({ name: '', pk: '', encPk: '', address: ''}))
        }
        await Promise.all(pArr)
        loading.value = false
    }

    const editAccount = (address: string) => {
      router.push(`add-account/edit/${address}`)
    }

    const goToAddAccount = () => {
      router.push("/tabs/add-account");
    };

    onIonViewWillEnter(() => {
        loadData()
      })

      const openModal = async (type: string) => {
        const modal = await modalController.create({
          component: UnlockModal,
          componentProps: {
            unlockType: type
          }

        });
        modal.present();
        const { role } = await modal.onWillDismiss();
        if(role === 'confirm') return true
        return false
    }

      const viewPk = async (addr: string) => {
        let pk = ''
        const account = accounts.value.find(a => a.address === addr)
        if(settings.value.enableStorageEnctyption) {
           if(account?.encPk) {
            const modalR = await openModal('viewPk')
            if(modalR){
              const account = (await getAccounts()).find(a => a.address === addr)
              pk = account?.pk ?? ''
            }
           }else {
            pk = account?.pk ?? ''
           }
        }else {
          pk = account?.pk ?? ''
        }
        if(pk) {
          shownPk.value = pk
          if(settings.value.encryptAfterEveryTx) {
            clearPk()
          }
          pkModal.value = true
        }
      }

      return {
        accounts,
        addCircleOutline,
        copyOutline,
        toastState,
        copyAddress,
        getToastRef,
        deleteAccount,
        editAccount,
        loading,
        goToAddAccount,
        viewPk,
        pkModal,
        shownPk
      }

  }
});
</script>