upd

electron/main.ts

@@ -17,9 +17,8 @@ function createWindow () {
     // icon: path.join(assetsPath, 'assets', 'icon.png'),
     width: 1100,
     height: 700,
-    backgroundColor: '#191622',
     webPreferences: {
-      nodeIntegration: false,
+      nodeIntegration: true,
       contextIsolation: true,
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY
     }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hedera-sdk-app",
   "author": "Artem Buslaev",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "An Electron boilerplate including TypeScript, React, Jest and ESLint.",
   "main": "./.webpack/main/index.js",
   "scripts": {
@@ -15,11 +15,14 @@
   "keywords": [],
   "license": "MIT",
   "dependencies": {
+    "@hashgraph/sdk": "^2.19.2",
+    "@vercel/webpack-asset-relocator-loader": "^1.7.3",
     "electron-squirrel-startup": "^1.0.0",
     "is-react": "^1.5.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hot-loader": "4.13.0",
+    "style-loader": "^3.3.3",
     "styled-components": "5.3.0"
   },
   "devDependencies": {
@@ -47,6 +50,7 @@
     "@typescript-eslint/parser": "4.27.0",
     "babel-loader": "8.2.2",
     "cross-env": "7.0.3",
+    "css-loader": "^6.8.1",
     "electron": "13.1.2",
     "eslint": "7.29.0",
     "eslint-config-prettier": "8.3.0",

src/App.css

@@ -0,0 +1,5 @@
+.App {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+}

src/App.tsx

@@ -1,12 +1,25 @@
-import { GlobalStyle } from './styles/GlobalStyle'
+import React, { useRef } from 'react';
+import './App.css';
+import { AccountInput } from './components/AccountInput/AccountInput';
+import { TestSuites } from './components/TestSuites/TestSuites';
+import { GlobalStyle } from './styles/GlobalStyle';
 
-import { Greetings } from './components/Greetings'
-
-export function App() {
+function App() {
+  const testSuites = useRef<any>();
+  const callTests = (accountId: any, key: any) => {
+    return function () {
+      if (testSuites.current) {
+        testSuites.current.callTests(accountId, key);
+      }
+    }    
+  }
   return (
-    <>
-      <GlobalStyle />
-      <Greetings />
-    </>
-  )
-}
+    <div className="App">
+      <GlobalStyle></GlobalStyle>
+      <AccountInput callTests={callTests}></AccountInput>
+      <TestSuites ref={testSuites}></TestSuites>
+    </div>
+  );
+}
+
+export default App;

src/components/AccountInput/AccountInput.css

@@ -0,0 +1,83 @@
+.account-form {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+    height: 100%;
+    flex-basis: 300px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    background-color: #464646;
+    z-index: 0;
+  }
+
+  .account-form .hedera-logo {
+    width: 200px;
+  }
+
+
+.account-form-group {
+    position: relative;
+    white-space: nowrap;
+  }
+
+  .account-form-input {
+    box-sizing: border-box;
+    padding: 0 0 15px 30px;
+    border: none;
+    border-bottom: 2px solid white;
+    background-color: transparent;
+    outline: none;
+    transition: 0.3s;
+    width: 100%;
+    color: white;
+  }
+
+  .account-form-label {
+    position: absolute;
+    top: 0;
+    left: 35px;
+    z-index: -1;
+    color: white;
+    transition: 0.3s;
+  }
+
+  .account-form-input:focus ~ .account-form-label,
+  .account-form-input:not(:placeholder-shown) ~ .account-form-label {
+    top: -18px;
+    left: 20px;
+    font-size: 12px;
+    color: white;
+  }
+
+  .account-form-icon {
+    color: white;
+    width: 25px;
+    top: 0px;
+    left: 0px;
+    position: absolute;
+  }
+
+
+  .start-test-btn {
+    background: #5E5DF0;
+    border-radius: 999px;
+    box-shadow: #5E5DF0 0 10px 20px -10px;
+    box-sizing: border-box;
+    color: #FFFFFF;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 1px;
+    line-height: 24px;
+    opacity: 1;
+    outline: 0 solid transparent;
+    padding: 8px 18px;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    width: fit-content;
+    word-break: break-word;
+    border: 0;
+  }

src/components/AccountInput/AccountInput.tsx

@@ -0,0 +1,46 @@
+import React, { useRef, useState } from 'react'
+import './AccountInput.css'
+
+import hederaLogo from '../../../assets/hedera-logo.png'
+import acc from '../../../assets/account.svg'
+import pass from '../../../assets/pass.svg'
+
+export function AccountInput(props: any) {
+  const [account, setAccount] = useState('')
+  const [key, setKey] = useState('')
+
+  return (
+    <form className="account-form">
+      <img src={hederaLogo} className="hedera-logo"></img>
+      <div className="account-form-group">
+        <img className="account-form-icon" src={acc} />
+        <input
+          type="text"
+          className="account-form-input"
+          placeholder=" "
+          value={account}
+          onInput={(e: any) => setAccount(e.target.value)}
+        ></input>
+        <label className="account-form-label">Account Identifier</label>
+      </div>
+      <div className="account-form-group">
+        <img className="account-form-icon" src={pass} />
+        <input
+          type="password"
+          className="account-form-input"
+          placeholder=" "
+          value={key}
+          onInput={(e: any) => setKey(e.target.value)}
+        ></input>
+        <label className="account-form-label">Account Private Key</label>
+      </div>
+      <button
+        type="button"
+        className="start-test-btn"
+        onClick={props.callTests(account, key)}
+      >
+        Start Tests
+      </button>
+    </form>
+  )
+}

src/components/TestSuites/TestSuites.css

@@ -0,0 +1,131 @@
+.test-suites {
+    width: 100%;
+    height: 100%;
+    padding: 50px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+    /* background-color: aqua; */
+}
+
+.test-suite {
+    position: relative;
+    width: 500px;
+    margin: 0 auto;
+    padding: 30px;
+}
+
+.test-suite-info {
+    background-color: #464646;
+    color: #cfcfcf;
+    padding: 1px 15px 3px 15px;
+    border-radius: 15px;
+    margin-bottom: 10px;
+}
+
+.test-suite-info .title {
+    color: rgba(130, 89, 239, 1.00)
+}
+
+
+
+
+
+/* setting padding based on even or odd */
+.test-suite:nth-child(odd) {
+    padding: 30px 0 30px 30px;
+}
+
+.test-suite:nth-child(even) {
+    padding: 30px 30px 30px 0;
+}
+
+/* Global ::before */
+.test-suite::before {
+    content: "";
+    position: absolute;
+    width: 50%;
+    border: solid rgba(130, 89, 239, 1.00);
+}
+
+/* Setting the border of top, bottom, left */
+.test-suite:nth-child(odd)::before {
+    left: 0px;
+    top: -4.5px;
+    bottom: -4.5px;
+    border-width: 5px 0 5px 5px;
+    border-radius: 50px 0 0 50px;
+}
+
+/* Setting the border of top, bottom, right */
+.test-suite:nth-child(even)::before {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-width: 5px 5px 5px 0;
+    border-radius: 0 50px 50px 0;
+}
+
+/* Removing the border if it is the first card */
+.test-suite:first-child::before {
+    border-top: 0;
+    border-top-left-radius: 0;
+}
+
+/* Removing the border if it is the last card  and it's odd */
+.test-suite:last-child:nth-child(odd)::before {
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+}
+
+/* Removing the border if it is the last card  and it's even */
+.test-suite:last-child:nth-child(even)::before {
+    border-bottom: 0;
+    border-bottom-right-radius: 0;
+}
+
+
+.title::before {
+    content: "";
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 100%;
+    border: 3px solid rgba(130, 89, 239, 1.00);
+}
+
+.complete .title::before {
+    background: rgb(0, 180, 0);
+}
+.error .title::before {
+    background: rgb(195, 0, 0);
+}
+
+/* text right if the card is even  */
+.test-suite:nth-child(even)>.test-suite-info>.title {
+    text-align: right;
+}
+
+/* setting dot to the left if the card is odd */
+.test-suite:nth-child(odd)>.test-suite-info>.title::before {
+    left: -10px;
+}
+
+/* setting dot to the right if the card is odd */
+.test-suite:nth-child(even)>.test-suite-info>.title::before {
+    right: -10px;
+}
+
+.test-suite {
+    animation: fade 1s;
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}