Components modification for new TXs tab.

.eslintrc

@@ -1,11 +1,22 @@
 {
   "parser": "@typescript-eslint/parser",
   "extends": [
-    "react-app",
-    "prettier",
-    "prettier/react",
-    "plugin:import/errors",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
   ],
-  "plugins": ["prettier", "import"]
+  "plugins": ["react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off"
+  }
 }

.prettierrc

@@ -3,7 +3,7 @@
     "jsxBracketSameLine": true,
     "printWidth": 80,
     "singleQuote": true,
-    "trailingComma": "none",
+    "trailingComma": "es5",
     "tabWidth": 2,
     "useTabs": false
   }

package.json

@@ -16,6 +16,7 @@
     "build": "rimraf dist && webpack --mode production",
     "build-storybook": "build-storybook -s public --docs",
     "storybook": "start-storybook -p 9009 -s public --docs",
+    "lint:check": "eslint './src/**/*.{js,jsx,ts,tsx}'",
     "prepare": "yarn build"
   },
   "author": "Gnosis (https://gnosis.pm)",
@@ -40,34 +41,31 @@
     "@testing-library/user-event": "10.3.1",
     "@types/big.js": "^4.0.5",
     "@types/classnames": "^2.2.10",
-    "@types/jest": "26.0.3",
+    "@types/jest": "26.0.5",
     "@types/material-ui": "^0.21.7",
-    "@types/node": "14.0.14",
-    "@types/react": "16.9.41",
+    "@types/node": "14.0.24",
+    "@types/react": "16.9.43",
     "@types/react-dom": "16.9.8",
-    "@types/styled-components": "5.1.0",
+    "@types/styled-components": "5.1.1",
     "@types/yup": "0.29.3",
-    "@typescript-eslint/eslint-plugin": "^3.5.0",
-    "@typescript-eslint/parser": "^3.5.0",
+    "@typescript-eslint/eslint-plugin": "^3.7.0",
+    "@typescript-eslint/parser": "^3.7.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "8.1.0",
     "copy-webpack-plugin": "^5.1.1",
-    "eslint": "7.3.1",
+    "eslint": "7.5.0",
     "eslint-config-prettier": "6.11.0",
-    "eslint-config-react-app": "5.2.1",
-    "eslint-plugin-import": "2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.20.2",
-    "eslint-plugin-react-hooks": "4.0.4",
+    "eslint-plugin-react": "7.20.3",
+    "eslint-plugin-react-hooks": "4.0.8",
     "ethereum-blockies-base64": "^1.0.2",
     "prettier": "2.0.5",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "rimraf": "^3.0.2",
     "styled-components": "5.1.1",
-    "typescript": "3.9.5",
+    "typescript": "3.9.7",
     "webpack": "4.43.0",
     "webpack-cli": "^3.3.10",
     "webpack-node-externals": "^1.7.2"

src/dataDisplay/Card/card.stories.tsx

@@ -7,11 +7,11 @@ export default {
   title: 'Data Display/Card',
   component: Card,
   parameters: {
-    componentSubtitle: 'Useful to wrap content inside a styled container.'
-  }
+    componentSubtitle: 'Useful to wrap content inside a styled container.',
+  },
 };
 
-export const card = () => (
+export const SimpleCard = (): React.ReactElement => (
   <Card>
     <Title size="xs">Some text</Title>
   </Card>

src/dataDisplay/Card/index.tsx

@@ -2,12 +2,21 @@ import React from 'react';
 import styled from 'styled-components';
 import { rgba } from 'polished';
 
-const Card = styled.div`
+const StyledCard = styled.div`
   box-shadow: 1px 2px 10px 0
     ${({ theme }) => rgba(theme.colors.shadow.color, 0.08)};
   border-radius: 8px;
   padding: 24px;
   background-color: ${({ theme }) => theme.colors.white};
 `;
 
-export default ({ ...args }) => <Card {...args} />;
+type Props = {
+  className?: string;
+  children: React.ReactNode;
+};
+
+const Card = ({ className, children }: Props): React.ReactElement => (
+  <StyledCard className={className}>{children}</StyledCard>
+);
+
+export default Card;

src/dataDisplay/Divider/divider.stories.tsx

@@ -6,11 +6,11 @@ export default {
   title: 'Data Display/Divider',
   component: Divider,
   parameters: {
-    componentSubtitle: 'Used to separate content.'
-  }
+    componentSubtitle: 'Used to separate content.',
+  },
 };
 
-export const section = () => (
+export const Section = (): React.ReactElement => (
   <>
     <div>Some content</div>
     <Divider />

src/dataDisplay/Divider/index.tsx

@@ -1,9 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const Divider = styled.div`
+const StyledDivider = styled.div`
   border-top: 2px solid ${({ theme }) => theme.colors.separator};
   margin: 16px 0;
 `;
 
-export default ({ ...args }) => <Divider {...args} />;
+type Props = {
+  className?: string;
+};
+
+const Divider = ({ className }: Props): React.ReactElement => (
+  <StyledDivider className={className} />
+);
+
+export default Divider;

src/dataDisplay/FixedDialog/FixedDialog.stories.tsx

@@ -8,15 +8,15 @@ export default {
   parameters: {
     componentSubtitle: `It shows a Dialog, with a modal look and feels, but only being 
     rendered inside a container instead of taking position absolute.
-    `
-  }
+    `,
+  },
 };
 
-export const fixedDialog = () => (
+export const SimpleFixedDialog = (): React.ReactElement => (
   <FixedDialog
     title="Legal Disclaimer"
     body={<div>Some Body</div>}
-    onCancel={() => {}}
-    onConfirm={() => {}}
+    onCancel={() => undefined}
+    onConfirm={() => undefined}
   />
 );

src/dataDisplay/FixedDialog/index.tsx

@@ -51,7 +51,12 @@ type Props = {
   onConfirm: () => void;
 };
 
-const FixedDialog = ({ body, title, onConfirm, onCancel }: Props) => {
+const FixedDialog = ({
+  body,
+  title,
+  onConfirm,
+  onCancel,
+}: Props): React.ReactElement => {
   return (
     <Container>
       <Wrapper>

src/dataDisplay/FixedIcon/fixedIcon.stories.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import FixedIcon from './index';
+import FixedIcon, { IconTypes } from './index';
 
 export default {
   title: 'Data Display/FixedIcon',
   component: FixedIcon,
   parameters: {
     componentSubtitle: `Components that renders an icon customized for Safe Multisig app, this icon is not 
-     customizable by props. If you need generic purposes Icons, try Icon component.`
-  }
+     customizable by props. If you need generic purposes Icons, try Icon component.`,
+  },
 };
 
-export const icons = () => {
+export const Icons = (): React.ReactElement => {
   const Wrapper = styled.div`
     display: flex;
     flex-wrap: wrap;
@@ -32,29 +32,29 @@ export const icons = () => {
     font-size: 14px;
   `;
 
+  const icons: IconTypes[] = [
+    'arrowSort',
+    'connectedRinkeby',
+    'connectedWallet',
+    'bullit',
+    'dropdownArrowSmall',
+    'arrowReceived',
+    'arrowSent',
+    'threeDots',
+    'options',
+    'plus',
+    'chevronRight',
+    'chevronLeft',
+    'chevronUp',
+    'chevronDown',
+    'settingsChange',
+    'creatingInProgress',
+    'notOwner',
+  ];
+
   return (
     <Wrapper>
-      {[
-        'arrowSort',
-        'connectedRinkeby',
-        'connectedWallet',
-        'bullit',
-        'dropdownArrowSmall',
-        'arrowReceived',
-        'arrowSent',
-        'threeDots',
-        'options',
-        'plus',
-        'chevronRight',
-        'chevronLeft',
-        'chevronUp',
-        'chevronDown',
-        'settingsChange',
-        'creatingInProgress',
-        'notOwner'
-
-
-      ].map((type: any, index) => (
+      {icons.map((type, index) => (
         <IconBox key={index}>
           <FixedIcon type={type} />
           {type}
@@ -63,4 +63,3 @@ export const icons = () => {
     </Wrapper>
   );
 };
-

src/dataDisplay/FixedIcon/images/arrowReceived.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
 const icon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="10"
-      height="10"
-      viewBox="0 0 10 10">
-      <path
-        fill="#008C73"
-        fillRule="evenodd"
-        d="M3.431 7.99h2.6c.554 0 1.004.45 1.004 1.005C7.035 9.55 6.585 10 6.03 10H1.005c-.277 0-.529-.112-.71-.294C.111 9.524 0 9.272 0 8.995V3.97c0-.555.45-1.005 1.005-1.005.555 0 1.005.45 1.005 1.005v2.599L8.284.294c.393-.392 1.03-.392 1.422 0 .392.393.392 1.03 0 1.422L3.43 7.99z"
-      />
-    </svg>
-)
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="10"
+    viewBox="0 0 10 10">
+    <path
+      fill="#008C73"
+      fillRule="evenodd"
+      d="M3.431 7.99h2.6c.554 0 1.004.45 1.004 1.005C7.035 9.55 6.585 10 6.03 10H1.005c-.277 0-.529-.112-.71-.294C.111 9.524 0 9.272 0 8.995V3.97c0-.555.45-1.005 1.005-1.005.555 0 1.005.45 1.005 1.005v2.599L8.284.294c.393-.392 1.03-.392 1.422 0 .392.393.392 1.03 0 1.422L3.43 7.99z"
+    />
+  </svg>
+);
 
 export default icon;

src/dataDisplay/FixedIcon/images/arrowSent.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
 const icon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="10"
-      height="10"
-      viewBox="0 0 10 10">
-      <path
-        fill="#F02525"
-        fillRule="evenodd"
-        d="M6.569 2.01h-2.6c-.554 0-1.004-.45-1.004-1.005C2.965.45 3.415 0 3.97 0h5.025c.277 0 .529.112.71.294.183.182.295.434.295.711V6.03c0 .555-.45 1.005-1.005 1.005-.555 0-1.005-.45-1.005-1.005V3.431L1.716 9.706c-.393.392-1.03.392-1.422 0-.392-.393-.392-1.03 0-1.422L6.57 2.01z"
-      />
-    </svg>
-)
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="10"
+    viewBox="0 0 10 10">
+    <path
+      fill="#F02525"
+      fillRule="evenodd"
+      d="M6.569 2.01h-2.6c-.554 0-1.004-.45-1.004-1.005C2.965.45 3.415 0 3.97 0h5.025c.277 0 .529.112.71.294.183.182.295.434.295.711V6.03c0 .555-.45 1.005-1.005 1.005-.555 0-1.005-.45-1.005-1.005V3.431L1.716 9.706c-.393.392-1.03.392-1.422 0-.392-.393-.392-1.03 0-1.422L6.57 2.01z"
+    />
+  </svg>
+);
 
 export default icon;

src/dataDisplay/FixedIcon/images/arrowSort.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
 const icon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="8"
-      height="8"
-      viewBox="0 0 8 8">
-      <path
-        fill="#5D6D74"
-        fillRule="evenodd"
-        d="M4.984 4.608l1.302-1.322c.384-.384 1.024-.384 1.408 0 .384.384.384 1.024 0 1.408L4.728 7.702C4.537 7.893 4.28 8 4.024 8c-.256 0-.511-.107-.704-.298L.29 4.694c-.426-.427-.383-1.152.13-1.515.404-.298.98-.213 1.322.15l1.13 1.108.129.022V.982C3 .427 3.447 0 3.98 0c.577 0 1.004.448 1.004.982v3.626z"
-      />
-    </svg>
-)
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="8"
+    height="8"
+    viewBox="0 0 8 8">
+    <path
+      fill="#5D6D74"
+      fillRule="evenodd"
+      d="M4.984 4.608l1.302-1.322c.384-.384 1.024-.384 1.408 0 .384.384.384 1.024 0 1.408L4.728 7.702C4.537 7.893 4.28 8 4.024 8c-.256 0-.511-.107-.704-.298L.29 4.694c-.426-.427-.383-1.152.13-1.515.404-.298.98-.213 1.322.15l1.13 1.108.129.022V.982C3 .427 3.447 0 3.98 0c.577 0 1.004.448 1.004.982v3.626z"
+    />
+  </svg>
+);
 
 export default icon;

src/dataDisplay/FixedIcon/images/bullit.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
 const icon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="6"
-      height="6"
-      viewBox="0 0 6 6">
-      <path
-        fill="#008C73"
-        fillRule="evenodd"
-        d="M3 0C1.347 0 0 1.347 0 3s1.347 3 3 3 3-1.347 3-3-1.347-3-3-3z"
-      />
-    </svg>
-)
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="6"
+    height="6"
+    viewBox="0 0 6 6">
+    <path
+      fill="#008C73"
+      fillRule="evenodd"
+      d="M3 0C1.347 0 0 1.347 0 3s1.347 3 3 3 3-1.347 3-3-1.347-3-3-3z"
+    />
+  </svg>
+);
 
 export default icon;