format fix

.eslintrc.json

@@ -72,7 +72,14 @@
     "wrap-iife": [2, "outside"],
     "no-shadow": 0,
     "no-path-concat": 2,
-    "valid-jsdoc": [0, { "requireReturn": false, "requireParamDescription": false, "requireReturnDescription": false }],
+    "valid-jsdoc": [
+      0,
+      {
+        "requireReturn": false,
+        "requireParamDescription": false,
+        "requireReturnDescription": false
+      }
+    ],
 
     // stylistic errors
     "no-spaced-func": 2,

src/app/claims/components/ClaimInfoCard.tsx

@@ -1,4 +1,4 @@
-import { Card } from "@chakra-ui/react";
+import { Card } from '@chakra-ui/react';
 
 export interface ClaimInfoCardProps {}
 

src/app/claims/page.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Avatar,
@@ -11,36 +11,36 @@ import {
   Stat,
   StatLabel,
   StatNumber,
-} from "@chakra-ui/react";
+} from '@chakra-ui/react';
 
-import CONSTANTS from "@/constants";
+import CONSTANTS from '@/constants';
 
 export default function Claim() {
   return (
-    <Container maxWidth={"1000px"} margin={"0 auto"} padding="30px 10px">
-      <Heading as="h2" color="white" marginBottom={"10px"}>
-        <Avatar marginRight={"5px"} src={CONSTANTS.LOGOS.STRK} />
+    <Container maxWidth={'1000px'} margin={'0 auto'} padding="30px 10px">
+      <Heading as="h2" color="white" marginBottom={'10px'}>
+        <Avatar marginRight={'5px'} src={CONSTANTS.LOGOS.STRK} />
         Claim $STRK Tokens
       </Heading>
       <Grid templateColumns="repeat(3, 1fr)" gap="6">
         <GridItem display="flex">
-          <Card width="100%" padding={"15px 30px"} color="white" bg="highlight">
+          <Card width="100%" padding={'15px 30px'} color="white" bg="highlight">
             <Stat>
               <StatLabel>Total Earned</StatLabel>
               <StatNumber>345,670</StatNumber>
             </Stat>
           </Card>
         </GridItem>
         <GridItem display="flex">
-          <Card width="100%" padding={"15px 30px"} color="white" bg="highlight">
+          <Card width="100%" padding={'15px 30px'} color="white" bg="highlight">
             <Stat>
               <StatLabel>Total Claimed</StatLabel>
               <StatNumber>345,670</StatNumber>
             </Stat>
           </Card>
         </GridItem>
         <GridItem display="flex">
-          <Card width="100%" padding={"15px 30px"} color="white" bg="highlight">
+          <Card width="100%" padding={'15px 30px'} color="white" bg="highlight">
             <Stat>
               <StatLabel>Unclaimed</StatLabel>
               <StatNumber>345,670</StatNumber>

src/app/template.tsx

@@ -1,63 +1,63 @@
-"use client";
+'use client';
 
-import * as React from "react";
+import * as React from 'react';
 
-import { sepolia } from "@starknet-react/chains";
+import { sepolia } from '@starknet-react/chains';
 import {
   StarknetConfig,
   argent,
   braavos,
   useInjectedConnectors,
   jsonRpcProvider,
-} from "@starknet-react/core";
+} from '@starknet-react/core';
 import {
   ChakraBaseProvider,
   extendTheme,
   Flex,
   Center,
   Container,
-} from "@chakra-ui/react";
-import { Provider as JotaiProvider } from "jotai";
-import Image from "next/image";
-import Navbar from "@/components/Navbar";
-import { RpcProviderOptions, constants } from "starknet";
-import mixpanel from "mixpanel-browser";
+} from '@chakra-ui/react';
+import { Provider as JotaiProvider } from 'jotai';
+import Image from 'next/image';
+import Navbar from '@/components/Navbar';
+import { RpcProviderOptions, constants } from 'starknet';
+import mixpanel from 'mixpanel-browser';
 
 // ! make page view more dynamic
-mixpanel.init("118f29da6a372f0ccb6f541079cad56b");
+mixpanel.init('118f29da6a372f0ccb6f541079cad56b');
 
 const theme = extendTheme({
   colors: {
-    transparent: "rgba(0, 0, 0, 0)",
-    opacity_50p: "rgba(0, 0, 0, 0.5)",
-    color1: "rgba(86, 118, 254, 1)",
-    color1_65p: "rgba(86, 118, 254, 0.65)",
-    color1_50p: "rgba(86, 118, 254, 0.5)",
-    color1_35p: "rgba(86, 118, 254, 0.35)",
-    color1_light: "#bcc9ff80",
-    color2: "rgb(127 73 229)",
-    color2_65p: "rgba(104, 51, 205, 0.65)",
-    color2_50p: "rgba(104, 51, 205, 0.5)",
-    highlight: "#272932", // light grey
-    light_grey: "#9d9d9d",
-    disabled_text: "#818181",
-    disabled_bg: "#5f5f5f",
-    purple: "#6F4FF2",
-    cyan: "#22F3DF",
-    bg: "#1A1C26", // dark blue
+    transparent: 'rgba(0, 0, 0, 0)',
+    opacity_50p: 'rgba(0, 0, 0, 0.5)',
+    color1: 'rgba(86, 118, 254, 1)',
+    color1_65p: 'rgba(86, 118, 254, 0.65)',
+    color1_50p: 'rgba(86, 118, 254, 0.5)',
+    color1_35p: 'rgba(86, 118, 254, 0.35)',
+    color1_light: '#bcc9ff80',
+    color2: 'rgb(127 73 229)',
+    color2_65p: 'rgba(104, 51, 205, 0.65)',
+    color2_50p: 'rgba(104, 51, 205, 0.5)',
+    highlight: '#272932', // light grey
+    light_grey: '#9d9d9d',
+    disabled_text: '#818181',
+    disabled_bg: '#5f5f5f',
+    purple: '#6F4FF2',
+    cyan: '#22F3DF',
+    bg: '#1A1C26', // dark blue
   },
   fontSizes: {
-    large: "50px",
+    large: '50px',
   },
   space: {
-    large: "50px",
+    large: '50px',
   },
   sizes: {
-    prose: "100%",
+    prose: '100%',
   },
   components: {
     MenuItem: {
-      bg: "highlight",
+      bg: 'highlight',
     },
   },
   fonts: {
@@ -74,10 +74,10 @@
 export default function Template({ children }: { children: React.ReactNode }) {
   const chains = [sepolia];
   const provider = jsonRpcProvider({
     rpc: (chain) => {
       const args: RpcProviderOptions = {
         nodeUrl:
-          "https://rpc.nethermind.io/mainnet-juno?apikey=t1HPjhplOyEQpxqVMhpwLGuwmOlbXN0XivWUiPAxIBs0kHVK",
+          'https://rpc.nethermind.io/mainnet-juno?apikey=t1HPjhplOyEQpxqVMhpwLGuwmOlbXN0XivWUiPAxIBs0kHVK',
         chainId: constants.StarknetChainId.SN_MAIN,
       };
       return args;
@@ -87,14 +87,14 @@
     // Show these connectors if the user has no connector installed.
     recommended: [braavos(), argent()],
     // Hide recommended connectors if the user has any connector installed.
-    includeRecommended: "onlyIfNoConnectors",
+    includeRecommended: 'onlyIfNoConnectors',
     // Randomize the order of the connectors.
-    order: "alphabetical",
+    order: 'alphabetical',
   });
 
-  function getIconNode(icon: typeof import("*.svg"), alt: string) {
+  function getIconNode(icon: typeof import('*.svg'), alt: string) {
     return (
-      <Center className="my-menu-button" width="100%" marginLeft={"-20px"}>
+      <Center className="my-menu-button" width="100%" marginLeft={'-20px'}>
         <Image src={icon} alt={alt} />
       </Center>
     );
@@ -108,7 +108,7 @@
         connectors={connectors}
       >
         <ChakraBaseProvider theme={theme}>
-          <Flex minHeight={"100vh"} bgColor={"bg"}>
+          <Flex minHeight={'100vh'} bgColor={'bg'}>
             {/* <Sidebar collapsed={true} backgroundColor='var(--chakra-colors-highlight)' style={{"border": '0px'}} collapsedWidth={'150px'}>
               <Center width='100%' marginTop='20px'><Image src={LogoSvg} alt='Logo' height={'50px'}/></Center>
               <Menu style={{"marginTop": '100px', "backgroundColor": '#eecef9'}}
@@ -125,7 +125,7 @@
               </Menu>
             </Sidebar>
            */}
-            <Container width={"100%"} padding="0px" paddingTop="100px">
+            <Container width={'100%'} padding="0px" paddingTop="100px">
               <Navbar></Navbar>
               <React.Suspense>{children}</React.Suspense>
             </Container>

src/components/Filters.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import Select, { StylesConfig } from 'react-select';
-import {
-  ALL_FILTER,
-  filters,
-  updateFiltersAtom,
-} from '@/store/pools';
+import { ALL_FILTER, filters, updateFiltersAtom } from '@/store/pools';
 import * as chroma from 'chroma.ts';
 import { useSetAtom } from 'jotai';
 import {
@@ -33,7 +29,7 @@
     backgroundColor: 'var(--chakra-colors-bg)',
     borderColor: 'var(--chakra-colors-bg)',
   }),
   option: (styles, { data, isDisabled, isFocused, isSelected }) => {
     const color = chroma.color(data.color);
     return {
       ...styles,
@@ -205,7 +201,7 @@
                 placeholder="Select Pool types"
                 options={poolTypes}
                 styles={colourStyles}
                 onChange={(x, b) => {
                   updateFilters(
                     'poolTypes',
                     x.map((p) => p.value),

src/components/LoadingWrap.tsx

@@ -1,6 +1,6 @@
-import { WarningTwoIcon } from "@chakra-ui/icons";
-import { IconProps, Skeleton, SkeletonProps } from "@chakra-ui/react";
-import React from "react";
+import { WarningTwoIcon } from '@chakra-ui/icons';
+import { IconProps, Skeleton, SkeletonProps } from '@chakra-ui/react';
+import React from 'react';
 
 type LoadingWrapProps = {
   isLoading: boolean;
@@ -14,7 +14,7 @@ export default function LoadingWrap(
 ) {
   if (props.isLoading) return <Skeleton {...props.skeletonProps} />;
   if (props.isError)
-    return <WarningTwoIcon color={"yellow"} {...props.iconProps} />;
+    return <WarningTwoIcon color={'yellow'} {...props.iconProps} />;
 
   return <>{props.children}</>;
 }

src/components/TxButton.tsx

@@ -1,13 +1,10 @@
-import CONSTANTS from "@/constants";
-import { Box, Button, ButtonProps, Spinner } from "@chakra-ui/react";
-import {
-  useAccount,
-  useContractWrite,
-} from "@starknet-react/core";
-import mixpanel from "mixpanel-browser";
-import { useEffect, useMemo } from "react";
-import { isMobile } from "react-device-detect";
-import { Call } from "starknet";
+import CONSTANTS from '@/constants';
+import { Box, Button, ButtonProps, Spinner } from '@chakra-ui/react';
+import { useAccount, useContractWrite } from '@starknet-react/core';
+import mixpanel from 'mixpanel-browser';
+import { useEffect, useMemo } from 'react';
+import { isMobile } from 'react-device-detect';
+import { Call } from 'starknet';
 
 interface TxButtonProps {
   text: string;
@@ -18,24 +15,24 @@ interface TxButtonProps {
 export default function TxButton(props: TxButtonProps) {
   const { address } = useAccount();
   const disabledStyle = {
-    bg: "var(--chakra-colors-disabled_bg)",
-    color: "var(--chakra-colors-disabled_text)",
-    borderColor: "var(--chakra-colors-disabled_bg)",
-    borderWidth: "1px",
+    bg: 'var(--chakra-colors-disabled_bg)',
+    color: 'var(--chakra-colors-disabled_text)',
+    borderColor: 'var(--chakra-colors-disabled_bg)',
+    borderWidth: '1px',
   };
 
   const { writeAsync, data, status, isSuccess, isPending } = useContractWrite({
     calls: props.calls,
   });
 
   useEffect(() => {
-    console.log("status", isPending, status, isSuccess);
+    console.log('status', isPending, status, isSuccess);
   }, [status]);
 
   const disabledText = useMemo(() => {
     if (isMobile) return CONSTANTS.MOBILE_MSG;
-    if (!address) return "Wallet not connected";
-    return "";
+    if (!address) return 'Wallet not connected';
+    return '';
   }, [isMobile, address]);
 
   if (disabledText) {
@@ -51,41 +48,41 @@ export default function TxButton(props: TxButtonProps) {
           ...disabledStyle,
         }}
         isDisabled={true}
-        width={"100%"}
+        width={'100%'}
       >
         {disabledText}
       </Button>
     );
   }
 
   return (
-    <Box width={"100%"}>
+    <Box width={'100%'}>
       <Button
-        color={"purple"}
+        color={'purple'}
         bg="highlight"
-        variant={"ghost"}
-        width={"100%"}
+        variant={'ghost'}
+        width={'100%'}
         _active={{
-          bg: "var(--chakra-colors-bg)",
+          bg: 'var(--chakra-colors-bg)',
         }}
         _hover={{
-          bg: "var(--chakra-colors-bg)",
+          bg: 'var(--chakra-colors-bg)',
         }}
         onClick={() => {
-          mixpanel.track("Click strategy button", {
+          mixpanel.track('Click strategy button', {
             buttonText: props.text,
             address,
           });
           writeAsync().then((tx) => {
-            mixpanel.track("Submitted tx", {
+            mixpanel.track('Submitted tx', {
               txHash: tx.transaction_hash,
               address,
             });
           });
         }}
         {...props.buttonProps}
       >
-        {isPending && <Spinner size={"sm"} marginRight={"5px"} />} {props.text}
+        {isPending && <Spinner size={'sm'} marginRight={'5px'} />} {props.text}
       </Button>
     </Box>
   );