Display account addresses after connecting wallet

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

@@ -22,7 +22,7 @@ import { useToast } from 'components/shared/Toast';
 import { useGQLClient } from '../../../context/GQLClientContext';
 import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
 import { EnvironmentVariablesFormValues } from 'types/types';
-import { useWalletConnectClient } from 'context/WalletConnectContext';
+import ConnectWallet from './ConnectWallet';
 
 type ConfigureDeploymentFormValues = {
   option: string;
@@ -35,8 +35,6 @@ type ConfigureFormValues = ConfigureDeploymentFormValues &
   EnvironmentVariablesFormValues;
 
 const Configure = () => {
-  const { onConnect } = useWalletConnectClient()
-
   const [isLoading, setIsLoading] = useState(false);
   const [deployers, setDeployers] = useState<Deployer[]>([]);
 
@@ -352,7 +350,7 @@ const Configure = () => {
             </div>
           </form>
         </FormProvider>
-      <Button onClick={onConnect}>Connect Wallet</Button>
+      <ConnectWallet/>
       </div>
     </div>
   );

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

@@ -0,0 +1,32 @@
+import { Button } from '../../shared/Button';
+import { useWalletConnectClient } from 'context/WalletConnectContext';
+// import { useGQLClient } from '../../../context/GQLClientContext';
+import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
+
+const ConnectWallet = () => {
+  const { onConnect, accounts } = useWalletConnectClient();
+  // const client = useGQLClient();
+
+  const handleConnect = async () => {
+    await onConnect();
+    // const snowballaddress = await client.getAddress();
+  };
+
+  return (
+    <>
+      {!accounts ? (
+        <Button onClick={handleConnect}>Connect Wallet</Button>
+      ) : (
+        <Select label="Select Account">
+          {accounts.map((account, index) => (
+            <Option key={index} value={account.address}>
+              {account.address}
+            </Option>
+          ))}
+        </Select>
+      )}
+    </>
+  );
+};
+
+export default ConnectWallet;