Skip to content

Commit

Permalink
chore(buddybook): improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@danisharora099
danisharora099 committed Nov 13, 2024
1 parent c047f20 commit 8ce736a
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 57 deletions.
66 changes: 52 additions & 14 deletions examples/buddybook/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import ConnectionStatus from '@/components/ConnectionStatus';

type Status = 'success' | 'in-progress' | 'error';



interface WakuStatus {
filter: Status;
store: Status;
Expand All @@ -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);

Expand All @@ -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) => {
Expand All @@ -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);
Expand All @@ -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);
Expand Down
48 changes: 22 additions & 26 deletions examples/buddybook/src/components/Chain/SignChain.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,41 +171,37 @@ 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
? 'You have already signed this chain.'
: '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}
Expand Down
39 changes: 22 additions & 17 deletions examples/buddybook/src/lib/waku.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,36 +65,41 @@ 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)

if (error) {
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")
}
}

0 comments on commit 8ce736a

Please sign in to comment.