Merge pull request #15 from Libertai/reza/persona-import-export

Persona import/export

package.json

@@ -42,7 +42,8 @@
     "viem": "^2.14.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0",
-    "web3": "^4.9.0"
+    "web3": "^4.9.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.9.3",

src/components/AccountButton.vue

@@ -7,10 +7,10 @@
       no-caps
       rounded
       unelevated
-      @click="connect({ connector: injected() })"
+      @click="connect({ connector: config.connectors[0] })"
     >
       <q-icon class="text-dark" left size="xs">
-        <img src="~assets/wallet.svg" />
+        <img alt="wallet" src="~assets/wallet.svg" />
       </q-icon>
       Connect Wallet
     </q-btn>
@@ -48,7 +48,6 @@
 <script lang="ts" setup>
 import { useAccountStore } from 'stores/account';
 import { useAccount, useConnect, useDisconnect } from '@wagmi/vue';
-import { injected } from '@wagmi/connectors';
 import { watchAccount } from '@wagmi/vue/actions';
 import { config } from 'src/config/wagmi';
 import { watchEffect } from 'vue';

src/components/AlephAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="avatar-wrapper" @click="$refs.userAvatarUpload.click()">
+  <div class="avatar-wrapper" @click="($refs.userAvatarUpload as any).click()">
     <q-avatar>
       <input
         ref="userAvatarUpload"
@@ -8,7 +8,8 @@
         type="file"
         @change="
           async (event) => {
-            const file = event.target.files[0];
+            const target = event.target as HTMLInputElement;
+            const file = (target.files as FileList)[0];
             if (!file) {
               return;
             }
@@ -33,7 +34,7 @@
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { getPersonaAvatarUrl } from 'src/utils/personas';
 import { useAccountStore } from 'stores/account';
 

src/components/PersonaDialog.vue

@@ -55,16 +55,19 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, toRaw, watch } from 'vue';
+import { PropType, ref, toRaw, watch } from 'vue';
 import AlephAvatar from 'components/AlephAvatar.vue';
+import { Persona } from 'src/utils/personas';
+
+export type BasePersonaDialogProp = Partial<Pick<Persona, 'name' | 'description' | 'avatar'>>;
 
 const props = defineProps({
   title: {
     type: String,
     default: 'Customize persona',
   },
   basePersona: {
-    type: Object,
+    type: Object as PropType<Persona>,
     required: false,
     default: undefined,
   },