Minor fixes to the getting started examples (#14)

intro/1-hello-world/aqua/getting-started.aqua

@@ -1,9 +1,10 @@
 import "@fluencelabs/aqua-lib/builtin.aqua"
 
-service HelloWorld("HelloWorld"):
-    recieveHello(from: PeerId) -> string
+-- The service runs inside browser
+service HelloPeer("HelloPeer"):
+    hello(from: PeerId) -> string
 
-func sayHello(peerId: PeerId, relayPeerId: PeerId) -> string:
-    on peerId via relayPeerId:
-        res <- HelloWorld.recieveHello(%init_peer_id%)
+func sayHello(targetPeerId: PeerId, targetRelayPeerId: PeerId) -> string:
+    on targetPeerId via targetRelayPeerId:
+        res <- HelloPeer.hello(%init_peer_id%)
     <- res

intro/1-hello-world/src/App.scss

@@ -99,7 +99,7 @@ table {
 }
 
 .label {
-  width: 70px;
+  width: 120px;
   display: inline-block;
 }
 

intro/1-hello-world/src/App.tsx

@@ -8,27 +8,21 @@ import { sayHello } from "./_aqua/getting-started";
 
 const relayNodes = [krasnodar[0], krasnodar[1], krasnodar[2]];
 
-const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text);
-};
-
 function App() {
   const [client, setClient] = useState<FluenceClient | null>(null);
-  const [helloFrom, setHelloFrom] = useState<string | null>(null);
+  const [helloMessage, setHelloMessage] = useState<string | null>(null);
 
   const [peerIdInput, setPeerIdInput] = useState<string>("");
   const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>("");
 
-  const isConnected = client !== null;
-
   const connect = (relayPeerId: string) => {
     createClient(relayPeerId)
       .then((client) => {
         // Register handler for this call in aqua:
-        // HelloWorld.recieveHello(%init_peer_id%)
-        client.callServiceHandler.on("HelloWorld", "recieveHello", (args) => {
+        // HelloPeer.hello(%init_peer_id%)
+        client.callServiceHandler.on("HelloPeer", "hello", (args) => {
           const [from] = args;
-          setHelloFrom("Hello from: \n" + from);
+          setHelloMessage("Hello from: \n" + from);
           return "Hello back to you, \n" + from;
         });
         setClient(client);
@@ -36,14 +30,17 @@ function App() {
       .catch((err) => console.log("Client initialization failed", err));
   };
 
-  const doSayHello = async () => {
+  const helloBtnOnClick = async () => {
     if (client === null) {
       return;
     }
+    // Using aqua is as easy as calling a javascript funсtion
     const res = await sayHello(client!, peerIdInput, relayPeerIdInput);
-    setHelloFrom(res);
+    setHelloMessage(res);
   };
 
+  const isConnected = client !== null;
+
   return (
     <div className="App">
       <header>
@@ -55,30 +52,32 @@ function App() {
           <>
             <h1>Connected</h1>
             <table>
-              <tr>
-                <td className="bold">Peer id:</td>
-                <td className="mono">{client!.selfPeerId}</td>
-                <td>
-                  <button
-                    className="btn-clipboard"
-                    onClick={() => copyToClipboard(client!.selfPeerId)}
-                  >
-                    <i className="gg-clipboard"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td className="bold">Relay peer id:</td>
-                <td className="mono">{client!.relayPeerId}</td>
-                <td>
-                  <button
-                    className="btn-clipboard"
-                    onClick={() => copyToClipboard(client!.relayPeerId!)}
-                  >
-                    <i className="gg-clipboard"></i>
-                  </button>
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <td className="bold">Peer id:</td>
+                  <td className="mono">{client!.selfPeerId}</td>
+                  <td>
+                    <button
+                      className="btn-clipboard"
+                      onClick={() => copyToClipboard(client!.selfPeerId)}
+                    >
+                      <i className="gg-clipboard"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr>
+                  <td className="bold">Relay peer id:</td>
+                  <td className="mono">{client!.relayPeerId}</td>
+                  <td>
+                    <button
+                      className="btn-clipboard"
+                      onClick={() => copyToClipboard(client!.relayPeerId!)}
+                    >
+                      <i className="gg-clipboard"></i>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
             </table>
 
             <div>
@@ -88,7 +87,7 @@ function App() {
                 the peer id and relay from the second tab and say hello!
               </p>
               <div className="row">
-                <label className="label bold">Peer id</label>
+                <label className="label bold">Target peer id</label>
                 <input
                   className="input"
                   type="text"
@@ -97,7 +96,7 @@ function App() {
                 />
               </div>
               <div className="row">
-                <label className="label bold">Relay</label>
+                <label className="label bold">Target relay</label>
                 <input
                   className="input"
                   type="text"
@@ -106,7 +105,7 @@ function App() {
                 />
               </div>
               <div className="row">
-                <button className="btn btn-hello" onClick={doSayHello}>
+                <button className="btn btn-hello" onClick={helloBtnOnClick}>
                   say hello
                 </button>
               </div>
@@ -128,10 +127,10 @@ function App() {
           </>
         )}
 
-        {helloFrom && (
+        {helloMessage && (
           <>
-            <h2>Hello from</h2>
-            <div> {helloFrom} </div>
+            <h2>Message</h2>
+            <div> {helloMessage} </div>
           </>
         )}
       </div>
@@ -139,4 +138,8 @@ function App() {
   );
 }
 
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text);
+};
+
 export default App;

intro/1-hello-world/src/_aqua/getting-started.ts

@@ -12,7 +12,7 @@ import { RequestFlow } from '@fluencelabs/fluence/dist/internal/RequestFlow';
 
 
 
-export async function sayHello(client: FluenceClient, peerId: string, relayPeerId: string, config?: {ttl?: number}): Promise<string> {
+export async function sayHello(client: FluenceClient, targetPeerId: string, targetRelayPeerId: string, config?: {ttl?: number}): Promise<string> {
     let request: RequestFlow;
     const promise = new Promise<string>((resolve, reject) => {
         const r = new RequestFlowBuilder()
@@ -29,20 +29,20 @@ export async function sayHello(client: FluenceClient, peerId: string, relayPeerI
        (seq
         (seq
          (call %init_peer_id% ("getDataSrv" "-relay-") [] -relay-)
-         (call %init_peer_id% ("getDataSrv" "peerId") [] peerId)
+         (call %init_peer_id% ("getDataSrv" "targetPeerId") [] targetPeerId)
         )
-        (call %init_peer_id% ("getDataSrv" "relayPeerId") [] relayPeerId)
+        (call %init_peer_id% ("getDataSrv" "targetRelayPeerId") [] targetRelayPeerId)
        )
        (call -relay- ("op" "noop") [])
       )
-      (call relayPeerId ("op" "noop") [])
+      (call targetRelayPeerId ("op" "noop") [])
      )
      (xor
-      (call peerId ("HelloWorld" "recieveHello") [%init_peer_id%] res)
+      (call targetPeerId ("HelloPeer" "hello") [%init_peer_id%] res)
       (seq
        (seq
         (seq
-         (call relayPeerId ("op" "noop") [])
+         (call targetRelayPeerId ("op" "noop") [])
          (call -relay- ("op" "noop") [])
         )
         (call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 1])
@@ -51,7 +51,7 @@ export async function sayHello(client: FluenceClient, peerId: string, relayPeerI
       )
      )
     )
-    (call relayPeerId ("op" "noop") [])
+    (call targetRelayPeerId ("op" "noop") [])
    )
    (call -relay- ("op" "noop") [])
   )
@@ -69,8 +69,8 @@ export async function sayHello(client: FluenceClient, peerId: string, relayPeerI
                 h.on('getDataSrv', '-relay-', () => {
                     return client.relayPeerId!;
                 });
-                h.on('getDataSrv', 'peerId', () => {return peerId;});
-h.on('getDataSrv', 'relayPeerId', () => {return relayPeerId;});
+                h.on('getDataSrv', 'targetPeerId', () => {return targetPeerId;});
+h.on('getDataSrv', 'targetRelayPeerId', () => {return targetRelayPeerId;});
                 h.onEvent('callbackSrv', 'response', (args) => {
   const [res] = args;
   resolve(res);

intro/3-hello-world-web3/aqua/getting-started.aqua

@@ -1,24 +1,29 @@
 import "@fluencelabs/aqua-lib/builtin.aqua"
 
-const helloServiceNode ?= "12D3KooWHLxVhUQyAuZe6AHMB29P7wkvTNMn7eDMcsqimJYLKREf"
-const helloServiceId ?= "ba24be5b-9789-48ac-b38a-82c9d3eb0d34"
+const helloWorldNodePeerId ?= "12D3KooWHLxVhUQyAuZe6AHMB29P7wkvTNMn7eDMcsqimJYLKREf"
+const helloWorldServiceId ?= "ba24be5b-9789-48ac-b38a-82c9d3eb0d34"
 
-data HelloComputation:
+data HelloResponse:
     msg: string
     reply: string
 
-service HelloWorldCompute:
-    hello_world(from: string) -> HelloComputation
+-- The service runs on a Fluence node
+service HelloWorld:
+    hello_world(from: PeerId) -> HelloResponse
 
-service HelloWorld("HelloWorld"):
-    recieveHello(message: string) -> string
+-- The service runs inside browser
+service HelloPeer("HelloPeer"):
+    hello(message: string) -> string
 
-func sayHello(peerId: PeerId, relayPeerId: PeerId) -> string:
-    on helloServiceNode:
-        HelloWorldCompute helloServiceId
-        comp <- HelloWorldCompute.hello_world(%init_peer_id%)
+func sayHello(targetPeerId: PeerId, targetRelayPeerId: PeerId) -> string:
+    -- execute computation on a Peer in the network
+    on helloWorldNodePeerId:
+        HelloWorld helloWorldServiceId
+        comp <- HelloWorld.hello_world(%init_peer_id%)
 
-    co on peerId via relayPeerId:
-        HelloWorld.recieveHello(comp.msg)
+    -- send the result to target browser in the background
+    co on targetPeerId via targetRelayPeerId:
+        res <- HelloPeer.hello(%init_peer_id%)
 
+    -- send the result to the initiator
     <- comp.reply

intro/3-hello-world-web3/src/App.scss

@@ -99,7 +99,7 @@ table {
 }
 
 .label {
-  width: 70px;
+  width: 120px;
   display: inline-block;
 }
 

intro/3-hello-world-web3/src/App.tsx

@@ -8,19 +8,13 @@ import { sayHello } from "./_aqua/getting-started";
 
 const relayNodes = [krasnodar[0], krasnodar[1], krasnodar[2]];
 
-const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text);
-};
-
 function App() {
   const [client, setClient] = useState<FluenceClient | null>(null);
-  const [helloFrom, setHelloFrom] = useState<string | null>(null);
+  const [helloMessage, setHelloMessage] = useState<string | null>(null);
 
   const [peerIdInput, setPeerIdInput] = useState<string>("");
   const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>("");
 
-  const isConnected = client !== null;
-
   const connect = (relayPeerId: string) => {
     createClient(relayPeerId)
       .then((client) => {
@@ -30,8 +24,9 @@ function App() {
           "HelloWorld",
           "recieveHello",
           (args) => {
+            // no computation is done inside the browser
             const [msg] = args;
-            setHelloFrom(msg);
+            setHelloMessage(msg);
           }
         );
         setClient(client);
@@ -39,14 +34,17 @@ function App() {
       .catch((err) => console.log("Client initialization failed", err));
   };
 
-  const doSayHello = async () => {
+  const helloBtnOnClick = async () => {
     if (client === null) {
       return;
     }
+    // Using aqua is as easy as calling a javascript funсtion
     const res = await sayHello(client!, peerIdInput, relayPeerIdInput);
-    setHelloFrom(res);
+    setHelloMessage(res);
   };
 
+  const isConnected = client !== null;
+
   return (
     <div className="App">
       <header>
@@ -58,30 +56,32 @@ function App() {
           <>
             <h1>Connected</h1>
             <table>
-              <tr>
-                <td className="bold">Peer id:</td>
-                <td className="mono">{client!.selfPeerId}</td>
-                <td>
-                  <button
-                    className="btn-clipboard"
-                    onClick={() => copyToClipboard(client!.selfPeerId)}
-                  >
-                    <i className="gg-clipboard"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td className="bold">Relay peer id:</td>
-                <td className="mono">{client!.relayPeerId}</td>
-                <td>
-                  <button
-                    className="btn-clipboard"
-                    onClick={() => copyToClipboard(client!.relayPeerId!)}
-                  >
-                    <i className="gg-clipboard"></i>
-                  </button>
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <td className="bold">Peer id:</td>
+                  <td className="mono">{client!.selfPeerId}</td>
+                  <td>
+                    <button
+                      className="btn-clipboard"
+                      onClick={() => copyToClipboard(client!.selfPeerId)}
+                    >
+                      <i className="gg-clipboard"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr>
+                  <td className="bold">Relay peer id:</td>
+                  <td className="mono">{client!.relayPeerId}</td>
+                  <td>
+                    <button
+                      className="btn-clipboard"
+                      onClick={() => copyToClipboard(client!.relayPeerId!)}
+                    >
+                      <i className="gg-clipboard"></i>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
             </table>
 
             <div>
@@ -91,7 +91,7 @@ function App() {
                 the peer id and relay from the second tab and say hello!
               </p>
               <div className="row">
-                <label className="label bold">Peer id</label>
+                <label className="label bold">Target peer id</label>
                 <input
                   className="input"
                   type="text"
@@ -100,7 +100,7 @@ function App() {
                 />
               </div>
               <div className="row">
-                <label className="label bold">Relay</label>
+                <label className="label bold">Target relay</label>
                 <input
                   className="input"
                   type="text"
@@ -109,7 +109,7 @@ function App() {
                 />
               </div>
               <div className="row">
-                <button className="btn btn-hello" onClick={doSayHello}>
+                <button className="btn btn-hello" onClick={helloBtnOnClick}>
                   say hello
                 </button>
               </div>
@@ -131,10 +131,10 @@ function App() {
           </>
         )}
 
-        {helloFrom && (
+        {helloMessage && (
           <>
-            <h2>Hello from</h2>
-            <div> {helloFrom} </div>
+            <h2>Message</h2>
+            <div> {helloMessage} </div>
           </>
         )}
       </div>
@@ -142,4 +142,8 @@ function App() {
   );
 }
 
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text);
+};
+
 export default App;