import React, { useEffect, useState } from 'react'; import logo from './logo.svg'; import './App.scss'; import { Fluence } from '@fluencelabs/fluence'; import { krasnodar } from '@fluencelabs/fluence-network-environment'; import { sayHello, registerHelloPeer } from './_aqua/getting-started'; const relayNodes = [krasnodar[4], krasnodar[5], krasnodar[6]]; function App() { const [isConnected, setIsConnected] = useState(false); const [helloMessage, setHelloMessage] = useState(null); const [peerIdInput, setPeerIdInput] = useState(''); const [relayPeerIdInput, setRelayPeerIdInput] = useState(''); const connect = async (relayPeerId: string) => { try { await Fluence.start({ connectTo: relayPeerId }); setIsConnected(true); // Register handler for this call in aqua: // HelloPeer.hello(%init_peer_id%) registerHelloPeer({ hello: (from) => { setHelloMessage('Hello from: \n' + from); return 'Hello back to you, \n' + from; }, }); } catch (err) { console.log('Peer initialization failed', err); } }; const helloBtnOnClick = async () => { if (!Fluence.getStatus().isConnected) { return; } // Using aqua is as easy as calling a javascript funсtion const res = await sayHello(peerIdInput, relayPeerIdInput); setHelloMessage(res); }; return (
logo
{isConnected ? ( <>

Connected

Peer id: {Fluence.getStatus().peerId!}
Relay peer id: {Fluence.getStatus().relayPeerId}

Say hello!

Now try opening a new tab with the same application. Copy paste the peer id and relay from the second tab and say hello!

setPeerIdInput(e.target.value)} value={peerIdInput} />
setRelayPeerIdInput(e.target.value)} value={relayPeerIdInput} />
) : ( <>

Intro 1: P2P browser-to-browser

Pick a relay

    {relayNodes.map((x) => (
  • {x.peerId}
  • ))}
)} {helloMessage && ( <>

Message

{helloMessage}
)}
); } const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text); }; export default App;