prettier added

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 80
+}

package.json

@@ -26,6 +26,7 @@
   "scripts": {
     "start": "concurrently \"react-scripts start\" \"yarn generate --watch\"",
     "build": "yarn generate && react-scripts build",
+    "format": "prettier --config .prettierrc 'src/' --write",
     "generate": "graphql-codegen --config=codegen.yml",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -54,6 +55,7 @@
     "@graphql-codegen/typescript": "^2.4.3",
     "@graphql-codegen/typescript-operations": "^2.3.0",
     "@graphql-codegen/typescript-urql": "^3.5.1",
-    "concurrently": "^7.0.0"
+    "concurrently": "^7.0.0",
+    "prettier": "^2.5.1"
   }
 }

src/Locations.ts

@@ -1,2 +1,2 @@
 export const RootLocation = '/';
-export const GameLocation = '/game';
+export const GameLocation = '/game';

src/Routes.tsx

@@ -6,12 +6,12 @@ import Home from 'views/Home';
 const routeList = [
   {
     path: RootLocation,
-    element: <Home />,
+    element: <Home />
   },
   {
     path: GameLocation,
-    element: <Game />,
-  },
+    element: <Game />
+  }
 ];
 
 export default function Routes(): JSX.Element {

src/components/Avatar/index.tsx

@@ -5,8 +5,8 @@ const useStyles = createUseStyles({
   avatar: {
     borderRadius: '50%',
     height: '33px',
-    width: '33px',
-  },
+    width: '33px'
+  }
 });
 
 type AvatarProps = {

src/components/Header/index.tsx

@@ -13,12 +13,12 @@ const useStyles = createUseStyles({
     position: 'fixed',
     top: 0,
     width: 'calc(100% - 108px)',
-    zIndex: 10,
+    zIndex: 10
   },
   left: {
     alignItems: 'center',
     display: 'flex',
-    gap: '19px',
+    gap: '19px'
   },
   loginButton: {
     alignItems: 'center',
@@ -29,31 +29,31 @@ const useStyles = createUseStyles({
     cursor: 'pointer',
     display: 'flex',
     letterSpacing: '2.1px',
-    padding: '6px 8px',
+    padding: '6px 8px'
   },
   logo: {
     heigth: '86px',
-    width: '75px',
+    width: '75px'
   },
   logoText: {
     fontSize: '36px',
     fontWeight: 700,
     letterSpacing: '5.4px',
-    lineHieght: '52px',
+    lineHieght: '52px'
   },
   separator: {
     background: '#D1D2DE',
     height: '44px',
-    width: '1px',
-  },
+    width: '1px'
+  }
 });
 
 export default function Header(): JSX.Element {
   const styles = useStyles();
   return (
     <div className={styles.container}>
       <div className={styles.left}>
-        <img alt='Logo' className={styles.logo} src={headerLogo} />
+        <img alt="Logo" className={styles.logo} src={headerLogo} />
         <div className={styles.separator} />
         <div className={styles.logoText}>BATTLEZIPS</div>
       </div>

src/graphql/client.ts

@@ -2,16 +2,16 @@ import { Client, createClient, dedupExchange, fetchExchange } from 'urql';
 import { SUBGRAPH_URLS } from 'web3/constants';
 
 type GraphQLClients = {
-    [chainId: number]: Client;
+  [chainId: number]: Client;
 };
 
 export const CLIENTS: GraphQLClients = Object.entries(SUBGRAPH_URLS).reduce(
-    (o, [chainId, url]) => ({
-        ...o,
-        [chainId]: createClient({
-            url,
-            exchanges: [dedupExchange, fetchExchange],
-        }),
-    }),
-    {},
-);
+  (o, [chainId, url]) => ({
+    ...o,
+    [chainId]: createClient({
+      url,
+      exchanges: [dedupExchange, fetchExchange]
+    })
+  }),
+  {}
+);

src/graphql/fragments.ts

@@ -1,37 +1,37 @@
 import gql from 'fake-tag';
 
 export const BattleshipGameDetails = gql`
-    fragment BattleshipGameDetails on BattleshipGame {
-        id
-        status
-        totalShots
-        winner
-    }
-`
+  fragment BattleshipGameDetails on BattleshipGame {
+    id
+    status
+    totalShots
+    winner
+  }
+`;
 
 export const ENSDetails = gql`
-    fragment ENSDetails on Account {
-        domains(first: 1) {
-            labelhash
-            labelName
-            name
-            resolver {
-                texts
-            }
-            owner {
-                id
-            }
-        }
+  fragment ENSDetails on Account {
+    domains(first: 1) {
+      labelhash
+      labelName
+      name
+      resolver {
+        texts
+      }
+      owner {
+        id
+      }
     }
-`
+  }
+`;
 
 export const ShotDetails = gql`
-    fragment ShotDetails on Shot {
-        id
-        game {
-            id
-        }
-        hit
-        turn
+  fragment ShotDetails on Shot {
+    id
+    game {
+      id
     }
-`
+    hit
+    turn
+  }
+`;

src/graphql/getENSNames.ts

@@ -1,31 +1,36 @@
 import gql from 'fake-tag';
 import { ENSDetails } from './fragments';
 import { CLIENTS } from './client';
-import { GetEnsDomainsQuery, GetEnsDomainsQueryVariables } from './autogen/types';
+import {
+  GetEnsDomainsQuery,
+  GetEnsDomainsQueryVariables
+} from './autogen/types';
 
 const ensDomainQuery = gql`
-    query GetENSDomains(
-        $limit: Int!
-        $addresses: [ID!]
-    ) {
-        accounts (
-            first: $limit
-            where: {id_in: $addresses}
-        ) {
-            ...ENSDetails
-        }
+  query GetENSDomains($limit: Int!, $addresses: [ID!]) {
+    accounts(first: $limit, where: { id_in: $addresses }) {
+      ...ENSDetails
     }
-    ${ENSDetails}
-`
+  }
+  ${ENSDetails}
+`;
 
-export const getENSDomains = async (limit: number, addresses: string[]): Promise<GetEnsDomainsQuery | null> => {
-    const { data, error } = await CLIENTS[1].query<GetEnsDomainsQuery, GetEnsDomainsQueryVariables>(ensDomainQuery, { limit, addresses }).toPromise()
-    if (!data) {
-        if (error) {
-            throw error;
-        }
-
-        return null;
+export const getENSDomains = async (
+  limit: number,
+  addresses: string[]
+): Promise<GetEnsDomainsQuery | null> => {
+  const { data, error } = await CLIENTS[1]
+    .query<GetEnsDomainsQuery, GetEnsDomainsQueryVariables>(ensDomainQuery, {
+      limit,
+      addresses
+    })
+    .toPromise();
+  if (!data) {
+    if (error) {
+      throw error;
     }
-    return data;
-}
+
+    return null;
+  }
+  return data;
+};

src/graphql/getGames.ts

@@ -1,31 +1,38 @@
 import gql from 'fake-tag';
 import { BattleshipGameDetails } from './fragments';
 import { CLIENTS } from './client';
-import { GameStatus, GetBattlesipGamesQuery, GetBattlesipGamesQueryVariables } from './autogen/types';
+import {
+  GameStatus,
+  GetBattleshipGamesQuery,
+  GetBattleshipGamesQueryVariables
+} from './autogen/types';
 
 const battleshipGameQuery = gql`
-    query GetBattlesipGames(
-        $limit: Int!
-        $status: GameStatus!
-    ) {
-        battleshipGames (
-            first: $limit
-            where: {status: $status}
-        ) {
-            ...BattleshipGameDetails
-        }
+  query GetBattleshipGames($limit: Int!, $status: GameStatus!) {
+    battleshipGames(first: $limit, where: { status: $status }) {
+      ...BattleshipGameDetails
     }
-    ${BattleshipGameDetails}
-`
+  }
+  ${BattleshipGameDetails}
+`;
 
-export const getGames = async (chainId: number, limit: number, status: GameStatus): Promise<GetBattlesipGamesQuery | null> => {
-    const { data, error } = await CLIENTS[chainId].query<GetBattlesipGamesQuery, GetBattlesipGamesQueryVariables>(battleshipGameQuery, { limit, status }).toPromise()
-    if (!data) {
-        if (error) {
-            throw error;
-        }
-
-        return null;
+export const getGames = async (
+  chainId: number,
+  limit: number,
+  status: GameStatus
+): Promise<GetBattleshipGamesQuery | null> => {
+  const { data, error } = await CLIENTS[chainId]
+    .query<GetBattleshipGamesQuery, GetBattleshipGamesQueryVariables>(
+      battleshipGameQuery,
+      { limit, status }
+    )
+    .toPromise();
+  if (!data) {
+    if (error) {
+      throw error;
     }
-    return data;
-}
+
+    return null;
+  }
+  return data;
+};