-
- );
-}
diff --git a/src/store/index.ts b/src/store/index.ts
deleted file mode 100644
index 8d47592..0000000
--- a/src/store/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { applyMiddleware, combineReducers, createStore } from 'redux';
-import { thunk } from 'redux-thunk';
-import { createLogger } from 'redux-logger';
-
-
-const rootReducer = combineReducers({
- // Add your reducers here
-});
-
-export type AppRootState = ReturnType
+
+ );
+}
diff --git a/src/components/index.scss b/web/components/Button/index.scss
similarity index 100%
rename from src/components/index.scss
rename to web/components/Button/index.scss
diff --git a/web/components/Button/index.tsx b/web/components/Button/index.tsx
new file mode 100644
index 0000000..d9cd81f
--- /dev/null
+++ b/web/components/Button/index.tsx
@@ -0,0 +1,46 @@
+import React, { ButtonHTMLAttributes, ReactElement } from 'react';
+import classNames from 'classnames';
+import './index.scss';
+import Icon from '../Icon';
+
+type Props = {
+ className?: string;
+ btnType?: 'primary' | 'secondary' | '';
+ loading?: boolean;
+} & ButtonHTMLAttributes
+ 
+ Plugin Demo
+
+
+ {extensionInstalled ? (
+ <>
+
+
+ {steps.map((label) => (
+
+ {label}
+
+ ))}
+
+
+
+ );
+}
+
+function DisplayPluginData({
+ step,
+ pluginData,
+ transcript,
+ setTranscript,
+ setStep,
+}: {
+ step: number;
+ pluginData: any;
+ transcript: any;
+ setTranscript: any;
+ setStep: any;
+}): ReactElement {
+ const [tab, setTab] = useState<'sent' | 'recv'>('sent');
+
+ async function handleVerify() {
+ try {
+ const { Presentation, Transcript } = await import('tlsn-js');
+ const presentation = await new Presentation(pluginData.data);
+ const proof = await presentation.verify();
+ const transcript = new Transcript({
+ sent: proof.transcript.sent,
+ recv: proof.transcript.recv,
+ });
+ const verifiedData = {
+ sent: transcript.sent(),
+ recv: transcript.recv(),
+ };
+ setTranscript(verifiedData);
+ setStep(4);
+ } catch (error) {
+ console.log(error);
+ }
+ }
+
+ const formatDataPreview = (data: PresentationJSON) => {
+ if (!data) return '';
+ return Object.entries(data)
+ .map(([key, value]) => {
+ if (typeof value === 'object' && value !== null) {
+ return `${key}: ${JSON.stringify(value, null, 2)}`;
+ } else if (key === 'data') {
+ const maxLength = 160;
+ const previewData = value.toString().substring(0, maxLength);
+ const formattedData = previewData.match(/.{1,20}/g)?.join('\n');
+ return `${key}: ${formattedData}... ${value.length} more`;
+ } else {
+ return `${key}: ${value}`;
+ }
+ })
+ .join('\n');
+ };
+
+ return (
+
+ Connected{' '}
+
+ = 1,
+ 'bg-red-500': step === 0,
+ },
+ )}
+ >
+
+ {step === 0 && (
+
+ )}
+ {step === 1 && (
+
+
+
+
+
+
+ )}
+ {step === 2 && (
+
+
+
+ Please keep the sidebar open during the notarization process
+
+
+ )}
+ {step === 4 && (
+ <>
+
+
+ Install TLSN Extension
+
+
+ )}
+ Please install the extension to proceed.
++ You will need to refresh your browser after installing the + extension. +
+
+
+ );
+}
+
+function ClaimPoap({
+ screen_name,
+ exploding,
+}: {
+ screen_name: string;
+ exploding: boolean;
+}): ReactElement {
+ const [screenName, setScreenName] = useState('');
+ const [poapLink, setPoapLink] = useState
+
+
+
+ Attestation
+
+
+
+
+ {formatDataPreview(pluginData)}
+
+
+
+
+ Presentation
+
+
+
+
+
+
+
+
+
+
+ {transcript &&
+ (tab === 'sent' ? transcript.sent : transcript.recv)}
+
+
+ {poapLink !== '' && (
+
+ Claim POAP!
+
+ )}
+ {exploding &&
+ );
+}
diff --git a/web/components/index.scss b/web/components/index.scss
new file mode 100644
index 0000000..abdf684
--- /dev/null
+++ b/web/components/index.scss
@@ -0,0 +1,45 @@
+.button {
+ @apply bg-slate-100;
+ @apply text-slate-500;
+ @apply font-bold;
+ @apply px-2 py-0.5;
+ user-select: none;
+
+ &:hover {
+ @apply text-slate-600;
+ @apply bg-slate-200;
+ }
+
+ &:active {
+ @apply text-slate-700;
+ @apply bg-slate-300;
+ }
+
+ &--primary {
+ @apply bg-primary/[0.8];
+ @apply text-white;
+
+ &:hover {
+ @apply bg-primary/[0.9];
+ @apply text-white;
+ }
+
+ &:active {
+ @apply bg-primary;
+ @apply text-white;
+ }
+ }
+
+ &:disabled {
+ @apply opacity-50;
+ @apply select-none;
+
+ &:hover {
+ @apply text-slate-400;
+ }
+
+ &:active {
+ @apply text-slate-400;
+ }
+ }
+}
diff --git a/web/declarations.d.ts b/web/declarations.d.ts
new file mode 100644
index 0000000..091d25e
--- /dev/null
+++ b/web/declarations.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+ const content: any;
+ export default content;
+}
diff --git a/src/index.tsx b/web/index.tsx
similarity index 54%
rename from src/index.tsx
rename to web/index.tsx
index 582be45..b1fac3b 100644
--- a/src/index.tsx
+++ b/web/index.tsx
@@ -1,22 +1,29 @@
import 'isomorphic-fetch';
+import type {} from 'redux-thunk/extend-redux';
import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
+import { hydrateRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
-import store from './store';
import App from './pages/App';
+import { Provider } from 'react-redux';
+import configureAppStore from './store';
+
+// @ts-ignore
+const store = configureAppStore(window.__PRELOADED_STATE__);
+
+// @ts-ignore
+delete window.__PRELOADED_STATE__;
(async () => {
- ReactDOM.render(
+ hydrateRoot(
+ document.getElementById('root')!,
+
+
+
+ );
+}
diff --git a/web/store/attestation.tsx b/web/store/attestation.tsx
new file mode 100644
index 0000000..4745136
--- /dev/null
+++ b/web/store/attestation.tsx
@@ -0,0 +1,51 @@
+import { Attestation, AttestedData } from '../utils/types';
+
+enum ActionType {
+ SET_ATTESTATION = 'attestation/SET_ATTESTATION',
+}
+
+export type Action