From 2a8d8e56f5d52f685ae2c7471ceafc9ed638125f Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Fri, 21 Jun 2024 01:07:44 +0200
Subject: [PATCH 1/2] feat: Persona import/export

---
 package-lock.json                | 128 +++++++++----------------------
 package.json                     |   3 +-
 src/components/AlephAvatar.vue   |   7 +-
 src/components/PersonaDialog.vue |   7 +-
 src/pages/PersonaManagement.vue  | 101 ++++++++++++++++++++----
 src/utils/messages.ts            |   6 ++
 6 files changed, 140 insertions(+), 112 deletions(-)
 create mode 100644 src/utils/messages.ts

diff --git a/package-lock.json b/package-lock.json
index e4d3cea..d5d00f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,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",
@@ -5688,9 +5689,9 @@
       }
     },
     "node_modules/@react-native-community/cli-server-api/node_modules/ws": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+      "integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -6061,9 +6062,9 @@
       }
     },
     "node_modules/@react-native/dev-middleware/node_modules/ws": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+      "integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -7693,9 +7694,9 @@
       }
     },
     "node_modules/@walletconnect/jsonrpc-ws-connection/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "license": "MIT",
       "engines": {
         "node": ">=8.3.0"
@@ -10470,54 +10471,18 @@
       }
     },
     "node_modules/engine.io-client": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz",
-      "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.4.tgz",
+      "integrity": "sha512-GeZeeRjpD2qf49cZQ0Wvh/8NJNfeXkXXcoGh+F77oEAgo9gUHwT1fCRxSNU+YEEaysOJTnsFHmM5oAcPy4ntvQ==",
       "license": "MIT",
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.1",
         "engine.io-parser": "~5.2.1",
-        "ws": "~8.11.0",
+        "ws": "~8.17.1",
         "xmlhttprequest-ssl": "~2.0.0"
       }
     },
-    "node_modules/engine.io-client/node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
-    "node_modules/engine.io-client/node_modules/ws": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
-      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/engine.io-parser": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz",
@@ -14784,9 +14749,9 @@
       }
     },
     "node_modules/metro/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -16931,9 +16896,9 @@
       }
     },
     "node_modules/react-devtools-core/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -17074,9 +17039,9 @@
       "peer": true
     },
     "node_modules/react-native/node_modules/ws": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+      "integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -19067,9 +19032,9 @@
       }
     },
     "node_modules/viem": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/viem/-/viem-2.14.0.tgz",
-      "integrity": "sha512-+XnuRNONDRyMNEM+1n6Ak41Py0KBFOmirQ67wPv//ytCmNIJhmy8vqhdFREr3m51GAGgDkllh4JoAdCUUaZJLw==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/viem/-/viem-2.16.0.tgz",
+      "integrity": "sha512-qXakKfshaDOiQFgb3MgROKDa4bfr095GMUqrD2WN6UMdzH7WtlAYJ65vnrpoXpny9jXAyNoirEJeBBUF9KFNIQ==",
       "funding": [
         {
           "type": "github",
@@ -19083,9 +19048,9 @@
         "@noble/hashes": "1.3.2",
         "@scure/bip32": "1.3.2",
         "@scure/bip39": "1.2.1",
-        "abitype": "1.0.0",
+        "abitype": "1.0.4",
         "isows": "1.0.4",
-        "ws": "8.13.0"
+        "ws": "8.17.1"
       },
       "peerDependencies": {
         "typescript": ">=5.0.4"
@@ -19154,9 +19119,9 @@
       }
     },
     "node_modules/viem/node_modules/abitype": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/abitype/-/abitype-1.0.0.tgz",
-      "integrity": "sha512-NMeMah//6bJ56H5XRj8QCV4AwuW6hB6zqz2LnhhLdcWVQOsXki6/Pn3APeqxCma62nXIcmZWdu1DlHWS74umVQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/abitype/-/abitype-1.0.4.tgz",
+      "integrity": "sha512-UivtYZOGJGE8rsrM/N5vdRkUpqEZVmuTumfTuolm7m/6O09wprd958rx8kUBwVAAAhQDveGAgD0GJdBuR8s6tw==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/wevm"
@@ -19174,27 +19139,6 @@
         }
       }
     },
-    "node_modules/viem/node_modules/ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vite": {
       "version": "4.5.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
@@ -19863,9 +19807,10 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -20008,6 +19953,7 @@
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
       "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index a893405..8f76a65 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/AlephAvatar.vue b/src/components/AlephAvatar.vue
index 0c02981..fadde43 100644
--- a/src/components/AlephAvatar.vue
+++ b/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';
 
diff --git a/src/components/PersonaDialog.vue b/src/components/PersonaDialog.vue
index 43817c7..f06d414 100644
--- a/src/components/PersonaDialog.vue
+++ b/src/components/PersonaDialog.vue
@@ -55,8 +55,11 @@
 </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: {
@@ -64,7 +67,7 @@ const props = defineProps({
     default: 'Customize persona',
   },
   basePersona: {
-    type: Object,
+    type: Object as PropType<Persona>,
     required: false,
     default: undefined,
   },
diff --git a/src/pages/PersonaManagement.vue b/src/pages/PersonaManagement.vue
index 4ebc81e..9dc1ecf 100644
--- a/src/pages/PersonaManagement.vue
+++ b/src/pages/PersonaManagement.vue
@@ -38,8 +38,17 @@
         "
       />
 
-      <q-btn disabled icon="img:icons/svg/import.svg" label="Import persona" no-caps rounded unelevated>
-        <q-tooltip>Soon for token holders</q-tooltip>
+      <input ref="importPersonaUpload" accept="*.json" hidden type="file" @change="importPersona" />
+      <q-btn
+        :disabled="accountStore.ltaiBalance < 100"
+        icon="img:icons/svg/import.svg"
+        label="Import persona"
+        no-caps
+        rounded
+        unelevated
+        @click="($refs['importPersonaUpload'] as any).click()"
+      >
+        <q-tooltip v-if="tokenGatingMessage !== undefined">{{ `(${tokenGatingMessage})` }}</q-tooltip>
       </q-btn>
     </div>
 
@@ -73,11 +82,12 @@
             <q-tooltip>Edit persona</q-tooltip>
           </q-btn>
 
-          <q-btn disabled unelevated>
+          <q-btn :disabled="accountStore.ltaiBalance < 100" unelevated @click="exportPersona(persona)">
             <q-icon size="xs">
               <img alt="export" src="/icons/svg/download.svg" />
             </q-icon>
-            <q-tooltip>Export (soon for token holders)</q-tooltip>
+            <q-tooltip v-if="tokenGatingMessage === undefined">Export</q-tooltip>
+            <q-tooltip v-else>{{ `Export (${tokenGatingMessage})` }}</q-tooltip>
           </q-btn>
 
           <q-btn v-if="persona.allowEdit" unelevated @click="deletePersona(persona)">
@@ -94,15 +104,7 @@
             <q-tooltip>Hide</q-tooltip>
           </q-btn>
 
-          <q-btn
-            unelevated
-            @click="
-              () => {
-                basePersonaCreate = JSON.parse(JSON.stringify(persona));
-                createPersona = true;
-              }
-            "
-          >
+          <q-btn unelevated @click="duplicatePersona">
             <q-icon size="xs">
               <img alt="duplicate" src="/icons/svg/duplicate.svg" />
             </q-icon>
@@ -116,18 +118,26 @@
 
 <script lang="ts" setup>
 import { usePersonasStore } from 'stores/personas-store';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { v4 as uuidv4 } from 'uuid';
 import { getPersonaAvatarUrl, Persona } from 'src/utils/personas';
 import PersonaDialog from 'src/components/PersonaDialog.vue';
+import { useAccountStore } from 'stores/account';
+import { exportFile } from 'quasar';
+import { getTokenGatingMessage } from 'src/utils/messages';
+import { z } from 'zod';
+import { BasePersonaDialogProp } from 'components/PersonaDialog.vue';
 
 const personasStore = usePersonasStore();
+const accountStore = useAccountStore();
 const router = useRouter();
 
 const createPersona = ref(false);
 const editPersona = ref(false);
-const basePersonaCreate = ref<Persona | undefined>(undefined);
+const basePersonaCreate = ref<BasePersonaDialogProp | undefined>(undefined);
+
+const tokenGatingMessage = computed(() => getTokenGatingMessage(accountStore.ltaiBalance, 100));
 
 const startChatWithPersona = (persona: Persona) => {
   personasStore.persona = persona;
@@ -139,6 +149,11 @@ const startEditingPersona = (persona: Persona) => {
   editPersona.value = true;
 };
 
+const duplicatePersona = (persona: Persona) => {
+  basePersonaCreate.value = JSON.parse(JSON.stringify(persona));
+  createPersona.value = true;
+};
+
 const deletePersona = (persona: Persona) => {
   personasStore.personas = personasStore.personas.filter((userPersona) => userPersona.id !== persona.id);
   if (personasStore.persona.id === persona.id) {
@@ -154,6 +169,62 @@ const reversePersonaVisibility = (persona: Persona) => {
     return userPersona;
   });
 };
+
+const personaExportImportSchema = z.object({
+  data: z.object({
+    description: z.string(),
+    name: z.string(),
+    avatar: z.union([
+      z.object({
+        item_hash: z.string(),
+        ipfs_hash: z.string(),
+      }),
+      z.string().url(),
+    ]),
+  }),
+});
+type PersonaExportImportSchema = z.infer<typeof personaExportImportSchema>;
+
+const exportPersona = (persona: Persona) => {
+  // Avoid breaking changes on this format as much as possible to avoid breaking import of already exported files
+  const jsonData: PersonaExportImportSchema = {
+    data: {
+      description: persona.description,
+      name: persona.name,
+      avatar: persona.avatar,
+    },
+  };
+
+  const blob = new Blob([JSON.stringify(jsonData, null, 2)], {
+    type: 'application/json',
+  });
+
+  exportFile(`libertai_persona_${persona.name}.json`, blob);
+};
+
+const importPersona = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const file = (target.files as FileList)[0];
+
+  const reader = new FileReader();
+
+  reader.onload = (e) => {
+    const result = JSON.parse(e.target!.result as string);
+    const parsedFile = personaExportImportSchema.safeParse(result);
+
+    if (!parsedFile.success) {
+      console.error(parsedFile.error);
+      return;
+    }
+
+    const avatar = typeof parsedFile.data.data.avatar === 'string' ? undefined : parsedFile.data.data.avatar;
+    const personaData = { ...parsedFile.data.data, avatar };
+
+    basePersonaCreate.value = personaData;
+    createPersona.value = true;
+  };
+  reader.readAsText(file);
+};
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/utils/messages.ts b/src/utils/messages.ts
new file mode 100644
index 0000000..6f63227
--- /dev/null
+++ b/src/utils/messages.ts
@@ -0,0 +1,6 @@
+export const getTokenGatingMessage = (balance: number, required: number): string | undefined => {
+  if (required > balance) {
+    return `Connect a wallet with ${required} $LTAI`;
+  }
+  return undefined;
+};

From 0ccd139186514fd4716a9292ad58bcff4abffc4b Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Sat, 22 Jun 2024 14:32:59 +0200
Subject: [PATCH 2/2] fix: Using config wagmi connector

---
 src/components/AccountButton.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/AccountButton.vue b/src/components/AccountButton.vue
index dba690b..4255c52 100644
--- a/src/components/AccountButton.vue
+++ b/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';