chore: biome as linter and formatter (#81)

apps/idos-data-dashboard/package.json

@@ -6,9 +6,9 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --cache",
     "preview": "vite preview",
-    "format": "prettier --write .",
+    "lint": "biome check --apply ./src",
+    "format": "biome format --write .",
     "test": "playwright test",
     "test:unit": "vitest",
     "test:unit:coverage": "vitest run --coverage"
@@ -50,17 +50,8 @@
     "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-chakra-ui": "^0.10.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.5",
     "jsdom": "^22.1.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-organize-imports": "^3.2.4",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
     "vite-plugin-node-polyfills": "^0.12.0",

apps/idos-data-dashboard/src/app.tsx

@@ -1,7 +1,3 @@
-import { ConnectWallet } from "#/connect-wallet.tsx";
-import { setupNearWalletSelector } from "#/lib/ near/utils.ts";
-import { idOS } from "#/lib/idos";
-import { addressAtom } from "#/lib/state";
 import { Center, Spinner } from "@chakra-ui/react";
 import { idOS as idOSSDK } from "@idos-network/idos-sdk";
 import { setupModal } from "@near-wallet-selector/modal-ui";
@@ -11,6 +7,10 @@ import { useSetAtom } from "jotai";
 import { useMetaMask } from "metamask-react";
 import { useEffect, useRef, useState } from "react";
 import { Outlet } from "react-router-dom";
+import { ConnectWallet } from "#/connect-wallet.tsx";
+import { idOS } from "#/lib/idos";
+import { setupNearWalletSelector } from "#/lib/ near/utils.ts";
+import { addressAtom } from "#/lib/state";
 import { CookieConsent } from "./cookie-consent";
 
 const setupEvmWallet = async () => {
@@ -134,12 +134,7 @@ export default function App() {
 
   if (isLoading) {
     return (
-      <Center
-        minH="100vh"
-        p={6}
-        bg={`url('/cubes.png') center center no-repeat`}
-        bgSize="cover"
-      >
+      <Center minH="100vh" p={6} bg={`url('/cubes.png') center center no-repeat`} bgSize="cover">
         <Center gap={2} p={5} bg="blackAlpha.700" rounded="lg">
           <Spinner />
         </Center>
@@ -150,10 +145,7 @@ export default function App() {
   if (!isConnected) {
     return (
       <>
-        <ConnectWallet
-          onNearConnect={onNearConnect}
-          onMetamaskConnect={onMetamaskConnect}
-        />
+        <ConnectWallet onNearConnect={onNearConnect} onMetamaskConnect={onMetamaskConnect} />
         <CookieConsent />
       </>
     );

apps/idos-data-dashboard/src/connect-wallet.tsx

@@ -1,17 +1,9 @@
+import { Box, Button, Center, Heading, Image, Text, VStack } from "@chakra-ui/react";
+import { isDesktop } from "react-device-detect";
 import idOSDashboardLogo from "#/assets/idos-dashboard-logo.svg";
 import idOSLogo from "#/assets/idos-logo.svg";
 import Metamask from "#/assets/metamask.svg";
 import Near from "#/assets/near.svg";
-import {
-  Box,
-  Button,
-  Center,
-  Heading,
-  Image,
-  Text,
-  VStack
-} from "@chakra-ui/react";
-import { isDesktop } from "react-device-detect";
 
 type ConnectWalletProps = {
   onNearConnect: () => Promise<void>;
@@ -20,17 +12,11 @@ type ConnectWalletProps = {
 
 export const ConnectWallet = (props: ConnectWalletProps) => {
   const handleMobileMetaMaskConnect = () => {
-    window.location.href =
-      "https://metamask.app.link/dapp/dashboard.idos.network/";
+    window.location.href = "https://metamask.app.link/dapp/dashboard.idos.network/";
   };
 
   return (
-    <Center
-      minH="100vh"
-      p={6}
-      bg={`url('/cubes.png') center center no-repeat`}
-      bgSize="cover"
-    >
+    <Center minH="100vh" p={6} bg={`url('/cubes.png') center center no-repeat`} bgSize="cover">
       <VStack
         alignItems="stretch"
         direction="column"
@@ -52,22 +38,14 @@ export const ConnectWallet = (props: ConnectWalletProps) => {
         </Heading>
         <VStack alignItems="stretch" gap={3}>
           {isDesktop ? (
-            <Button
-              justifyContent="space-between"
-              onClick={props.onNearConnect}
-              size="2xl"
-            >
+            <Button justifyContent="space-between" onClick={props.onNearConnect} size="2xl">
               Connect with Near
               <Image w={47} alt="Near icon" src={Near} />
             </Button>
           ) : null}
 
           {isDesktop ? (
-            <Button
-              justifyContent="space-between"
-              onClick={props.onMetamaskConnect}
-              size="2xl"
-            >
+            <Button justifyContent="space-between" onClick={props.onMetamaskConnect} size="2xl">
               Connect with Metamask
               <Image alt="Metamask icon" src={Metamask} />
             </Button>
@@ -85,12 +63,7 @@ export const ConnectWallet = (props: ConnectWalletProps) => {
             </Button>
           )}
         </VStack>
-        <Text
-          alignItems="center"
-          justifyContent="center"
-          gap={2}
-          display="flex"
-        >
+        <Text alignItems="center" justifyContent="center" gap={2} display="flex">
           Powered by <Image alt="idOS" src={idOSLogo} />
         </Text>
       </VStack>

apps/idos-data-dashboard/src/cookie-consent.tsx

@@ -1,26 +1,11 @@
-import {
-  Button,
-  Flex,
-  Heading,
-  Link,
-  Text,
-  chakra,
-  useDisclosure
-} from "@chakra-ui/react";
+import { Button, Flex, Heading, Link, Text, chakra, useDisclosure } from "@chakra-ui/react";
 import { CookieConsent as CK } from "react-cookie-consent";
 
 export const CookieConsent = () => {
   const disclosure = useDisclosure();
 
   return (
-    <Flex
-      pos="fixed"
-      bottom="0"
-      align="center"
-      justify="space-between"
-      w="full"
-      bg="neutral.900"
-    >
+    <Flex pos="fixed" bottom="0" align="center" justify="space-between" w="full" bg="neutral.900">
       <CK
         cookieName="idos-dashboard-cookie-consent"
         disableStyles
@@ -55,41 +40,34 @@ export const CookieConsent = () => {
           We value your privacy
         </Heading>
         <Text color="neutral.500" fontSize="sm">
-          By pressing the approving button I voluntarily give my consent to set
-          or activate cookies and external connections. I know their functions
-          because they are described in the Privacy Policy or explained in more
-          detail in documents or external links implemented there.
+          By pressing the approving button I voluntarily give my consent to set or activate cookies
+          and external connections. I know their functions because they are described in the Privacy
+          Policy or explained in more detail in documents or external links implemented there.
         </Text>
 
         {disclosure.isOpen ? (
           <Text color="neutral.500" fontSize="sm">
-            By pressing this button, I also voluntarily give my explicit consent
-            pursuant to Article 49 (1) (1) (a) GDPR for personalized advertising
-            and for other data transfers to third countries to the and by the
-            companies mentioned in the Privacy Policy and purposes, in
-            particular for such transfers to third countries for which an
-            adequacy decision of the EU/EEA is absent or does exist, and to
-            companies or other entities that are not subject to an existing
-            adequacy decision on the basis of self-certification or other
-            accession criteria, and that involve significant risks and no
-            appropriate safeguards for the protection of my personal data (e.g.,
-            because of Section 702 FISA, Executive Order EO12333 and the
-            CloudAct in the USA). When giving my voluntary and explicit consent,
-            I was aware that an adequate level of data protection may not exist
-            in third countries and that my data subjects rights may not be
-            enforceable. I have the right to withdraw my data protection consent
-            at any time with effect for the future, by changing my cookie
-            preferences or deleting my cookies. The withdrawal of consent shall
-            not affect the lawfulness of processing based on consent before its
-            withdrawal. With a single action (pressing the approving button),
-            several consents are granted. These are consents under EU/EEA data
-            protection law as well as those under CCPA/CPRA, ePrivacy and
-            telemedia law, and other international legislation, that are, among
-            other things, necessary for storing and reading out information and
-            are required as a legal basis for planned further processing of the
-            data read out. I am aware that I can refuse my consent by clicking
-            on the other button or, if necessary, make individual settings. With
-            my action I also confirm that I have read and taken note of the{" "}
+            By pressing this button, I also voluntarily give my explicit consent pursuant to Article
+            49 (1) (1) (a) GDPR for personalized advertising and for other data transfers to third
+            countries to the and by the companies mentioned in the Privacy Policy and purposes, in
+            particular for such transfers to third countries for which an adequacy decision of the
+            EU/EEA is absent or does exist, and to companies or other entities that are not subject
+            to an existing adequacy decision on the basis of self-certification or other accession
+            criteria, and that involve significant risks and no appropriate safeguards for the
+            protection of my personal data (e.g., because of Section 702 FISA, Executive Order
+            EO12333 and the CloudAct in the USA). When giving my voluntary and explicit consent, I
+            was aware that an adequate level of data protection may not exist in third countries and
+            that my data subjects rights may not be enforceable. I have the right to withdraw my
+            data protection consent at any time with effect for the future, by changing my cookie
+            preferences or deleting my cookies. The withdrawal of consent shall not affect the
+            lawfulness of processing based on consent before its withdrawal. With a single action
+            (pressing the approving button), several consents are granted. These are consents under
+            EU/EEA data protection law as well as those under CCPA/CPRA, ePrivacy and telemedia law,
+            and other international legislation, that are, among other things, necessary for storing
+            and reading out information and are required as a legal basis for planned further
+            processing of the data read out. I am aware that I can refuse my consent by clicking on
+            the other button or, if necessary, make individual settings. With my action I also
+            confirm that I have read and taken note of the{" "}
             <Link
               color="green.200"
               href="https://app.fractal.id/documents/41a635413a9fd3081492/privacy-policy-v11.pdf"
@@ -108,11 +86,7 @@ export const CookieConsent = () => {
           </Text>
         ) : null}
 
-        <chakra.button
-          onClick={disclosure.onToggle}
-          color="green.100"
-          fontSize="sm"
-        >
+        <chakra.button onClick={disclosure.onToggle} color="green.100" fontSize="sm">
           {disclosure.isOpen ? "Read less" : "Read more"}
         </chakra.button>
       </CK>

apps/idos-data-dashboard/src/lib/components/add-proof-of-personhood/index.tsx

@@ -1,4 +1,3 @@
-import { addressAtom } from "#/lib/state";
 import {
   Button,
   Flex,
@@ -19,6 +18,7 @@ import { useAtomValue } from "jotai";
 import { ArrowUpRightIcon } from "lucide-react";
 import { PropsWithChildren } from "react";
 import { isDesktop } from "react-device-detect";
+import { addressAtom } from "#/lib/state";
 import Flow1Icon from "./assets/flow-1-icon.svg";
 import Flow2Icon from "./assets/flow-2-icon.svg";
 import Flow3Icon from "./assets/flow-3-icon.svg";
@@ -62,10 +62,7 @@ export const AddProofOfPersonhood = (props: Omit<ModalProps, "children">) => {
         <ModalBody>
           <Stack justifyContent="space-between" direction={["column", "row"]}>
             <ProofBox>
-              <Image
-                alt="Prove that you are a unique human being"
-                src={Flow1Icon}
-              />
+              <Image alt="Prove that you are a unique human being" src={Flow1Icon} />
               <Text color="neutral.500" fontSize="xl">
                 Prove that you are a unique human being
               </Text>

apps/idos-data-dashboard/src/lib/components/coming-soon/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, type BoxProps } from "@chakra-ui/react";
+import { Box, type BoxProps, Text } from "@chakra-ui/react";
 
 export const ComingSoon = (props: BoxProps) => {
   return (

apps/idos-data-dashboard/src/lib/components/connected-wallet/index.tsx

@@ -1,7 +1,7 @@
-import { setupNearWalletSelector } from "#/lib/ near/utils.ts";
 import { Box, Center, Flex, Image, Text } from "@chakra-ui/react";
 import { useMetaMask } from "metamask-react";
 import { useEffect, useState } from "react";
+import { setupNearWalletSelector } from "#/lib/ near/utils.ts";
 import UserWallet from "./assets/user-wallet.svg";
 
 export const ConnectedWallet = () => {
@@ -24,15 +24,7 @@ export const ConnectedWallet = () => {
   const address = selectorAddress ?? metamask.account;
 
   return (
-    <Flex
-      align="center"
-      gap={5}
-      h={78}
-      px={5}
-      py={3}
-      bg="neutral.900"
-      rounded="xl"
-    >
+    <Flex align="center" gap={5} h={78} px={5} py={3} bg="neutral.900" rounded="xl">
       <Center w="50px" h="50px" bg="neutral.800" rounded="lg">
         <Image alt={`Connected wallet ${address}`} src={UserWallet} />
       </Center>