Merge branch 'development' of github.com:gnosis/safe-react into feature/#512-network-switching

readme.md

@@ -21,13 +21,20 @@ These instructions will get you a copy of the project up and running on your loc
 
 ### Prerequisites
 
-What you need to install globally:
+We use [yarn](https://yarnpkg.com) in our infrastructure, so we decided to go with yarn in the README.
+Please install yarn globally if you haven't already.
 
+### Environment variables
+The app grabs environment variables from the `.env` file. Copy our template to your own local file:
 ```
-yarn global add truffle ganache-cli
+cp .env.example .env
 ```
 
-We use [yarn](https://yarnpkg.com) in our infrastructure, so we decided to go with yarn in the README
+To execute transactions, you'll need to create an [Infura](https://infura.io) project and set the project ID in the `.env` you've just created:
+```
+REACT_APP_INFURA_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+```
+Once done, you'll need to restart the app if it's already running.
 
 ### Installing and running
 
@@ -46,18 +53,6 @@ If you prefer using the Mainnet ones:
 yarn start-mainnet
 ```
 
-### Environment variables
-The app grabs environment variables from the `.env` file. Copy our template to your own local file:
-```
-cp .env.example .env
-```
-
-To execute transactions, you'll need to create an [Infura](https://infura.io) project and set the project ID in the `.env` you've just created:
-```
-REACT_APP_INFURA_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-```
-Once done, you'll need to restart the app.
-
 ### Building
 For Rinkeby:
 ```
@@ -72,31 +67,7 @@ yarn build-mainnet
 
 ## Running the tests
 
-1. Run `transaction-history-service`
-```
-git clone https://github.com/gnosis/safe-transaction-service.git
-cd safe-transaction-service
-git checkout develop
-docker-compose build
-# it comes enabled by default in docker-compose
-sudo service postgresql stop
-docker-compose up -d
-```
-Check that the service is running at https://localhost:8000
-
-2. Migrate Safe Contracts:
-```
-git clone https://github.com/gnosis/safe-contracts.git
-cd safe-contracts
-yarn
-npx truffle migrate
-```
-3. Migrate Token Contracts for the tests:
-Inside `safe-react` directory
-```
-npx truffle migrate
-```
-4. Run the tests:
+To run the tests:
 ```
 yarn test
 ```
@@ -105,7 +76,6 @@ yarn test
 
 ESLint will be run automatically before you commit. To run it manually:
 
-
 ```
 yarn lint:fix
 ```
@@ -134,8 +104,6 @@ We prepare a new release every sprint. Sprints are two weeks long.
 
 ## Built With
 
-* [Truffle React Box](https://github.com/truffle-box/react-box) - The web framework used
-* [Ganache](https://github.com/trufflesuite/ganache-cli) - Fast Ethereum RPC client
 * [React](https://reactjs.org/) - A JS library for building user interfaces
 * [Material UI 4.X](https://material-ui.com/) - React components that implement Google's Material Design
 * [redux, immutable, reselect, final-form](https://redux.js.org/) - React ecosystem libraries

src/components/Table/index.tsx

@@ -142,14 +142,17 @@ class GnoTable extends React.Component<any, any> {
     const orderParam = order || defaultOrder
     const displayRows = rowsPerPage || defaultRowsPerPage
     const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed
-
     const paginationClasses = {
       selectRoot: classes.selectRoot,
       root: !noBorder && classes.paginationRoot,
       input: classes.white,
     }
-
-    let sortedData = stableSort(data, getSorting(orderParam, orderByParam, orderProp), fixedParam)
+    const columnSort = columns.find((column) => column.id === orderByParam)
+    let sortedData = stableSort(
+      data,
+      getSorting(orderParam, orderByParam, orderProp, columnSort?.formatTypeSort),
+      fixedParam,
+    )
 
     if (!disablePagination) {
       sortedData = sortedData.slice(page * displayRows, page * displayRows + displayRows)

src/components/Table/sorting.ts

@@ -4,13 +4,19 @@ export const FIXED = 'fixed'
 
 export const buildOrderFieldFrom = (attr: string): string => `${attr}Order`
 
-const desc = (a: string, b: string, orderBy: string, orderProp: boolean): number => {
+const desc = (
+  a: string,
+  b: string,
+  orderBy: string,
+  orderProp: boolean,
+  format: (value: string | number) => string | number,
+): number => {
   const order = orderProp ? buildOrderFieldFrom(orderBy) : orderBy
 
-  if (b[order] < a[order]) {
+  if (format(b[order]) < format(a[order])) {
     return -1
   }
-  if (b[order] > a[order]) {
+  if (format(b[order]) > format(a[order])) {
     return 1
   }
 
@@ -42,5 +48,8 @@ export const getSorting = (
   order: 'desc' | 'asc',
   orderBy: string,
   orderProp: boolean,
+  format: (value: string | number) => string | number = (value) => value,
 ): ((a: string, b: string) => number) =>
-  order === 'desc' ? (a, b) => desc(a, b, orderBy, orderProp) : (a, b) => -desc(a, b, orderBy, orderProp)
+  order === 'desc'
+    ? (a, b) => desc(a, b, orderBy, orderProp, format)
+    : (a, b) => -desc(a, b, orderBy, orderProp, format)

src/components/Table/types.d.ts

@@ -7,5 +7,6 @@ export interface TableColumn {
   order: boolean
   static?: boolean
   style?: any
+  formatTypeSort?: (value: string | number) => string | number
   width?: number
 }

src/routes/safe/components/Settings/ManageOwners/dataFetcher.ts

@@ -17,6 +17,7 @@ export const generateColumns = (): List<TableColumn> => {
   const nameColumn: TableColumn = {
     id: OWNERS_TABLE_NAME_ID,
     order: false,
+    formatTypeSort: (value: string) => value.toLowerCase(),
     disablePadding: false,
     label: 'Name',
     width: 150,

src/utils/constants.ts

@@ -24,8 +24,6 @@ export const COLLECTIBLES_SOURCE = process.env.REACT_APP_COLLECTIBLES_SOURCE ||
 export const TIMEOUT = process.env.NODE_ENV === 'test' ? 1500 : 5000
 export const ETHERSCAN_API_KEY = process.env.REACT_APP_ETHERSCAN_API_KEY
 export const ETHGASSTATION_API_KEY = process.env.REACT_APP_ETHGASSTATION_API_KEY
-export const EXCHANGE_RATE_URL = 'https://api.exchangeratesapi.io/latest'
-export const EXCHANGE_RATE_URL_FALLBACK = 'https://api.coinbase.com/v2/exchange-rates'
 export const SAFE_APPS_LIST_URL =
   process.env.REACT_APP_SAFE_APPS_LIST_URL ||
   'https://raw.githubusercontent.com/gnosis/safe-apps-list/main/public/gnosis-default.applist.json'

truffle.js

@@ -1,16 +0,0 @@
-module.exports = {
-  migrations_directory: './migrations',
-  networks: {
-    development: {
-      host: 'localhost',
-      port: 8545,
-      network_id: '*', //* Match any network id
-    },
-  },
-  solc: {
-    optimizer: {
-      enabled: true,
-      runs: 500,
-    },
-  },
-}