Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: integrate with alpha.7 #67

Merged
merged 14 commits into from
Oct 4, 2024
16 changes: 0 additions & 16 deletions .github/workflows/build.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,11 @@ env:

jobs:
build:

runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v4

- name: Install stable rust toolchain
uses: dtolnay/rust-toolchain@stable
with:
targets: wasm32-unknown-unknown
toolchain: nightly

- name: Use caching
uses: Swatinem/rust-cache@v2
with:
workspaces: wasm/prover

- name: Install Node.js
uses: actions/setup-node@v4
with:
Expand All @@ -53,9 +40,6 @@ jobs:
restore-keys: |
${{ runner.os }}-pnpm-store-

- name: Install nightly tool-chain
run: rustup component add rust-src --toolchain nightly-x86_64-unknown-linux-gnu

- name: Install dependencies
run: pnpm install

Expand Down
3 changes: 0 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
wasm/prover/pkg
wasm/prover/target
wasm-pack.log
node_modules/
.idea/
.DS_Store
Expand Down
6 changes: 0 additions & 6 deletions .vscode/settings.json

This file was deleted.

88 changes: 53 additions & 35 deletions demo/react-ts-webpack/src/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import * as Comlink from 'comlink';
import { Watch } from 'react-loader-spinner';
import {
Prover as TProver,
NotarizedSession as TNotarizedSession,
TlsProof as TTlsProof,
Presentation as TPresentation,
Commit,
NotaryServer,
ProofData,
Transcript,
} from 'tlsn-js';
import { PresentationJSON } from 'tlsn-js/build/types';

const { init, Prover, NotarizedSession, TlsProof }: any = Comlink.wrap(
const { init, Prover, Presentation }: any = Comlink.wrap(
new Worker(new URL('./worker.ts', import.meta.url)),
);

Expand All @@ -21,15 +21,23 @@ const root = createRoot(container!);
root.render(<App />);

function App(): ReactElement {
const [initialized, setInitialized] = useState(false);
const [processing, setProcessing] = useState(false);
const [result, setResult] = useState<ProofData | null>(null);
const [proofHex, setProofHex] = useState<null | string>(null);
const [result, setResult] = useState<any | null>(null);
const [presentationJSON, setPresentationJSON] =
useState<null | PresentationJSON>(null);

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

const onClick = useCallback(async () => {
setProcessing(true);
const notary = NotaryServer.from(`http://localhost:7047`);
console.time('submit');
await init({ loggingLevel: 'Debug' });
const prover = (await new Prover({
serverDns: 'swapi.dev',
})) as TProver;
Expand Down Expand Up @@ -71,26 +79,25 @@ function App(): ReactElement {
...transcript.ranges.recv.lineBreaks,
],
};
console.log(commit);
const session = await prover.notarize(commit);
const notarizationOutputs = await prover.notarize(commit);
console.timeEnd('commit');
console.time('proof');

const notarizedSession = (await new NotarizedSession(
session,
)) as TNotarizedSession;

const proofHex = await notarizedSession.proof(commit);
const presentation = (await new Presentation({
attestationHex: notarizationOutputs.attestation,
secretsHex: notarizationOutputs.secrets,
notaryUrl: notarizationOutputs.notaryUrl,
websocketProxyUrl: notarizationOutputs.websocketProxyUrl,
reveal: commit,
})) as TPresentation;

setPresentationJSON(await presentation.json());
console.timeEnd('proof');
setProofHex(proofHex);
}, [setProofHex, setProcessing]);
}, [setPresentationJSON, setProcessing]);

const onAltClick = useCallback(async () => {
setProcessing(true);
await init({ loggingLevel: 'Debug' });
const proof = await Prover.notarize({
id: 'test',
const proof = await (Prover.notarize as typeof TProver.notarize)({
notaryUrl: 'http://localhost:7047',
websocketProxyUrl: 'ws://localhost:55688',
url: 'https://swapi.dev/api/people/1',
Expand All @@ -108,48 +115,59 @@ function App(): ReactElement {
},
});

setProofHex(proof);
}, [setProofHex, setProcessing]);
setPresentationJSON(proof);
}, [setPresentationJSON, setProcessing]);

useEffect(() => {
(async () => {
if (proofHex) {
const proof = (await new TlsProof(proofHex)) as TTlsProof;
if (presentationJSON) {
const proof = (await new Presentation(
presentationJSON.data,
)) as TPresentation;
const notary = NotaryServer.from(`http://localhost:7047`);
const notaryKey = await notary.publicKey();
const proofData = await proof.verify({
typ: 'P256',
key: notaryKey,
const notaryKey = await notary.publicKey('hex');
const verifierOutput = await proof.verify();
const transcript = new Transcript({
sent: verifierOutput.transcript.sent,
recv: verifierOutput.transcript.recv,
});
const vk = await proof.verifyingKey();
setResult({
time: verifierOutput.connection_info.time,
verifyingKey: Buffer.from(vk.data).toString('hex'),
notaryKey: notaryKey,
serverName: verifierOutput.server_name,
sent: transcript.sent(),
recv: transcript.recv(),
});
setResult(proofData);
setProcessing(false);
}
})();
}, [proofHex, setResult]);
}, [presentationJSON, setResult]);

return (
<div>
<div>
<button
onClick={!processing ? onClick : undefined}
disabled={processing}
disabled={processing || !initialized}
>
Start Demo (Normal config)
</button>
</div>
<div>
<button
onClick={!processing ? onAltClick : undefined}
disabled={processing}
disabled={processing || !initialized}
>
Start Demo 2 (With helper method)
</button>
</div>
<div>
<b>Proof: </b>
{!processing && !proofHex ? (
{!processing && !presentationJSON ? (
<i>not started</i>
) : !proofHex ? (
) : !presentationJSON ? (
<>
Proving data from swapi...
<Watch
Expand All @@ -168,14 +186,14 @@ function App(): ReactElement {
<>
<details>
<summary>View Proof</summary>
<pre>{JSON.stringify(proofHex, null, 2)}</pre>
<pre>{JSON.stringify(presentationJSON, null, 2)}</pre>
</details>
</>
)}
</div>
<div>
<b>Verification: </b>
{!proofHex ? (
{!presentationJSON ? (
<i>not started</i>
) : !result ? (
<i>verifying</i>
Expand Down
6 changes: 3 additions & 3 deletions demo/react-ts-webpack/src/worker.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import * as Comlink from 'comlink';
import init, { Prover, NotarizedSession, TlsProof } from 'tlsn-js';
import init, { Prover, Attestation, Presentation } from 'tlsn-js';

Comlink.expose({
init,
Prover,
NotarizedSession,
TlsProof,
Presentation,
Attestation,
});
Loading