- (null);
- const { address } = useAccount();
- const { write: incrementCallerCounter } = useContractWrite({
- calls: [{
- contractAddress: dojoConfig.manifest.contracts[0].address,
- entrypoint: "increment_caller_counter",
- calldata: []
- }]
- });
+ const [count, setCount] = useState(0);
+ const [isLoading, setIsLoading] = useState(false);
+ const [sub, setSub] = useState(null);
+ const { address } = useAccount();
+ const { write: incrementCallerCounter } = useContractWrite({
+ calls: [
+ {
+ contractAddress: dojoConfig.manifest.contracts[0].address,
+ entrypoint: "increment_caller_counter",
+ calldata: [],
+ },
+ ],
+ });
- const handleCallerClick = useCallback(async () => {
- incrementCallerCounter();
- setIsLoading(true);
- }, [incrementCallerCounter, setIsLoading]);
+ const handleCallerClick = useCallback(async () => {
+ incrementCallerCounter();
+ setIsLoading(true);
+ }, [incrementCallerCounter, setIsLoading]);
- const db = useDojoDb();
- useEffect(() => {
- async function getEntity(db: SDK, address: string) {
- const entity = await db.getEntities({
- onchain_dash: {
- CallerCounter: { $: { where: { caller: { $eq: ensureStarkFelt(address) } } } }
- }
- }, () => { });
- const counter = entity.pop();
- if (!counter) {
- return 0;
- }
- const count = counter.models.onchain_dash?.CallerCounter?.counter
- if (undefined === count) {
- return 0;
- }
+ const db = useDojoDb();
+ useEffect(() => {
+ async function getEntity(
+ db: SDK,
+ address: string
+ ) {
+ const entity = await db.getEntities(
+ {
+ onchain_dash: {
+ CallerCounter: {
+ $: {
+ where: {
+ caller: { $eq: ensureStarkFelt(address) },
+ },
+ },
+ },
+ },
+ },
+ () => {}
+ );
+ const counter = entity.pop();
+ if (!counter) {
+ return 0;
+ }
+ const count = counter.models.onchain_dash?.CallerCounter?.counter;
+ if (undefined === count) {
+ return 0;
+ }
- return parseInt(count.toString(), 16);
- }
- if (address && db) {
- getEntity(db, address).then(setCount).catch(console.error)
- }
- }, [address, db])
+ return parseInt(count.toString(), 16);
+ }
+ if (address && db) {
+ getEntity(db, address).then(setCount).catch(console.error);
+ }
+ }, [address, db]);
- useEffect(() => {
- async function subscribeToEntityUpdates(db: SDK, address: string) {
- const sub = await db.subscribeEntityQuery({
- // @ts-expect-error $eq is working there
- onchain_dash: { CallerCounter: { $: { where: { caller: { $eq: ensureStarkFelt(address) } } } } }
- }, ({ data, error }) => {
- if (data) {
- const entity = data.pop();
- if (!entity) {
- return;
- }
- if (entity.models.onchain_dash?.CallerCounter?.counter === undefined) {
- return
- }
- const count = entity.models.onchain_dash?.CallerCounter?.counter;
- if (undefined === count) {
- return 0;
- }
+ useEffect(() => {
+ async function subscribeToEntityUpdates(
+ db: SDK,
+ address: string
+ ) {
+ const sub = await db.subscribeEntityQuery(
+ {
+ // @ts-expect-error $eq is working there
+ onchain_dash: {
+ CallerCounter: {
+ $: {
+ where: {
+ caller: { $eq: ensureStarkFelt(address) },
+ },
+ },
+ },
+ },
+ },
+ ({ data, error }) => {
+ if (data) {
+ const entity = data.pop();
+ if (!entity) {
+ return;
+ }
+ if (
+ entity.models.onchain_dash?.CallerCounter
+ ?.counter === undefined
+ ) {
+ return;
+ }
+ const count =
+ entity.models.onchain_dash?.CallerCounter?.counter;
+ if (undefined === count) {
+ return 0;
+ }
- setIsLoading(false);
- setCount(parseInt(count.toString(), 16));
- return;
+ setIsLoading(false);
+ setCount(parseInt(count.toString(), 16));
+ return;
+ }
+ if (error) {
+ throw error;
+ }
+ }
+ );
+ setSub(sub);
}
- if (error) {
- throw error;
+ if (address && db && sub === null) {
+ subscribeToEntityUpdates(db, address)
+ .then(() => {})
+ .catch(console.error);
}
- });
- setSub(sub);
- }
- if (address && db && sub === null) {
- subscribeToEntityUpdates(db, address).then(() => { }).catch(console.error)
- }
- return () => {
- if (sub) {
- sub.free();
- }
- };
- }, [address, db, sub]);
- return (
-
-
- );
+ return () => {
+ if (sub) {
+ sub.free();
+ }
+ };
+ }, [address, db, sub]);
+ return (
+
+ );
}
diff --git a/examples/example-vite-kitchen-sink/src/components/chat.tsx b/examples/example-vite-kitchen-sink/src/components/chat.tsx
index fdc7f1f7..61f13885 100644
--- a/examples/example-vite-kitchen-sink/src/components/chat.tsx
+++ b/examples/example-vite-kitchen-sink/src/components/chat.tsx
@@ -14,129 +14,165 @@ import { Subscription } from "@dojoengine/torii-wasm";
import { shortAddress } from "@/lib/utils";
interface MessageItem {
- content: string;
- identity: string;
- timestamp: number;
+ content: string;
+ identity: string;
+ timestamp: number;
}
interface FormValues {
- message: string;
+ message: string;
}
export default function Chat() {
- const { register, handleSubmit, reset } = useForm();
- const { account } = useAccount();
- const [messages, setMessages] = useState([]);
- const [sub, setSub] = useState(null);
- const formRef = useRef(null);
+ const { register, handleSubmit, reset } = useForm();
+ const { account } = useAccount();
+ const [messages, setMessages] = useState([]);
+ const [sub, setSub] = useState(null);
+ const formRef = useRef(null);
- const db = useDojoDb();
- const publish = useCallback(async (data: FormValues) => {
- if (!account || !db) return;
+ const db = useDojoDb();
+ const publish = useCallback(
+ async (data: FormValues) => {
+ if (!account || !db) return;
- const asciiMessage = toValidAscii(data.message);
- const msg = db.generateTypedData('onchain_dash-Message', { identity: account?.address, content: asciiMessage, timestamp: Date.now() })
- try {
- const signature = await account.signMessage(msg);
+ const asciiMessage = toValidAscii(data.message);
+ const msg = db.generateTypedData("onchain_dash-Message", {
+ identity: account?.address,
+ content: asciiMessage,
+ timestamp: Date.now(),
+ });
+ try {
+ const signature = await account.signMessage(msg);
- try {
- await db.client.publishMessage(JSON.stringify(msg), signature as string[]);
- reset();
- } catch (error) {
- console.error("failed to publish message:", error);
- }
- } catch (error) {
- console.error("failed to sign message:", error);
- }
- }, [db, account, reset]);
+ try {
+ await db.client.publishMessage(
+ JSON.stringify(msg),
+ signature as string[]
+ );
+ reset();
+ } catch (error) {
+ console.error("failed to publish message:", error);
+ }
+ } catch (error) {
+ console.error("failed to sign message:", error);
+ }
+ },
+ [db, account, reset]
+ );
- useEffect(() => {
- async function getEntity(db: SDK) {
- const entity = await db.getEntities({
- onchain_dash: { Message: { $: {} } }
- }, () => { });
+ useEffect(() => {
+ async function getEntity(db: SDK) {
+ const entity = await db.getEntities(
+ {
+ onchain_dash: { Message: { $: {} } },
+ },
+ () => {}
+ );
- // @ts-expect-error a & b are not undefined as they are filtered out with `filer(Boolean)`
- return entity.map(e => e.models.onchain_dash.Message).filter(Boolean).sort((a: Message, b: Message): number => parseInt(a.timestamp.toString(), 16) < parseInt(b.timestamp.toString(), 16) ? -1 : 1);
- }
- if (db && messages.length === 0 && sub === null) {
- // @ts-expect-error ts is getting drunk there
- getEntity(db).then(setMessages).catch(console.error)
- }
- }, [db, messages, sub])
+ // @ts-expect-error a & b are not undefined as they are filtered out with `filer(Boolean)`
+ return entity
+ .map((e) => e.models.onchain_dash.Message)
+ .filter(Boolean)
+ .sort((a: Message, b: Message): number =>
+ parseInt(a.timestamp.toString(), 16) <
+ parseInt(b.timestamp.toString(), 16)
+ ? -1
+ : 1
+ );
+ }
+ if (db && messages.length === 0 && sub === null) {
+ // @ts-expect-error ts is getting drunk there
+ getEntity(db).then(setMessages).catch(console.error);
+ }
+ }, [db, messages, sub]);
+
+ useEffect(() => {
+ async function subscribeToEntityUpdates(
+ db: SDK
+ ) {
+ const sub = await db.subscribeEntityQuery(
+ {
+ onchain_dash: { Message: { $: {} } },
+ },
+ ({ data }) => {
+ if (data) {
+ const entity = data.pop();
+ if (!entity) {
+ return;
+ }
+ const msg = entity.models.onchain_dash.Message;
+ if (msg === undefined) {
+ return;
+ }
+ setMessages((prevMessages) => [...prevMessages, msg]);
+ }
+ }
+ );
+ setSub(sub);
+ }
+ if (db && sub === null) {
+ subscribeToEntityUpdates(db).then().catch(console.error);
+ }
+ }, [db, sub, setMessages]);
- useEffect(() => {
- async function subscribeToEntityUpdates(db: SDK) {
- const sub = await db.subscribeEntityQuery({
- onchain_dash: { Message: { $: {} } }
- }, ({ data }) => {
- if (data) {
- const entity = data.pop();
- if (!entity) {
+ const handleKeyPress = useCallback((e: KeyboardEvent) => {
+ if (e.key !== "Enter") {
return;
- }
- const msg = entity.models.onchain_dash.Message;
- if (msg === undefined) {
+ }
+ if (e.shiftKey && e.key === "Enter") {
+ e.shiftKey = false;
return;
- }
- setMessages(prevMessages => [...prevMessages, msg]);
}
- });
- setSub(sub);
- }
- if (db && sub === null) {
- subscribeToEntityUpdates(db).then().catch(console.error)
- }
- }, [db, sub, setMessages]);
-
- const handleKeyPress = useCallback((e: KeyboardEvent) => {
- if (e.key !== 'Enter') {
- return;
- }
- if (e.shiftKey && e.key === 'Enter') {
- e.shiftKey = false;
- return;
- }
- e.preventDefault();
- formRef.current?.requestSubmit();
- return;
- }, [])
+ e.preventDefault();
+ formRef.current?.requestSubmit();
+ return;
+ }, []);
- return (
-
-
-