Expose username method from keychain

examples/starknet-react-next/src/components/ConnectWallet.tsx

@@ -1,5 +1,6 @@
 import { useAccount, useConnect, useDisconnect } from "@starknet-react/core";
 import CartridgeConnector from "@cartridge/connector"
+import { useEffect, useState } from "react";
 
 export function ConnectWallet() {
   const { connect, connectors } = useConnect();
@@ -8,9 +9,21 @@ export function ConnectWallet() {
 
   const connector = connectors[0] as unknown as CartridgeConnector;
 
+  const [username, setUsername] = useState<string>();
+  useEffect(() => {
+    if (!address) return
+    connector.username()?.then(n => setUsername(n))
+  }, [address, connector])
+
   return (
     <>
-      {address && <p>Account: {address} </p>}
+      {address && (
+        <>
+          <p>Account: {address} </p>
+          {username && <p>Username: {username}</p>}
+        </>
+      )}
+
       <div style={{ display: "flex", gap: "10px" }}>
         <button
           onClick={() => {
@@ -20,12 +33,6 @@ export function ConnectWallet() {
           {address ? "Disconnect" : "Connect"}
         </button>
 
-        {address && (
-          <div>
-            <div>username: {connector.username()}</div>
-            <div>address: {address}</div>
-          </div>
-        )}
       </div>
     </>
   );

packages/keychain/src/methods/username.ts

@@ -0,0 +1,12 @@
+import Controller from "utils/controller";
+
+export function username() {
+  return () => {
+    const controller = Controller.fromStore();
+    if (!controller) {
+      throw new Error("no controller");
+    }
+
+    return controller.username;
+  };
+}

packages/keychain/src/pages/index.tsx

@@ -36,6 +36,7 @@ import {
 } from "components";
 import { useController } from "hooks/controller";
 import { Status } from "utils/account";
+import { username } from "methods/username";
 
 type Context = Connect | Logout | Execute | SignMessage;
 
@@ -261,6 +262,7 @@ const Index: NextPage = () => {
         ),
         sessions: normalize(sessions),
         reset: normalize(() => () => setContext(undefined)),
+        username: normalize(username)
       },
     });