Cartridge controller username

keep-starknet-strange · Jan 19, 2025 · dbd932d · dbd932d
1 parent 1c4c3fe
commit dbd932d
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 31 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -191,7 +191,13 @@ function App() {
   const [usingSessionKeys, setUsingSessionKeys] = useState(false);
   const [queryAddress, setQueryAddress] = useState('0');
   const [connected, setConnected] = useState(false); // TODO: change to only devnet
+  const [isCartridgeConnected, setIsCartridgeConnected] = useState(false);
   useEffect(() => {
+    if (isCartridgeConnected) {
+      // TODO
+      setQueryAddress('123');
+      return;
+    }
     if (devnetMode) {
       if (connected) {
         setQueryAddress(
@@ -210,7 +216,7 @@ function App() {
         setAddress(connectorData.account);
       }
     }
-  }, [connectorData, connected]);
+  }, [connectorData, connected, isCartridgeConnected]);
 
   // Contracts
   // TODO: Pull addrs from api?
@@ -1464,6 +1470,8 @@ function App() {
           }
         >
           <TabPanel
+            isCartridgeConnected={isCartridgeConnected}
+            setIsCartridgeConnected={setIsCartridgeConnected}
             isHome={isHome}
             openedWorldId={openedWorldId}
             setOpenedWorldId={setOpenedWorldId}

diff --git a/frontend/src/tabs/TabPanel.js b/frontend/src/tabs/TabPanel.js
@@ -369,6 +369,8 @@ const TabPanel = (props) => {
             {props.activeTab === 'Account' && (
               <div>
                 <Account
+                  isCartridgeConnected={props.isCartridgeConnected}
+                  setIsCartridgeConnected={props.setIsCartridgeConnected}
                   address={props.address}
                   account={props.account}
                   usingSessionKeys={props.usingSessionKeys}

diff --git a/frontend/src/tabs/account/Account.js b/frontend/src/tabs/account/Account.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { constants } from 'starknet';
-import { useConnect, useDisconnect } from '@starknet-react/core';
+import { useAccount, useConnect, useDisconnect } from '@starknet-react/core';
 import './Account.css';
 import BasicTab from '../BasicTab.js';
 import '../../utils/Styles.css';
@@ -18,11 +18,18 @@ import BraavosIcon from '../../resources/icons/Braavos.png';
 const Account = (props) => {
   const { connect, connectors } = useConnect();
   const { disconnect } = useDisconnect();
+  const { address: reactAddress } = useAccount();
   const connector = connectors[0];
 
   const doConnect = async () => {
     const conn = connector;
     connect({ connector: conn });
+    props.setIsCartridgeConnected(true);
+  };
+
+  const doDisconnect = async () => {
+    disconnect();
+    props.setIsCartridgeConnected(false);
   };
 
   const [username, setUsername] = useState('');
@@ -102,13 +109,24 @@ const Account = (props) => {
 
   const [addressShort, setAddressShort] = useState('');
   useEffect(() => {
-    if (!props.address) return;
-    setAddressShort(
-      props.address
-        ? `${props.address.slice(0, 6)}...${props.address.slice(-4)}`
-        : ''
-    );
-  }, [props.address]);
+    if (props.isCartridgeConnected) {
+      if (!reactAddress) return;
+      setAddressShort(
+        reactAddress
+          ? `${reactAddress.slice(0, 6)}...${reactAddress.slice(-4)}`
+          : ''
+      );
+      connector.username()?.then((n) => setUsername(n));
+      return;
+    } else {
+      if (!props.address) return;
+      setAddressShort(
+        props.address
+          ? `${props.address.slice(0, 6)}...${props.address.slice(-4)}`
+          : ''
+      );
+    }
+  }, [props.address, reactAddress, props.isCartridgeConnected, connector]);
 
   const [userAwards, setUserAwards] = useState([]);
   const [claimText, setClaimText] = useState('');
@@ -417,7 +435,7 @@ const Account = (props) => {
             <div
               className='Text__medium Button__primary Account__login__button'
               onClick={() => {
-                props.address ? disconnect() : doConnect();
+                props.address ? doDisconnect() : doConnect();
               }}
             >
               Cartridge Login
@@ -641,36 +659,47 @@ const Account = (props) => {
             </div>
           </div>
           <div className='Account__disconnect__button__separator'></div>
-          <div className='Account__footer'>
-            <div className='Account__kudos'>
-              {!props.usingSessionKeys && props.isSessionable ? (
-                <p className='Text__small Account__kudos__label'>
-                  Tired of approving each pixel? Sessions coming soon!
-                </p>
-              ) : (
-                <p className='Text__small Account__kudos__label'>
-                  Session active
-                </p>
-              )}
-            </div>
-            <div>
-              {!props.usingSessionKeys && props.isSessionable && (
+          {props.isCartridgeConnected ? (
+            <div className='Account__footer'>
+              <div className='Account__kudos'>
+                {!props.usingSessionKeys && props.isSessionable ? (
+                  <p className='Text__small Account__kudos__label'>
+                    Tired of approving each pixel? Sessions coming soon!
+                  </p>
+                ) : (
+                  <p className='Text__small Account__kudos__label'>
+                    Session active
+                  </p>
+                )}
+              </div>
+              <div>
+                {!props.usingSessionKeys && props.isSessionable && (
+                  <div
+                    className='Text__small Button__primary Button__disabled'
+                    style={{ marginBottom: '0.3rem', backgroundColor: '#f00' }}
+                    onClick={() => props.startSession()}
+                  >
+                    Start session
+                  </div>
+                )}
                 <div
-                  className='Text__small Button__primary Button__disabled'
-                  style={{ marginBottom: '0.3rem', backgroundColor: '#f00' }}
-                  onClick={() => props.startSession()}
+                  className='Text__small Button__primary Account__disconnect__button'
+                  onClick={() => props.disconnectWallet()}
                 >
-                  Start session
+                  Logout
                 </div>
-              )}
+              </div>
+            </div>
+          ) : (
+            <div className='Account__footer'>
               <div
                 className='Text__small Button__primary Account__disconnect__button'
-                onClick={() => props.disconnectWallet()}
+                onClick={() => doDisconnect()}
               >
                 Logout
               </div>
             </div>
-          </div>
+          )}
         </div>
       )}
     </BasicTab>