Skip to content

Commit

Permalink
fix: improvements on the nextJS demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@elribonazo
elribonazo committed Apr 25, 2024
1 parent 1805cd8 commit d38e3ee
Show file tree
Hide file tree
Showing 14 changed files with 345 additions and 137 deletions.
4 changes: 4 additions & 0 deletions demos/next/src/components/FooterNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export function FooterNavigation() {
<Link href="/" className="inline-block w-full p-4 bg-white border-0 border-gray-200 dark:border-gray-700 rounded-tr-lg rounded-br-lg hover:text-gray-700 hover:bg-gray-50 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">
Edge Agent
</Link> </li>
<li className="w-full">
<Link href="/verification" className="inline-block w-full p-4 bg-white border-0 border-gray-200 dark:border-gray-700 rounded-tr-lg rounded-br-lg hover:text-gray-700 hover:bg-gray-50 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">
OOB Verification
</Link> </li>
<li className="w-full">
<Link href="/connections" className="inline-block w-full p-4 bg-white border-0 border-gray-200 dark:border-gray-700 rounded-tr-lg rounded-br-lg hover:text-gray-700 hover:bg-gray-50 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">
Connenctions
Expand Down
5 changes: 3 additions & 2 deletions demos/next/src/components/Message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,8 @@ export function Message({ message }) {
debugger;
})
.catch((err) => {
setOptions({ valid: false });
debugger;
setOptions({ valid: false, reason: err.message });
})
}}>Verify the Proof</button>
{
Expand All @@ -310,7 +311,7 @@ export function Message({ message }) {
options.valid === true && <p>Presentation is VALID</p>
}
{
options.valid === false && <p>Presentation is NOT VALID</p>
options.valid === false && <p>Presentation is NOT VALID: {options.reason || 'unknown'} </p>
}
</>}
</p>
Expand Down
45 changes: 45 additions & 0 deletions demos/next/src/components/PageHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { useMountedApp } from "@/reducers/store";

export function PageHeader({ children }) {
const app = useMountedApp();

const agent = app.agent.instance;
const handleStart = async () => {
if (agent) {
app.startAgent({ agent })
}
};

const handleStop = async () => {
if (agent) {
app.stopAgent({ agent })
}
};

return <>

<div className="flex justify-left">
<div className="mx-2 my-5 inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-white">

{children}
</div>
<p className="mx-2 my-5 inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-white">
<b>Status:</b>&nbsp; {app.agent.instance?.state ?? 'stopped'}
</p>
{app.agent.instance?.state === "stopped" && (
<div className="mx-2 my-5 inline-flex px-5 py-3 items-center justify-center ">
<button className="px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900" style={{ width: 120 }} onClick={handleStart}>Start</button>
</div>
)}

{app.agent.instance?.state === "running" && (
<div className="mx-2 my-5 inline-flex px-5 py-3 items-center justify-center ">
<button className="px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900" style={{ width: 120 }} onClick={handleStop}>Stop</button>
</div>
)}
</div>



</>
}
14 changes: 10 additions & 4 deletions demos/next/src/pages/connections.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@

import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import '../app/index.css'
import { FooterNavigation } from "@/components/FooterNavigation";
import { Box } from "@/app/Box";
import { useMountedApp } from "@/reducers/store";
import { DBConnect } from "@/components/DBConnect";
import { OOB } from "@/components/OOB";
import { PageHeader } from "@/components/PageHeader";

export default function App() {

const app = useMountedApp();
const agent = app.agent.instance;
const [state, setState] = useState<string>(agent && agent.state !== undefined ? agent.state : "loading");

const [connections, setConnections] = React.useState<any>([]);

useEffect(() => {
Expand All @@ -19,9 +23,11 @@ export default function App() {
return (
<>
<div className="mx-10 mt-5 mb-30">
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Connections
</h1>
<PageHeader>
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Connections
</h1>
</PageHeader>
<DBConnect>
<Box>
{
Expand Down
11 changes: 7 additions & 4 deletions demos/next/src/pages/credentials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { FooterNavigation } from "@/components/FooterNavigation";
import { Box } from "@/app/Box";
import { useMountedApp } from "@/reducers/store";
import { DBConnect } from "@/components/DBConnect";
import { PageHeader } from "@/components/PageHeader";

function protect(claims) {
const newClaims: any[] = []
Expand All @@ -19,7 +20,7 @@ function protect(claims) {
}

function Credential({ credential }) {

const app = useMountedApp();
const [claims, setClaims] = useState(protect(credential.claims));

function disclose(claimIndex, field) {
Expand Down Expand Up @@ -70,9 +71,11 @@ export default function App() {
return (
<>
<div className="mx-10 mt-5 mb-30">
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Credentials
</h1>
<PageHeader>
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Credentials
</h1>
</PageHeader>
<DBConnect>
<Box>
{
Expand Down
9 changes: 6 additions & 3 deletions demos/next/src/pages/debug.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { KeyPair } from "@/components/Keypair";
import { Dids } from "@/components/Dids";
import { Box } from "@/app/Box";
import { useMountedApp } from "@/reducers/store";
import { PageHeader } from "@/components/PageHeader";


export default function App() {
Expand All @@ -21,9 +22,11 @@ export default function App() {
return (
<>
<div className="mx-10 mt-5 mb-30">
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Debug
</h1>
<PageHeader>
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Debug
</h1>
</PageHeader>
<Box>
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Settings
Expand Down
103 changes: 7 additions & 96 deletions demos/next/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,17 @@
import IndexDB from "@pluto-encrypted/indexdb";
import React, { useEffect, useState } from "react";

import SDK from "@atala/prism-wallet-sdk";

import { Box } from "../app/Box";
import '../app/index.css'
import { FooterNavigation } from "@/components/FooterNavigation";
import { DBConnect } from "@/components/DBConnect";
import { useMountedApp } from "@/reducers/store";
import { Message } from "@/components/Message";
import { AgentRequire } from "@/components/AgentRequire";
import { PageHeader } from "@/components/PageHeader";

const ListenerKey = SDK.ListenerKey;
const apollo = new SDK.Apollo();
const store = new SDK.Store({
name: "test",
storage: IndexDB,
password: Buffer.from("demoapp").toString("hex")
});

const Agent: React.FC<{}> = props => {
const app = useMountedApp();
const { db, mediatorDID, initAgent, startAgent, stopAgent } = app;
const { db, mediatorDID, initAgent } = app;

const agent = app.agent.instance;

Expand All @@ -30,9 +20,6 @@ const Agent: React.FC<{}> = props => {

const [messages, setNewMessage] = React.useState<SDK.Domain.Message[]>([]);

const [requiredFields, setRequiredFields] = React.useState<string>("emailAddress")
const [trustIssuers, setTrustIssuers] = React.useState<string>("did:prism:64dab5c8e887c705e3079f61373929eecfc4f570952adaef7a04192b50cb3138")

const handleMessages = async (
newMessages: SDK.Domain.Message[]
) => {
Expand Down Expand Up @@ -70,97 +57,21 @@ const Agent: React.FC<{}> = props => {
}
}, [agent])

const handleStart = async () => {
if (agent) {
startAgent({ agent })

}
};

const handleStop = async () => {
if (agent) {
stopAgent({ agent })
}
};

const handleInitiate = async () => {
const agent = app.agent.instance!;
agent.createNewPeerDID(
[],
true
).then((did) => {
return app.initiatePresentationRequest({
agent: agent,
toDID: did,
trustIssuers: trustIssuers.split(","),
requiredFields: requiredFields.split(",")
})
})

}

return (
<>
<div className="mx-10 mt-5 mb-30">
<DBConnect>
<Box>
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Edge Agent
</h1>
<p>
<b>Status:</b>&nbsp; {state}
</p>


<AgentRequire text="In order to start a Verification request the Edge Agent needs to be started first." >
<div> <Box>
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Initiate Verification request
</h1>

<label htmlFor="mediatordid">Required fields by ,: </label>
<input
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"

type="text"
value={requiredFields}
onChange={(e) => { setRequiredFields(e.target.value) }}
/>


<label htmlFor="mediatordid">Issuers by ,: </label>
<input
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"

type="text"
value={trustIssuers}
onChange={(e) => { setTrustIssuers(e.target.value) }}
/>

<>
<button
className="my-5 inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
style={{ width: 120 }}
onClick={handleInitiate}>
Initiate
</button>
</>
</Box>
</div>
</AgentRequire>


<PageHeader>
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Edge Agent
</h1>
</PageHeader>
<div>
{state === "stopped" && (
<>
<button className="my-5 inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900" style={{ width: 120 }} onClick={handleStart}>Start</button>
</>
)}

{state === "running" && (
<>
<button className="my-5 inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900" style={{ width: 120 }} onClick={handleStop}>Stop</button>

{messages.reverse().map((message, i) => {
return <Message message={message} key={`responseField${i}`} />
})}
Expand Down
9 changes: 6 additions & 3 deletions demos/next/src/pages/messages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Box } from "@/app/Box";
import { useMountedApp } from "@/reducers/store";
import { DBConnect } from "@/components/DBConnect";
import { Message } from "@/components/Message";
import { PageHeader } from "@/components/PageHeader";

export default function App() {
const app = useMountedApp();
Expand All @@ -19,9 +20,11 @@ export default function App() {
return (
<>
<div className="mx-10 mt-5 mb-30">
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Messages
</h1>
<PageHeader>
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
Messages
</h1>
</PageHeader>
<DBConnect>
<Box>
{
Expand Down

0 comments on commit d38e3ee

Please sign in to comment.