= ({ message }) => {
const [state, setState] = useState<{
msg: string;
msgSize: number;
msgFilename: string;
msgCategory: string;
msgPercentage: number;
msgLoadingText: string;
msgExtension: FileExtension;
}>({
msg: "",
msgSize: 0,
msgFilename: "",
msgCategory: p2party.MessageCategory.Text,
msgLoadingText: "",
msgPercentage: 0,
msgExtension: "",
});
useEffect(() => {
const controller = new AbortController();
const setMessage = async () => {
const m = await readMessage(message.merkleRootHex, message.sha512Hex);
/**
* In this situation the user is the sender and before they
* send the message they need to split it into chunks
* in order to calculate the Merkle root and proof before send.
*/
if (
message.fromPeerId === peerId &&
message.totalChunks > 0 &&
message.chunksCreated < message.totalChunks
) {
setState((prevState) => ({
...prevState,
msg:
typeof m.message === "string"
? m.message
: m.message
? URL.createObjectURL(m.message)
: "",
msgLoadingText:
"Split " +
message.chunksCreated +
" chunks of " +
message.totalChunks,
msgFilename: m.filename,
msgCategory: m.category,
msgExtension: m.extension,
msgPercentage: Math.floor(
(message.chunksCreated / message.totalChunks) * 100,
),
}));
} else {
/**
* Here the user is the receiver and they can read the message since they have
* all the necessary chunks
*/
if (m.percentage === 100) {
setState((prevState) => ({
...prevState,
msg:
typeof m.message === "string"
? m.message
: m.message
? URL.createObjectURL(m.message)
: "",
msgSize: m.size,
msgLoadingText: "",
msgFilename: m.filename,
msgCategory: m.category,
msgExtension: m.extension,
msgPercentage: m.percentage, // 100,
}));
} else {
/**
* Here the receiver does not have all the chunks necessary to read the message
**/
setState((prevState) => ({
...prevState,
msgSize: m.size,
msgLoadingText:
"Received " +
formatBytes(message.savedSize) +
" of " +
formatBytes(message.totalSize),
msgFilename: m.filename,
msgCategory: m.category,
msgExtension: m.extension,
msgPercentage: m.percentage,
}));
}
}
};
setMessage();
return () => {
controller.abort();
if (msg.length > 0 && msgCategory !== p2party.MessageCategory.Text)
URL.revokeObjectURL(msg);
};
}, [
message.merkleRootHex,
message.sha512Hex,
message.savedSize,
message.chunksCreated,
]);
const {
msg,
msgSize,
msgCategory,
msgPercentage,
msgExtension,
msgLoadingText,
msgFilename,
} = state;
return (
{msgCategory === p2party.MessageCategory.Text && url.length === 0 && (
{msg as string}
)}
{msgCategory === p2party.MessageCategory.Text && url.length > 0 && (
{msg as string}
)}
{msgCategory !== p2party.MessageCategory.Text && (
{msgFilename}
)}
);
};
```
For privacy features like whitelist, blacklist and room purging we have the following APIs:
```typescript
/**
* This deletes the user's private key but keeps all the messages.
* A side effect is that the user is disconnected from all their rooms.
*/
const purgeIdentity = () => void;
/**
* This deletes all the data of a room and disconnects the user from it.
*/
const purgeRoom = (roomUrl: string) => void;
/**
* This deletes both private keys and messages and gives a clean state.
*/
const purge = async () => void;
/**
* This deletes a specific message (merkle root) or all instances of
* a specific message (hash).
*/
const deleteMessage = async (
merkleRoot?: string | Uint8Array,
hash?: string | Uint8Array,
) => void;
/**
* This does not do anything by itself unless the next function is called.
*/
const addPeerToAddressBook = async (
username: string,
peerId: string,
peerPublicKey: string,
) => void;
/**
* Once this function is called with onlyAllow: true,
* the user can only connect to peers in their whitelist in a specific room.
* Everyone else cannot even see if the user is connected in the same URL.
* Can be reverted by calling the function with onlyAllow: false.
* Default state for new rooms is onlyAllow: false.
*/
const onlyAllowConnectionsFromAddressBook = async (
roomUrl: string,
onlyAllow: boolean,
) => void;
const deletePeerFromAddressBook = async (
username?: string,
peerId?: string,
peerPublicKey?: string,
) => void;
/**
* Once the user is here they cannot connect with us
* and they cannot even see if we are connected in the room at the same time as them.
* They can theoretically receive the same messages as us from our common peers who have
* not blacklisted them.
*/
const blacklistPeer = async (peerId: string, peerPublicKey: string) => void;
const removePeerFromBlacklist = async (peerId?: string, peerPublicKey?: string) => void;
```
Because a message is split into chunks with noisy padding for which we need to calculate Merkle proofs, it may take some time for the process to finish before starting transmitting the information over a channel.
## Development
If you want to build the library yourselves, you need to have [Emscripten](https://github.com/emscripten-core/emscripten)
installed on your machine in order to compile the C code into WebAssembly.
We have the `-s SINGLE_FILE=1` option for the `emcc` compiler, which converts the `wasm` file to a `base64` string
that will be compiled by the glue js code into a WebAssembly module. This was done for the purpose of interoperability
and modularity.
Clone the repo, download the libsodium submodule and install packages:
```
git clone https://github.com/p2party/p2party-js.git
cd p2party-js
git submodule init
git submodule update
npm i
```
Once you have all the dependencies installed, you can run
```
npm run dist
```
and [Rollup](https://github.com/rollup/rollup) will generate the UMD, ESM and CJS bundles.
## License
The source code is licensed under the terms of the Affero General Public License version 3.0 (see [LICENSE](LICENSE)).
## Copyright
Copyright (C) 2025 Deliberative Technologies P.C.