Run Prettier format and add format check to ci

.prettierignore

@@ -0,0 +1 @@
+**/src/api/apollo/generated

Makefile

@@ -25,6 +25,11 @@ install:
 	$(info Task: install)
 	$(EXEC) sh -c 'npm install || exit 255'
 
+.PHONY: format
+format:
+	$(info Task: format:check)
+	$(EXEC) sh -c 'npm run format:check:app || exit 255'
+
 .PHONY: build
 build:
 	$(info Task: build production)
@@ -36,4 +41,4 @@ test:
 	$(EXEC) sh -c 'npm run test || exit 255'
 
 .PHONY: ci
-ci: clean install build test
+ci: clean install format build test

src/api/apollo/generated/graphql.tsx

@@ -1636,4 +1636,3 @@ export type GetResultsQueryResult = ApolloReactCommon.QueryResult<GetResultsQuer
   }
 };
       export default result;
-

src/api/apollo/mutations.ts

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag'
+import gql from 'graphql-tag';
 
 export const CREATE_PROJECT = gql`
   mutation CreateProject(
@@ -38,8 +38,21 @@ export const CREATE_PROJECT = gql`
 `;
 
 export const SAVE_PROJECT = gql`
-  mutation UpdateProject($projectId: UUID!, $title: String!, $description: String!, $readme: String!) {
-    updateProject(input: { id: $projectId, persist: true, title: $title, description: $description, readme: $readme }) {
+  mutation UpdateProject(
+    $projectId: UUID!
+    $title: String!
+    $description: String!
+    $readme: String!
+  ) {
+    updateProject(
+      input: {
+        id: $projectId
+        persist: true
+        title: $title
+        description: $description
+        readme: $readme
+      }
+    ) {
       id
       persist
       title

src/components/AccountAvatars.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { useThemeUI, Flex, Box, Badge } from "theme-ui";
-import { motion } from "framer-motion";
-import { Account, Project } from "src/api/apollo/generated/graphql";
-import Avatar from "components/Avatar";
+import React from 'react';
+import { useThemeUI, Flex, Box, Badge } from 'theme-ui';
+import { motion } from 'framer-motion';
+import { Account, Project } from 'src/api/apollo/generated/graphql';
+import Avatar from 'components/Avatar';
 
 export const AccountAvatar: React.FC<{
   onClick: (e: any, i: number) => void;
@@ -13,14 +13,14 @@ export const AccountAvatar: React.FC<{
       <Box
         //@ts-ignore
         onClick={onClick}
-        mx={"0.5rem"}
+        mx={'0.5rem'}
         sx={{
-          position: "relative",
-          borderRadius: "50%",
-          ".avatar": {
-            position: "relative",
-            top: "-3px"
-          }
+          position: 'relative',
+          borderRadius: '50%',
+          '.avatar': {
+            position: 'relative',
+            top: '-3px',
+          },
         }}
       >
         {children}
@@ -33,8 +33,8 @@ export const AvatarList: React.FC = ({ children }) => {
   return (
     <Flex
       sx={{
-        flex: "1 1 auto",
-        alignItems: "center"
+        flex: '1 1 auto',
+        alignItems: 'center',
       }}
     >
       {children}
@@ -52,9 +52,16 @@ const AccountAvatars: React.FC<{
   accounts: Account[];
   maxSelection?: number;
 }> = (props) => {
-  const { multi, selectedAccounts, accounts, project, onChange, maxSelection = 4 } = props;
+  const {
+    multi,
+    selectedAccounts,
+    accounts,
+    project,
+    onChange,
+    maxSelection = 4,
+  } = props;
   if (!multi) {
-    throw new Error("Must include multi prop.");
+    throw new Error('Must include multi prop.');
   }
 
   const { theme } = useThemeUI();
@@ -64,47 +71,49 @@ const AccountAvatars: React.FC<{
     <AvatarList>
       {accounts.map((account: Account, i: number) => {
         const isSelected =
-          selectedAccounts.includes(i) || selectionLimitReached
+          selectedAccounts.includes(i) || selectionLimitReached;
         return (
           <motion.div key={account.address}>
             <AccountAvatar
               key={account.id}
-              onClick={ isSelected
-                ? noop
-                : () => { onChange(i); }
+              onClick={
+                isSelected
+                  ? noop
+                  : () => {
+                      onChange(i);
+                    }
               }
               active={isSelected}
             >
               <motion.div
                 style={{
-                  cursor: "pointer",
-                  borderRadius: "50%",
-                  pointerEvents: isSelected
-                    ? "none"
-                    : "auto"
+                  cursor: 'pointer',
+                  borderRadius: '50%',
+                  pointerEvents: isSelected ? 'none' : 'auto',
                 }}
                 whileHover={{ scale: 1.05 }}
               >
                 <Avatar
                   seed={project.seed}
                   index={i}
                   style={{
-                    width: "35px",
-                    height: "35px",
-                    display: "block",
-                    borderRadius: "0 0 20px 20px",
-                    filter: isSelected
-                    ? "grayscale(1)"
-                    : "none"
-                  }} />
+                    width: '35px',
+                    height: '35px',
+                    display: 'block',
+                    borderRadius: '0 0 20px 20px',
+                    filter: isSelected ? 'grayscale(1)' : 'none',
+                  }}
+                />
                 <Badge
-                  px={"5px"}
+                  px={'5px'}
                   sx={{
                     fontSize: 3,
-                    backgroundColor: isSelected? theme.colors.greyBorder : theme.colors.primary,
-                    position: "absolute",
-                    left: "-2px",
-                    bottom: "-1px"
+                    backgroundColor: isSelected
+                      ? theme.colors.greyBorder
+                      : theme.colors.primary,
+                    position: 'absolute',
+                    left: '-2px',
+                    bottom: '-1px',
                   }}
                 >
                   0x{account.address.slice(-2)}

src/components/AccountList.tsx

@@ -1,24 +1,24 @@
-import React from "react";
-import {navigate, useLocation} from "@reach/router"
-import {Account} from "api/apollo/generated/graphql";
-import {EntityType} from "providers/Project";
-import {SidebarSection as Root} from "layout/SidebarSection";
-import {SidebarHeader as Header} from "layout/SidebarHeader";
-import {SidebarItems as Items} from "layout/SidebarItems";
-import {SidebarItem as Item} from "layout/SidebarItem";
-import {Stack} from "layout/Stack";
-import {useProject} from "providers/Project/projectHooks";
-import Avatar from "components/Avatar";
-import styled from "@emotion/styled";
-import {ExportButton} from "components/ExportButton";
-import {getParams, isUUUID, LOCAL_PROJECT_ID} from "../util/url";
-import {ResourcesExplorerButton} from "components/ResourcesExplorerButton";
+import React from 'react';
+import { navigate, useLocation } from '@reach/router';
+import { Account } from 'api/apollo/generated/graphql';
+import { EntityType } from 'providers/Project';
+import { SidebarSection as Root } from 'layout/SidebarSection';
+import { SidebarHeader as Header } from 'layout/SidebarHeader';
+import { SidebarItems as Items } from 'layout/SidebarItems';
+import { SidebarItem as Item } from 'layout/SidebarItem';
+import { Stack } from 'layout/Stack';
+import { useProject } from 'providers/Project/projectHooks';
+import Avatar from 'components/Avatar';
+import styled from '@emotion/styled';
+import { ExportButton } from 'components/ExportButton';
+import { getParams, isUUUID, LOCAL_PROJECT_ID } from '../util/url';
+import { ResourcesExplorerButton } from 'components/ResourcesExplorerButton';
 
 function getDeployedContracts(account: Account): string {
   const contracts = account.deployedContracts.map(
-    contract => contract.split(".").slice(-1)[0]
+    (contract) => contract.split('.').slice(-1)[0],
   );
-  return contracts.join(", ");
+  return contracts.join(', ');
 }
 
 export const AccountCard = styled.div`
@@ -30,45 +30,45 @@ export const AccountCard = styled.div`
 `;
 
 const AccountList: React.FC = () => {
-  const {
-    project,
-    active,
-    selectedResourceAccount
-  } = useProject();
-  const accountSelected = active.type === EntityType.Account
+  const { project, active, selectedResourceAccount } = useProject();
+  const accountSelected = active.type === EntityType.Account;
 
   const location = useLocation();
-  const params = getParams(location.search)
-  const projectPath = isUUUID(project.id) ? project.id : LOCAL_PROJECT_ID 
+  const params = getParams(location.search);
+  const projectPath = isUUUID(project.id) ? project.id : LOCAL_PROJECT_ID;
 
   return (
     <Root>
       <Header>Accounts</Header>
       <Items>
         {project.accounts.map((account: Account, i: number) => {
-          const { id } = account
-          const isActive = accountSelected && params.id === id
-          const accountAddress = `0x${account.address.slice(-2)}`
-          const contractName = getDeployedContracts(account)
+          const { id } = account;
+          const isActive = accountSelected && params.id === id;
+          const accountAddress = `0x${account.address.slice(-2)}`;
+          const contractName = getDeployedContracts(account);
           const title = contractName
             ? `${contractName} is deployed to this account`
-            : `This account don't have any contracts`
-          const typeName = account.__typename
+            : `This account don't have any contracts`;
+          const typeName = account.__typename;
           return (
-            <Item
-              title={title}
-              active={isActive}
-              key={account.address}
-            >
+            <Item title={title} active={isActive} key={account.address}>
               <AccountCard
-                onClick={() => navigate(`/${projectPath}?type=account&id=${id}&storage=${selectedResourceAccount || 'none'}`)}
+                onClick={() =>
+                  navigate(
+                    `/${projectPath}?type=account&id=${id}&storage=${
+                      selectedResourceAccount || 'none'
+                    }`,
+                  )
+                }
               >
                 <Avatar seed={project.seed} index={i} />
                 <Stack>
                   <strong>{accountAddress}</strong>
                   <small>{contractName || '--'}</small>
                 </Stack>
-                {isActive && <ExportButton id={account.id} typeName={typeName}/>}
+                {isActive && (
+                  <ExportButton id={account.id} typeName={typeName} />
+                )}
               </AccountCard>
               <ResourcesExplorerButton address={accountAddress} />
             </Item>

src/components/AccountPicker.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from "react";
-import { Flex, useThemeUI } from "theme-ui";
-import { Account, Project } from "api/apollo/generated/graphql";
-import AccountAvatars from "components/AccountAvatars";
-import AccountSigners from "components/AccountSigners";
+import React, { useEffect } from 'react';
+import { Flex, useThemeUI } from 'theme-ui';
+import { Account, Project } from 'api/apollo/generated/graphql';
+import AccountAvatars from 'components/AccountAvatars';
+import AccountSigners from 'components/AccountSigners';
 
 type AccountPickerProps = {
   project: Project;
@@ -18,7 +18,7 @@ const AccountPicker: React.FC<AccountPickerProps> = ({
   selected,
   onChange,
   maxSelection = 4,
-  children
+  children,
 }) => {
   const { theme } = useThemeUI();
   const handleOnChange = (i: number) => {
@@ -33,25 +33,25 @@ const AccountPicker: React.FC<AccountPickerProps> = ({
     if (!selected.length) {
       onChange([0]);
     }
-    if (selected.length > maxSelection){
-      onChange(selected.slice(0,maxSelection))
+    if (selected.length > maxSelection) {
+      onChange(selected.slice(0, maxSelection));
     }
   }, [maxSelection]);
 
   return (
     <Flex
       sx={{
-        flexDirection: "column"
+        flexDirection: 'column',
       }}
     >
       <Flex
         my={1}
         sx={{
-          padding: "0.8rem 0.5rem",
-          alignItems: "center",
+          padding: '0.8rem 0.5rem',
+          alignItems: 'center',
           border: `1px solid ${theme.colors.borderDark}`,
           backgroundColor: theme.colors.background,
-          borderRadius: "50px",
+          borderRadius: '50px',
         }}
       >
         <AccountAvatars
@@ -65,14 +65,14 @@ const AccountPicker: React.FC<AccountPickerProps> = ({
       </Flex>
       <Flex
         sx={{
-          padding: "0.8rem 0.5rem",
-          alignItems: "center",
+          padding: '0.8rem 0.5rem',
+          alignItems: 'center',
           border: `1px solid ${theme.colors.borderDark}`,
           backgroundColor: theme.colors.background,
-          borderRadius: "8px"
+          borderRadius: '8px',
         }}
       >
-        <AccountSigners 
+        <AccountSigners
           multi={true}
           project={project}
           accounts={accounts}
@@ -81,9 +81,9 @@ const AccountPicker: React.FC<AccountPickerProps> = ({
           maxSelection={maxSelection}
         />
         <Flex
-          px={"0.5rem"}
+          px={'0.5rem'}
           sx={{
-            alignItems: "center"
+            alignItems: 'center',
           }}
         >
           {children}