From 2b7c75f97b60aa381f057793895ec98f3d73bfce Mon Sep 17 00:00:00 2001
From: IshaVenikar <ishavenikar7@gmail.com>
Date: Thu, 24 Oct 2024 19:07:50 +0530
Subject: [PATCH] Display account addresses after connecting wallet

---
 .../components/projects/create/Configure.tsx  |  6 ++--
 .../projects/create/ConnectWallet.tsx         | 32 +++++++++++++++++++
 2 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/src/components/projects/create/ConnectWallet.tsx

diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx
index 3a17b14e..addcdd6a 100644
--- a/packages/frontend/src/components/projects/create/Configure.tsx
+++ b/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>
   );
diff --git a/packages/frontend/src/components/projects/create/ConnectWallet.tsx b/packages/frontend/src/components/projects/create/ConnectWallet.tsx
new file mode 100644
index 00000000..9dbc6e6a
--- /dev/null
+++ b/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;