Skip to content

Commit

Permalink
Improved React demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@heeckhau
heeckhau committed Jan 14, 2025
1 parent 76b9440 commit dc65868
Showing 1 changed file with 90 additions and 41 deletions.
131 changes: 90 additions & 41 deletions demo/react-ts-webpack/src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,14 @@ const root = createRoot(container!);

root.render(<App />);

const local = true; // Toggle between local and remote notary
const notaryUrl = local ? 'http://localhost:7047' : 'https://notary.pse.dev/v0.1.0-alpha.7';
const websocketProxyUrl = local ? 'ws://localhost:55688' : 'wss://notary.pse.dev/proxy?token=swapi.dev';
const loggingLevel = 'Info'; // https://github.com/tlsnotary/tlsn/blob/main/crates/wasm/src/log.rs#L8

const serverUrl = 'https://swapi.dev/api/people/1';
const serverDns = 'swapi.dev';

function App(): ReactElement {
const [initialized, setInitialized] = useState(false);
const [processing, setProcessing] = useState(false);
Expand All @@ -30,22 +38,24 @@ function App(): ReactElement {

useEffect(() => {
(async () => {
await init({ loggingLevel: 'Info' });
await init({ loggingLevel: loggingLevel });
setInitialized(true);
})();
}, []);

const onClick = useCallback(async () => {
setProcessing(true);
const notary = NotaryServer.from(`http://localhost:7047`);
const notary = NotaryServer.from(notaryUrl);
console.time('submit');
const prover = (await new Prover({
serverDns: 'swapi.dev',
serverDns: serverDns,
maxRecvData: 2048,
})) as TProver;

await prover.setup(await notary.sessionUrl());
const resp = await prover.sendRequest('ws://localhost:55688', {
url: 'https://swapi.dev/api/people/1',

const resp = await prover.sendRequest(websocketProxyUrl, {
url: serverUrl,
method: 'GET',
headers: {
'Content-Type': 'application/json',
Expand Down Expand Up @@ -99,13 +109,14 @@ function App(): ReactElement {
const onAltClick = useCallback(async () => {
setProcessing(true);
const proof = await (Prover.notarize as typeof TProver.notarize)({
notaryUrl: 'http://localhost:7047',
websocketProxyUrl: 'ws://localhost:55688',
url: 'https://swapi.dev/api/people/1',
notaryUrl: notaryUrl,
websocketProxyUrl: websocketProxyUrl,
url: serverUrl,
method: 'GET',
headers: {
'Content-Type': 'application/json',
},

body: {
hello: 'world',
one: 1,
Expand All @@ -125,7 +136,7 @@ function App(): ReactElement {
const proof = (await new Presentation(
presentationJSON.data,
)) as TPresentation;
const notary = NotaryServer.from(`http://localhost:7047`);
const notary = NotaryServer.from(notaryUrl);
const notaryKey = await notary.publicKey('hex');
const verifierOutput = await proof.verify();
const transcript = new Transcript({
Expand All @@ -151,34 +162,86 @@ function App(): ReactElement {
<h1 className="text-2xl font-bold mb-6 text-slate-700">
TLSNotary React TypeScript Demo{' '}
</h1>
<div className="mb-4">
<button
onClick={!processing ? onClick : undefined}
disabled={processing || !initialized}
className={`px-4 py-2 rounded-md text-white shadow-md font-semibold
${processing || !initialized ? 'bg-slate-400 cursor-not-allowed' : 'bg-slate-600 hover:bg-slate-700'}`}
>
Start Demo (Normal config)
</button>
<div className="mb-4 max-w-2xl">
<p>
This demo showcases how to use TLSNotary in a React/TypeScript app with the tlsn-js library.
We will fetch JSON data from the Star Wars API, notarize the TLS request using TLSNotary,
and verify the proof. The demo runs entirely in the browser.
</p>
<p>
<a href="https://docs.tlsnotary.org/quick_start/tlsn-js.html" className="text-blue-500 hover:underline">
More info
</a>
</p>
<table className="table-auto w-full mt-4">
<thead>
<tr>
<th className="px-4 py-2 text-left">Demo Settings</th>
<th className="px-4 py-2 text-left">URL</th>
</tr>
</thead>
<tbody>
<tr>
<td className="border px-4 py-2">Server</td>
<td className="border px-4 py-2">{serverUrl}</td>
</tr>
<tr>
<td className="border px-4 py-2">Notary Server</td>
<td className="border px-4 py-2">{notaryUrl}</td>
</tr>
<tr>
<td className="border px-4 py-2">WebSocket Proxy</td>
<td className="border px-4 py-2">{websocketProxyUrl}</td>
</tr>
</tbody>
</table>
</div>

<div className="mb-4">
<button
onClick={!processing ? onAltClick : undefined}
disabled={processing || !initialized}
className={`px-4 py-2 rounded-md text-white shadow-md font-semibold
${processing || !initialized ? 'bg-slate-400 cursor-not-allowed' : 'bg-slate-600 hover:bg-slate-700'}`}
>
Start Demo 2 (With helper method)
</button>
<p className="mb-2">
There are two versions of the demo: one with a normal config and one with a helper method.
</p>
<div className="flex justify-center gap-4">
<button
onClick={!processing ? onClick : undefined}
disabled={processing || !initialized}
className={`px-4 py-2 rounded-md text-white shadow-md font-semibold
${processing || !initialized ? 'bg-slate-400 cursor-not-allowed' : 'bg-slate-600 hover:bg-slate-700'}`}
>
Start Demo (Normal config)
</button>
<button
onClick={!processing ? onAltClick : undefined}
disabled={processing || !initialized}
className={`px-4 py-2 rounded-md text-white shadow-md font-semibold
${processing || !initialized ? 'bg-slate-400 cursor-not-allowed' : 'bg-slate-600 hover:bg-slate-700'}`}
>
Start Demo 2 (With helper method)
</button>
</div>
</div>
{processing && (
<div className="mt-6 flex justify-center items-center">
<Watch
visible={true}
height="40"
width="40"
radius="48"
color="#1E293B"
ariaLabel="watch-loading"
wrapperStyle={{}}
wrapperClass=""
/>
</div>
)}
<div className="flex flex-col sm:flex-row gap-6 w-full max-w-4xl">
<div className="flex-1 bg-slate-50 border border-slate-200 rounded p-4">
<b className="text-slate-600">Proof: </b>
{!processing && !presentationJSON ? (
<i className="text-slate-500">not started</i>
) : !presentationJSON ? (
<div className="flex flex-col items-start space-y-2">
<span>Proving data from swapi...</span>
<span>Proving data from {serverDns}...</span>
<span className="text-slate-500">
Open <i>Developer tools</i> to follow progress
</span>
Expand Down Expand Up @@ -207,20 +270,6 @@ function App(): ReactElement {
)}
</div>
</div>
{processing && (
<div className="mt-6 flex justify-center items-center">
<Watch
visible={true}
height="40"
width="40"
radius="48"
color="#1E293B"
ariaLabel="watch-loading"
wrapperStyle={{}}
wrapperClass=""
/>
</div>
)}
</div>
);
}

0 comments on commit dc65868

Please sign in to comment.