feat: deploy dashboard

Author: MartianGreed

.gitignore

@@ -1,4 +1,6 @@
 node_modules
 docs
 
-.DS_Store
+.DS_Store
+# Local Netlify folder
+.netlify

examples/example-vite-kitchen-sink/.gitignore

@@ -8,6 +8,7 @@
 
 # testing
 /coverage
+/dist/
 
 # next.js
 /.next/

examples/example-vite-kitchen-sink/netlify.toml

@@ -0,0 +1,21 @@
+# example netlify.toml
+[build]
+  command = "pnpm run build"
+  functions = "netlify/functions"
+  publish = "examples/example-vite-kitchen-sink/dist"
+
+  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
+  ## Not needed for static site generators.
+  #[[redirects]]
+  #  from = "/*"
+  #  to = "/index.html"
+  #  status = 200
+
+  ## (optional) Settings for Netlify Dev
+  ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
+  #[dev]
+  #  command = "yarn start" # Command to start your dev server
+  #  port = 3000 # Port that the dev server will be listening on
+  #  publish = "dist" # Folder with the static content for _redirect file
+
+  ## more info on configuring this file: https://ntl.fyi/file-based-build-config

examples/example-vite-kitchen-sink/package.json

@@ -12,6 +12,8 @@
     "@cartridge/connector": "^0.3.46",
     "@dojoengine/core": "workspace:*",
     "@dojoengine/sdk": "workspace:*",
+    "@dojoengine/torii-wasm": "workspace:*",
+    "@dojoengine/torii-client": "workspace:*",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",

examples/example-vite-kitchen-sink/src/app/layout.tsx

@@ -5,18 +5,18 @@ import Header from "@/components/header";
 import StarknetProvider from "@/components/starknet-provider";
 
 
-export default function RootLayout({ children }) {
+export default function RootLayout({ children }: React.PropsWithChildren<{}>) {
   return (
     <StarknetProvider>
-        <TooltipProvider delayDuration={400}>
-          <div className="grid h-screen w-full pl-[53px]">
-            <Sidebar />
-            <div className="flex flex-col">
-              <Header />
-              {children}
-            </div>
+      <TooltipProvider delayDuration={400}>
+        <div className="grid h-screen w-full pl-[53px]">
+          <Sidebar />
+          <div className="flex flex-col">
+            <Header />
+            {children}
           </div>
-        </TooltipProvider>
+        </div>
+      </TooltipProvider>
     </StarknetProvider>
   );
 }

examples/example-vite-kitchen-sink/src/components/caller-counter.tsx

@@ -10,7 +10,8 @@ import { dojoConfig } from "@/dojo.config";
 
 export default function CallerCounter() {
   const [count, setCount] = useState(0);
-  const [sub, setSub] = useState<Subscription>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [sub, setSub] = useState<Subscription | null>(null);
   const { address } = useAccount();
   const { write: incrementCallerCounter } = useContractWrite({
     calls: [{
@@ -22,7 +23,8 @@ export default function CallerCounter() {
 
   const handleCallerClick = useCallback(async () => {
     incrementCallerCounter();
-  }, [incrementCallerCounter]);
+    setIsLoading(true);
+  }, [incrementCallerCounter, setIsLoading]);
 
   const db = useDojoDb();
   useEffect(() => {
@@ -31,13 +33,17 @@ export default function CallerCounter() {
         onchain_dash: {
           CallerCounter: { $: { where: { caller: { $eq: ensureStarkFelt(address) } } } }
         }
-      }, ({ data, error }) => { });
+      }, () => { });
       const counter = entity.pop();
       if (!counter) {
         return 0;
       }
-      const count = parseInt(counter.models.onchain_dash.CallerCounter.counter, 16);
-      return count;
+      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)
@@ -47,6 +53,7 @@ export default function CallerCounter() {
   useEffect(() => {
     async function subscribeToEntityUpdates(db: SDK<OnchainDashSchemaType>, 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) {
@@ -57,8 +64,13 @@ export default function CallerCounter() {
           if (entity.models.onchain_dash?.CallerCounter?.counter === undefined) {
             return
           }
-          const count = parseInt(entity.models.onchain_dash?.CallerCounter?.counter, 16);
-          setCount(count);
+          const count = entity.models.onchain_dash?.CallerCounter?.counter;
+          if (undefined === count) {
+            return 0;
+          }
+
+          setIsLoading(false);
+          setCount(parseInt(count.toString(), 16));
           return;
         }
         if (error) {
@@ -85,7 +97,7 @@ export default function CallerCounter() {
         Count : {count}
       </div>
       <div className="grid gap-3">
-        <Button variant="outline" className="rounded-lg" onClick={handleCallerClick}>Click me !</Button>
+        <Button variant="outline" className="rounded-lg" loading={isLoading} onClick={handleCallerClick}>Click me !</Button>
       </div>
     </fieldset>
 

examples/example-vite-kitchen-sink/src/components/chat.tsx

@@ -9,7 +9,7 @@ import { useDojoDb } from "@/dojo/provider";
 import { useAccount } from "@starknet-react/core";
 import { toValidAscii } from "@/lib/utils";
 import { SDK } from "@dojoengine/sdk";
-import { OnchainDashSchemaType } from "@/dojo/models";
+import { Message, OnchainDashSchemaType } from "@/dojo/models";
 import { Subscription } from "@dojoengine/torii-wasm";
 import { shortAddress } from "@/lib/utils";
 
@@ -19,15 +19,19 @@ interface MessageItem {
   timestamp: number;
 }
 
+interface FormValues {
+  message: string;
+}
+
 export default function Chat() {
-  const { register, handleSubmit, reset } = useForm();
+  const { register, handleSubmit, reset } = useForm<FormValues>();
   const { account } = useAccount();
   const [messages, setMessages] = useState<MessageItem[]>([]);
-  const [sub, setSub] = useState<Subscription>(null);
+  const [sub, setSub] = useState<Subscription | null>(null);
   const formRef = useRef<HTMLFormElement>(null);
 
   const db = useDojoDb();
-  const publish = useCallback(async (data) => {
+  const publish = useCallback(async (data: FormValues) => {
     if (!account || !db) return;
 
     const asciiMessage = toValidAscii(data.message);
@@ -36,7 +40,7 @@ export default function Chat() {
       const signature = await account.signMessage(msg);
 
       try {
-        await db.client.publishMessage(JSON.stringify(msg), signature);
+        await db.client.publishMessage(JSON.stringify(msg), signature as string[]);
         reset();
       } catch (error) {
         console.error("failed to publish message:", error);
@@ -50,11 +54,13 @@ export default function Chat() {
     async function getEntity(db: SDK<OnchainDashSchemaType>) {
       const entity = await db.getEntities({
         onchain_dash: { Message: { $: {} } }
-      }, ({ data, error }) => { });
+      }, () => { });
 
-      return entity.map(e => e.models.onchain_dash.Message).filter(Boolean).sort((a, b) => parseInt(a.timestamp, 16) < parseInt(b.timestamp, 16) ? -1 : 1);
+      // @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])
@@ -63,7 +69,7 @@ export default function Chat() {
     async function subscribeToEntityUpdates(db: SDK<OnchainDashSchemaType>) {
       const sub = await db.subscribeEntityQuery({
         onchain_dash: { Message: { $: {} } }
-      }, ({ data, error }) => {
+      }, ({ data }) => {
         if (data) {
           const entity = data.pop();
           if (!entity) {
@@ -83,7 +89,7 @@ export default function Chat() {
     }
   }, [db, sub, setMessages]);
 
-  const handleKeyPress = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyPress = useCallback((e: KeyboardEvent<HTMLFormElement>) => {
     if (e.key !== 'Enter') {
       return;
     }

examples/example-vite-kitchen-sink/src/components/global-counter.tsx

@@ -9,7 +9,8 @@ import { dojoConfig } from "@/dojo.config";
 
 export default function GlobalCOunter() {
   const [count, setCount] = useState(0);
-  const [sub, setSub] = useState<Subscription>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [sub, setSub] = useState<Subscription | null>(null);
   const { write: incrementGlobalCounter } = useContractWrite({
     calls: [{
       contractAddress: dojoConfig.manifest.contracts[0].address,
@@ -19,7 +20,8 @@ export default function GlobalCOunter() {
   });
   const handleGlobalClick = useCallback(async () => {
     incrementGlobalCounter();
-  }, [incrementGlobalCounter]);
+    setIsLoading(true);
+  }, [incrementGlobalCounter, setIsLoading]);
 
   const db = useDojoDb();
 
@@ -35,8 +37,11 @@ export default function GlobalCOunter() {
       if (!counter) {
         return 0;
       }
-      const count = parseInt(counter.models.onchain_dash.GlobalCounter.counter, 16);
-      return count;
+      const count = counter.models.onchain_dash?.GlobalCounter?.counter;
+      if (undefined === count) {
+        return 0;
+      }
+      return parseInt(count.toString(), 16);
     }
 
     if (db) {
@@ -47,6 +52,7 @@ export default function GlobalCOunter() {
   useEffect(() => {
     async function subscribeToEntityUpdates(db: SDK<OnchainDashSchemaType>) {
       const sub = await db.subscribeEntityQuery({
+        // @ts-expect-error $eq is working there
         onchain_dash: { GlobalCounter: { $: { where: { global_counter_key: { $eq: 9999999 } } } } }
       }, ({ data, error }) => {
         if (data) {
@@ -57,8 +63,13 @@ export default function GlobalCOunter() {
           if (entity.models.onchain_dash?.GlobalCounter?.counter === undefined) {
             return
           }
-          const count = parseInt(entity.models.onchain_dash?.GlobalCounter?.counter, 16);
-          setCount(count);
+          const count = entity.models.onchain_dash?.GlobalCounter?.counter;
+          if (undefined === count) {
+            return 0;
+          }
+          const value = parseInt(count.toString(), 16);
+          setCount(value);
+          setIsLoading(false);
           return;
         }
         if (error) {
@@ -75,7 +86,7 @@ export default function GlobalCOunter() {
         sub.free();
       }
     };
-  }, [db, sub]);
+  }, [db, sub, setIsLoading]);
 
   return (
     <fieldset className="grid gap-6 rounded-lg border p-4">
@@ -86,7 +97,7 @@ export default function GlobalCOunter() {
         Count : {count}
       </div>
       <div className="grid gap-3">
-        <Button variant="outline" className="rounded-lg" onClick={handleGlobalClick}>Click me !</Button>
+        <Button variant="outline" className="rounded-lg" loading={isLoading} onClick={handleGlobalClick}>Click me !</Button>
       </div>
     </fieldset>
   )