Merge pull request #85 from yeagerai/fix/ui-fixes

Fix/UI fixes

Author: cristiam86

frontend/package-lock.json

@@ -28,6 +28,7 @@
     "splitpanes": "^3.1.5",
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.1",
+    "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.21",
     "vue-router": "^4.0.13",
     "vue3-tour": "^0.3.4"

frontend/package.json

@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36">
+        <path
+            d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
+    </svg>
+</template>

frontend/public/images/avatars/avatar-1.png

@@ -0,0 +1,6 @@
+<template>
+    <svg fill="#000000" width="24px" height="24px" viewBox="0 0 0.6 0.6" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M0.3 0c0.166 0 0.3 0.134 0.3 0.3s-0.134 0.3 -0.3 0.3S0 0.466 0 0.3 0.134 0 0.3 0m0.133 0.18c-0.011 0 -0.029 0.006 -0.113 0.041a14.55 14.55 0 0 0 -0.177 0.075q-0.022 0.008 -0.023 0.017c-0.001 0.01 0.014 0.014 0.033 0.02 0.016 0.005 0.036 0.011 0.047 0.011q0.015 0 0.033 -0.012 0.124 -0.083 0.128 -0.084c0.002 0 0.004 -0.001 0.006 0.001 0.002 0.002 0.002 0.004 0.001 0.005 -0.002 0.006 -0.079 0.076 -0.084 0.081l-0.002 0.002c-0.017 0.016 -0.033 0.027 -0.004 0.046 0.026 0.017 0.041 0.028 0.068 0.045 0.017 0.011 0.031 0.024 0.048 0.023 0.008 -0.001 0.017 -0.008 0.021 -0.031 0.01 -0.053 0.03 -0.168 0.034 -0.216a0.051 0.051 0 0 0 -0.001 -0.012 0.013 0.013 0 0 0 -0.004 -0.008c-0.004 -0.003 -0.009 -0.004 -0.012 -0.004" />
+    </svg>
+</template>

frontend/public/logo.png

@@ -16,7 +16,8 @@ const toogleMode = () => {
     <header
         class="flex justify-between items-center p-2 border-b border-b-slate-500 dark:border-b-white/60 dark:bg-zinc-800">
         <a href="/">
-            <img alt="GenLayer Logo" class="logo" src="@/assets/logo.png" width="125" height="125" />
+            <img v-if="uiStore.mode === 'light'" alt="GenLayer Logo" class="logo" src="@/assets/images/logo.png" width="125" height="125"/>
+            <img v-else alt="GenLayer Logo" class="logo" src="@/assets/images/logo_white.png" width="125" height="125"/>
         </a>
         <div class="flex items-center">
             <RouterLink :to="{ name: 'profile' }" class="text-sm text-primary">

frontend/src/assets/icons/DiscordIcon.vue

@@ -2,7 +2,6 @@
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import { ref, shallowRef, watch, computed } from 'vue'
 import { pythonSyntaxDefinition } from '@/utils'
-import { PlayIcon } from '@heroicons/vue/24/solid';
 import { useMainStore, useUIStore } from '@/stores';
 import { type ContractFile } from '@/types';
 

frontend/src/assets/icons/TelegramIcon.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { InputTypesMap } from '@/utils'
+import { useMainStore } from '@/stores';
 
 interface ContractMethod {
   name: string
@@ -19,12 +20,13 @@ interface Props {
   abi?: Abi
 }
 
+const store = useMainStore()
 const props = defineProps<Props>()
 const emit = defineEmits(['callMethod'])
 
 const methodList = computed<ContractMethod[]>(() => {
   return Object.entries(props.abi?.methods || {})
-    .filter(m => m[0] !== 'call_llm')
+    .filter(m => !['call_llm', '__init__'].includes(m[0]))
     .map(m => ({
       name: m[0],
       inputs: m[1].inputs,
@@ -59,14 +61,28 @@ const onMethodChange = (event: Event) => {
   } else
     method.value = undefined
 }
+
+const setCurentUserAddress = (event: Event) => {
+  if ((event.target as HTMLSelectElement)?.value) {
+    store.currentUserAddress = (event.target as HTMLSelectElement)?.value
+  }
+}
 </script>
 
 <template>
   <div class="flex flex-col px-2 mt-6 py-2 w-full bg-slate-100">
     <h5 class="text-sm">Execute transactions</h5>
   </div>
   <div class="flex flex-col p-2 overflow-y-auto">
-    <div class="flex justify-start w-full">
+    <div class="flex flex-col items-start w-full">
+      <p>Current Account:</p>
+      <select name="" id="" @change="setCurentUserAddress" class="text-xs w-full" :value="store.currentUserAddress">
+        <option v-for="account in store.accounts" :key="account" :value="account">
+          {{ account }}
+        </option>
+      </select>
+    </div>
+    <div class="flex justify-start w-full mt-4">
       <select name="" id="" @change="onMethodChange" class="w-full">
         <option value="">Select a method</option>
         <option v-for="method in methodList" :key="method.name" :value="method.name">