fix: add some styling to match previous app and set up better structure

Author: VanessaPC

packages/e2e/test/web-extension/dapp-connector-preact/src/components/Dashboard.tsx

@@ -3,8 +3,8 @@ import { logger } from '@cardano-sdk/util-dev';
 import { ObservableWallet } from '@cardano-sdk/wallet';
 import { tap, switchMap, combineLatest } from 'rxjs';
 
-import { connectWalletDependencies } from '../constants';
-import { connectorStore } from '../state/store';
+import { connectWalletDependencies } from '../../constants';
+import { connectorStore } from '../../state/store';
 
 export type OnWalletConnected = (wallet: ObservableWallet) => void;
 

packages/e2e/test/web-extension/dapp-connector-preact/src/components/Connect.tsx renamed to packages/e2e/test/web-extension/dapp-connector-preact/src/components/connect/index.tsx

@@ -0,0 +1,4 @@
+.dashboard-container { 
+  display: flex;
+  justify-content: space-between;
+}

packages/e2e/test/web-extension/dapp-connector-preact/src/components/dashboard/dashboard.css

@@ -0,0 +1,12 @@
+import { Logs, WalletActions } from '..';
+import './dashboard.css';
+
+export const Dashboard = () => {
+  // TODO: show a message if it's empty or not connected
+  return (
+    <div class="dashboard-container">
+      <WalletActions />
+      <Logs />
+    </div>
+  );
+};

packages/e2e/test/web-extension/dapp-connector-preact/src/components/dashboard/index.tsx

@@ -1,4 +1,5 @@
-export { Connect, type OnWalletConnected } from './Connect';
-export { Logs } from './Logs';
-export { WalletActions } from './WalletActions';
-export { Dashboard } from './Dashboard';
+export { Connect, type OnWalletConnected } from './connect';
+export { Logs } from './wallet-logs';
+export { WalletActions } from './wallet-actions';
+export { Dashboard } from './dashboard';
+export { Header } from './header';

packages/e2e/test/web-extension/dapp-connector-preact/src/components/Header.tsx renamed to packages/e2e/test/web-extension/dapp-connector-preact/src/components/header/index.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'preact/hooks';
-import { Store, connectorStore } from '../state/store';
-import { sendCoins, sendSeveralAssets, singleDelegation, singleUndelegation } from '../features';
+import { Store, connectorStore } from '../../state/store';
+import { sendCoins, sendSeveralAssets, singleDelegation, singleUndelegation } from '../../features';
+
+import './wallet-actions.css';
 
 export const WalletActions = () => {
   const [storeState, setStoreState] = useState<Store>(connectorStore.initialState);
@@ -15,15 +17,14 @@ export const WalletActions = () => {
   if (!storeState.wallet) {
     return null;
   }
-  // const handleClick = async () => {
 
-  // }
   const handleSendCoins = async () => {
     if (!storeState.wallet) {
       return null;
     }
 
     const { hash, txId } = await sendCoins({ connectedWallet: storeState.wallet });
+    console.log('hash and txId', hash, txId);
 
     connectorStore.log({
       title: 'Send coins',
@@ -38,7 +39,7 @@ export const WalletActions = () => {
     }
 
     const { hash, txId } = await sendSeveralAssets({ connectedWallet: storeState.wallet });
-
+    console.log('hash and txId', hash, txId);
     connectorStore.log({
       title: 'Send several assets',
       hash: hash,
@@ -52,6 +53,7 @@ export const WalletActions = () => {
     }
 
     const { hash, txId } = await singleDelegation({ connectedWallet: storeState.wallet });
+    console.log('hash and txId', hash, txId);
 
     connectorStore.log({
       title: 'Single delegation',
@@ -66,6 +68,7 @@ export const WalletActions = () => {
     }
 
     const { hash, txId } = await singleUndelegation({ connectedWallet: storeState.wallet });
+    console.log('hash and txId', hash, txId);
 
     connectorStore.log({
       title: 'Single undelegation',
@@ -75,11 +78,20 @@ export const WalletActions = () => {
   };
 
   return (
-    <>
-      <button onClick={() => handleSendCoins()}>Send coins</button>
-      <button onClick={() => handleSendSeveralAssets()}>Send several assets</button>
-      <button onClick={() => handleSingleDelegation()}>Single delegation</button>
-      <button onClick={() => handleSingleUndelegation()}>Single undelegation</button>
-    </>
+    <div class="actions-container">
+      <h3>Wallet actions</h3>
+      <button class="wallet-button" onClick={() => handleSendCoins()}>
+        Send coins
+      </button>
+      <button class="wallet-button" onClick={() => handleSendSeveralAssets()}>
+        Send several assets
+      </button>
+      <button class="wallet-button" onClick={() => handleSingleDelegation()}>
+        Single delegation
+      </button>
+      <button class="wallet-button" onClick={() => handleSingleUndelegation()}>
+        Single undelegation
+      </button>
+    </div>
   );
 };

packages/e2e/test/web-extension/dapp-connector-preact/src/components/index.ts

@@ -0,0 +1,10 @@
+.actions-container { 
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  padding: 20px;
+}
+
+.wallet-button { 
+  margin: 10px 20px;
+}

packages/e2e/test/web-extension/dapp-connector-preact/src/components/WalletActions.tsx renamed to packages/e2e/test/web-extension/dapp-connector-preact/src/components/wallet-actions/index.tsx

@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'preact/hooks';
-import { Store, connectorStore } from '../state/store';
+import { Store, connectorStore } from '../../state/store';
+
+import './logs.css';
 
 export const Logs = () => {
-  // const [walletInfo, setWalletInfo] = useState([]);
   const [storeState, setStoreState] = useState<Store>(connectorStore.initialState);
-  console.log('getting to logs');
+
   useEffect(() => {
     const subscription = connectorStore.subscribe(setStoreState);
     connectorStore.init();
@@ -18,25 +19,29 @@ export const Logs = () => {
 
   const getAddresses = () => storeState.addresses?.map((a) => <p>{a.address}</p>);
 
-  console.log('Store state:::> ', storeState);
   return (
-    <>
-      <h2>Connected wallet actions</h2>
+    <div class="logs-container">
+      <h3>Logs</h3>
       <div>
-        <p>Balance: {storeState?.balance?.coins}</p>
-        <p>Addresses: {getAddresses()}</p>
+        <h4>Balance: </h4> <p>{storeState?.balance?.coins}</p>
+        <h4>Addresses: </h4> {getAddresses()}
       </div>
       <div>
         {storeState.log.map((entry) => {
           return (
             <>
               <h4>{entry.title}</h4>
-              <p>hash:{entry.hash}</p>
-              <p>tx ID: {entry.txId}</p>
+              <p>
+                <h5>hash:</h5>
+                {entry.hash}
+              </p>
+              <p>
+                <h5>tx ID:</h5> {entry.txId}
+              </p>
             </>
           );
         })}
       </div>
-    </>
+    </div>
   );
 };

packages/e2e/test/web-extension/dapp-connector-preact/src/components/wallet-actions/wallet-actions.css

@@ -0,0 +1,6 @@
+.logs-container { 
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  padding: 20px;
+}

packages/e2e/test/web-extension/dapp-connector-preact/src/components/Logs.tsx renamed to packages/e2e/test/web-extension/dapp-connector-preact/src/components/wallet-logs/index.tsx

@@ -12,7 +12,6 @@ export const sendCoins = async ({
 
   return new Promise(async (resolve) => {
     const { hash, txId } = await inspectAndSignTx({ builtTx, connectedWallet: connectedWallet });
-    console.log('hash, txID:', hash, txId);
     resolve({ hash, txId });
   });
 };

packages/e2e/test/web-extension/dapp-connector-preact/src/components/wallet-logs/logs.css

@@ -1,6 +1,6 @@
 import { hydrate, prerender as ssr } from 'preact-iso';
 import { Router, Route } from 'preact-router';
-import { Header } from './components/Header';
+import { Header } from './components/header';
 import { Home } from './pages/Home';
 import { NotFound } from './pages/_404';
 import './style.css';

packages/e2e/test/web-extension/dapp-connector-preact/src/features/sendCoins.ts

@@ -1,47 +1,5 @@
-img {
-	margin-bottom: 1.5rem;
-}
-
-img:hover {
-	filter: drop-shadow(0 0 2em #673ab8aa);
-}
-
-.home section {
-	margin-top: 5rem;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	column-gap: 1.5rem;
-}
 
-.resource {
-	padding: 0.75rem 1.5rem;
-	border-radius: 0.5rem;
-	text-align: left;
-	text-decoration: none;
-	color: #222;
-	background-color: #f1f1f1;
-	border: 1px solid transparent;
-}
-
-.resource:hover {
-	border: 1px solid #000;
-	box-shadow: 0 25px 50px -12px #673ab888;
-}
-
-@media (max-width: 639px) {
-	.home section {
-		margin-top: 5rem;
-		grid-template-columns: 1fr;
-		row-gap: 1rem;
-	}
-}
 
-@media (prefers-color-scheme: dark) {
-	.resource {
-		color: #ccc;
-		background-color: #161616;
-	}
-	.resource:hover {
-		border: 1px solid #bbb;
-	}
+.home  {
+	margin: 0 auto;
 }

packages/e2e/test/web-extension/dapp-connector-preact/src/index.tsx

@@ -43,6 +43,7 @@ export const connectorStore = {
       ...state,
       log: [...state.log, entry]
     };
+    subject.next(state);
   },
   setAddressesAndBalances: (addresses: Store['addresses'], balance: Store['balance']) => {
     // get the connected wallet and get the addresses and balances
@@ -53,11 +54,5 @@ export const connectorStore = {
     };
     subject.next(state);
   },
-  sendCoins: () => {
-    // get connectedWallet
-    // get the coins to send from the address
-    // get the address to send it to
-    subject.next(state);
-  },
   initialState
 };