Remove accounts dropdown before pay and deploy

packages/backend/src/routes/auth.ts

@@ -94,13 +94,4 @@ router.get('/session', (req, res) => {
   }
 });
 
-router.post('/logout', (req, res) => {
-  req.session.destroy((err) => {
-    if (err) {
-      return res.send({ success: false });
-    }
-    res.send({ success: true });
-  });
-});
-
 export default router;

packages/frontend/src/components/projects/create/AccountsDropdown.tsx

@@ -1,60 +0,0 @@
-import {
-  Select,
-  Option,
-  Spinner,
-} from '@snowballtools/material-tailwind-react-fork';
-
-const AccountsDropdown = ({
-  accounts,
-  isDataReceived,
-  onAccountChange,
-}: {
-  accounts: string[];
-  isDataReceived: boolean;
-  onAccountChange: (selectedAccount: string) => void;
-}) => {
-  return (
-    <div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md">
-      {isDataReceived ? (
-        !accounts.length ? (
-          <div className="text-center">
-            <p className="text-gray-700 dark:text-gray-300 mb-4">
-              No accounts found. Please visit{' '}
-              <a
-                href="https://store.laconic.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 underline dark:text-blue-400"
-              >
-                store.laconic.com
-              </a>{' '}
-              to create a wallet.
-            </p>
-          </div>
-        ) : (
-          <div>
-            <Select
-              label="Select Account"
-              defaultValue={accounts[0]}
-              onChange={(value) => value && onAccountChange(value)}
-              className="dark:bg-overlay2 dark:text-foreground"
-              aria-label="Wallet Account Selector"
-            >
-              {accounts.map((account, index) => (
-                <Option key={index} value={account}>
-                  {account}
-                </Option>
-              ))}
-            </Select>
-          </div>
-        )
-      ) : (
-        <div className="flex items-center justify-center h-12">
-          <Spinner className="h-6 w-6" />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AccountsDropdown;

packages/frontend/src/components/projects/create/Configure.tsx

@@ -10,6 +10,7 @@ import {
 } from 'gql-client';
 
 import { Select, MenuItem, FormControl, FormHelperText } from '@mui/material';
+import { Spinner } from '@snowballtools/material-tailwind-react-fork';
 
 import {
   ArrowRightCircleFilledIcon,
@@ -27,7 +28,6 @@ import {
   VITE_LACONICD_CHAIN_ID,
   VITE_WALLET_IFRAME_URL,
 } from 'utils/constants';
-import AccountsDropdown from './AccountsDropdown';
 
 type ConfigureDeploymentFormValues = {
   option: string;
@@ -46,7 +46,6 @@ const Configure = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [deployers, setDeployers] = useState<Deployer[]>([]);
   const [selectedAccount, setSelectedAccount] = useState<string>();
-  const [accounts, setAccounts] = useState<string[]>([]);
   const [selectedDeployer, setSelectedDeployer] = useState<Deployer>();
   const [isPaymentLoading, setIsPaymentLoading] = useState(false);
   const [isPaymentDone, setIsPaymentDone] = useState(false);
@@ -311,10 +310,6 @@ const Configure = () => {
     setDeployers(res.deployers);
   }, [client]);
 
-  const onAccountChange = useCallback((account: string) => {
-    setSelectedAccount(account);
-  }, []);
-
   const onDeployerChange = useCallback(
     (selectedLrn: string) => {
       const deployer = deployers.find((d) => d.deployerLrn === selectedLrn);
@@ -580,12 +575,31 @@ const Configure = () => {
               </div>
             ) : (
               <>
-                <AccountsDropdown
+                <div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md">
-                  accounts={accounts}
+                  {isAccountsDataReceived ? (
-                  onAccountChange={onAccountChange}
+                    !selectedAccount && (
-                  isDataReceived={isAccountsDataReceived}
+                      <div className="text-center">
-                />
+                        <p className="text-gray-700 dark:text-gray-300 mb-4">
-                {accounts.length > 0 && (
+                          No accounts found. Please visit{' '}
+                          <a
+                            href="https://store.laconic.com"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-blue-600 underline dark:text-blue-400"
+                          >
+                            store.laconic.com
+                          </a>{' '}
+                          to create a wallet.
+                        </p>
+                      </div>
+                    )
+                  ) : (
+                    <div className="flex items-center justify-center h-12">
+                      <Spinner className="h-6 w-6" />
+                    </div>
+                  )}
+                </div>
+                {selectedAccount && (
                   <div>
                     <Button
                       {...buttonSize}
@@ -618,7 +632,7 @@ const Configure = () => {
         </FormProvider>
 
         <IFrameModal
-          setAccounts={setAccounts}
+          setAccount={setSelectedAccount}
           setIsDataReceived={setIsAccountsDataReceived}
           isVisible={isFrameVisible}
         />

packages/frontend/src/components/projects/create/IFrameModal.tsx

@@ -8,11 +8,11 @@ import {
 } from 'utils/constants';
 
 const IFrameModal = ({
-  setAccounts,
+  setAccount,
   setIsDataReceived,
   isVisible,
 }: {
-  setAccounts: (accounts: string[]) => void;
+  setAccount: (account: string) => void;
   setIsDataReceived: (isReceived: boolean) => void;
   isVisible: boolean;
 }) => {
@@ -22,7 +22,7 @@ const IFrameModal = ({
 
       setIsDataReceived(true);
       if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
-        setAccounts(event.data.data);
+        setAccount(event.data.data[0]);
       } else if (event.data.type === 'ERROR') {
         console.error('Error from wallet:', event.data.message);
       }

packages/frontend/src/components/shared/Sidebar/Sidebar.tsx

@@ -1,13 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { User } from 'gql-client';
 import { motion } from 'framer-motion';
 
 import { useGQLClient } from 'context/GQLClientContext';
 import {
-  GlobeIcon,
   LifeBuoyIcon,
-  LogoutIcon,
   QuestionMarkRoundIcon,
 } from 'components/shared/CustomIcon';
 import { Tabs } from 'components/shared/Tabs';
@@ -15,10 +13,8 @@ import { Logo } from 'components/Logo';
 import { Avatar } from 'components/shared/Avatar';
 import { formatAddress } from 'utils/format';
 import { getInitials } from 'utils/geInitials';
-import { Button } from 'components/shared/Button';
 import { cn } from 'utils/classnames';
 import { useMediaQuery } from 'usehooks-ts';
-import { BASE_URL } from 'utils/constants';
 
 interface SidebarProps {
   mobileOpen?: boolean;
@@ -26,7 +22,6 @@ interface SidebarProps {
 
 export const Sidebar = ({ mobileOpen }: SidebarProps) => {
   const { orgSlug } = useParams();
-  const navigate = useNavigate();
   const client = useGQLClient();
   const isDesktop = useMediaQuery('(min-width: 960px)');
 
@@ -41,16 +36,6 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
     fetchUser();
   }, []);
 
-  const handleLogOut = useCallback(async () => {
-    await fetch(`${BASE_URL}/auth/logout`, {
-      method: 'POST',
-      credentials: 'include',
-    });
-
-    localStorage.clear();
-    navigate('/login');
-  }, [navigate]);
-
   return (
     <motion.nav
       initial={{ x: -320 }}
@@ -80,15 +65,6 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
           <Tabs defaultValue="Projects" orientation="vertical">
             {/* // TODO: use proper link buttons */}
             <Tabs.List>
-              <Tabs.Trigger
-                icon={<GlobeIcon />}
-                value=""
-                className="hidden lg:flex"
-              >
-                <a className="cursor-pointer font-mono" onClick={handleLogOut}>
-                  LOG OUT
-                </a>
-              </Tabs.Trigger>
               <Tabs.Trigger icon={<QuestionMarkRoundIcon />} value="">
                 <a
                   className="cursor-pointer font-mono"
@@ -123,14 +99,6 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
             </p>
           </div>
         )}
-        <Button
-          iconOnly
-          variant="ghost"
-          className="text-elements-low-em"
-          onClick={handleLogOut}
-        >
-          <LogoutIcon />
-        </Button>
       </div>
     </motion.nav>
   );