Display addresses in dropdown

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

@@ -22,9 +22,8 @@ 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 ConnectWallet from './ConnectWallet';
+import IFrame from './IFrame';
 import { useWalletConnectClient } from 'context/WalletConnectContext';
-import IframeComponent from './IFrame';
 
 type ConfigureDeploymentFormValues = {
   option: string;
@@ -535,8 +534,7 @@ const Configure = () => {
               </div>
             ) : (
               <>
-                <ConnectWallet onAccountChange={onAccountChange} />
+                <IFrame onAccountChange={onAccountChange} />
-                <IframeComponent />
                 {accounts.length > 0 && (
                   <div>
                     <Button

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

@@ -1,47 +0,0 @@
-import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
-
-import { Button } from '../../shared/Button';
-import { useWalletConnectClient } from 'context/WalletConnectContext';
-
-const ConnectWallet = ({
-  onAccountChange,
-}: {
-  onAccountChange: (selectedAccount: string) => void;
-}) => {
-  const { onConnect, accounts } = useWalletConnectClient();
-
-  const handleConnect = async () => {
-    await onConnect();
-  };
-
-  return (
-    <div className="p-4 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6">
-      {accounts.length === 0 ? (
-        <div>
-          <Button type={'button'} onClick={handleConnect}>
-            Connect Wallet
-          </Button>
-        </div>
-      ) : (
-        <div>
-          <Select
-            label="Select Account"
-            defaultValue={accounts[0].address}
-            onChange={(value) => {
-              value && onAccountChange(value);
-            }}
-            className="dark:bg-overlay2 dark:text-foreground"
-          >
-            {accounts.map((account, index) => (
-              <Option key={index} value={account.address}>
-                {account.address.split(':').slice(1).join(':')}
-              </Option>
-            ))}
-          </Select>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ConnectWallet;

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

@@ -1,10 +1,18 @@
-import React, { useEffect } from 'react';
+import { useEffect, useState } from 'react';
-// import {
-//   VITE_LACONICD_CHAIN_ID,
-// } from 'utils/constants';
 
-const IframeComponent: React.FC = () => {
+import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
 
+import {
+  VITE_LACONICD_CHAIN_ID,
+} from 'utils/constants';
+
+const IFrame = ({
+  onAccountChange,
+}: {
+  onAccountChange: (selectedAccount: string) => void;
+}) => {
+
+  const [accounts, setAccounts] = useState<string[]>([]);
   useEffect(() => {
     const getDataFromWallet = () => {
       const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
@@ -16,7 +24,8 @@ const IframeComponent: React.FC = () => {
 
       // Request data from wallet
       iframe.contentWindow.postMessage({
-        type: 'REQUEST_WALLET_ACCOUNTS'
+        type: 'REQUEST_WALLET_ACCOUNTS',
+        chainId: VITE_LACONICD_CHAIN_ID,
       }, 'http://localhost:3001');
     };
 
@@ -27,6 +36,7 @@ const IframeComponent: React.FC = () => {
 
       if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
         console.log('Received data:', event.data.data);
+        setAccounts(event.data.data);
         // Handle the received data here
       } else if (event.data.type === 'ERROR') {
         console.error('Error from wallet:', event.data.message);
@@ -47,7 +57,14 @@ const IframeComponent: React.FC = () => {
     };
   }, []);
 
+  console.log({accounts})
   return (
+    <div className="p-4 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6">
+      {accounts.length === 0 ? (
+        <div>
+          no accounts.. go to 'store.laconic.com' to create wallet
+        </div>
+      ) : (
         <div>
         <iframe
         id="walletIframe"
@@ -55,9 +72,24 @@ const IframeComponent: React.FC = () => {
         width="500" height="300"
         sandbox="allow-scripts allow-same-origin"
       ></iframe>
-
+          <Select
+            label="Select Account"
+            defaultValue={accounts[0]}
+            onChange={(value) => {
+              value && onAccountChange(value);
+            }}
+            className="dark:bg-overlay2 dark:text-foreground"
+          >
+            {accounts.map((account, index) => (
+              <Option key={index} value={account}>
+                {account}
+              </Option>
+            ))}
+          </Select>
+        </div>
+      )}
     </div>
   );
 };
 
-export default IframeComponent;
+export default IFrame;