fix: User in top nav is not updated on edit profile (#645)

* fix: User in top nav is not updated on edit profile

* fix avatar in account modal

apps/ui/src/components/App/Topnav.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
-import { shorten } from '@/helpers/utils';
+import { getCacheHash, shorten } from '@/helpers/utils';
 
 const route = useRoute();
 const router = useRouter();
+const usersStore = useUsersStore();
 const auth = getInstance();
 const uiStore = useUiStore();
 const { modalAccountOpen } = useModal();
@@ -27,6 +28,16 @@ const loading = ref(false);
 const searchInput = ref();
 const searchValue = ref('');
 
+const user = computed(
+  () =>
+    usersStore.getUser(web3.value.account) || {
+      id: web3.value.account,
+      name: web3.value.name,
+      avatar: undefined
+    }
+);
+const cb = computed(() => getCacheHash(user.value.avatar));
+
 const hasAppNav = computed(() =>
   ['my', 'settings'].includes(String(route.matched[0]?.name))
 );
@@ -134,10 +145,10 @@ watch(
             v-if="auth.isAuthenticated.value"
             class="sm:flex items-center space-x-2"
           >
-            <UiStamp :id="web3.account" :size="18" />
+            <UiStamp :id="user.id" :size="18" :cb="cb" />
             <span
               class="hidden sm:block truncate max-w-[120px]"
-              v-text="web3.name || shorten(web3.account)"
+              v-text="user.name || shorten(user.id)"
             />
           </span>
           <template v-else>

apps/ui/src/components/Modal/Account.vue

@@ -4,6 +4,7 @@ import connectors, {
   getConnectorIconUrl,
   mapConnectorId
 } from '@/helpers/connectors';
+import { getCacheHash } from '@/helpers/utils';
 
 const win = window;
 
@@ -26,6 +27,7 @@ const emit = defineEmits<{
 
 const { open } = toRefs(props);
 const { web3, logout } = useWeb3();
+const usersStore = useUsersStore();
 const step: Ref<'connect' | null> = ref(null);
 
 const availableConnectors = computed(() => {
@@ -41,6 +43,15 @@ const availableConnectors = computed(() => {
   });
 });
 
+const user = computed(
+  () =>
+    usersStore.getUser(web3.value.account) || {
+      id: web3.value.account,
+      avatar: undefined
+    }
+);
+const cb = computed(() => getCacheHash(user.value.avatar));
+
 async function handleLogout() {
   await logout();
   emit('close');
@@ -90,7 +101,7 @@ watch(open, () => (step.value = null));
             class="w-full flex justify-center items-center space-x-2"
             @click="emit('close')"
           >
-            <UiStamp :id="web3.account" :size="18" />
+            <UiStamp :id="user.id" :size="18" :cb="cb" />
             <span>My profile</span>
           </UiButton>
         </router-link>