fix: simplify demo and add docs

Signed-off-by: Francisco Javier Ribo Labrador <[email protected]>
hyperledger · Dec 4, 2024 · 27f5263 · 27f5263
1 parent e4fb65a
commit 27f5263
Show file tree

Hide file tree

Showing 3 changed files with 510 additions and 48 deletions.
diff --git a/demos/next/src/pages/dids.tsx b/demos/next/src/pages/dids.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import SDK from "@hyperledger/identus-edge-agent-sdk";
 import '../app/index.css'
-import { useMountedApp } from "@/reducers/store";
 import { PageHeader } from "@/components/PageHeader";
 import { Cip30Wallet, Cip30WalletApiWithPossibleExtensions } from '@cardano-sdk/dapp-connector';
 import { TransactionUnspentOutput as TransactionUnspentOutputType } from "@emurgo/cardano-serialization-lib-browser";
@@ -13,7 +12,7 @@ async function loadSerialization() {
     return instance
 }
 
-async function getParameters() {
+async function fetchNetworkParams() {
     const response = await fetch(
         "https://cardano-mainnet.blockfrost.io/api/v0/epochs/latest/parameters",
         {
@@ -41,10 +40,6 @@ async function getParameters() {
     };
 }
 
-async function fetchNetworkParams() {
-    return await getParameters();
-}
-
 async function getUtxos(API: Cip30WalletApiWithPossibleExtensions) {
     const {
         TransactionUnspentOutput
@@ -163,52 +158,21 @@ async function buildTransactionHex(
     return signedTxHex;
 }
 
-const ListenerKey = SDK.ListenerKey;
 const Agent: React.FC<{}> = props => {
-    const app = useMountedApp();
-    const { db, mediatorDID, initAgent } = app;
-    const agent = app.agent.instance;
-    const [state, setState] = useState<string>(agent && agent.state !== undefined ? agent.state : "loading");
     const [walletState, setWalletState] = useState<any>({
         wallets: [] as Array<{ key: string; name: string; icon: string; api: Cip30Wallet }>,
         whichWalletSelected: ''
     });
     const [error] = React.useState<any>();
-    const [messages, setNewMessage] = React.useState<SDK.Domain.Message[]>([]);
     const [masterKey, setMasterKey] = useState<SDK.Domain.PrivateKey>();
     const [publishStatus, setPublishStatus] = useState<{
         status: 'idle' | 'publishing' | 'confirming' | 'completed' | 'error';
         message?: string;
         txHash?: string;
     }>({ status: 'idle' });
 
-    const handleMessages = async (
-        newMessages: SDK.Domain.Message[]
-    ) => {
-        setNewMessage([
-            ...newMessages,
-            ...messages,
-        ]);
-    };
-
-    useEffect(() => {
-        setNewMessage([
-            ...messages
-                .filter(({ id }) => app.messages.find((appMessage) => appMessage.id === id) !== undefined)
-                .map(({ id }) => app.messages.find((appMessage) => appMessage.id === id)!)
-        ]);
-    }, [app.messages]);
-
-    useEffect(() => {
-        if (!app.agent.instance && db.instance) {
-            initAgent({ mediatorDID, pluto: db.instance, defaultSeed: app.defaultSeed });
-        }
-        if (app.agent && app.agent.instance) {
-            setState(app.agent.instance.state);
-        }
-    }, [app.agent, db]);
-
     useEffect(() => {
+        let timeout;
         const pollWallets = (count = 0) => {
             const wallets: any[] = [];
             if ((window as any).cardano) {
@@ -225,7 +189,7 @@ const Agent: React.FC<{}> = props => {
                 }
             }
             if (wallets.length === 0 && count < 3) {
-                setTimeout(() => {
+                timeout = setTimeout(() => {
                     pollWallets(count + 1);
                 }, 1000);
                 return;
@@ -238,16 +202,13 @@ const Agent: React.FC<{}> = props => {
 
         pollWallets();
 
-        if (agent) {
-            agent.addListener(ListenerKey.MESSAGE, handleMessages);
-        }
-
         return () => {
-            if (agent) {
-                agent.removeListener(ListenerKey.MESSAGE, handleMessages);
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = undefined;
             }
         };
-    }, [agent]);
+    }, []);
 
     function onCreateMasterKey() {
         const apollo = new SDK.Apollo();
@@ -310,11 +271,22 @@ const Agent: React.FC<{}> = props => {
                             txHash
                         });
                     } else {
-                        setTimeout(checkConfirmation, 30000); // Check every 30 seconds
+                        await new Promise<void>((resolve) => {
+                            setTimeout(async () => {
+                                await checkConfirmation()
+                                resolve();
+                            }, 15000)
+                        })
                     }
                 };
 
-                setTimeout(checkConfirmation, 30000); // Start checking after 30 seconds
+                await new Promise<void>((resolve) => {
+                    setTimeout(async () => {
+                        await checkConfirmation()
+                        resolve();
+                    }, 15000)
+                })
+
 
             } catch (error) {
                 console.error('Error during transaction:', error);