Merge remote-tracking branch 'origin/vt-digit-recognition-frontend' into vt-cats-dogs-predict-frontend

Author: vraja-nayaka

digit-recognition/frontend/package.json

@@ -11,11 +11,9 @@
   },
   "dependencies": {
     "@polkadot/types": "14.3.1",
-    "@radix-ui/react-slot": "1.1.0",
     "@reown/appkit": "^1.6.0",
     "@reown/appkit-adapter-wagmi": "^1.6.0",
     "@tanstack/react-query": "^5.59.20",
-    "class-variance-authority": "^0.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "wagmi": "^2.12.29"
@@ -32,6 +30,7 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10",
+    "vite-plugin-checker": "0.8.0",
     "vite-plugin-svgr": "^4.3.0",
     "sass": "1.62.0"
   }

digit-recognition/frontend/src/App.tsx

@@ -3,11 +3,14 @@ import { useAccount } from "wagmi";
 
 import { WalletButton, Header, Layout } from "@/components";
 import { Recognition } from "./components/recognition/Recognition";
+import { ETH_CHAIN_ID } from "./consts";
 import styles from "./App.module.scss";
 
 function App() {
   const ethAccount = useAccount();
-  const isConnected = Boolean(ethAccount.chain);
+  const isConnected = Boolean(
+    ethAccount.chain && ethAccount.chain.id === ETH_CHAIN_ID
+  );
 
   return (
     <>

digit-recognition/frontend/src/components/recognition/Recognition.module.scss

@@ -32,3 +32,9 @@
   text-decoration: none;
   font-size: 12px;
 }
+
+@media (max-width: 768px) {
+  .list {
+    flex-direction: column;
+  }
+}

digit-recognition/frontend/src/components/ui/card/Card.module.scss

@@ -3,6 +3,7 @@
   border: 1px solid #ffffff29;
   width: 437px;
   height: 552px;
+  max-width: 100%;
 }
 
 .header {

digit-recognition/frontend/src/components/wallet/WalletButton.module.scss

@@ -1,3 +1,18 @@
 .connect {
   min-width: 168px;
 }
+
+.button span {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .button {
+    svg {
+      display: none;
+    }
+    span {
+      display: inline;
+    }
+  }
+}

digit-recognition/frontend/src/components/wallet/WalletButton.tsx

@@ -1,20 +1,19 @@
 import { useAppKit } from "@reown/appkit/react";
 import { useAccount } from "wagmi";
 import { Button } from "@/components";
-import { useIsTablet } from "@/lib/hooks/use-media";
 import BurgerMenu from "@/assets/icons/burger-menu.svg?react";
 import styles from "./WalletButton.module.scss";
 
 export const WalletButton = () => {
   const ethAccount = useAccount();
   const { open } = useAppKit();
   const isConnected = Boolean(ethAccount.chainId);
-  const isTablet = useIsTablet();
 
   return isConnected ? (
     <>
-      <Button onClick={() => open()}>
-        {isTablet ? ethAccount.address : <BurgerMenu />}
+      <Button onClick={() => open()} className={styles.button}>
+        <span>{ethAccount.address}</span>
+        <BurgerMenu />
       </Button>
     </>
   ) : (

digit-recognition/frontend/src/features/digit-recognizer/DigitCanvas.module.scss

@@ -28,3 +28,10 @@
   text-transform: uppercase;
   color: #ffffff;
 }
+
+.canvas {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  touch-action: none;
+}

digit-recognition/frontend/src/features/digit-recognizer/DigitCanvas.tsx

@@ -79,11 +79,11 @@ export const DigitCanvas = ({
       <div className={styles.drawArea}>
         <canvas
           ref={canvasRef}
-          onMouseDown={startDrawing}
-          onMouseMove={draw}
-          onMouseUp={stopDrawing}
-          onMouseLeave={stopDrawing}
-          style={{ width: "100%", height: "100%", borderRadius: "50%" }}
+          onPointerDown={startDrawing}
+          onPointerMove={draw}
+          onPointerUp={stopDrawing}
+          onPointerLeave={stopDrawing}
+          className={styles.canvas}
         />
         {!isTouched && <div className={styles.drawHint}>Draw a digit here</div>}
       </div>

digit-recognition/frontend/src/lib/hooks/use-media.ts

@@ -1,6 +1,4 @@
 import { FixedPoint } from "../types";
-
-export { mergeRefs } from "./merge-refs";
 export { isMobileDevice, isMobile } from "./device-detection";
 
 export const copyToClipboard = async ({