waku-org
/
waku-lab
mirror of https://github.com/waku-org/waku-lab.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore(buddybook): improvements

This commit is contained in:
Danish Arora 2024-11-13 12:20:46 +07:00
parent c047f204e9
commit 8ce736a665
No known key found for this signature in database
GPG Key ID: 1C6EF37CDAE1426E
3 changed files with 96 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
examples/buddybook/src/App.tsx
View File

@ -16,6 +16,8 @@ import ConnectionStatus from '@/components/ConnectionStatus';
type Status = 'success' | 'in-progress' | 'error';
interface WakuStatus {
filter: Status;
store: Status;
@ -30,6 +32,9 @@ function App() {
filter: 'in-progress',
store: 'in-progress',
});
(global.window as any).waku = node;
const [telemetryOptIn, setTelemetryOptIn] = useState<boolean | null>(null);
const [isLoadingChains, setIsLoadingChains] = useState(true);
@ -41,10 +46,22 @@ function App() {
}, []);
useEffect(() => {
if (isWakuLoading || !node || node.libp2p.getConnections().length <= 1 || chainsData.length > 0 || isListening) return;
if (isWakuLoading || !node || node.libp2p.getConnections().length === 0 || chainsData.length > 0 || isListening) {
console.log("not starting message listening");
console.log({
isWakuLoading,
node,
connections: node?.libp2p.getConnections().length,
chainsData,
isListening
})
return;
}
setIsListening(true);
console.log("connections", node.libp2p.getConnections().length)
startMessageListening();
setTimeout(() => {
startMessageListening();
}, 2000);
}, [node, isWakuLoading, wakuStatus])
const handleTelemetryOptIn = (optIn: boolean) => {
@ -69,25 +86,36 @@ function App() {
const startMessageListening = async () => {
console.log("Starting message listening")
console.log("connections", node.libp2p.getConnections().length)
// Add timeout for store query
const STORE_TIMEOUT = 30000; // 30 seconds
const storeTimeout = new Promise((_, reject) => {
setTimeout(() => reject(new Error('Store query timeout')), STORE_TIMEOUT);
});
try {
setWakuStatus(prev => ({ ...prev, store: 'in-progress' }));
setIsLoadingChains(true);
const messageGenerator = getMessagesFromStore(node as LightNode);
try {
for await (const message of messageGenerator) {
setChainsData(prevChains => {
const blockExists = prevChains.some(block => block.blockUUID === message.blockUUID);
if (blockExists) return prevChains;
return [...prevChains, message];
});
}
// Race between store query and timeout
await Promise.race([
(async () => {
for await (const message of messageGenerator) {
setChainsData(prevChains => {
const blockExists = prevChains.some(block => block.blockUUID === message.blockUUID);
if (blockExists) return prevChains;
return [...prevChains, message];
});
}
})(),
storeTimeout
]);
setWakuStatus(prev => ({ ...prev, store: 'success' }));
} catch (error) {
console.error("Error processing message:", error);
// Update store status to error when query fails
setWakuStatus(prev => ({ ...prev, store: 'error' }));
// Continue processing other messages
}
} catch (error) {
console.error("Error fetching messages from store:", error);
@ -96,11 +124,21 @@ function App() {
setIsLoadingChains(false);
}
// Add timeout for filter subscription
const FILTER_TIMEOUT = 15000; // 15 seconds
try {
setWakuStatus(prev => ({ ...prev, filter: 'in-progress' }));
await subscribeToFilter(node as LightNode, (message) => {
handleChainUpdate(message); // Use the same function for both updates
})
const filterPromise = subscribeToFilter(node as LightNode, (message) => {
handleChainUpdate(message);
});
await Promise.race([
filterPromise,
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Filter subscription timeout')), FILTER_TIMEOUT)
)
]);
setWakuStatus(prev => ({ ...prev, filter: 'success' }));
} catch (error) {
console.error("Error subscribing to filter:", error);

48
examples/buddybook/src/components/Chain/SignChain.tsx
View File

@ -171,8 +171,8 @@ const SignChain: React.FC<SignChainProps> = ({ block, chainsData, onSuccess }) =
{alreadySigned ? 'Already Signed' : !address ? 'Connect Wallet' : 'Sign Chain'}
</Button>
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogContent className="sm:max-w-md flex flex-col max-h-[90vh] md:max-h-[85vh]">
<DialogHeader className="flex-shrink-0">
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Sign Chain</DialogTitle>
<DialogDescription>
{alreadySigned
@ -180,32 +180,28 @@ const SignChain: React.FC<SignChainProps> = ({ block, chainsData, onSuccess }) =
: 'Review the block details and sign to add your signature to the chain.'}
</DialogDescription>
</DialogHeader>
<div className="flex-1 min-h-0 overflow-y-auto py-4">
<div className="space-y-4">
<div className="space-y-2">
<h4 className="font-medium">Block Details</h4>
<p className="text-sm text-muted-foreground">{block.title}</p>
<p className="text-sm text-muted-foreground">{block.description}</p>
</div>
<div className="flex justify-center">
<QRCode text={`${window.location.origin}/sign/${block.chainUUID}/${block.blockUUID}`} />
</div>
<div className="flex flex-col space-y-4">
<div className="space-y-2">
<h4 className="font-medium">Block Details</h4>
<p className="text-sm text-muted-foreground">{block.title}</p>
<p className="text-sm text-muted-foreground">{block.description}</p>
</div>
{(error || isWalletPrompt) && (
<div className="space-y-2 mt-4">
{error && <p className="text-sm text-destructive">{error}</p>}
{isWalletPrompt && (
<div className="rounded-md bg-blue-50 p-4">
<p className="text-sm text-blue-700">Attempting to connect to your wallet...</p>
<p className="text-xs text-blue-600 mt-1">
If your wallet doesn't open automatically, please open it manually to approve the connection.
</p>
</div>
)}
</div>
)}
<QRCode text={`${window.location.origin}/sign/${block.chainUUID}/${block.blockUUID}`} />
</div>
<DialogFooter className="flex-shrink-0 mt-4">
{(error || isWalletPrompt) && (
<div className="space-y-2">
{error && <p className="text-sm text-destructive">{error}</p>}
{isWalletPrompt && (
<div className="rounded-md bg-blue-50 p-4">
<p className="text-sm text-blue-700">Attempting to connect to your wallet...</p>
<p className="text-xs text-blue-600 mt-1">
If your wallet doesn't open automatically, please open it manually to approve the connection.
</p>
</div>
)}
</div>
)}
<DialogFooter>
<Button variant="secondary" onClick={() => setIsOpen(false)}>Cancel</Button>
<Button
onClick={handleSign}

39
examples/buddybook/src/lib/waku.ts
View File

@ -65,28 +65,33 @@ export function createMessage({
export async function* getMessagesFromStore(node: LightNode) {
console.time("getMessagesFromStore")
for await (const messagePromises of node.store.queryGenerator([decoder])) {
const messages = await Promise.all(messagePromises);
for (const message of messages) {
console.log(message)
if (!message?.payload) continue;
const blockPayload = block.decode(message.payload) as unknown as BlockPayload;
blockPayload.signatures = blockPayload.signatures.map(s => JSON.parse(s as unknown as string) as Signature);
yield blockPayload;
try {
for await (const messagePromises of node.store.queryGenerator([decoder])) {
const messages = await Promise.all(messagePromises);
for (const message of messages) {
if (!message?.payload) continue;
const blockPayload = block.decode(message.payload) as unknown as BlockPayload;
blockPayload.signatures = blockPayload.signatures.map(s => JSON.parse(s as unknown as string) as Signature);
yield blockPayload;
}
}
} finally {
console.timeEnd("getMessagesFromStore")
}
console.timeEnd("getMessagesFromStore")
}
export async function subscribeToFilter(node: LightNode, callback: (message: BlockPayload) => void) {
const {error, subscription, results} = await node.filter.subscribe([decoder], (message) => {
console.log('message received from filter', message)
if (message.payload) {
const blockPayload = block.decode(message.payload) as unknown as BlockPayload;
blockPayload.signatures = blockPayload.signatures.map(s => JSON.parse(s as unknown as string) as Signature);
callback(blockPayload);
const {error, subscription, results} = await node.filter.subscribe(
[decoder],
(message) => {
console.log('message received from filter', message)
if (message.payload) {
const blockPayload = block.decode(message.payload) as unknown as BlockPayload;
blockPayload.signatures = blockPayload.signatures.map(s => JSON.parse(s as unknown as string) as Signature);
callback(blockPayload);
}
}
}, {forceUseAllPeers: false});
);
console.log("results", results)
@ -94,7 +99,7 @@ export async function subscribeToFilter(node: LightNode, callback: (message: Blo
console.log("Error subscribing to filter", error)
}
if (!subscription || error || results.successes.length === 0 ||results.failures.length >0) {
if (!subscription || error || results.successes.length === 0 || results.failures.length > 0) {
throw new Error("Failed to subscribe to filter")
}
}