prettified react asmjs template

Emurgo · Feb 7, 2023 · 8b14645 · 8b14645
1 parent d5ac4ab
commit 8b14645
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 18 deletions.
diff --git a/templates/react-asmjs/src/App.css b/templates/react-asmjs/src/App.css
@@ -3,10 +3,19 @@
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 20vmin;
   pointer-events: none;
 }
 
+.App-warning {
+  background-color:orangered;
+}
+
+.App-input {
+  font-size: calc(10px + 2vmin);
+}
+
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

diff --git a/templates/react-asmjs/src/App.js b/templates/react-asmjs/src/App.js
@@ -1,26 +1,53 @@
 import logo from './logo.svg';
 import './App.css';
 import {BigNum} from "@emurgo/cardano-serialization-lib-asmjs";
+import React, {useState} from 'react';
 
 function App() {
-  const num = BigNum.from_str("33333");
+  const [currentStrValue, setStrValue] = new useState("");
+
+  const getBigNumValue = (strValue: string) => {
+    console.log(strValue);
+    return BigNum.from_str(strValue)
+  };
+
+  const containsOnlyNumbers = (strValue: string) => {
+    return /^\d+$/.test(strValue);
+  }
+
   return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload {num.to_hex()} {num.to_json()}.
-          </p>
-          <a
-              className="App-link"
-              href="https://reactjs.org"
-              target="_blank"
-              rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          <label className="App-warning">
+            It is the example project for the react framework with @emurgo/cardano-serialization-lib-browser.
+          </label>
+        </p>
+        <p>
+          <div>
+            <label>
+              Enter value:
+            </label>
+          </div>
+          <div>
+            <input className="App-input" type="text" onChange={event => setStrValue(event.target.value)}/>
+          </div>
+        </p>
+        <p>
+          <div>
+            <label>HEX represantion of the entered value: </label>
+            <label>{containsOnlyNumbers(currentStrValue) ? getBigNumValue(currentStrValue).to_hex() : "unexpected value"}</label>
+          </div>
+        </p>
+        <p>
+          <div>
+            <label>JSON represantion of the entered value: </label>
+            <label>{containsOnlyNumbers(currentStrValue) ? getBigNumValue(currentStrValue).to_json() : "unexpected value"}</label>
+          </div>
+        </p>
+      </header>
+    </div>
   );
 }