Add method for get passPhrase and generation hex for account logo

src/components/DropdownProfile.jsx

@@ -1,12 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
+import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
 import Transition from '../utils/Transition';
-
+import {registrationStore} from "../store/registrationStore";
+import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import UserAvatar from '../images/user-avatar-32.png';
 
-function DropdownProfile({
+ const DropdownProfile = observer(({
   align
-}) {
+})=>{
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
@@ -43,7 +45,7 @@ function DropdownProfile({
         onClick={() => setDropdownOpen(!dropdownOpen)}
         aria-expanded={dropdownOpen}
       >
-        <img className="w-8 h-8 rounded-full" src={localStorage.getItem('svgAvatar') || UserAvatar} width="32" height="32" alt="User" />
+        <img className="w-8 h-8 rounded-full" src={generateSvgAvatar(registrationStore.pubKey) || UserAvatar} width="32" height="32" alt="User" />
         <div className="flex items-center truncate">
           <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">Acme Inc.</span>
           <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
@@ -95,6 +97,6 @@ function DropdownProfile({
       </Transition>
     </div>
   )
-}
+})
 
 export default DropdownProfile;