Little fix

src/common/components/masa-interface/pages/connected/index.tsx

@@ -3,26 +3,18 @@ import { useMasa } from '../../../../helpers/provider/use-masa';
 import { MasaLoading } from '../../../masa-loading';
 
 export const InterfaceConnected = () => {
-  const { masa, handleLogout, closeModal, company } = useMasa();
-  const [loading, setLoading] = useState(false);
-
-  const [soulnames, setSoulnames] = useState<any[] | undefined | null>(null);
+  const {
+    handleLogout,
+    closeModal,
+    company,
+    soulnames,
+    loadSoulnames,
+    loading,
+  } = useMasa();
 
   useEffect(() => {
-    (async () => {
-      try {
-        setLoading?.(true);
-
-        const soulnameList = await masa?.soulNames.list();
-        setLoading?.(false);
-
-        setSoulnames(soulnameList);
-      } catch (e) {
-        console.log(e);
-        setLoading?.(false);
-      }
-    })();
-  }, [masa, setSoulnames, setLoading]);
+    loadSoulnames?.();
+  }, [loadSoulnames]);
 
   const name = useMemo(() => {
     if (soulnames?.length) {

src/common/helpers/provider/masa-context.tsx

@@ -40,6 +40,8 @@ export interface MasaShape {
   handleCreateCreditReport?: () => void;
   creditReports?: any[] | null;
   loadCreditReports?: () => void;
+  soulnames?: any[] | null;
+  loadSoulnames?: () => void;
 }
 
 export const MasaContextProvider = ({
@@ -63,9 +65,28 @@ export const MasaContextProvider = ({
   const [modalCallback, setModalCallback] = useState<any>(null);
 
   const [creditReports, setCreditReports] = useState<any>(null);
+  const [soulnames, setSoulnames] = useState<any[] | null>(null);
 
   const [scope, setScope] = useState<string[]>([]);
 
+  const loadSoulnames = useCallback(async () => {
+    try {
+      setLoading?.(true);
+
+      const soulnameList = await masaInstance?.soulNames.list();
+      setLoading?.(false);
+
+      setSoulnames(soulnameList ?? null);
+    } catch (e) {
+      console.log(e);
+      setLoading?.(false);
+    }
+  }, [masaInstance, setSoulnames, setLoading]);
+
+  useEffect(() => {
+    loadSoulnames();
+  }, [loadSoulnames]);
+
   useEffect(() => {
     if (externalSigner) {
       setProvider(externalSigner);
@@ -241,6 +262,8 @@ export const MasaContextProvider = ({
     handleCreateCreditReport,
     creditReports,
     loadCreditReports,
+    soulnames,
+    loadSoulnames,
   };
 
   return (